/* ============================================================
   SANTANI SICILIA — design system
   Bottega dei Nebrodi: charcoal della linea tartufo,
   bianco etichetta, maiolica policroma come filo conduttore.
   ============================================================ */

/* Caratteri serviti dal sito stesso: niente attesa di Google Fonts.
   font-display:swap = il testo si legge subito col carattere di sistema
   e viene sostituito appena il carattere vero e' pronto. */
@font-face{
  font-family:'Marcellus'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/marcellus-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/work-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/work-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/work-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* superfici */
  --bg:#f7f8f5;
  --surface:#ffffff;
  --charcoal:#26272c;
  --charcoal-2:#2e3036;
  --charcoal-line:#3d4046;
  --truffle-bg:linear-gradient(168deg,#232428 0%,#1b1c1f 55%,#151619 100%);

  /* inchiostri */
  --ink:#23252a;
  --ink-2:#4b4e56;
  --paper-ink:#f2f0e9;      /* testo su charcoal */
  --paper-ink-2:#c7c4b8;

  /* maiolica */
  --verde:#2e5c49;
  --verde-deep:#234739;
  --pistacchio:#5f7f3a;
  --teal:#2f6f7e;
  --ambra:#c9822e;
  --ambra-text:#8a5517;
  --lampone:#96304c;
  --nocciola:#7a5634;
  --oro:#d9b36a;
  --sun:#ff9742;

  --line:#e2e3dc;
  --radius:12px;
  --radius-s:8px;

  --font-display:'Marcellus',serif;
  --font-body:'Work Sans',system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);

  /* z-scale */
  --z-nav:100;
  --z-drawer:200;
  --z-modal:300;
  --z-lightbox:500;   /* la lente sta sopra la scheda prodotto */
  --z-toast:600;

  --pad-x:clamp(1.25rem,4.5vw,4rem);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
::selection{background:var(--oro);color:var(--charcoal)}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.01em;
  text-wrap:balance;
}
p{max-width:68ch;text-wrap:pretty}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}

/* ---------- fascia mandala Santani (separatore firma) ---------- */
.maiolica{
  height:26px;
  background-image:url("../img/cornice-h.png");
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 26px;
}
.maiolica--flip{transform:scaleY(-1)}

/* cornice completa in maiolica attorno a un blocco */
.cornice{
  position:relative;
  padding:26px;
  background:
    url("../img/cornice-h.png") top left repeat-x,
    url("../img/cornice-h.png") bottom left repeat-x,
    url("../img/cornice-v.png") top left repeat-y,
    url("../img/cornice-v.png") top right repeat-y;
  background-size:auto 26px, auto 26px, 26px auto, 26px auto;
}
.cornice__in{background:var(--surface);border-radius:2px;overflow:hidden}
.body--dark .cornice__in{background:var(--charcoal-2)}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:var(--z-nav);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header__in{
  max-width:var(--maxw);margin-inline:auto;
  padding:.7rem var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.header__logo img{height:44px;width:auto}
.nav{display:flex;gap:1.7rem;align-items:center;list-style:none}
.nav a{
  text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-2);
  padding-block:.35rem;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--verde);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}

.header__actions{display:flex;align-items:center;gap:.5rem}
.cart-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--ink);border-radius:99px;
  padding:.5rem 1rem;font-size:.9rem;font-weight:500;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.cart-btn:hover{background:var(--ink);color:var(--bg)}
.cart-btn__n{
  min-width:1.35rem;height:1.35rem;border-radius:99px;
  background:var(--lampone);color:#fff;font-size:.75rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;padding-inline:.3rem;
}
.menu-btn{display:none;padding:.5rem;border-radius:var(--radius-s)}
.menu-btn svg{display:block}

/* menu mobile */
.mnav{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:var(--truffle-bg);
  color:var(--paper-ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad-x);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s;
}
.mnav.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.mnav ul{list-style:none;display:grid;gap:.4rem}
.mnav a{
  font-family:var(--font-display);font-size:clamp(1.9rem,8vw,2.6rem);
  text-decoration:none;padding-block:.3rem;display:inline-block;
}
.mnav a[aria-current="page"]{color:var(--oro)}
.mnav__close{position:absolute;top:1.1rem;right:var(--pad-x);padding:.6rem}
.mnav .maiolica{position:absolute;left:0;right:0;bottom:0}

/* ---------- hero home ---------- */
.hero{
  position:relative;background:var(--truffle-bg);
  color:var(--paper-ink);
  min-height:min(88vh,860px);display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;background:var(--charcoal)}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  /* Su schermo largo il taglio è basso e stretto: partendo dall'alto si
     vedono i filari del noccioleto sullo sfondo e le nocciole a terra
     sul bordo inferiore. Sul telefono il taglio è alto e stretto e va
     spostato più in basso, altrimenti resta solo erba. */
  object-position:center 5%;
  opacity:.52;
}
@media (max-width:900px){
  .hero__media img{ object-position:center 42%; }
}
/* due velature sovrapposte: il testo resta leggibile senza spegnere la foto */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--charcoal) 4%,transparent 55%);
}
.hero__in{
  position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(5rem,12vh,8rem) var(--pad-x) clamp(2.5rem,6vh,4rem);
}
.hero h1{
  font-size:clamp(2.5rem,6.5vw,4.6rem);
  max-width:15ch;color:#fff;
}
.hero p{margin-top:1.1rem;font-size:clamp(1rem,1.6vw,1.2rem);max-width:52ch;color:var(--paper-ink)}
.hero__cta{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero__loc{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;
  color:var(--oro);font-size:.95rem;font-weight:500;
}
.hero__loc svg{flex:none}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border-radius:99px;padding:.85rem 1.7rem;
  font-weight:500;font-size:.97rem;text-decoration:none;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--verde);color:#fff}
