/* Pubbly Led · la home del negozio (ristrutturazione 09/10/2026)
   Colori, icone e logo del kit; caratteri Archivo (titoli, prezzi, etichette) e Instrument Sans (testo). */

@font-face {
  font-family: "Archivo";
  src: url("/assets/font/archivo-var-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/font/instrument-sans-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --turchese: #0298B9;
  --logo: #0091B3;
  --inchiostro: #0C1922;
  --grigio: #545D69;
  --antracite: #13232A;
  --azzurro-1: #E8EFF3;
  --azzurro-2: #DDF5F9;
  --azzurro-3: #EEF3F6;
  --bianco: #FFFFFF;
  --filo: #CAD7DE;
  --errore: #C0262D;

  --linea: rgba(12, 25, 34, .1);
  --linea-forte: rgba(12, 25, 34, .18);
  --turchese-14: rgba(2, 152, 185, .14);
  --turchese-06: rgba(2, 152, 185, .06);

  --f-titoli: "Archivo", "Arial Narrow", Arial, system-ui, sans-serif;
  --f-testo: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1280px;
  --margine: clamp(20px, 12.57px + 1.905vw, 40px);
  --spazio: clamp(72px, 54.17px + 4.571vw, 120px);
  --r-btn: 10px;
  --r-scheda: 16px;
  --h-btn: 52px;
  --testata: 80px;
  --annuncio: 36px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ombra: 0 22px 44px -24px rgba(12, 25, 34, .38), 0 2px 6px -2px rgba(12, 25, 34, .08);
  --cookie-h: 0px;
}

/* ─── base ─── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; min-width: 320px; overflow-x: clip;
  font-family: var(--f-testo); font-weight: 400; font-stretch: 100%;
  font-size: clamp(16px, 15.63px + .0952vw, 17px); line-height: 1.6;
  color: var(--inchiostro); background: var(--bianco);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-titoli); color: inherit; text-wrap: balance; }
h2 { font-size: clamp(30px, 24.8px + 1.333vw, 44px); line-height: 1.06; font-weight: 800; font-stretch: 108%; letter-spacing: -.015em; }
h3 { font-size: clamp(17px, 15.886px + .2857vw, 20px); line-height: 1.22; font-weight: 700; font-stretch: 100%; letter-spacing: -.005em; }
:focus-visible { outline: 2px solid var(--turchese); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--turchese); color: var(--bianco); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.sr, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r-btn);
  background: var(--turchese); color: var(--bianco); font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--margine)); margin: 0 auto; padding-inline: var(--margine); }
.num, .prezzo { font-variant-numeric: tabular-nums; }

.etichetta {
  font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%;
  font-size: 12px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}

/* ─── pulsanti ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h-btn); padding: 0 24px; border-radius: var(--r-btn);
  font-family: var(--f-testo); font-size: 16px; font-weight: 600; line-height: 1.15; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 20px; height: 20px; }
.btn--primario { background: var(--turchese); color: var(--bianco); }
.btn--primario:hover { background: var(--logo); }
.btn--contorno { border-color: var(--turchese); color: var(--logo); background: transparent; }
.btn--contorno:hover { background: var(--turchese); color: var(--bianco); }
.btn--testo { color: var(--inchiostro); background: transparent; }
.btn--testo:hover { background: var(--azzurro-3); }
.btn--piccolo { min-height: 44px; padding: 0 16px; font-size: 15px; gap: 8px; }
.btn--piccolo .ico { width: 18px; height: 18px; }
.btn--mini { min-height: 38px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn--largo { width: 100%; }

.link-freccia {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--logo);
  text-decoration: none; padding-block: 6px;
}
.link-freccia .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-freccia:hover { color: var(--inchiostro); }
.link-freccia:hover .ico { transform: translateX(4px); }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 8px; border-radius: 6px;
  background: var(--azzurro-2); color: var(--inchiostro);
  font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 11px; line-height: 1.1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.badge .ico { width: 14px; height: 14px; color: var(--turchese); stroke-width: 2; }
.badge--preventivo { background: var(--azzurro-2); color: var(--inchiostro); }

/* ─── 3.0 barra annunci (chiara: azzurro, testo inchiostro, furgone turchese) ─── */
.annuncio { background: var(--azzurro-2); color: var(--inchiostro); position: relative; z-index: 41; }
.annuncio__link {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--annuncio);
  font-size: 13px; font-weight: 500; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}
.annuncio__link .ico { width: 18px; height: 18px; color: var(--turchese); stroke-width: 1.8; }
.annuncio__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── 3.1 intestazione ─── */
.testata {
  position: sticky; top: 0; z-index: 40; height: var(--testata);
  background: var(--bianco); border-bottom: 1px solid transparent;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.testata__in { height: 100%; display: flex; align-items: center; gap: 24px; transition: transform .3s var(--ease); }
.marchio { display: block; flex: 0 0 auto; border-radius: 6px; transition: transform .3s var(--ease); transform-origin: left center; }
.marchio img { width: 56px; height: 56px; }
.menu { flex: 1 1 auto; display: flex; justify-content: center; }
.menu__lista { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.menu__lista a {
  position: relative; display: block; padding: 8px 2px; font-size: 15.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.menu__lista a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--turchese); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.menu__lista a:hover::after, .menu__lista a.is-qui::after { transform: none; }
.menu__wa { display: none; }
.testata__azioni { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.testata__ico {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  color: var(--inchiostro); transition: background-color .2s var(--ease);
}
.testata__ico:hover { background: var(--azzurro-3); }
.testata__ico .ico { width: 24px; height: 24px; }
.testata__menu { display: none; }
.testata__menu .ico--chiudi { display: none; }
.contatore {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; background: var(--turchese); color: var(--bianco);
  font-family: var(--f-titoli); font-weight: 700; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bianco);
}
.contatore[hidden] { display: none; }
.contatore.salta { animation: salta .5s var(--ease-out); }
@keyframes salta { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }

/* scorrendo: 80 → 64 px (senza spostare la pagina: si sposta solo la barra) */
.is-scrolled .testata { transform: translateY(-16px); border-bottom-color: var(--linea); box-shadow: 0 10px 24px -20px rgba(12, 25, 34, .5); }
.is-scrolled .testata__in { transform: translateY(8px); }
.is-scrolled .marchio { transform: scale(.82); }

/* ─── sezioni ─── */
.sezione { padding-block: var(--spazio); }
.sezione--azzurra { background: var(--azzurro-1); }
.sezione--contatti { background: var(--azzurro-3); }
.sezione--filo { padding-top: 0; }
.sezione--filo > .wrap { border-top: 1px solid var(--linea); padding-top: var(--spazio); }
.testa-sezione { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 20px + 2vw, 48px); }
.testa-sezione h2 { max-width: 640px; }
.testa-sezione__lato { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.nota-spedizione { display: inline-flex; align-items: center; gap: 10px; color: var(--grigio); font-size: 15px; }
.nota-spedizione .ico { color: var(--turchese); width: 22px; height: 22px; }
.sotto { color: var(--grigio); margin-top: 14px; font-size: clamp(16px, 15.26px + .19vw, 18px); }

/* ─── 3.2 HERO · chiara: le croci in fila, dalla più piccola alla più grande ───
   Computer (da 1024 px): alta quanto lo schermo meno barra annunci e intestazione, mai oltre 780 px. A sinistra
   titolo, testo, riquadro d'acquisto e tre fatti; a destra le tre croci in proporzione vera (64 : 90 : 114),
   appoggiate sulla stessa linea di base, sotto il titolo e accanto al riquadro. Telefono: prima le croci. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--inchiostro);
  background: linear-gradient(180deg, var(--bianco) 0%, var(--bianco) 38%, var(--azzurro-3) 100%);
  --sopra: calc(var(--annuncio) + var(--testata));
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(560px, calc(100vh - var(--sopra)), 780px);
  min-height: clamp(560px, calc(100svh - var(--sopra)), 780px);
}
/* sotto più spazio che sopra (57 px = banner cookie di 47 px + 10): riquadro e tre fatti restano sopra il banner */
.hero__in { position: relative; z-index: 1; padding-block: 30px 57px; }
/* titolo su 3 righe (13.3em di larghezza); il corpo scende con la larghezza e con l'altezza dello schermo */
.hero__titolo {
  width: min(13.3em, 100%);
  font-size: clamp(36px, min(4.17vw, 6.5vh + 2px, 30.5vh - 170px), 60px);
  font-size: clamp(36px, min(4.17vw, 6.5svh + 2px, 30.5svh - 170px), 60px);
  line-height: 1.02; font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; text-wrap: balance;
}
.led { color: var(--turchese); text-shadow: 0 0 16px rgba(2, 152, 185, .34), 0 0 36px rgba(2, 152, 185, .16); }
.hero__testo {
  margin-top: clamp(10px, 1.6vh, 16px); margin-top: clamp(10px, 1.6svh, 16px);
  max-width: 600px; color: var(--grigio); font-size: clamp(16px, 15.63px + .0952vw, 17px); line-height: 1.55;
}

/* il riquadro d'acquisto: una scheda bianca */
.acquisto {
  width: min(616px, 52vw);
  margin-top: clamp(14px, 2.4vh, 24px); margin-top: clamp(14px, 2.4svh, 24px);
  padding: 16px 20px 20px; border-radius: 16px;
  background: var(--bianco); border: 1px solid var(--filo);
  box-shadow: 0 26px 50px -34px rgba(12, 25, 34, .32), 0 2px 8px -4px rgba(12, 25, 34, .08);
}
.acquisto__testa { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.acquisto__titolo { font-size: 14px; font-weight: 500; color: var(--grigio); }

/* 1 · Farmacia | Parafarmacia: interruttore a due voci, la voce scelta su bianco */
.tipo { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--azzurro-3); }
.tipo::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px;
  background: var(--bianco); box-shadow: 0 1px 2px rgba(12, 25, 34, .08), 0 6px 14px -8px rgba(12, 25, 34, .3);
  transition: transform .3s var(--ease);
}
.hero.is-para .tipo::before { transform: translateX(100%); }
.tipo__voce { position: relative; z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.tipo__voce input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tipo__voce span {
  display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 18px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--grigio); white-space: nowrap; transition: color .25s var(--ease), transform .15s var(--ease);
}
.tipo__voce input:checked + span { color: var(--inchiostro); }
.tipo__voce:hover span { color: var(--inchiostro); }
.tipo__voce:active span { transform: scale(.97); }
.tipo__voce input:focus-visible + span { outline: 2px solid var(--turchese); outline-offset: 1px; }

/* 2 · le misure: tre schede bianche, con la sagoma della croce in proporzione (64 piccola, 90 media, 114 grande) */
.taglie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.taglia {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px 8px 8px;
  border-radius: 12px; border: 1px solid var(--filo); background: var(--bianco);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease), opacity .3s var(--ease);
}
.taglia input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.taglia__croce { flex: 0 0 38px; height: 38px; display: grid; place-items: center; color: var(--turchese); }
.taglia__croce .ico {
  width: calc(36px * var(--lato) / 114); height: calc(36px * var(--lato) / 114); stroke-width: var(--sw, 1.7);
  fill: rgba(2, 152, 185, .08); transition: fill .2s var(--ease);
}
.taglia__testo { display: flex; flex-direction: column; min-width: 0; }
.taglia__nome { font-family: var(--f-titoli); font-weight: 700; font-size: 16px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.taglia__prezzo { font-size: 13.5px; color: var(--grigio); font-variant-numeric: tabular-nums; white-space: nowrap; }
.taglia:hover { border-color: var(--turchese); }
.taglia:active { transform: scale(.97); }
.taglia:has(input:checked), .taglia.is-scelta { border-color: var(--turchese); box-shadow: inset 0 0 0 1px var(--turchese); background: var(--azzurro-2); }
.taglia:has(input:checked) .taglia__croce .ico, .taglia.is-scelta .taglia__croce .ico { fill: rgba(2, 152, 185, .22); }
.taglia:has(input:checked) .taglia__prezzo, .taglia.is-scelta .taglia__prezzo { color: var(--inchiostro); }
.taglia:has(input:focus-visible) { outline: 2px solid var(--turchese); outline-offset: 2px; }
/* Parafarmacia: c'è solo la 64x64, la 90 e la 114 si spengono */
.taglia.is-spenta { cursor: not-allowed; background: var(--azzurro-3); border-color: var(--azzurro-1); box-shadow: none; opacity: .5; transform: none; }
.taglia.is-spenta .taglia__croce { color: var(--grigio); }
.taglia.is-spenta .taglia__croce .ico { fill: transparent; }

.scelto { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.scelto__mini { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--azzurro-3); }
.scelto__mini img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; transition: opacity .3s var(--ease); }
.scelto__mini img.esce { opacity: 0; }
.scelto__dati { flex: 1 1 auto; min-width: 0; }
.scelto__nome { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--grigio); }
.scelto__prezzo { font-family: var(--f-titoli); font-weight: 800; font-stretch: 100%; font-size: clamp(28px, 25.77px + .5714vw, 34px); line-height: 1.06; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 1px; }
.scelto__nota { font-size: 13px; line-height: 1.35; color: var(--grigio); margin-top: 3px; }
.acquisto__tutte { flex: 0 0 auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; font-size: 14px; font-weight: 600; color: var(--logo); text-decoration: none; white-space: nowrap; }
.acquisto__tutte .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.acquisto__tutte:hover { color: var(--inchiostro); }
.acquisto__tutte:hover .ico { transform: translateX(3px); }
.rullo { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.rullo__val { display: inline-block; }
.rullo__val.entra { animation: rullo-entra .34s var(--ease-out) both; }
.rullo__val.esce { position: absolute; left: 0; top: 0; animation: rullo-esce .26s var(--ease) both; }
@keyframes rullo-entra { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rullo-esce { from { transform: none; opacity: 1; } to { transform: translateY(-70%); opacity: 0; } }

.acquisto__azioni { display: flex; gap: 12px; margin-top: 16px; }
.acquisto__azioni .btn { flex: 1 1 auto; min-width: 0; padding-inline: 20px; }
.acquisto__azioni .btn--primario { flex: 0 0 auto; }

.fatti {
  display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: min(720px, 100%);
  margin-top: clamp(12px, 2vh, 18px); margin-top: clamp(12px, 2svh, 18px);
  font-size: 13.5px; color: var(--grigio);
}
.fatti li { display: inline-flex; align-items: center; gap: 8px; }
.fatti .ico { color: var(--turchese); width: 18px; height: 18px; stroke-width: 1.9; }

/* le croci: 64 → 90 → 114, larghe in proporzione al lato vero, sulla stessa linea di base */
.croci { position: relative; z-index: 0; --gap: clamp(10px, 1.5vw, 22px); --sotto: 44px; }
.croci::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -4%; right: -4%; top: -14%; bottom: 8%;
  background: url("/assets/img/kit/matrice-led.svg") repeat center / 260px 156px; opacity: .5;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
.croci__fila { --n: 3; --somma: 268; container-type: inline-size; position: relative; display: flex; align-items: flex-end; gap: var(--gap); max-width: calc(940px + 2 * var(--gap)); margin-inline: auto; }
/* la linea di base: un filo sotto le croci, dove cadono le ombre */
.croci__fila::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: var(--sotto); height: 1px;
  background: linear-gradient(90deg, transparent, var(--filo) 10%, var(--filo) 90%, transparent);
}
.croce {
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  width: calc((100cqw - (var(--n, 3) - 1) * var(--gap)) * var(--lato) / var(--somma, 268));
  /* tutte le croci restano accese e piene: si sceglie, non si spegne (Domenico, 09/10: niente croci grigie) */
  opacity: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.croce__img { position: relative; display: block; width: 100%; aspect-ratio: 1; }
/* ombra morbida a terra: un'ellisse grigia sfumata, non nera; resta ferma quando la croce si alza */
.croce__img::after {
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -5%; height: 10%;
  background: radial-gradient(closest-side, rgba(12, 25, 34, .26), rgba(12, 25, 34, .08) 60%, transparent);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.croce__img img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .3s var(--ease), opacity .4s var(--ease); }
.croce__para { opacity: 0; }
.croce__misura {
  position: relative; display: block; height: calc(var(--sotto) - 14px); margin-top: 14px; padding-top: 2px;
  font-family: var(--f-titoli); font-weight: 700; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--grigio);
  white-space: nowrap; transition: color .3s var(--ease);
}
.croce__misura::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 32px; height: 2px; margin-left: -16px; border-radius: 2px;
  background: var(--turchese); transform: scaleX(0); transition: transform .3s var(--ease);
}
.croce.is-scelta { opacity: 1; }
.croce.is-scelta .croce__img img { transform: translateY(-8px); }
/* la scelta si vede da una luce turchese a terra, al posto dell'ombra grigia */
.croce.is-scelta .croce__img::after { transform: scaleX(1.02); opacity: 1; background: radial-gradient(closest-side, rgba(2, 152, 185, .42), rgba(2, 152, 185, .14) 60%, transparent); }
.croce.is-scelta .croce__misura { color: var(--logo); }
.croce.is-scelta .croce__misura::after { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .croce:not(.is-scelta):hover .croce__img img { transform: translateY(-4px); }
  .croce:not(.is-scelta):hover .croce__misura { color: var(--inchiostro); }
}
.croce:focus-visible { outline: none; }
/* Parafarmacia: la 64x64 diventa la Parafarmacia (blu e rosso), la 90 e la 114 si spengono e non si cliccano */
.hero.is-para .croce--64 .croce__farmacia, .hero.is-para .croce--90 .croce__farmacia { opacity: 0; }
.hero.is-para .croce--64 .croce__para, .hero.is-para .croce--90 .croce__para { opacity: 1; }
.hero.is-para .croce--114 { opacity: .18; filter: grayscale(1); pointer-events: none; cursor: default; }

