@font-face{font-family:"Cenzo Flare";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/cenzo-flare-light.woff2) format("woff2")}
@font-face{font-family:"Cenzo Flare";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/cenzo-flare-regular.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
/* ══════════════════════════════════════════════════════════════════
   HOME v4 — alla maniera di un grande laboratorio italiano:
   scene a tutto schermo, fotografia da reportage, testata col logo
   al centro, linguette laterali delle linee. Tema unico chiaro
   ("farina"), scelto di proposito: niente variante scura.

   PALETTE rivista (design system + miscele):
   farina   #F4EFE8  fondo principale, più calmo del panna
   panna    #FBF7F0  testo e superfici sopra le foto
   cacao    #5A4022  marca, titoli su chiaro
   inchiostro #2E2114 testo corrente
   cacao-grigio #6E6158  secondario, voci della testata (cacao + grigio)
   sabbia   #DBC29F  onda, dettagli
   adriatico #1D5C6B  mare, "Sei in zona"
   Tinte di linea (miscele pastello): tradizione #E6D3B3 · lievitati #DDBB92
   · pasticceria #E9D0C7 · freddo #C3D8D8
   ══════════════════════════════════════════════════════════════════ */
:root {
  --farina: #F4EFE8; --panna: #FBF7F0; --cacao: #5A4022; --inchiostro: #2E2114;
  --cacao-grigio: #6E6158; --sabbia: #DBC29F; --adriatico: #1D5C6B;
  --t-tradizione: #E6D3B3; --t-lievitati: #DDBB92; --t-pasticceria: #E9D0C7; --t-freddo: #C3D8D8;
  --filo: #E2D8CB; --bordo: #9A846B;
  --font-titolo: "Cenzo Flare", Optima, Candara, "Segoe UI", sans-serif;
  --font-testo: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --curva: cubic-bezier(.22,.61,.36,1);
  --gronda: 20px; --alt-testata: 64px; --binario: 0px;
  color-scheme: light;
}
@media (min-width: 1000px) { :root { --gronda: 56px; --alt-testata: 92px; --binario: 56px; } }
html { background: var(--farina); overflow-x: clip; }
body { margin: 0; background: var(--farina); color: var(--inchiostro); font-family: var(--font-testo); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.icona { width: 18px; height: 18px; flex: none; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--cacao); outline-offset: 3px; }
.su-foto :focus-visible, .scena--foto :focus-visible { outline-color: var(--panna); }
.salta { position: fixed; z-index: 400; left: 16px; top: 8px; transform: translateY(-200%); padding: 10px 16px; background: var(--cacao); color: var(--panna); text-decoration: none; }
.salta:focus-visible { transform: none; }

/* ── tipografia (Cenzo in maiuscolo, come un'insegna) ── */
.titolo { margin: 0; font-family: var(--font-titolo); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; line-height: 1.02; font-size: clamp(30px, 3.6vw, 54px); text-wrap: balance; }
.titolo--vetrina { font-size: clamp(34px, 4.1vw, 64px); }
.sottotitolo { margin: 0; font-family: var(--font-titolo); font-weight: 300; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.45; }
.occhiello { margin: 0; font-family: var(--font-titolo); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; line-height: 16px; }
.testo { margin: 0; font-size: 16px; line-height: 27px; max-width: 46ch; }
.link-lungo { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-titolo); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.link-lungo::after { content: ""; width: 72px; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform 480ms var(--curva); }
.link-lungo:hover::after { transform: scaleX(1.45); }

/* ── TESTATA ── */
.testata { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--alt-testata); padding-top: env(safe-area-inset-top, 0px); color: var(--cacao-grigio); transition: color 480ms var(--curva), background-color 480ms var(--curva); }
.testata.su-foto { color: var(--panna); }
.testata__barra { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--gronda); }
.testata__voci { display: none; list-style: none; margin: 0; padding: 0; gap: 26px; align-items: center; }
.testata__voci a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 8px 0; opacity: .92; transition: opacity 240ms var(--curva); }
.testata__voci a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.testata__voci--destra { justify-content: flex-end; }
.testata__marchio { justify-self: center; display: block; color: inherit; }
.testata__marchio svg { display: block; width: 132px; height: auto; }
.testata.su-foto .testata__marchio svg .lettere { fill: var(--panna); }
.testata__marchio svg .lettere { fill: var(--cacao); transition: fill 480ms var(--curva); }
.lingue { display: inline-flex; gap: 6px; font-size: 12px; letter-spacing: .12em; }
.lingue a { text-decoration: none; opacity: .6; } .lingue a[aria-current] { opacity: 1; }
.tasto { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; }
.tasto .icona { width: 22px; height: 22px; }
.testata__sx-mobile { display: flex; align-items: center; }
.testata__dx-mobile { display: flex; align-items: center; justify-content: flex-end; }
@media (min-width: 1000px) {
  .testata__voci { display: flex; }
  .testata__sx-mobile { display: none; }
  .testata__marchio svg { width: 168px; }
  .testata__dx-mobile .carrello-mobile { display: none; }
  .testata__dx-mobile { gap: 18px; }
}

/* ── BINARIO SINISTRO: punti delle scene + social ── */
.binario { display: none; }
@media (min-width: 1000px) {
  .binario { display: flex; position: fixed; z-index: 90; left: 0; top: 0; bottom: 0; width: var(--binario); flex-direction: column; align-items: center; justify-content: center; color: var(--cacao-grigio); transition: color 480ms var(--curva); pointer-events: none; }
  .binario.su-foto { color: var(--panna); }
  .punti { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; pointer-events: auto; }
  .punti button { display: block; width: 10px; height: 10px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color 240ms var(--curva), transform 240ms var(--curva); }
  .punti button[aria-current="true"] { background: currentColor; transform: scale(1.2); }
  .social { position: absolute; bottom: 28px; display: grid; gap: 14px; pointer-events: auto; }
  .social a { display: grid; place-items: center; width: 28px; height: 28px; color: inherit; }
  .social .icona { width: 16px; height: 16px; }
}

/* ── LINGUETTE DESTRE: le linee ── */
.linguette { display: none; }
@media (min-width: 1000px) {
  .linguette { display: flex; position: fixed; z-index: 90; right: 0; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 3px; }
  .linguetta { display: flex; align-items: center; justify-content: center; width: 34px; height: 132px; color: var(--cacao); text-decoration: none; writing-mode: vertical-rl; transform: rotate(180deg) translateX(0); font-family: var(--font-titolo); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 6px 18px -10px rgba(46,33,20,.4); transition: width 360ms var(--curva); }
  .linguetta:hover, .linguetta:focus-visible { width: 44px; }
  .linguetta--tradizione { background: var(--t-tradizione); }
  .linguetta--lievitati { background: var(--t-lievitati); height: 118px; }
  .linguetta--pasticceria { background: var(--t-pasticceria); }
  .linguetta--freddo { background: var(--t-freddo); height: 156px; }
}

/* ── SCENE ── */
.scena { position: relative; min-height: 100svh; box-sizing: border-box; overflow: hidden; }
.scena--foto { color: var(--panna); background: #1c140c; }
.scena__fondo { position: absolute; inset: 0; }
.scena__fondo img, .scena__fondo video { width: 100%; height: 100%; object-fit: cover; }
.scena__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,20,12,.62) 0%, rgba(28,20,12,.32) 38%, rgba(28,20,12,0) 62%), linear-gradient(0deg, rgba(28,20,12,.35), rgba(28,20,12,0) 30%); }
.scena__velo--destra { background: linear-gradient(270deg, rgba(28,20,12,.72) 0%, rgba(28,20,12,.4) 36%, rgba(28,20,12,0) 60%), linear-gradient(0deg, rgba(28,20,12,.3), rgba(28,20,12,0) 30%); }
.scena__testo { position: relative; z-index: 2; display: grid; gap: 18px; align-content: end; min-height: 100svh; box-sizing: border-box; padding: calc(var(--alt-testata) + 24px) var(--gronda) 64px; max-width: 620px; }
.scena__testo .testo { color: inherit; opacity: .92; }
@media (min-width: 1000px) {
  .scena__testo { align-content: center; padding: var(--alt-testata) 0 0 calc(var(--binario) + 72px); max-width: 560px; }
}

/* vetrina a due diapositive */
.vetrina { background: var(--farina); }
.diapo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1000ms var(--curva), visibility 0s linear 1000ms; }
.diapo.attiva { opacity: 1; visibility: visible; transition: opacity 1000ms var(--curva), visibility 0s; }
.diapo--foto { color: var(--panna); }
.diapo--chiara { background: var(--farina); color: var(--cacao); }
.diapo--chiara .scena__fondo img { object-position: 70% 50%; }
.diapo--chiara .testo { color: var(--inchiostro); }
.diapo:not(.attiva) .scena__testo > * { opacity: 0; }
.diapo .scena__testo > * { transition: opacity 700ms var(--curva) 350ms, transform 900ms var(--curva) 350ms; }
.diapo:not(.attiva) .scena__testo > * { transform: translateY(24px); }
.vetrina__punti { position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 10px; }
.vetrina__punti button { width: 34px; height: 3px; padding: 0; border: 0; background: rgba(251,247,240,.45); cursor: pointer; }
.vetrina__punti button[aria-current="true"] { background: var(--panna); }
.vetrina.chiara .vetrina__punti button { background: rgba(90,64,34,.3); }
.vetrina.chiara .vetrina__punti button[aria-current="true"] { background: var(--cacao); }
.vetrina__punti button::before { content: ""; display: block; height: 22px; margin-top: -10px; }
@media (max-width: 999px) {
  .diapo--chiara .scena__fondo { height: 52%; top: auto; bottom: 0; }
  .diapo--chiara .scena__testo { align-content: start; }
}

/* passione e territorio */
.passione { background: var(--farina); color: var(--cacao); display: grid; }
.passione__testo { display: grid; gap: 18px; align-content: center; padding: calc(var(--alt-testata) + 24px) var(--gronda) 40px; max-width: 620px; }
.passione__segno { width: 84px; height: auto; fill: var(--sabbia); }
.passione__testo .testo { color: var(--inchiostro); }
.citazione { margin: 8px 0 0; padding-left: 18px; border-left: 1px solid var(--sabbia); }
.citazione p { margin: 0; font-family: var(--font-titolo); font-weight: 300; font-size: 22px; line-height: 1.35; }
.citazione cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; letter-spacing: .08em; color: var(--cacao-grigio); }
.passione__foto { position: relative; min-height: 60svh; overflow: hidden; }
.passione__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
@media (min-width: 1000px) {
  .passione { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .passione__testo { padding: var(--alt-testata) 48px 0 calc(var(--binario) + 72px); }
  .passione__foto { min-height: 100svh; margin-right: 0; }
}

/* i nostri dolci */
.dolci { background: var(--farina); color: var(--cacao); display: grid; align-content: center; gap: 36px; padding: calc(var(--alt-testata) + 28px) var(--gronda) 56px; }
.dolci__testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.linee { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.linea { display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; }
.linea__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.linea__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--curva); }
.linea:hover .linea__foto img { transform: scale(1.06); }
.linea__etichetta { position: absolute; left: 0; top: 0; padding: 8px 12px; font-family: var(--font-titolo); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cacao); }
.linea__nome { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.linea .testo { font-size: 15px; line-height: 23px; color: var(--inchiostro); }
.linea .link-lungo { color: var(--cacao); }
.linea .link-lungo::after { width: 40px; }
@media (min-width: 1000px) {
  .dolci { padding: var(--alt-testata) calc(var(--binario) + 72px) 40px; }
  .linee { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .linea__foto { aspect-ratio: auto; height: min(46svh, 440px); }
}

/* diario (come le news: foto grande, colonna a destra) */
.diario__colonna { position: relative; z-index: 2; display: grid; gap: 26px; align-content: end; min-height: 100svh; box-sizing: border-box; padding: calc(var(--alt-testata) + 24px) var(--gronda) 64px; }
.notizia { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(251,247,240,.35); }
.notizia__titolo { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.notizia .testo { font-size: 15px; line-height: 23px; opacity: .9; }
.notizia__riga { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.notizia__riga img { width: 96px; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 1000px) {
  .diario__colonna { margin-left: auto; width: 440px; align-content: center; padding: var(--alt-testata) calc(72px + 20px) 0 0; }
}

/* fondale (footer, come una scena) */
.fondale { background: var(--farina); color: var(--cacao); display: grid; align-content: center; gap: 40px; padding: calc(var(--alt-testata) + 24px) var(--gronda) calc(32px + env(safe-area-inset-bottom, 0px)); min-height: 100svh; box-sizing: border-box; }
.fondale__colonne { display: grid; gap: 36px; }
.fondale h2 { margin: 0 0 12px; font-family: var(--font-titolo); font-weight: 400; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.fondale ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 21px; color: var(--inchiostro); }
.fondale li { display: flex; gap: 10px; align-items: flex-start; }
.fondale li .icona { width: 16px; height: 16px; margin-top: 2px; color: var(--cacao); }
.fondale a { text-decoration: none; }
.fondale a:hover { text-decoration: underline; text-underline-offset: 4px; }
.iscrizione { display: grid; gap: 10px; max-width: 360px; }
.iscrizione p { margin: 0; font-size: 14px; color: var(--cacao-grigio); }
.iscrizione__riga { display: flex; border-bottom: 1px solid var(--bordo); }
.iscrizione input[type="email"] { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font: 400 15px/1 var(--font-testo); color: var(--inchiostro); }
.iscrizione input[type="email"]::placeholder { color: var(--cacao-grigio); }
.iscrizione input[type="email"]:focus { outline: none; }
.iscrizione__riga:focus-within { border-bottom-color: var(--cacao); box-shadow: 0 1px 0 var(--cacao); }
.iscrizione button { border: 0; background: none; padding: 0 4px; font-family: var(--font-titolo); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cacao); cursor: pointer; }
.iscrizione label.spunta { display: flex; gap: 10px; font-size: 12px; line-height: 18px; color: var(--cacao-grigio); cursor: pointer; }
.iscrizione label.spunta input { margin-top: 2px; accent-color: var(--cacao); }
.iscrizione__esito { min-height: 18px; font-size: 13px; color: var(--adriatico); }
.fondale__centro { display: grid; justify-items: center; gap: 18px; text-align: center; }
.fondale__centro svg.completo { width: 150px; height: auto; }
.fondale__centro svg.completo .lettere, .fondale__centro svg.completo .logo-arco, .fondale__centro svg.completo .logo-citta { fill: var(--cacao); }
.fondale__social { display: flex; gap: 18px; }
.fondale__social a { display: grid; place-items: center; width: 32px; height: 32px; }
.mondo { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo); }
.mondo a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cacao-grigio); }
.mondo a + a { border-left: 1px solid var(--filo); }
.fondale__giu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--cacao-grigio); }
.su { display: inline-grid; justify-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cacao-grigio); }
@media (min-width: 1000px) {
  .fondale { padding: var(--alt-testata) calc(var(--binario) + 72px) 28px; }
  .fondale__colonne { grid-template-columns: 1fr 1.1fr 1fr; gap: 48px; align-items: start; }
  .fondale__colonne > :nth-child(2) { justify-self: center; }
  .fondale__colonne > :nth-child(3) { justify-self: end; }
}

