/* ══════════════════════════════════════════════════════════════
   LILLOFIND — Theme v3 «Evoluzione pulita»
   Da caricare DOPO style.css e dopo i <style> di index.html.
   Regole:
   · 1 colore brand (salvia) + 1 solo accento "drop" (arancio bruciato)
     usato SOLO per urgenza / sconti / sold-out imminente.
   · Niente lime/neon residuo del vecchio tema LED.
   · Testo minimo 10.5px, contrasto AA (≥4.5:1) su tutto il testo piccolo.
   · Badge: 3 tipi, stessa forma (radius 6px, maiuscolo, 10px, 700).
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  --k:#1d1d1a;            /* inchiostro */
  --w:#f6f3ee;            /* crema pagina */
  --card:#ffffff;
  --led:#5f6744;          /* salvia brand (bianco sopra = 6:1) */
  --led-hover:#4d5437;
  --led2:#a9b183;         /* salvia chiaro — SOLO su fondi scuri */
  --accent-soft:#eceee3;
  --drop:#b8471f;         /* accento unico: urgenza / promo (bianco sopra = 5.3:1) */
  --drop-soft:#f7e4da;
  --mid:#5c5b54;          /* testo secondario */
  --dim:#64625a;          /* era #a6a49b (2.2:1) → ≥4.5:1 anche sui beige più scuri (#e8e4da) */
  --border:#e6e1d6;
  --border-2:#d3ccbe;
  --ink-soft:#34342f;
  /* Ruoli separati (in chiaro coincidono con --k/--w/--led; in scuro no):
     --ink = superfici scure fisse (banner, chip, toast), --on-ink = testo su di esse,
     --led-text = salvia usato come colore del testo (i fondi restano --led) */
  --ink:#1d1d1a;
  --on-ink:#f6f3ee;
  --led-text:var(--led);
  --danger:#c0392b;       /* azioni distruttive / errori (5.4:1 su bianco) */
  --dg1:var(--led2);      /* il banner Digital usa la palette brand, niente taupe */
  --dg2:var(--led);
  --tier-bronze:#b07a4a; --tier-silver:#8f99a5; --tier-gold:#c9a24d; --tier-plat:#7aa7b8;
  /* Tipografia: titoli Archivo (semi-espanso), testo Geist, etichette/codici Geist Mono */
  --font-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --font-body:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --badge-r:6px;
  --ring:0 0 0 3px rgba(95,103,68,.22);
}
body{background:var(--w);font-family:var(--font-body);}
/* Titoli e numeri grandi: un filo più stretti, l'Archivo semi-espanso è già largo */
.bb,.lf-section-title,h1,h2{letter-spacing:-.015em;}
/* Icone (set Phosphor in icons.svg): stessa altezza del testo, colore del testo */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;fill:currentColor;flex-shrink:0;}
.ic-tier{color:var(--tier-color,var(--led-text));}
.ic-heart-on{color:#d64545;}
.wish-btn .ic,#prod-wish-btn .ic{width:18px;height:18px;vertical-align:middle;}
.hcc-emo .ic{width:1em;height:1em;}

/* ── 1b. DARK MODE (Impostazioni → Aspetto; html[data-theme="dark"]) ── */
:root[data-theme="dark"]{
  color-scheme:dark;
  --w:#141412;            /* pagina */
  --card:#1d1c19;         /* card e pannelli */
  --k:#efece5;            /* testo principale */
  --ink:#0c0c0b;          /* superfici scure: restano scure */
  --on-ink:#f6f3ee;
  --mid:#c4c1b7; --dim:#a7a49a; --ink-soft:#dcd9cf;
  --border:#2d2c28; --border-2:#3e3c36;
  --accent-soft:#252a1d;
  --led-text:#b5bd8f;     /* salvia leggibile su fondo scuro (≥7:1) */
  --danger:#ff8a7a;
  --drop-soft:#3a2117;
  --ring:0 0 0 3px rgba(181,189,143,.3);
}
:root[data-theme="dark"] img{filter:none;}
:focus-visible{outline:none;box-shadow:var(--ring)!important;border-radius:8px;}

/* ── 2. TIPOGRAFIA ─────────────────────────────────────────── */
.bnav-lbl{font-size:10px!important;letter-spacing:.2px!important;}
/* Prezzi e numeri: cifre tabellari, niente "ballo" */
.bb,#m-pts,#home-pts,#home-spent{font-variant-numeric:tabular-nums;}
/* Titoli sezione: tracking stretto e coerente */
h2.bb{letter-spacing:-.02em!important;}

/* ── 3. BADGE SYSTEM (Novità · Urgenza · Stile) ─────────────── */
/* Una sola forma: radius 6px, 10px, 700, maiuscolo, tracking .08em */
.lf-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--badge-r);
  font-size:10px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 8px;white-space:nowrap;}