/* l'a capo del titolo vale solo da computer (dopo «farmacie»); da tablet e telefono il titolo va a capo da solo */
@media (max-width: 1023px) { .hero__titolo .a-capo { display: none; } }

/* computer: titolo in alto per tutta la larghezza, su DUE righe («Croci a LED per farmacie» / «e insegne luminose a
   Codevigo (Padova)»), così l'angolo in alto a destra non resta vuoto; sotto, a sinistra testo, riquadro e fatti, a
   destra le croci, grandi quanto la colonna e mai oltre il contenitore. La seconda riga è lunga 20,8 em: il corpo
   arriva al massimo a 58 px (1205 px nei 1280 del contenitore) */
@media (min-width: 1024px) {
  .hero__titolo {
    width: auto;
    font-size: clamp(36px, min(4.17vw, 6.5vh + 2px, 30.5vh - 170px), 58px);
    font-size: clamp(36px, min(4.17vw, 6.5svh + 2px, 30.5svh - 170px), 58px);
  }
  .hero__in {
    display: grid; column-gap: 28px; align-items: start;
    grid-template-columns: minmax(0, min(616px, 52vw)) minmax(0, 1fr);
    grid-template-areas: "titolo titolo" "testo croci" "acquisto croci" "fatti fatti";
  }
  .hero__titolo { grid-area: titolo; }
  .hero__testo { grid-area: testo; }
  .acquisto { grid-area: acquisto; width: auto; }
  .fatti { grid-area: fatti; }
  /* le croci si appoggiano in basso, sulla linea del fondo del riquadro, e riempiono la colonna destra fino al bordo
     del contenitore (mai oltre); la trama di puntini sale fin sotto il titolo */
  .croci { grid-area: croci; align-self: end; margin-bottom: -12px; --gap: 12px; }
  .croci::before { top: -42%; }
}

/* apertura: le croci salgono una dopo l'altra (dalla piccola alla grande), il titolo sale riga per riga, «LED» si
   accende come un'insegna, poi entra il riquadro */