/* ── MENU laterale ── */
.velario { position: fixed; inset: 0; z-index: 150; background: rgba(28,20,12,.45); opacity: 0; pointer-events: none; transition: opacity 360ms var(--curva); }
.velario.vivo { opacity: 1; pointer-events: auto; }
.cassetto { position: fixed; z-index: 160; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); box-sizing: border-box; padding: calc(24px + env(safe-area-inset-top, 0px)) 32px 32px; background: var(--cacao); color: var(--panna); display: grid; grid-template-rows: auto 1fr auto; gap: 24px; transform: translateX(102%); visibility: hidden; transition: transform 560ms var(--curva), visibility 0s linear 560ms; }
.cassetto.vivo { transform: none; visibility: visible; transition: transform 560ms var(--curva), visibility 0s; }
.cassetto:focus { outline: none; }
.cassetto__testa { display: flex; justify-content: space-between; align-items: center; }
.cassetto nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cassetto nav a { display: block; padding: 8px 0; font-family: var(--font-titolo); font-size: 26px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.cassetto nav a:hover { color: var(--sabbia); }
.cassetto nav .minore a { font-size: 14px; letter-spacing: .16em; color: var(--sabbia); }
.cassetto :focus-visible { outline-color: var(--panna); }
.cassetto__piede { font-size: 14px; line-height: 22px; color: var(--sabbia); }

/* ── etichetta "immagini generate" ── */
.generate { position: fixed; z-index: 95; right: 12px; bottom: 12px; padding: 6px 10px; background: rgba(28,20,12,.72); color: var(--panna); font-size: 11px; line-height: 14px; letter-spacing: .04em; border-radius: 2px; pointer-events: none; }
@media (min-width: 1000px) { .generate { right: 56px; } }

/* ── avviso ── */
.avviso { position: fixed; z-index: 250; left: 50%; bottom: 24px; transform: translate(-50%, 180%); padding: 12px 20px; background: var(--cacao); color: var(--panna); font-size: 14px; transition: transform 360ms var(--curva); }
.avviso.vivo { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* correzioni dopo la verifica */
@media (min-width: 1000px) {
  .passione__foto { margin-top: var(--alt-testata); min-height: calc(100svh - var(--alt-testata)); }
}
.passione__foto img { object-position: 50% 100%; }
.testata.solida { background: rgba(244, 239, 232, .95); color: var(--cacao-grigio); box-shadow: 0 1px 0 var(--filo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.testata.solida .testata__marchio svg .lettere { fill: var(--cacao); }
@media (max-width: 999px) {
  .scena__velo, .scena__velo--destra { background: linear-gradient(0deg, rgba(28,20,12,.86) 0%, rgba(28,20,12,.62) 42%, rgba(28,20,12,.1) 72%, rgba(28,20,12,.25) 100%); }
  .diario__colonna { gap: 20px; }
}

/* ── video leggeri (v4.1): copertina sotto, video sopra che compare quando parte ── */
.scena__fondo > picture, .scena__fondo > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.scena__fondo > picture img { width: 100%; height: 100%; object-fit: cover; }
.scena__fondo > video { opacity: 0; transition: opacity 720ms var(--curva); }
.scena__fondo > video.pronto { opacity: 1; }
.tasto-video { position: absolute; z-index: 6; top: calc(var(--alt-testata) + 12px); right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(251,247,240,.55); border-radius: 50%; background: rgba(28,20,12,.28); color: var(--panna); cursor: pointer; transition: background-color 180ms var(--curva), border-color 180ms var(--curva); }
.tasto-video:hover { background: rgba(28,20,12,.5); border-color: var(--panna); }
.tasto-video:focus-visible { outline: 2px solid var(--panna); outline-offset: 3px; }
.tasto-video svg { width: 14px; height: 14px; fill: currentColor; }
.tasto-video .i-play, .tasto-video[aria-pressed="true"] .i-pausa { display: none; }
.tasto-video[aria-pressed="true"] .i-play { display: block; }
.vetrina.chiara .tasto-video { visibility: hidden; }
@media (min-width: 1000px) {
  .tasto-video { top: auto; right: auto; bottom: 26px; left: calc(var(--binario) + 72px); width: 36px; height: 36px; }
}

/* ══ NATALE in Home (01/10 notte) — colori dell'illustrazione interna Iezzi ══ */
:root { --i-crema: #F1E2D5; --i-crema-chiara: #F8ECD1; --i-terracotta: #C4543C; --i-mattone: #923F31; --i-blu-notte: #26435F; --i-blu-mare: #557590;
  --i-sabbia: #DDC7B1; --i-oliva: #8A7A5C; --i-sole: #FCCB52; --i-foglia: #5E6C52; --i-uva: #4B4262; --i-notte-alto: #1C3149; --i-notte-mare: #1E3550; }
.scena--natale { background: var(--i-notte-alto); color: var(--i-crema-chiara); }
.natale__disegno, .natale__disegno svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.natale__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,49,73,.55) 0%, rgba(28,49,73,.15) 46%, rgba(28,49,73,0) 60%); pointer-events: none; }
.natale__testo { align-content: start; padding-top: calc(var(--alt-testata) + 36px); }
.natale__occhiello { color: var(--i-sole); }
.scena--natale .titolo { color: var(--i-crema-chiara); }
.natale__dolci { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.natale__dolci a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(248,236,209,.45); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--i-crema-chiara); background: rgba(28,49,73,.35); transition: background-color 240ms var(--curva), border-color 240ms var(--curva); }
.natale__dolci a:hover { background: rgba(248,236,209,.14); border-color: var(--i-sole); }
.natale__dolci span { font-family: var(--font-titolo); color: var(--i-sole); }
@media (min-width: 1000px) { .natale__testo { align-content: start; padding-top: calc(var(--alt-testata) + 56px); max-width: 620px; } }
@media (max-width: 999px) { .natale__testo-lungo { display: none; } .natale__dolci li:nth-child(n+3) { display: none; } }
@media (max-width: 999px) and (orientation: landscape) { .natale__dolci { display: none; } }
.voce-stagione .icona { color: var(--i-sole); }
.testata.solida .voce-stagione .icona { color: var(--i-terracotta); }
.cassetto .voce-stagione { color: var(--i-sole); }
.cassetto .voce-stagione span { font-size: 14px; letter-spacing: .14em; color: var(--sabbia); vertical-align: middle; margin-left: 6px; }

/* testata fra 1000 e 1279 px: voci senza icone e più strette (ora sono 8) */
.testata__voci a { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1279px) {
  .testata__voci { gap: 14px; }
  .testata__voci a { font-size: 11px; letter-spacing: .1em; }
  .testata__voci a .icona { display: none; }
  .testata__marchio svg { width: 136px; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .testata__voci { gap: 18px; } .testata__voci a { letter-spacing: .12em; } }

/* correzione: l'avviso vuoto non si affaccia più in fondo allo schermo */
.avviso { transform: translate(-50%, calc(100% + 48px)); visibility: hidden; transition: transform 360ms var(--curva), visibility 0s linear 360ms; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; }
.avviso.vivo { transform: translate(-50%, 0); visibility: visible; transition: transform 360ms var(--curva), visibility 0s; }

@media (min-width: 1000px) and (max-width: 1279px) { .testata__voci .lingue { display: none; } .testata__voci { gap: 12px; } }

/* ══════════════════════════════════════════════════════════════════
   SHOP v1 — stesso linguaggio della Home v4.1, ma scorrimento normale:
   chi compra deve scorrere, confrontare e tornare indietro senza scatti.
   Qui sotto solo ciò che la Home non ha; il resto è in stile-home.css.
   ══════════════════════════════════════════════════════════════════ */

/* token del design system usati dai componenti (dolce, bollino, bottone, bivio),
   mappati sulla palette v4 */
:root {
  --marca: var(--cacao); --su-marca: var(--panna);
  --fondo: var(--farina); --fondo-alto: var(--panna); --fondo-velo: #EAE1D5;
  --inchiostro-tenue: var(--cacao-grigio); --bordo-campo: var(--bordo); --filo-forte: #CDBFAE;
  --onda: var(--sabbia);
  --esito-ok: var(--adriatico); --esito-ok-velo: #DCE8E8;
  --avviso: #855400; --avviso-velo: #F3E3C4;
  --raggio-0: 0; --raggio-1: 4px; --raggio-pieno: 999px;
  --fuoco: 0 0 0 2px var(--farina), 0 0 0 4px var(--cacao);
  --durata-breve: 180ms; --durata-media: 360ms; --durata-lunga: 720ms;
  --margine: var(--gronda);
}
@media (min-width: 1000px) { :root { --margine: calc(var(--binario) + 72px); } }

/* la testata: voce attuale e carrello */
.testata__voci a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.carrello { position: relative; }
.carrello__conta { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--raggio-pieno); background: var(--cacao); color: var(--panna); font: 600 11px/18px var(--font-testo); text-align: center; }
.testata.su-foto:not(.solida) .carrello__conta { background: var(--panna); color: var(--cacao); }
.carrello.batte .carrello__conta { animation: batte 480ms var(--curva); }
@keyframes batte { 40% { transform: scale(1.35); } }
.carrello--desktop { display: none; }
@media (min-width: 1000px) { .carrello--desktop { display: inline-grid; } }
.linguetta[aria-current="true"] { width: 44px; box-shadow: 0 8px 22px -8px rgba(46,33,20,.55); }

/* ── 1 · SOGLIA: apertura breve, non a tutto schermo ── */
.soglia { position: relative; overflow: hidden; color: var(--panna); background: #1c140c; min-height: clamp(540px, 80svh, 720px); display: grid; }
.soglia .scena__fondo img { object-position: 62% 50%; }
.soglia__testo { position: relative; z-index: 2; display: grid; gap: 18px; align-content: end; box-sizing: border-box; padding: calc(var(--alt-testata) + 24px) var(--gronda) 40px; max-width: 640px; }
.soglia__testo .testo { opacity: .92; }
.briciole { display: flex; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.briciole a { text-decoration: none; } .briciole a:hover { text-decoration: underline; text-underline-offset: 4px; }
.promesse { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(251,247,240,.3); display: grid; gap: 8px; font-size: 14px; line-height: 20px; }
.promesse li { display: flex; align-items: center; gap: 10px; }
.promesse .icona { width: 16px; height: 16px; color: var(--sabbia); }
@media (min-width: 1000px) {
  .soglia { min-height: clamp(560px, 74svh, 760px); }
  .soglia__testo { align-content: end; padding: calc(var(--alt-testata) + 40px) 0 56px var(--margine); max-width: 700px; }
  .promesse { display: flex; flex-wrap: wrap; gap: 10px 28px; }
}

/* ── sezioni a scorrimento normale ── */
.sezione { position: relative; padding: 72px var(--margine); scroll-margin-top: var(--alt-testata); }
.sezione__testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; color: var(--cacao); }
.sezione__titoli { display: grid; gap: 10px; }
.sezione__testa .occhiello { color: var(--cacao-grigio); }
.sezione__testa > .testo { color: var(--inchiostro); }
@media (min-width: 1000px) { .sezione { padding-block: 104px; } .sezione__testa { margin-bottom: 44px; } }

/* ── 2 · INGRESSI ── */
.linea__piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.linea__conta { font-size: 13px; color: var(--cacao-grigio); }
@media (min-width: 1000px) { .ingressi .linea__foto { height: min(48svh, 460px); } }

/* ── 3 · STAGIONE (cacao, come una vetrina di Natale) ── */
.stagione { padding: 0; background: var(--cacao); color: var(--panna); }
.stagione__capo { display: grid; }
.stagione__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.stagione__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.stagione__testo { display: grid; gap: 16px; align-content: center; padding: 40px var(--gronda) 32px; max-width: 620px; }
.stagione__testo .occhiello { color: var(--sabbia); }
.stagione__testo .testo { opacity: .92; }
.stagione__testo .link-lungo { color: var(--panna); }
.stagione__fila { list-style: none; margin: 0; padding: 8px var(--gronda) 56px; display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gronda); scrollbar-width: none; overscroll-behavior-x: contain; }
.stagione__fila::-webkit-scrollbar { display: none; }
.stagione__fila > li { scroll-snap-align: start; }
@media (min-width: 640px) { .stagione__fila { grid-auto-columns: 40%; } }
@media (min-width: 1000px) {
  .stagione__capo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stagione__foto { order: 2; aspect-ratio: auto; min-height: min(78svh, 680px); }
  .stagione__testo { padding: 96px 48px 64px var(--margine); }
  .stagione__fila { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; overflow: visible; padding: 56px var(--margine) 104px; }
}

/* ── scheda dolce (componente del design system) ── */
.dolce { position: relative; height: 100%; display: flex; flex-direction: column; gap: 12px; color: var(--inchiostro); }
.dolce__foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fondo-velo); }
.dolce__foto img, .dolce__segnaposto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--durata-lunga) var(--curva); }
.dolce__segnaposto { display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--cacao); }
.dolce__segnaposto svg { width: 104px; height: auto; fill: currentColor; opacity: .45; }
.dolce__segnaposto span { font-family: var(--font-titolo); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cacao-grigio); }
@media (hover: hover) { .dolce:hover .dolce__foto img, .dolce:hover .dolce__segnaposto { transform: scale(1.04); } }
.dolce__bollini { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.dolce__linea { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-titolo); font-size: 11px; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--inchiostro-tenue); }
.dolce__linea i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dolce__nome { margin: 4px 0 0; font-family: var(--font-titolo); font-weight: 400; font-size: 19px; line-height: 25px; letter-spacing: .02em; color: var(--cacao); }
.dolce__nome a { color: inherit; text-decoration: none; }
.dolce__nome a::after { content: ""; position: absolute; inset: 0; }
.dolce__nome a:focus-visible { outline: none; }
.dolce:has(.dolce__nome a:focus-visible) { box-shadow: var(--fuoco); }
.dolce__nota { margin: 0; font-size: 14px; line-height: 21px; color: var(--inchiostro-tenue); }
.dolce__piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; min-height: 48px; }
.dolce__prezzo { font-family: var(--font-titolo); font-size: 20px; line-height: 26px; color: var(--cacao); }
.dolce__piede .bottone { position: relative; z-index: 1; }
@media (min-width: 1000px) { .dolce__nome { font-size: 21px; line-height: 28px; } .dolce__prezzo { font-size: 22px; } }
/* sul cacao */
.stagione .dolce { color: var(--panna); }
.stagione .dolce__nome, .stagione .dolce__prezzo { color: var(--panna); }
.stagione .dolce__linea, .stagione .dolce__nota { color: var(--sabbia); }
.stagione .dolce__foto { background: rgba(251,247,240,.08); }
.stagione .bottone--pieno { background: var(--sabbia); border-color: var(--sabbia); color: var(--cacao); }
.stagione .bottone--pieno:hover { background: var(--panna); border-color: var(--panna); }
.stagione .dolce:has(.dolce__nome a:focus-visible) { box-shadow: 0 0 0 2px var(--cacao), 0 0 0 4px var(--panna); }

/* ── bollino ── */
.bollino { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--raggio-pieno); background: var(--fondo-alto); color: var(--inchiostro); font-family: var(--font-titolo); font-size: 10.5px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bollino .icona { width: 14px; height: 14px; }
.bollino--ritiro { background: var(--fondo-alto); color: var(--cacao); }
.bollino--spedibile { background: var(--esito-ok-velo); color: var(--esito-ok); }
.bollino--ultimi { background: var(--avviso-velo); color: var(--avviso); }
.bollino--stagione { background: var(--cacao); color: var(--panna); }

/* ── bottone ── */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1px solid var(--marca); border-radius: var(--raggio-pieno); background: transparent; color: var(--marca); font-family: var(--font-titolo); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva), border-color var(--durata-breve) var(--curva), transform var(--durata-breve) var(--curva); }
.bottone--pieno { background: var(--marca); color: var(--su-marca); }
.bottone--pieno:hover { background: var(--inchiostro); border-color: var(--inchiostro); }
.bottone--contorno:hover { background: var(--fondo-velo); }
.bottone--tondo { width: 44px; min-height: 44px; padding: 0; }
.bottone .icona { width: 18px; height: 18px; }
.bottone:active { transform: translateY(1px); }
.bottone:focus-visible { outline: none; box-shadow: var(--fuoco); }
.bottone.preso { background: var(--adriatico); border-color: var(--adriatico); color: var(--panna); }

/* ── 4 · SCAFFALE ── */
.scaffale { padding-bottom: 88px; }
.filtri { position: sticky; top: calc(var(--alt-testata) + env(safe-area-inset-top, 0px)); z-index: 60; margin-inline: calc(-1 * var(--margine)); padding: 10px var(--margine); background: rgba(244,239,232,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow var(--durata-media) var(--curva); }
.filtri.attaccata { box-shadow: 0 1px 0 var(--filo); }
.filtri__fila { display: flex; align-items: center; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: -4px; padding: 4px; }
.filtri__fila::-webkit-scrollbar { display: none; }
.filtri fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex: none; }
.filtri label { position: relative; display: block; cursor: pointer; }
.filtri input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.interruttore { padding: 3px !important; gap: 2px; border: 1px solid var(--filo-forte) !important; border-radius: var(--raggio-pieno); background: var(--panna); }
.interruttore span { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--raggio-pieno); font-family: var(--font-titolo); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cacao); white-space: nowrap; transition: background-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva); }
.interruttore .icona { width: 15px; height: 15px; }
.interruttore input:checked + span { background: var(--cacao); color: var(--panna); }
.interruttore label:hover input:not(:checked) + span { background: var(--fondo-velo); }
.gettoni { gap: 8px; }
.gettoni span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-pieno); background: transparent; font-size: 14px; font-weight: 500; color: var(--inchiostro); white-space: nowrap; transition: border-color var(--durata-breve) var(--curva), background-color var(--durata-breve) var(--curva); }
.gettoni i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(46,33,20,.15); }
.gettoni label:hover span { border-color: var(--cacao); }
.gettoni input:checked + span { border-color: var(--cacao); background: var(--panna); box-shadow: inset 0 0 0 1px var(--cacao); color: var(--cacao); }
.filtri label:has(input:focus-visible) span { box-shadow: var(--fuoco); }
.filtri__divisore { flex: none; width: 1px; height: 28px; background: var(--filo-forte); }
.scaffale__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 26px; }
.conta { margin: 0; font-size: 14px; color: var(--cacao-grigio); }
.conta b { font-family: var(--font-titolo); font-weight: 400; font-size: 18px; color: var(--cacao); margin-right: 2px; }
.ordina { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cacao-grigio); }
.ordina select { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 26px 0 2px; border: 0; border-bottom: 1px solid var(--bordo); border-radius: 0; background: transparent; font: 500 14px/1 var(--font-testo); color: var(--inchiostro); cursor: pointer; }
.ordina select:focus-visible { outline: none; box-shadow: var(--fuoco); }
.ordina .icona { position: absolute; right: 2px; width: 16px; height: 16px; pointer-events: none; color: var(--cacao); }
.griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
.griglia > li[hidden] { display: none; }
.griglia > li.compare { animation: compare 420ms var(--curva) both; }
@keyframes compare { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 640px) { .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; } }
@media (min-width: 1000px) {
  .filtri__fila { flex-wrap: wrap; overflow: visible; }
  .griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 28px; }
  .scaffale__barra { margin: 22px 0 34px; }
}
@media (max-width: 639px) {
  .griglia .dolce__bollini .bollino { height: 24px; padding: 0 9px; font-size: 10px; letter-spacing: .1em; }
  .griglia .dolce__nome { font-size: 17px; line-height: 23px; }
  .griglia .dolce__nota { font-size: 13px; line-height: 19px; }
  .griglia .dolce__prezzo { font-size: 18px; }
}
.vuoto { display: grid; justify-items: center; gap: 16px; padding: 56px 0; text-align: center; color: var(--cacao); }
.vuoto[hidden] { display: none; }
.scaffale__nota { margin: 48px 0 0; font-size: 13px; color: var(--cacao-grigio); }

