/* =====================================================================
   M'Arricriu — negozio online, versione 2 (giro «luminoso», 9/11/2026)
   Base BIANCA e luminosa. Nero espresso solo per testo, icone, pulsante
   «+» e piccole etichette. Oro solo per i dettagli. Maioliche (maiolica.css)
   come gioia, con misura. Tema scuro solo se scelto dal cliente.
   Guida: DESIGN.md
   ===================================================================== */
:root {
  --white: #FFFFFF;
  --paper: #FFFFFF;
  --paper-2: #FAF7F1;       /* avorio chiarissimo per fasce */
  --cream: #F6F1E7;         /* fondo delle zone immagine */
  --card: #FFFFFF;
  --ink: #241D19;           /* nero espresso */
  --ink-2: #5E5852;
  --grey: #77716A;
  --line: #ECE7DE;
  --line-2: #DDD5C8;
  --gold: #B99853;          /* solo dettagli */
  --gold-ink: #86672F;      /* testo dorato (AA) */
  --blu: #1E5A8A;           /* blu maiolica: pulsanti principali (6,9:1 con il bianco) */
  --blu-2: #164A73;
  --azzurro: #5A9BD5;
  --limone: #F2C14E;
  --soft-blu: #EEF5FB;
  --ok: #2F6B3A; --ok-bg: #EEF6EC;
  --warn-ink: #7A4B0B; --warn-bg: #FDF4E1;
  --bad-ink: #9A2A18; --bad-bg: #FDECE8;
  --ph-bg: #F3EFE7;
  --focus: #1E5A8A;
  --cta: #C9A964; --cta-hover: #BD9C55; --cta-ink: #241D19; --cta-border: #86672F;   /* oro dell'acquisto */
  --shadow: 0 1px 2px rgba(36, 29, 25, .04), 0 10px 30px -18px rgba(36, 29, 25, .22);
  --shadow-lg: 0 24px 60px -28px rgba(36, 29, 25, .35);
  --radius: 18px;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1240px;
  --gutter: 16px;
  --header-h: 64px;
  color-scheme: light;
}
/* Tema scuro: SOLO se scelto dal cliente (pulsante nel piè di pagina) */
:root[data-theme="dark"] {
  --white: #17120F; --paper: #17120F; --paper-2: #1D1814; --cream: #241E19; --card: #1D1814;
  --ink: #F5EFE6; --ink-2: #CFC6BA; --grey: #B3AA9E; --line: #2F2822; --line-2: #40362D;
  --gold: #C9A964; --gold-ink: #D9BE83; --blu: #8EC0EA; --blu-2: #B2D4F2; --soft-blu: #1B2733;
  --ok: #9CC48F; --ok-bg: #1D2A1A; --warn-ink: #F0CF8A; --warn-bg: #33270F; --bad-ink: #FFB4A6; --bad-bg: #3A1914;
  --ph-bg: #241E19; --focus: #F2D27A; --cta: #C9A964; --cta-hover: #D4B676; --cta-ink: #17120F; --cta-border: #D9BE83; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 36px -18px rgba(0,0,0,.7); --shadow-lg: 0 30px 70px -30px rgba(0,0,0,.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 72px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--gold); }
a:hover { color: var(--blu); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.06; margin: 0 0 .45em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 760px) { :root { --gutter: 32px; } }
.page-pad { padding-top: 36px; padding-bottom: 80px; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.kicker { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin: 0 0 14px; }
.serif { font-family: var(--serif); }
.num { font-variant-numeric: tabular-nums; }
.lead { font-size: 1.12rem; color: var(--ink-2); }
.gold-rule { width: 56px; height: 1px; background: var(--gold); margin: 18px 0; border: 0; }
.center { text-align: center; }
.center .gold-rule { margin-left: auto; margin-right: auto; }

/* ---------- Maioliche ---------- */
.maj-strip { height: 14px; background: var(--maj-strip) 0 0 / 28px 14px repeat-x; }
.maj-bg { background-color: var(--paper-2); background-image: var(--maj-soft); background-size: 120px 120px; }
:root[data-theme="dark"] .maj-bg { background-image: none; }
.maj-frame { position: relative; }

/* ---------- Barra in alto e intestazione ---------- */
.comunica { background: #F4F2EE; color: #3A332E; font-size: .8rem; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px var(--gutter); text-align: center; }
:root[data-theme="dark"] .comunica { background: #221C17; color: var(--ink); }
.comunica .msg { display: none; }
.comunica .msg.on { display: inline; animation: fade .6s ease; }
.comunica .appr { margin-left: 8px; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--warn-ink); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; }
@media (prefers-reduced-motion: reduce) { .comunica .msg { display: none !important; } .comunica .msg:first-child { display: inline !important; } }
.header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
:root[data-theme="dark"] .header { background: rgba(23, 18, 15, .96); }
.hrow { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--ink); flex: none; line-height: 1; }
.logo img { width: 118px; height: auto; }
.logo small { font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; margin-top: 1px; padding-left: 24px; }
:root[data-theme="dark"] .logo img { filter: invert(1) sepia(.15); }
.nav { display: none; gap: 0; margin-left: 18px; align-items: center; }
.nav a, .nav .navb { text-decoration: none; padding: 10px 9px; font-weight: 600; font-size: .86rem; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink); }
.nav a:hover, .nav .navb:hover, .nav .navb[aria-expanded="true"] { color: var(--blu); }
.nav [aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.nav .navb svg { width: 14px; height: 14px; }
.hicons { margin-left: auto; display: flex; gap: 0; align-items: center; }
.ibtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; text-decoration: none; color: var(--ink); }
.ibtn:hover { background: var(--paper-2); color: var(--ink); }
.ibtn svg { width: 22px; height: 22px; }
.badge-n { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .66rem; font-weight: 800; display: grid; place-items: center; }
.badge-n[hidden] { display: none; }
.menu-btn { order: 10; }
@media (min-width: 1280px) { .nav { display: flex; } .menu-btn { display: none; } }
@media (max-width: 400px) { .hicons .hide-xs { display: none; } .logo img { width: 106px; } }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.mega[hidden] { display: none; }
.mega-in { display: grid; grid-template-columns: 1.1fr .9fr 1.6fr; gap: 40px; padding-top: 28px; padding-bottom: 32px; }
.mega .mh { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); margin-bottom: 12px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega ul a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 4px; border-radius: 8px; font-weight: 500; }
.mega ul a:hover { background: var(--paper-2); }
.mega-boxes > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.mb { text-decoration: none; font-size: .8rem; display: grid; gap: 6px; }
.mb .ph-f { border-radius: 12px; }

