@charset "UTF-8";
/* ==========================================================================
   TECMED SHOP — foglio di stile unico
   Scritto a mano, senza preprocessori. Tutto passa dalle variabili in :root.
   Indice:
     01 Token          02 Reset          03 Tipografia     04 Layout
     05 Componenti     06 Header         07 Hero           08 Home
     09 Prodotto       10 Carrello       11 Checkout       12 Contenuto
     13 Footer         14 Cookie         15 Animazioni     16 Utilità
   ========================================================================== */

/* ── 00 · FONT ──────────────────────────────────────────────────────────── */
/* Montserrat ospitato sul nostro server: nessuna richiesta a Google, quindi
   nessun dato del visitatore esce dal sito solo per caricare il carattere.
   Font variabile: un unico file copre tutti i pesi da 300 a 800. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* ── 01 · TOKEN ─────────────────────────────────────────────────────────── */
:root {
  /* Tipografia — per cambiare i font del sito bastano queste tre righe */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Montserrat", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scala tipografica, rapporto 1.25 su base 16px */
  --fs-100: 0.8rem;
  --fs-200: 0.9rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: clamp(1.25rem, 0.6vw + 1.1rem, 1.4rem);
  --fs-600: clamp(1.5rem, 1.1vw + 1.25rem, 1.85rem);
  --fs-700: clamp(1.9rem, 2vw + 1.4rem, 2.6rem);
  --fs-800: clamp(2.3rem, 3.4vw + 1.4rem, 3.6rem);

  /* Spaziature, base 4 */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  --sezione: var(--s-9);
  --raggio: 10px;
  --raggio-s: 6px;
  --raggio-l: 16px;

  /* ── COLORE — palette principale Tec Med ──────────────────────────────
     #323062  blu       · testi, titoli, bottoni
     #F4F3F0  perla     · sfondo di tutto il sito
     #3594D0  azzurro   · occhielli, cioè le righine sopra i titoli
     Vale sull'80% del sito. Le schede di Exosomia e Tiablo hanno una
     loro identità: vedi la sezione "PALETTE PER PRODOTTO" più sotto. */
  --ground: #F4F3F0;
  --surface: #FFFFFF;
  --surface-2: #FAF9F7;
  --ink: #323062;
  --ink-soft: #6B6A88;
  --ink-faint: #3230621f;
  --line: #DEDCD6;
  --line-soft: #EAE8E3;

  --accent: #323062;
  --accent-ink: #323062;
  --accent-hover: #262552;
  --accent-soft: #E7E6F0;
  --accent-contrast: #FFFFFF;

  /* Azzurro: occhielli e dettagli. Sul perla ha contrasto 3,2:1, quindi
     va bene per etichette in maiuscoletto e icone, non per il testo lungo. */
  --occhiello: #2A7CB0;
  --occhiello-soft: #E4F0F8;

  --success: #1F6B4F;
  --success-soft: #E4F1EA;
  --warning: #8A5512;
  --warning-soft: #FBEEDC;
  --danger: #93331F;
  --danger-soft: #FAE9E4;

  --ombra-1: 0 1px 2px rgba(50, 48, 98, .05);
  --ombra-2: 0 2px 4px rgba(50, 48, 98, .05), 0 10px 24px -14px rgba(50, 48, 98, .22);
  --ombra-3: 0 4px 8px rgba(50, 48, 98, .08), 0 20px 44px -20px rgba(50, 48, 98, .3);

  --header-h: 80px;
  --header-h-min: 64px;
  --contenitore: 1200px;
  --misura: 65ch;

  --curva: cubic-bezier(.22, .61, .36, 1);
  --t-veloce: 160ms var(--curva);
  --t-media: 250ms var(--curva);
  --t-lenta: 600ms var(--curva);

  color-scheme: light;
}

/* Tema scuro: stessi colori, ruoli invertiti. Il blu diventa il fondo,
   il perla diventa il testo, l'azzurro si schiarisce per restare leggibile. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --ground: #16152B;
    --surface: #1E1D3A;
    --surface-2: #252344;
    --ink: #F4F3F0;
    --ink-soft: #A9A7C4;
    --ink-faint: #F4F3F01f;
    --line: #343160;
    --line-soft: #2A2850;

    --accent: #7C7ABF;
    --accent-ink: #B0AEE4;
    --accent-hover: #9694D4;
    --accent-soft: #2C2A55;
    --accent-contrast: #16152B;

    --occhiello: #6EB6E8;
    --occhiello-soft: #1E3348;

    --success: #6FBE95;
    --success-soft: #16291F;
    --warning: #D9A441;
    --warning-soft: #2B2113;
    --danger: #E08A72;
    --danger-soft: #2B1A15;

    --ombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --ombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .7);
    --ombra-3: 0 4px 8px rgba(0, 0, 0, .35), 0 20px 44px -20px rgba(0, 0, 0, .8);

    color-scheme: dark;
  }
}

:root[data-tema="scuro"] {
  --ground: #16152B;
  --surface: #1E1D3A;
  --surface-2: #252344;
  --ink: #F4F3F0;
  --ink-soft: #A9A7C4;
  --ink-faint: #F4F3F01f;
  --line: #343160;
  --line-soft: #2A2850;
  --accent: #7C7ABF;
  --accent-ink: #B0AEE4;
  --accent-hover: #9694D4;
  --accent-soft: #2C2A55;
  --accent-contrast: #16152B;
  --occhiello: #6EB6E8;
  --occhiello-soft: #1E3348;
  --success: #6FBE95;
  --success-soft: #16291F;
  --warning: #D9A441;
  --warning-soft: #2B2113;
  --danger: #E08A72;
  --danger-soft: #2B1A15;
  color-scheme: dark;
}


/* ── 01b · PALETTE PER PRODOTTO ─────────────────────────────────────────
   Solo sulle schede di Exosomia e Tiablo. Il body riceve da PHP
   l'attributo data-prodotto e qui si ridefiniscono i soli token di colore:
   tutto il resto del foglio di stile resta identico.

   EXOSOMIA · #9E2A8C magenta · #F4F3F0 perla · #748444 verde oliva
   Il magenta ha contrasto 7:1 sul perla, quindi regge anche sui testi.  */
