/* =====================================================================
   M'Arricriu — Direzione A «Atelier» (decisione di Alberto, 11/11/2026)
   Si carica DOPO style.css e ne cambia i gettoni e l'aspetto in tutto il sito:
   avorio, pannelli alti tinti del colore di fondo di ogni scatola, oro solo
   per comprare e per il filo, inchiostro espresso. Titoli in Cormorant Garamond
   (scelta di Alberto, 11/11/2026 notte: «la scrittura iniziale mi piaceva di più»),
   testi correnti in Bodoni Moda, DM Mono maiuscolo per le piccole etichette. L'unico ornamento è il
   filo d'oro di maiolica. Tutto il funzionamento resta in style.css/app.js.
   Prototipo dei mockup: proposte-grafiche/direzione-a.css.
   ===================================================================== */
:root {
  --white: #FFFDF8;        /* carta: schede, campi, pannelli neutri */
  --paper: #F8F4EC;        /* avorio: fondo della pagina */
  --paper-2: #F2EBDF;      /* fasce */
  --cream: #EFE7D8;        /* sabbia: piè di pagina, zone immagine senza foto */
  --card: #FFFDF8;
  --ink: #221C17;          /* inchiostro espresso */
  --ink-2: #5F574E;        /* seppia: testo secondario (6,5:1 sull'avorio) */
  --grey: #6B635A;
  --line: #E4D9C5;
  --line-2: #CDBD9C;
  --gold: #B8975A;         /* SOLO filetti e ornamenti */
  --gold-ink: #7C5E27;     /* testo dorato (5,5:1 sull'avorio) */
  --blu: #221C17;          /* niente blu: i link sono inchiostro con il filo d'oro */
  --blu-2: #000000;
  --azzurro: #B8975A;
  --soft-blu: #F2EBDF;
  --focus: #221C17;
  --ph-bg: #EFE7D8;
  --shadow: 0 1px 0 rgba(34, 28, 23, .05);
  --shadow-lg: 0 24px 60px -32px rgba(34, 28, 23, .35);
  --radius: 6px;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;   /* titoli, detti, prezzi grandi (pesi 500/600, corsivo 500/600) */
  --sans: "Bodoni Moda", "Didot", Georgia, serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --maxw: 1320px;
  --header-h: 64px;
  --ease-at: cubic-bezier(.2, .7, .1, 1);
  --pan-ink: #221C17;      /* testo SOPRA i pannelli colorati delle scatole: sempre scuro, anche nel tema scuro */
  /* filo di maiolica in oro: rombi e quadrifogli disegnati a linea (disegno originale) */
  --filo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='none' stroke='%23B8975A' stroke-width='.9'%3E%3Cpath d='M7 1.5 12.5 7 7 12.5 1.5 7Z'/%3E%3Ccircle cx='7' cy='7' r='1.6'/%3E%3Cpath d='M21 3.2c1.6 0 2.4 1.2 2.4 2.4-1.2 0-1.8.6-1.8 1.4 0-.8-.6-1.4-1.8-1.4 0-1.2.6-2.4 1.2-2.4ZM21 10.8c-1.6 0-2.4-1.2-2.4-2.4 1.2 0 1.8-.6 1.8-1.4 0 .8.6 1.4 1.8 1.4 0 1.2-.6 2.4-1.2 2.4Z'/%3E%3Cpath d='M0 .5h28M0 13.5h28' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 1024px) { :root { --header-h: 76px; } }
:root[data-theme="dark"] {
  --white: #1F1A16; --paper: #17120F; --paper-2: #1D1814; --cream: #241E19; --card: #1F1A16;
  --ink: #F3ECE2; --ink-2: #CFC6BA; --grey: #B3AA9E; --line: #352D25; --line-2: #4A3F33;
  --gold: #C9A964; --gold-ink: #D9BE83; --blu: #F3ECE2; --focus: #F2D27A; --soft-blu: #1D1814;
}