/* Riga della macchina scelta (pagine non catalogo) */
.sysbar { border-bottom: 1px solid var(--line); background: var(--white); }
.sysbar .wrap { display: flex; align-items: center; gap: 10px; min-height: 50px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.sysbar .lbl { font-size: .9rem; }
.sysbar .lbl b { font-weight: 700; }
.sysbar.vuota { background: var(--soft-blu); }
.linkbtn { background: none; border: 0; padding: 6px 4px; color: var(--blu); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; }

/* Pillole del catalogo (fisse sul telefono) */
.pillbar { position: sticky; top: var(--header-h); z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
:root[data-theme="dark"] .pillbar { background: rgba(23, 18, 15, .97); }
.pillbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 60px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; }
.pill svg { flex: none; }
.pill .chev { width: 14px; height: 14px; }
.pill.thin { border-color: var(--line-2); font-size: .74rem; min-height: 28px; padding: 0 10px; font-weight: 700; letter-spacing: .02em; }

/* ---------- Pulsanti, campi, etichette ---------- */
/* Pulsanti (revisione 9/11): l'azione d'acquisto è ORO (.btn.accent: fondo #C9A964, testo #241D19 7,4:1, bordo #86672F 5,3:1
   sul bianco); tutti gli altri pulsanti sono secondari, contorno scuro. Il blu resta solo per piccoli link informativi. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer; font-size: .96rem; transition: transform .15s ease, background .15s ease; }
.btn:hover { color: var(--ink); background: var(--paper-2); border-color: var(--ink); }
.btn:active { transform: scale(.98); }
.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.ghost { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn.block { width: 100%; }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: .88rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.plus { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); border: 0; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .15s; font-size: 1.5rem; line-height: 1; }
.plus:hover { transform: scale(1.06); }
.plus svg { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); cursor: pointer; font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper-2); }
.chip[disabled] { cursor: not-allowed; color: var(--grey); border-style: dashed; background: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tbc { display: inline-block; font-size: .64rem; font-weight: 700; color: var(--warn-ink); background: var(--warn-bg); border-radius: 999px; padding: 2px 8px; vertical-align: middle; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: var(--ink); color: var(--paper); }
.tag.light { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }
.tag.gold { background: var(--white); color: var(--gold-ink); border: 1px solid var(--gold); }
.tag.verify { background: var(--warn-bg); color: var(--warn-ink); }
.tag.stag { background: var(--white); color: var(--ink); border: 1px solid var(--ink); }
.field { display: grid; gap: 6px; }
.field label, .lab { font-weight: 700; font-size: .9rem; }
.field input, .field select, .input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); }
.field input:focus-visible, .input:focus-visible { outline-offset: 0; border-color: var(--focus); }
.field.err input { border-color: var(--bad-ink); }
.field .err-t { font-size: .82rem; color: var(--bad-ink); font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--ink-2); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blu); flex: none; }
.check.err span { color: var(--bad-ink); }
.step { display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: 999px; height: 44px; background: var(--white); animation: grow .18s ease; }
.step button { width: 42px; height: 42px; border: 0; background: none; cursor: pointer; font-size: 1.25rem; border-radius: 999px; display: grid; place-items: center; }
.step button:hover { background: var(--paper-2); }
.step output { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.step.sm { height: 40px; } .step.sm button { width: 38px; height: 38px; }
@keyframes grow { from { transform: scale(.85); opacity: .4; } }

/* ---------- Sezioni ---------- */
section.blk { padding: 64px 0; }
@media (min-width: 900px) { section.blk { padding: 96px 0; } }
.band { background: var(--paper-2); }
.sec-h { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-h p { max-width: 54ch; margin: 0; }
.sec-h h2 { margin: 0; }

/* HERO luminoso: scatola vera sotto un arco, carretto e limoni */
.hero { padding: 28px 0 56px; position: relative; overflow: hidden; }
.hero .grid { display: grid; gap: 28px; align-items: center; }
.hero h1 em { font-style: italic; color: var(--gold-ink); }
.hero .sub { font-size: 1.12rem; color: var(--ink-2); max-width: 44ch; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-vis { position: relative; max-width: 520px; width: 100%; margin: 0 auto; }
.arch { position: relative; border-radius: 999px 999px 26px 26px; background: radial-gradient(ellipse at 50% 32%, #FFFFFF 0%, #FFFDF8 55%, #F6EFE2 100%); aspect-ratio: 1 / 1.06; display: grid; place-items: center; overflow: hidden; border: 1px solid #EADFCB; }
.arch::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--maj-strip) 0 0 / 32px 16px repeat-x; opacity: .9; }
.arch::after { content: ""; position: absolute; inset: 12px 12px 28px; border-radius: 999px 999px 16px 16px; border: 1px solid rgba(185, 152, 83, .55); pointer-events: none; }
.arch img { width: 90%; height: auto; mix-blend-mode: multiply; }
.hero-vis .carretto-h { position: absolute; left: -6%; bottom: -4%; width: 42%; filter: drop-shadow(0 10px 18px rgba(36, 29, 25, .15)); }
.hero-vis .limoni { position: absolute; right: -8%; top: -4%; width: 40%; }
@media (min-width: 900px) { .hero { padding: 52px 0 96px; } .hero .grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.hero-strip { margin-top: 8px; }

/* Tessere macchina con disegni delle capsule */
.macchine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .macchine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mac { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 18px 10px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--white); cursor: pointer; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.mac::before { content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--sf, var(--gold)); }
.mac:hover { border-color: var(--ink); box-shadow: var(--shadow); color: var(--ink); transform: translateY(-2px); }
.mac .capsbox { height: 64px; display: grid; place-items: end center; }
.mac b { font-weight: 800; font-size: .95rem; line-height: 1.2; }
.mac span.d { font-size: .76rem; color: var(--ink-2); line-height: 1.3; }
.mac[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mac[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px; right: 12px; font-weight: 800; }

/* ---------- Schede prodotto (griglia, stile «degustazione») ---------- */
.grid-p { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .grid-p { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .grid-p { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pc { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.pc:hover { box-shadow: var(--shadow); }
.pc .art { position: relative; display: grid; place-items: center; text-decoration: none; background: var(--cream); padding: 14% 12% 12%; aspect-ratio: 1 / .96; }
.pc .art::after { content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 46px; background: var(--maj-stella) 0 0 / 46px 46px; border-bottom-left-radius: 100%; opacity: .55; pointer-events: none; }
.pc .art .ph-f { width: 100%; border-radius: 12px; box-shadow: 0 10px 22px -16px rgba(36, 29, 25, .45); }
.pc .art .ph-box { width: 100%; }
.pc .art .tag { position: absolute; top: 10px; left: 10px; z-index: 1; }
.pc .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pc h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.3; }
.pc h3 a { text-decoration: none; }
.pc .mix { font-size: .8rem; color: var(--ink-2); }
.pc .int { font-size: .74rem; color: var(--gold-ink); font-weight: 600; }
.pc .ppc { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; margin-top: 6px; }
.pc .ppc small { font-size: .7rem; font-weight: 600; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.pc .pconf { font-size: .8rem; color: var(--ink-2); }
.pc .foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 8px; }
.pc .foot .meta { display: grid; gap: 4px; min-width: 0; }
.pc .noprice { font-size: .95rem; font-weight: 700; color: var(--ink-2); margin-top: 6px; }
.prov-s { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-2); margin: 2px 0 0; line-height: 1.25; }
@media (max-width: 420px) { .pc .body { padding: 10px; } .pc .ppc { font-size: 1.25rem; } .pc .art { padding: 12% 9% 10%; } }
.sw-row { display: flex; align-items: center; gap: 8px; min-height: 30px; flex-wrap: wrap; }
.swb { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); padding: 0; }
.swb[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.price .pu { font-size: .82rem; background: var(--paper-2); padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; font-weight: 600; }
.price .kg { font-size: .74rem; color: var(--ink-2); }
.band-sys { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; line-height: 1.25; width: fit-content; max-width: 100%; }
.band-sys::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf); flex: none; }
.band-sys.big { font-size: .9rem; padding: 10px 16px; border-color: var(--ink); }
.verify-l { font-size: .72rem; color: var(--warn-ink); background: var(--warn-bg); padding: 2px 8px; border-radius: 6px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ph-f { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--fondo, var(--cream)); }
.ph-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Segnaposto «foto in arrivo»: bianco, piastrella di maiolica, scritta */
.ph-box { position: relative; aspect-ratio: 1; background: var(--white); display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.ph-box::before { content: ""; position: absolute; inset: 0; background: var(--maj-soft) 0 0 / 90px 90px; }
.ph-box .in { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 14px; }
.ph-box .tile { width: 44px; height: 44px; background: var(--maj-stella) 0 0 / 44px 44px; border-radius: 50%; box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line-2); }
.ph-box b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.1; color: #241D19; }
.ph-box .fia { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: #6B645C; font-weight: 700; }
:root[data-theme="dark"] .ph-box { background: #FFFDF8; }

/* ---------- Catalogo ---------- */
.cat-top { padding: 28px 0 10px; }
.cat-res { padding-bottom: 72px; }
.res-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0 16px; flex-wrap: wrap; }
.res-h select { min-height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--white); }
.grp { margin-bottom: 44px; }
.grp-h { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.7rem; font-weight: 500; padding: 0 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.empty { padding: 40px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.filtri { display: grid; gap: 22px; }
.filtri fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.filtri legend { font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.filtri .nota { font-size: .78rem; color: var(--ink-2); }
.searchbox { position: relative; }
.searchbox input { padding-left: 44px; border-radius: 999px; }
.searchbox svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-2); pointer-events: none; }

/* ---------- Scheda prodotto ---------- */
.pp { display: grid; gap: 28px; padding: 24px 0 64px; }
@media (min-width: 960px) { .pp { grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 36px; } .pp .gal { position: sticky; top: calc(var(--header-h) + 70px); align-self: start; } }
.gal .main { position: relative; border-radius: 24px; overflow: hidden; background: var(--cream); padding: 10%; }
.gal .main::after { content: ""; position: absolute; top: 0; right: 0; width: 72px; height: 72px; background: var(--maj-stella) 0 0 / 72px 72px; border-bottom-left-radius: 100%; opacity: .55; }
.gal .main .ph-f { border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(36, 29, 25, .5); }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button { width: 80px; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--white); }
.thumbs button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.thumbs .capsview { width: 80px; height: 80px; display: grid; place-items: center; }
.gal .slot { margin-top: 10px; font-size: .8rem; color: var(--ink-2); }
.crumbs { font-size: .85rem; color: var(--ink-2); padding-top: 18px; }
.crumbs a { color: var(--ink-2); }
.pp h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-top: 14px; }
.ppc-big { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ppc-big small { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.prov-big { margin: 18px 0; padding: 18px 20px 18px 22px; border-left: 2px solid var(--gold); background: var(--paper-2); border-radius: 0 14px 14px 0; }
.prov-big blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.prov-big figcaption { margin-top: 8px; color: var(--ink-2); }
.prov-big figcaption span { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-top: 6px; font-weight: 700; }
.var-pick { margin: 18px 0; }
.vp { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 8px; }
.vp button { padding: 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--cream); cursor: pointer; text-align: center; font-weight: 700; font-size: .86rem; display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; align-self: start; }
.vp button .ph-f, .vp button .ph-box { border-radius: 10px; }
.vp .ph-box .in { padding: 4px; } .vp .ph-box b { font-size: .95rem; } .vp .ph-box .tile { width: 26px; height: 26px; background-size: 26px 26px; }
.vp button[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.buybox { border: 1px solid var(--line); border-radius: 20px; background: var(--white); padding: 18px; display: grid; gap: 14px; }
.buyrow { display: flex; gap: 10px; align-items: center; }
.buyrow .btn { flex: 1; }
.compat-now { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--paper-2); font-size: .9rem; }
.ladder { display: grid; gap: 8px; }
.ladder .row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: .9rem; }
.ladder .bar { grid-column: 1 / -1; height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.ladder .bar i { display: block; height: 100%; background: var(--azzurro); border-radius: 999px; }
.ladder .row.best b { color: var(--ok); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0; }
.facts div { background: var(--white); padding: 12px 14px; }
.facts dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); font-weight: 800; }
.facts dd { margin: 4px 0 0; font-size: .92rem; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }
details.acc { border-top: 1px solid var(--line); }
details.acc:last-of-type { border-bottom: 1px solid var(--line); }
details.acc summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; min-height: 48px; align-items: center; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; }
details.acc[open] summary::after { content: "−"; }
details.acc > div { padding: 0 0 18px; }
.warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 12px; padding: 12px 14px; font-size: .92rem; }
.warn a { color: inherit; }
.bad { background: var(--bad-bg); color: var(--bad-ink); border-radius: 12px; padding: 12px 14px; font-size: .95rem; border-left: 4px solid var(--bad-ink); }
.okbox { background: var(--ok-bg); color: var(--ok); border-radius: 12px; padding: 10px 12px; font-size: .9rem; font-weight: 600; }
.note { background: var(--paper-2); border-radius: 12px; padding: 12px 14px; font-size: .92rem; }
.ph { color: var(--ink-2); font-style: italic; background: var(--ph-bg); padding: 1px 6px; border-radius: 4px; font-size: .92em; }
.eco { display: flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--ok); margin: 12px 0 0; font-weight: 600; }
.eco svg { width: 20px; height: 20px; }
.compat-forma { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.reviews { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.stars { display: flex; gap: 4px; color: var(--line-2); }
.stars svg { width: 22px; height: 22px; }

/* Calcolatore */
.calc { border-radius: 20px; background: var(--white); border: 1px solid var(--line); padding: 20px; display: grid; gap: 14px; }
.calc .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.calc .big { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; margin: 0; }
.calc .big b { color: var(--gold-ink); font-weight: 600; }
.calc table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.calc th, .calc td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; }
.calc th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }

/* Home: Sicilia, proverbi, box, dispensa, social */
.storia { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .storia { grid-template-columns: 1fr 1fr; gap: 72px; } }
.storia blockquote, .quote { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15; font-style: italic; margin: 0 0 16px; }
.carretto-box { position: relative; background: var(--white); border-radius: 26px; border: 1px solid var(--line); padding: 28px; overflow: hidden; }
.carretto-box::before { content: ""; position: absolute; inset: 0; background: var(--maj-soft) 0 0 / 120px 120px; }
.carretto-box img { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.carretto-box .limoni { position: absolute; right: -20px; bottom: -14px; width: 34%; }
.prov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .prov-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.pv { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pv:hover { box-shadow: var(--shadow); color: var(--ink); }
.pv-b { padding: 12px 14px 14px; display: grid; gap: 6px; border-top: 3px solid var(--c2); }
.pv-s { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); font-weight: 800; }
.pv q { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.2; quotes: "«" "»"; }
.pv-it { font-size: .82rem; color: var(--ink-2); }
.boxes3 { display: grid; gap: 16px; }
@media (min-width: 900px) { .boxes3 { grid-template-columns: repeat(3, 1fr); } }
.boxc { border: 1px solid var(--line); background: var(--white); border-radius: 20px; padding: 20px; display: grid; gap: 12px; align-content: start; position: relative; }
.boxc.feat { border-color: var(--ink); }
.boxc h3 { margin: 0; }
.boxc .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--cream); border-radius: 14px; padding: 10px; }
.boxc .pair .ph-f { border-radius: 10px; }
.boxc .split { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.boxc .no { color: var(--ink-2); font-style: italic; }
.disp4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Dispensa: 5 reparti (con «Dolci e biscotti», 12/11/2026): sul telefono l'ultima tessera dispari prende la riga intera; dal computer 5 colonne */
.disp4 > .dt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.disp4 > .dt { padding-top: 88px; }   /* il titolo su due righe («Dolci e biscotti» sul telefono) non tocca mai la piastrella tonda */
@media (min-width: 900px) { .disp4 { grid-template-columns: repeat(4, 1fr); gap: 18px; } .disp4:has(> .dt:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .disp4 > .dt:last-child:nth-child(odd) { grid-column: auto; } }
.etich .allerg b, .etich .nota-dieta b { font-weight: 800; }
.dt { position: relative; display: grid; gap: 10px; align-content: end; min-height: 220px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--white); text-decoration: none; color: var(--ink); overflow: hidden; }
.dt::before { content: ""; position: absolute; inset: 0 0 40% 0; background: var(--maj-soft) 0 0 / 90px 90px; }
.dt .tile { position: absolute; top: 18px; left: 18px; width: 52px; height: 52px; border-radius: 50%; background: var(--t) 0 0 / 52px 52px; box-shadow: 0 0 0 5px var(--white), 0 0 0 6px var(--line-2); }
.dt h3 { position: relative; margin: 0; font-size: 1.7rem; }
.dt span { position: relative; font-size: .85rem; color: var(--ink-2); }
.dt:hover { box-shadow: var(--shadow); color: var(--ink); }
.social { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .social { grid-template-columns: repeat(4, 1fr); } }
.social .post { aspect-ratio: 4 / 5; border: 1px dashed var(--line-2); border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--ink-2); font-size: .86rem; background: var(--white); }
.social-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Configuratore e guida ---------- */
.cfg { display: grid; gap: 16px; }
.cstep { border: 1px solid var(--line); background: var(--white); border-radius: 20px; padding: 20px; }
.cstep.done { background: var(--paper-2); }
.cstep h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.cstep h2 .n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-size: .9rem; flex: none; }
.cstep.done h2 .n { background: var(--ink); color: var(--paper); }
.cstep .sum-l { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brands button { min-height: 64px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--white); cursor: pointer; font-weight: 800; padding: 10px; }
.brands button:hover { border-color: var(--ink); }
.linea { margin-top: 14px; }
.linea h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.forma-q { display: grid; gap: 16px; align-items: center; }
@media (min-width: 700px) { .forma-q { grid-template-columns: auto 1fr; } }
.forma-q .fig { display: flex; gap: 14px; align-items: end; background: var(--paper-2); border-radius: 16px; padding: 16px; }
.risultato { display: grid; gap: 14px; }
.help { border: 1px solid var(--line-2); border-radius: 20px; padding: 20px; background: var(--soft-blu); display: grid; gap: 10px; }
.g-sec { margin-top: 48px; }
.forme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .forme { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.forme figure { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 14px; display: grid; gap: 8px; justify-items: center; text-align: center; position: relative; }
.forme figure::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; background: var(--sf); border-radius: 0 0 3px 3px; }
.forme .fp { height: 110px; display: grid; align-items: end; }
.forme figcaption { display: grid; gap: 2px; font-size: .82rem; }
.forme figcaption b { font-size: .95rem; }
.sis-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .sis-grid { grid-template-columns: repeat(3, 1fr); } }
.sis { border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 16px; display: grid; gap: 8px; align-content: start; }
.sis-art { display: flex; align-items: end; gap: 10px; }
.sis-art .mac-sil { width: 110px; height: 100px; }
.ed-row { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .ed-row { grid-template-columns: 1fr 1fr; gap: 64px; } .ed-row.rev > :first-child { order: 2; } }
.ed-art { border-radius: 24px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.ed-art.pad { padding: 24px; display: grid; place-items: center; }
.light { background: #FFFDF8 !important; }
.editorial { display: grid; gap: 56px; padding: 40px 0 80px; }
.lang-sw { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.4em; }
.camp.proposta { border: 1px dashed var(--gold); border-radius: 20px; padding: 22px; background: var(--white); }

/* ---------- Pannelli: carrello, menu, finestre ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.drawer[data-open="true"] { display: block; }
.drawer .scrim { position: absolute; inset: 0; background: rgba(36, 29, 25, .28); animation: fade .25s ease; }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--white); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slide .32s cubic-bezier(.2, .8, .2, 1); }
.drawer.full .panel { width: 100%; left: 0; animation-name: fade; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.panel .ph-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.panel .ph-h h2 { font-size: 1.7rem; margin: 0; }
.panel .scroll { flex: 1; overflow: auto; padding: 16px 20px; display: grid; gap: 16px; align-content: start; }
.panel .foot { border-top: 1px solid var(--line); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 10px; background: var(--paper-2); }
.mm nav a { display: block; padding: 13px 4px; font-family: var(--serif); font-size: 1.65rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.mm details summary { font-family: var(--serif); font-size: 1.65rem; padding: 12px 4px; cursor: pointer; border-bottom: 1px solid var(--line); list-style: none; }
.mm details summary::-webkit-details-marker { display: none; }
.mm-sys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mm-sys a { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; font-weight: 700; font-size: .86rem; }
.mm-l { display: block; padding: 10px 4px; font-weight: 700; }
.cl { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cl .th { width: 76px; border-radius: 12px; overflow: hidden; background: var(--cream); padding: 6px; }
.cl .th .ph-f { border-radius: 8px; }
.cl .nm { font-weight: 800; line-height: 1.25; }
.cl .nm a { text-decoration: none; }
.cl .sysname { margin-bottom: 4px; }
.cl .sub { font-size: .8rem; color: var(--ink-2); }
.cl .calc-l { font-size: .84rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cl .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cl .rm { background: none; border: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: .8rem; padding: 8px 4px; }
.cl .cv { margin-top: 6px; font-size: .8rem; }
.cl .cv.ok { color: var(--ok); font-weight: 700; }
.ship { display: grid; gap: 8px; font-size: .88rem; }
.ship .bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ship .bar i { display: block; height: 100%; background: var(--azzurro); border-radius: 999px; transition: width .4s ease; }
.ship.done .bar i { background: var(--ok); }
.sum { display: grid; gap: 6px; font-size: .95rem; }
.sum .l { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.sum .l.disc { color: var(--ok); }
.sum .l.tot { font-weight: 800; font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi div { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.kpi b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .7rem; color: var(--ink-2); }
.sugg { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; background: var(--paper-2); }
.sugg h3 { font-size: .95rem; font-family: var(--sans); font-weight: 800; margin: 0; }
.sugg .it { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; font-size: .86rem; }
.sugg .it .th { width: 52px; border-radius: 10px; overflow: hidden; }
.mchecks { display: grid; gap: 10px; }
.mbox { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--white); }
.mbox .acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.mbox b { display: block; font-size: 1.05rem; }
.mbox.ok { background: var(--ok-bg); }
.mc-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mc-list span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); font-weight: 700; font-size: .84rem; color: var(--ink); }
.aiuto { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 35; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--white); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); font-weight: 700; font-size: .88rem; text-decoration: none; }
.aiuto svg { width: 20px; height: 20px; color: var(--ok); }
.aiuto:hover { border-color: var(--ink); color: var(--ink); }
body { padding-bottom: 72px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
dialog { border: 0; padding: 0; border-radius: 24px; background: var(--white); color: var(--ink); max-width: min(620px, calc(100vw - 24px)); width: 100%; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(36, 29, 25, .3); }
dialog[open] { animation: fade .25s ease; }
dialog .dh { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 0 22px; }
dialog .dh h2 { margin: 0; font-size: 1.9rem; }
dialog .db { padding: 8px 22px 22px; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow: auto; }
@media (max-width: 600px) { dialog { margin: auto 0 0; max-width: 100vw; border-radius: 24px 24px 0 0; } }
.sys-list { display: grid; gap: 8px; }
.sys-list button, .sys-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; text-align: left; font-weight: 700; text-decoration: none; color: var(--ink); min-height: 56px; }
.sys-list [aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 90; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Carrello e cassa ---------- */
.two { display: grid; gap: 28px; padding: 32px 0 72px; }
@media (min-width: 980px) { .two { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; } .two > aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.card + .card { margin-top: 16px; }
.card h2 { font-size: 1.7rem; }
.fgrid { display: grid; gap: 14px; }
@media (min-width: 600px) { .fgrid.c2 { grid-template-columns: 1fr 1fr; } .fgrid .span2 { grid-column: span 2; } }
.opt { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; background: var(--white); }
.opt input { width: 20px; height: 20px; accent-color: var(--blu); margin: 2px 0 0; }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.opt b { display: block; }
.pay-test { border: 1px dashed var(--blu); border-radius: 14px; padding: 14px; font-weight: 700; color: var(--blu); background: var(--soft-blu); }
.err-box { background: var(--bad-bg); color: var(--bad-ink); border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.ok-hero { text-align: center; padding: 56px 0; display: grid; gap: 12px; justify-items: center; }
.ok-hero .seal { width: 84px; height: 84px; }
.mappa svg { width: 100%; height: auto; margin-top: 12px; border-radius: 14px; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 14px 12px; font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; color: var(--ink-2); white-space: nowrap; min-height: 48px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ord { display: grid; gap: 12px; }
.ord .head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.ord ul { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--ink-2); }
.ord .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.st { display: inline-block; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.st.attivo { background: var(--ok-bg); color: var(--ok); }
.st.sospeso { background: var(--warn-bg); color: var(--warn-ink); }
.st.annullato { background: var(--paper-2); color: var(--ink-2); }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.timeline div { background: var(--paper-2); border-radius: 10px; padding: 8px 10px; font-size: .8rem; }
.timeline div b { display: block; font-size: .92rem; }

/* ---------- Fiducia e piè di pagina (chiari) ---------- */
.trust { background: var(--white); padding: 56px 0 48px; }
.trust h2 { text-align: center; }
.trust ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.trust li { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: .82rem; color: var(--ink-2); }
.trust li svg { width: 30px; height: 30px; color: var(--blu); margin-bottom: 4px; }
.trust li b { color: var(--ink); font-size: .9rem; }
.foot-site { background: var(--paper-2); color: var(--ink); padding: 0 0 36px; border-top: 1px solid var(--line); }
.foot-site .cols { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; padding-top: 48px; }
@media (min-width: 900px) { .foot-site .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot-site .cols > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .foot-site .cols > :first-child { grid-column: auto; } }
.foot-site h3 { font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); font-weight: 800; }
.foot-site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .92rem; }
.foot-site .legal { border-top: 1px solid var(--line-2); margin-top: 36px; padding-top: 20px; font-size: .8rem; color: var(--ink-2); display: grid; gap: 8px; }
.penta { display: flex; gap: 12px; align-items: center; margin-top: 14px; font-size: .86rem; color: var(--ink-2); }
.penta img { width: 52px; height: auto; flex: none; }
.theme-sw { display: inline-flex; gap: 4px; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; background: var(--white); }
.theme-sw button { border: 0; background: none; color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; min-height: 36px; font-size: .85rem; }
.theme-sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .header, .sysbar, .pillbar, .aiuto, .foot-site, .comunica, .trust { display: none; } }
@media (max-width: 899px) { .aiuto { min-height: 44px; padding: 0 14px 0 12px; font-size: .8rem; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); } .aiuto .lungo { display: none; } }
@media (min-width: 900px) { .aiuto .corto { display: none; } }
/* Ritocco schede: prezzo a capsula su una riga, pillola corta, tessera «Scopri i box» */
.pc .ppc { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.pc .ppc .v { white-space: nowrap; }
.pc .ppc small { margin: 0; white-space: nowrap; }
.pc .pconf { white-space: nowrap; }
.band-sys.short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; padding-left: 22px; position: relative; }
.band-sys.short::before { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); }
.pc.fill { text-decoration: none; color: var(--ink); background: var(--paper-2); }
.pc.fill .art { background: var(--white); }
.pc.fill .art::before { content: ""; position: absolute; inset: 0; background: var(--maj-soft) 0 0 / 80px 80px; }
.pc.fill .art .tile { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--maj-fiore) 0 0 / 64px 64px; box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--line-2); }
.pc.fill h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; }
.pc.fill:hover { box-shadow: var(--shadow); color: var(--ink); }
.pc .foot2 { margin-top: auto; padding-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px; }
.pc .foot2 .ppc { margin: 0; }
.pc .foot2 .add { grid-row: 1 / span 2; grid-column: 2; align-self: end; }
.pc .foot2 .pconf, .pc .foot2 .tbcw { grid-column: 1 / -1; }
.pc .foot2 .pconf { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .foot2 .add .step { height: 40px; }
.pc .foot2 { margin-top: auto; padding-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px; }
.pc .foot2 .ppc { margin: 0; }
.pc .foot2 .add { grid-row: 1 / span 2; grid-column: 2; align-self: end; }
.pc .foot2 .pconf { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .foot2 .tbcw { grid-column: 1 / -1; }
.pc .foot2 .add .step { height: 40px; }
.pc .foot2 .add { grid-row: 1; }
.pc .foot2 .pconf { grid-column: 1 / -1; overflow: visible; }
/* Foto della dispensa (fondo bianco): intere, mai tagliate */
.dfoto { background: #fff; }
.dfoto img { object-fit: contain; }
.pc.dpc .art { background: #fff; }
.pc.dpc .art .ph-f { box-shadow: none; }
.simul { position: absolute; z-index: 1; left: 8px; bottom: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .92); color: #241D19; border: 1px solid #DDD5C8; border-radius: 4px; padding: 3px 7px; }

/* ---------- Apertura cinematografica (video a tutta larghezza) ---------- */
.hero-video { position: relative; min-height: calc(100svh - var(--header-h) - 50px); display: flex; align-items: flex-end; overflow: hidden; background: var(--cream); color: #fff; }
@media (min-width: 900px) { .hero-video { min-height: min(88vh, 860px); } }
.hv-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 14, 10, .62) 0%, rgba(20, 14, 10, .38) 38%, rgba(20, 14, 10, 0) 70%); pointer-events: none; }
@media (min-width: 900px) { .hv-veil { background: linear-gradient(to right, rgba(20, 14, 10, .58) 0%, rgba(20, 14, 10, .32) 42%, rgba(20, 14, 10, 0) 70%), linear-gradient(to top, rgba(20, 14, 10, .35), rgba(20, 14, 10, 0) 40%); } }
.hv-wrap { position: relative; z-index: 2; width: 100%; padding-top: 48px; padding-bottom: 64px; }
.hv-text { max-width: 720px; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hv-text .kicker { color: #F3E3BE; }
.hv-text h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 4.4rem); }
.hv-text h1 em { color: #F3E3BE; }
.hv-text .sub { color: #F7F1E6; font-size: 1.12rem; max-width: 44ch; }
.hv-text .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn.big { min-height: 56px; padding: 0 28px; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-video .btn.ghost { background: #fff; color: #241D19; border-color: #fff; text-shadow: none; }
.hero-video .btn:not(.ghost) { text-shadow: none; }
@media (max-width: 520px) { .hv-text .ctas .btn { width: 100%; } }
.hv-toggle { position: absolute; z-index: 3; right: 16px; bottom: 28px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: rgba(20, 14, 10, .35); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hv-toggle svg { width: 18px; height: 18px; }
.hv-toggle:hover { background: rgba(20, 14, 10, .55); }
.hv-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
@media (min-width: 900px) { .hv-toggle { right: 32px; bottom: 36px; } }

/* ---------- Vetrine a tutta larghezza ---------- */
.vetrina { padding: 0 0 72px; }
.vt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vt-grid .vt-img { display: block; overflow: hidden; }
.vt-grid .vt0 { grid-column: 1 / -1; }
.vt-grid .vt0 .ph-f { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .vt-grid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .vt-grid .vt0 { grid-column: 1; grid-row: 1 / span 2; } .vt-grid .vt0 .ph-f { aspect-ratio: auto; height: 100%; min-height: 560px; } }
.vt-grid.two { grid-template-columns: 1fr; }
@media (min-width: 760px) { .vt-grid.two { grid-template-columns: 1fr 1fr; } }
.vt-grid .ph-f img { transition: transform 1.2s ease; }
.vt-grid .vt-img:hover .ph-f img { transform: scale(1.03); }
.vt-pan .dfoto { aspect-ratio: 4 / 3; }
.vt-text { padding-top: 40px; max-width: 760px; text-align: center; }
.vt-text .btn { margin-top: 8px; }

/* Comparsa lenta allo scorrimento */
/* nascosta solo quando app.js ha acceso la comparsa (html.rv-on): senza, il contenuto resta visibile */
.reveal { transition: opacity .8s cubic-bezier(.33, 1, .68, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.rv-on .reveal { opacity: 0; transform: translateY(24px); }
.rv-on .reveal.in, .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Content Studio ---------- */
.st-grid { display: grid; gap: 16px; }
@media (min-width: 980px) { .st-grid { grid-template-columns: 1fr 1fr; } .st-grid .st-costi { grid-column: 1 / -1; } }
.st-grid .card h2, .studio .card h2 { font-size: 1.45rem; }
.st-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.st-file { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .78rem; background: var(--white); }
.st-file figcaption { padding: 6px 8px; word-break: break-word; }
.st-prev { aspect-ratio: 1; background: var(--cream); display: grid; place-items: center; }
.st-prev img, .st-prev video { width: 100%; height: 100%; object-fit: cover; }
.st-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.st-tab th, .st-tab td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.st-tab th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.st-out { margin-top: 16px; display: grid; gap: 6px; }
.st-out h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 12px 0 4px; }
.st-voce { font-family: var(--serif); font-size: 1.25rem; font-style: italic; }
.st-azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.st-lib { display: grid; gap: 14px; }
.st-bozza, .st-da_approvare, .st-approvato, .st-pubblicato { font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.st-bozza { background: var(--paper-2); color: var(--ink-2); }
.st-da_approvare { background: var(--warn-bg); color: var(--warn-ink); }
.st-approvato { background: var(--ok-bg); color: var(--ok); }
.st-pubblicato { background: var(--soft-blu); color: var(--blu); }
.st-vid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.st-vid figure { margin: 0; padding: 10px; }
.st-vid video { width: 100%; border-radius: 10px; background: #000; }
/* il pulsante pausa/play in alto a destra: non si sovrappone al pulsante «Aiuto» */
.hv-toggle { top: 18px; bottom: auto; }
@media (min-width: 900px) { .hv-toggle { top: 24px; bottom: auto; } }

/* ===================== Correzioni 9/11/2026 ===================== */
:root { --dek: #2E6B47; --dek-bg: #EAF3EC; }
:root[data-theme="dark"] { --dek: #8FC7A3; --dek-bg: #17271D; }
/* DEK: bollino sovrapposto alla foto (la foto non si tocca) */
.ph-f .dek-badge { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 7%; text-align: center; background: #2E6B47; color: #fff; font-weight: 800; font-size: clamp(.58rem, 2.2vw, .86rem); letter-spacing: .14em; padding: 6px 8px; border-radius: 6px; box-shadow: 0 0 0 2px #fff, 0 6px 16px -6px rgba(0,0,0,.4); }
.thumbs .dek-badge, .th .dek-badge, .mb .dek-badge { display: none; }
.vp .dek-badge { font-size: .5rem; padding: 3px 4px; letter-spacing: .08em; }
.dek-chip { display: inline-flex; align-items: center; background: var(--dek-bg); color: var(--dek); border: 1px solid var(--dek); font-weight: 800; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.dek-chip.sm { font-size: .58rem; padding: 2px 6px; }
.dek-chip.big { font-size: .82rem; padding: 6px 12px; }
/* pallini su 10 */
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; }
.dots i.on { background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.pc .int .dots i { width: 6px; height: 6px; }
.prof { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background-color: var(--paper-2); background-image: var(--maj-soft); background-size: 90px 90px; display: grid; gap: 8px; }
.prof-t { margin: 0; font-weight: 800; }
.pr-r { display: grid; grid-template-columns: 76px 1fr 22px; align-items: center; gap: 10px; background: var(--white); border-radius: 8px; padding: 6px 10px; }
.pr-r .pr-l { font-size: .8rem; font-weight: 700; }
.pr-r .dots i { width: 10px; height: 10px; }
.pr-r b { text-align: right; color: var(--ink); }
.pr-f { margin: 0; font-size: .72rem; color: var(--ink-2); }
.int-big { margin: 0; font-size: .92rem; color: var(--gold-ink); font-weight: 600; }
@media (max-width: 380px) { .pr-r { grid-template-columns: 64px 1fr 18px; gap: 6px; } .pr-r .dots { gap: 2px; } .pr-r .dots i { width: 8px; height: 8px; } }
/* scheda prodotto compatta */
.pdp .pp { padding-bottom: 36px; }
.pinfo { display: grid; gap: 12px; align-content: start; }
.pinfo h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.sys-big { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--sf, var(--gold)); background: var(--white); width: fit-content; max-width: 100%; }
.sys-big span { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.sys-big b { font-size: 1.12rem; }
.char { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--gold-ink); line-height: 1.2; }
.lead.short { margin: 0; font-size: 1rem; }
.pr-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pbig { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.feats li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--white); }
.feats svg { width: 26px; height: 26px; flex: none; color: var(--gold-ink); }
.feats b { display: block; font-size: .84rem; line-height: 1.25; }
.feats span { font-size: .74rem; color: var(--ink-2); display: block; overflow-wrap: anywhere; }
@media (max-width: 380px) { .feats { grid-template-columns: 1fr; } }
.accs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.accs .acc { margin: 0; }
.accs .acc h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 6px; }
.specs { margin: 0; display: grid; gap: 0; }
.specs > div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-size: .76rem; font-weight: 800; color: var(--gold-ink); letter-spacing: .04em; }
.specs dd { margin: 0; font-size: .9rem; min-width: 0; }
@media (max-width: 420px) { .specs > div { grid-template-columns: 1fr; gap: 4px; } }
.tm-note { font-size: .74rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; margin: 12px 0 0; }
.pdp-box { display: grid; gap: 20px; border: 1px solid var(--line); border-radius: 20px; padding: 22px; background-color: var(--paper-2); background-image: var(--maj-soft); background-size: 120px 120px; margin-bottom: 36px; }
.pdp-box > div:first-child { background: var(--white); border-radius: 14px; padding: 16px; }
.pdp-box > .ladder { background: var(--white); border-radius: 14px; padding: 16px; }
@media (min-width: 900px) { .pdp-box { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.pdp-rel { padding-bottom: 36px; }
.pair-taz { display: grid; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin-bottom: 64px; color: var(--ink); text-decoration: none; background: var(--white); }
.pair-taz:hover { border-color: var(--gold); color: var(--ink); }
.pair-taz h2 { margin: 0; }
.pair-taz .pt-img .ph-f { border-radius: 14px; }
@media (min-width: 760px) { .pair-taz { grid-template-columns: 300px 1fr; } }
/* calcolatore */
.calc { display: grid; gap: 14px; }
.calc-n { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-n .cn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); font-weight: 800; font-size: 1.15rem; cursor: pointer; color: var(--ink); }
.calc-n .cn[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cn-free input { width: 96px; height: 52px; text-align: center; border-radius: 999px; }
.calc-sel { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-sel label { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; flex: 1 1 180px; min-width: 0; }
.calc-sel select { min-height: 44px; width: 100%; }
.calc-grid { display: grid; gap: 14px; }
@media (min-width: 860px) { .calc-grid { grid-template-columns: 220px 1fr; align-items: start; } }
.calc-t { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; font-size: .9rem; }
.calc-t th, .calc-t td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.calc-t th { font-size: .72rem; color: var(--gold-ink); }
.calc-t tr.on td { background: var(--ink); color: var(--white); font-weight: 800; }
.calc-res { display: grid; gap: 12px; }
.calc-res .need { margin: 0; font-size: 1.08rem; }
.cons { display: grid; gap: 10px; border: 2px solid var(--gold); border-radius: 18px; padding: 16px; background: var(--white); }
.cons h3 { margin: 0; font-size: 1.25rem; }
.cons-d { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cons-d div { background: var(--paper-2); border-radius: 10px; padding: 8px 10px; }
.cons-d dt { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.cons-d dd { margin: 2px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.cons-d dd small { font-weight: 600; color: var(--ink-2); }
.cons-d .tot { background: var(--ink); color: var(--white); } .cons-d .tot dt { color: var(--white); opacity: .8; }
@media (max-width: 480px) { .cons-d { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* carrello e ordine */
.perbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 2px solid var(--gold); border-radius: 14px; padding: 10px 12px; background: var(--paper-2); font-size: .92rem; }
.ord-det { display: grid; gap: 16px; max-width: 760px; margin: 0 auto 64px; }
.ro { display: grid; gap: 10px; margin-top: 12px; }
.ro-l { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ro-l.tot { border: 0; font-weight: 800; margin-top: 8px; }
.prep { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.email-prev summary { cursor: pointer; font-weight: 800; }
.mail { white-space: pre-wrap; font-family: var(--sans); font-size: .86rem; background: var(--paper-2); border-radius: 12px; padding: 14px; margin: 12px 0 0; overflow-wrap: anywhere; }
.taz-sub { color: var(--ink); }
/* tazzine */
.tz-top { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 960px) { .tz-top { grid-template-columns: 420px 1fr; align-items: start; } .tz-top > .ph-f { position: sticky; top: calc(var(--header-h) + 20px); } }
.tz-top > .ph-f { border-radius: 20px; }
.tz-cfg { display: grid; gap: 18px; }
.tz-step { border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: var(--white); display: grid; gap: 12px; }
.tz-step h2 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.tz-step h2 .n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-family: var(--sans); font-size: .95rem; font-weight: 800; flex: none; }
.tz-fmt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tz-fmt button { display: grid; gap: 4px; padding: 12px 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--white); cursor: pointer; text-align: center; color: var(--ink); }
.tz-fmt button b { font-size: .86rem; line-height: 1.2; }
.tz-fmt .pz { font-size: 1.3rem; font-weight: 800; }
.tz-fmt button[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper-2); }
@media (max-width: 420px) { .tz-fmt { grid-template-columns: 1fr; } .tz-fmt button { grid-template-columns: 1fr auto; text-align: left; } .tz-fmt .small { grid-column: 1 / -1; } }
.tz-rest { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; }
.tz-rest.done { background: var(--ok-bg); color: var(--ok); }
.tz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .tz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tz-d { display: grid; gap: 6px; justify-items: center; text-align: center; border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.tz-d.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.tz-d h3 { margin: 0; font-size: .95rem; font-family: var(--sans); font-weight: 800; }
.tz-d .ph-f { width: 100%; border-radius: 12px; }
.tz-d .step button[disabled] { opacity: .35; cursor: not-allowed; }
.tz-sum { display: flex; flex-wrap: wrap; gap: 10px; }
.tz-sum figure { margin: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px 6px 6px; }
.tz-sum .th { width: 48px; } .tz-sum .ph-f { border-radius: 8px; }
.tz-sum figcaption { font-size: .86rem; }
.tz-buy { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tz-buy > div { display: grid; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* dati aziendali e confronto */
.azienda { display: grid; gap: 0; margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.azienda div { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.azienda dt { font-weight: 800; font-size: .8rem; color: var(--gold-ink); }
.azienda dd { margin: 0; overflow-wrap: anywhere; }
.cf-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .cf-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cf-grid { grid-template-columns: repeat(3, 1fr); } }
.cf { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: var(--white); }
.cf h3 { margin: 0; }
.tz-top > .ph-f { aspect-ratio: auto; background: var(--white); }
.tz-top > .ph-f img { position: static; height: auto; display: block; }
.tz-d .simul, .pair-taz .simul { font-size: .5rem; padding: 2px 5px; left: 4px; bottom: 4px; letter-spacing: .04em; }

/* Hero con video. Due casi (media/hero.json → MEDIA.hero.testo_nel_video):
   - .hv-testo-nel-video (carosello delle scatole, 9/11): logo e frase sono già nel video → il testo HTML resta per Google e
     i lettori di schermo ma non si vede; sul video solo i pulsanti.
   - .hv-con-testo (girato dell’Etna, 10/11): il video non ha scritte → testo visibile. Computer: a sinistra, sullo sfondo
     sfocato del video, con un velo scuro (contrasto ≥ 4,5 misurato nella prova). Telefono: sotto il video, testo scuro su fondo chiaro. */
.hero-video.hv-testo-nel-video .hv-veil { display: none; }
.hero-video.hv-testo-nel-video .hv-text { text-shadow: none; max-width: none; }
.hero-video.hv-testo-nel-video .hv-text .kicker, .hero-video.hv-testo-nel-video .hv-text h1, .hero-video.hv-testo-nel-video .hv-text .sub {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-video.hv-testo-nel-video .hv-text .ctas { margin-top: 0; }
.hero-video .btn.ghost { border-color: #241D19; }
.hero-video .hv-toggle { border-color: rgba(36, 29, 25, .35); background: rgba(255, 255, 255, .75); color: #241D19; }
.hero-video .hv-toggle:hover { background: #fff; }
@media (min-width: 900px) { .hero-video.hv-testo-nel-video .hv-text .ctas { max-width: 44%; } .hero-video.hv-testo-nel-video .hv-wrap { padding-bottom: 72px; } }
/* Etna, computer e tablet (≥ 768 px): video 16:9 con lo sfondo sfocato a sinistra e la ripresa nitida a destra */
@media (min-width: 768px) {
  .hero-video.hv-con-testo { align-items: center; }
  .hero-video.hv-con-testo .hv-media { object-position: 70% 55%; }
  .hero-video.hv-con-testo .hv-veil { display: block; background: linear-gradient(to right, rgba(20, 14, 10, .62) 0%, rgba(20, 14, 10, .5) 38%, rgba(20, 14, 10, .2) 54%, rgba(20, 14, 10, 0) 60%); }
  .hero-video.hv-con-testo .hv-wrap { padding-top: 56px; padding-bottom: 72px; }
  .hero-video.hv-con-testo .hv-text { max-width: min(600px, 47vw); text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
  .hero-video.hv-con-testo .hv-text .kicker { color: #F3E3BE; }
  .hero-video.hv-con-testo .hv-text h1 { color: #FFFDF8; font-size: clamp(2.3rem, 4.6vw, 4.2rem); }
  .hero-video.hv-con-testo .hv-text h1 em { color: #F3E3BE; }
  .hero-video.hv-con-testo .hv-text .sub { color: #F7F1E6; }
  .hero-video.hv-con-testo .btn.ghost { border-color: #fff; }
}
/* tablet: l’apertura segue il 16:9 del video, così la ripresa nitida resta a destra e il testo sullo sfondo sfocato */
@media (min-width: 768px) and (max-width: 1099px) {
  .hero-video.hv-con-testo { min-height: 0; aspect-ratio: 16 / 9; }
  .hero-video.hv-con-testo .hv-wrap { padding-top: 28px; padding-bottom: 40px; }
  .hero-video.hv-con-testo .hv-text h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
  .hero-video.hv-con-testo .hv-text .sub { font-size: 1rem; }
  .hero-video.hv-con-testo .btn.big { min-height: 48px; padding: 0 18px; font-size: .78rem; }
}
/* Telefono: il video sopra, poi testo e pulsanti sotto sul fondo chiaro (niente scritte sul video). */
@media (max-width: 767px) {
  .hero-video { display: block; min-height: 0; }
  .hero-video .hv-media { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1180; object-fit: cover; object-position: 50% 10%; }
  .hero-video .hv-wrap { padding-top: 6px; padding-bottom: 44px; }
  .hero-video .hv-toggle { top: 12px; bottom: auto; right: 12px; }
  /* Etna: ritaglio quadrato che tiene il vulcano e la scatola (il cielo in alto si taglia) */
  .hero-video.hv-con-testo .hv-media { aspect-ratio: 1 / 1; object-position: 50% 78%; }
  .hero-video.hv-con-testo .hv-veil { display: none; }
  .hero-video.hv-con-testo .hv-wrap { padding-top: 22px; }
  .hero-video.hv-con-testo .hv-text { text-shadow: none; max-width: none; }
  .hero-video.hv-con-testo .hv-text .kicker { color: var(--gold-ink); }
  .hero-video.hv-con-testo .hv-text h1 { color: var(--ink); font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hero-video.hv-con-testo .hv-text h1 em { color: var(--gold-ink); }
  .hero-video.hv-con-testo .hv-text .sub { color: var(--ink-2); font-size: 1.02rem; }
  .hero-video.hv-con-testo .hv-text .ctas { margin-top: 18px; }
}
/* Schede prodotto: quando il prodotto è già nel carrello, il selettore − 1 + va su una riga sua, sotto il prezzo (prima copriva il prezzo sui telefoni). */
.pc .foot2 .add:has(.step) { grid-column: 1 / -1; grid-row: auto; order: 9; margin-top: 8px; }
.pc .foot2 .add .step { width: 100%; justify-content: space-between; }
/* Tazzine: video vero (girato di Alberto), muto e in loop */
.tz-top > .ph-f video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: inherit; }

/* ===================== Revisione 9/11: blocchi 1-3 (telefono, schede, oro, home) ===================== */
/* Aree di tocco ≥ 44 × 44 px (iPhone SE compreso) */
.step { height: 46px; }
.step button, .step.sm button { width: 44px; height: 44px; }
.step.sm { height: 46px; }
.pc .foot2 .add .step { height: 46px; }
.cl .rm { min-height: 44px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
.chip, .pill { min-height: 44px; }
.linkbtn { min-height: 44px; }
.theme-sw button { min-height: 44px; min-width: 64px; }
.foot-site ul { gap: 0; }
.foot-site ul a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.res-h select, select[data-ord] { min-height: 44px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); }
.check { min-height: 44px; }
.check.small, label.check { padding-top: 11px; padding-bottom: 11px; }
.mm-l { min-height: 44px; display: flex; align-items: center; }
.thumbs button { min-height: 44px; }
.calc-sel select { min-height: 44px; }
.legal a { display: inline-block; padding: 12px 0; }
.mm-sec { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 0; }
.mm-sec a { display: flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: .95rem; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.prova-l { font-size: .74rem; color: var(--ink-2); }

/* Pulsante «Aiuto»: più piccolo sul telefono (solo icona), mai sopra un comando (classe .copre),
   e spazio riservato in fondo alla pagina; non c'è in cassa e nel recesso. */
.aiuto { transition: opacity .2s ease, visibility .2s; }
.aiuto.copre { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 899px) {
  .aiuto { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .aiuto .lungo, .aiuto .corto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) { body { padding-bottom: 80px; } }

/* Schede: il prezzo della CONFEZIONE è il numero più grande; a capsula sotto, piccolo */
.pc .foot2 .noprice { grid-column: 1 / -1; font-size: .92rem; margin: 0; }
.pc .pconf { font-size: .78rem; }
.noprice { font-weight: 700; color: var(--ink-2); }
.buybox .noprice { font-size: 1.2rem; color: var(--ink); }

/* Avvisi: esclusioni del sistema (es. Nespresso® Original) e carrello aggiornato */
.excl { margin: 0; font-size: .86rem; font-weight: 700; color: var(--warn-ink); background: var(--warn-bg); border-radius: 10px; padding: 8px 12px; width: fit-content; max-width: 100%; }
.perbox .excl { flex-basis: 100%; width: auto; }
.avv-carr { margin: 0 0 12px; }
.avv-carr .linkbtn { padding: 0 4px; }

/* Confronto Classica / Gran Crema / Decaffeinato nella scheda prodotto */
.cmp { margin: 8px 0 40px; }
.cmp h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.cmp-w { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.cmp-t { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 320px; }
.cmp-t th, .cmp-t td { padding: 10px 10px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp-t thead th { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.cmp-t tbody th { text-align: left; font-size: .76rem; font-weight: 800; color: var(--gold-ink); letter-spacing: .04em; white-space: nowrap; }
.cmp-t .cur { background: var(--paper-2); }
.cmp-t thead th.cur { box-shadow: inset 0 3px 0 var(--gold); }
.cmp-t tr:last-child th, .cmp-t tr:last-child td { border-bottom: 0; }

/* Home: le tre miscele, box + calcolatore, tazzine e regali */
.mix3 { display: grid; gap: 14px; }
@media (min-width: 900px) { .mix3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.mix-t { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); text-decoration: none; }
.mix-t:hover { border-color: var(--gold); color: var(--ink); box-shadow: var(--shadow); }
.mix-t .mix-img .ph-f { border-radius: 12px; }
.mix-t .mix-b { display: grid; gap: 6px; min-width: 0; }
.mix-t h3 { margin: 0; font-size: 1.3rem; }
@media (min-width: 900px) { .mix-t { grid-template-columns: 1fr; padding: 16px; } }
.boxes3.two-b { margin-bottom: 18px; }
@media (min-width: 900px) { .boxes3.two-b { grid-template-columns: 1fr 1fr; } }
.bc-grid { display: grid; gap: 16px; }
@media (min-width: 980px) { .bc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; } }
.disp2 { display: grid; gap: 16px; }
@media (min-width: 760px) { .disp2 { grid-template-columns: 1fr 1fr; } }
.dt2 { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 14px; background: var(--white); color: var(--ink); text-decoration: none; }
.dt2:hover { border-color: var(--gold); color: var(--ink); }
.dt2 .ph-f { border-radius: 14px; aspect-ratio: 4 / 3; }
.dt2 h3 { margin: 0 0 4px; }
.dt2 > div:last-child { display: grid; gap: 6px; }

/* Calcolatore: Totale e Costo a caffè ben separati */
.cons-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cons-big > div { border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.cons-big span { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.cons-big b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cons-big .tot { background: var(--ink); color: var(--white); }
.cons-big .pcaf { background: var(--paper-2); border: 1px solid var(--gold); }
/* aree di tocco: niente restringimenti nelle righe strette (iPhone SE) */
.step, .step button, .ibtn { flex: none; }
.pc h3 a, .cl .nm a { display: block; padding: 12px 0; margin: -12px 0; }
.foot-site ul a, .legal a, .crumbs a, .linkbtn { min-width: 44px; justify-content: center; }
.legal a { text-align: center; }
.trust li a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-site ul a { justify-content: flex-start; }
@media (max-width: 599px) {
  .cmp-t { min-width: 0; table-layout: fixed; font-size: .82rem; }
  .cmp-t th, .cmp-t td { padding: 8px 4px; overflow-wrap: anywhere; }
  .cmp-t thead th { font-size: 1rem; line-height: 1.15; }
  .cmp-t tbody th { width: 27%; font-size: .7rem; white-space: normal; }
  .cmp-t .small { font-size: .7rem; }
}
.dt2 .ph-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dt2 .dfoto img { object-fit: contain; }
.linkbtn { width: fit-content; }

/* =====================================================================
   Movimento «premium» (prototipo 10/11/2026) — vedi assets/dinamica.js
   Regole: solo transform e opacity, niente spostamenti di impaginazione,
   tutto fermo con prefers-reduced-motion (regola generale più su),
   nessun elemento lasciato invisibile se il JavaScript non parte.
   ===================================================================== */

/* Cascata delle schede: SOLO quando la sezione compare davvero allo scorrimento (rv-anim). */
@keyframes rv-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.reveal.rv-anim :is(.mix3, .macchine, .prov-grid, .disp2, .boxes3) > * { animation: rv-up .75s cubic-bezier(.16, 1, .3, 1) both; }
.reveal.rv-anim :is(.mix3, .macchine, .prov-grid, .disp2, .boxes3) > :nth-child(2) { animation-delay: .08s; }
.reveal.rv-anim :is(.mix3, .macchine, .prov-grid, .disp2, .boxes3) > :nth-child(3) { animation-delay: .16s; }
.reveal.rv-anim :is(.mix3, .macchine, .prov-grid, .disp2, .boxes3) > :nth-child(4) { animation-delay: .24s; }
.reveal.rv-anim :is(.mix3, .macchine, .prov-grid, .disp2, .boxes3) > :nth-child(5) { animation-delay: .32s; }
.reveal.rv-anim :is(.mix3, .macchine, .prov-grid, .disp2, .boxes3) > :nth-child(n+6) { animation-delay: .4s; }

/* ---------- Classica → Gran Crema → Decaffeinato ---------- */
.story { position: relative; margin: 0 0 28px; padding: 18px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper-2); }
.mx-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.mx-hint { margin: 0; }
.mx-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); max-width: 100%; }
.mx-tab { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .3s ease, color .3s ease; white-space: nowrap; }
.mx-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 420px) { .mx-tabs { width: 100%; } .mx-tab { flex: 1; padding: 0 8px; font-size: .82rem; } }
.mx-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .mx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center; } }
.mx-stage { position: relative; aspect-ratio: 1; max-width: min(440px, 62vw); width: 100%; margin: 0 auto; border-radius: 20px; overflow: hidden; background: var(--cream); touch-action: pan-y; }
.mx-ph { position: absolute; inset: 9%; opacity: 0; transform: translateX(14%) scale(.94); transition: opacity .55s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
.mx-ph.prev { transform: translateX(-14%) scale(.94); }
.mx-ph.on { opacity: 1; transform: none; }
.mx-ph .ph-f { border-radius: 14px; box-shadow: 0 22px 40px -24px rgba(36, 29, 25, .55); }
.mx-info { display: grid; gap: 10px; min-width: 0; }
.mx-info .kicker { margin: 0; }
.mx-name { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.mx-price { margin: 0; font-weight: 700; }
.mx-go { justify-self: start; }
.mx-prof { max-width: 420px; }
/* pallini: il riempimento d'oro è uno strato che si ingrandisce (solo transform), in cascata */
.mx-prof .dots i { position: relative; overflow: hidden; }
.mx-prof .dots i.on { background: var(--line-2); box-shadow: none; }
.mx-prof .dots i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-ink); transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.mx-prof .dots i.on::after { transform: scale(1); }
.mx-prof .dots i:nth-child(2)::after { transition-delay: .03s; } .mx-prof .dots i:nth-child(3)::after { transition-delay: .06s; }
.mx-prof .dots i:nth-child(4)::after { transition-delay: .09s; } .mx-prof .dots i:nth-child(5)::after { transition-delay: .12s; }
.mx-prof .dots i:nth-child(6)::after { transition-delay: .15s; } .mx-prof .dots i:nth-child(7)::after { transition-delay: .18s; }
.mx-prof .dots i:nth-child(8)::after { transition-delay: .21s; } .mx-prof .dots i:nth-child(9)::after { transition-delay: .24s; }
.mx-prof .dots i:nth-child(10)::after { transition-delay: .27s; }
.mx-bar { height: 2px; margin-top: 16px; background: var(--line); border-radius: 2px; overflow: hidden; display: none; }
.mx-bar i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.fx-pin .mx-bar { display: block; }

/* chicchi di caffè decorativi: solo nei margini delle sezioni, mai sopra testi o comandi */
.fx-beans { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-bean { position: absolute; width: var(--s, 26px); height: auto; opacity: .8; will-change: transform; filter: drop-shadow(0 4px 5px rgba(36, 29, 25, .18)); }
#miscele, #storia { position: relative; }
#miscele > .wrap, #storia > .wrap { position: relative; z-index: 1; }
.fx-gsap #miscele.reveal { transform: none; }   /* il blocco fissato non deve stare dentro un elemento trasformato */

/* pagina prodotto: badge di compatibilità, un solo impulso */
@keyframes fx-pulse { 0% { transform: scale(.98); opacity: .9; } 100% { transform: scale(1.06); opacity: 0; } }
.fx-pulse { position: relative; }
.fx-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 2px var(--sf, var(--gold)); opacity: 0; animation: fx-pulse 1.1s ease-out .35s 1 both; pointer-events: none; }
.fx-count { color: transparent !important; }
.fx-num { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; }
.fx-fly { position: fixed; z-index: 95; pointer-events: none; border-radius: 12px; object-fit: cover; box-shadow: 0 16px 30px -12px rgba(36, 29, 25, .5); will-change: transform, opacity; }

/* passaggio tra le pagine (View Transitions tra documenti dove il browser le supporta) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .18s ease both; }
  ::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Storia: ripresa vera dell’Etna con la scatola M’Arricriu */
.etna-box { margin: 0; position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--white); max-width: 480px; width: 100%; justify-self: center; }
.etna-box video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.etna-box figcaption { position: absolute; left: 12px; bottom: 12px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.88); color: #241D19; padding: 4px 10px; border-radius: 99px; }
.etna-box img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

/* Panettoni: foto vera delle confezioni (ritaglio senza persone) */
.pan-vera { margin: 20px 0 0; position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.pan-vera img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1066; object-fit: cover; }
@media (min-width: 900px) { .pan-vera img { aspect-ratio: 16 / 9; object-position: 50% 40%; } }
.pan-vera figcaption { position: absolute; left: 12px; bottom: 12px; font-size: .74rem; letter-spacing: .06em; background: rgba(255,255,255,.9); color: #241D19; padding: 4px 10px; border-radius: 99px; }

/* Home, «Tazzine e regali»: tessera di Natale con la foto vera (promoter e panettoni) */
.dt2 .foto-natale { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; border-radius: 14px; }

/* ===================== Storytelling premium (10/11/2026) =====================
   Palette di riferimento del brief, mappata sui gettoni già approvati (il pulsante d'acquisto oro resta quello provato):
   avorio #FAF8F3 ≈ --paper-2 · oro champagne #B59A61 solo per filetti e dettagli (mai testo) · antracite #302B26 ≈ --ink ·
   beige naturale #E9E1D3 = --beige (fondi delle schede) · pistacchio scuro #596348 = --pistacchio, SOLO per il pistacchio. */
:root { --beige: #EFE8DB; --champagne: #B59A61; --pistacchio: #596348; }
:root[data-theme="dark"] { --beige: #26201A; --pistacchio: #B9C49A; }
.st-h { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 6px; }
.st-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; color: var(--ink-2); margin: 0 0 8px; }
.st-foto { margin: 0; position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); max-width: 480px; width: 100%; justify-self: center; background: var(--cream); }
.st-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s ease; }
.st-foto figcaption, .nat-foto figcaption { position: absolute; left: 12px; bottom: 12px; font-size: .74rem; letter-spacing: .06em; background: rgba(255,255,255,.9); color: #241D19; padding: 4px 10px; border-radius: 99px; }
.prov-t { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 14px; }
/* tessera di Natale in home */
.dt-natale .dt-img { display: block; overflow: hidden; border-radius: 14px; }
.dt-natale .foto-natale { transition: transform 1.2s ease; }
.dt-cta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 4px; }
.dt-cta .linkbtn { padding: 0 4px; min-height: 44px; }
/* galleria: didascalia della foto vera */
.gal-cap { margin: 8px 0 0; color: var(--ink-2); }
/* racconto (Il nostro mondo, regalo) */
.ws-hero { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .ws-hero { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.racconto { max-width: 62ch; }
.racconto p { font-size: 1.08rem; margin: 0 0 14px; }
.racconto .em, .firma { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.3; color: var(--ink); }
.firma { color: var(--gold-ink); margin: 18px 0 0; }
.pan-intro { max-width: 64ch; margin-top: 18px; }
.pan-intro p { margin: 0 0 8px; }
.ctas-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
@media (max-width: 520px) { .ctas-row .btn { width: 100%; } }
/* quattro sapori */
.ingr-grid { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 700px) { .ingr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ingr-grid { grid-template-columns: repeat(4, 1fr); } }
.ingr { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--white); }
.ingr-ph { aspect-ratio: 6 / 5; overflow: hidden; background: var(--beige); }
.ingr-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.ingr-tipo { display: grid; place-items: center; position: relative; }
.ingr-tipo::before { content: ""; position: absolute; inset: 0; background: var(--maj-soft) 0 0 / 120px 120px; opacity: .55; }
.ingr-tipo span { position: relative; font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 3.2rem); color: var(--gold-ink); border-bottom: 1px solid var(--champagne); padding: 0 8px 4px; }
.ingr-b { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.ingr-b h3 { margin: 0; }
.ingr-s { font-family: var(--serif); font-style: italic; font-size: 1.2rem; margin: 0; color: var(--gold-ink); }
.ingr-pistacchio .ingr-s { color: var(--pistacchio); }
.ingr-pistacchio { border-top: 3px solid var(--pistacchio); }
.ingr-b > p:not(.ingr-s) { margin: 0; }
.ingr-l { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ingr-l a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--paper-2); }
.ingr-l a:hover { border-color: var(--gold); }
/* Natale (pagina per le campagne) */
.hdr-min .hrow { justify-content: space-between; }
.nat-hero { background: var(--paper-2); padding: 28px 0 40px; }
.nat-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .nat-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } .nat-hero { padding: 48px 0 64px; } }
.nat-foto { margin: 0; position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); }
.nat-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1066; object-fit: cover; }
.nat-txt h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin: 0 0 8px; }
.regalo { display: grid; gap: 28px; }
.reg-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .reg-grid { grid-template-columns: repeat(3, 1fr); } }
/* leggero ingrandimento delle foto al passaggio del mouse (mai con «riduci movimento») */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .st-foto:hover img, .dt-natale:hover .foto-natale, .ingr:hover .ingr-ph img { transform: scale(1.035); }
}
/* Etichetta (ingredienti e valori) sulla scheda del panettone */
.etich h3 { font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 16px 0 6px; }
.etich p { max-width: 70ch; }
.nut { border-collapse: collapse; width: 100%; max-width: 420px; font-size: .95rem; }
.nut th, .nut td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.nut td { text-align: right; font-variant-numeric: tabular-nums; }
.nut thead th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.nut tr.sub th { padding-left: 22px; font-weight: 400; color: var(--ink-2); }

/* ===================== Movimento: idee riprese da React Bits, rifatte a mano (10/11/2026) ===================== */
/* (b) riflesso dorato sul pulsante d'acquisto al passaggio o al fuoco: passa SOTTO il testo, colori e contrasto invariati */
.btn.accent { position: relative; overflow: hidden; isolation: isolate; }
.btn.accent::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%); transform: translateX(-130%); }
@media (prefers-reduced-motion: no-preference) { .btn.accent:hover::before, .btn.accent:focus-visible::before { transform: translateX(130%); transition: transform .9s cubic-bezier(.2, .7, .2, 1); } }
/* (c) magnete delle schede (solo computer, impostato da dinamica.js con la proprietà translate) */
.fx-mag { transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, transform .2s; }
/* (a) titoli divisi da SplitText: la maschera per riga non deve tagliare le lettere discendenti */
.fx-split .fx-line, .fx-split [class*="-mask"] { padding-bottom: .08em; margin-bottom: -.08em; }