@media (prefers-reduced-motion: no-preference) {
  .js .croce { animation: sale-croce .8s var(--ease-out) backwards; animation-delay: calc(.15s + var(--i, 0) * .13s); }
  .js .hero__titolo { animation: compari 0s linear 2.4s both; opacity: 0; }
  .js .hero__titolo.pronto { opacity: 1; animation: none; }
  .js .hero__titolo .riga { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .js .hero__titolo .riga > span { display: inline-block; transform: translateY(105%); }
  .js .hero__titolo.pronto .riga > span { animation: sali .7s var(--ease-out) both; animation-delay: calc(.12s + var(--i, 0) * .085s); }
  .js .hero__titolo.pronto .led { animation: insegna .9s linear .86s both; }
  .js .hero__testo { animation: su .6s var(--ease-out) .5s both; }
  .js .acquisto { animation: su .6s var(--ease-out) .85s both; }
  .js .fatti { animation: su .6s var(--ease-out) 1.05s both; }
}
@keyframes sale-croce { from { opacity: 0; transform: translateY(22px); } }
@keyframes compari { to { opacity: 1; } }
@keyframes sali { to { transform: none; } }
@keyframes su { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes insegna {
  0% { color: #B9C6CE; text-shadow: none; }
  10% { color: var(--turchese); text-shadow: 0 0 16px rgba(2, 152, 185, .34); }
  15% { color: #B9C6CE; text-shadow: none; }
  30% { color: #B9C6CE; text-shadow: none; }
  35% { color: var(--turchese); text-shadow: 0 0 16px rgba(2, 152, 185, .34); }
  41% { color: #C4D0D7; text-shadow: none; }
  55% { color: var(--turchese); text-shadow: 0 0 16px rgba(2, 152, 185, .34), 0 0 36px rgba(2, 152, 185, .16); }
  100% { color: var(--turchese); text-shadow: 0 0 16px rgba(2, 152, 185, .34), 0 0 36px rgba(2, 152, 185, .16); }
}

/* ─── 3.3 griglia del negozio ─── */
.griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.scheda {
  position: relative; display: flex; flex-direction: column; border-radius: var(--r-scheda); background: var(--bianco);
  overflow: hidden; cursor: pointer; isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.scheda__foto { position: relative; aspect-ratio: 1; background: var(--azzurro-3); overflow: hidden; }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
/* i disegni delle croci: tutti alla stessa scala visiva, interi, sul fondo azzurro */
.scheda__foto--disegno img { object-fit: contain; padding: 17% 14% 11%; }
.scheda__foto .badge { position: absolute; left: 12px; top: 12px; }
.scheda__corpo { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1 1 auto; }
.scheda__nome { font-size: clamp(17px, 15.886px + .2857vw, 20px); }
.scheda__prezzo, .evidenza__prezzo, .tabella__prezzi td {
  font-family: var(--f-titoli); font-weight: 800; font-stretch: 100%; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.scheda__prezzo { font-size: clamp(17px, 15.886px + .2857vw, 20px); margin-bottom: 10px; }
.scheda__corpo .btn { margin-top: auto; }
.scheda--larga { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.scheda--larga .scheda__foto { flex: 0 0 240px; width: 240px; }
.scheda--larga .scheda__corpo { padding: 24px 32px; gap: 8px; justify-content: center; align-items: flex-start; }
.scheda--larga .scheda__nome { font-size: clamp(19px, 16.03px + .762vw, 26px); }
.scheda--larga .scheda__prezzo { font-size: clamp(19px, 16.03px + .762vw, 26px); margin-bottom: 0; }
.scheda__fondo { padding: 24px 32px; margin-left: auto; }
.scheda__fondo .btn { min-width: 220px; }
/* 2 Step: il cono gelato «su preventivo» e la Tabacchi larga su due colonne, accanto a lui (computer) */
.scheda__prezzo--richiesta { color: var(--grigio); font-weight: 700; white-space: normal; }
.rapida__prezzo--richiesta { color: var(--grigio); font-size: clamp(20px, 18.51px + .381vw, 24px); }
@media (min-width: 900px) {
  .griglia .scheda--larga { grid-column: span 2; display: grid; grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: stretch; }
  .griglia .scheda--larga .scheda__foto { width: auto; grid-row: span 2; aspect-ratio: auto; min-height: 200px; }
  .griglia .scheda--larga .scheda__foto img { position: absolute; inset: 0; }
  .griglia .scheda--larga .scheda__corpo { padding: 24px 24px 8px; justify-content: flex-end; }
  .griglia .scheda--larga .scheda__fondo { padding: 8px 24px 24px; margin-left: 0; }
  .griglia .scheda--larga .scheda__fondo .btn { min-width: 0; width: 100%; }
}
/* 2 Step: le cinque croci della pagina Croci — sul computer grande tutte e cinque in una riga; sul computer piccolo
   (900-1179 px) le tre Farmacia sopra e le due Parafarmacia sotto, al centro; sotto i 900 px la griglia è a due colonne
   (regola del telefono più sotto) e l'ultima, se resta da sola, prende tutta la riga (foto a sinistra, testo a destra) */
@media (min-width: 900px) and (max-width: 1179px) {
  .griglia--croci { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
  .griglia--croci > .scheda { grid-column: span 2; }
  .griglia--croci > .scheda:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}
@media (min-width: 1180px) {
  .griglia--croci:has(> .scheda:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 899px) {
  .griglia--croci > .scheda:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 42% minmax(0, 1fr); }
  .griglia--croci > .scheda:last-child:nth-child(odd) .scheda__foto { aspect-ratio: auto; min-height: 170px; }
  .griglia--croci > .scheda:last-child:nth-child(odd) .scheda__foto img { position: absolute; inset: 0; }
  .griglia--croci > .scheda:last-child:nth-child(odd) .scheda__corpo { justify-content: center; padding: 14px 14px 16px; }
  .griglia--croci > .scheda:last-child:nth-child(odd) .scheda__nome { min-height: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
  .scheda:hover .scheda__foto img { transform: scale(1.03); }
}

/* ─── 3.4 scheda tecnica e confronto ─── */
.tecnica { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(40px, 4.4vw, 64px); align-items: start; }
.tecnica__foto { position: sticky; top: 96px; border-radius: var(--r-scheda); overflow: hidden; background: var(--azzurro-3); }
.tecnica__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.punti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; margin-top: 32px; }
.punti li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.45; }
.punti .ico { width: 28px; height: 28px; color: var(--turchese); stroke-width: 1.6; margin-top: -2px; }

.confronto { margin-top: 44px; }
.confronto__scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: var(--r-scheda); border: 1px solid var(--linea); }
.confronto__scorri:focus-visible { outline-offset: 2px; }
.tabella { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { padding: 13px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linea); transition: background-color .2s var(--ease); }
.tabella tr:last-child > * { border-bottom: 0; }
.tabella thead th { vertical-align: bottom; padding-top: 18px; }
.tabella thead img { width: 56px; height: 56px; padding: 6px; border-radius: 10px; object-fit: contain; margin-bottom: 10px; background: var(--azzurro-3); }
.tabella thead .etichetta { display: block; color: var(--grigio); font-size: 11px; }
.tabella__misura { display: block; font-family: var(--f-titoli); font-weight: 800; font-size: 19px; margin-top: 2px; }
.tabella tbody th { width: 96px; color: var(--grigio); }
.tabella tbody th .etichetta { font-size: 11px; }
.tabella tbody th, .tabella thead td, .tabella .tabella__vuota { position: sticky; left: 0; z-index: 1; background: var(--bianco); }
.tabella__prezzi td { font-size: 16px; }
.tabella__azioni td { padding-top: 14px; padding-bottom: 16px; }
.tabella .is-col { background: var(--turchese-06); }
.tabella thead th.is-col { box-shadow: inset 0 3px 0 var(--turchese); }

/* ─── 3.5 Tabacchi in evidenza ─── */
.evidenza {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 4vw, 72px);
  padding: clamp(24px, 3vw, 48px); border-radius: 20px; background: var(--bianco);
}
.evidenza__foto { display: grid; place-items: center; }
.evidenza__foto img { width: 100%; max-width: 440px; aspect-ratio: 4 / 5; object-fit: contain; }
.evidenza__testo h2 { max-width: 520px; }
.spunte { display: grid; gap: 10px; margin-top: 24px; }
.spunte li { display: flex; align-items: flex-start; gap: 12px; }
.spunte .ico { width: 22px; height: 22px; color: var(--turchese); stroke-width: 2.2; margin-top: 2px; }
.evidenza__prezzo { margin-top: 28px; font-size: clamp(28px, 25.77px + .5714vw, 34px); line-height: 1.1; }
.evidenza__nota { font-size: 14px; color: var(--grigio); margin-top: 4px; }
/* «, spedizione esclusa» accanto al prezzo grande (pagina Tabacchi): corpo del testo. «310 € + IVA» non si spezza mai;
   da telefono «spedizione esclusa» va sulla sua riga, senza la virgola (mai una virgola sola a fine riga) */
.evidenza__cifra { white-space: nowrap; }
.evidenza__escl { font-family: var(--f-testo, inherit); font-weight: 500; font-size: 16px; letter-spacing: 0; color: var(--grigio); white-space: nowrap; }
.evidenza__prezzo:has(.evidenza__escl) { white-space: normal; }
@media (max-width: 599px) {
  .evidenza__escl { display: block; margin-top: 4px; line-height: 1.35; }
  .evidenza__virgola { display: none; }
}

.opzione { margin-top: 24px; }
.opzione + .opzione { margin-top: 18px; }
.opzione__nome { display: block; padding: 0; margin-bottom: 10px; font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.opzione__valori { display: flex; flex-wrap: wrap; gap: 8px; }
.pillola { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pillola input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pillola span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1.5px solid var(--linea-forte); background: var(--bianco); font-size: 15px; font-weight: 500;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .15s var(--ease);
}
.pillola:hover span { border-color: var(--turchese); }
.pillola:active span { transform: scale(.97); }
.pillola input:checked + span { border-color: var(--turchese); background: var(--turchese-14); font-weight: 600; }
.pillola input:focus-visible + span { outline: 2px solid var(--turchese); outline-offset: 2px; }
.opzione.is-errore .pillola span { border-color: var(--errore); }
.opzione__avviso { margin-top: 8px; color: var(--errore); font-size: 14px; font-weight: 600; }
.opzione__testo { width: 100%; max-width: 360px; }

.evidenza__compra { display: flex; align-items: flex-end; gap: 16px; margin-top: 24px; }
.evidenza__compra .btn--largo { flex: 1 1 auto; width: auto; }
.evidenza .link-freccia { margin-top: 14px; }

.quantita__nome { display: block; margin-bottom: 8px; font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.quantita__ctrl { display: inline-flex; align-items: center; height: var(--h-btn); border: 1.5px solid var(--linea-forte); border-radius: var(--r-btn); background: var(--bianco); }
.quantita__ctrl button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--inchiostro); border-radius: var(--r-btn); }
.quantita__ctrl button:hover { color: var(--logo); }
.quantita__ctrl button:active { transform: scale(.92); }
.quantita__ctrl .ico { width: 18px; height: 18px; }
.quantita__ctrl input {
  width: 40px; height: 100%; border: 0; text-align: center; background: transparent; padding: 0;
  font-family: var(--f-titoli); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.quantita__ctrl input::-webkit-outer-spin-button, .quantita__ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantita__ctrl input:focus-visible { outline: none; }
.quantita__ctrl:focus-within { border-color: var(--turchese); }

/* ─── 3.6 come si ordina ─── */
.testa-sezione__btn { flex: 0 0 auto; }
.passi { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: passo; }
.passi::before, .passi::after {
  content: ""; position: absolute; left: 34px; right: calc((100% - 72px) / 4 - 34px); top: 34px; height: 2px; border-radius: 2px; background: var(--azzurro-1);
}
.passi::after { background: var(--turchese); transform-origin: left center; transform: scaleX(var(--p, 1)); }
.passo {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 0 22px 26px 0;
}
.passo__num {
  display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--bianco); box-shadow: inset 0 0 0 2px var(--turchese);
  font-family: var(--f-titoli); font-weight: 800; font-stretch: 108%; font-size: 26px; color: var(--turchese); font-variant-numeric: tabular-nums;
}
.passo__ico { width: 28px; height: 28px; color: var(--turchese); margin-top: 8px; }
.passo p { font-size: 16.5px; line-height: 1.5; max-width: 280px; }

/* ─── 3.7 su misura ─── */
.misura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
.voci { display: grid; gap: 14px; margin-top: 28px; }
.voci li { display: flex; align-items: center; gap: 14px; }
.voci .ico { width: 26px; height: 26px; color: var(--turchese); }
.misura__frase { margin-top: 24px; color: var(--grigio); max-width: 520px; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
/* ─── 3.9 chi siamo ─── */
.chi { background: var(--azzurro-2); padding-block: clamp(40px, 30px + 2.6vw, 64px); }
.chi__in { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 3vw, 48px); }
.chi__foto { width: 160px; height: 160px; border-radius: 16px; overflow: hidden; background: var(--bianco); }
.chi__foto img { width: 100%; height: 100%; object-fit: cover; }
.chi__testo h2 { font-size: clamp(24px, 21.03px + .762vw, 32px); margin-bottom: 10px; }
.chi__testo p { max-width: 640px; }
.chi__testo p + p { margin-top: 4px; }
.chi__btn { background: var(--bianco); }
.chi__btn.btn--primario { background: var(--turchese); }
.chi__btn.btn--primario:hover { background: var(--logo); }

/* ─── 3.10 domande frequenti ─── */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq__testa { position: sticky; top: 104px; }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda:first-child { border-top: 1px solid var(--linea); }
.domanda h3 { font-size: 18px; }
.domanda button {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px 0;
  text-align: left; font-family: var(--f-titoli); font-weight: 700; font-size: 18px; line-height: 1.3;
}
.domanda button:hover { color: var(--logo); }
.domanda__segno { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--azzurro-3); transition: transform .35s var(--ease), background-color .25s var(--ease); }
.domanda__segno::before, .domanda__segno::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: currentColor; }
.domanda__segno::after { transform: rotate(90deg); }
.domanda button[aria-expanded="true"] .domanda__segno { transform: rotate(45deg); background: var(--azzurro-2); color: var(--logo); }
.risposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.risposta > div { overflow: hidden; }
.risposta p { padding: 0 56px 22px 0; color: var(--grigio); }
.risposta a { color: var(--logo); font-weight: 600; }
.domanda.is-aperta .risposta { grid-template-rows: 1fr; }

/* ─── 3.11 contatti ─── */
.contatti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.contatti__ditta { margin-top: 28px; font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 13px; letter-spacing: .08em; }
.contatti__riga { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.contatti__riga .ico { color: var(--turchese); width: 22px; height: 22px; }
.contatti__riga a { text-decoration: none; border-bottom: 1px solid var(--linea-forte); }
.contatti__riga a:hover { color: var(--logo); border-color: currentColor; }
.contatti__testo .btn { margin-top: 28px; }
.campo { margin-bottom: 16px; }
.campo label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-btn);
  border: 1.5px solid transparent; background: var(--azzurro-3); font-size: 16px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.campo textarea { resize: vertical; min-height: 116px; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: #7A838E; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--turchese); background: var(--bianco); box-shadow: 0 0 0 4px var(--turchese-14); }
.campo.is-errore input, .campo.is-errore textarea { border-color: var(--errore); background: var(--bianco); }
.campo__errore { margin-top: 6px; color: var(--errore); font-size: 13.5px; font-weight: 600; }
.campo__aiuto { margin-top: 6px; color: var(--grigio); font-size: 13.5px; line-height: 1.45; }

/* ─── 3.12 footer (chiaro: fondo azzurro, testi inchiostro e grigio, filo #CAD7DE) ─── */
.piede { background: var(--azzurro-3); border-top: 1px solid var(--filo); color: var(--grigio); padding-block: clamp(56px, 46px + 2.6vw, 80px) 28px; font-size: 15px; }
.piede__griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
/* il logo originale col suo fondo bianco, senza altri riquadri intorno */
/* il logo senza riquadro, appoggiato sul fondo azzurro (SPEC-v2-CHIARO § A): file con lo sfondo trasparente */
.piede__logo { display: inline-block; }
.piede__logo img { width: 104px; height: 104px; }
.piede__nome { margin-top: 16px; color: var(--inchiostro); font-family: var(--f-titoli); font-weight: 800; font-stretch: 108%; font-size: 20px; }
.piede__marchio p:last-child { margin-top: 6px; max-width: 300px; }
.piede__titolo { color: var(--inchiostro); font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.piede__col li + li { margin-top: 8px; }
.piede a { text-decoration: none; }
.piede a:hover { color: var(--logo); text-decoration: underline; text-underline-offset: 3px; }
.piede__fondo { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filo); display: grid; gap: 8px; font-size: 13px; }
.piede__legale { color: var(--grigio); }
.firma a { color: var(--inchiostro); font-weight: 600; }

/* ─── barra d'acquisto fissa e WhatsApp fisso (solo telefono) ─── */
.barra-acquisto, .wa-fisso { display: none; }

/* ─── velo, ricerca, scheda rapida, carrello ─── */
.velo { position: fixed; inset: 0; background: rgba(12, 25, 34, .28); opacity: 0; transition: opacity .26s var(--ease); }
.is-aperto > .velo, .is-aperto .velo { opacity: 1; }
body.bloccato { overflow: hidden; }

.ricerca { position: fixed; inset: 0; z-index: 70; }
.ricerca__pannello {
  position: relative; z-index: 1; background: var(--bianco); padding-block: 18px 26px;
  box-shadow: 0 24px 48px -30px rgba(12, 25, 34, .5); transform: translateY(-16px); opacity: 0;
  transition: transform .26s var(--ease-out), opacity .2s var(--ease); max-height: 100svh; overflow-y: auto;
}
.ricerca.is-aperto .ricerca__pannello { transform: none; opacity: 1; }
.ricerca .velo { z-index: 0; }
.ricerca__campo { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--inchiostro); padding-bottom: 8px; }
.ricerca__campo > .ico { width: 24px; height: 24px; color: var(--grigio); }
.ricerca__campo input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--f-titoli); font-weight: 700; font-size: clamp(22px, 19px + .8vw, 30px); padding: 8px 0; }
.ricerca__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ricerca__risultati { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.ricerca__voce { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px; border-radius: 12px; text-align: left; text-decoration: none; transition: background-color .2s var(--ease); }
.ricerca__voce:hover, .ricerca__voce:focus-visible { background: var(--azzurro-3); }
.ricerca__voce img, .ricerca__voce .ricerca__ico { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--azzurro-3); }
.ricerca__voce img.is-disegno { object-fit: contain; padding: 7px; }
.ricerca__ico { display: grid; place-items: center; color: var(--turchese); }
.ricerca__ico .ico { width: 30px; height: 30px; }
.ricerca__nome { display: block; font-weight: 600; line-height: 1.3; font-size: 15px; }
.ricerca__prezzo { display: block; margin-top: 2px; font-family: var(--f-titoli); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ricerca__prezzo--preventivo { font-family: var(--f-testo); font-weight: 500; color: var(--grigio); }
.ricerca__vuota { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 4px; }
.ricerca__vuota img { width: 160px; }
.ricerca__vuota-testo { margin-top: 4px; font-weight: 600; text-align: center; }

.rapida { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.rapida__finestra {
  position: relative; z-index: 1; width: min(920px, 100%); max-height: calc(100svh - 48px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 20px; background: var(--bianco); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .26s var(--ease), transform .26s var(--ease-out);
}
.rapida.is-aperto .rapida__finestra { opacity: 1; transform: none; }
.rapida__maniglia { display: none; }
.rapida__chiudi { position: absolute; right: 12px; top: 12px; z-index: 2; background: var(--bianco); }
.rapida__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
/* prima il disegno della croce, poi le foto abbellite (miniature sotto per cambiarle) */
.rapida__galleria { position: relative; display: grid; align-items: center; background: var(--azzurro-3); min-height: 100%; }
.rapida__galleria-in { position: sticky; top: 0; bottom: 0; }
.rapida__foto { position: relative; }
.rapida__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .22s var(--ease); }
.rapida__foto img.is-disegno { object-fit: contain; padding: 13%; }
.rapida__foto img.is-intera { object-fit: contain; }
.rapida__foto img.esce { opacity: 0; }
.rapida__miniature { display: flex; justify-content: center; gap: 8px; padding: 0 16px 18px; }
.rapida__mini {
  width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--bianco);
  box-shadow: 0 0 0 1px var(--filo); transition: box-shadow .2s var(--ease), transform .15s var(--ease);
}
.rapida__mini:hover { box-shadow: 0 0 0 1px var(--turchese); }
.rapida__mini:active { transform: scale(.95); }
.rapida__mini.is-attiva { box-shadow: 0 0 0 2px var(--turchese); }
.rapida__mini img { width: 100%; height: 100%; object-fit: cover; }
.rapida__mini img.is-disegno { object-fit: contain; padding: 6px; }

.rapida__dati { padding: 36px 36px 32px; }
.rapida__dati .badge { margin-bottom: 12px; }
.rapida__nome { font-size: clamp(24px, 21.03px + .762vw, 30px); line-height: 1.1; font-weight: 800; font-stretch: 108%; letter-spacing: -.01em; padding-right: 36px; }
.rapida__prezzo { margin-top: 10px; font-family: var(--f-titoli); font-weight: 800; font-size: clamp(24px, 22.51px + .381vw, 28px); font-variant-numeric: tabular-nums; }
.rapida__nota { margin-top: 2px; font-size: 13.5px; color: var(--grigio); }
.rapida__frase { margin-top: 16px; }
.rapida__caratteristiche { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--azzurro-3); }
.rapida__caratteristiche summary { cursor: pointer; font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.rapida__caratteristiche summary::-webkit-details-marker { display: none; }
.rapida__caratteristiche summary .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.rapida__caratteristiche[open] summary .ico { transform: rotate(180deg); }
.rapida__caratteristiche ul { margin-top: 10px; display: grid; gap: 4px; font-size: 14.5px; }
.rapida__caratteristiche li { position: relative; padding-left: 16px; }
.rapida__caratteristiche li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--turchese); }
.rapida__compra {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: 12px;
  margin: 24px -36px 0; padding: 16px 36px 18px; background: var(--bianco); border-top: 1px solid var(--linea);
}
.rapida__compra .btn { flex: 1 1 auto; }
.rapida__wa { margin-top: 10px; }

.carrello { position: fixed; inset: 0; z-index: 90; }
.carrello__cassetto {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--bianco); box-shadow: -30px 0 60px -40px rgba(0, 0, 0, .5);
  transform: translateX(100%); transition: transform .26s var(--ease-out);
}
.carrello.is-aperto .carrello__cassetto { transform: none; }
.carrello__testa { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--linea); }
.carrello__titolo { font-size: 22px; font-weight: 800; font-stretch: 108%; }
.carrello__aggiunto { display: flex; align-items: center; gap: 10px; margin: 14px 24px 0; padding: 10px 14px; border-radius: 10px; background: var(--azzurro-2); font-weight: 600; font-size: 15px; }
.carrello__aggiunto .ico { color: var(--turchese); width: 22px; height: 22px; }
.carrello__vuoto { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 32px; }
.carrello__vuoto img { width: 180px; margin-bottom: 4px; }
.carrello__vuoto-titolo { font-family: var(--f-titoli); font-weight: 800; font-size: 20px; }
.carrello__vuoto p:not(.carrello__vuoto-titolo) { color: var(--grigio); max-width: 320px; }
.carrello__vuoto .btn { margin-top: 12px; }
.carrello__pieno { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.carrello__intestazione { display: flex; justify-content: space-between; padding: 16px 24px 8px; font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.carrello__righe { flex: 1 1 auto; overflow-y: auto; padding: 0 24px; overscroll-behavior: contain; }
.riga-c { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.riga-c__foto { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--azzurro-3); }
.riga-c__foto img { width: 100%; height: 100%; object-fit: cover; }
.riga-c__foto img.is-disegno { object-fit: contain; padding: 8px; }
.riga-c__nome { font-weight: 600; font-size: 15px; line-height: 1.3; }
.riga-c__scelte { margin-top: 4px; font-size: 13px; color: var(--grigio); line-height: 1.45; }
.riga-c__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.riga-c .quantita__ctrl { height: 38px; }
.riga-c .quantita__ctrl button { width: 34px; }
.riga-c .quantita__ctrl input { width: 30px; font-size: 15px; }
.riga-c__rimuovi { font-size: 13.5px; color: var(--grigio); text-decoration: underline; text-underline-offset: 2px; }
.riga-c__rimuovi:hover { color: var(--errore); }
.riga-c__totale { font-family: var(--f-titoli); font-weight: 800; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.carrello__piede { padding: 16px 24px 20px; border-top: 1px solid var(--linea); background: var(--bianco); }
.carrello__subtotale { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-titoli); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.carrello__subtotale > span:first-child { font-weight: 700; font-size: 16px; }
.carrello__nota { margin-top: 4px; font-size: 13px; color: var(--grigio); line-height: 1.45; }
.carrello__nota a { color: var(--logo); }
.carrello__note { margin: 14px 0 14px; }
.carrello__note label { font-size: 13.5px; }
.carrello__note textarea { min-height: 72px; font-size: 15px; }
.carrello__note .campo__aiuto { font-size: 12.5px; }
.carrello__piede .btn--testo { margin-top: 6px; min-height: 44px; }

/* ─── banner cookie (una riga) ─── */
.banner-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 8px 16px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--bianco); border-top: 1px solid var(--linea);
  font-size: 13px; line-height: 1.35; color: var(--grigio); box-shadow: 0 -8px 24px -18px rgba(12, 25, 34, .4);
}
.banner-cookie[hidden] { display: none; }
.banner-cookie p { min-width: 0; }
.banner-cookie a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.banner-cookie__ok { flex-shrink: 0; padding: 7px 18px; border-radius: 99px; background: var(--turchese); color: var(--bianco); font-size: 13px; font-weight: 600; line-height: 1.2; transition: background-color .2s var(--ease); }
.banner-cookie__ok:hover { background: var(--logo); }

/* ─── entrate allo scroll (non spostano l'impaginazione) ─── */
@media (prefers-reduced-motion: no-preference) {
  .js .rivela { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .rivela.in { opacity: 1; transform: none; }
  .js .griglia .rivela:nth-child(2), .js .passi .rivela:nth-child(2), .js .lavori-griglia .rivela:nth-child(4n+2), .js .fila-foto .rivela:nth-child(2), .js .coppia-foto .rivela:nth-child(2), .js .faq__lista .rivela:nth-child(2) { transition-delay: .07s; }
  .js .griglia .rivela:nth-child(3), .js .passi .rivela:nth-child(3), .js .lavori-griglia .rivela:nth-child(4n+3), .js .fila-foto .rivela:nth-child(3), .js .faq__lista .rivela:nth-child(3) { transition-delay: .14s; }
  .js .griglia .rivela:nth-child(4), .js .passi .rivela:nth-child(4), .js .lavori-griglia .rivela:nth-child(4n+4), .js .faq__lista .rivela:nth-child(4) { transition-delay: .21s; }
  .js .faq__lista .rivela:nth-child(5) { transition-delay: .28s; }
  .js .passi::after { transition: transform .12s linear; }
  .banner-cookie:not([hidden]) { animation: su .5s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ─── pagine semplici (privacy, 404) ─── */
.pagina { padding-block: clamp(48px, 36px + 3vw, 88px) clamp(64px, 50px + 3.5vw, 104px); }
.pagina .wrap { max-width: calc(820px + 2 * var(--margine)); }
.pagina h1 { font-size: clamp(36px, 30.06px + 1.524vw, 52px); line-height: 1.04; font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; }
.pagina h2 { font-size: clamp(22px, 20.51px + .381vw, 26px); margin-top: 36px; margin-bottom: 10px; }
.pagina p, .pagina li { color: var(--grigio); }
.pagina p + p { margin-top: 12px; }
.pagina ul { display: grid; gap: 10px; margin-top: 10px; }
.pagina ul li { position: relative; padding-left: 18px; }
.pagina ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--turchese); }
.pagina strong { color: var(--inchiostro); }
.pagina a:not(.btn) { color: var(--logo); }
.pagina__meta { margin-top: 10px; font-size: 14px; }
.pagina .etichetta { color: var(--turchese); display: block; margin-bottom: 14px; }
.pagina__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pagina > .wrap > .btn { margin-top: 36px; }
.pagina--404 { background: linear-gradient(180deg, var(--bianco) 0%, var(--bianco) 30%, var(--azzurro-3) 100%); color: var(--inchiostro); position: relative; overflow: hidden; isolation: isolate; min-height: 60svh; display: flex; align-items: center; }
.pagina--404::before {
  content: ""; position: absolute; z-index: -1; right: -40px; top: -20px; width: 560px; height: 336px;
  background: url("/assets/img/kit/matrice-led.svg") no-repeat 0 0 / 100% 100%; opacity: .5;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 110% at 100% 0%, #000 30%, transparent 78%);
}
.pagina--404 p { color: var(--grigio); }
.pagina--404 .wrap { max-width: calc(var(--wrap) + 2 * var(--margine)); }
.pagina--404 h1 { max-width: 760px; }

/* ═══════════════ tablet e telefono ═══════════════ */
@media (max-width: 1079px) {
  :root { --testata: 60px; }
  html { scroll-padding-top: 68px; }
  .testata__in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .testata__menu { display: inline-grid; justify-self: start; margin-left: -10px; }
  .marchio { justify-self: center; transform-origin: center; }
  .marchio img { width: 44px; height: 44px; }
  .testata__azioni { justify-self: end; margin-right: -10px; }
  .is-scrolled .testata, .is-scrolled .testata__in, .is-scrolled .marchio { transform: none; }
  .menu {
    position: fixed; left: 0; right: 0; top: var(--menu-top, 60px); bottom: 0; z-index: 39;
    flex-direction: column; justify-content: space-between; gap: 24px;
    padding: 28px var(--margine) calc(max(28px, env(safe-area-inset-bottom)) + var(--cookie-h)); background: var(--bianco); overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity .25s var(--ease), visibility 0s linear .25s;
  }
  .menu.is-aperto { visibility: visible; opacity: 1; transition: opacity .25s var(--ease); }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista li { border-bottom: 1px solid var(--linea); }
  .menu__lista a { padding: 16px 0; font-family: var(--f-titoli); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
  .menu__lista a::after { display: none; }
  .menu__wa { display: inline-flex; width: 100%; }
  .menu.is-aperto .menu__lista li, .menu.is-aperto .menu__wa { animation: su .45s var(--ease-out) both; }
  .menu.is-aperto .menu__lista li:nth-child(2) { animation-delay: .04s; }
  .menu.is-aperto .menu__lista li:nth-child(3) { animation-delay: .08s; }
  .menu.is-aperto .menu__lista li:nth-child(4) { animation-delay: .12s; }
  .menu.is-aperto .menu__lista li:nth-child(5) { animation-delay: .16s; }
  .menu.is-aperto .menu__lista li:nth-child(6) { animation-delay: .2s; }
  .menu.is-aperto .menu__wa { animation-delay: .26s; }
  .menu-aperto .testata__menu .ico--apri { display: none; }
  .menu-aperto .testata__menu .ico--chiudi { display: block; }
  .menu-aperto .testata { border-bottom-color: var(--linea); }

  .tecnica { grid-template-columns: minmax(0, 1fr); }
  .tecnica__foto { position: relative; top: 0; }
  .tecnica__foto img { aspect-ratio: 4 / 3; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq__testa { position: static; }
  .misura { grid-template-columns: minmax(0, 1fr); }
  .contatti { grid-template-columns: minmax(0, 1fr); }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .piede__marchio { grid-column: 1 / -1; }
}

/* hero sugli schermi bassi da portatile (1366×768, 1536×730, 1440×790): spazi verticali più stretti, così riquadro e
   tre fatti restano sopra il banner cookie. Dove lo schermo è troppo basso perché ci stia tutto, main.js fa scendere
   i tre fatti interi sotto il banner (mai tagliati a metà) */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { justify-content: flex-end; }
  .hero__in { padding-block: 14px 57px; }
  .hero__testo { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .acquisto { margin-top: 16px; padding: 12px 18px 16px; }
  .tipo__voce span { min-height: 34px; }
  .taglie { margin-top: 10px; }
  .taglia { min-height: 54px; padding-block: 6px; }
  .scelto { margin-top: 10px; padding-top: 10px; gap: 12px; }
  .scelto__mini { flex-basis: 52px; width: 52px; height: 52px; }
  .acquisto__azioni { margin-top: 12px; }
  .fatti { margin-top: 12px; }
  .croci { margin-bottom: 6px; }
}
/* 1024-1199: il riquadro largo 564 px tiene i due pulsanti su una riga (15 px); le croci prendono il resto */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__in { grid-template-columns: minmax(0, 564px) minmax(0, 1fr); column-gap: 32px; }
  .hero__testo { max-width: 564px; }
  .acquisto__azioni { gap: 10px; }
  .acquisto__azioni .btn { padding-inline: 14px; font-size: 15px; gap: 8px; }
  .taglia { gap: 8px; padding-right: 8px; }
  .taglia__croce { flex-basis: 32px; }
}
/* portatili bassi (sotto i 780 px d'altezza): almeno 34 px fra l'intestazione e il titolo */
@media (min-width: 1024px) and (max-height: 780px) {
  .hero__in { padding-top: 34px; }
  .hero__titolo { font-size: clamp(34px, min(4.17vw, 6svh), 60px); }
}
/* schermi bassissimi (sotto i 680 px): meno aria e titolo più piccolo, il pulsante resta sopra il banner cookie */
@media (min-width: 1024px) and (max-height: 680px) {
  .hero__in { padding-top: 26px; }
  .hero__titolo { font-size: clamp(30px, min(4.17vw, 5.2svh), 60px); }
  .hero__testo { margin-top: 8px; font-size: 15px; line-height: 1.45; }
  .acquisto { margin-top: 12px; padding: 10px 16px 14px; }
  .scelto__mini { flex-basis: 46px; width: 46px; height: 46px; }
}

/* hero da tablet e telefono: prima le croci, poi il titolo e il riquadro */
@media (max-width: 1023px) {
  .hero { display: block; min-height: 0; }
  .hero__in { display: flex; flex-direction: column; padding-block: 24px 40px; }
  .hero__titolo { width: auto; font-size: clamp(36px, 28.57px + 1.905vw, 56px); }
  .acquisto { width: auto; max-width: 640px; }
  .fatti { max-width: none; }
  .croci { order: -1; margin-inline: calc(-1 * var(--margine) + 14px); margin-bottom: 26px; --sotto: 38px; }
  .croci__fila { max-width: 600px; }
  .croce__misura { font-size: 14px; margin-top: 12px; height: calc(var(--sotto) - 12px); }
}

@media (max-width: 899px) {
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .scheda__corpo { padding: 12px 10px 14px; gap: 4px; }
  .scheda__nome { font-size: clamp(13.5px, 3.85vw, 16px); line-height: 1.22; min-height: 2.44em; letter-spacing: -.01em; }
  .scheda__prezzo { font-size: 17px; margin-bottom: 8px; margin-top: auto; padding-top: 2px; }
  .scheda__corpo .btn { margin-top: 0; }
  .scheda .badge { padding: 4px 6px; font-size: 10px; font-stretch: 100%; letter-spacing: .05em; }
  .scheda__foto .badge { left: 8px; top: 8px; }
  .scheda .badge .ico { display: none; }
  .scheda .btn--piccolo { min-height: 40px; padding: 0 8px; font-size: 13.5px; width: 100%; white-space: normal; line-height: 1.15; }
  .scheda .btn--piccolo .ico { display: none; }
  .scheda--larga { display: grid; grid-template-columns: 36% minmax(0, 1fr); align-items: stretch; }
  .scheda--larga .scheda__foto { width: auto; grid-row: span 2; aspect-ratio: auto; min-height: 150px; }
  .scheda--larga .scheda__foto img { position: absolute; inset: 0; }
  .scheda--larga .scheda__corpo { padding: 14px 14px 0; gap: 6px; justify-content: flex-end; }
  .scheda--larga .scheda__nome { font-size: 17px; min-height: 0; }
  .scheda--larga .scheda__prezzo { font-size: 18px; }
  .scheda--larga .badge { font-size: 9.5px; padding: 4px 6px; }
  .scheda__fondo { padding: 10px 14px 14px; margin: 0; }
  .scheda__fondo .btn { min-width: 0; width: 100%; }
  .testa-sezione { flex-direction: column; align-items: flex-start; }
  .testa-sezione__lato { align-items: flex-start; text-align: left; }
  .passi { grid-template-columns: 1fr; gap: 0; }
  .passi::before, .passi::after { left: 33px; right: auto; top: 34px; bottom: var(--fine, 34px); width: 2px; height: auto; }
  .passi::after { transform-origin: center top; transform: scaleY(var(--p, 1)); }
  .passo { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding: 0 0 24px; align-items: center; }
  .passo__num { grid-row: span 2; align-self: start; }
  .passo__ico { margin-top: 6px; width: 24px; height: 24px; }
  .passo p { max-width: none; grid-column: 2; }
  .evidenza { grid-template-columns: 1fr; padding: 20px; }
  .evidenza__foto img { max-width: 360px; }
  .punti { grid-template-columns: 1fr; gap: 14px; }
  .chi__in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .chi__foto { width: 96px; height: 96px; border-radius: 14px; }
  .chi__btn { justify-self: start; }
}

/* schede a 4 per riga ma strette (900-1199): il badge compatto come da telefono, così non esce dalla foto */
@media (min-width: 900px) and (max-width: 1199px) {
  .scheda:not(.scheda--larga) .badge { padding: 4px 7px; font-size: 10px; font-stretch: 100%; letter-spacing: .05em; }
  .scheda:not(.scheda--larga) .badge .ico { display: none; }
}

/* scheda rapida da tablet (600-959): la colonna dei dati è stretta, quantità e «Aggiungi al carrello» vanno su due
   righe invece di uscire dalla finestra */
@media (min-width: 600px) and (max-width: 959px) {
  .rapida__compra { flex-wrap: wrap; }
  .rapida__compra .btn { min-width: 0; white-space: normal; }
}

@media (max-width: 599px) {
  :root { --h-btn: 48px; --annuncio: 32px; }
  .annuncio__link { font-size: 12.5px; }
  .hero__in { padding-top: 18px; }
  .croci { margin-bottom: 22px; }
  .hero__titolo { font-stretch: 100%; letter-spacing: -.025em; }
  .acquisto { margin-top: 22px; padding: 14px 14px 18px; }
  .acquisto__azioni .btn { padding-inline: 12px; font-size: 15px; }
  /* da telefono: il titolo del riquadro sopra, l'interruttore a tutta larghezza; le misure in colonna (sagoma, misura, prezzo) */
  .acquisto__testa { flex-direction: column; align-items: stretch; gap: 10px; }
  .tipo { display: grid; }
  .tipo__voce span { min-height: 40px; padding-inline: 8px; }
  .taglia { flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 0; padding: 10px 4px 10px; text-align: center; }
  .taglia__croce { flex: 0 0 auto; width: 38px; height: 38px; }
  .taglia__testo { align-items: center; }
  .taglia__nome { font-size: 15px; }
  .taglia__prezzo { font-size: 13px; }
  .scelto { flex-wrap: wrap; gap: 6px 14px; }
  .scelto__dati { flex-basis: calc(100% - 70px); }
  .acquisto__tutte { margin-left: 70px; padding-block: 2px 0; }
  .acquisto__azioni { flex-direction: column; gap: 10px; }
  .acquisto__azioni .btn { width: 100%; }
  .fatti { flex-direction: column; gap: 8px; }

  .piede__griglia { grid-template-columns: 1fr; gap: 28px; }
  .tabella { font-size: 13.5px; }
  .tabella th, .tabella td { padding: 11px 12px; }
  .tabella tbody th { width: 92px; min-width: 92px; }
  .tabella td { min-width: 132px; }
  .tabella tbody th, .tabella thead td, .tabella .tabella__vuota { box-shadow: 6px 0 10px -8px rgba(12, 25, 34, .25); }
  .evidenza__compra { flex-direction: column; align-items: stretch; }
  .evidenza__compra .btn--largo { width: 100%; }

  /* barra d'acquisto fissa e WhatsApp fisso */
  .barra-acquisto {
    position: fixed; left: 0; right: 0; bottom: var(--cookie-h); z-index: 55;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 16px; padding-bottom: max(10px, calc(env(safe-area-inset-bottom) - var(--cookie-h))); background: var(--bianco); border-top: 1px solid var(--linea);
    box-shadow: 0 -12px 28px -20px rgba(12, 25, 34, .45);
    transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s linear .3s, bottom .2s var(--ease);
  }
  .barra-acquisto.is-visibile { transform: none; visibility: visible; transition: transform .3s var(--ease-out), bottom .2s var(--ease); }
  .barra-acquisto__mini { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--azzurro-3); box-shadow: 0 0 0 1px var(--linea); }
  .barra-acquisto__mini img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
  .barra-acquisto__nome { font-family: var(--f-titoli); font-weight: 700; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-acquisto__prezzo { font-family: var(--f-titoli); font-weight: 800; font-size: 16px; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .barra-acquisto .btn { min-height: 44px; padding: 0 12px; font-size: 14.5px; }

  .wa-fisso {
    position: fixed; right: 16px; bottom: calc(16px + var(--cookie-h)); z-index: 54;
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--turchese); color: var(--bianco); box-shadow: 0 14px 30px -12px rgba(2, 152, 185, .7);
    transition: transform .3s var(--ease-out), opacity .2s var(--ease), bottom .2s var(--ease);
  }
  .wa-fisso .ico { width: 26px; height: 26px; }
  .wa-fisso.is-nascosto { transform: translateY(24px) scale(.8); opacity: 0; pointer-events: none; }

  .banner-cookie { justify-content: space-between; gap: 12px; padding: 8px 12px 8px 16px; padding-bottom: max(8px, env(safe-area-inset-bottom)); font-size: 12.5px; line-height: 1.4; }
  .banner-cookie__ok { padding: 7px 14px; }

  .ricerca__risultati { grid-template-columns: 1fr; gap: 4px; }
  .rapida { padding: 0; place-items: end stretch; }
  .rapida__finestra { width: 100%; max-height: 92svh; border-radius: 20px 20px 0 0; transform: translateY(100%); opacity: 1; padding-bottom: env(safe-area-inset-bottom); }
  .rapida.is-aperto .rapida__finestra { transform: translateY(var(--trascina, 0px)); }
  .rapida.trascina .rapida__finestra { transition: none; }
  .rapida__maniglia { display: grid; place-items: center; position: sticky; top: 0; z-index: 3; height: 24px; background: var(--bianco); touch-action: none; }
  .rapida__maniglia span { width: 44px; height: 5px; border-radius: 5px; background: var(--linea-forte); }
  .rapida__chiudi { top: 24px; }
  .rapida__griglia { grid-template-columns: minmax(0, 1fr); }
  .rapida__galleria { display: block; min-height: 0; }
  .rapida__galleria-in { position: static; }
  .rapida__foto img { aspect-ratio: 4 / 3; }
  .rapida__foto img.is-disegno { padding: 7% 10%; }
  .rapida__miniature { padding-bottom: 12px; }
  .rapida__mini { width: 50px; height: 50px; }
  .rapida__dati { padding: 20px 20px 24px; }
  .rapida__compra { margin-inline: -20px; padding: 12px 20px 14px; gap: 10px; }
  .rapida__compra .quantita__nome { display: none; }
  /* quantità e «Aggiungi al carrello» stanno nei 350 px fra i due margini di 20 (sotto i 370 px il pulsante va a capo) */
  .rapida__compra .quantita__ctrl button { width: 40px; }
  .rapida__compra .quantita__ctrl input { width: 34px; }
  .rapida__compra .btn { min-width: 0; padding-inline: 14px; gap: 8px; }
  .carrello__cassetto { width: 100%; }
  .carrello__testa { padding-left: 20px; }
  .carrello__righe, .carrello__intestazione { padding-inline: 20px; }
  .carrello__piede { padding: 14px 20px max(18px, env(safe-area-inset-bottom)); }
  .carrello__aggiunto { margin-inline: 20px; }
}

@media (max-width: 389px) {
  .hero__titolo { font-size: 9.3vw; }
  .btn { white-space: normal; padding-inline: 16px; }
  .taglia__nome { font-size: 14px; }
  .barra-acquisto .btn { padding: 0 10px; font-size: 13.5px; max-width: 132px; line-height: 1.15; }
  .annuncio__link { font-size: 12px; }
  .banner-cookie { gap: 10px; padding-left: 14px; padding-right: 10px; font-size: 12px; line-height: 1.38; }
  .banner-cookie__ok { padding: 6px 12px; }
}

/* schede del negozio strette (320-374): un badge («Esaurito») va su due righe, così resta dentro la foto */
@media (max-width: 374px) {
  .scheda:not(.scheda--larga) .badge { width: min-content; white-space: normal; font-size: 9.5px; letter-spacing: .04em; line-height: 1.15; }
}

@media (max-width: 359px) {
  .barra-acquisto { grid-template-columns: minmax(0, 1fr) auto; }
  .barra-acquisto__mini { display: none; }
  /* schede del negozio strette (320-359): il nome sta su due righe */
  .scheda:not(.scheda--larga) .scheda__corpo { padding-inline: 8px; }
  .scheda:not(.scheda--larga) .scheda__nome { font-size: 12.5px; letter-spacing: -.015em; }
}

/* banner cookie su UNA riga anche da telefono (09 § 6-bis): sotto i 600 px la frase corta */
.banner-cookie__corto { display: none; }
@media (max-width: 600px) {
  .banner-cookie__testo { display: none; }
  .banner-cookie__corto { display: inline; }
  .banner-cookie p { white-space: nowrap; }
}

/* ═══════════════ sito completo (09/10/2026): le pagine interne, coi pezzi della home ═══════════════
   Stessi colori, caratteri, raggi, ombre e icone del kit; nessun fondo scuro (SPEC v2 § A). */

/* ─── apertura delle pagine: la luce della hero (bianco → azzurro, puntini LED), più bassa ─── */
.apertura {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--bianco) 0%, var(--bianco) 40%, var(--azzurro-3) 100%);
  padding-block: clamp(36px, 26px + 2.8vw, 72px) clamp(48px, 34px + 3.6vw, 88px);
}
.apertura::before {
  content: ""; position: absolute; z-index: -1; right: -40px; top: -20px; width: 620px; height: 372px;
  background: url("/assets/img/kit/matrice-led.svg") no-repeat 0 0 / 100% 100%; opacity: .45;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 110% at 100% 0%, #000 30%, transparent 78%);
}
.apertura__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; }
.apertura--corta .apertura__in { grid-template-columns: minmax(0, 1fr) auto; }
.apertura--croci .apertura__in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.apertura h1 {
  font-size: clamp(34px, 25.4px + 2.2vw, 54px); line-height: 1.04; font-weight: 800; font-stretch: 108%;
  letter-spacing: -.02em; max-width: 15.5em; text-wrap: balance;
}
.apertura__etichetta { display: block; color: var(--turchese); margin-bottom: 14px; }
.apertura .sotto { max-width: 600px; margin-top: 18px; }
.apertura__p { margin-top: 10px; max-width: 600px; color: var(--grigio); }
.apertura__prezzo {
  margin-top: 14px; font-family: var(--f-titoli); font-weight: 800; font-stretch: 100%;
  font-size: clamp(20px, 18.5px + .4vw, 24px); font-variant-numeric: tabular-nums;
}
.apertura .azioni { margin-top: 28px; }
.apertura__foto { margin: 0; border-radius: 16px; overflow: hidden; background: var(--azzurro-3); box-shadow: 0 30px 60px -40px rgba(12, 25, 34, .35); }
.apertura__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.apertura__foto--verticale { justify-self: center; width: min(400px, 100%); }
.apertura__foto--verticale img { aspect-ratio: 4 / 5; }
.apertura__segno {
  display: grid; place-items: center; width: 168px; height: 168px; border-radius: 28px; color: var(--turchese);
  background: var(--bianco); box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -40px rgba(12, 25, 34, .35);
}
.apertura__segno .ico { width: 84px; height: 84px; stroke-width: 1.15; }
@media (prefers-reduced-motion: no-preference) {
  .js .apertura__testo > * { animation: su .6s var(--ease-out) both; }
  .js .apertura__testo > :nth-child(2) { animation-delay: .08s; }
  .js .apertura__testo > :nth-child(3) { animation-delay: .16s; }
  .js .apertura__testo > :nth-child(4) { animation-delay: .24s; }
  .js .apertura__testo > :nth-child(n+5) { animation-delay: .32s; }
  .js .apertura__foto, .js .apertura__segno { animation: accendi .9s var(--ease-out) .15s both; }
}
@keyframes accendi { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* le quattro croci in fila nella pagina Croci (64 → 90 → 114 → Parafarmacia): un clic apre la scheda */
.croci--pagina { --sotto: 58px; --gap: clamp(10px, 1.4vw, 20px); grid-area: auto !important; align-self: center !important; margin: 0 !important; }
.croci--pagina .croci__fila { max-width: none; }
.croci--pagina .croce__misura { display: flex; flex-direction: column; align-items: center; gap: 3px; height: calc(var(--sotto) - 14px); }
.croci--pagina .croce__misura::after { display: none; }
.croce__tipo {
  font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 10.5px; line-height: 1.1;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grigio);
}
/* le etichette delle croci ai lati restano dentro la fila, mai oltre il margine: se l'etichetta è più larga della
   croce, si appoggia al bordo esterno della croce invece di sbordare; se ci sta, resta centrata */
