/* TALISMIA — mobile.css v3 */

/* ── 0. CLASSI MANCANTI (globali) ── */
.ico-xl  { width: 40px; height: 40px; }
.ico-2xl { width: 72px; height: 72px; }

/* ── A. MOBILE NAV ── */
@media (max-width: 1100px) {
  .mobile-nav { right:0; transform:translateX(100%); transition:transform .4s cubic-bezier(.25,.46,.45,.94); will-change:transform; max-width:100%; }
  .mobile-nav.open { transform:translateX(0); }
}

/* ── B. ANTI-OVERFLOW + MIN-WIDTH ── */
@media (max-width: 1100px) {
  html, body { overflow-x:hidden; width:100%; max-width:100%; }
  body { overflow-wrap:break-word; word-wrap:break-word; }
  [class*="grid"] > *, [class*="layout"] > *, .shop-products-area, .shop-products-grid > *, .product-card, .product-card-body, .product-card-footer > * { min-width:0; }
  .product-card-name, .product-card-desc, h1, h2, h3 { overflow-wrap:anywhere; }
  img, video { max-width:100%; height:auto; }
}

/* ── C. CONTAINER, FORM, FONT ── */
@media (max-width: 768px) {
  .container, .container-sm, .container-xs { padding-left:1.1rem; padding-right:1.1rem; }
  input, select, textarea, .form-input, .form-textarea, .form-select, .shop-search-input, .shop-price-input, .shop-sort-select { font-size:16px; max-width:100%; }
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns:1fr !important; }
  .shop-filter-widget input, .shop-filter-widget select { width:100%; min-width:0; }
  .contact-form-wrap { padding:1.5rem 1.2rem; }
  .auth-box { padding:2rem 1.25rem; }
  .btn .ico, .btn svg { width:1.05em; height:1.05em; flex-shrink:0; }
}

/* ── D. HERO HOME ── */
@media (max-width: 768px) {
  #heroContent { padding-top:4rem !important; padding-bottom:4rem !important; }
  #heroContent .btn { flex:0 1 100%; max-width:300px; justify-content:center; margin-inline:auto; }
}
@media (max-width: 480px) {
  #heroSection { min-height:88vh; }
}

/* ── E. SPIRIT BANNER ── */
@media (max-width: 768px) {
  .spirit-banner { padding:5rem 0; }
  .spirit-icon-wrap { position:relative; overflow:visible; }
  .spirit-icon-wrap .ico-2xl { width:52px; height:52px; }
  .spirit-btns { flex-direction:column; align-items:center; }
  .spirit-btns .btn { width:100%; max-width:280px; justify-content:center; }
}

/* ── F. BENEFIT SECTION ── */
@media (max-width: 600px) {
  .ben-num { font-size:3.5rem; opacity:.03; }
  .ben-item { padding:2.5rem 1.5rem; }
}

/* ── G. SHOP COMPLETO ── */
@media (max-width: 768px) {
  .shop-hero-premium { padding:90px 0 44px; }
  .shop-body { padding:32px 0 64px; }

  /* Pills nascosti (rinforzo) */
  .shop-cat-pills { display:none !important; }

  /* Sidebar */
  .shop-sidebar-premium { gap:8px; }
  .shop-filter-widget { padding:1.1rem; }

  /* Lista categorie: ogni item sulla propria riga */
  .shop-cat-list { display:flex !important; flex-direction:column !important; gap:2px; }
  .shop-cat-item { display:flex !important; width:100%; padding:.7rem .75rem; justify-content:space-between; align-items:center; }

  /* Search button: dentro il campo */
  .shop-search-btn { position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; height:100% !important; width:40px; }

  /* Toolbar */
  .shop-toolbar-premium { flex-wrap:wrap; gap:.75rem; }
  .shop-sort-select { flex:1 1 auto; }

  /* PRODOTTI 2 PER RIGA — ID selector batte classi */
  #productsGrid:not(.shop-list-view) { grid-template-columns:repeat(2, 1fr) !important; gap:.75rem; }

  /* Bestseller homepage */
  .bs-section .bs-grid { grid-template-columns:repeat(2, 1fr) !important; gap:.75rem; }

  /* Products grid generica homepage */
  .home-section .products-grid,
  .home-dark-section .products-grid,
  .home-mid-section .products-grid { grid-template-columns:repeat(2, 1fr) !important; gap:.75rem; }
}