body[data-prodotto="exosomia"] {
  --ground: #F4F3F0;
  --surface: #FFFFFF;
  --surface-2: #FBF6FA;
  --ink: #2E1A2A;
  --ink-soft: #6E5566;
  --line: #E4D6E0;
  --line-soft: #F0E7ED;
  --accent: #9E2A8C;
  --accent-ink: #8A2479;
  --accent-hover: #852175;
  --accent-soft: #F6E7F3;
  --accent-contrast: #FFFFFF;
  --occhiello: #5D6A36;
  --occhiello-soft: #EDF0E4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) body[data-prodotto="exosomia"] {
    --ground: #1B1019;
    --surface: #251722;
    --surface-2: #2D1C29;
    --ink: #F4F3F0;
    --ink-soft: #C0A6B8;
    --line: #452A3E;
    --line-soft: #38222F;
    --accent: #D767C2;
    --accent-ink: #E48FD3;
    --accent-hover: #E07FCC;
    --accent-soft: #3B1F35;
    --accent-contrast: #1B1019;
    --occhiello: #A8BC6C;
    --occhiello-soft: #2A3020;
  }
}

/* TIABLO · #8cadc5 azzurro polvere · #CFCECE grigio · #89d957 verde
   Sono tutti e tre chiari: nessuno regge come colore del testo, che
   resta blu scuro. I tre colori danno l'identità alla pagina attraverso
   fondi, riquadri e bottoni. */
body[data-prodotto="tiablo"] {
  --ground: #F2F5F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FA;
  --ink: #24384A;
  --ink-soft: #5B7386;
  --line: #D3DDE4;
  --line-soft: #E6EDF1;
  --accent: #2F5F7D;          /* azzurro polvere portato a contrasto 6:1 */
  --accent-ink: #2F5F7D;
  --accent-hover: #244B64;
  --accent-soft: #E4EDF3;
  --accent-contrast: #FFFFFF;
  --occhiello: #4A7A20;       /* il verde, scurito quanto basta per leggersi */
  --occhiello-soft: #EBF6E2;
  /* I colori originali restano disponibili per fondi e decorazioni */
  --tiablo-azzurro: #8CADC5;
  --tiablo-grigio: #CFCECE;
  --tiablo-verde: #89D957;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) body[data-prodotto="tiablo"] {
    --ground: #101B23;
    --surface: #17242E;
    --surface-2: #1C2C38;
    --ink: #EAF1F5;
    --ink-soft: #9DB3C1;
    --line: #2A3F4F;
    --line-soft: #213241;
    --accent: #8CADC5;
    --accent-ink: #A8C4D8;
    --accent-hover: #A0BFD2;
    --accent-soft: #1E3241;
    --accent-contrast: #101B23;
    --occhiello: #89D957;
    --occhiello-soft: #1D2E17;
  }
}


/* ── 02 · RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-5)); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

[hidden] { display: none !important; }

.salta-al-contenuto {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--accent); color: var(--accent-contrast);
  padding: var(--s-3) var(--s-5); border-radius: var(--raggio-s);
  font-weight: 600; text-decoration: none;
  transition: top var(--t-veloce);
}
.salta-al-contenuto:focus { top: var(--s-3); color: var(--accent-contrast); }


/* ── 03 · TIPOGRAFIA ────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }

p { margin: 0 0 var(--s-4); max-width: var(--misura); }
p:last-child { margin-bottom: 0; }

/* Occhiello: la riga breve in maiuscoletto sopra i titoli. È l'elemento
   che porta l'azzurro nella pagina. */
.occhiello {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--occhiello);
  margin: 0 0 var(--s-3);
  display: block;
}

.guida { font-size: var(--fs-400); color: var(--ink-soft); max-width: 58ch; }
.piccolo { font-size: var(--fs-200); color: var(--ink-soft); }
.minuscolo { font-size: var(--fs-100); color: var(--ink-soft); }
.numerico { font-variant-numeric: tabular-nums; }

.lista-punti { margin: 0 0 var(--s-4); padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.lista-punti li { position: relative; padding-left: var(--s-5); max-width: var(--misura); }
.lista-punti li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}


/* ── 04 · LAYOUT ────────────────────────────────────────────────────────── */
.contenitore {
  width: 100%;
  max-width: var(--contenitore);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.contenitore-stretto { max-width: 820px; }

.sezione { padding-block: var(--sezione); }
.sezione-compatta { padding-block: var(--s-7); }

.intestazione-sezione {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-7); max-width: 60ch;
}

.griglia { display: grid; gap: var(--s-5); }
.griglia-3 { grid-template-columns: repeat(3, 1fr); }
.griglia-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  :root { --sezione: var(--s-8); }
  .griglia-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --sezione: var(--s-8); }
  .contenitore { padding-inline: var(--s-4); }
  .griglia-3, .griglia-2 { grid-template-columns: 1fr; }
}