/* ── 5 · COME ARRIVA (bivio: spedizione sabbia, ritiro blu Adriatico) ── */
.arrivo { padding-top: 0; }
.bivio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bivio__porta { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 340px; padding: 64px 40px 40px; text-decoration: none; overflow: hidden; transition: transform var(--durata-media) var(--curva); }
.bivio__porta--spedizione { background: var(--sabbia); color: var(--cacao); }
.bivio__porta--zona { background: var(--adriatico); color: var(--panna); }
@media (hover: hover) { .bivio__porta:hover { transform: translateY(-4px); } }
.bivio__porta:focus-visible { outline: none; box-shadow: var(--fuoco); }
.bivio__occhiello { font-family: var(--font-titolo); font-size: 12px; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.bivio__titolo { font-family: var(--font-titolo); font-weight: 300; font-size: 44px; line-height: 48px; text-transform: uppercase; letter-spacing: .02em; max-width: 12ch; }
.bivio__testo { font-size: 16px; line-height: 26px; max-width: 38ch; }
.bivio__azione { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-family: var(--font-titolo); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.bivio__azione .icona { transition: transform var(--durata-media) var(--curva); }
.bivio__porta:hover .bivio__azione .icona { transform: translateX(6px); }
.bivio__onda { position: absolute; right: 40px; top: 40px; width: 72px; height: auto; clip-path: inset(0 100% 0 0); transition: clip-path var(--durata-lunga) var(--curva); }
.bivio__porta--spedizione .bivio__onda { fill: var(--cacao); }
.bivio__porta--zona .bivio__onda { fill: var(--sabbia); }
.bivio__porta:hover .bivio__onda, .bivio__porta:focus-visible .bivio__onda { clip-path: inset(0 0 0 0); }
/* correzione del bug del design system: media query, non container query */
@media (max-width: 719px) {
  .bivio { grid-template-columns: 1fr; }
  .bivio__porta { min-height: 260px; padding: 52px 20px 28px; }
  .bivio__titolo { font-size: 30px; line-height: 34px; }
  .bivio__onda { clip-path: none; right: 20px; top: 24px; }
}

/* ── 6 · FONDALE ad altezza libera ── */
.fondale--pagina { min-height: 0; border-top: 1px solid var(--filo); padding-top: 72px; }
@media (min-width: 1000px) { .fondale--pagina { padding-top: 96px; } }

/* avviso: da vuoto non deve affacciarsi in fondo allo schermo (vale anche per la Home v4.1) */
.avviso { transform: translate(-50%, calc(100% + 48px)); visibility: hidden; transition: transform 360ms var(--curva), visibility 0s linear 360ms; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; }
.avviso.vivo { transform: translate(-50%, 0); visibility: visible; transition: transform 360ms var(--curva), visibility 0s; }

/* telefono: filtri compatti su una riga che scorre, con sfumatura a destra */
@media (max-width: 639px) {
  .filtri__fila { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 40px; }
  .interruttore span { height: 36px; padding: 0 12px; font-size: 11px; letter-spacing: .1em; gap: 6px; }
  .interruttore .icona { display: none; }
  .gettoni span { height: 38px; padding: 0 14px; font-size: 13px; }
  .griglia .dolce__bollini .bollino .icona { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .griglia > li.compare { animation: none; }
  .bivio__onda { clip-path: none; }
  .bivio__porta:hover, .dolce:hover .dolce__foto img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SCHEDA PRODOTTO + CARRELLO A CASSETTO (sporta)
   Tavolozza della costa (PROPOSTA, da rivedere nel passaggio sui colori):
   legno del trabocco, schiuma, mare chiaro e medio, Adriatico profondo,
   luce del tramonto, sabbia chiara. Si usa nei fondali, accanto agli ufficiali.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --legno: #8A7866; --legno-scuro: #3F4A4C; --schiuma: #E6EDEA; --mare-chiaro: #B3CDCB; --mare-medio: #6E9C9F;
  --adriatico-fondo: #174955; --tramonto: #E8B994; --tramonto-chiaro: #F2DECB; --sabbia-chiara: #E9D9C0;
}

/* ── 1 · IL DOLCE ── */
.vetrina-dolce { display: grid; gap: 28px; padding: var(--alt-testata) 0 56px; scroll-margin-top: 0; }
.galleria { display: grid; gap: 14px; min-width: 0; }
.galleria__vista { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fondo-velo); }
.galleria__vista > figure { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 600ms var(--curva), visibility 0s linear 600ms; }
.galleria__vista > figure.attivo { opacity: 1; visibility: visible; transition: opacity 600ms var(--curva), visibility 0s; }
.palco--foto img { width: 100%; height: 100%; object-fit: cover; }
.palco__fondo, .palco__fondo .fondale-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.palco[data-fondale="trama"] .fondale-svg:not(.fondale-svg--trama),
.palco[data-fondale="incisione"] .fondale-svg:not(.fondale-svg--incisione),
.palco[data-fondale="marea"] .fondale-svg:not(.fondale-svg--marea),
.palco[data-fondale="onda"] .fondale-svg:not(.fondale-svg--onda) { display: none; }
.palco[data-fondale="trama"] { --fondale-fondo: var(--schiuma); --fondale-tratto: #86A9AB; }
.palco[data-fondale="incisione"] { --fondale-fondo: #EFE3CF; --fondale-tratto: #8B6D4E; }
.palco[data-fondale="onda"] { --fondale-fondo: var(--farina); --fondale-tratto: #E3D0B4; }
.palco__dolce { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); width: auto; max-width: none; filter: drop-shadow(0 22px 22px rgba(46,33,20,.24)); }
.palco__dolce--alta { height: 64%; bottom: 13%; }
.palco__dolce--larga { width: 64%; bottom: 13%; }
.palco__ombra { position: absolute; z-index: 1; left: 50%; bottom: 10.5%; height: 5%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(46,33,20,.34), rgba(46,33,20,0)); }
.palco__ombra--alta { width: 42%; } .palco__ombra--larga { width: 62%; }
.palco__pausa.tasto-video { top: auto; left: auto; right: 14px; bottom: 14px; z-index: 4; border-color: rgba(46,33,20,.35); background: rgba(251,247,240,.72); color: var(--cacao); }
.palco__pausa.tasto-video:hover { background: var(--panna); border-color: var(--cacao); }
.palco__pausa.tasto-video:focus-visible { outline-color: var(--cacao); }
.palco__pausa[hidden] { display: none; }
.galleria__freccia { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid rgba(46,33,20,.18); border-radius: 50%; background: rgba(251,247,240,.82); color: var(--cacao); cursor: pointer; transition: background-color var(--durata-breve) var(--curva); }
.galleria__freccia:hover { background: var(--panna); }
.galleria__freccia:focus-visible { outline: none; box-shadow: var(--fuoco); }
.galleria__freccia--prima { left: 12px; } .galleria__freccia--dopo { right: 12px; }
.miniature { display: flex; gap: 10px; padding-inline: var(--gronda); overflow-x: auto; scrollbar-width: none; }
.miniature button { position: relative; flex: none; width: 64px; height: 80px; padding: 0; border: 0; background: var(--fondo-velo); cursor: pointer; overflow: hidden; }
.miniature button::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--filo); transition: box-shadow var(--durata-breve) var(--curva); }
.miniature button[aria-current="true"]::after { box-shadow: inset 0 0 0 2px var(--cacao); }
.miniature button:focus-visible { outline: none; box-shadow: var(--fuoco); }
.miniature img { width: 100%; height: 100%; object-fit: cover; }
.miniature .mini-palco { background: var(--sabbia-chiara); }
.miniature .mini-palco img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.regia { margin: 4px var(--gronda) 0; padding: 12px 14px 14px; border: 1px dashed var(--filo-forte); border-radius: var(--raggio-1); display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.regia legend { padding: 0 6px; font-family: var(--font-titolo); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cacao); }
.regia legend span { color: var(--cacao-grigio); }
.regia label { position: relative; cursor: pointer; }
.regia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.regia label span { display: inline-flex; align-items: baseline; gap: 6px; height: 36px; align-items: center; padding: 0 14px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-pieno); font-size: 14px; font-weight: 500; color: var(--inchiostro); }
.regia label small { font-size: 11px; color: var(--adriatico); font-weight: 500; }
.regia input:checked + span { border-color: var(--cacao); background: var(--panna); box-shadow: inset 0 0 0 1px var(--cacao); color: var(--cacao); }
.regia label:has(input:focus-visible) span { box-shadow: var(--fuoco); }
.acquisto { display: grid; gap: 20px; align-content: start; padding-inline: var(--gronda); min-width: 0; color: var(--inchiostro); }
.acquisto .briciole { opacity: 1; color: var(--cacao-grigio); flex-wrap: wrap; }
.acquisto__capo { display: grid; gap: 10px; }
.acquisto__nome { color: var(--cacao); font-size: clamp(32px, 3.4vw, 50px); }
.acquisto .sottotitolo { color: var(--cacao); }
.acquisto__bollini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.acquisto__bollini .bollino { box-shadow: inset 0 0 0 1px rgba(46,33,20,.08); }
.acquisto__prezzo { margin: 0; font-family: var(--font-titolo); font-size: 30px; line-height: 36px; color: var(--cacao); font-variant-numeric: tabular-nums; }
.acquisto__prezzo small { font-family: var(--font-testo); font-size: 13px; color: var(--cacao-grigio); letter-spacing: 0; }
.acquisto .testo { max-width: 52ch; }
.acquisto__modulo { display: grid; gap: 18px; padding-top: 4px; }
.formati { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.formati legend { padding: 0; margin-bottom: 10px; font-family: var(--font-titolo); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cacao-grigio); }
.formati label { position: relative; cursor: pointer; }
.formati input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.formati label > span { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-1); background: var(--panna); transition: border-color var(--durata-breve) var(--curva), box-shadow var(--durata-breve) var(--curva); }
.formati b { font-weight: 600; font-size: 15px; color: var(--inchiostro); }
.formati em { font-style: normal; font-family: var(--font-titolo); font-size: 16px; color: var(--cacao); }
.formati label:hover > span { border-color: var(--cacao); }
.formati input:checked + span { border-color: var(--cacao); box-shadow: inset 0 0 0 1px var(--cacao); }
.formati label:has(input:focus-visible) > span { box-shadow: var(--fuoco); }
.acquisto__riga { display: flex; gap: 12px; align-items: stretch; }
.acquisto__bottone { flex: 1; min-width: 0; padding-inline: 18px; }
.quantita { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-pieno); background: var(--panna); }
.quantita button { display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; background: none; color: var(--cacao); cursor: pointer; border-radius: var(--raggio-pieno); }
.quantita button:focus-visible { outline: none; box-shadow: var(--fuoco); }
.quantita output { min-width: 28px; text-align: center; font-family: var(--font-titolo); font-size: 18px; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.quantita--piccola { height: 34px; }
.quantita--piccola button { width: 32px; }
.quantita--piccola .icona { width: 15px; height: 15px; }
.quantita--piccola output { min-width: 22px; font-size: 15px; }
.arrivo-dolce { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--raggio-1); background: var(--fondo-velo); font-size: 14px; line-height: 21px; }
.arrivo-dolce p { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.arrivo-dolce .icona { width: 18px; height: 18px; margin-top: 1px; color: var(--cacao); }
.arrivo-dolce--ritiro { background: var(--esito-ok-velo); color: var(--inchiostro); }
.arrivo-dolce--ritiro .icona { color: var(--adriatico); }
.fisarmonica { border-bottom: 1px solid var(--filo); }
.fisarmonica details { border-top: 1px solid var(--filo); }
.fisarmonica summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; list-style: none; font-family: var(--font-titolo); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--cacao); }
.fisarmonica summary::-webkit-details-marker { display: none; }
.fisarmonica summary::after { content: "+"; font-family: var(--font-testo); font-size: 22px; font-weight: 300; letter-spacing: 0; transition: transform var(--durata-media) var(--curva); }
.fisarmonica details[open] summary::after { transform: rotate(45deg); }
.fisarmonica summary:focus-visible { outline: none; box-shadow: var(--fuoco); }
.fisarmonica details > :not(summary) { margin-bottom: 18px; }
.allergeni { display: grid; gap: 12px; padding: 18px; border-radius: var(--raggio-1); background: var(--fondo-velo); }
.allergeni__ingredienti { margin: 0; font-size: 14px; line-height: 22px; }
.allergeni__ingredienti strong { font-weight: 600; }
.allergeni__elenco { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.allergeni__elenco li { padding: 2px 10px; border-radius: var(--raggio-pieno); background: var(--panna); box-shadow: inset 0 0 0 1px var(--filo-forte); font-size: 13px; line-height: 20px; font-weight: 500; }
.allergeni__nota { margin: 0; font-size: 12px; line-height: 18px; color: var(--cacao-grigio); }
.allergeni__conserva { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 0; font-size: 14px; line-height: 22px; }
.allergeni__conserva .icona { width: 18px; height: 18px; color: var(--cacao); }
@media (min-width: 1000px) {
  .vetrina-dolce { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; padding: calc(var(--alt-testata) + 28px) var(--margine) 88px; align-items: start; }
  .galleria { position: sticky; top: calc(var(--alt-testata) + 20px); }
  .galleria__vista { aspect-ratio: 4 / 3.4; }
  .miniature, .regia { padding-inline: 0; margin-inline: 0; }
  .miniature button { width: 72px; height: 90px; }
  .acquisto { padding: 8px 0 0; }
}

/* ── 2 · LA STORIA ── */
.racconto { display: grid; background: var(--panna); color: var(--cacao); }
.racconto__foto { position: relative; min-height: 64svh; overflow: hidden; }
.racconto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.racconto__testo { display: grid; gap: 18px; align-content: center; padding: 48px var(--gronda) 64px; max-width: 620px; }
.racconto__testo .occhiello { color: var(--cacao-grigio); }
.racconto__testo .testo { color: var(--inchiostro); }
@media (min-width: 1000px) {
  .racconto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .racconto__foto { min-height: min(86svh, 760px); }
  .racconto__testo { padding: 96px var(--margine) 96px 72px; }
}

/* ── 3 · ABBINALO A ── */
.abbina { padding-bottom: 96px; }
@media (min-width: 640px) { .griglia--abbina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .griglia--abbina { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── barra d'acquisto (telefono) ── */
.barra-acquisto { position: fixed; z-index: 92; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gronda) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(251,247,240,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--filo); transform: translateY(110%); visibility: hidden; transition: transform 360ms var(--curva), visibility 0s linear 360ms; }
.barra-acquisto.viva { transform: none; visibility: visible; transition: transform 360ms var(--curva), visibility 0s; }
.barra-acquisto__testo { display: grid; min-width: 0; font-size: 13px; line-height: 18px; color: var(--cacao-grigio); }
.barra-acquisto__testo b { font-family: var(--font-titolo); font-weight: 400; font-size: 16px; color: var(--cacao); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-acquisto .bottone { flex: none; min-height: 46px; padding: 0 18px; }
@media (min-width: 1000px) { .barra-acquisto { display: none; } }
.pagina-scheda .generate { bottom: 84px; }
@media (min-width: 1000px) { .pagina-scheda .generate { bottom: 12px; } }

/* ── SPORTA: carrello a cassetto ── */
.sporta { position: fixed; z-index: 170; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); box-sizing: border-box; padding: calc(16px + env(safe-area-inset-top, 0px)) 24px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--farina); color: var(--inchiostro); display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px; transform: translateX(102%); visibility: hidden; transition: transform 560ms var(--curva), visibility 0s linear 560ms; box-shadow: -24px 0 48px -32px rgba(46,33,20,.5); }
.sporta.vivo { transform: none; visibility: visible; transition: transform 560ms var(--curva), visibility 0s; }
.sporta:focus { outline: none; }
#velario-sporta { z-index: 165; }
.sporta__testa { display: flex; justify-content: space-between; align-items: center; color: var(--cacao); }
.sporta__titolo { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.sporta__titolo span { color: var(--cacao-grigio); font-size: 16px; }
.sporta__consegna { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--raggio-1); background: var(--fondo-velo); font-size: 14px; line-height: 21px; }
.sporta__consegna[hidden] { display: none; }
.sporta__consegna .icona { width: 18px; height: 18px; margin-top: 1px; color: var(--cacao); }
.sporta__consegna b { font-weight: 600; }
.sporta__consegna--ritiro, .sporta__consegna--ok { background: var(--esito-ok-velo); }
.sporta__consegna--ritiro .icona, .sporta__consegna--ok .icona { color: var(--adriatico); }
.soglia-barra { display: block; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--filo-forte); overflow: hidden; }
.soglia-barra i { display: block; height: 100%; background: var(--cacao); transition: width 480ms var(--curva); }
.sporta__righe { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.sporta__righe[hidden] { display: none; }
.riga { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--filo); }
.riga:first-child { padding-top: 4px; }
.riga__foto { width: 72px; height: 90px; background: var(--fondo-velo); display: grid; place-items: center; overflow: hidden; }
.riga__foto img { width: 100%; height: 100%; object-fit: cover; }
.riga__foto svg { width: 40px; fill: var(--cacao); opacity: .4; }
.riga__testo { display: grid; gap: 2px; align-content: start; min-width: 0; }
.riga__testo p { margin: 0; }
.riga__nome { font-family: var(--font-titolo); font-size: 16px; line-height: 22px; color: var(--cacao); }
.riga__nome a { text-decoration: none; } .riga__nome a:hover { text-decoration: underline; text-underline-offset: 4px; }
.riga__formato { font-size: 13px; color: var(--cacao-grigio); }
.riga__consegna { justify-self: start; margin-top: 4px !important; font-family: var(--font-titolo); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--raggio-pieno); background: var(--esito-ok-velo); color: var(--adriatico); }
.riga__consegna--ritiro { background: var(--panna); color: var(--cacao); box-shadow: inset 0 0 0 1px var(--filo-forte); }
.riga__piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.riga__prezzo { font-family: var(--font-titolo); font-size: 16px; color: var(--cacao); font-variant-numeric: tabular-nums; }
.riga__togli { align-self: start; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cacao-grigio); cursor: pointer; }
.riga__togli:hover { color: var(--cacao); background: var(--fondo-velo); }
.riga__togli:focus-visible { outline: none; box-shadow: var(--fuoco); }
.riga__togli .icona { width: 17px; height: 17px; }
.sporta__vuoto { display: grid; justify-items: center; align-content: center; gap: 16px; text-align: center; color: var(--cacao); }
.sporta__vuoto[hidden] { display: none; }
.sporta__onda { width: 104px; fill: var(--sabbia); }
.sporta__piede { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--filo); }
.sporta__piede[hidden] { display: none; }
.sporta__totale { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-titolo); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--cacao); }
.sporta__totale b { font-weight: 400; font-size: 24px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sporta__nota { margin: 0 0 6px; font-size: 13px; color: var(--cacao-grigio); }
.bottone--largo { width: 100%; }
.bottone--testo { border-color: transparent; background: none; min-height: 44px; }
.bottone--testo:hover { text-decoration: underline; text-underline-offset: 5px; }
.avviso { display: flex; align-items: center; gap: 14px; }
.avviso__azione { flex: none; padding: 4px 0; border: 0; background: none; color: var(--sabbia); font-family: var(--font-titolo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.avviso__azione:focus-visible { outline: 2px solid var(--panna); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .galleria__vista > figure { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   CARRELLO · CASSA · CONFERMA
   Componenti del design system (campo, spunta, consegna, fasce) con i token "costa".
   Il layout ricalca quello che FunnelKit sa fare: due colonne, riepilogo
   a destra che resta in vista, sul telefono riepilogo apribile in alto.
   ══════════════════════════════════════════════════════════════════ */
.passi { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 6px 22px; flex-wrap: wrap; font-family: var(--font-titolo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cacao-grigio); }
.passi li, .passi a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.passi b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--filo-forte); font-weight: 400; font-size: 12px; letter-spacing: 0; }
.passi [aria-current="step"] { color: var(--i-blu-notte); }
.passi [aria-current="step"] b { background: var(--i-blu-notte); border-color: var(--i-blu-notte); color: var(--i-crema-chiara); }

/* campi (componente Campo) */
.campi { display: grid; gap: 16px; }
.campi--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo--largo { grid-column: 1 / -1; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo[hidden], .campi[hidden] { display: none; }
.campo__etichetta { margin: 0; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--inchiostro); }
.campo__etichetta span { font-weight: 400; color: var(--cacao-grigio); }
.campo__input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: var(--raggio-1); background: var(--panna); color: var(--inchiostro); font: 400 16px/22px var(--font-testo); transition: border-color var(--durata-breve) var(--curva), box-shadow var(--durata-breve) var(--curva); }
select.campo__input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--i-blu-notte) 50%), linear-gradient(135deg, var(--i-blu-notte) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
textarea.campo__input { resize: vertical; min-height: 88px; }
.campo__input::placeholder { color: var(--cacao-grigio); opacity: .8; }
.campo__input:hover { border-color: var(--i-blu-notte); }
.campo__input:focus { outline: none; border-color: var(--i-blu-notte); box-shadow: var(--fuoco); }
.campo__aiuto { margin: 0; font-size: 13px; line-height: 19px; color: var(--cacao-grigio); }
.campo__errore { display: none; margin: 0; font-size: 13px; line-height: 19px; font-weight: 500; color: #A3372A; }
.campo--errore .campo__input { border-color: #A3372A; box-shadow: inset 0 0 0 1px #A3372A; }
.campo--errore .campo__errore, .campo__errore--blocco.vivo { display: block; }
.spunta { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 23px; cursor: pointer; color: var(--inchiostro); }
.spunta input { appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; border: 1px solid var(--bordo); border-radius: var(--raggio-1); background: var(--panna); display: grid; place-content: center; cursor: pointer; }
.spunta input::after { content: ""; width: 12px; height: 7px; border: 2px solid var(--i-crema-chiara); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.spunta input:checked { background: var(--i-blu-notte); border-color: var(--i-blu-notte); }
.spunta input:checked::after { opacity: 1; }
.spunta input:focus-visible { outline: none; box-shadow: var(--fuoco); }
.spunta a { color: var(--i-blu-notte); }

/* scelta consegna e fasce (componenti del design system) */
.consegna { border: 0; margin: 0; padding: 0; min-width: 0; }
.consegna legend { padding: 0; margin-bottom: 12px; font-family: var(--font-titolo); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cacao-grigio); }
.consegna__scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.consegna__scelta { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 16px; border: 1px solid var(--bordo); border-radius: var(--raggio-1); background: var(--panna); cursor: pointer; transition: border-color var(--durata-breve) var(--curva), box-shadow var(--durata-breve) var(--curva), opacity var(--durata-breve) var(--curva); }
.consegna__scelta input { position: absolute; opacity: 0; pointer-events: none; }
.consegna__scelta .icona { grid-row: span 2; width: 24px; height: 24px; color: var(--i-blu-notte); margin-top: 2px; }
.consegna__titolo { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--inchiostro); }
.consegna__dettaglio { font-size: 14px; line-height: 20px; color: var(--cacao-grigio); }
.consegna__scelta:has(input:checked) { border-color: var(--i-blu-notte); box-shadow: inset 0 0 0 1px var(--i-blu-notte); }
.consegna__scelta:has(input:focus-visible) { box-shadow: var(--fuoco); }
.consegna__scelta.disattiva { opacity: .5; cursor: not-allowed; background: transparent; border-style: dashed; }
.avviso-ritiro { display: grid; grid-template-columns: 20px 1fr; gap: 12px; margin: 14px 0 0; padding: 14px 16px; border-radius: var(--raggio-1); background: var(--esito-ok-velo); font-size: 14px; line-height: 21px; }
.avviso-ritiro[hidden] { display: none; }
.avviso-ritiro .icona { width: 18px; height: 18px; color: var(--adriatico); margin-top: 1px; }
.blocco { margin-top: 20px; }
.blocco[hidden] { display: none; }
.fasce { display: grid; gap: 12px; margin-top: 18px; }
.fasce__giorni { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.fasce__giorni::-webkit-scrollbar { display: none; }
.fasce__giorno { flex: none; display: grid; justify-items: center; min-width: 62px; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio-1); background: var(--panna); color: var(--inchiostro); font: 500 12px/16px var(--font-testo); text-transform: capitalize; cursor: pointer; }
.fasce__giorno b { font-family: var(--font-titolo); font-weight: 400; font-size: 22px; line-height: 28px; }
.fasce__giorno[aria-pressed="true"] { background: var(--i-blu-notte); border-color: var(--i-blu-notte); color: var(--i-crema-chiara); }
.fasce__giorno:focus-visible { outline: none; box-shadow: var(--fuoco); }
.fasce__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.fascia { position: relative; display: grid; justify-items: center; padding: 10px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio-1); background: var(--panna); cursor: pointer; text-align: center; }
.fascia input { position: absolute; opacity: 0; pointer-events: none; }
.fascia__ora { font-family: var(--font-titolo); font-size: 16px; line-height: 22px; color: var(--inchiostro); white-space: nowrap; }
.fascia__posti { font-size: 12px; line-height: 16px; color: var(--cacao-grigio); }
.fascia--ultimo .fascia__posti { color: #855400; font-weight: 600; }
.fascia:has(input:checked) { background: var(--i-blu-notte); border-color: var(--i-blu-notte); }
.fascia:has(input:checked) .fascia__ora, .fascia:has(input:checked) .fascia__posti { color: var(--i-crema-chiara); }
.fascia:has(input:focus-visible) { box-shadow: var(--fuoco); }
.fascia:has(input:disabled) { cursor: not-allowed; background: transparent; border-style: dashed; }
.fascia:has(input:disabled) .fascia__ora { color: var(--cacao-grigio); text-decoration: line-through; }

/* conti */
.conti { margin: 0; display: grid; gap: 10px; font-size: 15px; }
.conti > div { display: flex; justify-content: space-between; gap: 16px; }
.conti dt { color: var(--inchiostro); } .conti dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--inchiostro); text-align: right; }
.conti__sconto dd, .conti__sconto dt { color: var(--adriatico); }
.conti__togli { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--cacao-grigio); font-size: 13px; text-decoration: underline; cursor: pointer; }
.conti__totale { padding-top: 12px; border-top: 1px solid var(--filo); align-items: baseline; }
.conti__totale dt { font-family: var(--font-titolo); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--i-blu-notte); }
.conti__totale dd { font-family: var(--font-titolo); font-size: 26px; color: var(--i-blu-notte); }
.conti__iva dt, .conti__iva dd { font-size: 13px; color: var(--cacao-grigio); }