.croci--pagina .croce:first-child .croce__misura { align-self: flex-start; min-width: 100%; }
.croci--pagina .croce:last-child .croce__misura { align-self: flex-end; min-width: 100%; }
@media (max-width: 599px) {
  .croci--pagina .croce__tipo { font-size: 9.5px; font-stretch: 100%; letter-spacing: .04em; }
}
/* 2 Step, cinque croci: «Parafarmacia» è più larga della croce 64x64 e toccava l'etichetta accanto. Sulle due croci
   Parafarmacia va sempre su due righe, sul trattino morbido (PARA- / FARMACIA), a ogni larghezza: stesso aspetto ovunque */
.croci--pagina { --sotto: 70px; }
.croci--pagina .croce__tipo--para { width: min-content; white-space: normal; text-align: center; hyphens: manual; -webkit-hyphens: manual; }
.croci--pagina .croce:hover .croce__misura { color: var(--logo); }
.croci--pagina .croce:focus-visible .croce__img { outline: 2px solid var(--turchese); outline-offset: 6px; border-radius: 8px; }

/* schede del negozio: la riga sotto il prezzo; il nome della Tabacchi porta alla sua pagina */
.scheda__nota { margin: -6px 0 12px; font-size: 14px; line-height: 1.35; color: var(--grigio); }
.scheda__link { color: inherit; text-decoration: none; }
.scheda__link:hover { color: var(--logo); }
.tecnica__link { margin-top: 28px; }
.tecnica__foto--video { aspect-ratio: 1; }
.tecnica__foto--video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ─── due colonne: testo e immagine (o tabella, o disegno) ─── */
.wrap--medio { max-width: calc(1040px + 2 * var(--margine)); }
.testa-sezione--colonna { flex-direction: column; align-items: flex-start; gap: 0; }
.affianco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.affianco--rovescio > :first-child { order: 2; }
.affianco--listino { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.affianco--garanzia { align-items: start; }
.affianco__p { margin-top: 12px; max-width: 560px; color: var(--grigio); }
.affianco__btn { margin-top: 28px; }
.affianco__foto { margin: 0; border-radius: 16px; overflow: hidden; background: var(--azzurro-3); }
.affianco__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.affianco__foto--bianca { background: var(--bianco); box-shadow: 0 0 0 1px var(--linea); padding: 12px; }
.affianco__foto--bianca img { aspect-ratio: auto; object-fit: contain; }
.affianco__icona { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 14px; background: var(--azzurro-2); color: var(--turchese); }
.affianco__icona .ico { width: 28px; height: 28px; }
.affianco__video { justify-self: center; width: min(340px, 100%); border-radius: 16px; overflow: hidden; background: var(--azzurro-3); box-shadow: 0 30px 60px -40px rgba(12, 25, 34, .35); }
.affianco__video video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

.coppia-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.coppia-foto__voce { margin: 0; border-radius: 16px; overflow: hidden; background: var(--azzurro-3); }
.coppia-foto__voce img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.coppia-foto__voce--copri img { object-fit: cover; }
.coppia-foto--sfalsata img, .coppia-foto--prima-dopo img { aspect-ratio: auto; }
.coppia-foto--sfalsata { align-items: end; }
.coppia-foto--prima-dopo .coppia-foto__voce:nth-child(2) { margin-top: 48px; }
.coppia-foto--prodotti img { aspect-ratio: 1; }

.fila-foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-self: center; align-items: start; }
.fila-foto__voce { margin: 0; border-radius: 14px; overflow: hidden; background: var(--azzurro-3); }
.fila-foto__voce img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.misura .fila-foto__voce:nth-child(2) { margin-top: 44px; }
.fila-foto--larga { margin-top: clamp(32px, 24px + 2vw, 48px); gap: clamp(10px, 1.6vw, 20px); }
.fila-foto--larga .fila-foto__voce img { aspect-ratio: 1; }