.tabella-scorrevole { overflow-x: auto; margin-bottom: var(--s-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-200); }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
th { font-weight: 600; color: var(--ink); background: var(--surface-2); }


/* ── 05 · COMPONENTI ────────────────────────────────────────────────────── */

/* Pulsanti */
.btn {
  --btn-bg: var(--accent);
  --btn-ink: var(--accent-contrast);
  --btn-bordo: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  min-height: 48px;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1.5px solid var(--btn-bordo);
  border-radius: var(--raggio-s);
  font-size: var(--fs-300); font-weight: 600; text-decoration: none;
  transition: background var(--t-veloce), border-color var(--t-veloce), transform var(--t-veloce), box-shadow var(--t-veloce);
}
.btn:hover { --btn-bg: var(--accent-hover); color: var(--btn-ink); transform: translateY(-1px); box-shadow: var(--ombra-2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-secondario { --btn-bg: transparent; --btn-ink: var(--ink); --btn-bordo: var(--line); }
.btn-secondario:hover { --btn-bg: var(--surface-2); --btn-bordo: var(--accent); --btn-ink: var(--ink); box-shadow: none; }

.btn-testo {
  --btn-bg: transparent; --btn-ink: var(--accent-ink);
  padding-inline: 0; min-height: auto; text-decoration: underline;
}
.btn-testo:hover { --btn-bg: transparent; box-shadow: none; transform: none; }

.btn-blocco { width: 100%; }
.btn-grande { min-height: 56px; font-size: var(--fs-400); padding-inline: var(--s-7); }

/* Campi */
.campo { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.campo > label { font-size: var(--fs-200); font-weight: 600; }
.campo .facoltativo { font-weight: 400; color: var(--ink-soft); }

.input, .select, .textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--raggio-s);
  transition: border-color var(--t-veloce), box-shadow var(--t-veloce);
}
.textarea { min-height: 110px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-soft); opacity: .7; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-8);
}

.campo.errore .input, .campo.errore .select, .campo.errore .textarea { border-color: var(--danger); }
.messaggio-errore {
  display: none; align-items: center; gap: var(--s-2);
  font-size: var(--fs-200); color: var(--danger);
}
.messaggio-errore::before {
  content: "!"; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: var(--surface);
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.campo.errore .messaggio-errore { display: flex; }

/* Checkbox */
.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; margin-bottom: var(--s-4); }
.check input[type="checkbox"] {
  appearance: none; flex: none; margin-top: 3px;
  width: 20px; height: 20px;
  border: 1.5px solid var(--ink-soft); border-radius: 4px;
  background: var(--surface); position: relative;
  transition: background var(--t-veloce), border-color var(--t-veloce);
}
.check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--accent-contrast); border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.check span { font-size: var(--fs-200); }
.check.errore input[type="checkbox"] { border-color: var(--danger); }

/* Selettore quantità */
.qta { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--raggio-s); overflow: hidden; background: var(--surface); }
.qta button {
  width: 44px; height: 46px; border: 0; background: transparent;
  font-size: var(--fs-400); color: var(--ink); line-height: 1;
  transition: background var(--t-veloce);
}
.qta button:hover { background: var(--surface-2); }
.qta input {
  width: 48px; height: 46px; border: 0; text-align: center;
  background: transparent; font-variant-numeric: tabular-nums; font-weight: 600;
  -moz-appearance: textfield;
}
.qta input::-webkit-outer-spin-button, .qta input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px 10px; border-radius: 99px;
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: .04em; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent-ink);
}
.badge-sconto { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.badge-esaurito { background: var(--ink-faint); color: var(--ink-soft); }

/* Avvisi */
.avviso {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--raggio);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--fs-200);
  margin-bottom: var(--s-5);
}
.avviso p { margin-bottom: var(--s-2); }
.avviso p:last-child { margin-bottom: 0; }
.avviso-ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.avviso-attenzione { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.avviso-errore { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

/* Briciole */
.briciole { font-size: var(--fs-200); color: var(--ink-soft); padding-block: var(--s-5) 0; }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.briciole li + li::before { content: "/"; margin-right: var(--s-2); color: var(--ink-soft); }

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--fs-300);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-media);
}
.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion summary:hover { color: var(--accent-ink); }
.accordion .corpo { padding-bottom: var(--s-5); color: var(--ink-soft); }
.accordion .corpo p, .accordion .corpo li { color: var(--ink-soft); }

/* Blocco dei dati tecnici: accetta titoletti, elenchi e tabelle
   (per esempio la tabella nutrizionale dell'integratore). */
.blocco-tecnico h2, .blocco-tecnico h3 {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--occhiello);
  margin: var(--s-5) 0 var(--s-3);
}
.blocco-tecnico > :first-child { margin-top: 0; }
.blocco-tecnico table { font-size: var(--fs-200); margin-bottom: var(--s-2); }
.blocco-tecnico th { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.blocco-tecnico td { color: var(--ink-soft); }
.blocco-tecnico td:not(:first-child), .blocco-tecnico th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.blocco-tecnico .tabella-scorrevole { margin-bottom: var(--s-4); }

/* Immagine mancante */
.img-mancante {
  display: grid; place-items: center; width: 100%;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 12px, var(--line-soft) 12px, var(--line-soft) 24px);
  border: 1px dashed var(--line);
  border-radius: var(--raggio-s);
  color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--fs-100);
  text-align: center; padding: var(--s-4);
}