.btn--solid:hover{background:var(--verde-deep)}
.btn--paper{background:var(--paper-ink);color:var(--charcoal)}
.btn--paper:hover{background:#fff}
.btn--ghost{border:1px solid currentColor}
.btn--ghost:hover{background:var(--paper-ink);color:var(--charcoal);border-color:var(--paper-ink)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{background:#000}
.btn--wa{background:#1faa53;color:#fff}
.btn--wa:hover{background:#178a43}

/* ---------- sezioni ---------- */
.sec{padding-block:clamp(3.5rem,9vw,6.5rem)}
.sec--tight{padding-block:clamp(2.5rem,6vw,4rem)}
.sec-head{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);margin-bottom:clamp(2rem,5vw,3.2rem)}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.8rem);max-width:22ch}
.sec-head .lede{margin-top:.8rem;color:var(--ink-2);font-size:1.05rem}
.sec--charcoal{background:var(--charcoal);color:var(--paper-ink)}
.sec--charcoal .sec-head .lede{color:var(--paper-ink-2)}
.sec--charcoal h2,.sec--charcoal h3{color:#fff}

/* ---------- home: categorie editoriali ---------- */
.cats{display:grid;gap:clamp(2.5rem,7vw,5rem)}
.cat{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.cat:nth-child(even){direction:rtl}
.cat:nth-child(even)>*{direction:ltr}
.cat__img{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);
}
.cat__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cat:hover .cat__img img{transform:scale(1.04)}
.cat__body h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.cat__body .cat-mark{width:52px;height:6px;border-radius:3px;margin-bottom:1.1rem}
.cat__body p{margin-top:.8rem;color:var(--ink-2)}
.cat__link{
  margin-top:1.4rem;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:500;text-decoration:none;color:var(--verde);
}
.cat__link svg{transition:transform .3s var(--ease)}
.cat__link:hover svg{transform:translateX(4px)}

/* ---------- filiera ---------- */
.filiera{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2.2rem;
}
.filiera div h3{font-size:1.25rem;margin-bottom:.5rem;color:#fff}
.filiera div p{color:var(--paper-ink-2);font-size:.97rem}
.filiera .f-ico{
  width:46px;height:46px;border-radius:99px;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--charcoal-2);color:var(--oro);
  border:1px solid var(--charcoal-line);
}

/* ---------- pagine store ---------- */
.page-hero{
  background:var(--charcoal);color:var(--paper-ink);
  padding:clamp(3rem,8vw,5rem) 0 clamp(2.2rem,5vw,3.2rem);
  position:relative;overflow:hidden;
}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);color:#fff;max-width:18ch}
.page-hero .lede{margin-top:.9rem;color:var(--paper-ink-2);font-size:1.05rem;max-width:56ch}
.page-hero .crumb{font-size:.85rem;margin-bottom:1.2rem}
.page-hero .crumb a{color:var(--paper-ink-2);text-decoration:none}
.page-hero .crumb a:hover{color:#fff}
.page-hero .crumb span{color:var(--oro)}

.price-note{
  max-width:var(--maxw);margin:1.5rem auto 0;padding-inline:var(--pad-x);
  font-size:.85rem;color:var(--ink-2);
}

/* griglia prodotti */
.grid{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1.4rem;
}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .35s var(--ease);
}
.card:hover{border-color:var(--ink);transform:translateY(-3px)}
.card__img{
  aspect-ratio:4/3;overflow:hidden;cursor:pointer;position:relative;
  background:#eceee8;border:0;padding:0;display:block;width:100%;
}
/* <picture> non deve creare un riquadro suo: l'immagine resta figlia
   diretta del contenitore e tutte le regole esistenti continuano a valere */
picture{display:contents}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__img img{transform:scale(1.05)}
.card__img .zoom{
  position:absolute;right:.7rem;bottom:.7rem;
  width:2.1rem;height:2.1rem;border-radius:99px;
  background:color-mix(in srgb,var(--charcoal) 82%,transparent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s var(--ease);
}
.card:hover .zoom,.card__img:focus-visible .zoom{opacity:1}
.card__body{
  padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.25rem;flex:1;
  position:relative;isolation:isolate;
}
.card__body::before{
  content:"";position:absolute;z-index:-1;
  right:-1.5rem;bottom:-1.5rem;width:9rem;height:9rem;
  background:url("../img/mandala-santani-transparent.png") no-repeat center/contain;
  opacity:.07;pointer-events:none;
}
.card__cat{font-size:.78rem;font-weight:600;letter-spacing:.02em}
.card__name{font-family:var(--font-display);font-size:1.18rem;line-height:1.25}
.card__w{font-size:.85rem;color:var(--ink-2)}
.card__foot{margin-top:auto;padding-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.card__price{font-weight:600;font-size:1.05rem}
.card__price small{display:block;font-weight:400;font-size:.72rem;color:var(--ink-2)}
.add-btn{
  border:1px solid var(--verde);color:var(--verde);
  border-radius:99px;padding:.45rem 1rem;font-size:.88rem;font-weight:500;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.add-btn:hover{background:var(--verde);color:#fff}

/* ---------- modale prodotto ---------- */
/* ============================================================
   FINESTRA DEL PRODOTTO
   La foto sta sopra, larga quanto tutta la finestra, e occupa
   più di metà dell'altezza dello schermo. Su un monitor da
   1600 px significa una foto da circa 1240 px di larghezza:
   prima ne mostravo una da 513, ed era il motivo per cui
   sembrava piccola e sfocata.
   ============================================================ */
/* Pannello normale, non piu' l'elemento <dialog>: vedi la nota in store.js.
   Sta fisso sullo schermo, quindi non puo' far scorrere la pagina. */
.pmodal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.pmodal[hidden]{display:none}
.pmodal__velo{position:absolute;inset:0;background:rgba(24,25,28,.6)}
.pmodal__in{
  position:relative;z-index:1;
  width:min(1240px,calc(100vw - 2rem));
  max-height:calc(100dvh - 2rem);
  background:var(--surface);color:var(--ink);
  border-radius:var(--radius);overflow:hidden auto;
  display:flex;flex-direction:column;min-height:0;
  isolation:isolate;              /* il pulsante di chiusura sta sopra a tutto */
}

.pmodal__gallery{
  position:relative;overflow:hidden;flex:none;
  background:#e7e9e2;
  height:min(58dvh,640px);
  border-bottom:1px solid var(--line);
  cursor:zoom-in;
}
.pmodal__gallery img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  position:absolute;inset:0;padding:.6rem;
}
/* invito allo zoom, discreto, in un angolo */
.pmodal__zoomhint{
  position:absolute;right:.8rem;bottom:.8rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  background:color-mix(in srgb,var(--charcoal) 80%,transparent);color:#fff;
  border-radius:99px;padding:.35rem .8rem;font-size:.78rem;
  pointer-events:none;
}
.pmodal__gallery .card__ph{position:absolute;inset:0}
.pmodal__switch{
  position:absolute;bottom:.9rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.35rem;background:color-mix(in srgb,var(--charcoal) 85%,transparent);
  padding:.3rem;border-radius:99px;
}
.pmodal__switch button{
  color:#e8e6de;font-size:.8rem;font-weight:500;
  padding:.35rem .9rem;border-radius:99px;
}
.pmodal__switch button[aria-pressed="true"]{background:var(--paper-ink);color:var(--charcoal)}
.pmodal__body{padding:clamp(1.4rem,3vw,2.2rem)}
/* sotto la foto lo spazio è largo: su computer il testo va su due colonne,
   così la finestra resta corta e non si scorre a vuoto */
@media (min-width:901px){
  .pmodal__body{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(1.6rem,3vw,3rem);align-items:start;
  }
  .pmodal__body > h2,
  .pmodal__body > .pmodal__meta,
  .pmodal__body > #pm-fmts,
  .pmodal__body > .pmodal__price,
  .pmodal__body > .pmodal__cta{grid-column:1}
  .pmodal__body > .pmodal__info{grid-column:2;grid-row:1 / span 5;margin-top:0}
}
.pmodal__body h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.pmodal__meta{color:var(--ink-2);font-size:.92rem;margin-top:.2rem}
.pmodal__price{font-size:1.25rem;font-weight:600;margin-top:.9rem}
.pmodal__price small{font-weight:400;font-size:.78rem;color:var(--ink-2);display:block}
.pmodal__info{margin-top:1.3rem;display:grid;gap:.9rem}
.pmodal__info h3{
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.03em;color:var(--ink-2);margin-bottom:.15rem;
}
.pmodal__info p{font-size:.95rem}
.pmodal__alrg{
  background:color-mix(in srgb,var(--ambra) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ambra) 35%,var(--line));
  border-radius:var(--radius-s);padding:.7rem .9rem;font-size:.92rem;
}
.pmodal__vals{width:100%;border-collapse:collapse;font-size:.88rem}
.pmodal__vals td{padding:.3rem 0;border-bottom:1px solid var(--line)}
.pmodal__vals td:last-child{text-align:right;font-weight:500}
.pmodal__cta{margin-top:1.5rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.pmodal__close{
  position:absolute;top:.7rem;right:.7rem;z-index:20;
  width:2.75rem;height:2.75rem;border-radius:99px;   /* area di tocco da 44 px */
  touch-action:manipulation;
  background:color-mix(in srgb,var(--charcoal) 82%,transparent);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.pmodal__close:hover{background:var(--charcoal)}
/* l'icona non deve mai intercettare il tocco al posto del pulsante */
.pmodal__close svg{pointer-events:none}

/* ---------- carrello ---------- */
.cdrawer{
  position:fixed;inset:0;z-index:var(--z-drawer);
  visibility:hidden;transition:visibility 0s .4s;
}
.cdrawer.open{visibility:visible;transition:none}
.cdrawer__bg{
  position:absolute;inset:0;background:rgba(24,25,28,.55);
  opacity:0;transition:opacity .35s var(--ease);
}
.cdrawer.open .cdrawer__bg{opacity:1}
.cdrawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(430px,100vw);background:var(--surface);
  color:var(--ink);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s var(--ease);
}
/* il carrello resta sempre chiaro, anche sulle pagine dark (tartufo) */
.body--dark .cdrawer__panel{color:var(--ink)}
.body--dark .cdrawer__panel h2,
.body--dark .cdrawer__panel .citem__name,
.body--dark .cdrawer__panel .citem__price,
.body--dark .cdrawer__panel .cdrawer__tot,
.body--dark .cdrawer__panel .cdrawer__iva--sum{color:var(--ink)}
.body--dark .cdrawer__panel .citem__w,
.body--dark .cdrawer__panel .citem__rm,
.body--dark .cdrawer__panel .cdrawer__iva,
.body--dark .cdrawer__panel .cdrawer__steps,
.body--dark .cdrawer__panel .cdrawer__cont,
.body--dark .cdrawer__panel .cdrawer__n{color:var(--ink-2)}
.body--dark .cdrawer__panel .btn--wa{color:#fff}
.cdrawer.open .cdrawer__panel{transform:none}
.cdrawer__head{
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.cdrawer__head h2{font-size:1.35rem}
.cdrawer__list{flex:1;overflow-y:auto;padding:1rem 1.3rem;display:grid;gap:1rem;align-content:start}
.citem{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center}
.citem img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-s);border:1px solid var(--line)}
.citem__name{font-size:.93rem;font-weight:500;line-height:1.3}
.citem__w{font-size:.8rem;color:var(--ink-2)}
.citem__qty{display:inline-flex;align-items:center;gap:.15rem;margin-top:.35rem;border:1px solid var(--line);border-radius:99px}
.citem__qty button{width:1.7rem;height:1.7rem;border-radius:99px;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}
.citem__qty button:hover{background:var(--bg)}
.citem__qty span{min-width:1.4rem;text-align:center;font-size:.88rem;font-weight:500}
.citem__right{text-align:right;display:grid;gap:.4rem;justify-items:end}
.citem__price{font-weight:600;font-size:.95rem}
.citem__rm{color:var(--ink-2);font-size:.78rem;text-decoration:underline}
.citem__rm:hover{color:var(--lampone)}
.cdrawer__empty{text-align:center;color:var(--ink-2);padding:3rem 1rem}
.cdrawer__foot{border-top:1px solid var(--line);padding:1.1rem 1.3rem;display:grid;gap:.8rem}
.cdrawer__tot{display:flex;justify-content:space-between;font-weight:600;font-size:1.05rem}
.cdrawer__note{font-size:.8rem;color:var(--ink-2)}
.cdrawer__foot .btn--wa{width:100%}

/* toast */
.toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,150%);
  z-index:var(--z-toast);
  background:var(--charcoal);color:var(--paper-ink);
  padding:.8rem 1.4rem;border-radius:99px;font-size:.92rem;
  transition:transform .45s var(--ease);
  display:flex;align-items:center;gap:.6rem;white-space:nowrap;
}
.toast.show{transform:translate(-50%,0)}
.toast svg{color:var(--oro)}

/* ---------- tartufo page ---------- */
.body--dark{
  background:var(--truffle-bg);
  /* rimosso lo sfondo fisso: obbligava il telefono a
     ridisegnare tutto lo sfondo a ogni fotogramma dello scorrimento */
  color:var(--paper-ink);
}
.body--dark .header{background:color-mix(in srgb,var(--charcoal) 92%,transparent);border-bottom-color:var(--charcoal-line)}
.body--dark .nav a{color:var(--paper-ink-2)}
.body--dark .nav a:hover,.body--dark .nav a[aria-current="page"]{color:#fff}
.body--dark .nav a::after{background:var(--oro)}
.body--dark .cart-btn{border-color:var(--paper-ink);color:var(--paper-ink)}
.body--dark .cart-btn:hover{background:var(--paper-ink);color:var(--charcoal)}
.body--dark .card{background:var(--charcoal-2);border-color:var(--charcoal-line);color:var(--paper-ink)}
.body--dark .card:hover{border-color:var(--oro)}
.body--dark .card__body::before{opacity:.1}
.body--dark .card__w,.body--dark .card__price small{color:var(--paper-ink-2)}
.body--dark .card__cat{color:var(--oro)}
.body--dark .add-btn{border-color:var(--oro);color:var(--oro)}
.body--dark .add-btn:hover{background:var(--oro);color:var(--charcoal)}
.body--dark .price-note{color:var(--paper-ink-2)}
.body--dark .sec-head .lede{color:var(--paper-ink-2)}
.body--dark h2,.body--dark h3{color:#fff}

.tgallery{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.tgallery figure{
  border-radius:var(--radius);overflow:hidden;position:relative;
  border:1px solid var(--charcoal-line);
}
.tgallery figure:first-child{grid-row:span 2}
.tgallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform .8s var(--ease)}
.tgallery figure:first-child img{aspect-ratio:auto;min-height:100%}
.tgallery figure:hover img{transform:scale(1.04)}
.tgallery figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .9rem .7rem;font-size:.82rem;color:var(--paper-ink);
  background:linear-gradient(to top,rgba(24,25,28,.85),transparent);
}

.exp{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.exp__img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--charcoal-line)}
.exp__img img{aspect-ratio:4/5;object-fit:cover;width:100%}
.exp h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.exp p{color:var(--paper-ink-2);margin-top:.9rem}
.exp ul{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.exp li{display:flex;gap:.6rem;align-items:baseline;color:var(--paper-ink)}
.exp li::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--oro);flex:none;transform:translateY(-1px)}
.exp .btn{margin-top:1.7rem}

/* ---------- chi siamo / racconto ---------- */
.story{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
}
.story__img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.story__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story h2{font-size:clamp(1.9rem,4vw,2.7rem)}
.story p{margin-top:.9rem;color:var(--ink-2)}
.story--flip{direction:rtl}
/* Sezione racconto senza fotografia: il testo occupa tutta la riga invece
   di restare stretto in mezza pagina con un buco accanto. */
.story:not(:has(.story__img)){ grid-template-columns:1fr; max-width:56ch; text-align:center; }
.story--flip>*{direction:ltr}

.quote{
  max-width:760px;margin-inline:auto;
  text-align:center;position:relative;
  padding:26px;
  background:
    url("../img/cornice-h.png") top left repeat-x,
    url("../img/cornice-h.png") bottom left repeat-x,
    url("../img/cornice-v.png") top left repeat-y,
    url("../img/cornice-v.png") top right repeat-y;
  background-size:auto 26px, auto 26px, 26px auto, 26px auto;
}
.quote__in{
  background:var(--bg);padding:clamp(2rem,5vw,3.2rem) clamp(1.2rem,4vw,2.6rem);
}
.sec--charcoal .quote__in,.body--dark .quote__in{background:var(--charcoal)}
@media (max-width:560px){
  .quote{margin-inline:1rem;padding:18px;background-size:auto 18px, auto 18px, 18px auto, 18px auto}
}
.quote p{
  font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.3;margin-inline:auto;
}
.quote cite{display:block;margin-top:1.2rem;font-style:normal;font-size:.95rem;color:var(--ink-2)}

/* ---------- footer ---------- */
.footer{background:var(--charcoal);color:var(--paper-ink-2)}
.footer__in{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(3rem,7vw,4.5rem) var(--pad-x) 2rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
}
.footer__brand img{height:52px;width:auto;margin-bottom:1rem}
.footer__brand p{font-size:.92rem;max-width:34ch}
.footer h4{color:#fff;font-family:var(--font-body);font-weight:600;font-size:.9rem;margin-bottom:.9rem}
.footer ul{list-style:none;display:grid;gap:.5rem}
.footer a{color:var(--paper-ink-2);text-decoration:none;font-size:.93rem}
.footer a:hover{color:#fff}
.footer__bar{
  border-top:1px solid var(--charcoal-line);
  padding:1.2rem var(--pad-x);font-size:.8rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:var(--maxw);margin-inline:auto;
}

/* ---------- reveal ---------- */
.js .rev{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rev.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rev{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
  .cat,.exp,.story{grid-template-columns:1fr}
  .cat:nth-child(even){direction:ltr}
  /* sul telefono la foto prende quasi metà schermo, poi si scorre alle info */
  .pmodal__gallery{height:min(44dvh,360px)}
  .pmodal__body{max-height:none}
  .pmodal{padding:.5rem}
  .pmodal__in{max-height:calc(100dvh - 1rem)}
  .footer__in{grid-template-columns:1fr 1fr}
  .tgallery{grid-template-columns:1fr 1fr}
  .tgallery figure:first-child{grid-column:span 2;grid-row:auto}
  .tgallery figure:first-child img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .card__body{padding:.75rem .8rem .85rem}
  .card__name{font-size:1rem}
  .card__foot{flex-direction:column;align-items:stretch;gap:.5rem}
  .add-btn{justify-content:center}
  .footer__in{grid-template-columns:1fr}
  .hero{min-height:78vh}
  .header__logo img{height:36px}
  .tgallery{grid-template-columns:1fr}
  .tgallery figure:first-child{grid-column:auto}
}

/* ============================================================
   v2 — nav dropdown, formati, micro-interazioni, bento, video
   ============================================================ */

/* ---------- nav dropdown ---------- */
.nav__drop{position:relative}
.nav__dbtn{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.92rem;font-weight:500;color:var(--ink-2);
  padding-block:.35rem;
}
.nav__dbtn svg{transition:transform .3s var(--ease)}
.nav__dbtn:hover{color:var(--ink)}
.nav__drop.open .nav__dbtn svg,.nav__drop:hover .nav__dbtn svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + .8rem);left:50%;transform:translate(-50%,8px);
  min-width:230px;list-style:none;padding:.5rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 24px -18px rgba(24,25,28,.5);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;
}
.nav__drop.open .nav__menu,.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.nav__menu a{
  display:block;padding:.55rem .8rem;border-radius:var(--radius-s);
  font-size:.9rem;text-decoration:none;color:var(--ink-2);
}
.nav__menu a:hover{background:var(--bg);color:var(--ink)}
.nav__menu a::after{content:none}
.nav__season{color:var(--ambra-text)!important;font-weight:600!important}
.body--dark .nav__dbtn{color:var(--paper-ink-2)}
.body--dark .nav__dbtn:hover{color:#fff}
.body--dark .nav__menu{background:var(--charcoal-2);border-color:var(--charcoal-line)}
.body--dark .nav__menu a{color:var(--paper-ink-2)}
.body--dark .nav__menu a:hover{background:var(--charcoal);color:#fff}

/* ---------- badge prodotto ---------- */
.badge{
  position:absolute;top:.7rem;left:.7rem;
  background:var(--sun);color:var(--charcoal);
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:.28rem .7rem;border-radius:99px;
  box-shadow:0 2px 6px rgba(24,25,28,.25);
}

/* ---------- selettore formato ---------- */
.fmts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.fmts button{
  border:1px solid var(--line);border-radius:99px;
  padding:.28rem .75rem;font-size:.8rem;font-weight:500;color:var(--ink-2);
  transition:all .25s var(--ease);
}
.fmts button:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.fmts button[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--bg);
}
.body--dark .fmts button{border-color:var(--charcoal-line);color:var(--paper-ink-2)}
.body--dark .fmts button:hover{border-color:var(--oro);color:var(--oro)}
.body--dark .fmts button[aria-pressed="true"]{background:var(--oro);border-color:var(--oro);color:var(--charcoal)}
.pmodal .fmts{margin-top:1rem}
.pmodal .fmts button{padding:.4rem 1rem;font-size:.85rem}
.card__desc{font-size:.85rem;color:var(--ink-2);margin-top:.15rem}

/* ---------- placeholder stagionali ---------- */
.card__ph{
  display:flex;align-items:flex-end;width:100%;height:100%;
  background:var(--charcoal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='14' viewBox='0 0 140 14'%3E%3Ccircle cx='17.5' cy='14' r='11' fill='%232f6f7e'/%3E%3Ccircle cx='17.5' cy='14' r='5' fill='%2326272c'/%3E%3Ccircle cx='52.5' cy='14' r='11' fill='%23c9822e'/%3E%3Ccircle cx='52.5' cy='14' r='5' fill='%2326272c'/%3E%3Ccircle cx='87.5' cy='14' r='11' fill='%232e5c49'/%3E%3Ccircle cx='87.5' cy='14' r='5' fill='%2326272c'/%3E%3Ccircle cx='122.5' cy='14' r='11' fill='%2396304c'/%3E%3Ccircle cx='122.5' cy='14' r='5' fill='%2326272c'/%3E%3C/svg%3E") repeat-x bottom/140px 14px;
}
.card__ph span{
  font-family:var(--font-display);color:var(--paper-ink);
  font-size:1.3rem;line-height:1.2;padding:1.2rem;padding-bottom:2.2rem;
  text-wrap:balance;
}
.card__ph--tall{min-height:320px}

/* ---------- micro-interazioni bottoni ---------- */
.btn,.add-btn{will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.add-btn:hover{transform:translateY(-2px)}
.add-btn:active{transform:scale(.95)}
.add-btn.added{background:var(--verde);border-color:var(--verde);color:#fff}
.add-btn.added span::after{content:" ✓"}
.btn--sun{background:var(--sun);color:var(--charcoal);font-weight:600}
.btn--sun:hover{background:#ffa85e}
.add-btn--off{
  border:1px dashed var(--line);color:var(--ink-2);border-radius:99px;
  padding:.45rem 1rem;font-size:.85rem;display:inline-flex;align-items:center;
  cursor:default;
}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.cart-btn.bump{animation:bump .45s var(--ease)}
.cart-btn__n{background:var(--sun);color:var(--charcoal)}

/* ---------- bento filiera (home) ---------- */
.bento{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(190px,auto);
  gap:1rem;
}
.bento__cell{
  background:var(--charcoal-2);border:1px solid var(--charcoal-line);
  border-radius:var(--radius);padding:1.5rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.bento__cell:hover{transform:translateY(-3px);border-color:var(--oro)}
.bento__cell h3{font-size:1.2rem;color:#fff}
.bento__cell p{color:var(--paper-ink-2);font-size:.94rem}
.bento__cell .f-ico{margin-bottom:auto}
.bento__media{
  grid-row:span 2;padding:0;overflow:hidden;position:relative;justify-content:flex-end;
}
.bento__media img,.bento__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.bento__media:hover img,.bento__media:hover video{transform:scale(1.04)}
.bento__media figcaption{
  position:relative;padding:1.5rem;color:#fff;font-size:.9rem;
  background:linear-gradient(to top,rgba(24,25,28,.85),transparent);
}

/* ---------- video ---------- */
.vidbox{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative}
.vidbox video{width:100%;display:block}
.vidbox--dark{border-color:var(--charcoal-line)}
.exp__img video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.story__img video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* ---------- carosello prodotti ----------
   Scorre da solo, in continuo. Il movimento è una sola trasformazione
   sull'intera fila, quindi il telefono la gestisce sulla scheda grafica
   senza ridisegnare nulla. Si ferma quando esce dallo schermo e quando
   lo tocchi, così non consuma mai processore per niente. */
.marquee{
  overflow:hidden;position:relative;
  padding-block:.5rem;
}
.marquee__track{
  display:flex;gap:1rem;width:max-content;
  animation:mq 55s linear infinite;
}
.marquee--ferma .marquee__track{animation-play-state:paused}
.marquee a{
  width:min(300px,68vw);flex:none;text-decoration:none;color:inherit;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;
  transition:border-color .25s var(--ease);
}
.marquee a:hover,.marquee a:focus-visible{border-color:var(--ink)}
.marquee figure{margin:0;display:contents}
.marquee img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.marquee figcaption{
  padding:.6rem .9rem;font-size:.85rem;color:var(--ink-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
}
.marquee .mq-price{font-weight:600;font-size:.85rem;color:var(--verde);white-space:nowrap}
.body--dark .marquee a{background:var(--charcoal-2);border-color:var(--charcoal-line)}
.body--dark .marquee figcaption{color:var(--paper-ink)}
@keyframes mq{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee__track{animation:none;width:auto}
}

/* ---------- carrello v2 ---------- */
.cdrawer__panel .maiolica{flex:none}
.cdrawer__n{font-family:var(--font-body);font-size:.85rem;color:var(--ink-2)}
.citem img{width:72px;height:72px}
.citem{grid-template-columns:72px 1fr auto}
.cdrawer__empty{display:grid;justify-items:center;gap:1rem;color:var(--ink-2)}
.cdrawer__empty svg{color:var(--line)}
.cdrawer__steps{
  list-style:none;counter-reset:step;display:grid;gap:.35rem;
  font-size:.82rem;color:var(--ink-2);padding:0;margin:0;
}
.cdrawer__steps li{display:flex;gap:.55rem;align-items:baseline}
.cdrawer__steps li::before{
  counter-increment:step;content:counter(step);
  flex:none;width:1.25rem;height:1.25rem;border-radius:99px;
  background:var(--bg);border:1px solid var(--line);
  font-size:.7rem;font-weight:600;display:inline-flex;
  align-items:center;justify-content:center;transform:translateY(2px);
}
.cdrawer__cont{
  font-size:.85rem;color:var(--ink-2);text-align:center;padding:.3rem;
}
.cdrawer__cont:hover{color:var(--ink)}

/* ---------- Club Santani (newsletter) ---------- */
.club{
  border-top:1px solid var(--charcoal-line);
}
.club__in{
  max-width:var(--maxw);margin-inline:auto;padding:2.2rem var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.club h4{color:#fff;font-family:var(--font-display);font-weight:400;font-size:1.35rem;margin:0}
.club p{color:var(--paper-ink-2);font-size:.9rem;margin-top:.2rem}
.club form{display:flex;gap:.5rem;flex-wrap:wrap}
.club input{
  background:var(--charcoal-2);border:1px solid var(--charcoal-line);
  color:var(--paper-ink);border-radius:99px;padding:.75rem 1.2rem;
  font:inherit;font-size:.92rem;min-width:min(280px,70vw);
}
.club input::placeholder{color:var(--paper-ink-2)}
.club input:focus{outline:2px solid var(--oro);outline-offset:1px;border-color:transparent}

/* ---------- pagine stagionali ---------- */
.season-note{
  max-width:var(--maxw);margin:0 auto;padding:.9rem var(--pad-x);
  display:flex;gap:.6rem;align-items:center;
  font-size:.9rem;color:var(--ink);
  background:color-mix(in srgb,var(--sun) 16%,var(--bg));
  border-block:1px solid color-mix(in srgb,var(--sun) 40%,var(--line));
}
.season-note svg{flex:none;color:var(--ambra-text)}

@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr}
  .bento__media{grid-row:span 2}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bento__media{grid-row:auto;min-height:240px}
  .club__in{flex-direction:column;align-items:flex-start}
  .fmts button{padding:.24rem .6rem;font-size:.75rem}
}

/* ============================================================
   v3 — tartufo premium, nocciola, lievitati, lightbox, i18n
   ============================================================ */

/* ---------- texture tartufo (foto scurita come sfondo) ---------- */
.sec--tartufo{
  position:relative;color:var(--paper-ink);
  background:var(--truffle-bg);
  
}
.sec--tartufo h2,.sec--tartufo h3{color:#fff}
.sec--tartufo .sec-head .lede{color:var(--paper-ink-2)}
.cat--tartufo{
  background:var(--truffle-bg);
  
  border-radius:var(--radius);
  padding-block:clamp(1.5rem,3vw,2.5rem);color:var(--paper-ink);
  overflow:hidden;
}
.cat--tartufo h3{color:#fff}
.cat--tartufo p{color:var(--paper-ink-2)}
.cat--tartufo .cat__link{color:var(--oro)}

/* ---------- tipologie di tartufo ---------- */
.ttypes{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;
}
.ttype{
  background:var(--charcoal-2);border:1px solid var(--charcoal-line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.ttype:hover{transform:translateY(-4px);border-color:var(--oro)}
/* Nella scheda si vede il tartufo intero. Al clic si apre la vista
   grande con accanto lo stesso tartufo tagliato a meta'. */
.ttype img{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;display:block}
.ttype__body{padding:1.2rem 1.3rem 1.4rem}
.ttype__season{
  display:inline-block;font-size:.78rem;font-weight:600;color:var(--charcoal);
  background:var(--oro);border-radius:99px;padding:.22rem .75rem;margin-bottom:.7rem;
}
.ttype h3{font-size:1.25rem;color:#fff}
.ttype .latin{font-size:.82rem;font-style:italic;color:var(--paper-ink-2)}
.ttype p{margin-top:.6rem;font-size:.92rem;color:var(--paper-ink-2)}

/* disponibilità tartufo fresco */
.tavail{
  display:inline-block;margin-top:1rem;padding:.5rem 1.1rem;border-radius:99px;
  font-size:.9rem;font-weight:600;
}
.tavail--on{background:#1faa5322;color:#7fe3a8;border:1px solid #1faa5366}
.tavail--off{background:#96304c22;color:#e3a0b3;border:1px solid #96304c66}

/* ---------- galleria video ---------- */
.vgal{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,400px));
  justify-content:center;gap:1.2rem;
}
.vgal figure{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--charcoal-line);
  position:relative;background:var(--charcoal-2);
}
.vgal video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.vgal figure.wide video{aspect-ratio:16/9}
.vgal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;
  font-size:.82rem;color:var(--paper-ink);
  background:linear-gradient(to top,rgba(24,25,28,.85),transparent);
}

/* ---------- lightbox zoom ---------- */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox);
  background:rgba(18,19,21,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.lightbox[hidden]{display:none}
.lightbox__stage{
  width:min(92vw,1000px);height:min(80dvh,780px);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  touch-action:none;cursor:zoom-in;
}
.lightbox__stage img{
  max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .25s var(--ease);will-change:transform;
  border-radius:var(--radius-s);
}
.lightbox__x{
  position:fixed;top:1rem;right:1rem;z-index:2;
  width:2.8rem;height:2.8rem;border-radius:99px;
  background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__x:hover{background:rgba(255,255,255,.25)}
.lightbox__hint{color:#b9b6ab;font-size:.82rem;margin-top:.9rem;text-align:center}
@media (prefers-reduced-motion:reduce){ .lightbox__stage img{transition:none} }

/* ---------- pagina nocciola ---------- */
.ngal{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:1rem;
}
.ngal figure{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative}
.ngal figure:nth-child(1){grid-row:span 2}
.ngal figure:nth-child(4){grid-column:span 2}
.ngal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);cursor:zoom-in}
.ngal figure:hover img{transform:scale(1.05)}
.ngal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;
  font-size:.82rem;color:#fff;
  background:linear-gradient(to top,rgba(24,25,28,.8),transparent);
}
.bio-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:color-mix(in srgb,var(--pistacchio) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--pistacchio) 40%,var(--line));
  color:var(--verde-deep);border-radius:99px;
  padding:.5rem 1.2rem;font-size:.9rem;font-weight:600;
}
.badge--bio{
  left:auto;right:.7rem;background:var(--pistacchio);color:#fff;
}
.badge--on{top:auto;bottom:.7rem;background:#1faa53;color:#fff}
.badge--off{top:auto;bottom:.7rem;background:var(--charcoal-2);color:var(--paper-ink-2);border:1px solid var(--charcoal-line)}
.pmodal__bio{
  background:color-mix(in srgb,var(--pistacchio) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--pistacchio) 35%,var(--line));
  border-radius:var(--radius-s);padding:.7rem .9rem;font-size:.92rem;color:var(--verde-deep);
}

/* ---------- timeline chi siamo ---------- */
.tl{
  max-width:900px;margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;gap:clamp(2rem,5vw,3rem);position:relative;
}
.tl::before{
  content:"";position:absolute;left:calc(var(--pad-x) + 5px);top:10px;bottom:10px;
  width:2px;background:var(--line);
}
.tstep{position:relative;padding-left:2.4rem}
.tstep::before{
  content:"";position:absolute;left:0;top:.45rem;
  width:12px;height:12px;border-radius:99px;
  background:var(--ambra);border:2px solid var(--bg);
  box-shadow:0 0 0 2px var(--ambra);
}
.tstep__y{
  font-family:var(--font-display);font-size:1.05rem;color:var(--ambra-text);
  letter-spacing:.04em;
}
.tstep h3{font-size:clamp(1.3rem,2.5vw,1.7rem);margin-top:.2rem}
.tstep p{margin-top:.5rem;color:var(--ink-2)}
.tstep__img{
  margin-top:1.1rem;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);max-width:420px;
}
.tstep__img img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}

/* ---------- footer icone contatti ---------- */
.foot-icons{display:flex;gap:.8rem;margin-top:.4rem}
.foot-icons a{
  width:2.7rem;height:2.7rem;border-radius:99px;
  border:1px solid var(--charcoal-line);color:var(--paper-ink-2);
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);
}
.foot-icons a:hover{color:var(--charcoal);background:var(--oro);border-color:var(--oro);transform:translateY(-2px)}
/* La SVG in linea si appoggia alla base del testo e resta un filo alta
   dentro il cerchio: con display:block il centraggio e' quello vero.
   Le due icone avevano anche misure diverse, 20 e 19. */
.foot-icons a svg{ display:block;width:20px;height:20px; }

/* ---------- selettore lingua ---------- */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--line);border-radius:99px;
  padding:.5rem .85rem;font-size:.82rem;font-weight:600;color:var(--ink-2);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.lang-btn:hover{border-color:var(--ink);color:var(--ink)}
.body--dark .lang-btn{border-color:var(--charcoal-line);color:var(--paper-ink-2)}
.body--dark .lang-btn:hover{border-color:var(--paper-ink);color:var(--paper-ink)}
.lang-menu{
  position:absolute;top:calc(100% + .6rem);right:0;min-width:160px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.4rem;display:grid;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;
  z-index:calc(var(--z-nav) + 1);
  box-shadow:0 8px 24px -18px rgba(24,25,28,.5);
}
.lang.open .lang-menu{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.lang-menu button{
  text-align:left;padding:.5rem .8rem;border-radius:var(--radius-s);
  font-size:.88rem;color:var(--ink-2);
}
.lang-menu button:hover{background:var(--bg);color:var(--ink)}
.lang-menu button[aria-pressed="true"]{color:var(--verde);font-weight:600}
.body--dark .lang-menu{background:var(--charcoal-2);border-color:var(--charcoal-line)}
.body--dark .lang-menu button{color:var(--paper-ink-2)}
.body--dark .lang-menu button:hover{background:var(--charcoal);color:#fff}
.body--dark .lang-menu button[aria-pressed="true"]{color:var(--oro)}

@media (max-width:900px){
  .ngal{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .ngal figure:nth-child(4){grid-column:span 1}
}
@media (max-width:560px){
  .lang-btn{padding:.45rem .6rem}
  .cart-btn{padding:.5rem .7rem;font-size:.82rem}
  .ngal{grid-template-columns:1fr;grid-auto-rows:200px}
  .ngal figure:nth-child(1){grid-row:auto}
  .tl::before{left:calc(var(--pad-x) + 4px)}
}

/* ---------- carrello: riepilogo IVA ---------- */
.cdrawer__breakdown{
  display:grid;gap:.3rem;padding-bottom:.6rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--line);
}
.cdrawer__iva{
  display:flex;justify-content:space-between;
  font-size:.82rem;color:var(--ink-2);
}
.cdrawer__iva--sum{font-weight:600;color:var(--ink)}

/* La cornice decorativa fissa non e' mai stata usata in nessuna pagina,
   ma il suo margine restava applicato a <main> e teneva tutto il sito
   staccato dai bordi: apertura, banner e sezioni scure non arrivavano
   mai a filo schermo. Rimossa. */

/* ---------- spedizione + stagionalità ---------- */
.cdrawer__iva--free span:last-child{color:var(--verde);font-weight:600}
.cdrawer__shiphint{
  font-size:.82rem;color:var(--ambra-text);
  background:color-mix(in srgb,var(--sun) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--sun) 35%,var(--line));
  border-radius:var(--radius-s);padding:.5rem .7rem;margin:0;
}
/* La striscia scorre di continuo. Il testo e' scritto due volte di
   seguito: quando la prima copia esce a sinistra la seconda e' gia' al
   suo posto, quindi il giro non ha stacchi. */
.ship-banner{
  background:var(--charcoal);color:var(--paper-ink);
  padding:.9rem 0;
  border-bottom:1px solid var(--charcoal-line);
  overflow:hidden;
}
.ship-banner__pista{
  display:flex;width:max-content;
  animation:scorri-spedizione 38s linear infinite;
}
.ship-banner__gruppo{
  display:flex;align-items:center;gap:1rem;
  padding-inline:2rem;flex:none;
}
@keyframes scorri-spedizione{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }   /* meta' pista = due gruppi su quattro */
}
@media (prefers-reduced-motion:reduce){
  /* chi ha chiesto meno movimento vede la striscia ferma e centrata */
  .ship-banner__pista{ animation:none;width:100%;justify-content:center; }
  .ship-banner__gruppo:not(:first-child){ display:none; }
}
.ship-banner__mark{
  width:34px;height:34px;flex:none;
  background:url("../img/mandala-360.png") center/contain no-repeat;
}
.ship-banner__txt{
  margin:0;max-width:none;text-align:left;
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  line-height:1.4;
}
.ship-banner__txt strong{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:.02em;color:#fff;
}
.ship-banner__txt span{
  font-size:clamp(.95rem,1.5vw,1.05rem);color:var(--paper-ink-2);
  padding-left:.7rem;border-left:1px solid var(--charcoal-line);
}
.body--dark .ship-banner{background:#101113}
@media (max-width:640px){
  .ship-banner{gap:.8rem;padding:.8rem var(--pad-x)}
  .ship-banner__mark{width:28px;height:28px}
  .ship-banner__txt{flex-direction:column;gap:.15rem}
  .ship-banner__txt strong{font-size:1rem}
  .ship-banner__txt span{font-size:.82rem;padding-left:0;border-left:0}
}
.card__season{
  font-size:.76rem;font-weight:600;color:var(--ambra-text);
  background:color-mix(in srgb,var(--sun) 16%,transparent);
  border-radius:99px;padding:.2rem .6rem;align-self:flex-start;margin-top:.3rem;
}
.body--dark .card__season{color:var(--oro);background:color-mix(in srgb,var(--oro) 18%,transparent)}
.pmodal__season{
  font-size:.9rem;font-weight:600;color:var(--ambra-text);
  background:color-mix(in srgb,var(--sun) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--sun) 35%,var(--line));
  border-radius:var(--radius-s);padding:.6rem .9rem;
}

/* ---------- galleria video tartufo (v4) ---------- */
.vgal{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem;align-items:stretch;
  justify-content:initial;
}
.vgal figure{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--charcoal-line);
  position:relative;background:var(--charcoal-2);margin:0;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.vgal figure:hover{border-color:var(--oro);transform:translateY(-3px)}
.vgal video,.vgal picture{width:100%;height:100%;display:block}
.vgal img{width:100%;height:100%;object-fit:cover;display:block}
.vgal video{object-fit:cover;aspect-ratio:auto}
.vgal__main video,.vgal__main img{aspect-ratio:4/5}
.vgal__side{display:grid;gap:1.2rem;align-content:stretch}
.vgal__side figure{display:flex;margin:0}
.vgal__side img{cursor:zoom-in;transition:transform .8s var(--ease)}
.vgal__side figure:hover img{transform:scale(1.04)}
.vgal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;
  font-size:.85rem;color:var(--paper-ink);
  background:linear-gradient(to top,rgba(18,19,21,.9),transparent);
}
@media (max-width:760px){
  .vgal{grid-template-columns:1fr}
  .vgal__main video{aspect-ratio:1/1}
  .vgal__side img{aspect-ratio:16/10}
}

/* ---------- footer: dati aziendali ---------- */
.footer__legal{
  border-top:1px solid var(--charcoal-line);
  max-width:var(--maxw);margin-inline:auto;
  padding:1.4rem var(--pad-x);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  text-align:center;
}
.footer__mandala{
  width:52px;height:52px;
  background:url("../img/mandala-360.png") center/contain no-repeat;
  opacity:.9;
}
.footer__legal p{
  font-size:.78rem;color:var(--paper-ink-2);line-height:1.7;margin:0;max-width:none;
}

/* ============================================================
   FLUIDITÀ SU TELEFONO
   Sul telefono il problema non è quanto pesa il sito, è quanto
   lavoro deve fare il processore a ogni scorrimento. Qui si
   toglie tutto quello che lo fa lavorare senza motivo.
   ============================================================ */

/* 1. L'header sfocato è l'effetto più costoso di tutti: la scheda
   grafica deve rifare la sfocatura a ogni fotogramma mentre scorri.
   Sul telefono diventa un fondo pieno, identico a vedersi. */
@media (max-width:900px){
  .header{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:var(--bg);
  }
  .body--dark .header{ background:var(--charcoal); }
}

/* 2. Il carosello scorre da solo anche sul telefono, ma sposta una sola
   fila con una trasformazione: è il tipo di animazione che il telefono
   gestisce sulla scheda grafica. Il resto lo fa il JavaScript, che lo
   ferma quando esce dallo schermo e quando lo tocchi. */
@media (max-width:820px){
  .marquee__track{ animation-duration:75s; }
}

/* 3. Gli effetti al passaggio del mouse non hanno senso col dito, ma
   il telefono li esegue lo stesso: a ogni tocco partiva un movimento
   da sette decimi di secondo su una foto grande. */
@media (hover:none){
  .card:hover{ transform:none; border-color:var(--line); }
  .card:hover .card__img img,
  .cat:hover .cat__img img{ transform:none; }
  .card__img img,.cat__img img{ transition:none; }
  .marquee:hover .marquee__track{ animation-play-state:running; }
  .card:hover .zoom{ opacity:0; }
}

/* 4. La comparsa in dissolvenza costava uno spostamento per ogni
   riquadro. Sul telefono resta solo la dissolvenza, più breve. */
@media (max-width:900px){
  .js .rev{ transform:none; transition:opacity .35s var(--ease); }
  .js .rev.in{ transform:none; }
}

/* 5. RIMOSSA: qui c'era content-visibility:auto sulle sezioni, per far
   disegnare al telefono solo la parte guardata. Effetto collaterale
   grave: le sezioni saltate non venivano mai viste dall'osservatore che
   fa comparire i contenuti, e restavano trasparenti per sempre. Sul
   telefono, a meta' pagina, si vedeva il vuoto. Verificato su tre
   dispositivi: togliendo questa sola regola i contenuti riappaiono. */

/* 6. Meno ombre in movimento e transizioni più corte */
@media (max-width:900px){
  .card{ transition:border-color .2s var(--ease); }
  .card__img img{ will-change:auto; }
}

/* ============================================================================
   TAGLIO DELLE FOTO
   Le foto prodotto sono scatti orizzontali con molto sfondo attorno.
   Mostrate intere si legge la scena invece del prodotto, e si capisce
   come sono state fatte. Qui il riquadro diventa verticale (4:5): taglia
   ai lati, tiene il barattolo e butta via il contorno.
   Cambia solo l'inquadratura. Riquadri, mandala, colori, caratteri e
   spaziature restano quelli di prima.

   Nota tecnica: ritagliando in verticale una foto orizzontale serve un
   file molto piu largo del riquadro. Un riquadro 340x425 chiede una foto
   da 760 px, non da 340. Le misure dichiarate nel `sizes` lo tengono conto.
   ============================================================================ */
:root{ --foto:4/5; }

/* schede prodotto e carosello */
.card__img{ aspect-ratio:var(--foto); }
.marquee img{ aspect-ratio:var(--foto); }

/* Finestra del prodotto.
   La foto che arriva qui e' gia' ritagliata in 4:5 con il prodotto sempre
   della stessa grandezza. Prima il riquadro la ritagliava una seconda volta
   (object-fit:cover su una forma diversa) e il prodotto risultava molto piu'
   ingrandito che nella griglia. Ora il riquadro ha la stessa forma della
   foto, quindi si vede esattamente l'inquadratura preparata. */
.pmodal__gallery{
  height:auto;
  aspect-ratio:var(--foto);
  max-height:min(56dvh,470px);
  cursor:default;
}
.pmodal__gallery img{ object-fit:contain; padding:0; }
@media (min-width:901px){
  .pmodal__in{ width:min(1120px,calc(100vw - 3rem)); }
  .pmodal__in{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    overflow:hidden;
  }
  .pmodal__gallery{
    height:auto;
    aspect-ratio:var(--foto);
    max-height:min(78dvh,780px);
    border-bottom:0;border-right:1px solid var(--line);
  }
  .pmodal__body{
    display:block;overflow-y:auto;
    max-height:min(78dvh,780px);
  }
}
.body--dark .pmodal__gallery{ border-right-color:var(--charcoal-line); }

/* pannello in maiolica quando la foto di un prodotto non c'e' ancora */
.card__img .card__ph{width:100%;height:100%;border-radius:inherit}
.pmodal__gallery .card__ph{position:absolute;inset:0;height:100%}
.marquee .card__ph{width:100%;aspect-ratio:var(--foto)}

/* ---------- banner di apertura della pagina Tartufo ----------
   L'immagine porta gia' il logo e la frase, quindi si vede intera,
   senza tagli: e' l'unica del sito a cui non si applica il ritaglio.
   Il fondo chiaro dell'immagine si prolunga ai lati sugli schermi
   molto larghi, cosi' non si vede lo stacco col nero della pagina. */
/* Striscia di apertura della pagina Tartufo.
   Lo scatto e' verticale, quindi qui viene ritagliato in una fascia larga:
   sul telefono piu' alta, sul computer piu' bassa e panoramica. */
.tbanner{
  background:#f4f2ee;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:center;
}
/* La foto di apertura si vede intera: e' larga 4:3, quindi occupa la
   riga e si limita solo l'altezza sugli schermi bassi. */
.tbanner img{
  width:100%;max-width:1100px;height:auto;
  max-height:74dvh;object-fit:contain;
  display:block;
}

/* I link "Scopri la nocciola", "Vai alla frutta secca" e simili erano
   alti 26 px: col dito si sbaglia. Portati a 44 px di area utile. */
.cat__link{ min-height:44px; align-items:center; }
@media (hover:none){
  .cat__link{ padding-block:.5rem; }
}

/* ---------- misure per il dito, sul telefono ----------
   Verificato su iPhone 390, Android 360 e iPhone Max 430: i pulsanti
   dei formati erano alti 29 px e i link di categoria 26. Sotto i 34 px
   il dito sbaglia bersaglio. */
@media (hover:none),(max-width:900px){
  .fmts button{ min-height:34px; padding-inline:.7rem; }
  .add-btn,.add-btn--off{ min-height:40px; }
  .citem__qty button{ width:2rem;height:2rem; }
  .lang-menu button{ min-height:40px; }
  .footer a,.nav__menu a{ display:inline-block; padding-block:.25rem; }
}

/* ---------- intestazione sui telefoni stretti ----------
   Su Android da 360 px logo, lingua, carrello e menu stavano tutti
   schiacciati sulla stessa riga e il logo diventava illeggibile.
   Sotto i 480 px la parola "Carrello" sparisce e resta la borsa con
   il numero: il significato non cambia e il logo respira. */
@media (max-width:480px){
  .header__in{ gap:.45rem; padding-inline:1rem; }
  .header__logo img{ height:42px; }
  .cart-btn{ padding:.5rem .6rem; gap:.35rem; }
  .cart-btn > span[data-i18n="cart"]{ display:none; }
  .lang-btn{ padding:.5rem .55rem; gap:.3rem; }
  .header__actions{ gap:.35rem; }
  .menu-btn{ padding:.45rem; }
}
@media (max-width:360px){
  .header__logo img{ height:38px; }
  .lang-btn__code{ display:none; }
}

/* ---------- aree di tocco ----------
   Misurate nel simulatore su iPhone 390, Android 360 e Max 430:
   lingua 34x33, briciole di pane 39x16, link in fondo 84x18,
   scelta formato 51x34. Sotto i 40 px il dito sbaglia bersaglio.
   Si allarga solo l'area sensibile, la grafica resta identica. */
@media (hover:none), (max-width:900px){
  .lang-btn{ min-height:40px; }
  /* le briciole di pane stanno in un <p class="crumb"> */
  .crumb a, .crumb span{ display:inline-block; padding-block:.7rem; }
  /* i link in fondo alla pagina stanno in footer.footer */
  .footer a{ display:inline-block; padding-block:.55rem; }
  .fmts button{ min-height:40px; }
  .cat__link{ min-height:44px; }
}


/* segnaposto quadrato nel carrello, finche' la foto del prodotto non c'e' */
.mini-ph{
  display:block;width:72px;height:72px;border-radius:8px;flex:none;
  background:var(--maiolica, #e7e9e2) center/60% no-repeat;
  border:1px solid var(--line);
}


/* ============================================================
   RIFINITURA
   Piccoli aggiustamenti di lettura e ritmo. Nessun cambio di
   identita': stessi caratteri, stessi colori, stesse forme.
   ============================================================ */

/* Righe di testo troppo lunghe stancano: si fermano a 68 caratteri.
   E si evitano le parole isolate a fine paragrafo. */
.sec > .wrap > p,
.story p,
.card__desc,
.pmodal__info p{ max-width:68ch; text-wrap:pretty; }

/* I titoli si spezzano in righe di lunghezza simile invece che
   con l'ultima parola da sola. */
h1,h2,h3,.card__name,.pmodal__body h2{ text-wrap:balance; }

/* Il prezzo e' l'informazione che si cerca: leggibile a colpo d'occhio,
   con le cifre di larghezza fissa cosi' la colonna resta allineata. */
.card__price,.pmodal__price{ font-variant-numeric:tabular-nums; }

/* La scheda si solleva appena al passaggio del mouse. Il bordo che si
   scurisce basta: niente ombre larghe, che su fondo chiaro sporcano. */
@media (hover:hover){
  .card{ transition:border-color .35s var(--ease), transform .35s var(--ease); }
  .card:hover{ transform:translateY(-2px); }
}

/* Chi ha chiesto meno movimento non deve vedere nulla muoversi. */
@media (prefers-reduced-motion:reduce){
  .card:hover{ transform:none; }
}


/* Chi naviga da tastiera arriva prima di tutto a questo collegamento e
   salta l'intera intestazione. Resta invisibile finche' non riceve il fuoco. */
.salta-al-contenuto{
  position:absolute;left:.75rem;top:-4rem;z-index:1000;
  background:var(--charcoal);color:var(--paper-ink);
  padding:.7rem 1.1rem;border-radius:8px;text-decoration:none;font-weight:600;
  transition:top .18s var(--ease);
}
.salta-al-contenuto:focus-visible{ top:.75rem; }
#contenuto:focus{ outline:none; }

/* Le ombre prendono il colore del fondo invece del nero puro: si posano
   sulla carta invece di sporcarla. */
.card,.pmodal__in{ box-shadow:0 1px 2px rgba(120,110,92,.06); }


/* ritmo delle sezioni: il fondo di ogni blocco respira un filo piu' del
   sopra. A occhio le sezioni risultano centrate; con i valori identici
   sembrano schiacciate verso il basso. */
.sec{ padding-block:clamp(3rem,7vw,5.5rem) clamp(3.4rem,8vw,6.2rem); }

/* Il tocco sui pulsanti risponde: si abbassa appena, come un tasto vero. */
.btn:active,.add-btn:active,.fmts button:active{ transform:translateY(1px); }

/* Il fuoco da tastiera si vede sempre, su qualunque fondo. */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--ambra);
  outline-offset:3px;
  border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  .btn:active,.add-btn:active,.fmts button:active{ transform:none; }
}