.punti--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.punti--grandi { gap: 24px 56px; }
.punti--grandi li { font-size: clamp(16px, 15.63px + .0952vw, 17px); }
.punti a, .voci a, .chi__testo a, .affianco__testo p a { color: var(--logo); font-weight: 600; }
.voci--testo li { align-items: flex-start; }
.voci--testo .ico { margin-top: 1px; }
.misura__frase--forte { color: var(--inchiostro); font-weight: 600; margin-top: 12px; }
.misura--larga { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.misura__lato .frase-forte { margin-top: 0; }
.frase-forte {
  margin-top: 28px; font-family: var(--f-titoli); font-weight: 700; font-stretch: 100%;
  font-size: clamp(18px, 16.5px + .4vw, 22px); line-height: 1.3; color: var(--inchiostro); max-width: 640px;
}
.chiusa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--linea); }
.chiusa .frase-forte { margin-top: 0; }
.nota-icona { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; color: var(--grigio); }
.nota-icona .ico { width: 24px; height: 24px; color: var(--turchese); }

.elenco { display: grid; gap: 10px; margin-top: 18px; }
.elenco li { position: relative; padding-left: 22px; }
.elenco li::before {
  content: ""; position: absolute; left: 3px; top: .64em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--turchese); box-shadow: 0 0 0 3px var(--turchese-14);
}