/* ── 06 · HEADER ────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-media), border-color var(--t-media);
}
.header .barra {
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--header-h);
  transition: height var(--t-media);
}
.header.compatto { border-bottom-color: var(--line); box-shadow: var(--ombra-1); }
.header.compatto .barra { height: var(--header-h-min); }

.logo { display: flex; align-items: center; flex: none; text-decoration: none; color: var(--ink); }
.logo img, .logo svg { height: 40px; width: auto; transition: height var(--t-media); }
.header.compatto .logo img, .header.compatto .logo svg { height: 34px; }
.logo .nome { font-family: var(--font-display); font-size: var(--fs-500); font-weight: 600; letter-spacing: -.02em; }
.logo .nome span { color: var(--accent-ink); }

.nav-principale { margin-left: auto; }
.nav-principale ul { display: flex; align-items: center; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nav-principale a {
  position: relative; text-decoration: none; color: var(--ink);
  font-size: var(--fs-200); font-weight: 500; padding-block: var(--s-2);
}
.nav-principale a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-media);
}
.nav-principale a:hover::after, .nav-principale a[aria-current="page"]::after { transform: scaleX(1); }

.azioni-header { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.btn-icona {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: var(--raggio-s);
  background: transparent; color: var(--ink); text-decoration: none;
  transition: background var(--t-veloce);
}
.btn-icona:hover { background: var(--accent-soft); color: var(--ink); }
.btn-icona svg { width: 22px; height: 22px; }

.contatore-carrello {
  position: absolute; top: 6px; right: 5px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 99px; background: var(--accent); color: var(--accent-contrast);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.contatore-carrello[hidden] { display: none; }
.btn-icona.pulsa svg { animation: pulsazione .5s var(--curva); }
@keyframes pulsazione { 0%,100% { transform: scale(1); } 40% { transform: scale(1.22); } }

.apri-menu { display: none; }

@media (max-width: 900px) {
  .apri-menu { display: grid; }
  .nav-principale {
    position: fixed; inset: 0; z-index: 100;
    background: var(--ground);
    padding: calc(var(--header-h) + var(--s-6)) var(--s-5) var(--s-6);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--t-media), transform var(--t-media);
  }
  .nav-principale.aperto { opacity: 1; transform: none; pointer-events: auto; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principale li { border-bottom: 1px solid var(--line-soft); }
  .nav-principale a { display: block; padding: var(--s-4) 0; font-size: var(--fs-400); }
  .nav-principale a::after { display: none; }
  body.menu-aperto { overflow: hidden; }
}


/* ── 07 · HERO ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: clamp(560px, 82vh, 760px);
  overflow: hidden;
  background: var(--surface-2);
  isolation: isolate;
}
@media (max-width: 640px) { .hero { height: 70vh; min-height: 500px; } }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 800ms var(--curva), visibility 0s linear 800ms;
}
.hero-slide.attiva { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Senza JavaScript la prima slide si vede comunque, completa */
html:not(.js) .hero-slide:first-child { opacity: 1; visibility: visible; }
html:not(.js) .hero-controlli { display: none; }