.lf-badge--new{background:var(--card);color:var(--k);box-shadow:0 1px 6px rgba(0,0,0,.08);}
.lf-badge--new::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--led);}
.lf-badge--drop{background:var(--drop);color:#fff;}
.lf-badge--soldout{background:var(--ink);color:#fff;}
.lf-badge--style{background:var(--accent-soft);color:var(--led-text);}
.lf-badge-pos{position:absolute;top:12px;left:12px;z-index:3;}
.carousel-card .lf-badge-pos{top:8px;left:8px;}
/* Eyebrow: etichetta sopra i titoli di sezione */
.lf-eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--mid);}
.lf-eyebrow--on-dark{color:var(--led2);}
/* Titolo di sezione (h2) */
.lf-section-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  line-height:1.02;font-size:clamp(28px,5vw,48px);}
/* Bottone secondario su fondo scuro */
.btn-g.btn-g--on-dark{border-color:rgba(246,243,238,.4)!important;color:var(--on-ink)!important;}
.btn-g.btn-g--on-dark:hover{background:var(--on-ink)!important;color:var(--ink)!important;}
.led-badge{
  border:1px solid rgba(95,103,68,.28)!important;background:var(--accent-soft)!important;
  box-shadow:none!important;border-radius:999px!important;
  font-size:10.5px!important;letter-spacing:.14em!important;font-weight:700;
  color:var(--led-text)!important;padding:6px 12px!important;}

/* ── 4. CARD PRODOTTO ──────────────────────────────────────── */
.pcard{border-color:var(--border)!important;border-radius:18px!important;}
.pcard h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;font-size:13.5px!important;}
.pcard .btn-led{width:40px;height:40px;padding:0!important;border-radius:12px!important;font-size:18px!important;}
/* Taglie: chip su desktop, una riga sola ("Taglie XS–XXL") su mobile */
.pc-sizes{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;}
.pc-sizes span{border:1px solid var(--border-2);border-radius:6px;padding:2px 7px;font-size:10.5px;color:var(--mid);}
.pc-sizes-compact{display:none;font-size:11.5px;color:var(--mid);margin-bottom:10px;}
@media(max-width:520px){ /* su mobile 2 colonne: le chip sono rumore */
  .pc-sizes{display:none;}
  .pc-sizes-compact{display:block;}
}
.carousel-card{border-radius:16px!important;border-color:#2a2a26!important;}
/* Cuore wishlist: il cerchio resta bianco anche in dark mode, quindi icona sempre scura */
.wish-btn{color:#1d1d1a;}
/* Avviso "catalogo in aggiornamento" (prodotti non raggiungibili) */
.lf-cat-down{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--k);}
.lf-cat-down .ic{width:26px;height:26px;color:var(--led-text);}
.lf-cat-down b{display:block;font-size:15px;}
.lf-cat-down span{display:block;font-size:13px;color:var(--mid);margin-top:2px;}

/* ── 5. BOTTONI / CTA ──────────────────────────────────────── */
.btn-led{background:var(--led)!important;}
.btn-led:hover{background:var(--led-hover)!important;}
.btn-g{border:1.5px solid var(--k)!important;color:var(--k)!important;background:transparent!important;}
.btn-g:hover{background:var(--k)!important;color:var(--w)!important;}
.sport-banner-cta{background:var(--on-ink)!important;color:var(--ink)!important;}
.sport-banner:hover .sport-banner-cta{background:#fff!important;}

/* ── 6. SEZIONI / BANNER ───────────────────────────────────── */
#brand-showcase{background:var(--w)!important;}
#home-tier{color:var(--tier-color,var(--led2))!important;}
.brand-tile{border:1px solid var(--border)!important;border-radius:14px!important;transition:border-color .2s,transform .2s;}
.brand-tile:hover{border-color:var(--k)!important;transform:translateY(-2px);}

/* ── 7. HUD: punti, livello, navigazione ───────────────────── */
#m-badge{
  background:var(--ink)!important;color:#fff!important;font-weight:700;font-size:11.5px!important;
  padding:6px 11px 6px 8px!important;display:inline-flex;align-items:center;gap:6px;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.12);}   /* display senza !important: lo style inline display:none lo nasconde */