/* bande azzurre (come «Chi siamo» della home): un'icona del kit al posto della foto */
.chi--banda .chi__in { grid-template-columns: 96px minmax(0, 1fr) auto; }
.chi__icona { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 16px; background: var(--bianco); color: var(--turchese); }
.chi__icona .ico { width: 44px; height: 44px; stroke-width: 1.5; }
.chi--banda .chi__testo h2 { font-size: clamp(24px, 21.03px + .762vw, 32px); }
.chi--banda .chi__testo p { max-width: 680px; }

/* ─── evidenza (Tabacchi, Parafarmacia): la stessa scheda bianca della home ─── */
.evidenza--pagina { box-shadow: 0 30px 60px -40px rgba(12, 25, 34, .35); }
.evidenza--pagina h1 { font-size: clamp(30px, 23.4px + 1.7vw, 46px); line-height: 1.06; font-weight: 800; font-stretch: 108%; letter-spacing: -.015em; max-width: 560px; }
.evidenza--pagina .evidenza__prezzo { margin-top: 18px; }
.evidenza--pagina .sotto { margin-top: 10px; max-width: 520px; }
.evidenza--bordo { box-shadow: 0 0 0 1px var(--linea); }
.evidenza__frase { margin-top: 12px; color: var(--grigio); max-width: 520px; }
.evidenza__btn { margin-top: 28px; }