@media (max-width: 380px) {
  #productsGrid:not(.shop-list-view), .bs-section .bs-grid { gap:.5rem; }
}

/* ── H. CART, ACCOUNT, CHI-SIAMO ── */
@media (max-width: 768px) {
  .cart-item { gap:.75rem; }
  .cart-item-img { width:78px !important; height:78px !important; }
  .cs-story-grid, .cs-sel-grid, .cs-qualita-grid { gap:2rem !important; }
  .cs-hero-content { padding:100px 1.1rem 60px; }
  .nav-icon-btn { min-width:40px; min-height:40px; }
}

/* ── I. CONTATTI ── */
@media (max-width: 768px) {
  .contact-info-icon { width:40px; height:40px; flex-shrink:0; }
  .contact-grid { gap:2rem; }
}

/* ── J. COOKIE BANNER ── */
@media (max-width: 768px) {
  #cookieBanner { flex-direction:column; align-items:stretch; text-align:center; padding:.9rem 1.1rem; gap:.65rem; }
}

/* ── K. TABELLE ACCOUNT ── */
@media (max-width: 768px) {
  .account-main table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
}


/* ════════════════════════════════════════════════════════════
   v4 — AGGIUNTE MIRATE
   ════════════════════════════════════════════════════════════ */

/* ── 1. PRODUCT CARDS — più corte e compatte (≤ 768px) ──────
   Il problema: aspect-ratio 1:1 + descrizione + stelle + bottone
   rendono le card altissime. Soluzione: immagine 4:3, descrizione
   nascosta, padding ridotto, bottone compatto.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Immagine meno alta (4:3 invece di 1:1) */
  .product-card-image,
  .product-card-img { aspect-ratio: 4 / 3 !important; }

  /* Descrizione breve: nascosta — risparmia ~2 righe per card */
  .product-card-desc { display: none !important; }

  /* Corpo: padding ridotto */
  .product-card-body { padding: .8rem .8rem .95rem !important; }

  /* Categoria: più compatta */
  .product-card-cat { margin-bottom: .3rem; }

  /* Titolo: font leggermente ridotto */
  .product-card-name { font-size: .95rem !important; margin-bottom: .35rem !important; }

  /* Stelle: nascondi su card piccole */
  .product-card-stars { display: none !important; }

  /* Footer: prezzo + bottone più compatti */
  .product-card-footer { padding-top: .6rem !important; gap: .35rem !important; }
  .product-card-price  { font-size: 1rem !important; }

  /* Bottone AGGIUNGI: compatto ma toccabile */
  .product-card-footer .btn-sm,
  .product-card-footer .btn-outline {
    padding: 9px 10px !important;
    font-size: 8.5px !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap;
  }
}


/* ── 2. FOOTER — testo leggibile + 1 colonna (≤ 768px) ─────
   Il problema: color var(--text-dim) = rgba(...,0.35) = 35% opacità,
   quasi invisibile su sfondo nero. Sul mobile è illeggibile.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Forza 1 colonna (il ≤640px di style.css a volte non scatta) */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Testo descrizione brand: leggibile */
  .footer-brand-desc { color: rgba(245,240,232,.65) !important; }

  /* Link navigazione: ben visibili */
  .footer-links a {
    color: rgba(245,240,232,.72) !important;
    font-size: .88rem !important;
  }

  /* Testo copyright */
  .footer-copy   { color: rgba(245,240,232,.55) !important; }

  /* Email e testi generici nel footer */
  .site-footer p,
  .site-footer small { color: rgba(245,240,232,.55) !important; }

  /* Riduce padding verticale del footer */
  .site-footer { padding: 56px 0 32px; }
}


/* ── 3. BENEFIT SECTION — più densa e visiva (≤ 768px) ─────
   Il problema: 1 colonna + troppo whitespace = aspetto grezzo.
   Soluzione: 2 colonne, icone più "calde", padding compatto.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 2 colonne anche su telefono piccolo */
  .ben-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Item: più compatto, sfondo sottile per separazione visiva */
  .ben-item {
    padding: 2rem .9rem 1.75rem !important;
    background: rgba(214,168,79,.018) !important;
  }

  /* Icona: cerchio esterno più visibile */
  .ben-icon {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 1.25rem !important;
  }
  .ben-icon::before { border-color: rgba(214,168,79,.4) !important; }

  /* Titolo */
  .ben-title { font-size: 1rem !important; }

  /* Descrizione: testo più leggibile */
  .ben-desc {
    font-size: .78rem !important;
    max-width: none !important;
    color: rgba(245,240,232,.55) !important;
  }
}