.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media .img-mancante {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  border: 0; border-radius: 0;
}
.hero-slide.attiva .hero-media img { animation: zoomLento 7s linear forwards; }
@keyframes zoomLento { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Sfumatura dal basso: la foto resta viva in alto, il testo si legge sempre.
   Il velo deve reggere anche su un'immagine chiara, non solo su una scura. */
.hero-velo {
  position: absolute; inset: 0;
  background:
    /* colonna sinistra scurita: è lì che va il testo, e la foto può
       essere chiara in quel punto */
    linear-gradient(to right, rgba(14, 13, 34, .80) 0%, rgba(14, 13, 34, .62) 30%,
                              rgba(14, 13, 34, .30) 56%, rgba(14, 13, 34, 0) 78%),
    /* e una velatura dal basso, per staccare dalla sezione successiva */
    linear-gradient(to top, rgba(14, 13, 34, .60) 0%, rgba(14, 13, 34, .30) 28%,
                            rgba(14, 13, 34, .08) 55%, rgba(14, 13, 34, 0) 80%);
}
/* Su telefono il testo occupa tutta la larghezza: la sfumatura laterale non
   serve più, serve invece che il fondo sia scuro sotto il blocco di testo. */
@media (max-width: 640px) {
  .hero-velo {
    background: linear-gradient(to top,
      rgba(14, 13, 34, .90) 0%, rgba(14, 13, 34, .84) 34%,
      rgba(14, 13, 34, .60) 58%, rgba(14, 13, 34, .26) 80%,
      rgba(14, 13, 34, .06) 100%);
  }
}

.hero-testo {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: var(--s-9);
  color: #fff;
}
.hero-testo .occhiello { color: #9FD8E1; }
.hero-testo h1 { color: #fff; max-width: 16ch; margin-bottom: var(--s-4); }
.hero-testo p { color: rgba(255, 255, 255, .88); max-width: 46ch; font-size: var(--fs-400); margin-bottom: var(--s-6); }

.hero-slide.attiva .hero-testo .occhiello,
.hero-slide.attiva .hero-testo h1,
.hero-slide.attiva .hero-testo p,
.hero-slide.attiva .hero-testo .btn { animation: salita 700ms var(--curva) backwards; }
.hero-slide.attiva .hero-testo .occhiello { animation-delay: 120ms; }
.hero-slide.attiva .hero-testo h1 { animation-delay: 240ms; }
.hero-slide.attiva .hero-testo p { animation-delay: 360ms; }
.hero-slide.attiva .hero-testo .btn { animation-delay: 480ms; }
@keyframes salita { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero .btn { background: #fff; color: #0B3B46; border-color: #fff; }
.hero .btn:hover { background: #E6F4F6; color: #072D36; }

.hero-controlli {
  position: absolute; left: 0; right: 0; bottom: var(--s-6); z-index: 3;
}
.hero-controlli .contenitore { display: flex; align-items: center; gap: var(--s-4); }
.hero-indicatori { display: flex; gap: var(--s-3); }
.hero-indicatori button {
  position: relative; width: 56px; height: 3px; padding: 12px 0;
  border: 0; background: transparent;
}
.hero-indicatori button::before {
  content: ""; position: absolute; inset: 12px 0;
  background: rgba(255, 255, 255, .35); border-radius: 99px;
}
.hero-indicatori button::after {
  content: ""; position: absolute; inset: 12px auto 12px 0; width: 0;
  background: #fff; border-radius: 99px;
}
.hero-indicatori button[aria-selected="true"]::after { width: 100%; transition: width 6s linear; }
.hero-indicatori button.in-pausa::after { transition: none; }

.hero-frecce { margin-left: auto; display: flex; gap: var(--s-2); opacity: 0; transition: opacity var(--t-media); }
.hero:hover .hero-frecce, .hero:focus-within .hero-frecce { opacity: 1; }
.hero-frecce button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
  background: rgba(6, 20, 24, .3); color: #fff;
  transition: background var(--t-veloce);
}
.hero-frecce button:hover { background: rgba(6, 20, 24, .6); }
@media (max-width: 900px) { .hero-frecce { display: none; } }

.hero-annuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


/* ── 08 · HOME ──────────────────────────────────────────────────────────── */

/* Fascia di rassicurazione */
.rassicurazioni { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.rassicurazioni ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5); list-style: none; margin: 0; padding: var(--s-5) 0;
}
.rassicurazioni li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-200); }
.rassicurazioni svg { width: 22px; height: 22px; flex: none; color: var(--accent-ink); }
.rassicurazioni strong { display: block; font-size: var(--fs-200); }
.rassicurazioni span { color: var(--ink-soft); font-size: var(--fs-100); }
@media (max-width: 900px) {
  .rassicurazioni ul {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-inline: var(--s-4); margin-inline: calc(var(--s-4) * -1);
  }
  .rassicurazioni li { scroll-snap-align: start; flex: 0 0 auto; min-width: 60%; }
}

/* Card prodotto */
.card-prodotto {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raggio);
  overflow: hidden;
  transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}
.card-prodotto:hover { transform: translateY(-4px); box-shadow: var(--ombra-3); border-color: transparent; }
.card-prodotto .media { position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: 1; }
.card-prodotto .media img, .card-prodotto .media .img-mancante {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-media);
}
.card-prodotto:hover .media img { transform: scale(1.04); }
.card-prodotto .media .badge { position: absolute; top: var(--s-3); left: var(--s-3); background: var(--surface); }
.card-prodotto .media .badge-sconto { left: auto; right: var(--s-3); background: var(--danger-soft); }

.card-prodotto .corpo { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.card-prodotto h3 { margin: 0; font-size: var(--fs-500); }
.card-prodotto h3 a { color: inherit; text-decoration: none; }
/* Il titolo NON copre più tutta la card: dentro ci sono due pulsanti
   distinti e devono restare cliccabili singolarmente. */
.card-prodotto .media { position: relative; }
.card-prodotto .corpo { position: relative; }
.card-prodotto .formato { font-size: var(--fs-200); color: var(--ink-soft); }
.card-prodotto .estratto { font-size: var(--fs-200); color: var(--ink-soft); margin: 0; }
.card-prodotto .piede {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: auto; padding-top: var(--s-4);
}
.card-prodotto .azioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
/* Quando il pulsante è uno solo occupa tutta la riga */
.card-prodotto .azioni:has(> :only-child) { grid-template-columns: 1fr; }
.card-prodotto .azioni .btn { padding-inline: var(--s-3); min-height: 46px; font-size: var(--fs-200); }
.card-prodotto .azioni form { display: contents; }
.card-prodotto .azioni .btn-esaurito {
  grid-column: 1 / -1;
  background: var(--surface-2); color: var(--ink-soft);
  border-color: var(--line); cursor: not-allowed;
}
.card-prodotto .azioni .btn-esaurito:hover { transform: none; box-shadow: none; background: var(--surface-2); }
@media (max-width: 380px) { .card-prodotto .azioni { grid-template-columns: 1fr; } }

.prezzo { display: flex; align-items: baseline; gap: var(--s-2); font-variant-numeric: tabular-nums; }
.prezzo .attuale { font-size: var(--fs-500); font-weight: 600; font-family: var(--font-display); }
.prezzo .listino { font-size: var(--fs-200); color: var(--ink-soft); text-decoration: line-through; }

/* Blocco narrativo a due colonne */
.blocco-due {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-9); align-items: center;
}
.blocco-due.invertito .media { order: 2; }
.blocco-due .media { position: relative; overflow: hidden; border-radius: var(--raggio-l); }
.blocco-due .media img, .blocco-due .media .img-mancante { width: 100%; border-radius: var(--raggio-l); }
@media (max-width: 900px) {
  .blocco-due { grid-template-columns: 1fr; gap: var(--s-6); }
  .blocco-due.invertito .media { order: 0; }
}