/* ── CARRELLO ── */
.pagina-carrello { padding: calc(var(--alt-testata) + 28px) var(--margine) 56px; }
.pagina-carrello > .titolo { color: var(--cacao); margin-bottom: 28px; }
.carrello-pagina { display: grid; gap: 32px; }
.carrello-pagina__righe { display: grid; gap: 18px; align-content: start; min-width: 0; }
.righe-grandi { list-style: none; margin: 0; padding: 0; }
.righe-grandi[hidden] { display: none; }
.riga--grande { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 20px 0; }
.riga--grande .riga__foto { width: 96px; height: 120px; }
.riga--grande .riga__nome { font-size: 19px; line-height: 26px; }
.riga--grande .riga__prezzo { font-size: 19px; }
.cp-vuoto { display: grid; justify-items: start; gap: 16px; padding: 24px 0; color: var(--cacao); }
.cp-vuoto[hidden] { display: none; }
.riepilogo { display: grid; gap: 18px; align-content: start; padding: 24px; border-radius: var(--raggio-1); background: var(--panna); box-shadow: inset 0 0 0 1px var(--filo); }
.riepilogo[hidden] { display: none; }
.riepilogo__titolo { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--i-blu-notte); }
.codice__riga { display: flex; gap: 8px; }
.codice__riga .campo__input { min-width: 0; text-transform: uppercase; }
.codice[hidden] { display: none; }
.riepilogo__pagamenti { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--cacao-grigio); }
.riepilogo__pagamenti .icona { width: 15px; height: 15px; }
.sporta__link { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 10px; }
@media (min-width: 900px) {
  .carrello-pagina { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 56px; align-items: start; }
  .carrello-pagina .riepilogo { position: sticky; top: calc(var(--alt-testata) + 20px); }
}

/* ── CASSA ── */
.testata--cassa { position: sticky; background: rgba(244,239,232,.96); }
.testata--cassa .testata__barra { grid-template-columns: 1fr auto 1fr; }
.cassa__indietro, .cassa__sicuro { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cacao-grigio); text-decoration: none; }
.cassa__indietro:hover span { text-decoration: underline; text-underline-offset: 4px; }
.cassa__sicuro { justify-self: end; }
.cassa__sicuro .icona { color: var(--adriatico); width: 16px; height: 16px; }
@media (max-width: 520px) { .cassa__indietro span, .cassa__sicuro span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cassa__indietro, .cassa__sicuro { min-width: 44px; min-height: 44px; } .cassa__sicuro { justify-content: flex-end; } }
.cassa { padding: 24px var(--gronda) 64px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; }
.cassa__titolo { color: var(--cacao); font-size: clamp(28px, 3vw, 42px); }
.cassa__griglia { display: grid; gap: 28px; }
.cassa__modulo { display: grid; gap: 28px; min-width: 0; }
.cassa__vuota { display: grid; gap: 14px; justify-items: start; }
.cassa__vuota[hidden] { display: none; }
.pagamento-rapido { display: grid; gap: 12px; }
.pagamento-rapido[hidden], .passo[hidden] { display: none; }
.pagamento-rapido__titolo { margin: 0; font-family: var(--font-titolo); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cacao-grigio); text-align: center; }
.pagamento-rapido__tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tasto-pagamento { min-height: 48px; border: 0; border-radius: 8px; background: #111; color: #fff; font: 500 14px/1 var(--font-testo); cursor: pointer; }
.tasto-pagamento span { font-weight: 600; margin-right: 2px; }
.tasto-pagamento--google { background: #fff; color: #111; box-shadow: inset 0 0 0 1px #BDB6AC; }
.tasto-pagamento:focus-visible { outline: none; box-shadow: var(--fuoco); }
.separatore { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font-size: 13px; color: var(--cacao-grigio); }
.separatore::before, .separatore::after { content: ""; flex: 1; height: 1px; background: var(--filo-forte); }
.cassa__errori { padding: 14px 16px; border-radius: var(--raggio-1); background: #F6E1DC; color: #7E2A20; font-weight: 500; font-size: 15px; }
.cassa__errori[hidden] { display: none; }
.passo { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--filo); }
.passo__titolo { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--font-titolo); font-weight: 400; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--i-blu-notte); }
.passo__titolo span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--i-blu-notte); color: var(--i-crema-chiara); font-size: 14px; letter-spacing: 0; }
.passo__titolo small { font-family: var(--font-testo); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--cacao-grigio); }
.metodi .consegna__scelte { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stripe-finto { display: grid; gap: 8px; }
.stripe-finto__riga { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-1); background: rgba(251,247,240,.6); font-size: 15px; color: var(--cacao-grigio); }
.stripe-finto__riga i { width: 22px; height: 15px; border-radius: 3px; background: linear-gradient(135deg, #DCE3E6, #B9C6CC); }
.stripe-finto__riga--due { display: grid; grid-template-columns: 1fr 1fr; padding: 0; border: 0; background: none; gap: 8px; }
.stripe-finto__riga--due > span { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-1); background: rgba(251,247,240,.6); }
.cassa__paga { min-height: 54px; font-size: 15px; }
.cassa__paga[disabled] { opacity: .7; cursor: progress; }
.cassa__nota { margin: -6px 0 0; text-align: center; font-size: 13px; color: var(--cacao-grigio); }
.cassa__apri-riepilogo { display: flex; width: calc(100% + 2 * var(--gronda)); margin: 0 calc(-1 * var(--gronda)) 20px; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 var(--gronda); border: 0; border-block: 1px solid var(--filo); background: var(--panna); color: var(--i-blu-notte); font: 500 15px/1 var(--font-testo); cursor: pointer; }
.cassa__apri-riepilogo > span { display: inline-flex; align-items: center; gap: 8px; }
.cassa__apri-riepilogo b { font-family: var(--font-titolo); font-weight: 400; font-size: 20px; }
.cassa__apri-riepilogo .freccia-giu { width: 16px; height: 16px; transition: transform var(--durata-media) var(--curva); }
.cassa__apri-riepilogo[aria-expanded="true"] .freccia-giu { transform: rotate(180deg); }
.cassa__apri-riepilogo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--i-blu-notte); }
.riepilogo--cassa { display: none; }
.riepilogo--cassa.aperto { display: grid; order: -1; }
.righe-piccole { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.righe-piccole li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.righe-piccole__foto { position: relative; width: 56px; height: 70px; background: var(--fondo-velo); border-radius: var(--raggio-1); }
.righe-piccole__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raggio-1); }
.righe-piccole__foto b { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--i-blu-notte); color: var(--i-crema-chiara); font: 600 11px/20px var(--font-testo); text-align: center; }
.righe-piccole__testo { display: grid; min-width: 0; font-size: 15px; line-height: 21px; }
.righe-piccole__testo small { font-size: 13px; color: var(--cacao-grigio); }
.righe-piccole__prezzo { font-variant-numeric: tabular-nums; font-size: 15px; }
.riepilogo__modifica { justify-self: start; font-size: 13px; color: var(--i-blu-notte); }
@media (max-width: 899px) { .cassa__griglia { display: flex; flex-direction: column; } }
@media (min-width: 900px) {
  .cassa { padding: 28px var(--gronda) 88px; }
  .cassa__apri-riepilogo { display: none; }
  .cassa__griglia { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 56px; align-items: start; }
  .riepilogo--cassa { display: grid; position: sticky; top: calc(var(--alt-testata) + 20px); }
}
@media (max-width: 520px) { .campi--due { grid-template-columns: 1fr; } .pagamento-rapido__tasti { grid-template-columns: 1fr; } }
.piede-cassa { padding: 24px var(--gronda) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--filo); text-align: center; font-size: 12px; line-height: 20px; color: var(--cacao-grigio); }
.piede-cassa p { margin: 0; }
.piede-cassa a { color: inherit; }

/* ── CONFERMA ── */
.grazie { display: grid; }
.grazie__disegno { position: relative; height: clamp(180px, 30svh, 300px); background: var(--i-crema); }
.grazie__disegno svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grazie__corpo { width: min(720px, 100%); box-sizing: border-box; margin: 0 auto; padding: 36px var(--gronda) 72px; display: grid; gap: 18px; }
.grazie__corpo > div { display: grid; gap: 18px; }
.grazie__corpo > div[hidden] { display: none; }
.grazie .titolo { color: var(--i-blu-notte); }
.grazie .occhiello { color: var(--cacao-grigio); }
.grazie__box { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 18px; border-radius: var(--raggio-1); background: var(--esito-ok-velo); font-size: 15px; line-height: 23px; }
.grazie__box .icona { width: 20px; height: 20px; color: var(--adriatico); margin-top: 2px; }
.grazie__regalo { grid-column: 2; margin: 4px 0 0; display: flex; gap: 8px; align-items: center; font-style: italic; }
.grazie__regalo .icona { width: 16px; height: 16px; margin: 0; }
.grazie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.grazie .righe-piccole { padding: 18px 0; border-block: 1px solid var(--filo); }

/* ══════════════════════════════════════════════════════════════════
   PASSAGGIO "COSTA" (01/10 sera) — via il marrone dove si può, colori
   presi dall'illustrazione interna Iezzi, accanto agli ufficiali.
   Tutto in questo file: si applica alle altre pagine o si toglie in un colpo.
   Il cacao resta per il logo e per i titoli; le superfici e i bottoni
   pieni passano al blu notte dell'illustrazione.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --i-crema: #F1E2D5; --i-crema-chiara: #F8ECD1; --i-terracotta: #C4543C; --i-mattone: #923F31;
  --i-blu-notte: #26435F; --i-blu-mare: #557590; --i-sabbia: #DDC7B1; --i-oliva: #8A7A5C;
  --i-sole: #FCCB52; --i-foglia: #5E6C52; --i-uva: #4B4262; --i-notte-alto: #1C3149; --i-notte-mare: #1E3550;
  --marca: var(--i-blu-notte); --su-marca: var(--i-crema-chiara);
  --fuoco: 0 0 0 2px var(--farina), 0 0 0 4px var(--i-blu-notte);
}
:focus-visible { outline-color: var(--i-blu-notte); }
.salta, .avviso, .carrello__conta, .bollino--stagione, .interruttore input:checked + span, .soglia-barra i { background: var(--i-blu-notte); }
.bottone--pieno:hover { background: var(--i-notte-alto); border-color: var(--i-notte-alto); }
.cassetto { background: var(--i-blu-notte); }
.cassetto nav a:hover { color: var(--i-sole); }
.avviso__azione { color: var(--i-sole); }
.testata.su-foto:not(.solida) .carrello__conta { background: var(--i-crema-chiara); color: var(--i-blu-notte); }

/* ── HEADER ILLUSTRATO DELLO SHOP ── */
.soglia--illustrata { background: var(--i-crema); color: var(--i-blu-notte); min-height: 0; display: grid; grid-template-rows: auto auto; }
.soglia--illustrata .soglia__testo { position: relative; z-index: 2; align-content: start; padding: calc(var(--alt-testata) + 20px) var(--gronda) 18px; max-width: 640px; gap: 14px; }
.soglia--illustrata .titolo { color: var(--i-blu-notte); }
.soglia--illustrata .testo { color: var(--inchiostro); opacity: 1; }
.soglia--illustrata .briciole { color: var(--i-blu-notte); opacity: .75; }
.soglia--illustrata .promesse { border-top-color: rgba(38,67,95,.18); }
.soglia--illustrata .promesse .icona { color: var(--i-terracotta); }
.soglia__disegno { position: relative; height: clamp(220px, 44svh, 420px); order: 2; }
.soglia__disegno svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 1000px) {
  .soglia--illustrata { display: block; position: relative; min-height: clamp(600px, 86svh, 820px); }
  .soglia--illustrata .soglia__disegno { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; }
  .soglia--illustrata .soglia__testo { padding: calc(var(--alt-testata) + 36px) 0 0 var(--margine); max-width: 660px; }
}
@media (max-width: 999px) and (orientation: landscape) {
  .soglia__disegno { height: clamp(200px, 62svh, 360px); }
}