#m-pts{font-weight:800;}
.m-badge-u{font-weight:600;opacity:.75;margin-left:-3px;}
/* "+N" quando i punti aumentano */
.lf-pts-plus{position:absolute;right:4px;top:calc(100% + 6px);font-size:11.5px;font-weight:800;color:#fff;
  background:var(--led);border-radius:999px;padding:3px 8px;box-shadow:0 2px 6px rgba(0,0,0,.15);white-space:nowrap;
  pointer-events:none;animation:lf-pts-plus 1.4s ease-out forwards;font-variant-numeric:tabular-nums;}
@keyframes lf-pts-plus{0%{opacity:0;transform:translateY(-6px);}18%{opacity:1;transform:translateY(0);}
  75%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(4px);}}
/* Header mobile: logo più compatto, così il chip punti non lo copre */
/* Header mobile: con la bottom nav il profilo è già lì → nell'header resta solo il chip
   punti, e il logo si accorcia un po' così il chip non lo copre mai */
@media(max-width:768px){#m-prof-btn{display:none!important;}}
@media(max-width:420px){#mob-logo{font-size:21px!important;letter-spacing:3px!important;}}
@media(max-width:340px){#mob-logo{font-size:18px!important;letter-spacing:2px!important;}}
#m-badge::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--tier-color,var(--tier-bronze));box-shadow:0 0 0 3px rgba(255,255,255,.14);}
/* Saldo LFPoints in home: numero pieno, non outline */
#home-pts{color:var(--on-ink)!important;-webkit-text-stroke:0!important;letter-spacing:-.03em;}
.lf-hud{margin-top:18px;max-width:340px;}
.lf-hud-bar{height:8px;border-radius:99px;background:rgba(246,243,238,.12);overflow:hidden;}
.lf-hud-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--led2),#d6dcb4);
  transition:width 1s cubic-bezier(.2,.7,.2,1);}
.lf-hud-txt{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:rgba(246,243,238,.72);}
.lf-hud-txt b{color:var(--on-ink);}
/* Bottom nav: indicatore attivo a pillola */
.bnav-btn{color:var(--dim)!important;}   /* era #7d7b72 (4.2:1) → AA */
.bnav-btn.active{color:var(--k)!important;font-weight:700;}
.bnav-btn.active .bnav-icon{background:var(--accent-soft);border-radius:999px;width:54px;}
.bnav-btn.active .bnav-icon svg{color:var(--led-text);}
/* Badge numerico su carrello/wishlist nella bottom nav */
.bnav-btn .cart-badge,.bnav-btn #wish-badge{width:auto!important;min-width:18px;height:18px!important;padding:0 5px;
  border-radius:999px!important;font-size:10.5px!important;font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--card);line-height:18px;}
/* Torna su: più piccolo, rotondo, non copre il "+" delle card */
#back-top{width:40px!important;height:40px!important;border-radius:50%!important;border-left:none!important;
  color:#fff!important;background:rgba(29,29,26,.82)!important;backdrop-filter:blur(6px);
  bottom:calc(84px + env(safe-area-inset-bottom))!important;right:12px!important;font-size:16px!important;}
@media(min-width:769px){#back-top{bottom:28px!important;right:24px!important;}} /* niente bottom nav su desktop */
/* Toast */
#toast{border-radius:12px!important;text-transform:none!important;letter-spacing:.2px!important;
  font-size:13px!important;border-bottom:none!important;box-shadow:0 10px 30px rgba(0,0,0,.2);
  /* su 360px i messaggi lunghi uscivano dallo schermo da entrambi i lati: vanno a capo */
  white-space:normal!important;width:max-content;max-width:calc(100vw - 32px);text-align:center;}
@media(max-width:768px){#toast{bottom:calc(76px + env(safe-area-inset-bottom))!important;}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}