/* ---------- base ---------- */
body { background: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-optical-sizing: auto; }
@media (min-width: 900px) { body { font-size: 18px; } }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.005em; text-wrap: balance; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(2.5rem, 7vw, 4.8rem); line-height: 1; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.04; }
h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.12; }
b, strong { font-weight: 600; }
a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
a:hover { color: inherit; text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--maxw); }
@media (min-width: 768px) { :root { --gutter: 40px; } }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.lead { font-size: clamp(1.08rem, 2vw, 1.25rem); line-height: 1.55; }
.mono, .kicker { font-family: var(--mono); font-size: 12px; line-height: 1.55; letter-spacing: .07em; text-transform: uppercase; font-weight: 400; }
.kicker { color: var(--gold-ink); margin: 0 0 14px; }
.gold-rule { width: 100%; max-width: 120px; height: 14px; border: 0; background: var(--filo) repeat-x left center / 28px 14px; margin: 18px 0; }
.center .gold-rule { margin-left: auto; margin-right: auto; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.eur-m { font-family: var(--mono); font-size: .5em; vertical-align: .45em; letter-spacing: 0; margin: 0 .12em; }

/* ---------- l'unico ornamento: il filo d'oro di maiolica ---------- */
.maj-strip { height: 14px; background: var(--filo) repeat-x center / 28px 14px; opacity: .9; }
.maj-bg { background-color: transparent; background-image: none; }
.pc .art::after, .gal .main::after, .carretto-box::before, .dt::before, .ph-box::before { display: none; }

/* ---------- barra delle comunicazioni ---------- */
.comunica { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; min-height: 34px; }
:root[data-theme="dark"] .comunica { background: #0E0B09; color: var(--ink); }

/* ---------- testata: MENU · logo al centro · [ CARRELLO (n) ] ---------- */
.header { background: color-mix(in srgb, var(--paper) 93%, transparent); border-bottom: 1px solid rgba(184, 151, 90, .45); }
:root[data-theme="dark"] .header { background: rgba(23, 18, 15, .95); }
.hrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; height: var(--header-h); }
.h-sx { justify-self: start; display: flex; align-items: center; gap: 28px; min-width: 0; }
.header .logo { justify-self: center; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.header .logo img { width: 112px; }
.logo small { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; padding-left: 0; margin-top: -3px; white-space: nowrap; }
.hicons { justify-self: end; margin-left: 0; gap: 4px; }
.hicons .h-pc { display: none; }
.menu-btn { order: 0; display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; padding: 0 14px; border-radius: 4px; background: var(--ink); color: var(--paper); border: 0; font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu-btn:hover { background: var(--ink); color: var(--paper); }
.menu-btn i { width: 12px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; display: block; }
.cart-btn { position: relative; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; color: var(--ink); font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cart-btn::before { content: "["; margin-right: .45em; color: var(--gold-ink); }
.cart-btn::after { content: "]"; margin-left: .45em; color: var(--gold-ink); }
.cart-btn:hover .cb-t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.cart-btn .badge-n { position: static; display: inline; min-width: 0; height: auto; padding: 0; margin-left: .45em; border-radius: 0; background: none; color: inherit; font: inherit; }
.cart-btn .badge-n::before { content: "("; } .cart-btn .badge-n::after { content: ")"; }
.cart-btn .badge-n[hidden] { display: none; }
.nav { display: none; margin-left: 0; gap: 14px; }
.nav a, .nav .navb { padding: 0; min-height: 44px; display: inline-flex; align-items: center; font: 400 12px/1.2 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.nav a:hover, .nav .navb:hover, .nav .navb[aria-expanded="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.nav [aria-current="page"] { box-shadow: inset 0 -1px 0 var(--gold); }
@media (min-width: 1024px) { .header .logo img { width: 128px; } .hicons .h-pc { display: inline-grid; } }
@media (min-width: 1400px) { .nav { display: flex; } .menu-btn { display: none; } }
@media (max-width: 400px) { .header .logo img { width: 100px; } .logo small { font-size: 12px; letter-spacing: .02em; } .menu-btn { padding: 0 10px; } .cart-btn .cb-t { letter-spacing: .04em; } }
.hdr-min .hrow { grid-template-columns: 1fr auto 1fr; }
.hdr-min .logo { grid-column: 2; }
.hdr-min .hicons { grid-column: 3; }
.ibtn { border-radius: 4px; }
.ibtn:hover { background: var(--paper-2); }
.mega { background: var(--paper); border-bottom: 1px solid rgba(184, 151, 90, .45); }
.mega .mh, .filtri legend, .facts dt, .specs dt, .calc th, .calc-t th, .foot-site h3, .pv-s, .prov-t { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-ink); }
.mega ul a { border-radius: 2px; }

/* ---------- pulsanti: UN solo oro per comprare, il resto a filo d'inchiostro ---------- */
.btn { min-height: 52px; padding: 0 28px; border-radius: 2px; font: 500 13px/1.15 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; transition: background-color .25s var(--ease-at), color .25s var(--ease-at), transform .2s var(--ease-at); }
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.accent { background: var(--cta); border-color: var(--cta-border); color: var(--cta-ink); }
.btn.accent:hover { background: var(--cta-hover); border-color: var(--cta-border); color: var(--cta-ink); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 12px; }
.btn.big { min-height: 56px; padding: 0 32px; font-size: 13px; }
/* link secondari tra parentesi quadre: «[ SCOPRI ]» (le parentesi sono disegnate, non fanno parte del testo) */
.linkbtn, .parentesi { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.linkbtn::before, .parentesi::before { content: "["; margin-right: .4em; color: var(--gold-ink); }
.linkbtn::after, .parentesi::after { content: "]"; margin-left: .4em; color: var(--gold-ink); }
.linkbtn:hover, .parentesi:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.plus { border-radius: 2px; background: var(--ink); color: var(--paper); }
.step { border-radius: 2px; background: transparent; animation: none; }
.step button { border-radius: 2px; font-family: var(--mono); }
.step output { font-family: var(--mono); font-weight: 500; }
.chip, .pill { border-radius: 2px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: transparent; }
.chip[aria-pressed="true"], .pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.tag { border-radius: 2px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; padding: 6px 9px; }
.band-sys { border-radius: 2px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; background: transparent; }
.dek-chip { border-radius: 2px; font-family: var(--mono); font-weight: 500; font-size: 12px; }
.dek-chip.sm { font-size: 12px; }
.ph-f .dek-badge { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; border-radius: 2px; box-shadow: none; left: auto; right: 10px; top: 10px; bottom: auto; padding: 8px 10px; }
.vp .dek-badge { font-size: 12px; padding: 4px 6px; right: 4px; top: 4px; letter-spacing: .02em; }
.tbc, .verify-l { border-radius: 2px; font-family: var(--mono); font-size: 12px; font-weight: 400; }
.field label, .lab { font: 400 12px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.field input, .field select, .input, .res-h select, .calc-sel select, textarea { border-radius: 2px; border-color: #8C8274; background: var(--white); font-family: var(--sans); font-size: 17px; }
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .input { border-color: var(--line-2); }
.searchbox input { border-radius: 2px; }
.check input { accent-color: var(--ink); }

/* ---------- sezioni e griglia editoriale ---------- */
section.blk { padding: 64px 0; }
@media (min-width: 900px) { section.blk { padding: 112px 0; } }
.band { background: var(--white); border-top: 1px solid rgba(184, 151, 90, .4); border-bottom: 1px solid rgba(184, 151, 90, .4); }
:root[data-theme="dark"] .band { background: var(--paper-2); }
.sec-h { align-items: end; gap: 12px 40px; margin-bottom: 32px; }
@media (min-width: 900px) { .sec-h { margin-bottom: 56px; } }
.sec-h .kicker { margin-bottom: 10px; }

/* pannello della confezione: il fondo è il colore vero della foto, la scatola grande */
.ph-f { background: var(--fondo, var(--cream)); }
.ph-f img { object-fit: contain; transform: scale(var(--z, 1)); transition: transform 1.1s var(--ease-at);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.dfoto img, .ph-f.dfoto img { -webkit-mask-image: none; mask-image: none; transform: none; }

/* ---------- schede del catalogo: pannelli alti tinti ---------- */
.grid-p { gap: 28px 12px; }
@media (min-width: 760px) { .grid-p { gap: 40px 20px; } }
.pc { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.pc:hover { box-shadow: none; }
.pc .art { padding: 0; aspect-ratio: 4 / 5; background: transparent; border-radius: 6px; overflow: hidden; }
.pc .art .ph-f { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 6px; box-shadow: none; }
.pc .art .ph-box { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 6px; }
@media (hover: hover) { .pc:hover .art .ph-f img { transform: scale(calc(var(--z, 1) * 1.035)); } }
.pc .body { padding: 14px 0 0; gap: 6px; }
.pc h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.1; }
.pc .mix, .pc .pconf, .pc .int { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.pc .int { color: var(--gold-ink); }
.pc .imb { text-transform: none; }
.pc .ppc, .pc .foot2 .ppc { font-family: var(--serif); font-weight: 500; font-size: 1.85rem; letter-spacing: -.01em; }
.pc .noprice { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
.pc.fill .art { background: var(--white); border: 1px solid rgba(184, 151, 90, .55); }
.pc.fill .art::before { background: var(--filo) repeat-x center / 28px 14px; opacity: 1; }
.dots i { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--gold-ink); }
.dots i.on { background: var(--gold-ink); box-shadow: none; }
.grp-h { font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); border-bottom: 1px solid var(--gold); }
.empty { border-radius: 6px; }

/* ---------- home: apertura «Alba» (video 3D, scelta di Alberto dell'11/11/2026 sera) ----------
   Scritta dentro index.html: poster (= fotogramma finale), titolo h1, sottotitolo e pulsanti si vedono SUBITO, anche
   senza JavaScript. Telefono: video 9:16 a tutta larghezza, titolo in alto; computer: 16:9 alto quanto lo schermo.
   Il testo sta sopra il cielo scuro del video, con un velo scuro in alto (contrasto AA misurato dalla prova).
   Prima che app.js aggiunga la testata, lo spazio della testata è già riservato: niente salto della pagina. */
body:has(> main:first-child)::before { content: ""; display: block; height: 123px; background: var(--paper); }
@media (min-width: 900px) { body:has(> main:first-child)::before { height: 129px; } }
@media (min-width: 1024px) { body:has(> main:first-child)::before { height: 141px; } }   /* = barra + fascia + testata (--header-h) */
.alba { position: relative; background: #0C0704; color: #FAF3E4; }
.al-palco { position: relative; overflow: hidden; width: 100%; aspect-ratio: 9 / 16; }
@media (min-width: 768px) { .al-palco { aspect-ratio: auto; height: 56.25vw; max-height: calc(100vh - 141px); max-height: calc(100svh - 141px); min-height: 520px; } }
.al-poster img, .al-inizio, .al-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; border: 0; }
/* 11/11 notte («la clip lagga»): il video si scarica TUTTO prima di partire; intanto si vede il suo PRIMO fotogramma
   (.al-inizio, piccolo e scuro), così quando parte non c'è salto. Solo opacità: niente filtri, niente ombre animate.
   Il primo fotogramma sta SOPRA il video e, quando il video parte, sfuma via (il video non parte mai trasparente:
   Chromium rallenta un video con opacità 0 e alla comparsa si inceppa). */
.al-inizio { z-index: 0; opacity: 0; transition: opacity .4s ease; }
/* 12/11: il primo fotogramma è già in index.html (precaricato, 8–12 KB): si vede da subito, mentre il video si scarica,
   invece del poster quasi nero (prima arrivava solo quando app.js lo aggiungeva, 1–4 s dopo). Sfuma solo quando il video
   mostra davvero il suo primo fotogramma (app.js: requestVideoFrameCallback) o quando si rinuncia al video (.al-pronto). */
.al-inizio.on, .al-anim .alba:not(.al-pronto) .al-inizio:not(.via) { opacity: 1; }
.al-film { background: transparent; }
.al-velo { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(12, 7, 4, .78) 0%, rgba(12, 7, 4, .64) 28%, rgba(12, 7, 4, .44) 44%, rgba(12, 7, 4, .2) 53%, rgba(12, 7, 4, 0) 60%); }
@media (min-width: 768px) { .al-velo { background: linear-gradient(180deg, rgba(12, 7, 4, .74) 0%, rgba(12, 7, 4, .55) 30%, rgba(12, 7, 4, .26) 46%, rgba(12, 7, 4, 0) 56%); } }
.al-testo { position: absolute; left: 0; right: 0; top: 0; z-index: 2; text-align: center; padding: 26px 16px 0; text-shadow: 0 1px 18px rgba(12, 7, 4, .7); }
@media (min-width: 768px) { .al-testo { padding: clamp(32px, 4.4vw, 64px) 32px 0; } }
.alba h1 { margin: 0 auto; color: #FAF3E4; font-weight: 500; font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1.06; letter-spacing: -.005em; max-width: 15ch; }
@media (min-width: 768px) { .alba h1 { font-size: clamp(2.6rem, 4vw, 4.2rem); max-width: 32ch; } }
/* seconda frase in corsivo oro (come la vecchia apertura «… ogni giorno.»): oro chiaro, AA sul velo misurato sui pixel */
.alba h1 .al-oro { font-style: italic; font-weight: 500; color: #E9D09A; }
.al-r { display: block; text-wrap: balance; }
@media (max-width: 380px) { .al-palco { aspect-ratio: auto; height: 660px; } .al-testo { padding-top: 22px; } .alba h1 { font-size: 1.8rem; } .alba .btn.big { min-height: 50px; } }
.al-sotto { margin: 14px auto 0; max-width: 31ch; font-size: 1rem; line-height: 1.45; color: #F3E9D6; text-wrap: balance; }
@media (min-width: 768px) { .al-sotto { margin-top: 18px; max-width: 48ch; font-size: 1.12rem; } }
@media (max-width: 380px) { .al-sotto { margin-top: 10px; font-size: .94rem; } }
.al-azioni { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
@media (min-width: 768px) { .al-azioni { margin-top: 24px; flex-direction: row; justify-content: center; gap: 8px 28px; } }
.alba .parentesi, .alba .parentesi:hover { color: #FAF3E4; background: rgba(12, 7, 4, .55); padding: 0 14px; border-radius: 2px; }   /* fondo scuro velato: AA anche sopra le scatole */
.alba .parentesi::before, .alba .parentesi::after { color: #E2C98F; }
.alba .btn.accent { text-shadow: none; }
/* pulsante piccolo per fermare l'animazione (c'è solo quando il video gira davvero) */
.al-pausa { position: absolute; right: 12px; bottom: 12px; z-index: 3; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 2px; border: 1px solid rgba(250, 243, 228, .75); background: rgba(12, 7, 4, .6); color: #FAF3E4; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.al-pausa:focus-visible, .alba a:focus-visible { outline: 2px solid #E2C98F; outline-offset: 3px; }
.al-pausa[hidden] { display: none; }
/* entrata in sincronia con il momento clou: SOLO con «al-anim» (messa dallo script in testa quando il video può partire) */
.al-anim .alba:not(.al-pronto) .al-e { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); animation: al-salva .01s linear 6s forwards; }
.al-anim .alba:not(.al-pronto) .al-poster img { opacity: .14; transition: opacity .6s ease; animation: al-salva .01s linear 6s forwards; }
.al-anim .alba:not(.al-pronto):not(.al-video) .al-inizio:not(.via) { animation: al-via .01s linear 6s forwards; }
@keyframes al-via { to { opacity: 0; } }
.al-anim .alba.al-video .al-e, .al-anim .alba.al-video .al-poster img { animation: none; }
.al-anim .alba .al-e.su, .al-anim .alba .al-testo:focus-within .al-e { opacity: 1; transform: none; filter: none; }
/* «Ferma l'animazione»: al posto del video il poster, che è la composizione finale */
.alba.al-fermo .al-film { visibility: hidden; }
.al-anim .alba.al-fermo .al-poster img { opacity: 1; animation: none; }
@keyframes al-salva { to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .al-anim .alba .al-e, .al-anim .alba .al-poster img { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; } }
.proverbio { font-style: italic; font-size: 1.05rem; color: var(--ink-2); margin: 6px 0 0; }

/* ---------- home: l'Etna allo scorrimento (dalla direzione C) ---------- */
.etna { position: relative; height: 300vh; background: #171311; }
.et-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #171311; }
.et-palco video, .et-palco .et-fermo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--fuoco, 79% 62%); will-change: transform; }
.et-palco .et-fine { opacity: 0; }
.et-palco video { opacity: 0; }
.et-palco.et-video video { opacity: 1; }
.et-terra { position: absolute; inset: 0; background: #5A3B3D; opacity: 0; z-index: 3; }
.et-titolo { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; color: #F8F4EC; opacity: 0; }
.et-titolo h2 { font-size: clamp(2.6rem, 7vw, 6rem); line-height: .98; margin: 0; color: #F8F4EC; text-wrap: balance; }
.et-titolo p { margin: 18px 0 0; max-width: 30em; color: #F1E6DA; font-size: clamp(1.1rem, 2vw, 1.35rem); font-style: italic; }
.et-titolo .kicker { color: #E2CB98; }
.et-didascalia { position: absolute; left: 16px; bottom: 18px; z-index: 2; margin: 0; color: #fff; background: rgba(23, 19, 17, .55); padding: 6px 10px; border-radius: 2px; }
.et-pausa { position: absolute; right: 16px; bottom: 18px; z-index: 5; min-width: 44px; min-height: 44px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(23, 19, 17, .55); color: #fff; cursor: pointer; padding: 0 12px; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 767px) {
  .etna { height: 220svh; }
  .et-palco video, .et-palco .et-fermo { --fuoco: 62% 70%; }
  .et-titolo h2 { white-space: normal; }
}
/* senza movimento (riduci movimento, risparmio dati, rete lenta, GSAP assente): due fermi immagine, il titolo sotto, mai sopra la foto */
.et-statico.etna { height: auto; background: var(--paper); }
.et-statico .et-palco { position: relative; height: auto; overflow: visible; background: transparent; display: grid; gap: 8px; padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.et-statico .et-foto { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.et-statico .et-palco .et-fermo { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; border-radius: 6px; opacity: 1; transform: none !important; }
.et-statico .et-palco video, .et-statico .et-pausa, .et-statico .et-terra { display: none; }
.et-statico .et-didascalia { position: static; background: none; color: var(--ink-2); padding: 0; }
.et-statico .et-titolo { position: relative; inset: auto; opacity: 1; background: #5A3B3D; border-radius: 6px; padding: 48px 0; }
@media (min-width: 768px) { .et-statico .et-palco .et-fermo { aspect-ratio: 16 / 10; } .et-statico .et-titolo { padding: 72px 0; } }
@media (max-width: 767px) { .et-statico .et-titolo h2 { white-space: normal; } }

/* ---------- home: «Il tuo caffè» (macchina · miscela · quantità) ---------- */
.sez-tc { background: var(--white); border-top: 1px solid rgba(184, 151, 90, .45); border-bottom: 1px solid rgba(184, 151, 90, .45); }
:root[data-theme="dark"] .sez-tc { background: var(--paper-2); }
.tc { display: grid; gap: 28px; }
.tc-vista { margin: 0; }
.tc-strati { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--tc-fondo, var(--cream)); transition: background-color .6s ease; }
.tc-strato { position: absolute; inset: 0; display: grid; opacity: 0; transform: translateX(3%) scale(1.02); transition: opacity .55s ease, transform .8s var(--ease-at); }
.tc-strato.in { opacity: 1; transform: none; }
.tc-strato.out { opacity: 0; transform: translateX(-3%) scale(.99); }
.tc-strato.due { grid-template-columns: 1fr 1fr; }
.tc-strato .ph-f { position: relative; aspect-ratio: auto; height: 100%; }
.tc-strato.due .ph-f img { transform: scale(calc(var(--z, 1) * 1.2)); }
.tc-sotto { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.tc-disegno { width: 64px; height: 64px; object-fit: contain; flex: none; }
.tc-didascalia { margin: 0; color: var(--ink-2); min-height: 3.1em; }
.tc-scelte { display: grid; gap: 26px; align-content: start; }
.tc-gruppo { border: 0; margin: 0; padding: 0; min-width: 0; }
.tc-gruppo legend { padding: 0; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.tc-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--gold-ink); border-radius: 50%; color: var(--gold-ink); font-size: 12px; letter-spacing: 0; }
.tc .macchine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 600px) and (max-width: 899px) { .tc .macchine { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tc .mac { padding: 12px 6px 10px; border-radius: 2px; border: 1px solid rgba(184, 151, 90, .75); background: var(--paper); gap: 6px; min-height: 112px; align-content: start; }
.tc .mac::before { left: 30%; right: 30%; height: 2px; border-radius: 0; }
.tc .mac:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.tc .mac .capsbox { height: 46px; }
.tc .mac .capsbox svg { width: 40px; height: auto; max-height: 46px; }
.tc .mac b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .02em; text-transform: none; line-height: 1.25; }
.tc .mac span.d { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0; }
.tc .mac[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.tc .mac[aria-pressed="true"] span.d { color: #D9CFBF; }
.tc .mac[aria-pressed="true"]::after { content: none; }
.tc .mac.aiutami .capsbox { font-family: var(--serif); font-size: 2.2rem; color: var(--gold-ink); }
.tc .mac.aiutami { text-decoration: none; }
.tc-opzioni { display: grid; gap: 8px; }
.tc-miscele .tc-opzioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-op { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1px solid rgba(184, 151, 90, .75); border-radius: 2px; background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.tc-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tc-op:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tc-op:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tc-op:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.tc-op-miscela { flex-direction: column; align-items: flex-start; gap: 2px; }
.tc-nome { font-size: 1.08rem; line-height: 1.15; }
.tc-int, .tc-dett { font: 400 12px/1.3 var(--mono); letter-spacing: .03em; }
.tc-op-q { justify-content: space-between; flex-wrap: wrap; }
.tc-nota { margin: 8px 0 0; color: var(--ink-2); }
.tc-prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding-top: 16px; border-top: 1px solid var(--gold); }
.tc-grande { font-size: 3rem; line-height: 1; }
.tc-piccolo { color: var(--ink-2); }
.tc-esito { margin: 0; min-height: 1.4em; color: var(--ink-2); }
@media (max-width: 599px) { .tc-miscele .tc-opzioni { grid-template-columns: 1fr; } .tc-op-miscela { flex-direction: row; justify-content: space-between; align-items: center; } }
@media (min-width: 900px) { .tc { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } .tc-vista { position: sticky; top: calc(var(--header-h) + 24px); } }

/* ---------- home: tre miscele numerate ---------- */
.mix3 { gap: 40px; }
@media (min-width: 700px) { .mix3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .mix3 { gap: 40px; } .mix3 .mix-t:nth-child(2) { margin-top: 72px; } }
.mix-t { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.mix-t:hover { box-shadow: none; color: var(--ink); }
.mix-t .mix-img { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; }
.mix-t .mix-img .ph-f { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 6px; }
@media (hover: hover) { .mix-t:hover .mix-img .ph-f img { transform: scale(calc(var(--z, 1) * 1.035)); } }
.mix-t .mx-num { position: absolute; top: 16px; left: 18px; z-index: 3; color: var(--pan-ink); }
.mix-t .mix-b { gap: 8px; }
.mix-t .riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mix-t h3 { font-size: 1.75rem; }
.mix-t .int-big { margin: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; gap: 8px; align-items: center; }

/* confronto delle miscele (resta, in stile Atelier) */
.story { border-radius: 6px; background: var(--white); border-color: rgba(184, 151, 90, .55); margin-top: 56px; }
.mx-tabs { border-radius: 2px; background: transparent; border-color: rgba(184, 151, 90, .55); }
.mx-tab { border-radius: 2px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.mx-stage { border-radius: 6px; }
.mx-ph .ph-f { border-radius: 6px; box-shadow: none; }
.mx-name { font-weight: 400; }

.s3d-palco { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #FBF7F0 0%, #F1EADF 55%, #E8DFD1 100%); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.s3d-palco:active { cursor: grabbing; }
.s3d-palco > .ph-f { position: absolute; inset: 0; aspect-ratio: auto; transition: opacity .5s ease; }
.s3d-palco .s3d-tela { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; pointer-events: none; display: block; }
.s3d-palco.s3d-pronto .s3d-tela { opacity: 1; }
.s3d-palco.s3d-pronto > .ph-f { opacity: 0; }
.s3d-stato { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(255, 253, 248, .9); color: #221C17; padding: 6px 10px; border-radius: 2px; }
.s3d-palco.s3d-pronto .s3d-stato { display: none; }
@media (max-width: 640px) { .s3d-palco { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .s3d-palco .s3d-tela, .s3d-palco > .ph-f, .tc-strato, .tc-strati { transition: none !important; transform: none !important; } }

/* (base del visore qui sopra: vale anche per la «Vista 3D» della scheda prodotto) */
/* ---------- home: «La scatola, da ogni lato» (11/11 notte) ----------
   In alto il detto siciliano della scatola scelta, grande, con la spiegazione; sotto la scatola in un arco tinto del colore
   vero della sua foto (catalogo.js → scatola.fondo), con il filo d'oro; in fondo tutte le scatole in miniatura.
   Il colore dell'arco segue la scatola (transizione morbida); il testo resta sull'avorio (contrasto invariato). */
.sc3 { --fondo: #F3F3F3; overflow: hidden; }
@media (min-width: 900px) { section.blk.sc3 { padding-top: 64px; } }
.sc3 .wrap { display: grid; justify-items: center; text-align: center; }
.sc3-t { margin: 0 0 18px; font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta, var(--gold-ink)); }
.sc3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sc3-detto { margin: 0; max-width: 21ch; min-height: 3.3em; display: grid; align-content: end; transition: opacity .24s cubic-bezier(.4, 0, 1, 1), transform .24s cubic-bezier(.4, 0, 1, 1); font-size: clamp(1.7rem, 1.05rem + 3.2vw, 2.9rem); }
.sc3-detto.via { opacity: 0; transform: translateY(-.15em); }
.sc3-detto blockquote { margin: 0; }
.sc3-sic { margin: 0; font: 400 1em/1.08 var(--serif); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.sc3-sic::before, .sc3-sic::after { font-style: italic; color: var(--gold-ink); }
.sc3-sic::before { content: "«"; margin-right: .08em; }
.sc3-sic::after { content: "»"; margin-left: .08em; }
.sc3-sic .w { display: inline-block; }
.sc3-it { margin: .7em auto 0; max-width: 34ch; font: italic 400 clamp(1rem, .92rem + .35vw, 1.2rem)/1.5 var(--serif); color: var(--ink-2); text-wrap: balance; }
.sc3-it::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto .75em; background: var(--gold); }
/* l'arco: una nicchia come quelle delle facciate siciliane, filo d'oro e doppia cornice */
.sc3-arco { position: relative; width: min(100%, 560px, 56vh); aspect-ratio: 1 / 1; margin-top: clamp(22px, 4vw, 44px);
  border-radius: 50% 50% 4px 4px / 50% 50% 4px 4px; background-color: var(--fondo); transition: background-color .9s var(--ease-at);
  box-shadow: 0 0 0 1px rgba(184, 151, 90, .9), 0 0 0 7px var(--paper), 0 0 0 8px rgba(184, 151, 90, .55), 0 40px 70px -46px rgba(34, 28, 23, .55); isolation: isolate; overflow: hidden; }
/* luce e ombra della nicchia SOPRA la scatola (foto o 3D): così il fondo della foto e il colore dell'arco restano identici */
.sc3-arco::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(70% 46% at 50% 30%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 72%), linear-gradient(to top, rgba(34, 28, 23, .08), rgba(34, 28, 23, 0) 26%); }
.sc3 .s3d-palco { position: absolute; inset: 9% 0 10%; aspect-ratio: auto; border-radius: 0; background: transparent; perspective: 900px; }
.sc3 .s3d-palco:not([tabindex]) { cursor: default; }
.sc3 .s3d-palco > .ph-f { background: transparent; border-radius: 0; }
.sc3 .s3d-palco > .ph-f img { width: 100%; height: 100%; object-fit: contain; transform: scale(calc(var(--z, 1) * 1.08)); transition: none;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 20%, #000 80%, transparent 96%), linear-gradient(to bottom, transparent 4%, #000 20%, #000 80%, transparent 96%);
  mask-image: linear-gradient(to right, transparent 4%, #000 20%, #000 80%, transparent 96%), linear-gradient(to bottom, transparent 4%, #000 20%, #000 80%, transparent 96%); }
/* il visore 3D si vede solo quando la scatola scelta è 3D ed è pronta (classe vede3d) */
.sc3 .s3d-palco .s3d-tela { opacity: 0; transition: opacity .5s ease, transform .5s var(--ease-at); }
.sc3 .s3d-palco.s3d-pronto > .ph-f { opacity: 1; }
.sc3 .s3d-palco.s3d-pronto.vede3d .s3d-tela { opacity: 1; }
.sc3 .s3d-palco.s3d-pronto.vede3d > .ph-f { opacity: 0; }
/* uscita: la scatola gira via (il 3D con una spinta, la foto con una rotazione in prospettiva); entrata: arriva girando */
.sc3 .s3d-palco.esce > .ph-f { transition: opacity .34s cubic-bezier(.4, 0, 1, 1), transform .38s cubic-bezier(.55, 0, .8, .2); opacity: 0; transform: rotateY(-55deg) scale(.88); }
.sc3 .s3d-palco.esce .s3d-tela { opacity: 0; transform: scale(.84); transition: opacity .36s ease .04s, transform .38s cubic-bezier(.5, 0, .75, 0); }
.sc3 .s3d-palco.entra > .ph-f { animation: sc3-entra .85s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes sc3-entra { from { opacity: 0; transform: rotateY(50deg) scale(.86); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
/* il segno «trascina»: piccolo, solo sulla scatola 3D pronta, sparisce al primo tocco */
.sc3-gesto { position: absolute; left: 50%; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; transform: translateX(-50%); padding: 5px 11px 5px 8px; border-radius: 99px; background: rgba(255, 253, 248, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--pan-ink); font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.sc3 .s3d-palco.s3d-pronto.vede3d + .sc3-gesto { opacity: 1; }
.sc3.toccato .sc3-gesto { opacity: 0 !important; }
.sc3-gesto svg { animation: sc3-gira 2.6s ease-in-out 3; }
@keyframes sc3-gira { 0%, 60%, 100% { transform: rotate(0); } 80% { transform: rotate(-35deg); } }
.sc3-nome { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 18px; margin: 14px 0 0; font: 400 1rem/1.3 var(--serif); color: var(--ink-2); }
.sc3-nome b { font-weight: 500; color: var(--ink); margin-right: .25em; }
/* le scatole: miniature vere, ognuna sul suo colore; sul telefono scorrono in orizzontale con lo scatto */
.sc3-scegli { display: flex; gap: 10px; width: calc(100% + 32px); margin: 10px -16px 0; padding: 6px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sc3-scegli::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .sc3-scegli { width: auto; margin: 28px 0 0; padding: 6px 0 10px; justify-content: center; overflow: visible; } }
.sc3-scegli button { flex: 0 0 auto; width: 96px; scroll-snap-align: start; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 0 0 4px; border: 0; background: none; color: var(--ink-2); cursor: pointer; text-align: center; }
.sc3-mini { position: relative; display: block; width: 84px; height: 96px; border-radius: 42px 42px 3px 3px; background: var(--fondo); overflow: hidden; box-shadow: 0 0 0 1px rgba(184, 151, 90, .45); transition: box-shadow .35s ease, transform .35s var(--ease-at); }
.sc3-mini img { position: absolute; left: 50%; top: 56%; width: 120%; height: auto; max-width: none; transform: translate(-50%, -50%); }
.sc3-3d { position: absolute; right: 6px; top: 8px; padding: 2px 4px; border-radius: 2px; background: rgba(255, 253, 248, .9); color: #221C17; font: 500 12px/1 var(--mono); letter-spacing: .04em; }
.sc3-l { display: grid; gap: 1px; font: 400 12px/1.25 var(--mono); letter-spacing: .02em; }
.sc3-l b { font: 500 .95rem/1.2 var(--serif); letter-spacing: 0; color: var(--ink); }
.sc3-scegli button[aria-pressed="true"] { color: var(--ink); }
.sc3-scegli button[aria-pressed="true"] .sc3-mini { box-shadow: 0 0 0 1px var(--paper), 0 0 0 3px var(--gold-ink); transform: translateY(-3px); }
@media (hover: hover) { .sc3-scegli button:hover .sc3-mini { transform: translateY(-3px); } }
.sc3-scegli button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* il detto entra parola per parola (quando la sezione arriva sullo schermo e a ogni cambio di scatola) */
.sc3.rv-anim .sc3-sic .w { animation: sc3-parola .75s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 55ms + 60ms); }
.sc3.rv-anim .sc3-it { animation: sc3-parola .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(min(var(--i), 8) * 55ms + 200ms); }
@keyframes sc3-parola { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sc3 *, .sc3 *::before, .sc3 *::after { animation: none !important; }
  .sc3-arco, .sc3-detto, .sc3-mini, .sc3 .s3d-palco > .ph-f, .sc3 .s3d-palco .s3d-tela { transition: none !important; }
  .sc3 .s3d-palco.esce > .ph-f, .sc3 .s3d-palco.esce .s3d-tela { transform: none; }
}
:root[data-theme="dark"] .sc3-arco { box-shadow: 0 0 0 1px rgba(217, 190, 131, .7), 0 0 0 7px var(--paper), 0 0 0 8px rgba(217, 190, 131, .4), 0 40px 70px -46px rgba(0, 0, 0, .8); }

/* ---------- box, calcolatore, schede, carrello ---------- */
.boxc, .calc, .card, .cstep, .buybox, .help, .sugg, .mbox, .ord, .tz-step, .cf, .pair-taz, .pdp-box, .opt, .feats li { border-radius: 6px; border-color: rgba(184, 151, 90, .55); box-shadow: none; }
.boxc.feat { border-color: var(--ink); }
.boxc .pair { border-radius: 6px; background: transparent; padding: 0; }
.boxc .pair .ph-f { border-radius: 6px; }
.price b, .pbig, .ppc-big { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; letter-spacing: -.01em; }
.price .pu { font-family: var(--mono); font-size: 12px; font-weight: 400; background: transparent; padding: 0; }
.calc .big b { color: var(--ink); }
.calc-n .cn { border-radius: 50%; }
.ladder .bar { border-radius: 0; height: 3px; }
.ladder .bar i { background: var(--gold-ink); border-radius: 0; }
.sum .l.tot { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; border-top-color: var(--gold); }
.ship .bar { border-radius: 2px; height: 3px; }
.ship .bar i { background: var(--gold-ink); }
.drawer .panel { background: var(--paper); }
.panel .ph-h h2 { font-weight: 400; }
.cl .th .ph-f { border-radius: 4px; }
.cl .nm { font-family: var(--serif); }
.warn, .bad, .okbox, .note, .compat-now, .facts, .err-box { border-radius: 4px; }
.facts div { background: var(--white); }
details.acc summary { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
details.acc { border-top-color: var(--gold); }
details.acc:last-of-type { border-bottom-color: var(--gold); }
.opt:has(input:checked) { border-color: var(--ink); }
.tabs button { border-radius: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.toast { border-radius: 2px; font-family: var(--mono); font-size: 13px; letter-spacing: .03em; }

/* ---------- pagina prodotto ---------- */
.gal .main { border-radius: 6px; padding: 0; background: transparent; aspect-ratio: 1; overflow: hidden; }
.gal .main > .ph-f, .gal .main > .ph-box { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 6px; box-shadow: none; }
.gal .main > .s3d-palco { position: absolute; inset: 0; aspect-ratio: auto; }
.thumbs button { border-radius: 4px; border-color: rgba(184, 151, 90, .55); background: var(--white); }
.thumbs button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.thumbs .t3d { width: 80px; height: 80px; display: grid; place-items: center; align-content: center; gap: 2px; font: 500 12px/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.thumbs .t3d svg { width: 30px; height: 30px; }
.g3d-viste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.g3d-viste button { min-height: 44px; padding: 0 12px; border: 1px solid rgba(184, 151, 90, .75); border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; font: 400 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pinfo h1 { font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height: 1; }
.sys-big { border-radius: 4px; border-width: 1px; border-left-width: 4px; border-color: var(--ink); border-left-color: var(--sf, var(--gold)); background: var(--white); }
.sys-big span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.sys-big b { font-weight: 400; }
.char { font-style: italic; }
.feats li { background: transparent; border: 0; border-radius: 0; padding: 8px 0; border-bottom: 1px solid rgba(184, 151, 90, .45); }
.feats svg { color: var(--gold-ink); }
.prov-big { border-left: 1px solid var(--gold); background: transparent; border-radius: 0; }
.vp button { border-radius: 4px; background: var(--white); font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.vp button .ph-f { border-radius: 4px; }
.int-big b { font-weight: 500; }

/* ---------- racconto, proverbi, tazzine, Natale ---------- */
.st-foto { border-radius: 6px; border: 0; }
.st-foto figcaption, .nat-foto figcaption { border-radius: 2px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.st-sub { font-style: italic; }
.pv { border-radius: 6px; border-color: rgba(184, 151, 90, .45); background: var(--white); }
.pv-b { border-top-width: 2px; }
.pv q { font-size: 1.1rem; }
.dt2 { border-radius: 6px; border-color: rgba(184, 151, 90, .55); }
.dt2 .ph-f, .dt-natale .dt-img { border-radius: 6px; }
.tz-disegni { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tz-disegni li { display: grid; gap: 6px; justify-items: center; text-align: center; font: 400 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.tz-disegni img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--paper); border: 1px solid rgba(184, 151, 90, .45); border-radius: 4px; padding: 8px; }
:root[data-theme="dark"] .tz-disegni img { background: #FFFDF8; }
.tz-d, .tz-fmt button { border-radius: 4px; }
.tz-d.on { border-color: var(--ink); }
.tz-step h2 { font-weight: 400; }
.tz-step h2 .n { font-family: var(--mono); font-size: 12px; }

/* ---------- fiducia e piè di pagina ---------- */
.trust { background: var(--paper); border-top: 1px solid rgba(184, 151, 90, .45); }
.trust h2 { font-weight: 400; }
.trust li svg { color: var(--gold-ink); }
.trust li b { font-weight: 500; }
.foot-site { background: var(--cream); border-top: 0; }
:root[data-theme="dark"] .foot-site { background: var(--paper-2); }
.foot-site ul { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.foot-site .legal { border-top-color: rgba(184, 151, 90, .55); font-size: .86rem; }
.theme-sw button { border-radius: 2px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.aiuto { border-radius: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-color: rgba(184, 151, 90, .75); }
@media (max-width: 899px) { .aiuto { border-radius: 50%; } }
.mm nav a { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.mm details summary { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.mm-sec a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
dialog { border-radius: 6px; }

/* ---------- Natale, panettoni e pagine di racconto: stessi gettoni ---------- */
.dpc .art, .pc.dpc .art { background: #FFFFFF; border: 1px solid rgba(184, 151, 90, .45); }
.simul { border-radius: 2px; font-family: var(--mono); font-size: 12px; }
/* foto composte dei box (tools/box_foto.py): etichetta piccola su una riga, anche nella scheda stretta del telefono */
.boxfoto .simul { font-size: 10px; letter-spacing: .05em; padding: 3px 6px; white-space: nowrap; }
.pc .art .boxfoto .simul { left: 6px; bottom: 6px; font-size: 9px; letter-spacing: .03em; }
.boxc .boxfoto { border-radius: 6px; }

/* euro dei prezzi grandi: in DM Mono (nel Bodoni sembrava una «C»; in Cormorant è sottile e piccolo accanto alle cifre), nei prezzi grandi resta leggibile con le cifre allineate */
.pbig, .price b, .tc-grande, .pc .ppc .v { font-variant-numeric: lining-nums tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ph-f img, .pc .art .ph-f img, .mix-t .mix-img .ph-f img { transition: none !important; }
}
@media (max-width: 767px) { .etna:not(.et-statico) .et-didascalia { display: none; } }
/* riga «50 capsule · € 0,21 a capsula»: mono minuscolo, va a capo tra le parti, mai dentro il prezzo (spazio indivisibile) */
.pc .pconf, .pc .foot2 .pconf { text-transform: none; letter-spacing: 0; white-space: normal; overflow: visible; }
/* telefoni stretti: la testata non si sovrappone mai (iPhone SE 320/375) */
@media (max-width: 420px) { .hrow { gap: 8px; } .logo small { letter-spacing: 0; } .cart-btn { letter-spacing: .02em; } .cart-btn::before { margin-right: .3em; } .cart-btn::after { margin-left: .3em; } }
@media (max-width: 380px) { .header .logo small { display: none; } .menu-btn { font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; } .header .logo img { width: 92px; } }
.bc-grid > *, .two > *, .boxes3 > * { min-width: 0; }
.ladder .row { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 420px) { .mx-tab { letter-spacing: .02em; padding: 0 6px; } }
.mx-price { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .04em; }
.story .mx-stage { background: var(--fondo-st, var(--cream)); }
/* Àncore e campi raggiunti con Tab sotto la testata fissa (12/11/2026, assets/scorrimento.js):
   scroll-padding = altezza VERA della parte fissa (testata + barra dei filtri), misurata in --mr-testata; ripiego --header-h.
   scroll-margin-top = respiro sopra il titolo raggiunto. Insieme: il titolo resta sotto la testata, mai coperto. */
html { scroll-padding-top: var(--mr-testata, var(--header-h)); }
[id] { scroll-margin-top: 20px; }

/* ® piccolo (Alberto 11/11/2026): nel Bodoni (testi) e nel Cormorant (titoli) il simbolo a piena grandezza pesa come una lettera.
   app.js mette ogni «®» mostrato in <span class="reg">: 0,55 em, in alto, senza cambiare l'altezza della riga. */
.reg { font-size: .55em; line-height: 0; position: relative; top: -.62em; vertical-align: baseline; margin-left: .04em; letter-spacing: 0; font-weight: inherit; }

/* Quantità chiare (Alberto 12/11/2026): domanda, selettore, pulsante con il totale dal vivo, conversione
   «2 confezioni = 100 capsule» sotto; la stessa dicitura nel carrello, nella cassa e sotto le immagini dei box. */
.qbox { display: grid; gap: 8px; margin-top: 4px; }
.qlab { font: 400 12px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.qbox .buyrow { flex-wrap: wrap; }
.qadd { flex: 1 1 190px; min-width: 0; white-space: nowrap; }
.qadd .qtot { font-variant-numeric: lining-nums tabular-nums; }
.qconv { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.qconv b { font-weight: 600; }
.cl .cl-q { margin-top: 6px; font-size: .92rem; }
.boxc .box-q { font-size: 1.02rem; }
.tc-piccolo b { font-weight: 500; }
@media (max-width: 420px) { .qadd .ad-x { display: none; } .qadd { padding: 0 16px; } }

/* Natale: il messaggio di Alberto, una nota raffinata (filetto d'oro, corsivo), mai un allarme */
.nat-nota { margin: 6px 0 0; padding: 12px 14px 12px 16px; border-left: 2px solid var(--gold); background: rgba(184, 151, 90, .08); font-style: italic; font-size: .95rem; line-height: 1.55; color: var(--ink); }
.nat-nota [data-nat-data] { font-style: normal; font-weight: 600; white-space: nowrap; }
.nat-breve { color: var(--gold-ink); }

/* Quando arriva (CFG.consegna): riga sobria con il furgoncino, la stima con le date sotto */
.cons-riga { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 0; }
.cons-riga svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--gold-ink); margin-top: 1px; }
.cons-riga p { margin: 0; font-size: .92rem; line-height: 1.5; }
.cons-stima { display: block; color: var(--ink-2); font-size: .88rem; }
#co-quando-w:not(:empty) { margin-top: 14px; }