/* Fascia in evidenza */
.fascia-evidenza { position: relative; overflow: hidden; isolation: isolate; }
.fascia-evidenza .sfondo { position: absolute; inset: 0; z-index: -2; }
.fascia-evidenza .sfondo img, .fascia-evidenza .sfondo .img-mancante { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* Il velo prende il colore del prodotto: le due tinte arrivano da PHP */
.fascia-evidenza::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--velo-a, rgba(24, 22, 56, .9)) 0%,
    var(--velo-a, rgba(24, 22, 56, .9)) 34%,
    var(--velo-b, rgba(53, 148, 208, .34)) 100%);
}
.fascia-evidenza.fascia-destra::after {
  background: linear-gradient(260deg,
    var(--velo-a, rgba(24, 22, 56, .9)) 0%,
    var(--velo-a, rgba(24, 22, 56, .9)) 34%,
    var(--velo-b, rgba(53, 148, 208, .34)) 100%);
}
.fascia-evidenza.fascia-destra .contenitore { display: flex; justify-content: flex-end; }
.fascia-evidenza .contenuto { max-width: 46ch; color: #fff; padding-block: var(--s-9); }
.fascia-evidenza h2 { color: #fff; }
.fascia-evidenza p { color: rgba(255, 255, 255, .88); }
.fascia-evidenza .occhiello { color: rgba(255, 255, 255, .78); }
.fascia-evidenza .btn { background: #fff; color: #262552; border-color: #fff; }
.fascia-evidenza .btn:hover { background: #F4F3F0; color: #16152B; }
.fascia-evidenza + .fascia-evidenza { border-top: 1px solid rgba(255, 255, 255, .12); }


/* ── 09 · SCHEDA PRODOTTO ───────────────────────────────────────────────── */
.prodotto-griglia {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-9); align-items: start;
  padding-block: var(--s-6) var(--sezione);
}
@media (max-width: 900px) { .prodotto-griglia { grid-template-columns: 1fr; gap: var(--s-6); } }

.galleria { position: sticky; top: calc(var(--header-h) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 900px) { .galleria { position: static; } }

.galleria-principale {
  position: relative; overflow: hidden;
  border-radius: var(--raggio); background: var(--surface); border: 1px solid var(--line);
  aspect-ratio: 1;
}
.galleria-principale img, .galleria-principale .img-mancante { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .galleria-principale.zoom img { transition: transform var(--t-media); }
  .galleria-principale.zoom:hover img { transform: scale(1.7); }
}
.galleria-miniature { display: flex; gap: var(--s-3); }
.galleria-miniature button {
  width: 78px; padding: 0; overflow: hidden; background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--raggio-s);
  aspect-ratio: 1; transition: border-color var(--t-veloce);
}
.galleria-miniature button[aria-current="true"] { border-color: var(--accent); }
.galleria-miniature img, .galleria-miniature .img-mancante { width: 100%; height: 100%; object-fit: cover; }

.prodotto-info > * + * { margin-top: var(--s-4); }
.prodotto-info h1 { margin-bottom: var(--s-1); }
.prodotto-info .sottotitolo { font-size: var(--fs-400); color: var(--ink-soft); margin: 0; }
.prodotto-info .formato { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--ink-soft); }

.riga-acquisto { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
.riga-acquisto .btn { flex: 1; min-width: 220px; }

.info-spedizione {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--raggio); font-size: var(--fs-200);
}
.info-spedizione div { display: flex; gap: var(--s-3); align-items: flex-start; }
.info-spedizione svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent-ink); }

/* Barra acquisto fissa su mobile */
.barra-acquisto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px -18px rgba(0, 0, 0, .5);
  transform: translateY(110%); transition: transform var(--t-media);
}
.barra-acquisto.visibile { transform: none; }
.barra-acquisto .btn { flex: 1; }
@media (max-width: 900px) { .barra-acquisto { display: flex; } }

.blocco-normativo {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
  font-size: var(--fs-200);
}


/* ── 10 · CARRELLO ──────────────────────────────────────────────────────── */
.carrello-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-7); align-items: start; }
@media (max-width: 900px) { .carrello-layout { grid-template-columns: 1fr; } }

.riga-carrello {
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) 0; border-bottom: 1px solid var(--line-soft);
}
.riga-carrello:first-child { border-top: 1px solid var(--line-soft); }
.riga-carrello .media { border-radius: var(--raggio-s); overflow: hidden; background: var(--surface-2); aspect-ratio: 1; }
.riga-carrello .media img, .riga-carrello .media .img-mancante { width: 100%; height: 100%; object-fit: cover; }
.riga-carrello h3 { font-size: var(--fs-400); margin-bottom: 2px; }
.riga-carrello h3 a { color: inherit; text-decoration: none; }
.riga-carrello .comandi { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.riga-carrello .totale-riga { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .riga-carrello { grid-template-columns: 72px 1fr; }
  .riga-carrello .totale-riga { grid-column: 2; text-align: right; }
}

.riepilogo {
  position: sticky; top: calc(var(--header-h) + var(--s-5));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raggio); padding: var(--s-5);
}
.riepilogo h2 { font-size: var(--fs-500); }
.riepilogo dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); }
.riepilogo dt { color: var(--ink-soft); font-size: var(--fs-200); }
.riepilogo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.riepilogo .totale { border-top: 1px solid var(--line); padding-top: var(--s-4); font-size: var(--fs-500); font-weight: 600; }
.riepilogo .totale dt { color: var(--ink); font-size: var(--fs-400); }