/* ════════════════════════════════════════════════════════════
   v5 — TESTO PIÙ CHIARO + FOOTER
   ════════════════════════════════════════════════════════════ */

/* ── TUTTO IL SITO: variabili CSS più brillanti su mobile ───
   --text-dim  era rgba(245,240,232, 0.35) → quasi invisibile
   --text-muted era rgba(245,240,232, 0.60) → poco leggibile
   Sovrascrivendo :root in media query, ogni elemento che usa
   var(--text-dim) o var(--text-muted) — sia in CSS che in
   style="" inline — diventa automaticamente più leggibile.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-dim:   rgba(245,240,232, 0.70);   /* +100% opacità */
    --text-muted: rgba(245,240,232, 0.85);   /* +40% opacità  */
    --border:     rgba(214,168,79,  0.22);   /* bordi legg. visibili */
  }
}

/* ── FOOTER: collassa a 1 colonna (selettore corretto) ──────
   Il selettore nel footer.php era sbagliato: puntava alla
   colonna brand, non alla griglia padre. Questo lo corregge.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer .container > div:first-of-type {
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    padding: 3rem 0 2.5rem !important;
  }
}


/* ════════════════════════════════════════════════════════════
   v6 — SHOP: PRODOTTI PRIMA, SIDEBAR COLLASSABILE
   ════════════════════════════════════════════════════════════ */

/* ── Su mobile: products area prima (order:1), sidebar dopo (order:2) ── */
@media (max-width: 1100px) {
  .shop-layout-premium {
    display: flex !important;
    flex-direction: column !important;
  }
  .shop-products-area  { order: 1; }
  .shop-sidebar-premium{ order: 0; }  /* sopra i prodotti quando visibile */

  /* Sidebar collassata (classe aggiunta via JS) */
  #shopSidebar.sidebar-collapsed { display: none !important; }

  /* ── TOGGLE BUTTON ── */
  .shop-filter-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .9rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--bg-warm);
    border: 1px solid var(--border-md);
    color: var(--gold);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-family: var(--sans);
    font-weight: 400;
    cursor: pointer;
    transition: border-color .25s, background .25s;
  }
  .shop-filter-toggle:hover {
    border-color: var(--gold);
    background: rgba(214,168,79,.06);
  }
  .shop-filter-toggle svg {
    color: var(--gold);
    opacity: .85;
  }
}

/* ── Su desktop: bottone toggle nascosto, sidebar sempre visibile ── */
@media (min-width: 1101px) {
  .shop-filter-toggle { display: none !important; }
  #shopSidebar.sidebar-collapsed { display: flex !important; }
}


/* ════════════════════════════════════════════════════════════
   v7 — FIX HAMBURGER + TOGGLE
   ════════════════════════════════════════════════════════════ */

/* ── NAV-CTA ("Shop" text button) nascosto su mobile ────────
   Occupa spazio nel nav e spinge il toggle hamburger fuori schermo.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-cta { display: none !important; }
}

/* ── SIDEBAR: stato collapsed gestito via JS style.display ──
   Rimuove il conflitto classe/CSS che bloccava il toggle su iOS.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #shopSidebar.sidebar-collapsed { display: none !important; }  /* fallback per compatibilità */
}


/* ════════════════════════════════════════════════════════════
   v8 — NAV COMPATTA SU MOBILE
   ─────────────────────────────────────────────────────────
   Problema: padding:0 2.5rem + gap:3rem + logo + 4 icone =
   ~488px su un viewport da 390px → hamburger tagliato fuori.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Padding nav ridotto: risparmia ~56px */
  .nav-inner {
    padding: 0 .85rem !important;
    gap: 0 !important;
  }

  /* Logo più compatto */
  .nav-logo-img {
    height: 36px !important;
    max-width: 140px !important;
  }

  /* Azioni: gap ridotto */
  .nav-actions { gap: .3rem !important; }

  /* Icone: leggermente più piccole */
  .nav-icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  /* Hamburger: rimane ben toccabile */
  .nav-toggle {
    width: 34px !important;
    height: 34px !important;
  }
}