/* ── VETRINA DI STAGIONE: NATALE (blu notte, niente cacao) ── */
.stagione--natale { background: var(--i-blu-notte); color: var(--i-crema-chiara); padding: 0; }
.stagione__scena { position: relative; display: grid; min-height: clamp(520px, 78svh, 640px); overflow: hidden; }
.stagione__disegno { position: absolute; inset: 0; }
.stagione__scena .illustrazione { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 639px) and (orientation: portrait) {
  .stagione__scena { min-height: 0; background: var(--i-notte-alto); }
  .stagione__disegno { position: relative; aspect-ratio: 1 / 1.02; margin-top: 8px; }
  .stagione__testo { padding-top: 48px; }
}
.stagione__testo { position: relative; z-index: 2; align-self: start; display: grid; gap: 14px; padding: 56px var(--gronda) 0; max-width: 560px; }
.stagione--natale .occhiello { color: var(--i-sole); }
.stagione--natale .titolo { color: var(--i-crema-chiara); }
.stagione--natale .sottotitolo { color: var(--i-crema-chiara); opacity: .9; }
.stagione__corpo { display: grid; gap: 48px; padding: 40px var(--gronda) 80px; }
.stagione__intro { display: grid; gap: 18px; justify-items: start; }
.stagione__intro .testo { max-width: 62ch; color: var(--i-crema-chiara); opacity: .92; }
.stagione--natale .link-lungo { color: var(--i-crema-chiara); }
.stagione--natale .stagione__fila { padding: 0 var(--gronda); margin-inline: calc(-1 * var(--gronda)); scroll-padding-inline: var(--gronda); }
.stagione--natale .dolce, .stagione--natale .dolce__nome, .stagione--natale .dolce__prezzo { color: var(--i-crema-chiara); }
.stagione--natale .dolce__linea, .stagione--natale .dolce__nota { color: var(--i-sabbia); }
.stagione--natale .bottone--pieno { background: var(--i-crema-chiara); border-color: var(--i-crema-chiara); color: var(--i-blu-notte); }
.stagione--natale .bottone--pieno:hover { background: var(--i-sole); border-color: var(--i-sole); }
.stagione--natale .bottone.preso { background: var(--i-sole); border-color: var(--i-sole); color: var(--i-blu-notte); }
.stagione--natale :focus-visible { outline-color: var(--i-sole); }
.novena { display: grid; gap: 24px; padding-top: 32px; border-top: 1px solid rgba(248,236,209,.22); }
.novena__testa { display: grid; gap: 10px; max-width: 520px; }
.novena__titolo { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: .04em; text-transform: uppercase; color: var(--i-crema-chiara); }
.novena__testa .testo { color: var(--i-crema-chiara); opacity: .88; }
.novena__giorni { list-style: none; margin: 0 calc(-1 * var(--gronda)); padding: 0 var(--gronda); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.novena__giorni::-webkit-scrollbar { display: none; }
.novena__giorni li { scroll-snap-align: start; display: grid; gap: 4px; align-content: start; padding: 14px 12px 16px; border: 1px solid rgba(248,236,209,.2); border-radius: var(--raggio-1); background: rgba(248,236,209,.04); }
.novena__giorni b { font-family: var(--font-titolo); font-weight: 300; font-size: 34px; line-height: 1; color: var(--i-sole); font-variant-numeric: tabular-nums; }
.novena__giorni span { font-family: var(--font-titolo); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--i-sabbia); }
.novena__giorni em { font-style: normal; font-size: 14px; line-height: 19px; color: var(--i-crema-chiara); }
.novena__giorni li:last-child { background: rgba(252,203,82,.12); border-color: rgba(252,203,82,.45); }
.date-natale { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.date-natale li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; line-height: 23px; color: var(--i-crema-chiara); }
.date-natale .icona { width: 20px; height: 20px; color: var(--i-sole); margin-top: 1px; }
.date-natale b { display: block; font-family: var(--font-titolo); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.stagione__nota { margin: 0; font-size: 12px; color: var(--i-sabbia); }
@media (min-width: 1000px) {
  .stagione__scena { min-height: clamp(520px, 66svh, 620px); }
  .stagione__testo { padding: 72px 0 0 var(--margine); }
  .stagione__corpo { padding: 56px var(--margine) 104px; gap: 56px; }
  .stagione__intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
  .stagione--natale .stagione__fila { padding: 0; margin: 0; }
  .novena { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 40px; }
  .novena__giorni { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .date-natale { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 1280px) { .novena__giorni { grid-template-columns: repeat(9, minmax(0, 1fr)); } .novena { grid-template-columns: 1fr; } .novena__testa { max-width: 640px; } }

/* ── SCHEDA: fondali, luce del mare, lastre, dolce in profondità ── */
@property --m-cielo-alto { syntax: '<color>'; inherits: true; initial-value: #F4EFE8; }
@property --m-cielo-basso { syntax: '<color>'; inherits: true; initial-value: #F2D2B6; }
@property --m-sole { syntax: '<color>'; inherits: true; initial-value: #E99A6E; }
@property --m-mare1 { syntax: '<color>'; inherits: true; initial-value: #B3CDCB; }
@property --m-mare2 { syntax: '<color>'; inherits: true; initial-value: #6E9C9F; }
@property --m-mare3 { syntax: '<color>'; inherits: true; initial-value: #1D5C6B; }
@property --m-mare4 { syntax: '<color>'; inherits: true; initial-value: #174955; }
@property --m-tratto { syntax: '<color>'; inherits: true; initial-value: #3F4A4C; }
@property --m-sabbia { syntax: '<color>'; inherits: true; initial-value: #E3CDB1; }
@property --m-schiuma { syntax: '<color>'; inherits: true; initial-value: #F2E9DF; }
@property --m-stelle { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --m-luci { syntax: '<number>'; inherits: true; initial-value: 0; }
.palco { --m-stella: #F8ECD1; --m-luce: #FCCB52; perspective: 1200px;
  transition: --m-cielo-alto 2.4s var(--curva), --m-cielo-basso 2.4s var(--curva), --m-sole 2.4s var(--curva), --m-mare1 2.4s var(--curva), --m-mare2 2.4s var(--curva), --m-mare3 2.4s var(--curva), --m-mare4 2.4s var(--curva), --m-tratto 2.4s var(--curva), --m-sabbia 2.4s var(--curva), --m-schiuma 2.4s var(--curva), --m-stelle 2.4s var(--curva), --m-luci 2.4s var(--curva); }
.palco[data-luce-attiva="alba"] { --m-cielo-alto: #F4E6E0; --m-cielo-basso: #F2C6B4; --m-sole: #F4A98C; --m-mare1: #C6D7D8; --m-mare2: #9AB5BD; --m-mare3: #6E8FA6; --m-mare4: #4B6B85; --m-tratto: #4B4A55; --m-sabbia: #EBD8C7; --m-schiuma: #F5ECE6; --m-stelle: .15; --m-luci: 0; }
.palco[data-luce-attiva="giorno"] { --m-cielo-alto: #E3EDEF; --m-cielo-basso: #F3EBDD; --m-sole: #FCCB52; --m-mare1: #A9CBD0; --m-mare2: #6E9CAB; --m-mare3: #3F6F8C; --m-mare4: #26435F; --m-tratto: #3F4A4C; --m-sabbia: #E9D9C0; --m-schiuma: #FFFFFF; --m-stelle: 0; --m-luci: 0; }
.palco[data-luce-attiva="tramonto"] { --m-cielo-alto: #F4EFE8; --m-cielo-basso: #F2D2B6; --m-sole: #E99A6E; --m-mare1: #B3CDCB; --m-mare2: #6E9C9F; --m-mare3: #1D5C6B; --m-mare4: #174955; --m-tratto: #3F4A4C; --m-sabbia: #E3CDB1; --m-schiuma: #F2E9DF; --m-stelle: 0; --m-luci: .25; }
.palco[data-luce-attiva="sera"] { --m-cielo-alto: #1C3149; --m-cielo-basso: #3B5A78; --m-sole: #F8ECD1; --m-mare1: #4A6D86; --m-mare2: #36587A; --m-mare3: #26435F; --m-mare4: #1A3049; --m-tratto: #DCCBB8; --m-sabbia: #A99780; --m-schiuma: #C9D3D6; --m-stelle: 1; --m-luci: 1; }

/* quale fondale si vede */
.palco .fondale-svg { display: none; }
.palco[data-fondale="trama"] .fondale-svg--trama, .palco[data-fondale="incisione"] .fondale-svg--incisione,
.palco[data-fondale="marea"] .fondale-svg--marea, .palco[data-fondale="schizzo"] .fondale-svg--schizzo { display: block; }
.palco[data-fondale="schizzo"] { --fondale-fondo: #F6EFE4; --fondale-tratto: #24364A; }
.schizzo-firma { font-family: var(--font-titolo); font-weight: 300; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; fill: var(--fondale-tratto); opacity: .55; }
.schizzo-tratti.disegna path, .schizzo-tratti.disegna polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: disegna 1.5s var(--curva) forwards; }
@keyframes disegna { to { stroke-dashoffset: 0; } }

/* profondità: gli strati del fondale si spostano a velocità diverse */
.palco .strato { transition: none; }
.palco .strato--1 { transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px)); }
.palco .strato--2 { transform: translate(calc(var(--px, 0) * -20px), calc(var(--py, 0) * -8px)); }
.palco .strato--3 { transform: translateX(calc(var(--px, 0) * -28px)); }
.palco .strato--4 { transform: translateX(calc(var(--px, 0) * -36px)); }
.palco .strato--5 { transform: translateX(calc(var(--px, 0) * -44px)); }
.palco .strato--6 { transform: translateX(calc(var(--px, 0) * -52px)); }
.palco .strato--7 { transform: translate(calc(var(--px, 0) * -60px), calc(var(--py, 0) * 4px)); }
.palco .fondale-svg--trama, .palco .fondale-svg--incisione, .palco .fondale-svg--schizzo { transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px)) scale(1.05); }

/* lastre colorate, alla maniera delle lastre di plexiglas (colori dell'illustrazione) */
.lastre { position: absolute; inset: 0; display: none; overflow: hidden; background: var(--l-fondo); }
.palco[data-fondale="lastre"] .lastre { display: block; }
.lastra { position: absolute; display: block; border-radius: 2px; box-shadow: 0 34px 60px -34px rgba(46,33,20,.4), inset 0 0 0 1px rgba(255,255,255,.4); overflow: hidden; }
.lastra::after { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(255,255,255,.38), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.18)); }
.lastra--1 { left: 4%; top: 12%; width: 64%; height: 72%; background: linear-gradient(135deg, var(--l1a), var(--l1b)); opacity: .9; transform: rotate(-9deg) translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px)); }
.lastra--2 { left: 36%; top: 4%; width: 58%; height: 64%; background: linear-gradient(160deg, var(--l2a), var(--l2b)); opacity: .66; mix-blend-mode: multiply; transform: rotate(13deg) translate(calc(var(--px, 0) * -20px), calc(var(--py, 0) * -10px)); }
.lastra--3 { left: 18%; top: 50%; width: 62%; height: 46%; background: linear-gradient(120deg, var(--l3a), var(--l3b)); opacity: .5; mix-blend-mode: multiply; transform: rotate(-22deg) translate(calc(var(--px, 0) * -30px), calc(var(--py, 0) * -12px)); }
.palco[data-lastre="terracotta"] { --l-fondo: #F6EEE8; --l1a: #F3BCA8; --l1b: #DB7A61; --l2a: #F8D7C2; --l2b: #EBA486; --l3a: #C4543C; --l3b: #E6927A; }
.palco[data-lastre="sole"] { --l-fondo: #FBF4E6; --l1a: #FDDD82; --l1b: #F6B13C; --l2a: #FFEBB0; --l2b: #F9C74F; --l3a: #F0A136; --l3b: #FCCB52; }
.palco[data-lastre="mare"] { --l-fondo: #EEF2F2; --l1a: #BCD0DB; --l1b: #6F8FA8; --l2a: #D6E3E7; --l2b: #9DB6C4; --l3a: #557590; --l3b: #8AA7BB; }
.palco[data-lastre="oliva"] { --l-fondo: #F3F1E6; --l1a: #D3CF9E; --l1b: #A39F62; --l2a: #E4DFB8; --l2b: #BDB57E; --l3a: #8A7A5C; --l3b: #B6A97E; }

/* il dolce in profondità: ruota col mouse, prende la luce, l'ombra lo segue */
.dolce3d { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%) rotateY(calc(var(--px, 0) * 16deg)) rotateX(calc(var(--py, 0) * -7deg)); transform-style: preserve-3d; will-change: transform; }
.dolce3d--alta { height: 64%; bottom: 13%; }
.dolce3d--alta .dolce3d__img { height: 100%; width: auto; }
.dolce3d--larga { width: 64%; bottom: 13%; }
.dolce3d--larga .dolce3d__img { width: 100%; height: auto; }
.dolce3d__img { display: block; max-width: none; filter: drop-shadow(calc(var(--px, 0) * -12px) 22px 20px rgba(46,33,20,.26)); }
.dolce3d__luce { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.62) 46%, rgba(255,255,255,0) 60%); background-size: 280% 100%; background-position: calc(50% - var(--px, 0) * 46%) 0; mix-blend-mode: screen; opacity: .7; }
.palco__ombra { transform: translateX(calc(-50% + var(--px, 0) * -18px)) scaleX(calc(1 - var(--px, 0) * var(--px, 0) * .12)); }
.palco__pausa[hidden] { display: grid; }
.palco.fermo .dolce3d__luce { opacity: .45; }

/* pannello dei fondali (solo mockup) */
.regia { display: grid; gap: 12px; margin: 4px var(--gronda) 0; padding: 14px 14px 12px; border: 1px dashed var(--filo-forte); border-radius: var(--raggio-1); }
.regia__fila { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.regia__fila[hidden] { display: none; }
.regia__fila legend { width: 100%; margin-bottom: 8px; padding: 0; font-family: var(--font-titolo); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--i-blu-notte); }
.regia__fila legend span { color: var(--cacao-grigio); }
.regia input:checked + span { border-color: var(--i-blu-notte); box-shadow: inset 0 0 0 1px var(--i-blu-notte); color: var(--i-blu-notte); }
.regia__sotto { padding-top: 10px; border-top: 1px solid var(--filo) !important; }
.regia__sotto label span { height: 32px; padding: 0 12px; font-size: 13px; }
.tinta { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.tinta--terracotta { background: linear-gradient(135deg, #F3BCA8, #C4543C); }
.tinta--sole { background: linear-gradient(135deg, #FDDD82, #F0A136); }
.tinta--mare { background: linear-gradient(135deg, #BCD0DB, #557590); }
.tinta--oliva { background: linear-gradient(135deg, #D3CF9E, #8A7A5C); }
.regia__aiuto { margin: 0; font-size: 12px; line-height: 18px; color: var(--cacao-grigio); }
@media (min-width: 1000px) { .regia { margin-inline: 0; } }

/* telefono e tablet in orizzontale: la scheda va su due colonne */
@media (max-width: 999px) and (orientation: landscape) {
  .vetrina-dolce { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: calc(var(--alt-testata) + 12px) var(--gronda) 48px; align-items: start; }
  .galleria { position: sticky; top: calc(var(--alt-testata) + 8px); }
  .galleria__vista { aspect-ratio: 4 / 3.4; }
  .miniature, .regia { padding-inline: 0; margin-inline: 0; }
  .acquisto { padding: 0; }
}
@media (min-width: 640px) and (max-width: 999px) and (orientation: portrait) {
  .galleria__vista { aspect-ratio: 4 / 3.6; }
}
@media (prefers-reduced-motion: reduce) {
  .dolce3d { transform: translateX(-50%); }
  .palco .strato, .palco .fondale-svg, .lastra { transform: none !important; }
  .lastra--1 { transform: rotate(-9deg) !important; } .lastra--2 { transform: rotate(13deg) !important; } .lastra--3 { transform: rotate(-22deg) !important; }
  .palco { transition: none; }
}

/* testata fra 1000 e 1279 px (tablet orizzontale, portatili piccoli): voci senza icone, più strette */
.testata__voci a { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1279px) {
  .testata__voci { gap: 16px; }
  .testata__voci a { font-size: 11px; letter-spacing: .1em; }
  .testata__voci a .icona { display: none; }
  .testata__marchio svg { width: 140px; }
}
/* il bottone d'acquisto non va mai su tre righe */
.acquisto__riga { flex-wrap: wrap; }
.acquisto__bottone { flex: 1 1 230px; white-space: nowrap; }
/* sul telefono l'etichetta del mockup resta solo nel fondale, per non coprire i contenuti */
@media (max-width: 639px) { .generate { display: none; } }

/* ══ LASTRE v2 (01/10 notte): movimento ben visibile + forme di stagione ══
   Ogni lastra ha la sua rotazione (--r), la sua profondità (--d, in px) e quanto ruota col mouse (--rr).
   Più è profonda, più si sposta: così dolce e lastre stanno su piani diversi. */
.palco .lastre { filter: drop-shadow(0 26px 30px rgba(46,33,20,.22)); }
.palco .lastra { --r: 0deg; --d: 30; --rr: 2; box-shadow: none;
  transform: translate(calc(var(--px, 0) * var(--d) * -1px), calc(var(--py, 0) * var(--d) * -.6px)) rotate(calc(var(--r) + var(--px, 0) * var(--rr) * 1deg)); }
.palco .lastra--0, .palco .lastra--4 { display: none; }
.palco .lastra--1 { --r: -9deg; --d: 34; --rr: 2; }
.palco .lastra--2 { --r: 13deg; --d: 62; --rr: -3; }
.palco .lastra--3 { --r: -22deg; --d: 96; --rr: 4; }
/* il dolce: si sposta, gira e si solleva quando ci passi sopra */
.palco .dolce3d { transform: translate(calc(-50% + var(--px, 0) * 26px), calc(var(--py, 0) * 14px)) rotateY(calc(var(--px, 0) * 24deg)) rotateX(calc(var(--py, 0) * -10deg)); }
.palco .dolce3d__img { transition: transform 520ms var(--curva), filter 520ms var(--curva); filter: drop-shadow(calc(var(--px, 0) * -18px) 24px 22px rgba(46,33,20,.28)); }
.palco.sopra .dolce3d__img { transform: translateY(-10px) scale(1.045); filter: drop-shadow(calc(var(--px, 0) * -24px) 36px 28px rgba(46,33,20,.3)); }
.palco.sopra .dolce3d__luce { opacity: .95; }
.palco .palco__ombra { transition: width 520ms var(--curva), opacity 520ms var(--curva); transform: translateX(calc(-50% + var(--px, 0) * -34px)) scaleX(calc(1 - var(--px, 0) * var(--px, 0) * .16)); }
.palco.sopra .palco__ombra { opacity: .7; }
.galleria__vista { cursor: grab; touch-action: pan-y; }

/* velluto: fibre sottili + un lucido che si sposta col mouse, come il velluto vero */
.palco .lastra.velluto, .palco[data-stagione]:not([data-stagione="nessuna"]) .lastra {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 70% 55% at calc(35% + var(--px, 0) * 30%) calc(25% + var(--py, 0) * 20%), rgba(255,255,255,.28), rgba(255,255,255,0) 60%), linear-gradient(var(--ang, 160deg), var(--c1), var(--c2));
  background-size: 180px 180px, 100% 100%, 100% 100%; }
.palco[data-stagione]:not([data-stagione="nessuna"]) .lastra::after { display: none; }

/* NATALE: tre lastre di velluto verde a forma d'albero, la stella d'oro, un velluto rosso dietro */
.palco[data-stagione="natale"] .lastre { background: radial-gradient(ellipse at 50% 30%, #FBF4EA, #F1E2D5); }
.palco[data-stagione="natale"] .lastra { opacity: 1; mix-blend-mode: normal; border-radius: 0; }
.palco[data-stagione="natale"] .lastra--0 { display: block; left: 8%; top: 18%; width: 84%; height: 70%; --r: 6deg; --d: 18; --rr: 1; --c1: #C4543C; --c2: #923F31; opacity: .32; }
.palco[data-stagione="natale"] .lastra--1 { left: 4%; top: 48%; width: 92%; height: 46%; --r: -3deg; --d: 40; --rr: 2; --c1: #4C6B55; --c2: #2E4A3A; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.palco[data-stagione="natale"] .lastra--2 { left: 13%; top: 28%; width: 74%; height: 40%; --r: 4deg; --d: 64; --rr: -2.5; --c1: #5C7D63; --c2: #375743; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.palco[data-stagione="natale"] .lastra--3 { left: 23%; top: 11%; width: 54%; height: 32%; --r: -5deg; --d: 88; --rr: 3; --c1: #6C8E70; --c2: #456650; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.palco[data-stagione="natale"] .lastra--4 { display: block; left: 45%; top: 3%; width: 10%; height: 12%; --r: 0deg; --d: 104; --rr: 8; --c1: #FDDD82; --c2: #E9A93A; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* CARNEVALE: losanghe come i costumi delle maschere, coriandoli sul fondo */
.palco[data-stagione="carnevale"] .lastre { background-color: #FBF4E8; background-image: radial-gradient(circle, #C4543C 0 3px, transparent 4px), radial-gradient(circle, #557590 0 3px, transparent 4px), radial-gradient(circle, #FCCB52 0 3px, transparent 4px); background-size: 90px 90px, 120px 120px, 70px 70px; background-position: 10px 20px, 50px 70px, 30px 5px; }
.palco[data-stagione="carnevale"] .lastra { opacity: .9; mix-blend-mode: multiply; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.palco[data-stagione="carnevale"] .lastra--1 { left: 2%; top: 22%; width: 52%; height: 62%; --r: -6deg; --c1: #FDDD82; --c2: #F0A136; }
.palco[data-stagione="carnevale"] .lastra--2 { left: 44%; top: 8%; width: 50%; height: 60%; --r: 8deg; --c1: #EBA486; --c2: #C4543C; }
.palco[data-stagione="carnevale"] .lastra--3 { left: 26%; top: 46%; width: 48%; height: 52%; --r: -2deg; --c1: #8AA7BB; --c2: #26435F; opacity: .75; }
.palco[data-stagione="carnevale"] .lastra--4 { display: block; left: 72%; top: 60%; width: 18%; height: 22%; --r: 12deg; --d: 110; --c1: #8C7FA3; --c2: #4B4262; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: .85; }

/* PASQUA: uova di velluto pastello */
.palco[data-stagione="pasqua"] .lastre { background: radial-gradient(ellipse at 50% 40%, #FBF6EE, #EFE7DC); }
.palco[data-stagione="pasqua"] .lastra { opacity: .92; mix-blend-mode: multiply; border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; }
.palco[data-stagione="pasqua"] .lastra--1 { left: 6%; top: 18%; width: 40%; height: 66%; --r: -14deg; --c1: #F6D2C2; --c2: #E9A08A; }
.palco[data-stagione="pasqua"] .lastra--2 { left: 52%; top: 10%; width: 40%; height: 64%; --r: 12deg; --c1: #D9E0C6; --c2: #9FAE86; }
.palco[data-stagione="pasqua"] .lastra--3 { left: 30%; top: 44%; width: 38%; height: 54%; --r: -4deg; --c1: #FBE7AE; --c2: #F2C25A; }
.palco[data-stagione="pasqua"] .lastra--4 { display: block; left: 76%; top: 64%; width: 14%; height: 22%; --r: 18deg; --d: 112; --c1: #DCD0E4; --c2: #A797B5; border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; }

/* ESTATE: il mare e il sole */
.palco[data-stagione="estate"] .lastre { background: linear-gradient(180deg, #F3F6F4, #E3ECEC); }
.palco[data-stagione="estate"] .lastra { opacity: .85; mix-blend-mode: multiply; border-radius: 2px; }
.palco[data-stagione="estate"] .lastra--1 { left: 4%; top: 30%; width: 66%; height: 60%; --r: -7deg; --c1: #BCD0DB; --c2: #6F8FA8; }
.palco[data-stagione="estate"] .lastra--2 { left: 38%; top: 14%; width: 56%; height: 58%; --r: 11deg; --c1: #D6E3E7; --c2: #557590; }
.palco[data-stagione="estate"] .lastra--3 { left: 16%; top: 58%; width: 66%; height: 38%; --r: -18deg; --c1: #8AA7BB; --c2: #26435F; opacity: .6; }
.palco[data-stagione="estate"] .lastra--4 { display: block; left: 66%; top: 6%; width: 22%; height: 29%; --r: 0deg; --d: 108; --rr: 0; --c1: #FDDD82; --c2: #F0A136; border-radius: 50%; opacity: .95; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  .palco .lastra { transform: rotate(var(--r)) !important; }
  .palco .dolce3d { transform: translateX(-50%) !important; }
  .palco.sopra .dolce3d__img { transform: none; }
}

/* voce di stagione nel menu e in testata (oggi Natale; poi Carnevale, Pasqua, Estate) */
.voce-stagione .icona { color: var(--i-sole); }
.testata.solida .voce-stagione .icona, .testata:not(.su-foto) .voce-stagione .icona { color: var(--i-terracotta); }
.cassetto .voce-stagione { color: var(--i-sole); }
.cassetto .voce-stagione span { font-size: 14px; letter-spacing: .14em; color: var(--i-sabbia); vertical-align: middle; margin-left: 6px; }

@media (min-width: 1000px) and (max-width: 1279px) { .testata__voci .lingue { display: none; } .testata__voci { gap: 12px; } }

/* ══════════════════════════════════════════════════════════════════
   PAGINE DI CONTENUTO (06/10): linea, La pasticceria, Sei in zona,
   Diario e articolo, Contatti, pagine legali, 404, mappa del mockup.
   Stesso linguaggio di Home e Shop: crema, cacao per i titoli,
   blu notte per bottoni e superfici forti, terracotta e sole per i dettagli.
   Mobile first; con "riduci movimento" niente spostamenti.
   ══════════════════════════════════════════════════════════════════ */

/* ── la Home nel sito unico: passaggio "costa" anche qui ── */
.scena--zona .scena__fondo img { object-position: 50% 30%; }
.scena--zona .scena__velo { background: linear-gradient(90deg, rgba(28,49,73,.9) 0%, rgba(28,49,73,.7) 40%, rgba(28,49,73,.12) 76%), linear-gradient(180deg, rgba(28,49,73,.55), rgba(28,49,73,0) 22%), linear-gradient(0deg, rgba(28,49,73,.4), rgba(28,49,73,0) 40%); }
@media (max-width: 999px) { .scena--zona .scena__velo { background: linear-gradient(0deg, rgba(28,49,73,.86) 0%, rgba(28,49,73,.55) 45%, rgba(28,49,73,.1) 75%); } }
.passione__foto img[src*="mani-pasticcera-chiusura"] { object-position: 50% 50%; }
.testata__dx-mobile .tasto + .tasto { margin-left: -4px; }

/* note "solo mockup" dentro le pagine */
.nota-mockup { margin: 28px 0 0; padding: 10px 14px; border: 1px dashed var(--filo-forte); border-radius: var(--raggio-1); font-size: 13px; line-height: 20px; color: var(--cacao-grigio); max-width: 72ch; }
.testo--grande { font-size: 18px; line-height: 30px; max-width: 54ch; }
@media (min-width: 1000px) { .testo--grande { font-size: 19px; line-height: 32px; } }

/* ── SOGLIA CON FOTO (velo blu notte per leggere bene sopra le foto vere) ── */
.soglia--foto .scena__velo { background: linear-gradient(0deg, rgba(28,49,73,.82) 0%, rgba(28,49,73,.5) 40%, rgba(28,49,73,.12) 72%), linear-gradient(180deg, rgba(28,49,73,.4), rgba(28,49,73,0) 22%); }
@media (min-width: 1000px) { .soglia--foto .scena__velo { background: linear-gradient(90deg, rgba(28,49,73,.78) 0%, rgba(28,49,73,.42) 40%, rgba(28,49,73,0) 66%), linear-gradient(180deg, rgba(28,49,73,.35), rgba(28,49,73,0) 24%); } }
.soglia--foto .scena__fondo img { object-position: 50% 50%; }
.soglia--foto .promesse .icona { color: var(--i-sole); }
.soglia--zona .scena__fondo img { object-position: 60% 30%; }
@media (min-width: 1000px) { .soglia--zona .scena__velo { background: linear-gradient(90deg, rgba(28,49,73,.9) 0%, rgba(28,49,73,.66) 42%, rgba(28,49,73,.1) 72%), linear-gradient(180deg, rgba(28,49,73,.45), rgba(28,49,73,0) 26%); } }
.linea-occhiello { display: inline-flex; align-items: center; gap: 10px; }
.linea-occhiello i { width: 10px; height: 10px; border-radius: 50%; }

/* ── RACCONTO DELLA LINEA ── */
.racconto { display: grid; gap: 40px; align-items: center; }
.racconto__testo { display: grid; gap: 20px; color: var(--cacao); }
.racconto__testo .testo { color: var(--inchiostro); }
.racconto__foto { margin: 0; display: grid; gap: 10px; }
.racconto__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
figcaption { font-size: 13px; line-height: 19px; color: var(--cacao-grigio); }
@media (min-width: 1000px) {
  .racconto { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; }
  .racconto__foto img { aspect-ratio: 4 / 5; }
}

/* ── IL TEMPO DI UN PANETTONE: sei passaggi numerati ── */
.tempo { background: var(--i-crema); }
.tempo__passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: passo; border-top: 1px solid rgba(38,67,95,.18); }
.tempo__passi li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid rgba(38,67,95,.18); }
.tempo__passi b { grid-row: span 2; font-family: var(--font-titolo); font-weight: 300; font-size: 34px; line-height: 1; color: var(--i-terracotta); font-variant-numeric: tabular-nums; }
.tempo__passi h3 { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--i-blu-notte); }
.tempo__passi p { margin: 0; font-size: 15px; line-height: 23px; }
@media (min-width: 760px) {
  .tempo__passi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 0; }
  .tempo__passi li { grid-template-columns: 1fr; padding: 24px 0 28px; border-bottom: 0; border-top: 1px solid rgba(38,67,95,.22); }
  .tempo__passi b { grid-row: auto; font-size: 44px; margin-bottom: 8px; }
}
@media (min-width: 1280px) { .tempo__passi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ── LA GRIGLIA DELLA LINEA ── */
.scaffale--linea .griglia { margin-top: 0; }

/* ── RICHIAMO DI STAGIONE (una fascia blu notte con l'illustrazione) ── */
.richiamo-stagione { display: grid; padding: 0; background: var(--i-notte-alto); color: var(--i-crema-chiara); overflow: hidden; }
.richiamo-stagione__testo { position: relative; z-index: 2; display: grid; gap: 16px; justify-items: start; padding: 56px var(--margine) 24px; max-width: 560px; }
.richiamo-stagione .occhiello { color: var(--i-sole); }
.richiamo-stagione .testo { opacity: .92; }
.richiamo-stagione__disegno { position: relative; height: 260px; }
.richiamo-stagione__disegno svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 1000px) {
  .richiamo-stagione { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; min-height: 440px; }
  .richiamo-stagione__testo { align-content: center; padding: 72px 32px 72px var(--margine); }
  .richiamo-stagione__disegno { height: auto; }
}

/* ── LE ALTRE LINEE (tre schede) ── */
@media (min-width: 1000px) { .linee--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } .linee--tre .linea__foto { height: min(40svh, 380px); } }
@media (max-width: 639px) { .linee--tre { grid-template-columns: 1fr; } .linee--tre .linea__foto { aspect-ratio: 16 / 10; } }

/* ── LA PASTICCERIA: ritratto di Rossana ── */
.ritratto { display: grid; background: var(--farina); color: var(--cacao); }
.ritratto__testo { display: grid; gap: 20px; align-content: end; padding: calc(var(--alt-testata) + 24px) var(--gronda) 40px; }
.ritratto__testo .briciole { color: var(--cacao-grigio); }
.ritratto__testo .occhiello { color: var(--i-terracotta); }
.ritratto__testo .testo { color: var(--inchiostro); }
.ritratto__foto { margin: 0; position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; }
.ritratto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (min-width: 1000px) {
  .ritratto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(100svh, 900px); }
  .ritratto__testo { align-content: center; padding: var(--alt-testata) 56px 40px var(--margine); max-width: 640px; }
  .ritratto__foto { aspect-ratio: auto; margin: var(--alt-testata) 0 0; }
}
@media (min-width: 640px) and (max-width: 999px) { .ritratto__foto { aspect-ratio: 16 / 11; } }
@media (max-width: 999px) and (orientation: landscape) { .ritratto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ritratto__testo { align-content: center; } .ritratto__foto { aspect-ratio: auto; min-height: calc(100% - var(--alt-testata)); margin-top: var(--alt-testata); } }

/* ── CRONOLOGIA: una linea con gli anni, come i segni sulla battigia ── */
.cronologia__linea { list-style: none; margin: 0; padding: 0 0 0 28px; display: grid; gap: 28px; position: relative; }
.cronologia__linea::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--filo-forte); }
.cronologia__linea li { position: relative; display: grid; gap: 4px; }
.cronologia__linea li::before { content: ""; position: absolute; left: -27px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--farina); border: 2px solid var(--i-terracotta); box-sizing: border-box; }
.cronologia__linea b { font-family: var(--font-titolo); font-weight: 300; font-size: 30px; line-height: 1.1; color: var(--i-terracotta); }
.cronologia__linea h3 { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--cacao); }
.cronologia__linea p { margin: 0; font-size: 15px; line-height: 23px; max-width: 40ch; }
@media (min-width: 1000px) {
  .cronologia__linea { padding: 32px 0 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
  .cronologia__linea::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; }
  .cronologia__linea li::before { left: 0; top: -32px; }
  .cronologia__linea b { font-size: 36px; }
}

/* ── VALORI: tre lastre colorate con l'emblema ── */
.valori { background: var(--i-crema); }
.valori__tre { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.valore { display: grid; gap: 12px; align-content: start; padding: 28px 24px 32px; border-radius: 2px; }
.valore h3 { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 28px; letter-spacing: .06em; text-transform: uppercase; }
.valore p { margin: 0; font-size: 16px; line-height: 26px; }
.emblema { width: 120px; height: auto; }
.valore--colore { background: #F6E3D7; color: var(--i-mattone); }
.valore--calore { background: #FBEBC4; color: var(--i-blu-notte); }
.valore--territorio { background: #DCE5EA; color: var(--i-blu-notte); }
.valore p { color: var(--inchiostro); }
@media (min-width: 760px) { .valori__tre { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .valore { padding: 36px 32px 40px; } }

/* ── IL LABORATORIO ── */
.laboratorio { display: grid; gap: 32px; }
.laboratorio__foto { margin: 0; overflow: hidden; }
.laboratorio__foto img { width: 100%; height: 100%; object-fit: cover; }
.laboratorio__foto--grande img { aspect-ratio: 3 / 2; }
.laboratorio__foto--piccola { display: none; }
.laboratorio__testo { display: grid; gap: 18px; align-content: center; color: var(--cacao); }
.laboratorio__testo .occhiello { color: var(--i-terracotta); }
.laboratorio__testo .testo { color: var(--inchiostro); }
.spunte { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--inchiostro); }
.spunte li { display: flex; gap: 12px; align-items: baseline; }
.spunte li::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--i-terracotta); transform: translateY(-4px); }
@media (min-width: 1000px) {
  .laboratorio { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 40px 72px; align-items: center; }
  .laboratorio__foto--grande { grid-row: span 2; }
  .laboratorio__foto--grande img { aspect-ratio: 4 / 3.4; }
  .laboratorio__foto--piccola { display: block; width: 72%; }
  .laboratorio__foto--piccola img { aspect-ratio: 3 / 2; }
}

/* ── LA SQUADRA ── */
.squadra__persone { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.persona { display: grid; gap: 6px; align-content: start; }
.persona__iniziale { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; background: var(--c); color: var(--t, var(--i-crema-chiara)); font-family: var(--font-titolo); font-weight: 300; font-size: clamp(44px, 9vw, 72px); border-radius: 2px; position: relative; overflow: hidden; }
.persona__iniziale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%); }
.persona h3 { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--cacao); }
.persona__ruolo { margin: 0; font-family: var(--font-titolo); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--i-terracotta); }
.persona p:last-child { margin: 0; font-size: 14px; line-height: 21px; }
@media (min-width: 760px) { .squadra__persone { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; } }
@media (min-width: 1280px) { .squadra__persone { grid-template-columns: repeat(6, minmax(0, 1fr)); } .persona__iniziale { font-size: 56px; } }

/* ── MATERIE PRIME (fascia blu notte) ── */
.materie { background: var(--i-blu-notte); color: var(--i-crema-chiara); display: grid; gap: 36px; }
.materie__testa { display: grid; gap: 12px; }
.materie .occhiello { color: var(--i-sole); }
.materie__elenco { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(248,236,209,.22); }
.materie__elenco > div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid rgba(248,236,209,.22); }
.materie__elenco dt { font-family: var(--font-titolo); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.materie__elenco dd { margin: 0; font-size: 15px; line-height: 23px; opacity: .88; }
.riconoscimenti { display: grid; gap: 12px; }
.riconoscimenti__voce { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 23px; }
.riconoscimenti__voce .icona { color: var(--i-sole); margin-top: 2px; }
@media (min-width: 1000px) {
  .materie { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 72px; }
  .materie__elenco { grid-row: span 2; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .materie__elenco > div { padding: 24px 0; }
  .riconoscimenti { align-self: end; }
}

/* ── INVITO FINALE ── */
.invito { text-align: center; }
.invito__dentro { display: grid; gap: 22px; justify-items: center; max-width: 760px; margin: 0 auto; color: var(--cacao); }
.invito__azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── SEI IN ZONA ── */
.passi-ritiro__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.passi-ritiro__lista li { position: relative; display: grid; gap: 10px; padding: 28px 24px 30px; background: var(--panna); border: 1px solid var(--filo); overflow: hidden; }
.passi-ritiro__num { position: absolute; right: 16px; top: -10px; font-family: var(--font-titolo); font-weight: 300; font-size: 120px; line-height: 1; color: var(--i-crema); pointer-events: none; }
.passi-ritiro__lista .icona { position: relative; width: 28px; height: 28px; color: var(--i-terracotta); }
.passi-ritiro__lista h3 { position: relative; margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--i-blu-notte); }
.passi-ritiro__lista p { position: relative; margin: 0; font-size: 15px; line-height: 24px; }
@media (min-width: 760px) { .passi-ritiro__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

.banco { display: grid; gap: 40px; background: var(--i-crema); }
.banco__orari { display: grid; gap: 14px; align-content: start; color: var(--cacao); }
.banco__orari .occhiello { color: var(--i-terracotta); }
.orari { border-collapse: collapse; width: 100%; max-width: 560px; margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--inchiostro); }
.orari th, .orari td { padding: 14px 0; border-bottom: 1px solid rgba(38,67,95,.18); text-align: left; vertical-align: top; }
.orari th { font-family: var(--font-titolo); font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--i-blu-notte); padding-right: 16px; white-space: nowrap; }
.orari td { font-variant-numeric: tabular-nums; }
.orari__estate th, .orari__estate td { color: var(--i-terracotta); }
.banco__voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.banco__voci li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 16px; padding: 22px; background: var(--panna); }
.banco__voci .icona { grid-row: span 2; width: 26px; height: 26px; color: var(--i-blu-notte); }
.banco__voci h3 { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--cacao); }
.banco__voci p { margin: 0; font-size: 15px; line-height: 23px; }
@media (max-width: 400px) { .orari th { white-space: normal; } }
@media (min-width: 1000px) { .banco { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; } }

.arrivare { display: grid; gap: 36px; }
.arrivare__mappa { margin: 0 calc(-1 * var(--margine)); }
.arrivare__mappa svg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 760; }
.arrivare__didascalia { margin: 8px var(--margine) 0; font-size: 12px; letter-spacing: .08em; color: var(--cacao-grigio); }
.arrivare__testo { display: grid; gap: 18px; justify-items: start; color: var(--cacao); }
.arrivare__testo .occhiello { color: var(--i-terracotta); }
.arrivare__modi { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.arrivare__modi li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.arrivare__modi .icona { width: 24px; height: 24px; color: var(--i-blu-notte); margin-top: 2px; }
.arrivare__modi h3 { margin: 0 0 2px; font-family: var(--font-titolo); font-weight: 400; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.arrivare__modi p { margin: 0; font-size: 15px; line-height: 23px; color: var(--inchiostro); }
.mappa-nome { font-family: var(--font-titolo); font-size: 19px; letter-spacing: .08em; text-transform: uppercase; fill: var(--i-blu-notte); }
.mappa-nome--forte { font-size: 24px; fill: var(--i-mattone); }
.mappa-nome--mare { font-size: 30px; letter-spacing: .3em; fill: var(--i-crema-chiara); opacity: .85; }
.mappa-nome--via { fill: var(--i-terracotta); font-size: 17px; }
.mappa-nome--monte { font-size: 22px; fill: var(--i-foglia); }
.mappa-cartello { font-family: var(--font-titolo); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; fill: var(--i-crema-chiara); }
@media (min-width: 1000px) {
  .arrivare { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
  .arrivare__mappa { margin: 0; }
  .arrivare__mappa svg { border-radius: 2px; }
  .arrivare__didascalia { margin-inline: 0; }
}
@media (max-width: 999px) and (orientation: portrait) { .arrivare__mappa svg { aspect-ratio: 640 / 700; } }

.intorno { display: grid; gap: 32px; }
.intorno__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.intorno__testo { display: grid; gap: 18px; justify-items: start; color: var(--cacao); }
.intorno__testo .occhiello { color: var(--i-terracotta); }
.intorno__testo .testo { color: var(--inchiostro); }
.intorno__idee { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.intorno__idee li { padding: 8px 14px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-pieno); font-size: 14px; color: var(--inchiostro); }
@media (min-width: 1000px) { .intorno { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; } .intorno__foto img { aspect-ratio: 4 / 3.3; object-position: 50% 60%; } }

/* ── DIARIO: archivio ── */
.soglia--diario .soglia__disegno { height: clamp(200px, 36svh, 360px); }
@media (min-width: 1000px) { .soglia--diario { min-height: clamp(520px, 72svh, 680px); } .soglia--diario .soglia__disegno { height: 54%; } }
.temi { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--margine)) 20px; padding: 2px var(--margine); }
.temi::-webkit-scrollbar { display: none; }
.tema { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-pieno); background: transparent; font-size: 14px; font-weight: 500; color: var(--inchiostro); cursor: pointer; transition: border-color var(--durata-breve) var(--curva), background-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva); }
.tema i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tema:hover { border-color: var(--i-blu-notte); }
.tema[aria-pressed="true"] { background: var(--i-blu-notte); border-color: var(--i-blu-notte); color: var(--i-crema-chiara); }
.tema:focus-visible { outline: none; box-shadow: var(--fuoco); }
.in-evidenza { display: grid; gap: 20px; margin: 16px 0 48px; text-decoration: none; color: inherit; }
.in-evidenza__foto { overflow: hidden; }
.in-evidenza__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1200ms var(--curva); }
.in-evidenza:hover .in-evidenza__foto img { transform: scale(1.04); }
.in-evidenza__testo { display: grid; gap: 14px; align-content: center; justify-items: start; color: var(--cacao); }
.in-evidenza__titolo { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.in-evidenza .testo { color: var(--inchiostro); }
.in-evidenza:focus-visible { outline: none; box-shadow: var(--fuoco); }
@media (min-width: 1000px) { .in-evidenza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.articoli { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 24px; }
.articoli > li[hidden] { display: none; }
.scheda-articolo { position: relative; display: grid; gap: 10px; align-content: start; color: var(--cacao); }
.scheda-articolo__foto { overflow: hidden; margin-bottom: 6px; }
.scheda-articolo__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1200ms var(--curva); }
.scheda-articolo:hover .scheda-articolo__foto img { transform: scale(1.05); }
.scheda-articolo__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-titolo); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cacao-grigio); }
.scheda-articolo__meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.scheda-articolo__titolo { margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.scheda-articolo__titolo a { text-decoration: none; }
.scheda-articolo__titolo a::after { content: ""; position: absolute; inset: 0; }
.scheda-articolo__titolo a:focus-visible { outline: none; }
.scheda-articolo:has(a:focus-visible) { box-shadow: var(--fuoco); }
.scheda-articolo .testo { font-size: 15px; line-height: 23px; color: var(--inchiostro); }
@media (min-width: 640px) { .articoli { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .articoli { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; } }
.articoli--tre { grid-template-columns: 1fr; }
@media (min-width: 760px) { .articoli--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.novena-richiamo { background: var(--i-blu-notte); color: var(--i-crema-chiara); }
.novena-richiamo__dentro { display: grid; gap: 28px; justify-items: start; }
.novena-richiamo .occhiello { color: var(--i-sole); }
.novena-richiamo .testo { opacity: .9; }
.novena-richiamo__giorni { list-style: none; margin: 0 calc(-1 * var(--margine)); padding: 0 var(--margine); display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 8px; overflow-x: auto; scrollbar-width: none; width: calc(100% + 2 * var(--margine)); box-sizing: border-box; }
.novena-richiamo__giorni::-webkit-scrollbar { display: none; }
.novena-richiamo__giorni li { display: grid; gap: 2px; padding: 12px; border: 1px solid rgba(248,236,209,.22); border-radius: var(--raggio-1); }
.novena-richiamo__giorni b { font-family: var(--font-titolo); font-weight: 300; font-size: 28px; line-height: 1; color: var(--i-sole); }
.novena-richiamo__giorni span { font-size: 13px; line-height: 17px; }
.bottone--chiaro { background: var(--i-crema-chiara); border-color: var(--i-crema-chiara); color: var(--i-blu-notte); }
.bottone--chiaro:hover { background: var(--i-sole); border-color: var(--i-sole); color: var(--i-blu-notte); }
@media (min-width: 1000px) {
  .novena-richiamo__dentro { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 32px 56px; }
  .novena-richiamo__giorni { margin: 0; padding: 0; width: auto; grid-auto-flow: row; grid-template-columns: repeat(9, minmax(0, 1fr)); overflow: visible; }
  .novena-richiamo__dentro .bottone { grid-column: 2; justify-self: start; }
}

/* ── ARTICOLO ── */
.articolo__testa { display: grid; gap: 18px; justify-items: start; padding: calc(var(--alt-testata) + 28px) var(--gronda) 32px; max-width: 760px; margin: 0 auto; box-sizing: border-box; color: var(--cacao); scroll-margin-top: var(--alt-testata); }
.articolo__testa .briciole { color: var(--cacao-grigio); flex-wrap: wrap; }
.articolo__sommario { margin: 0; font-family: var(--font-titolo); font-weight: 300; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: .02em; color: var(--inchiostro); max-width: 40ch; }
.articolo__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--cacao-grigio); }
.articolo__copertina { margin: 0 auto; max-width: 1280px; padding: 0 var(--gronda); box-sizing: border-box; display: grid; gap: 10px; }
.articolo__copertina img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.articolo__corpo { max-width: 760px; margin: 0 auto; padding: 48px var(--gronda) 32px; box-sizing: border-box; font-size: 18px; line-height: 31px; color: var(--inchiostro); scroll-margin-top: var(--alt-testata); }
.articolo__corpo > p { margin: 0 0 22px; }
.articolo__primo::first-letter { float: left; font-family: var(--font-titolo); font-weight: 300; font-size: 76px; line-height: 64px; margin: 6px 12px 0 0; color: var(--i-terracotta); }
.articolo__corpo h2 { margin: 44px 0 14px; font-family: var(--font-titolo); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--cacao); }
.articolo__citazione { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--i-terracotta); }
.articolo__citazione p { margin: 0; font-family: var(--font-titolo); font-weight: 300; font-size: 26px; line-height: 1.35; color: var(--i-blu-notte); }
.articolo__citazione cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; letter-spacing: .06em; color: var(--cacao-grigio); }
.calendario { list-style: none; margin: 0 0 28px; padding: 0; display: grid; border-top: 1px solid var(--filo-forte); }
.calendario li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--filo-forte); font-size: 16px; line-height: 25px; }
.calendario b { font-family: var(--font-titolo); font-weight: 400; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--i-terracotta); }
@media (min-width: 640px) { .calendario li { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; } }
.articolo__figura { margin: 36px 0; display: grid; gap: 10px; }
.articolo__figura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1000px) { .articolo__figura { margin-inline: -96px; } }
.articolo__prodotto { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 32px 0; padding: 14px 16px 14px 14px; background: var(--panna); border: 1px solid var(--filo); }
.articolo__prodotto-foto img { width: 88px; height: 88px; object-fit: cover; }
.articolo__prodotto .occhiello { color: var(--cacao-grigio); font-size: 10.5px; }
.articolo__prodotto h3 { margin: 4px 0 2px; font-family: var(--font-titolo); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--cacao); }
.articolo__prodotto h3 a { text-decoration: none; }
.articolo__prodotto-nota { margin: 0; font-size: 14px; line-height: 20px; }
.articolo__piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--filo-forte); }
.articolo__temi { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.articolo__temi a { padding: 6px 12px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-pieno); font-size: 13px; text-decoration: none; }
.bottone--testo { min-height: 44px; padding: 0 4px; border: 0; color: var(--i-blu-notte); }
.leggi-anche { border-top: 1px solid var(--filo); }
@media (min-width: 1000px) { .articolo__testa { padding-top: calc(var(--alt-testata) + 56px); } }

/* ── CONTATTI ── */
.soglia--contatti { background: var(--farina); }
.soglia--contatti .soglia__disegno { height: auto; aspect-ratio: 640 / 700; margin: 0 var(--gronda) 32px; overflow: hidden; border-radius: 2px; }
.soglia--contatti .soglia__disegno svg { position: absolute; inset: 0; }
.soglia--contatti .titolo { color: var(--cacao); }
@media (min-width: 1000px) {
  .soglia--contatti { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: clamp(560px, 80svh, 760px); align-items: center; }
  .soglia--contatti .soglia__testo { padding: calc(var(--alt-testata) + 24px) 40px 40px var(--margine); }
  .soglia--contatti .soglia__disegno { position: relative; order: 2; inset: auto; height: auto; aspect-ratio: 1200 / 820; margin: calc(var(--alt-testata) + 24px) var(--margine) 40px 0; }
}
@media (max-width: 999px) and (orientation: landscape) { .soglia--contatti .soglia__disegno { aspect-ratio: 1200 / 600; } }
.canali__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.canale { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 14px; padding: 22px 20px; height: 100%; box-sizing: border-box; background: var(--panna); border: 1px solid var(--filo); text-decoration: none; color: var(--inchiostro); transition: border-color var(--durata-breve) var(--curva), transform var(--durata-media) var(--curva); }
.canale:hover { border-color: var(--i-blu-notte); }
@media (hover: hover) { .canale:hover { transform: translateY(-3px); } }
.canale:focus-visible { outline: none; box-shadow: var(--fuoco); }
.canale .icona { grid-row: span 3; width: 24px; height: 24px; color: var(--i-terracotta); }
.canale__nome { font-family: var(--font-titolo); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--cacao-grigio); }
.canale__dato { font-family: var(--font-titolo); font-size: 19px; letter-spacing: .02em; color: var(--i-blu-notte); overflow-wrap: anywhere; }
.canale__dato--lungo { font-size: 15px; letter-spacing: 0; }
.canale__dato em { font-family: var(--font-testo); font-size: 13px; color: var(--cacao-grigio); }
.canale__nota { font-size: 14px; color: var(--cacao-grigio); }
.canale--whatsapp { background: var(--i-blu-notte); border-color: var(--i-blu-notte); color: var(--i-crema-chiara); }
.canale--whatsapp .canale__nome, .canale--whatsapp .canale__nota { color: var(--i-sabbia); }
.canale--whatsapp .canale__dato { color: var(--i-crema-chiara); }
.canale--whatsapp .icona { color: var(--i-sole); }
@media (min-width: 640px) { .canali__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .canali__elenco { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.modulo-contatti { display: grid; gap: 40px; background: var(--i-crema); }
.modulo-contatti__lato { display: grid; gap: 18px; align-content: start; justify-items: start; color: var(--cacao); }
.modulo-contatti__lato .occhiello { color: var(--i-terracotta); }
.modulo-contatti__lato .testo { color: var(--inchiostro); }
.indirizzo { font-style: normal; font-size: 15px; line-height: 24px; color: var(--inchiostro); padding-left: 16px; border-left: 2px solid var(--i-terracotta); }
.modulo { display: grid; gap: 20px; padding: 24px 20px 28px; background: var(--panna); border: 1px solid var(--filo); }
.modulo .bottone { justify-self: start; }
.campo__input--area { min-height: 132px; padding-top: 12px; resize: vertical; line-height: 24px; }
.modulo__esito { margin: 0; font-size: 15px; line-height: 23px; color: var(--esito-ok); }
.modulo__esito:empty { display: none; }
@media (min-width: 1000px) { .modulo-contatti { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; } .modulo { padding: 36px 40px 40px; } }

.domande__elenco { display: grid; border-top: 1px solid var(--filo-forte); max-width: 880px; }
.domande__elenco details { border-bottom: 1px solid var(--filo-forte); }
.domande__elenco summary { position: relative; display: block; padding: 20px 48px 20px 0; cursor: pointer; list-style: none; font-family: var(--font-titolo); font-size: 18px; line-height: 1.35; letter-spacing: .03em; color: var(--cacao); }
.domande__elenco summary::-webkit-details-marker { display: none; }
.domande__elenco summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-75%) rotate(45deg); transition: transform var(--durata-media) var(--curva); }
.domande__elenco details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.domande__elenco summary:focus-visible { outline: none; box-shadow: var(--fuoco); }
.domande__elenco details p { margin: 0 0 22px; max-width: 62ch; font-size: 16px; line-height: 26px; }

.lavora { background: var(--i-terracotta); color: var(--i-crema-chiara); }
.lavora__dentro { display: grid; gap: 18px; justify-items: start; max-width: 680px; }
.lavora .occhiello { color: var(--i-sole); }
.lavora .bottone--chiaro { color: var(--i-mattone); }

/* ── PAGINE LEGALI ── */
.legale { padding: calc(var(--alt-testata) + 28px) var(--margine) 72px; }
.legale__testa { display: grid; gap: 16px; justify-items: start; max-width: 880px; color: var(--cacao); padding-bottom: 32px; border-bottom: 1px solid var(--filo-forte); margin-bottom: 40px; }
.legale__testa .briciole { color: var(--cacao-grigio); }
.legale__data { margin: 0; font-size: 14px; color: var(--cacao-grigio); }
.legale__avviso { margin: 0; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--avviso-velo); color: var(--inchiostro); font-size: 14px; line-height: 21px; max-width: 72ch; }
.legale__avviso .icona { color: var(--avviso); margin-top: 1px; }
.legale__corpo { display: grid; gap: 40px; }
.legale__indice { display: grid; gap: 12px; align-content: start; }
.legale__indice ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 22px; }
.legale__indice a { text-decoration: none; } .legale__indice a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legale__altre { margin: 8px 0 0; font-size: 14px; color: var(--cacao-grigio); }
.legale__testo { max-width: 68ch; font-size: 16px; line-height: 27px; }
.legale__testo h2 { margin: 36px 0 10px; font-family: var(--font-titolo); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--cacao); scroll-margin-top: calc(var(--alt-testata) + 16px); }
.legale__testo h2:first-child { margin-top: 0; }
.legale__testo p { margin: 0 0 12px; }
.legale__testo .da-scrivere { color: var(--cacao-grigio); font-style: italic; }
@media (min-width: 1000px) {
  .legale { padding-top: calc(var(--alt-testata) + 56px); }
  .legale__corpo { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; }
  .legale__indice { position: sticky; top: calc(var(--alt-testata) + 24px); }
}

/* ── 404 ── */
.pagina-404 { display: grid; min-height: 100svh; background: var(--i-crema); color: var(--cacao); }
.pagina-404__testo { display: grid; gap: 18px; justify-items: start; align-content: end; padding: calc(var(--alt-testata) + 32px) var(--gronda) 24px; max-width: 620px; position: relative; z-index: 2; }
.pagina-404__testo .occhiello { color: var(--i-terracotta); }
.pagina-404__testo .testo { color: var(--inchiostro); }
.pagina-404__vie { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pagina-404__altro { margin: 0; font-size: 15px; color: var(--inchiostro); }
.pagina-404__disegno { position: relative; min-height: 280px; }
.pagina-404__disegno svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 1000px) {
  .pagina-404 { grid-template-rows: auto 1fr; }
  .pagina-404__disegno { min-height: min(46.6vw, 620px); }
  .pagina-404__testo { padding: calc(var(--alt-testata) + 64px) 0 0 var(--margine); }
}
@media (prefers-reduced-motion: no-preference) {
  .bottiglia { animation: galleggia 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes galleggia { 0%, 100% { translate: 0 0; rotate: -18deg; } 50% { translate: 0 6px; rotate: -12deg; } }
}

/* ── MAPPA DEL MOCKUP ── */
.mappa-mockup { padding: calc(var(--alt-testata) + 28px) var(--margine) 72px; color: var(--cacao); }
.mappa-mockup__testa { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px; }
.mappa-mockup__testa .testo { color: var(--inchiostro); }
.mappa-mockup__gruppi { display: grid; gap: 40px; }
.mappa-mockup__gruppo h2 { margin: 0 0 14px; font-family: var(--font-titolo); font-weight: 400; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--cacao-grigio); }
.mappa-mockup__gruppo ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--filo-forte); }
.mappa-mockup__gruppo li { display: grid; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--filo-forte); }
.mappa-mockup__gruppo a { font-family: var(--font-titolo); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--i-blu-notte); text-decoration: none; }
.mappa-mockup__gruppo a:hover { text-decoration: underline; text-underline-offset: 5px; }
.mappa-mockup__gruppo p { margin: 0; font-size: 14px; line-height: 21px; color: var(--inchiostro); }
.stato { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--raggio-pieno); font-family: var(--font-testo); font-size: 11px; letter-spacing: .04em; text-transform: none; vertical-align: middle; background: var(--esito-ok-velo); color: var(--esito-ok); }
.stato--nuova { background: #FBEBC4; color: #6B4A00; }
@media (min-width: 1000px) { .mappa-mockup__gruppi { grid-template-columns: 1fr 1fr; gap: 48px 72px; } .mappa-mockup__gruppo li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } }

/* ── ancore che arrivano da altre pagine: il titolo non finisce sotto la testata ── */
section[id], [id="valori"], [id="laboratorio"] { scroll-margin-top: var(--alt-testata); }

@media (prefers-reduced-motion: reduce) {
  .in-evidenza:hover .in-evidenza__foto img, .scheda-articolo:hover .scheda-articolo__foto img, .canale:hover { transform: none; }
}

/* ── schermi strettissimi (telefono con lo zoom del browser al 200%: circa 200 px utili) ── */
@media (max-width: 300px) {
  :root { --gronda: 14px; }
  .testata__marchio svg { width: 96px; }
  .tasto { width: 38px; height: 38px; }
  .titolo, .titolo--vetrina { font-size: 24px; overflow-wrap: anywhere; hyphens: auto; }
  .sottotitolo { font-size: 15px; }
  .briciole { flex-wrap: wrap; }
  .fondale__colonne, .fondale__colonne > *, .iscrizione { min-width: 0; max-width: 100%; }
  .mondo { flex-wrap: wrap; }
  .linee { grid-template-columns: 1fr; }
  .griglia { grid-template-columns: 1fr !important; }
  .acquisto__capo, .dolce__linea { flex-wrap: wrap; min-width: 0; }
  .ritratto__testo, .ritratto__foto { min-width: 0; }
  .sezione__titoli { min-width: 0; }
  .link-lungo::after { width: 32px; }
  .articolo__prodotto { grid-template-columns: 64px minmax(0, 1fr); }
  .articolo__prodotto-foto img { width: 64px; height: 64px; }
  .articolo__prodotto .bottone { grid-column: 2; justify-self: start; }
  .scena__testo, .soglia__testo { min-width: 0; max-width: 100%; }
  .iscrizione, .acquisto, .acquisto__capo { grid-template-columns: minmax(0, 1fr); }
  .scaffale__barra { flex-wrap: wrap; }
  .formati { grid-template-columns: minmax(0, 1fr); }
  .acquisto__riga > *, .acquisto__bottone { min-width: 0; flex-basis: 100%; white-space: normal; }
  .ordina, .ordina select { min-width: 0; max-width: 100%; }
  .cassa__indietro, .cassa__sicuro { min-width: 36px; }
  * { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════════
   ADATTAMENTI A WORDPRESS (plugin Iezzi Vetrina)
   Le pagine della vetrina usano un modello proprio: niente testata e
   fondale di Kadence. Qui le regole che nel mockup stavano nella cornice
   della pagina, la barra di amministrazione e i reset contro gli stili
   generici del tema e dei plugin.
   ══════════════════════════════════════════════════════════════════ */
:root { color-scheme: light; }
body.iezzi-vetrina { margin: 0; background: #F4EFE8; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body.iezzi-vetrina img { max-width: 100%; height: auto; }
body.iezzi-vetrina .scena__fondo img, body.iezzi-vetrina .passione__foto img, body.iezzi-vetrina .ritratto__foto img,
body.iezzi-vetrina .linea__foto img, body.iezzi-vetrina .dolce__foto img, body.iezzi-vetrina .notizia__riga img { height: 100%; }
body.iezzi-vetrina [hidden]:not([hidden=until-found i]) { display: none !important; }
body.iezzi-vetrina a { text-decoration-thickness: auto; }
/* i bottoni del tema non devono colorare i nostri tasti */
body.iezzi-vetrina .tasto, body.iezzi-vetrina .tasto:hover, body.iezzi-vetrina .tasto:focus,
body.iezzi-vetrina .tasto-video, body.iezzi-vetrina .vetrina__punti button, body.iezzi-vetrina .punti button,
body.iezzi-vetrina .su, body.iezzi-vetrina .tema, body.iezzi-vetrina .bottone--testo { box-shadow: none; text-transform: none; letter-spacing: normal; }
body.iezzi-vetrina .tasto:hover, body.iezzi-vetrina .tasto:focus { background: none; color: inherit; }
body.iezzi-vetrina .su { background: none; border: 0; }
/* barra di amministrazione (solo per chi è collegato) */
body.admin-bar.iezzi-vetrina .testata, body.admin-bar.iezzi-vetrina .cassetto { top: 32px; }
body.admin-bar.iezzi-vetrina .binario { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.iezzi-vetrina .testata, body.admin-bar.iezzi-vetrina .cassetto { top: 46px; }
  #wpadminbar { position: fixed; }
}
/* note «da confermare»: le vede solo chi amministra il sito */
.nota-mockup::before { content: "Nota visibile solo agli amministratori · "; font-weight: 600; }
/* foto non ancora caricata nella Libreria media: segnaposto visibile solo agli amministratori */
.iv-foto-mancante { display: grid; place-items: center; min-height: 160px; height: 100%; padding: 16px; box-sizing: border-box; background: repeating-linear-gradient(135deg, #EDE3D6 0 12px, #F4EFE8 12px 24px); color: #6E6158; font: 500 13px/1.4 "Hanken Grotesk", system-ui, sans-serif; text-align: center; }
/* contatore del carrello: lo riempiono i frammenti di WooCommerce */
.carrello__conta:empty { display: none; }
/* modulo contatti: esito dal server */
.modulo__esito--errore { color: #A3372A; }
.iv-trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* articolo: i blocchi di WordPress con lo stile del Diario */
.articolo__corpo .wp-block-quote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--i-terracotta); }
.articolo__corpo .wp-block-quote p { margin: 0; font-family: var(--font-titolo); font-weight: 300; font-size: 26px; line-height: 1.35; color: var(--i-blu-notte); }
.articolo__corpo .wp-block-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; letter-spacing: .06em; color: var(--cacao-grigio); }
.articolo__corpo .wp-block-image { margin: 36px 0; }
.articolo__corpo .wp-block-image img { width: 100%; height: auto; }
.articolo__corpo .wp-block-image figcaption { margin-top: 10px; }
.articolo__corpo > p:first-of-type::first-letter { float: left; font-family: var(--font-titolo); font-weight: 300; font-size: 76px; line-height: 64px; margin: 6px 12px 0 0; color: var(--i-terracotta); }
.articolo__corpo ul, .articolo__corpo ol:not(.calendario) { margin: 0 0 22px; padding-left: 22px; }
/* pagine legali: il testo arriva dall'editor */
.legale__testo h2 { scroll-margin-top: calc(var(--alt-testata) + 16px); }
.legale__testo ul, .legale__testo ol { padding-left: 22px; margin: 0 0 12px; }
/* Diario vuoto o con pochi articoli */
.archivio__vuoto { padding: 40px 0; color: var(--cacao-grigio); }

/* ══════════════════════════════════════════════════════════════════
   NEGOZIO in WordPress: elementi di WooCommerce con la grafica del sito
   (gli stili del tema Kadence sulle nostre pagine sono tolti: qui c'è tutto quello che serve)
   ══════════════════════════════════════════════════════════════════ */
body.iezzi-vetrina .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* avvisi di WooCommerce («aggiunto al carrello», errori) */
.avvisi-woo:empty { display: none; }
.avvisi-woo { padding: calc(var(--alt-testata) + 12px) var(--margine, 20px) 0; }
.avvisi-woo + .vetrina-dolce, .avvisi-woo + .soglia { margin-top: 0; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { list-style: none; margin: 0 0 12px; padding: 14px 18px; border-radius: var(--raggio-1); background: var(--panna); border: 1px solid var(--filo-forte); color: var(--inchiostro); font: 400 15px/1.5 var(--font-testo); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.woocommerce-error { border-color: #A3372A; color: #A3372A; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; }
/* prezzi di WooCommerce */
.woocommerce-Price-amount { white-space: nowrap; }
.dolce__prezzo del, .acquisto__prezzo del { opacity: .55; margin-right: 6px; font-size: .85em; }
.dolce__prezzo ins, .acquisto__prezzo ins { text-decoration: none; }
.dolce__prezzo--arrivo, .acquisto__prezzo--arrivo { font-family: var(--font-titolo); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cacao-grigio); }
.dolce__senza-foto { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 4 / 5; background: var(--sabbia-chiara, #EDE3D6); color: var(--cacao-grigio); }
.dolce__senza-foto svg { width: 46%; height: auto; fill: none; stroke: currentColor; }
.dolce__foto > a { display: block; height: 100%; }
/* tasto «+» delle griglie (aggiunta con AJAX di WooCommerce) */
.dolce__piede .added_to_cart { display: none; }
.dolce__piede .ajax_add_to_cart.loading { opacity: .5; pointer-events: none; }
.dolce__piede .ajax_add_to_cart.added::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--esito-ok, #2E7D4F); }
.dolce__piede a.bottone { position: relative; text-decoration: none; }
/* scheda: il modulo d'acquisto di WooCommerce */
.acquisto__descrizione p { margin: 0 0 12px; }
.acquisto__presto { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--raggio-1); background: var(--panna); border: 1px dashed var(--filo-forte); margin: 6px 0 18px; }
.acquisto__presto .icona { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.acquisto__modulo--woo { margin: 6px 0 22px; }
.acquisto__modulo--woo form.cart { display: grid; gap: 16px; margin: 0; }
.acquisto__modulo--woo .single_variation_wrap, .acquisto__modulo--woo .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acquisto__modulo--woo .single_variation_wrap { display: grid; }
.acquisto__modulo--woo .woocommerce-variation-price, .acquisto__modulo--woo .reset_variations, .acquisto__modulo--woo .woocommerce-variation-description { display: none !important; }
.acquisto__modulo--woo .woocommerce-variation-availability, .acquisto__modulo--woo .stock { margin: 0; font-size: 14px; color: var(--cacao-grigio); }
.acquisto__modulo--woo form.cart:not(.variations_form) { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.acquisto__modulo--woo .quantity { margin: 0; }
.acquisto__modulo--woo .quantity.quantita input.qty { width: 40px; border: 0; background: none; text-align: center; font-family: var(--font-titolo); font-size: 18px; color: var(--inchiostro); -moz-appearance: textfield; appearance: textfield; padding: 0; }
.acquisto__modulo--woo .quantity input.qty::-webkit-inner-spin-button, .acquisto__modulo--woo .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.acquisto__modulo--woo .quantity:not(.quantita) input.qty { width: 72px; height: 48px; border: 1px solid var(--filo-forte); border-radius: var(--raggio-pieno); text-align: center; font-size: 16px; }
.acquisto__modulo--woo .single_add_to_cart_button { flex: 1 1 220px; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--raggio-pieno); background: var(--marca); color: var(--su-marca); font: 600 13px/1 var(--font-testo); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.acquisto__modulo--woo .single_add_to_cart_button:hover { filter: brightness(1.08); }
.acquisto__modulo--woo .single_add_to_cart_button.disabled, .acquisto__modulo--woo .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }
.acquisto__modulo--woo .single_add_to_cart_button:focus-visible { outline: none; box-shadow: var(--fuoco); }
.acquisto__modulo--woo .formati input:checked + span { border-color: var(--cacao); box-shadow: inset 0 0 0 1px var(--cacao); }
.acquisto__modulo--woo .formati input:focus-visible + span { box-shadow: var(--fuoco); }
.palco--vuoto { display: grid; place-items: center; background: var(--sabbia-chiara, #EDE3D6); }
.palco--vuoto .dolce__senza-foto { width: 40%; background: none; aspect-ratio: auto; }
/* linee senza foto e ingressi semplici */
.soglia--tinta { background: var(--tinta, var(--adriatico)); }
.soglia--tinta .soglia__testo { padding-top: calc(var(--alt-testata) + 40px); }
.linea--semplice { display: grid; gap: 10px; padding: 22px; border-radius: var(--raggio-1); background: var(--panna); border: 1px solid var(--filo); text-decoration: none; color: inherit; }
.linea--semplice .linea__etichetta { position: static; justify-self: start; }
/* carrello e «Il mio account» dentro la cornice del sito */
.woo-pagina { padding: calc(var(--alt-testata) + 28px) var(--margine, 20px) 72px; max-width: 1180px; margin: 0 auto; }
.woo-pagina > .titolo { margin: 8px 0 28px; }
.woo-pagina__corpo { font: 400 16px/1.6 var(--font-testo); color: var(--inchiostro); }
.woo-pagina__corpo a { color: var(--cacao); }
.woo-pagina__corpo table.shop_table { width: 100%; border-collapse: collapse; background: var(--panna); border-radius: var(--raggio-1); overflow: hidden; }
.woo-pagina__corpo table.shop_table th, .woo-pagina__corpo table.shop_table td { padding: 14px 16px; border-bottom: 1px solid var(--filo); text-align: left; vertical-align: middle; }
.woo-pagina__corpo .button, .woo-pagina__corpo button[type=submit], .woo-pagina__corpo .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--raggio-pieno); background: var(--marca); color: var(--su-marca) !important; font: 600 13px/1 var(--font-testo); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.woo-pagina__corpo input.input-text, .woo-pagina__corpo input[type=text], .woo-pagina__corpo input[type=email], .woo-pagina__corpo input[type=password], .woo-pagina__corpo input[type=tel], .woo-pagina__corpo select, .woo-pagina__corpo textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--bordo-campo, var(--filo-forte)); border-radius: var(--raggio-1); background: #fff; font: 400 16px/1.4 var(--font-testo); color: var(--inchiostro); box-sizing: border-box; }
.woo-pagina__corpo label { display: block; margin: 0 0 6px; font-size: 14px; }
.woo-pagina__corpo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woo-pagina__corpo .woocommerce-MyAccount-navigation a { display: inline-block; padding: 10px 16px; border-radius: var(--raggio-pieno); border: 1px solid var(--filo-forte); text-decoration: none; }
.woo-pagina__corpo .woocommerce-MyAccount-navigation .is-active a { background: var(--marca); color: var(--su-marca); border-color: var(--marca); }
@media (min-width: 1000px) {
  .woo-pagina__corpo .woocommerce-MyAccount-navigation { float: left; width: 24%; }
  .woo-pagina__corpo .woocommerce-MyAccount-navigation ul { flex-direction: column; }
  .woo-pagina__corpo .woocommerce-MyAccount-content { margin-left: 28%; }
}
@media (max-width: 640px) {
  .woo-pagina__corpo table.shop_table_responsive thead { display: none; }
  .woo-pagina__corpo table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--filo-forte); }
  .woo-pagina__corpo table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .woo-pagina__corpo table.shop_table_responsive td::before { content: attr(data-title); font-weight: 600; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .dolce__piede .ajax_add_to_cart { transition: none; } }

/* ── «Dicono di noi»: guide e libri (La pasticceria) ── */
.stampa__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .stampa__elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.stampa__voce { padding: 24px 22px; border-radius: var(--raggio-1); background: var(--panna); border: 1px solid var(--filo); }
.stampa__voce .occhiello { margin: 0 0 8px; }
.stampa__titolo { margin: 0 0 12px; font-family: var(--font-titolo); font-weight: 400; font-size: 20px; line-height: 1.25; letter-spacing: .02em; color: var(--inchiostro); }
.stampa__voce p:last-child { margin: 0; font: 400 15px/1.6 var(--font-testo); color: var(--inchiostro-tenue, var(--inchiostro)); }
/* cronologia con 7 tappe (testi dai libri) */
@media (min-width: 1000px) { .cronologia__linea { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px; } .cronologia__linea b { font-size: 28px; } }