/* Codice sconto */
.coupon {
  border: 1px dashed var(--line);
  border-radius: var(--raggio-s);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  background: var(--surface-2);
}
.coupon.applicato { border-style: solid; border-color: var(--success); background: var(--success-soft); }
.coupon label { display: block; font-size: var(--fs-200); font-weight: 600; margin-bottom: var(--s-3); }
.coupon-riga { display: flex; gap: var(--s-2); }
.coupon-riga .input { flex: 1; min-width: 0; min-height: 44px; }
.coupon-riga .btn { min-height: 44px; flex: none; padding-inline: var(--s-5); }
.coupon-errore {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-200); color: var(--danger); margin: var(--s-3) 0 0;
}
.coupon-errore::before {
  content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: var(--surface);
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.coupon-attivo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.coupon-attivo .piccolo { display: block; color: var(--success); }
.coupon-codice {
  font-weight: 700; letter-spacing: .06em; color: var(--success);
  font-variant-numeric: tabular-nums;
}
.voce-sconto { color: var(--success) !important; font-weight: 600; }

.barra-soglia { margin-bottom: var(--s-5); }
.barra-soglia .traccia { height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; margin-top: var(--s-2); }
.barra-soglia .riempimento { height: 100%; background: var(--accent); border-radius: 99px; transition: width var(--t-lenta); }
.barra-soglia.raggiunta .riempimento { background: var(--success); }

.carrello-vuoto { text-align: center; padding-block: var(--s-9); }
.carrello-vuoto svg { width: 56px; height: 56px; color: var(--ink-soft); margin: 0 auto var(--s-5); }


/* ── 11 · CHECKOUT ──────────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-7); align-items: start; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-layout .riepilogo { position: static; order: -1; } }

.gruppo-campi { margin-bottom: var(--s-7); }
.gruppo-campi > h2 { font-size: var(--fs-500); margin-bottom: var(--s-5); }
.riga-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
.riga-campi-3 { grid-template-columns: 1fr 1.4fr .8fr; }
@media (max-width: 640px) { .riga-campi, .riga-campi-3 { grid-template-columns: 1fr; } }

.metodi-pagamento { display: flex; flex-direction: column; gap: var(--s-3); }
.metodo {
  border: 1.5px solid var(--line); border-radius: var(--raggio);
  padding: var(--s-4) var(--s-5); background: var(--surface);
  transition: border-color var(--t-veloce);
}
.metodo:hover { border-color: var(--accent); }
#contenitore-paypal { min-height: 52px; }
#campi-carta { margin-top: var(--s-4); }
/* I campi della carta sono riquadri di PayPal, serviti da un loro indirizzo.
   Il fondo interno resta bianco: PayPal non permette di cambiarlo. La casella
   e' quindi bianca anche sul tema scuro, cosi' il riquadro non si vede. */
.campo-carta {
  height: 48px; padding: 0; overflow: hidden;
  display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: var(--raggio-s);
  background: #ffffff;
}
.campo-carta > div { width: 100%; }
.campo-carta.paypal-field-focus { border-color: var(--accent); }
.campo-carta.paypal-field-invalid { border-color: var(--danger); }

.riepilogo-mobile { display: none; }
@media (max-width: 900px) { .riepilogo-mobile { display: block; } }


/* ── 12 · PAGINE DI CONTENUTO ───────────────────────────────────────────── */
.avanzamento-lettura {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 3px; width: 0; background: var(--accent);
  transition: width 80ms linear;
}

.contenuto-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .contenuto-layout { grid-template-columns: 1fr; gap: var(--s-5); } }