/* ─── tabella delle misure (pagina Croci) ─── */
.misure { margin-top: clamp(24px, 18px + 1.6vw, 36px); border: 1px solid var(--linea); border-radius: var(--r-scheda); overflow: hidden; background: var(--bianco); }
.misure__tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.misure__tabella th, .misure__tabella td { padding: 16px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--linea); }
.misure__tabella thead th { padding-block: 12px; background: var(--azzurro-3); color: var(--grigio); }
.misure__tabella tbody tr:last-child > * { border-bottom: 0; }
.misure__tabella tbody tr { transition: background-color .2s var(--ease); }
.misure__tabella tbody tr:hover { background: var(--turchese-06); }
.misure__tabella tbody th { font-weight: 400; }
.misure__croce { display: inline-grid; place-items: end center; width: 58px; height: 58px; margin-right: 14px; vertical-align: middle; }
.misure__croce img { width: calc(58px * var(--lato) / 114); height: auto; }
.misure__nome { font-family: var(--f-titoli); font-weight: 700; font-size: 17px; vertical-align: middle; }
.misure__prezzo { font-family: var(--f-titoli); font-weight: 800; white-space: nowrap; }

/* ─── Tabacchi: dati tecnici, la T a punti e i disegni quotati ─── */
.dati-tabella { width: 100%; margin-top: 24px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dati-tabella th, .dati-tabella td { padding: 12px 16px; text-align: left; }
.dati-tabella tr:nth-child(odd) > * { background: var(--azzurro-3); }
.dati-tabella tr > :first-child { border-radius: 10px 0 0 10px; }
.dati-tabella tr > :last-child { border-radius: 0 10px 10px 0; }
.dati-tabella th { width: 42%; font-weight: 500; color: var(--grigio); }
.dati-tabella td { font-weight: 600; }

.t-led {
  justify-self: center; width: min(320px, 100%); padding: 32px 40px; border-radius: 20px; background: var(--bianco);
  box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -40px rgba(12, 25, 34, .35);
}
.t-led svg { display: block; width: 100%; height: auto; }
.t-led__forma { fill: var(--azzurro-3); stroke: var(--filo); stroke-width: 1.5; }
.t-led__punti circle { fill: var(--turchese); }
.js .t-led__punti circle { fill: #C9D5DC; }
.js .t-led.accesa .t-led__punti { filter: drop-shadow(0 0 3px rgba(2, 152, 185, .55)); }
.js .t-led.accesa .t-led__punti circle { fill: var(--turchese); animation: led-accendi .4s var(--ease-out) both; animation-delay: calc(var(--k) * 30ms); }
.t-led__prova { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.t-led__prova .filtro { min-height: 38px; padding: 0 14px; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js .t-led.accesa.lampeggia .t-led__punti { animation: lampeggio 1.1s steps(1, end) infinite; }
}
@keyframes lampeggio { 0% { opacity: 1; } 50% { opacity: .12; } }
@keyframes led-accendi { 0% { fill: #C9D5DC; } 55% { fill: #6BD6EE; } 100% { fill: var(--turchese); } }

.disegno-quotato { justify-self: center; width: min(340px, 100%); margin: 0; padding: 28px; border-radius: 20px; background: var(--azzurro-3); }
.disegno-quotato--fianco { width: min(380px, 100%); }
.disegno-quotato svg { display: block; width: 100%; height: auto; overflow: visible; }
.dq__cassa { fill: var(--bianco); stroke: var(--inchiostro); stroke-width: 2; }
.dq__t { fill: var(--azzurro-2); stroke: var(--turchese); stroke-width: 1.5; }
.dq__fascia { fill: var(--azzurro-1); stroke: var(--filo); }
.dq__linea { fill: none; stroke: var(--turchese); stroke-width: 1.6; }
.dq__testo { font-family: var(--f-titoli); font-weight: 700; font-size: 15px; fill: var(--inchiostro); }
.dq__muro { stroke: var(--inchiostro); stroke-width: 3; }
.dq__tratteggio { stroke: var(--grigio); stroke-width: 1.2; }
.dq__staffa { stroke: var(--grigio); stroke-width: 6; stroke-linecap: round; }
.dq__vite { fill: var(--turchese); }

/* ─── listino (Spedizioni e ordini) ─── */
.listino { display: grid; gap: 10px; }
.listino__riga { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 20px 10px 10px; border-radius: 14px; background: var(--bianco); transition: box-shadow .2s var(--ease); }
.listino__riga:hover { box-shadow: 0 0 0 1.5px var(--turchese); }
.listino__mini { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--azzurro-3); }
.listino__mini img { width: 100%; height: 100%; object-fit: cover; }
.listino__mini--disegno img { object-fit: contain; padding: 6px; }
.listino__nome { font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none; color: inherit; }
.listino__nome:hover { color: var(--logo); }
.listino__nome::after { content: ""; position: absolute; inset: 0; }
.listino__riga { position: relative; }
.listino__prezzo { font-family: var(--f-titoli); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── i lavori: foto 3:2 e didascalia sotto (home, Su misura, Lavori, Chi siamo) ─── */
.lavori-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.lavori-griglia--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lavoro-scheda__link {
  display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lavoro-scheda__foto { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--azzurro-3); transition: transform .15s var(--ease); }
.lavori-griglia--tre .lavoro-scheda__foto { aspect-ratio: 1; }
.lavoro-scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lavoro-scheda__didascalia { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; transition: color .2s var(--ease); }
.lavoro-scheda__conta {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  border-radius: 8px; background: rgba(255, 255, 255, .94); color: var(--inchiostro);
  font-family: var(--f-titoli); font-weight: 700; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums;
}
.lavoro-scheda__conta .ico { width: 16px; height: 16px; color: var(--turchese); }
.lavoro-scheda__link:active .lavoro-scheda__foto { transform: scale(.98); }
.lavoro-scheda__link:focus-visible { outline: none; }
.lavoro-scheda__link:focus-visible .lavoro-scheda__foto { outline: 2px solid var(--turchese); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .lavoro-scheda__link:hover img { transform: scale(1.04); }
  .lavoro-scheda__link:hover .lavoro-scheda__didascalia { color: var(--logo); }
  .fila-foto__voce img, .coppia-foto__voce img { transition: transform .6s var(--ease); }
}

/* filtri della pagina Lavori: pillole come le scelte del prodotto, ferme sotto l'intestazione */
.filtri-barra { position: sticky; top: 64px; z-index: 30; background: var(--bianco); border-bottom: 1px solid var(--linea); }
.filtri { display: flex; gap: 8px; padding-block: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filtri::-webkit-scrollbar { display: none; }
.filtro {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 10px;
  border: 1.5px solid var(--linea-forte); background: var(--bianco); font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.filtro:hover { border-color: var(--turchese); }
.filtro:active { transform: scale(.97); }
.filtro[aria-pressed="true"] { border-color: var(--turchese); background: var(--turchese-14); font-weight: 600; }
.sezione.gruppo { padding-block: clamp(44px, 32px + 3vw, 76px) 0; }
.gruppo .testa-sezione { margin-bottom: clamp(20px, 16px + 1vw, 32px); }
.gruppo ~ #laboratorio { margin-top: var(--spazio); }

/* dal laboratorio al montaggio: due foto ferme, prima e dopo */
.coppie { display: grid; gap: clamp(32px, 24px + 2vw, 48px); }
.coppia { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 14px; width: 100%; max-width: 860px; margin-inline: auto; }
.coppia:first-child { max-width: 620px; }
.coppia__voce { margin: 0; }
.coppia__voce img { width: 100%; border-radius: 12px; }
.coppia__voce figcaption { margin-top: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.coppia__freccia { align-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -28px; border-radius: 50%; background: var(--bianco); color: var(--turchese); box-shadow: 0 0 0 1px var(--linea); }
.coppia__freccia .ico { width: 18px; height: 18px; }

/* ─── galleria a schermo intero, chiara: frecce, swipe, Esc ─── */
.schermo { position: fixed; inset: 0; z-index: 95; }
.schermo__fondo { position: absolute; inset: 0; background: var(--bianco); opacity: 0; transition: opacity .26s var(--ease); }
.schermo.is-aperto .schermo__fondo { opacity: 1; }
.schermo__in {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 10px clamp(12px, 3vw, 32px) max(16px, env(safe-area-inset-bottom));
  opacity: 0; transform: scale(.985); transition: opacity .26s var(--ease), transform .26s var(--ease-out); pointer-events: none;
}
.schermo.is-aperto .schermo__in { opacity: 1; transform: none; }
.schermo__in > * { pointer-events: auto; }
.schermo__testa { display: flex; align-items: center; justify-content: space-between; }
.schermo__conta { padding-left: 4px; font-family: var(--f-titoli); font-weight: 700; font-size: 14px; color: var(--grigio); font-variant-numeric: tabular-nums; }
/* la scena ha una riga e una colonna di misura fissa (minmax(0, 1fr)): così max-height: 100% funziona e ogni foto
   o video, anche verticale, sta intero nello schermo, con la didascalia e i puntini sempre visibili */
.schermo__scena {
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  min-height: 0; height: 100%; padding: 8px clamp(0px, 5vw, 72px); touch-action: pan-y;
}
.schermo__scena > img, .schermo__scena > video {
  grid-area: 1 / 1; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 12px; box-shadow: 0 30px 60px -36px rgba(12, 25, 34, .4); background: var(--azzurro-3);
}
.schermo__scena > .entra { animation: schermo-entra .32s var(--ease-out) both; }
.schermo__scena > .entra--indietro { animation-name: schermo-entra-indietro; }
@keyframes schermo-entra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes schermo-entra-indietro { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.schermo__freccia {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px;
  border-radius: 50%; background: var(--bianco); color: var(--inchiostro);
  box-shadow: 0 0 0 1px var(--filo), 0 12px 26px -16px rgba(12, 25, 34, .5); transition: color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
.schermo__freccia:hover { color: var(--logo); box-shadow: 0 0 0 1.5px var(--turchese), 0 12px 26px -16px rgba(12, 25, 34, .5); }
.schermo__freccia:active { transform: scale(.94); }
.schermo__freccia .ico { width: 22px; height: 22px; }
.schermo__freccia--prima { left: clamp(10px, 2.4vw, 32px); }
.schermo__freccia--dopo { right: clamp(10px, 2.4vw, 32px); }
.schermo__piede { padding-top: 12px; text-align: center; }
.schermo__didascalia { max-width: 760px; margin-inline: auto; font-size: 16px; font-weight: 600; line-height: 1.35; }
.schermo__punti { display: flex; justify-content: center; gap: 6px; min-height: 6px; margin-top: 10px; }
.schermo__punti span { width: 6px; height: 6px; border-radius: 3px; background: var(--filo); transition: width .25s var(--ease), background-color .25s var(--ease); }
.schermo__punti span.is-attivo { width: 18px; background: var(--turchese); }

/* ─── contatti (pagina e home) ─── */
.apertura--contatti .contatti { align-items: start; }
.contatti__intro { margin-top: 12px; max-width: 520px; color: var(--grigio); }
.recapiti { margin-top: 20px; }
.contatti__testo .azioni .btn { margin-top: 0; }
.contatti--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
/* pagina Contatti senza modulo (10/10/2026): il testo a sinistra, la scheda dei recapiti col pulsante a destra */
.contatti--pagina { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contatti--pagina .recapiti { margin-top: 8px; }
.contatti--pagina .contatti__scheda .btn { margin-top: 28px; }
.contatti__scheda { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-scheda); background: var(--bianco); box-shadow: 0 30px 60px -40px rgba(12, 25, 34, .35); }
.contatti__scheda .contatti__ditta { margin-top: 0; }
.contatti__scheda .btn { margin-top: 24px; }
.contatti__invito { font-family: var(--f-titoli); font-weight: 700; font-size: clamp(18px, 16.5px + .4vw, 22px); line-height: 1.3; }

/* ─── tablet e telefono ─── */
@media (max-width: 1079px) {
  .filtri-barra { top: 60px; }
  .contatti--home, .contatti--pagina { grid-template-columns: minmax(0, 1fr); }
  .misura--larga { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .apertura__in, .apertura--croci .apertura__in { grid-template-columns: minmax(0, 1fr); }
  .apertura--corta .apertura__in { grid-template-columns: minmax(0, 1fr) auto; }
  .apertura__foto { max-width: 640px; }
  .croci--pagina { order: 0 !important; margin-top: 8px !important; }
  .affianco, .affianco--listino { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .affianco--rovescio > :first-child { order: 0; }
  .punti--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .misura .fila-foto__voce:nth-child(2) { margin-top: 0; }
  .fila-foto { margin-top: 8px; }
  .lavori-griglia--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .lavori-griglia, .lavori-griglia--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .lavoro-scheda__didascalia { margin-top: 8px; font-size: 13.5px; line-height: 1.3; }
  .lavoro-scheda__foto { border-radius: 10px; }
  .lavoro-scheda__conta { right: 6px; bottom: 6px; padding: 4px 7px; font-size: 12px; }
  .lavoro-scheda__conta .ico { width: 14px; height: 14px; }
  .chi--banda .chi__in { grid-template-columns: minmax(0, 1fr); }
  .chi__icona { width: 64px; height: 64px; border-radius: 14px; }
  .chi__icona .ico { width: 32px; height: 32px; }
  .chi--banda .chi__btn { justify-self: start; }
}
@media (max-width: 699px) {
  .misure__tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .misure__tabella, .misure__tabella tbody { display: block; }
  .misure__tabella tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; border-bottom: 1px solid var(--linea); }
  .misure__tabella tbody tr:last-child { border-bottom: 0; }
  .misure__tabella tbody th, .misure__tabella tbody td { display: block; padding: 0; border: 0; }
  .misure__tabella tbody th { grid-column: 1 / -1; display: flex; align-items: center; }
  .misure__tabella td::before {
    content: attr(data-etichetta); display: block; margin-bottom: 2px; color: var(--grigio);
    font-family: var(--f-titoli); font-weight: 600; font-stretch: 125%; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  }
  .misure__croce { width: 48px; height: 48px; margin-right: 12px; }
  .misure__croce img { width: calc(48px * var(--lato) / 114); }
  .misure__nome { font-size: 16px; }
}
@media (max-width: 599px) {
  .apertura h1 { font-stretch: 100%; letter-spacing: -.025em; }
  .apertura--corta .apertura__in { grid-template-columns: minmax(0, 1fr); }
  .apertura__segno { display: none; }
  .apertura .azioni { flex-direction: column; align-items: stretch; }
  .apertura .azioni .btn { width: 100%; }
  .croci--pagina { --sotto: 64px; --gap: 12px; }   /* 64: c'è posto per «PARA- / FARMACIA» su due righe */
  .croce__tipo { font-size: 9px; letter-spacing: .05em; }
  .croci--pagina .croce__misura { font-size: 13px; }
  .punti--tre { grid-template-columns: minmax(0, 1fr); }
  .punti--grandi { gap: 18px; }
  .fila-foto { gap: 8px; }
  .fila-foto__voce { border-radius: 10px; }
  .coppia-foto { gap: 10px; }
  .coppia-foto__voce { border-radius: 12px; }
  .coppia-foto--prima-dopo .coppia-foto__voce:nth-child(2) { margin-top: 28px; }
  .filtri { margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); }
  .filtro { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
  .coppia { gap: 8px; }
  .coppia__freccia { width: 30px; height: 30px; margin-top: -24px; }
  .coppia__freccia .ico { width: 14px; height: 14px; }
  .coppia__voce figcaption { font-size: 13px; }
  .listino__riga { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; padding: 10px 14px 10px 10px; }
  .listino__mini { grid-row: span 2; width: 48px; height: 48px; }
  .listino__nome { font-size: 14.5px; }
  .listino__prezzo { font-size: 15px; }
  .t-led { padding: 24px 32px; width: min(280px, 100%); }
  .disegno-quotato { padding: 20px; }
  .chiusa { flex-direction: column; align-items: stretch; }
  .chiusa .btn, .chi--banda .chi__btn { width: 100%; }
  .schermo__in { padding-inline: 8px; }
  .schermo__scena { padding-inline: 0; }
  .schermo__freccia { width: 42px; height: 42px; margin-top: -21px; background: rgba(255, 255, 255, .92); }
  .schermo__freccia--prima { left: 6px; }
  .schermo__freccia--dopo { right: 6px; }
  .schermo__didascalia { font-size: 14.5px; padding-inline: 8px; }
  .testa-sezione__btn { align-self: flex-start; }
}

/* Lavori: in una riga non resta mai un lavoro da solo (regola THK). Nei gruppi dispari il primo lavoro diventa una
   scheda larga, in evidenza: da telefono a tutta riga, da computer su due colonne quando la riga finale avrebbe un lavoro solo */
@media (min-width: 900px) {
  .lavori-griglia:not(.lavori-griglia--tre) > .lavoro-scheda:first-child:nth-last-child(4n+1) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .lavori-griglia--tre > .lavoro-scheda:first-child:nth-last-child(3n+1) { grid-column: span 2; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .lavori-griglia--tre > .lavoro-scheda:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .lavori-griglia > .lavoro-scheda:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

/* testi del copy del 09/10 sera: niente parola sola sull'ultima riga (righe sole), senza cambiare l'impaginazione */
.sotto, .affianco__p, .misura__frase, .frase-forte, .hero__testo, .evidenza__nota, .evidenza__frase, .scelto__nota,
.rapida__nota, .rapida__frase, .carrello__nota, .campo__aiuto, .punti span, .voci span, .passo p, .chi__testo p,
.risposta p, .nota-icona span, .apertura__p, .apertura__prezzo, .contatti__intro, .contatti__invito,
.lavoro-scheda__didascalia, .piede__marchio p { text-wrap: pretty; }

/* ═══════════════ rifiniture del 09/10 sera ═══════════════ */

/* il trattino non separabile (U+2011, «St‑Germain») non c'è in Instrument Sans: lo prende da Archivo, il carattere
   dei titoli del kit, invece che da un carattere di sistema */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/font/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2011;
}

/* a capo: i paragrafi evitano la parola sola sull'ultima riga, i titoli si bilanciano (il generatore lega anche le
   ultime due parole con uno spazio fisso, se insieme sono corte) */
p, li, dd, td, figcaption, .lavoro-scheda__didascalia { text-wrap: pretty; }
h1, h2, h3, .scheda__nome { text-wrap: balance; }

/* hero: le tre righe del copy, ognuna il suo paragrafo; la spedizione è la riga piccola col furgone, a sé */
.hero__testo > p + p { margin-top: 6px; }
.hero__testo .hero__spedizione { display: flex; width: fit-content; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--inchiostro); }
.hero__spedizione .ico { flex: 0 0 auto; width: 20px; height: 20px; }
@media (min-width: 1024px) and (max-height: 820px) { .hero__testo > p + p { margin-top: 4px; } }

/* Spedizioni e ordini · Garanzia e termini di vendita: una scheda compatta, senza il vuoto delle due colonne
   (le pagine legali di Shopify, quando ci sono, entrano nella stessa scheda) */
.sezione--compatta { padding-block: clamp(48px, 36px + 3vw, 80px) 0; }
.garanzia {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(20px, 3vw, 40px);
  padding: clamp(20px, 14px + 1.6vw, 32px) clamp(20px, 12px + 2vw, 40px);
  border: 1px solid var(--filo); border-radius: var(--r-scheda); background: var(--bianco);
  box-shadow: 0 26px 50px -40px rgba(12, 25, 34, .32);
}
.garanzia__icona { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--azzurro-2); color: var(--turchese); }
.garanzia__icona .ico { width: 28px; height: 28px; }
.garanzia__testo h2 { font-size: clamp(24px, 21.03px + .762vw, 32px); }
.garanzia__testo p { margin-top: 6px; max-width: 640px; color: var(--grigio); }
.garanzia__link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 699px) {
  .garanzia { grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
  .garanzia__icona { width: 48px; height: 48px; border-radius: 12px; }
  .garanzia__icona .ico { width: 24px; height: 24px; }
  .garanzia__link { grid-column: 2; }
}


/* Chi siamo · «Progetto, autorizzazioni e montaggio dell'insegna»: da telefono il carattere un po' più stretto (come il
   titolo della hero da telefono), così «montaggio dell'insegna» sta su una riga e l'ultima parola non resta sola */
@media (max-width: 599px) { .titolo--stretto { font-stretch: 100%; letter-spacing: -.02em; } }