.indice { position: sticky; top: calc(var(--header-h) + var(--s-5)); font-size: var(--fs-200); }
.indice h2 { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s-3); }
.indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); border-left: 2px solid var(--line); }
.indice a { display: block; padding: var(--s-2) var(--s-4); color: var(--ink-soft); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.indice a:hover { color: var(--ink); }
.indice a.attivo { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .indice { position: static; } .indice ul { flex-direction: row; flex-wrap: wrap; border-left: 0; } }

.testo-lungo { max-width: var(--misura); }
.testo-lungo h2 { font-size: var(--fs-600); margin-top: var(--s-8); }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo h3 { margin-top: var(--s-6); }
.testo-lungo ul { padding-left: var(--s-5); }
.testo-lungo li { margin-bottom: var(--s-2); }


/* ── 13 · FOOTER ─────────────────────────────────────────────────────────
   Fondo blu del marchio, con il logo bianco. I token vengono ridefiniti
   qui dentro: resta lo stesso in ogni pagina, anche su quelle dei prodotti
   che hanno una loro palette, così il piede del sito è sempre Tec Med. */
.footer {
  --ink: #F4F3F0;
  --ink-soft: #ADABC8;
  --line: #45437A;
  --line-soft: #3D3B6E;
  --occhiello: #8FC5EA;
  --accent-ink: #9FC9E8;
  --accent-hover: #C6DFF2;
  background: #323062;
  border-top: 0;
  margin-top: var(--sezione);
  color: var(--ink);
}
.footer .logo .nome { color: #F4F3F0; }
.footer .logo .nome span { color: #8FC5EA; }
.footer-griglia {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--s-7); padding-block: var(--s-8);
}
@media (max-width: 900px) { .footer-griglia { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (max-width: 640px) { .footer-griglia { grid-template-columns: 1fr; } }

.footer h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-100); letter-spacing: .12em; text-transform: uppercase; color: var(--occhiello); margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.footer a { color: var(--ink); text-decoration: none; font-size: var(--fs-200); }
.footer a:hover { color: var(--accent-hover); text-decoration: underline; }
.footer .descrizione { font-size: var(--fs-200); color: var(--ink-soft); max-width: 34ch; margin-top: var(--s-4); }
.footer img { height: 42px; width: auto; }

.footer-legale {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-100); color: var(--ink-soft);
}
.footer-legale p { margin: 0; max-width: none; }
.metodi-icone { display: flex; gap: var(--s-2); align-items: center; }
.metodi-icone svg { height: 24px; width: auto; }


/* ── 14 · BANNER COOKIE ─────────────────────────────────────────────────── */
.cookie {
  position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 150;
  max-width: 560px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raggio); box-shadow: var(--ombra-3);
  padding: var(--s-5);
  transform: translateY(16px); opacity: 0;
  transition: opacity var(--t-media), transform var(--t-media);
}
.cookie.visibile { transform: none; opacity: 1; }
.cookie h2 { font-size: var(--fs-400); margin-bottom: var(--s-2); }
.cookie p { font-size: var(--fs-200); color: var(--ink-soft); margin-bottom: var(--s-4); }
.cookie-azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Rifiuta e Accetta hanno esattamente lo stesso peso visivo: è un obbligo,
   non una scelta di stile. */
.cookie-azioni .btn { flex: 1; min-width: 130px; }
.cookie-azioni .btn-rifiuta,
.cookie-azioni .btn-accetta { min-height: 46px; font-size: var(--fs-200); }
.cookie-azioni .btn-rifiuta { background: transparent; color: var(--ink); border-color: var(--line); }
.cookie-azioni .btn-rifiuta:hover { background: var(--surface-2); border-color: var(--ink-soft); color: var(--ink); }
.cookie .chiudi { position: absolute; top: var(--s-3); right: var(--s-3); width: 36px; height: 36px; border: 0; background: transparent; border-radius: 50%; color: var(--ink-soft); }
.cookie .chiudi:hover { background: var(--surface-2); }


/* ── 14b · WHATSAPP ─────────────────────────────────────────────────────
   Un semplice link a wa.me: nessuno script esterno, nessun cookie,
   niente che parta prima del consenso. */
.whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 130;
  display: flex; align-items: center; gap: var(--s-3);
  height: 58px; padding: 0 19px;
  background: #25D366; color: #06331A;
  border-radius: 99px; text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .14), 0 12px 28px -10px rgba(37, 211, 102, .6);
  transform: translateY(90px) scale(.9); opacity: 0; pointer-events: none;
  transition: transform var(--t-media), opacity var(--t-media), box-shadow var(--t-veloce);
}
.whatsapp.visibile { transform: none; opacity: 1; pointer-events: auto; }
.whatsapp:hover { color: #06331A; box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 16px 34px -10px rgba(37, 211, 102, .75); }
.whatsapp svg { width: 30px; height: 30px; flex: none; }
.whatsapp .etichetta {
  font-size: var(--fs-200); font-weight: 700; white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width var(--t-media), opacity var(--t-media);
}
.whatsapp:hover .etichetta, .whatsapp:focus-visible .etichetta { max-width: 190px; opacity: 1; }
@media (max-width: 640px) {
  .whatsapp { right: 14px; bottom: 14px; height: 54px; padding: 0 12px; }
  .whatsapp .etichetta { display: none; }
}
/* Su mobile la barra "aggiungi al carrello" occupa il fondo: si alza */
body:has(.barra-acquisto.visibile) .whatsapp { bottom: 88px; }

/* ── 14c · MAPPA A RICHIESTA ────────────────────────────────────────────
   La mappa di Google non viene caricata finché non la si chiede:
   chi non clicca non manda nulla a Google. */
.mappa { border: 1px solid var(--line); border-radius: var(--raggio); overflow: hidden; background: var(--surface-2); }
.mappa-anteprima {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 22px, var(--line-soft) 22px, var(--line-soft) 23px),
    var(--surface-2);
}
.mappa-anteprima p { font-size: var(--fs-200); color: var(--ink-soft); margin: 0; }
.mappa iframe { display: block; width: 100%; height: 340px; border: 0; }

/* ── 15 · ANIMAZIONI ────────────────────────────────────────────────────── */
/* Gli stati iniziali si applicano SOLO se il JavaScript è attivo: senza,
   il contenuto è già visibile e leggibile. */
html.js .rivela { opacity: 0; transform: translateY(16px); }
html.js .rivela.visibile {
  opacity: 1; transform: none;
  transition: opacity var(--t-lenta), transform var(--t-lenta);
}
html.js .rivela.visibile:nth-child(2) { transition-delay: 80ms; }
html.js .rivela.visibile:nth-child(3) { transition-delay: 160ms; }
html.js .rivela.visibile:nth-child(4) { transition-delay: 240ms; }

.parallasse { will-change: transform; }

/* Notifica carrello */
.notifiche { position: fixed; top: calc(var(--header-h) + var(--s-3)); right: var(--s-4); z-index: 140; display: flex; flex-direction: column; gap: var(--s-2); }
.notifica {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--success);
  border-radius: var(--raggio-s); box-shadow: var(--ombra-3);
  padding: var(--s-3) var(--s-5); font-size: var(--fs-200);
  animation: entraNotifica 300ms var(--curva);
  max-width: 340px;
}
.notifica.uscita { animation: esceNotifica 300ms var(--curva) forwards; }
@keyframes entraNotifica { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes esceNotifica { to { opacity: 0; transform: translateX(16px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .rivela { opacity: 1; transform: none; }
  .hero-slide.attiva .hero-media img { animation: none; }
}


/* ── 16 · UTILITÀ ───────────────────────────────────────────────────────── */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.centrato { text-align: center; }
.pila { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.riga { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.sfondo-superficie { background: var(--surface); }
.sfondo-alt { background: var(--surface-2); }