/* Pit Lane Red Passion — storefront (shop.pitlaneredpassion.com)
   BINDING design system: WARM / PREMIUM EDITORIAL (15 lug 2026).
   Supersedes the previous all-dark cinematic DS. Warm off-white is the base;
   near-black is reserved for utility bar, the ONE cinematic package band and
   the footer. Red is the dominant accent; green only as a live/trust pulse
   (and WhatsApp brand); gold as the sober secondary highlight.
   Photo rule (unchanged, binding): real photos are the protagonist, full-bleed;
   dark gradient only as a bottom frame for text legibility. NO color-correction. */
:root{
  --red:#E4002B; --red2:#ff2d4c; --red-deep:#9e001d;
  --green:#00A651; --green-d:#00863f; --green-l:#e6f7ee;
  --gold:#C9932E; --gold-d:#96701f; --gold-l:#f5ead2;
  --ink:#15171c; --ink2:#4b515c; --mut:#8a919c;
  --bg:#f7f5f1; --card:#ffffff; --cool:#efece6; --line:#e6e2da;
  --dark:#111318; --dark2:#1b1e24;
  --tx:var(--ink); --tx-mut:var(--ink2); --tx-dim:var(--mut);
  --accentline:linear-gradient(90deg,transparent,var(--red),transparent);
  --r3:3px; --r5:5px; --r10:10px; --r11:11px; --r18:18px;
  --r:18px; --rs:11px;
  --maxw:1200px;
  --sh:0 2px 4px rgba(21,23,28,.05),0 28px 56px rgba(21,23,28,.12);
  --sh-sm:0 1px 2px rgba(21,23,28,.04),0 10px 24px rgba(21,23,28,.07);
  --shd:0 30px 70px rgba(0,0,0,.5);
  --f:"Saira",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fd:"Fraunces",Georgia,"Times New Roman",serif;      /* display: editorial serif */
  --fc:"Saira Condensed","Saira",-apple-system,sans-serif; /* labels/eyebrow/nav */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-weight:400;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fd);font-weight:600;line-height:1.06;margin:0;letter-spacing:-.01em}
em{font-style:italic;color:var(--red)}
.sh-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.sh-eyebrow,.sh-kicker{font-family:var(--fc);text-transform:uppercase;letter-spacing:.22em;font-size:12px;
  font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:8px}
.sh-eyebrow::before,.sh-kicker::before{content:"";width:16px;height:1.5px;background:var(--red)}
.sh-accentline{height:1px;background:var(--accentline);border:0;margin:0;opacity:.5}
.sh-rule{height:1px;background:var(--accentline);max-width:120px;margin:18px auto 0;opacity:.5}

/* grain — premium tactility, dark bands only */
.sh-grain{position:relative}
.sh-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>')}

/* reveal on scroll (JS adds .in) */
.sh-rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.sh-rv.in{opacity:1;transform:none}
.sh-grid .sh-rv:nth-child(2){transition-delay:.08s}
.sh-grid .sh-rv:nth-child(3){transition-delay:.16s}
.sh-grid .sh-rv:nth-child(4){transition-delay:.24s}
.sh-grid .sh-rv:nth-child(5){transition-delay:.32s}
.sh-grid .sh-rv:nth-child(6){transition-delay:.40s}
@media(prefers-reduced-motion:reduce){
  .sh-rv{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* ---------- buttons: vivid red pill, glow pulse + hover sweep ---------- */
@keyframes sh-glow{0%,100%{box-shadow:0 8px 22px rgba(228,0,43,.32)}50%{box-shadow:0 8px 26px rgba(228,0,43,.46),0 0 18px rgba(228,0,43,.16)}}
@keyframes sh-sweep{to{left:130%}}
.sh-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-family:var(--f);font-weight:700;
  font-size:15px;text-decoration:none;border:0;border-radius:999px;padding:15px 32px;min-height:48px;cursor:pointer;
  animation:sh-glow 3.2s ease-in-out infinite;transition:transform .16s,filter .16s}
.sh-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)}
.sh-btn:hover{transform:translateY(-3px) scale(1.015);filter:saturate(1.1)}
.sh-btn:hover::after{animation:sh-sweep .9s ease forwards}
.sh-btn:active{transform:translateY(0)}
.sh-btn[disabled]{background:var(--cool);color:var(--mut);cursor:not-allowed;transform:none;animation:none;box-shadow:none}
.sh-btn[disabled]::after{display:none}
.sh-btn-ghost{background:none;color:var(--ink);border:1.5px solid var(--line);animation:none;box-shadow:none}
.sh-btn-ghost::after{display:none}
.sh-btn-ghost:hover{border-color:var(--ink);background:var(--cool);transform:none;filter:none}
.sh-btn-lg{font-size:15.5px;padding:17px 36px;min-height:54px}
.sh-btn-full{width:100%}
.sh-link{color:var(--ink2);text-decoration:none;font-weight:700;font-size:14.5px;transition:color .15s}
.sh-link:hover{color:var(--ink)}

/* ---------- utility bar (dark) ---------- */
.sh-utility{background:var(--dark);color:rgba(240,242,246,.72);font-size:12.5px}
.sh-utility .sh-wrap{display:flex;align-items:center;height:38px;gap:22px}
.sh-utility a{color:inherit;text-decoration:none}
.sh-utility a:hover{color:#fff}
.sh-utility .sh-sp{flex:1}
.sh-utility .sh-live{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
@keyframes sh-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,166,81,.5)}70%{box-shadow:0 0 0 7px rgba(0,166,81,0)}}
.sh-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;flex:none;animation:sh-pulse 2.2s infinite}
.sh-u-hide{display:none}
/* La specificita' conta: .sh-utility .sh-live (0,2,0) batteva .sh-u-hide (0,1,0),
   quindi il badge "Disponibilita' in tempo reale" restava VISIBILE su mobile e,
   occupando 171px, schiacciava il numero di telefono a 44px facendolo andare a
   capo su 3 righe fuori dalla barra. Stessa specificita' + regola successiva. */
.sh-utility .sh-u-hide{display:none}
/* il numero non va mai spezzato, e su mobile l'icona sparisce per fargli spazio */
.sh-tel{white-space:nowrap}
.sh-u-ico{display:none}
@media(min-width:720px){.sh-utility .sh-u-hide{display:inline-flex}
  .sh-u-ico{display:inline}}

/* language selector: flag + dropdown */
.sh-langsel{position:relative}
.sh-langsel-btn{display:flex;align-items:center;gap:7px;background:none;border:0;color:#fff;
  font:700 11px/1 var(--fc);letter-spacing:.08em;cursor:pointer;padding:6px 2px;min-height:32px}
.sh-langsel-btn .sh-flag{font-size:15px;line-height:1}
.sh-langsel-btn .sh-car{font-size:9px;color:rgba(240,242,246,.5);transition:transform .2s}
.sh-langsel.open .sh-langsel-btn .sh-car{transform:rotate(180deg)}
.sh-langsel-menu{position:absolute;top:100%;right:0;margin-top:10px;background:var(--dark2);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px;display:none;flex-direction:column;
  min-width:150px;box-shadow:0 24px 48px rgba(0,0,0,.45);z-index:60;max-height:300px;overflow-y:auto;
  list-style:none;margin-block:10px 0;padding-inline-start:6px}
.sh-langsel.open .sh-langsel-menu{display:flex}
.sh-langsel-menu li{list-style:none}
.sh-langsel-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;
  font:600 12.5px var(--f);color:rgba(240,242,246,.78);text-decoration:none}
.sh-langsel-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.sh-langsel-menu a[aria-current="true"]{color:#fff;background:rgba(255,255,255,.06)}
.sh-langsel-menu .sh-flag{font-size:15px}
.sh-langsel-menu .sh-soon{margin-left:auto;font-size:9.5px;color:rgba(240,242,246,.35);text-transform:uppercase;letter-spacing:.08em}

/* ---------- header (white, sticky) ---------- */
.sh-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:box-shadow .25s}
.sh-head.scrolled{box-shadow:0 8px 24px rgba(21,23,28,.06)}
.sh-head-in{display:flex;align-items:center;gap:20px;height:98px;transition:height .25s;position:relative}
.sh-head.scrolled .sh-head-in{height:80px}
.sh-brand{display:flex;align-items:center;text-decoration:none}
.sh-brand-logo{height:68px;width:auto;display:block;transition:height .25s}
.sh-head.scrolled .sh-brand-logo{height:52px}
@media(max-width:560px){.sh-brand-logo{height:52px}.sh-head-in{height:76px}}
.sh-nav{display:none;gap:28px;margin-left:18px;flex:1}
.sh-nav a{text-decoration:none;color:var(--ink2);font-size:14.5px;font-weight:600;position:relative;padding:4px 0}
.sh-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .2s}
.sh-nav a:hover{color:var(--ink)}
.sh-nav a:hover::after{right:0}
.sh-head-act{display:flex;align-items:center;gap:10px;margin-left:auto}
.sh-cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:transparent;border:0;color:var(--ink);cursor:pointer;border-radius:50%}
.sh-cart-btn:hover{background:var(--cool)}
.sh-cart-count{position:absolute;top:3px;right:3px;min-width:17px;height:17px;padding:0 4px;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:17px;border-radius:999px;text-align:center}
.sh-head .sh-btn{padding:12px 24px;font-size:13.5px;min-height:44px}
/* "Prenota ora" resta SEMPRE visibile (conversione): su schermi stretti si compatta, non sparisce */
@media(max-width:560px){.sh-head .sh-btn{padding:10px 14px;font-size:12.5px}}
/* "Contatti" = text button (NON CTA colorato). Desktop: nell'area destra vicino a "Prenota ora".
   Mobile: fuori dalla barra (CTA colorati+carrello restano fuori), entra nel menu hamburger come
   ULTIMA voce -> vedi .sh-nav-contact nel blocco @media(max-width:899px). */
.sh-head-link{display:none;align-items:center;text-decoration:none;color:var(--ink2);
  font-size:14.5px;font-weight:600;white-space:nowrap;padding:4px 4px;position:relative}
.sh-head-link:hover{color:var(--ink)}
/* "Chi siamo" segue la stessa regola di "Contatti": sul desktop vive nell'area destra
   (.sh-head-link), sotto i 900px rientra nel pannello hamburger. */
.sh-nav-contact,.sh-nav-about{display:none}

/* --- Hamburger mobile: CSS-only (checkbox). Baseline funziona senza JS; il JS aggiunge solo
   aria-expanded + chiusura con Esc/resize/click-link. "Prenota ora" e carrello restano FUORI. --- */
.sh-navchk{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.sh-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;cursor:pointer;border-radius:10px}
.sh-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.sh-burger:hover{background:var(--cool)}
.sh-nav-scrim{display:none}
/* focus da tastiera: il control reale è il checkbox (nascosto), il ring lo mostriamo sul burger */
.sh-navchk:focus-visible ~ .sh-head-act .sh-burger{outline:2px solid var(--red);outline-offset:2px}
@media(min-width:900px){.sh-nav{display:flex}.sh-head-link{display:inline-flex}
  /* fillet verticale grigio tra "Contatti" e "Prenota ora" (solo desktop; su mobile "Contatti"
     è nell'hamburger e .sh-head-link è display:none → nessun fillet). Spaziatura simmetrica:
     14px a sinistra (padding-right) e 14px a destra (margin-right 4px + gap 10px di .sh-head-act). */
  .sh-head-link{padding-right:14px;margin-right:4px}
  /* senza filetto non serve lo spazio che gli faceva posto */
  .sh-head-link--plain{padding-right:4px;margin-right:0}
  .sh-head-link::after{content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);
    width:1px;height:18px;background:var(--line)}
  /* Il filetto separa il BLOCCO dei link testuali dal CTA colorato: ne serve UNO, sull'ultimo.
     Con due .sh-head-link (Chi siamo, Contatti) se ne disegnavano due — un segno in piu' senza
     significato, lo stesso difetto tolto dalla pagina "chi siamo".
     ⚠️ Questo annullamento deve stare DENTRO la media query: fuori, la regola con @media
     vince comunque per ordine di sorgente e il secondo filetto resta. */
  .sh-head-link--plain::after{content:none}}
@media(max-width:899px){
  .sh-burger{display:inline-flex}
  .sh-nav-contact,.sh-nav-about{display:block}
  .sh-nav{position:absolute;top:100%;left:0;right:0;z-index:2;display:none;flex-direction:column;
    gap:0;margin:0;padding:6px 24px 14px;background:#fff;border-top:1px solid var(--line);
    box-shadow:0 16px 30px rgba(21,23,28,.10)}
  .sh-nav a{padding:15px 2px;font-size:16px;border-bottom:1px solid var(--line)}
  .sh-nav a:last-child{border-bottom:0}
  .sh-nav a::after{display:none}
  .sh-navchk:checked ~ .sh-nav{display:flex}
  /* scrim SOTTO l'header: copre solo l'area pagina -> tap fuori chiude, header resta cliccabile */
  .sh-navchk:checked ~ .sh-nav-scrim{display:block;position:absolute;top:100%;left:0;right:0;
    height:100vh;z-index:1;background:transparent}
  /* burger -> X quando aperto */
  .sh-navchk:checked ~ .sh-head-act .sh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .sh-navchk:checked ~ .sh-head-act .sh-burger span:nth-child(2){opacity:0}
  .sh-navchk:checked ~ .sh-head-act .sh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- hero: editorial, asymmetric, photo with floating card ---------- */
.sh-hero{padding:64px 0 60px;position:relative;background:var(--bg);color:var(--ink)}
.sh-hero-in{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(min-width:960px){.sh-hero-in{grid-template-columns:1.08fr .92fr;gap:60px}}
.sh-hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);max-width:16ch}
.sh-hero-sub{color:var(--ink2);font-size:clamp(1.05rem,2.2vw,1.28rem);max-width:48ch;margin:22px 0 30px}
.sh-hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
@media(max-width:560px){.sh-hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .sh-hero-cta .sh-btn{width:100%;justify-content:center}
  .sh-hero-cta .sh-link,.sh-hero-cta a.link{text-align:center}}
.sh-hero-media{position:relative;aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  background:linear-gradient(155deg,#cfd9c9 0%,#e8dcc2 44%,#d3ac7c 100%)}
.sh-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sh-hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(17,19,24,.5),transparent 42%)}
.sh-hero-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(21,23,28,.3);
  font-family:var(--fc);letter-spacing:.1em;font-size:12.5px;text-transform:uppercase;text-align:center;padding:20px}
/* trust chips under hero */
/* claim uno per riga (PM, 19 lug): erano in fila e con 3 voci si spezzavano
   male; ora sono 2 e vanno letti come elenco, non come chip. */
.sh-trust{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0;margin:38px 0 0}
.sh-trust li{display:inline-flex;align-items:baseline;gap:7px;color:var(--mut);font-size:13px}
.sh-trust b{font-family:var(--fc);font-size:15px;font-weight:700;color:var(--ink)}
.sh-trust span{font-size:13px;color:var(--mut)}
.sh-trustbar{display:flex;flex-wrap:wrap;gap:10px 26px;padding:20px 0 0;margin:34px 0 0;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.sh-trustbar b{color:var(--ink);font-weight:700}
.sh-trustbar span{display:inline-flex;align-items:center;gap:7px}

/* ---------- live ticker: ULTIME PRENOTAZIONI ---------- */
@keyframes sh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sh-ticker-head{background:var(--bg);text-align:center;padding:22px 0 4px}
.sh-ticker{background:var(--cool);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:16px 0}
.sh-ticker-track{display:flex;width:max-content;gap:14px;animation:sh-marquee 40s linear infinite}
.sh-ticker-track:hover{animation-play-state:paused}
/* ogni prenotazione = piccola card (non chip): nome+nazione, prodotto+durata, fonte */
/* La chip e' un <a> verso la PDP quando il prodotto ha una scheda: text-decoration:none
   perche' la regola globale `a{color:inherit}` non toglie la sottolineatura, che qui
   snaturerebbe la card. Il colore resta quello dei figli, gia' dichiarato. */
.sh-ticker-item{text-decoration:none;display:flex;flex-direction:column;gap:5px;white-space:nowrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rs);padding:12px 16px;min-width:210px;box-shadow:0 1px 2px rgba(21,23,28,.04)}
.sh-tk-top{display:flex;align-items:baseline;gap:7px}
.sh-tk-top .sh-dot{align-self:center}
.sh-ticker-item .sh-tk-name{font-weight:800;color:var(--ink);font-size:14px}
.sh-ticker-item .sh-nat{font-weight:700;color:var(--mut);font-size:12.5px}
.sh-tk-prod{font-family:var(--fc);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.sh-tk-lvl{font-size:12.5px;color:var(--mut);font-weight:600}
.sh-ticker-item .sh-src{align-self:flex-start;font-family:var(--fc);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;
  font-weight:700;color:var(--green-d);background:var(--green-l);padding:2px 9px;border-radius:999px}

/* ---------- sections + grid ---------- */
.sh-sec{padding:76px 24px;position:relative}
.sh-sec--light{background:var(--cool)}
.sh-sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.sh-sec h2{font-size:clamp(2rem,4.4vw,2.9rem)}
.sh-sec-head p{color:var(--ink2);font-size:16px;margin:14px 0 0}
.sh-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:600px){.sh-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.sh-grid{grid-template-columns:repeat(3,1fr)}}

/* how it works */
.sh-steps{display:grid;grid-template-columns:1fr;gap:28px;max-width:var(--maxw);margin:0 auto}
@media(min-width:760px){.sh-steps{grid-template-columns:repeat(3,1fr)}}
.sh-step{text-align:center;padding:8px}
.sh-step .sh-n{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--red),#ff2d4c);border:0;color:#fff;
  font-family:var(--fc);font-weight:800;font-size:21px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;box-shadow:0 8px 20px rgba(228,0,43,.30)}
.sh-step h3{font-family:var(--f);font-weight:700;font-size:17.5px}
.sh-step p{color:var(--ink2);font-size:14.5px;margin:7px 0 0}

/* ---------- card ---------- */
.sh-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(21,23,28,.04);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
/* il filtro offerte nasconde le card con [hidden]: display:flex batte la regola UA [hidden],
   quindi va reso esplicito o le card "nascoste" restano visibili (bug filtri /all-offers). */
.sh-card[hidden]{display:none}
.sh-card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.sh-card-media{position:relative;aspect-ratio:4/3;display:flex;align-items:flex-end;padding:16px;overflow:hidden;
  background:linear-gradient(155deg,#dbe6d6,#e9dcc0);color:#fff}
/* cover photo: full-bleed protagonist; dark gradient only as a bottom frame (no color-correction) */
.sh-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sh-card:hover .sh-card-img{transform:scale(1.05)}
.sh-card-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(17,19,24,.55),transparent 55%)}
.sh-card-car{position:relative;z-index:2;font-family:var(--fc);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.sh-badge{position:absolute;top:13px;left:13px;z-index:2;background:rgba(255,255,255,.95);color:var(--ink);
  font-family:var(--f);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:6px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.sh-badge--hot{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff}
.sh-card-body{padding:22px;display:flex;flex-direction:column;gap:6px;flex:1}
.sh-card-name{font-family:var(--fd);font-weight:600;font-size:22px;color:var(--ink);letter-spacing:-.01em}
.sh-card-tag{font-size:14px;color:var(--ink2);flex:1;min-height:40px}
.sh-card-meta{font-size:12.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.sh-card-price{margin-top:8px;display:flex;align-items:baseline;gap:6px;color:var(--ink)}
.sh-card-price b{font-family:var(--fc);font-weight:800;font-size:26px;color:var(--red)}
.sh-from{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.sh-incl{margin-top:10px;font-size:12.5px;color:var(--ink2);font-weight:700;display:inline-flex;align-items:center;gap:7px}
.sh-incl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:sh-pulse 2.2s infinite}

/* ---------- dark cinematic band (the ONE dark moment: premium package) ---------- */
.sh-band{background:var(--dark);position:relative;color:#fff}
.sh-band-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:34px;align-items:center;
  padding:80px 24px;max-width:var(--maxw);margin:0 auto}
@media(min-width:900px){.sh-band-in{grid-template-columns:1.1fr .9fr;gap:60px}}
.sh-band .sh-eyebrow{color:rgba(240,242,246,.6)}
.sh-band .sh-eyebrow::before{background:var(--red2)}
.sh-band h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.1rem)}
.sh-band h2 em{color:var(--red2)}
.sh-band p{color:rgba(240,242,246,.72);font-size:16.5px;max-width:46ch;margin:18px 0 30px}
.sh-band-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.sh-band .sh-btn-ghost{color:#fff;border-color:rgba(255,255,255,.28);background:none}
.sh-band .sh-btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,147,46,.08)}
.sh-band-price{font-family:var(--fc);font-size:14.5px;color:rgba(240,242,246,.6);margin-top:20px}
.sh-band-price b{color:#fff;font-size:27px;font-family:var(--fc);font-weight:800}
.sh-band-media{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(155deg,#2a2f3a,#111318);box-shadow:var(--shd);display:flex;align-items:center;
  justify-content:center;color:rgba(255,255,255,.22);font-family:var(--fc);letter-spacing:.1em;
  text-transform:uppercase;font-size:13px}
.sh-band-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
@keyframes sh-drift{from{transform:translate(-4%,-2%)}to{transform:translate(4%,3%)}}
.sh-band-media::before{content:"";position:absolute;inset:-40%;z-index:1;
  background:radial-gradient(circle at 30% 20%,rgba(228,0,43,.16),transparent 55%);animation:sh-drift 9s ease-in-out infinite alternate}
/* Ventaglio band premium (PM): 3 immagini a carte con rotazione on hover + magnify on click.
   Fan da un perno bottom-center; le carte esterne ruotano di più al passaggio del mouse. */
.sh-band-fan{overflow:visible;background:none;box-shadow:none;aspect-ratio:4/3;display:block}
.sh-band-fan::before{display:none}
.sh-fan-item{position:absolute;left:50%;bottom:6%;width:62%;aspect-ratio:3/2;border:0;padding:0;
  cursor:zoom-in;border-radius:var(--rs);overflow:hidden;background:var(--dark2);
  box-shadow:0 16px 38px rgba(0,0,0,.5);transform-origin:bottom center;
  transform:translateX(-50%) rotate(0deg);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1)}
.sh-fan-item img{position:static;inset:auto;width:100%;height:100%;object-fit:cover;display:block}
.sh-fan-1{transform:translateX(-50%) rotate(-11deg);z-index:1}
.sh-fan-2{transform:translateX(-50%) rotate(0deg);z-index:3}
.sh-fan-3{transform:translateX(-50%) rotate(11deg);z-index:2}
/* passaggio del mouse sul ventaglio: le carte si aprono (transizione morbida) */
.sh-band-fan:hover .sh-fan-1{transform:translateX(-50%) rotate(-19deg)}
.sh-band-fan:hover .sh-fan-2{transform:translateX(-50%) translateY(-6%) scale(1.03)}
.sh-band-fan:hover .sh-fan-3{transform:translateX(-50%) rotate(19deg)}
/* carta sotto il cursore: si raddrizza, si solleva e passa in primo piano — tutto in transizione,
   niente salto istantaneo (lo scale/lift accompagna il cambio di z-index). */
.sh-band-fan .sh-fan-1:hover{transform:translateX(-50%) rotate(-4deg) translateY(-9%) scale(1.07);z-index:5;box-shadow:0 30px 72px rgba(0,0,0,.62)}
.sh-band-fan .sh-fan-2:hover{transform:translateX(-50%) translateY(-10%) scale(1.07);z-index:5;box-shadow:0 30px 72px rgba(0,0,0,.62)}
.sh-band-fan .sh-fan-3:hover{transform:translateX(-50%) rotate(4deg) translateY(-9%) scale(1.07);z-index:5;box-shadow:0 30px 72px rgba(0,0,0,.62)}
.sh-fan-item:focus-visible{outline:2px solid var(--red2);outline-offset:3px;z-index:5}
@media(prefers-reduced-motion:reduce){.sh-fan-item{transition:none}}

/* ---------- Driver of the Day wall (IG, immagini scaricate da build_ig.py) ---------- */
.sh-dotd{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:var(--maxw);margin:0 auto}
@media(min-width:600px){.sh-dotd{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.sh-dotd{grid-template-columns:repeat(4,1fr);gap:16px}}
.sh-dotd-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--rs);
  background:var(--line);box-shadow:0 1px 2px rgba(21,23,28,.04);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.sh-dotd-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sh-dotd-tile:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.sh-dotd-tile:hover img{transform:scale(1.06)}
/* accento rosso al passaggio: firma del brand, non un badge IG generico */
.sh-dotd-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--red2));transform:scaleX(0);transform-origin:left;transition:transform .25s}
.sh-dotd-tile:hover::after{transform:scaleX(1)}

/* ---------- /grazie — atterraggio post-pagamento ---------- */
.sh-thx{padding:72px 24px 96px}
.sh-thx-in{max-width:660px}
.sh-thx h1{font-size:clamp(2.1rem,5vw,3.2rem);margin-top:14px}
.sh-thx-sub{color:var(--ink2);font-size:clamp(1.05rem,2.2vw,1.22rem);margin:18px 0 30px}
.sh-thx-order{display:inline-flex;align-items:baseline;gap:12px;background:var(--cool);
  border:1px solid var(--line);border-radius:999px;padding:12px 22px;margin-bottom:34px}
.sh-thx-order span{font-family:var(--fc);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--mut)}
.sh-thx-order b{font-family:var(--fc);font-weight:800;font-size:18px;color:var(--ink);letter-spacing:.04em}
.sh-thx-next{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--r);padding:24px 26px;margin-bottom:26px}
.sh-thx-next h2{font-family:var(--f);font-weight:700;font-size:16px;margin:0 0 12px}
.sh-thx-next ol{margin:0;padding-left:20px;color:var(--ink2);font-size:14.5px}
.sh-thx-next li{padding:5px 0}
.sh-thx-help{color:var(--ink2);font-size:14.5px;margin:0 0 26px}

/* ---------- pista in fondo alla flotta: mostrata, non spinta ---------- */
.sh-fleet-trk{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.sh-fleet-trk-head{max-width:640px;margin:0 0 26px}
.sh-fleet-trk-head p:last-child{color:var(--ink2);font-size:14.5px;margin:10px 0 0}
/* card pista: stessa griglia delle stradali ma qualificata — non e' un test drive */
.sh-card--trk .sh-card-media{background:linear-gradient(155deg,#2a2f3a,#111318)}
.sh-badge--trk{background:var(--dark);color:#fff}

/* ---------- pista (/experiences/pista) — SEO long-tail, mai in vetrina ---------- */
.sh-trk-wrap{padding:48px 24px 90px}
/* indice "Tutte le offerte": gruppi (strada / altre / pista) con la stessa
   griglia della flotta, cosi' le card sono identiche a quelle della home. */
.sh-off-wrap{padding:48px 24px 90px;display:flex;flex-direction:column;gap:26px}
/* Nessuna sezione preimpostata: griglia unica + chip di filtro (PM, 19 lug).
   Le chip filtrano lato client su data-cat: nessun reload, nessuna URL nuova. */
/* barra offerte: chip di filtro a sinistra, ordinamento a destra */
.sh-off-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.sh-chips{display:flex;flex-wrap:wrap;gap:9px}
.sh-sort{display:inline-flex;align-items:center;gap:8px;font-family:var(--fc);font-size:12.5px;
  font-weight:700;letter-spacing:.04em;color:var(--ink2)}
.sh-sort select{font-family:var(--f);font-size:13px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:9px 30px 9px 14px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4" fill="none" stroke="%234b515c" stroke-width="1.6"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center}
.sh-sort select:hover{border-color:var(--ink2)}
.sh-sort select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sh-chip{padding:9px 16px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  border-radius:999px;font-family:var(--fc);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink2);transition:border-color .18s ease,background .18s ease,color .18s ease}
.sh-chip:hover{border-color:var(--ink2)}
.sh-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sh-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.sh-off-none{margin:24px 0 0;color:var(--mut);font-size:14px}
/* eyebrow+intro dell'hub /all-offers/: kicker editoriale + paragrafo introduttivo SEO */
.sh-off-intro{margin:14px 0 0;max-width:720px;color:var(--ink2);font-size:16px;line-height:1.65}
/* scheda tecnica PDP auto: griglia sobria di 6 voci (label + valore) */
.sh-spec-grid{display:grid;grid-template-columns:1fr;gap:0;margin:0;border:1px solid var(--line);
  border-radius:var(--rs);overflow:hidden}
@media(min-width:560px){.sh-spec-grid{grid-template-columns:1fr 1fr}}
.sh-spec{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 16px;border-top:1px solid var(--line)}
.sh-spec:first-child,.sh-spec:nth-child(2){border-top:0}
@media(max-width:559px){.sh-spec:nth-child(2){border-top:1px solid var(--line)}}
.sh-spec dt{margin:0;font-family:var(--fc);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.sh-spec dd{margin:0;font-weight:700;font-size:14px;color:var(--ink);text-align:right}
/* empty-state per categoria senza prodotti (premium/road-track/merch/b2b): sobrio + contatto */
.sh-off-empty{margin:48px auto 8px;max-width:560px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:18px}
/* FIX (bug #263-style): display:flex batteva l'UA [hidden]{display:none} -> tutti gli empty
   restavano visibili insieme. Ripristina il gating: [hidden] nasconde davvero. */
.sh-off-empty[hidden]{display:none}
.sh-off-empty p{margin:0;color:var(--ink2);font-size:16px;line-height:1.6}
.sh-off-empty-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* CTA WhatsApp negli empty-state: verde brand come le altre WA del sito (non ghost) */
.sh-btn-wa{background:var(--green);border-color:var(--green);color:#fff}
.sh-btn-wa:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
/* blocco editoriale in coda alla griglia: H2 per categoria + link interni (SEO/GEO) */
.sh-off-editorial{border-top:1px solid var(--line);margin-top:20px;padding-top:40px}
.sh-off-editorial-in{max-width:820px;display:grid;gap:26px}
.sh-off-ed-block h2{font-family:var(--fd);font-size:20px;margin:0 0 8px}
.sh-off-ed-block p{margin:0;color:var(--ink2);font-size:15px;line-height:1.7}
/* Blocco a piu' capoversi: senza stacco i paragrafi si leggono come un muro unico.
   Solo le pagine "chi siamo" ne hanno piu' di uno — altrove la regola non si applica. */
.sh-off-ed-block p + p{margin-top:14px}
/* Foto editoriale dentro la colonna del testo (chi siamo). Larga quanto la colonna e con
   le proporzioni originali: e' una foto di GRUPPO, ritagliarla in fascia larga vorrebbe
   dire tagliare via delle teste. `aspect-ratio` riserva lo spazio prima del caricamento,
   cosi' il testo sotto non salta (CLS). */
/* Blocco racconto della pagina "chi siamo": stessa aria sopra e sotto (prima ce n'era
   solo sopra, e il testo finiva incollato alla fascia successiva). Lo spazio sta QUI e
   non nel blocco editoriale, cosi' comprende anche la foto che lo chiude. */
/* ⚠️ Il padding laterale (24px) va RIPETUTO: questa regola viene dopo `.sh-wrap` e la
   forma abbreviata `padding:72px 0` ne azzerava i lati. Su desktop era quasi invisibile,
   su telefono riportava il testo a filo dello schermo — proprio il difetto appena corretto. */
.sh-about-body{padding:72px 24px}
/* Il filetto divide l'editoriale dalle card che lo precedono su all-offers/merch/eventi.
   Su "chi siamo" non c'e' nulla sopra da cui separarlo — arriva subito dopo l'hero — e
   diventa un segno in piu' senza significato. Tolto SOLO qui. */
[data-page="about"] .sh-off-editorial{border-top:0;margin-top:0;padding-top:0}
.sh-ed-figure{max-width:820px;margin:26px 0 0}
.sh-ed-photo{width:100%;height:auto;aspect-ratio:1260/945;object-fit:cover;display:block;
  border-radius:var(--rs);background:var(--cool)}
.sh-ed-figure figcaption{margin-top:9px;font-size:13px;color:var(--mut);line-height:1.5}
.sh-off-ed-block a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
/* nota sotto il selettore carnet: informazione di servizio, non copy di vendita */
.sh-carnet-note{margin:14px 0 0;color:var(--mut);font-size:12.5px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.sh-chip{transition:none}}
.sh-trk-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:34px}
@media(min-width:760px){.sh-trk-grid{grid-template-columns:repeat(2,1fr)}}
.sh-trk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(21,23,28,.04);display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.sh-trk:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.sh-trk-media{position:relative;aspect-ratio:4/3;display:flex;align-items:flex-end;padding:16px;overflow:hidden;
  background:linear-gradient(155deg,#2a2f3a,#111318);color:#fff}
.sh-trk-media .sh-card-img{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sh-trk:hover .sh-card-img{transform:scale(1.05)}
.sh-trk-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(17,19,24,.6),transparent 55%)}
.sh-trk-soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.28);font-family:var(--fc);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px}
.sh-trk-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.sh-trk-body h2{font-family:var(--fd);font-weight:600;font-size:24px;color:var(--ink)}
.sh-trk-choose{font-family:var(--fc);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--mut);margin:0}
.sh-trk-laps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.sh-trk-laps li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.sh-trk-laps li:last-child{border-bottom:0}
.sh-trk-l{font-family:var(--fc);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.sh-trk-laps b{font-family:var(--fc);font-weight:800;font-size:21px;color:var(--red)}
.sh-trk-body .sh-btn{margin-top:6px;align-self:flex-start}
.sh-refund h3{font-family:var(--f);font-weight:700;font-size:16px;margin:0 0 8px}

/* ---------- guest book / trust strip ---------- */
.sh-quotes{display:grid;grid-template-columns:1fr;gap:24px;max-width:var(--maxw);margin:0 auto}
@media(min-width:760px){.sh-quotes{grid-template-columns:repeat(3,1fr)}}
.sh-q{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:0 1px 2px rgba(21,23,28,.04);transition:box-shadow .2s,transform .2s}
.sh-q:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.sh-q p{font-family:var(--fd);font-weight:500;font-size:17.5px;color:var(--ink);margin:0 0 16px;line-height:1.45}
.sh-q-who{font-size:13px;color:var(--mut)}
.sh-q-who b{color:var(--ink2);font-weight:700}
.sh-stars{color:var(--gold);font-size:14px;margin-bottom:11px;letter-spacing:2px}
.sh-strip{display:flex;flex-wrap:wrap;gap:28px 44px;justify-content:center;align-items:center;padding:38px 0 0}
.sh-strip .sh-t{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:13.5px;font-weight:600}
.sh-strip .sh-ic{width:30px;height:30px;border-radius:50%;background:var(--cool);color:var(--ink2);display:flex;
  align-items:center;justify-content:center;font-size:14px;flex:none}
.sh-strip .sh-ic--gold{background:var(--gold-l);color:var(--gold-d)}

/* ---------- PDP ---------- */
.sh-pdp-hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#2a2f3a,#111318)}
.sh-pdp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:0}
.sh-pdp-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,19,24,.35),rgba(17,19,24,.85)),linear-gradient(90deg,rgba(17,19,24,.5),transparent 62%)}
.sh-pdp-hero-in{position:relative;z-index:2;padding:56px 24px 60px;max-width:var(--maxw);margin:0 auto}
.sh-crumb{font-family:var(--fc);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.5);margin-bottom:16px}
.sh-crumb a{color:rgba(255,255,255,.75);text-decoration:none}
.sh-crumb a:hover{color:#fff}
.sh-pdp-hero h1{font-size:clamp(2.2rem,7vw,3.8rem);color:#fff}
.sh-pdp-tag{color:rgba(255,255,255,.82);font-size:clamp(1rem,3.2vw,1.2rem);margin:14px 0 22px;max-width:42ch}
.sh-guar{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
/* Payoff e chip erano attaccati: margine 0 su entrambi, quindi le pill partivano a filo
   dell'ultima riga di testo. Regola GENERALE: vale ovunque le chip seguano il payoff.
   Oggi sono "chi siamo" e all-offers -- merchandising ed eventi hanno il payoff ma NON
   le chip, quindi la' non cambia nulla. Una pagina futura che le mostrera' eredita lo
   stacco senza doverlo rimettere a mano. */
.sh-off-intro + .sh-guar{margin-top:22px}
/* Variante CHIARA. .sh-guar nasce bianco-su-scuro (hero PDP e all-offers hanno fondo
   scuro), ma l'hero delle landing di categoria e' su --bg chiaro: le stesse pill li'
   sarebbero bianche su bianco. Cambiano solo i tre colori, non la forma: restano le
   stesse pill, cosi' la garanzia si riconosce uguale in tutto il sito. */
/* Blocco "prenota" delle landing. Stessa scatola bianca del buybox delle PDP: chi
   arriva dall'annuncio deve riconoscere subito che li' si compra. Colonna stretta e
   centrata come il modulo del sito storico — un form lungo quanto la pagina si legge
   peggio, non meglio. */
/* Garanzie a SINISTRA, modulo a destra (richiesta PM 24 ago). Prima le pill stavano
   nell'hero, quindi SOPRA il modulo, e su desktop il blocco restava una colonna stretta
   con spazio vuoto ai lati. Il form del sito storico tiene le garanzie a fianco: si
   leggono mentre si compila, non prima.
   Sotto i 920px una colonna sola, e il MODULO viene per primo (order): su schermo
   stretto quello che serve e' comprare, la rassicurazione puo' seguire. */
.sh-book-grid{display:grid;grid-template-columns:1fr;gap:28px}
.sh-book-left{display:flex;flex-direction:column;gap:26px}
/* Filetto: separa le garanzie — statiche, sempre le stesse — da tutto cio' che sta sopra
   e CAMBIA con la scelta (i due segnaposto prima, foto + dettaglio esperienza dopo).
   Senza, «Prenoti senza rischi» si leggeva come la coda della didascalia della vettura,
   attaccato al prezzo. Sta sul blocco garanzie e non sulla foto perche' la foto e'
   `hidden` finche' non si sceglie: un filetto in fondo a lei sparirebbe proprio quando
   serve di piu', cioe' quando sopra ci sono i segnaposto. */
.sh-book-side{border-top:1px solid var(--line);padding-top:22px}
@media(min-width:920px){
  .sh-book-grid{grid-template-columns:1fr 520px;gap:52px;align-items:start}
}
/* Su schermo stretto i tre pezzi si riordinano: FOTO, modulo, garanzie. La foto e'
   emozione e va PRIMA della scelta; la rassicurazione dopo. `display:contents` scioglie
   il contenitore di sinistra cosi' i suoi due figli diventano celle della griglia e
   possono essere ordinati singolarmente — senza, foto e garanzie resterebbero incollate
   e il modulo non potrebbe infilarsi in mezzo. */
@media(max-width:919px){
  .sh-book-left{display:contents}
  .sh-book-media{order:1;margin:0}
  .sh-book{order:2}
  .sh-book-side{order:3}
}
/* I due segnaposto sono i PASSI DEL WIZARD sulla colonna che il modulo riempira'.
   Restano bassi e orizzontali — non riquadri alti quanto la foto che sostituiscono, o
   spingerebbero le garanzie fuori schermo — ma ora sono BOX veri: tratteggiati sul fondo
   caldo della banda si perdevano, e in produzione non venivano riconosciuti come passi
   da compilare.

   ⚠️ REGOLA: NON sono una CTA. Niente pillola rossa piena, niente gradiente, niente glow:
   quello e' il linguaggio di «Prenota ora». Un passo da leggere che sembra un bottone si
   fa cliccare invece che leggere, e la delusione ricade sul modulo.
   Quello che li rende evidenti e' altro: la scheda bianca che si stacca dal fondo, il
   titolo in condensed maiuscolo, e soprattutto il fatto che parlino la LINGUA DEL MODULO
   di fianco — stesso pallino rosso numerato. */
.sh-book-ph{display:flex;align-items:flex-start;gap:13px;padding:16px 44px 16px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rs);
  box-shadow:var(--sh-sm);position:relative}
/* Lo stesso numero di `.sh-bb-n` nel modulo: e' cio' che dice che «1» qui e «1» li' sono
   lo STESSO passo. Il pallino bianco col bordino di prima diceva l'opposto — disattivato,
   non ancora tuo. */
.sh-book-ph-n{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--red);border:0;
  font-family:var(--fc);font-size:12.5px;font-weight:800;color:#fff;line-height:1}
.sh-book-ph b{display:block;font-family:var(--fc);font-size:15px;font-weight:800;
  color:var(--ink);text-transform:uppercase;letter-spacing:.05em}
.sh-book-ph b + span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink2);line-height:1.45}
/* La freccia e' l'invito, ed e' la ragione del padding-right generoso qui sopra: dice
   DOVE si compila. Da 920px il modulo sta a destra, sotto sta in basso — quindi la
   freccia gira, altrimenti punta il vuoto. */
.sh-book-ph::after{content:"↓";position:absolute;right:16px;top:50%;
  transform:translateY(-50%);font-size:18px;line-height:1;color:var(--red);opacity:.55}
@media(min-width:920px){
  .sh-book-ph::after{content:"→"}
  /* Un cenno, non un'animazione: sposta di 3px e torna. Serve a far notare la direzione
     a chi scorre, non a chiedere un click. */
  @media(prefers-reduced-motion:no-preference){
    .sh-book-ph::after{animation:sh-ph-nudge 2.4s ease-in-out infinite}
  }
}
@keyframes sh-ph-nudge{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(3px)}
}
@media(max-width:919px){.sh-book-ph[data-ph-car]{order:1}.sh-book-ph[data-ph-lvl]{order:2}}
/* Configuratore: la foto dell'auto scelta e, sotto, cosa si sta comprando. */
.sh-book-media{margin:0;display:flex;flex-direction:column;gap:14px}
/* `hidden` deve vincere su questi due, e da solo non ce la fa: `[hidden]{display:none}` e
   `.sh-book-ph` / `.sh-book-media` hanno la STESSA specificita' (0,1,0), quindi decide
   l'ordine nel file — e queste vengono dopo. Il JS impostava gia' l'attributo nel modo
   giusto (`fig.hidden`, `phCar.hidden`, `phLvl.hidden`): mancava solo che servisse a
   qualcosa. Senza questa riga la preview resta a schermo con nessuna auto scelta e i
   segnaposto non spariscono alla selezione — due sintomi, un difetto solo.
   Selettore composto (0,2,0) e non `!important`: vince per specificita', non per forza,
   e non toglie a nessuno la possibilita' di sovrascriverlo domani. */
.sh-book-media[hidden],.sh-book-ph[hidden]{display:none}
.sh-book-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  display:block;background:var(--cool)}
.sh-book-media figcaption b{display:block;font-family:var(--fc);font-size:19px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink)}
/* Road & Track: preview dell'auto del transfer in cima al buybox. Riusa .sh-book-media
   per la foto; qui solo spaziatura + occhiello che la etichetta come auto del transfer,
   cosi' non compete con l'eroe di pagina (la Challenge). */
.sh-rt-prev{margin:0 0 18px}
.sh-rt-prev-cap{margin-top:9px}
.sh-rt-prev-lbl{display:block;font-family:var(--fc);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;font-weight:700;color:var(--ink2);margin-bottom:2px}
.sh-book-sel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px}
.sh-book-sel .sh-book-lvl{font-size:14.5px;color:var(--ink2)}
.sh-book-sel .sh-book-price{font-family:var(--fc);font-size:17px;font-weight:800;color:var(--red)}
.sh-book-sel .sh-book-sep{color:var(--line)}
.sh-book-side-t{font-family:var(--fc);font-size:15px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink2);margin:0 0 16px}
.sh-book-guar{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:22px}
.sh-book-guar li{position:relative;padding-left:34px}
.sh-book-guar b{display:block;font-family:var(--fc);font-size:16px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:5px}
.sh-book-guar span{display:block;font-size:14px;color:var(--ink2);line-height:1.5;max-width:40ch}
/* Spunta disegnata col bordo, non un glifo: resta nitida a qualsiasi dimensione e non
   dipende dal font di sistema (il carattere di spunta cambia forma fra piattaforme). */
.sh-book-guar li::before{content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;
  border-radius:50%;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 5-5L12.5 5z' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='7.2' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 5-5L12.5 5z' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='7.2' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
.sh-book-fine{margin:20px 0 0;font-size:12.5px;color:var(--mut);line-height:1.5;max-width:44ch}
/* width:100% + max-width:520 -> il box RIEMPIE sempre la sua colonna (520px a desktop),
   invece di dimensionarsi sul contenuto. Senza, scegliendo un prodotto con modulo piu'
   stretto (es. F1 Simulator, che nasconde la riga data/ora) il box si restringeva. */
.sh-book{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--sh);display:flex;flex-direction:column;gap:13px;width:100%;max-width:520px;margin:0 auto}
.sh-book-t{font-family:var(--fc);font-size:20px;font-weight:800;letter-spacing:-.01em;
  margin:0 0 2px;color:var(--ink)}
.sh-book .sh-bb-step:first-of-type{margin-top:0}
.sh-book .sh-slot-pick{display:flex;flex-direction:column;gap:11px}
.sh-guar span,.sh-guar li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:8px 14px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff}
/* La variante chiara DEVE stare DOPO la regola base: `.sh-guar--light span` e
   `.sh-guar span` hanno la STESSA specificita' (una classe + un elemento), quindi non
   vince la piu' specifica — vince l'ultima scritta. Messa prima (com'era il 23 ago) le
   pill restavano #fff su bianco al 10% sopra un hero #f7f5f1: invisibili, ed e' andato
   live cosi'. Se un giorno serve spostarla, va spostata insieme la regola base. */
.sh-guar--light{margin-top:26px}
.sh-guar--light span,.sh-guar--light li{background:var(--cool);border-color:var(--line);color:var(--ink2)}
/* Sulla all-offers le pill sono 4 (non 3 come nelle PDP): a 375px si impilavano una
   per riga rubando 170px di hero prima delle offerte. Stretta solo dove sono quattro
   (offers e about), cosi' le PDP restano identiche.
   Chi siamo ha lo stesso identico problema: misurato a 375px, quattro pill = quattro
   righe prima ancora di leggere chi siamo. */
/* Le landing di categoria hanno lo STESSO problema, misurato a 375px: quattro pill =
   quattro righe (667, 711, 756, 800px) = ~180px di hero rubati prima di arrivare al
   blocco "prenota", che e' esattamente la cosa che devono far vedere. Stessa stretta,
   stessa soglia. */
@media(max-width:560px){
  body[data-page="offers"] .sh-guar,
  body[data-page="about"] .sh-guar,
  body[data-page="category"] .sh-guar{gap:6px}
  body[data-page="offers"] .sh-guar span,
  body[data-page="about"] .sh-guar span,
  body[data-page="category"] .sh-guar span{padding:6px 10px;font-size:10.5px;letter-spacing:.03em}
}
/* Il blocco su schermo stretto: meno imbottitura, cosi' i select restano larghi. */
@media(max-width:560px){.sh-book{padding:20px 16px}}
.sh-pdp-grid{display:grid;grid-template-columns:1fr;gap:28px;padding:44px 24px 90px;max-width:var(--maxw);margin:0 auto}
@media(min-width:920px){.sh-pdp-grid{grid-template-columns:1fr 380px;align-items:start}}
.sh-lead{font-size:16.5px;color:var(--ink2);max-width:62ch}
/* galleria PDP: griglia fluida, nessuna libreria. Le immagini stanno sotto la
   piega e caricano lazy.
   height:auto E OBBLIGATORIO: gli attributi width/height sull img (che servono a
   evitare il layout shift) diventano un presentational hint height:933px che
   SOVRASCRIVE aspect-ratio. Senza height:auto la griglia esce con immagini alte
   933px.
   piega e caricano lazy: non competono con l LCP. */
/* griglia CAPPATA a 3 colonne (era auto-fill): il layout "primo span-2 + cover accanto"
   regge solo se le colonne sono esattamente 3. Con auto-fill un monitor largo dava 4 col
   e il 3° item, a 3/2, tornava a lasciare un buco sotto. 2 col sotto i 680px. */
.sh-gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:680px){.sh-gal-grid{grid-template-columns:repeat(3,1fr)}}
/* l'item e' un <button> (accessibile da tastiera): reset e geometria stanno qui,
   l'immagine dentro riempie e basta. */
.sh-gal-item{border:0;padding:0;background:var(--line);cursor:zoom-in;display:block;
  border-radius:var(--rs);overflow:hidden;aspect-ratio:3/2;width:100%}
.sh-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.sh-gal-item:hover img{transform:scale(1.04)}
.sh-gal-item:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* il primo scatto occupa due colonne: crea ritmo nella griglia, senza JS */
.sh-gal-item:first-child{grid-column:span 2;aspect-ratio:2/1}
/* la cover (2° item) riempie la cella accanto al primo, alta uguale: niente fascia bianca
   sotto. SOLO a 3 colonne (>=680px), dove il primo span-2 è più alto del vicino; a 2 colonne
   il primo occupa l'intera riga e il fill creerebbe un buco sotto il 3° item. */
@media(min-width:680px){.sh-gal-item:nth-child(2){aspect-ratio:auto;height:100%}}
@media(prefers-reduced-motion:reduce){.sh-gal-item img{transition:none}
  .sh-gal-item:hover img{transform:none}}

/* --- lightbox: <dialog> nativo, nessuna libreria ---------------------------
   Focus trap, Esc e backdrop li fornisce il browser. Riscriverli a mano e'
   esattamente dove si annidano i bug di accessibilita'. */
.sh-lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100%;height:100%;display:none;place-items:center;overflow:hidden}
.sh-lb[open]{display:grid}
.sh-lb::backdrop{background:rgba(21,23,28,.92)}
.sh-lb-img{max-width:min(1400px,94vw);max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--rs);display:block}
.sh-lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;margin:0;
  color:#fff;font-size:13px;opacity:.85;padding:0 60px}
.sh-lb-x,.sh-lb-nav{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;border-radius:50%;width:46px;height:46px;font-size:26px;line-height:1;
  display:grid;place-items:center;transition:background .2s}
.sh-lb-x:hover,.sh-lb-nav:hover{background:rgba(255,255,255,.28)}
.sh-lb-x{top:18px;right:18px;font-size:30px}
.sh-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.sh-lb-next{right:18px;top:50%;transform:translateY(-50%)}
@media(max-width:560px){.sh-lb-prev{left:8px}.sh-lb-next{right:8px}
  .sh-lb-cap{padding:0 16px;bottom:14px}}
.sh-block{margin-top:38px}
.sh-block h2{font-size:1.5rem;margin-bottom:16px}
/* PDP content (percorso/requisiti) */
.sh-facts,.sh-reqs{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:11px}
.sh-facts li,.sh-reqs li{position:relative;padding-left:28px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.sh-facts li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.sh-reqs li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--green-d);font-weight:800}
/* Road & Track (pista): formula senza prezzo/checkout, solo rimando al contatto */
.sh-rt-note{margin:14px 0 18px;color:var(--ink2);font-size:14.5px}
/* FAQ accordion (PDP) — pronto per JSON-LD FAQPage (item 3) */
.sh-faq-item{border-bottom:1px solid var(--line)}
.sh-faq-item summary{list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative;
  font-family:var(--f);font-weight:700;font-size:15.5px;color:var(--ink)}
.sh-faq-item summary::-webkit-details-marker{display:none}
.sh-faq-item summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--fc);font-weight:800;font-size:22px;color:var(--red);transition:transform .2s}
.sh-faq-item[open] summary::after{content:"\2013"}
.sh-faq-item summary:hover{color:var(--red)}
.sh-faq-a{padding:0 0 16px;color:var(--ink2);font-size:14.5px;line-height:1.6;max-width:64ch}
.sh-faq-a p{margin:0}
/* CANONICALE (PM 20 lug): <summary> senza bullet/marker di default in TUTTO il sito — mai
   "bullet + expand", solo un simbolo di expand pulito. */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
/* pagine legali (cookie/privacy, sorgente iubenda): +/- come l'accordion FAQ, niente triangolo */
.sh-legal details{border-bottom:1px solid var(--line)}
.sh-legal details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.sh-legal details>summary h3{margin:14px 0}
.sh-legal details>summary::after{content:"+";font-family:var(--fc);font-weight:700;font-size:22px;line-height:1;color:var(--red);flex:none}
.sh-legal details[open]>summary::after{content:"\2013"}
.sh-legal details>summary:hover h3{color:var(--red)}
/* cross-sell PDP (altre Ferrari) — full width sotto la griglia */
.sh-cross{margin-top:8px;padding:44px 0 64px;border-top:1px solid var(--line)}
.sh-cross .sh-sec-head h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:22px}

/* levels */
.sh-levels{display:flex;flex-direction:column;gap:10px}
.sh-level{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--rs);
  padding:15px 17px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s}
.sh-level:hover{border-color:var(--mut)}
.sh-level input{accent-color:var(--red);width:19px;height:19px;flex:none}
.sh-level:has(input:checked){border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.12);background:#fff7f8}
.sh-level-main{display:flex;flex-direction:column;gap:3px;flex:1}
.sh-level-name{font-family:var(--fc);font-weight:700;font-size:17px;text-transform:uppercase;color:var(--ink)}
.sh-level-meta{font-size:12px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.sh-level-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sh-tag{font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}
.sh-tag-reco{background:var(--gold-l);color:var(--gold-d)}
.sh-tag-gift{background:var(--green-l);color:var(--green-d)}
.sh-level-price{font-family:var(--fc);font-weight:800;font-size:20px;white-space:nowrap;color:var(--red)}

/* add-on PDP: CARD col bordo (formato tipo livello: controllo a sx, prezzo € a dx, niente "+").
   Il "Dettagli" (+/-) e il suo contenuto stanno DENTRO la card (border-top), non fuori; il
   toggle è fuori dal <label> così aprirlo NON seleziona l'add-on. Multi-selezione checkbox. */
.sh-addons{display:flex;flex-direction:column;gap:8px}
.sh-upsells{gap:12px}
.sh-addon-card{border:1px solid var(--line);border-radius:var(--rs);background:#fff;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,background .15s}
.sh-addon-card:has(input:checked){border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.12);background:#fff7f8}
.sh-addon{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;margin:0}
.sh-addon input{accent-color:var(--red);width:19px;height:19px;flex:none}
.sh-addon-name{flex:1;font-family:var(--fc);font-weight:700;font-size:15px;text-transform:uppercase;color:var(--ink)}
.sh-addon-price{font-family:var(--fc);font-weight:800;font-size:18px;color:var(--red);white-space:nowrap}
.sh-addon-exp{border-top:1px solid var(--line)}
.sh-addon-card:has(input:checked) .sh-addon-exp{border-top-color:rgba(228,0,43,.18)}
.sh-addon-exp>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  padding:10px 16px;font-family:var(--fc);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2)}
.sh-addon-exp>summary::after{content:"+";font-family:var(--fc);font-weight:800;font-size:18px;line-height:1;color:var(--red)}
.sh-addon-exp[open]>summary::after{content:"\2013"}
.sh-addon-exp>summary:hover{color:var(--ink)}
.sh-addon-exp-body{padding:0 16px 14px;color:var(--ink2);font-size:13.5px;line-height:1.6}
.sh-addon-exp-body p{margin:0;max-width:64ch}
.sh-addon-exp-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
/* counter passeggero (ADD-PAX): stepper sobrio 1-2, coerente con la riga add-on */
.sh-addon-qty{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.sh-addon-card:has(input:checked) .sh-addon-qty{border-top-color:rgba(228,0,43,.18)}
.sh-addon-qty-lbl{font-family:var(--fc);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink2)}
.sh-addon-step{margin-left:auto;display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;background:#fff}
.sh-addon-step button{width:34px;height:34px;border:0;background:#fff;color:var(--ink);
  font-family:var(--fc);font-size:19px;font-weight:800;line-height:1;cursor:pointer;transition:background .15s ease}
.sh-addon-step button:hover:not(:disabled){background:#fff0f2;color:var(--red)}
.sh-addon-step button:disabled{opacity:.32;cursor:default}
.sh-addon-step button:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.sh-addon-step [data-qty-val]{min-width:26px;text-align:center;font-family:var(--fc);font-weight:800;
  font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.sh-addon-step button{transition:none}}
/* bundle add-on inclusi per durata: stato "Incluso" (verde), non pagabile due volte */
.sh-addon-incl-msg{margin:0 0 12px;padding:11px 14px;border-radius:var(--rs);
  background:var(--green-l);border:1px solid rgba(0,166,81,.28);color:var(--green-d);
  font-size:13.5px;line-height:1.5;font-weight:600}
.sh-addon-card.is-included{border-color:rgba(0,166,81,.45);background:var(--green-l)}
.sh-addon-card.is-included .sh-addon{cursor:default}
.sh-addon-card.is-included input{display:none}          /* niente checkbox: non selezionabile/pagabile */
.sh-addon-card.is-included .sh-addon-price{color:var(--green-d);font-size:14px;
  display:inline-flex;align-items:center;gap:5px}
.sh-addon-card.is-included .sh-addon-price::before{content:"\2713";font-weight:800}

/* CTA di chiusura HP: invito finale sobrio/editoriale (warm/premium) verso /all-offers/ */
.sh-endcta{padding:78px 0 94px;text-align:center;border-top:1px solid var(--line)}
.sh-endcta-in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.sh-endcta h2{font-family:var(--fd);font-weight:600;font-size:clamp(28px,4vw,40px);color:var(--ink);margin:0}
.sh-endcta p{margin:0;color:var(--ink2);font-size:16px;line-height:1.6}
.sh-endcta .sh-btn{margin-top:12px}

/* post-add cross-sell (dx): rivelato dopo l'add-to-cart */
.sh-postadd{margin-top:4px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.sh-postadd-t{margin:0 0 2px;font-family:var(--fc);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--mut)}
.sh-postadd-row{display:flex;flex-direction:column;gap:1px;text-decoration:none;border:1px solid var(--line);
  border-radius:var(--rs);padding:10px 13px;transition:border-color .15s,transform .12s}
.sh-postadd-row:hover{border-color:var(--red);transform:translateY(-1px)}
.sh-postadd-row b{font-size:14px;color:var(--ink)}
.sh-postadd-row span{font-size:12px;color:var(--mut)}

.sh-refund p{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--rs);padding:15px 17px;font-size:13.5px;color:var(--ink2);margin:0}

/* buybox */
/* IL BUYBOX E' PIU' ALTO DELLA FINESTRA, E LA SUA CODA NON SI RAGGIUNGEVA.
   Misurato su finestra 1440x860 (viewport 760): il box e' alto 913px contro 642 di spazio
   utile, quindi sfora di 271. Con il solo `top:118px` restava inchiodato in alto e quei
   271px — le note sotto la CTA — comparivano solo quando la colonna di SINISTRA finiva di
   scorrere, cioe' a fondo pagina.
   Ora il box ha un proprio scroll: con il puntatore sopra di esso la rotellina scorre il
   box invece della pagina. La CTA (a 593px dal suo inizio) resta comunque visibile.
   `padding` e `margin` opposti danno respiro all'ombra del riquadro interno, che
   `overflow` taglierebbe su tutti i lati, senza spostare nulla nel layout. */
.sh-buybox{position:sticky;top:118px;max-height:calc(100vh - 134px);overflow-y:auto;padding:6px;margin:-6px;
  /* Firefox: `thin` + coppia pollice/binario. Va dichiarato qui, non nelle regole
     ::-webkit- sotto, che Firefox ignora del tutto. */
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* La barra di sistema e' scura e squadrata: dentro un riquadro bianco e' l'elemento piu'
   pesante della colonna, e attira l'occhio proprio dove NON deve — il buybox e' il punto in
   cui si decide di comprare. Si tiene sul token `--line` (#e6e2da), lo stesso dei bordi:
   resta visibile quel tanto che serve a dire «qui si scorre» senza diventare un oggetto.
   Il binario e' trasparente perche' sotto c'e' gia' il bianco della scheda.

   ⚠️ PRECEDENZA, o si perde tempo: nei browser moderni le proprieta' STANDARD
   (`scrollbar-width` / `scrollbar-color`, dichiarate sulla regola qui sopra) VINCONO sulle
   `::-webkit-scrollbar*`. Misurato: la barra esce a 10px — il `width:8px` qui sotto e'
   inerte in Chrome attuale. Le regole webkit restano come ripiego per i motori vecchi, ma
   per cambiare aspetto si tocca `scrollbar-color`, non il pollice webkit.
   Per lo stesso motivo il `:hover` piu' scuro si vede solo dove valgono le webkit.

   E' la prima scrollbar personalizzata dello shop: se domani serve anche altrove (drawer
   del carrello), il riferimento e' questo blocco. */
.sh-buybox::-webkit-scrollbar{width:8px}
.sh-buybox::-webkit-scrollbar-track{background:transparent}
.sh-buybox::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.sh-buybox::-webkit-scrollbar-thumb:hover{background:#d8d3c9}
/* SU MOBILE IL BUYBOX VA PRIMA, NON IN FONDO.
   Sotto i 920px la griglia collassa a una colonna e l'ordine del sorgente diventa
   l'ordine di lettura: il box per prenotare finiva DOPO lead, galleria, percorso,
   scheda tecnica, livelli, add-on, requisiti, rimborso e FAQ — in fondo alla pagina.
   La barra fissa in basso non lo compensava: il suo pulsante delega al bottone del
   buybox, quindi chi non aveva ancora scelto veniva sbalzato a meta' pagina.
   Con order:-1 arriva subito dopo l'hero: foto e nome dell'auto, poi scegli, poi
   prenoti. Il resto della pagina resta per chi vuole leggere prima di decidere.
   Su desktop non cambia nulla: sono due colonne affiancate, l'ordine non si vede.
   A una colonna lo scroll interno va TOLTO: il box non e' piu' sticky, sta nel flusso, e
   una barra dentro la barra e' un modo sicuro per non far vedere meta' del modulo. */
@media(max-width:919px){.sh-buybox{order:-1;position:static;max-height:none;overflow:visible;padding:0;margin:0}}
.sh-buybox-in{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--sh);display:flex;flex-direction:column;gap:13px}
.sh-bb-line{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;
  color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.sh-bb-line b{font-family:var(--fc);font-size:22px;color:var(--ink);font-weight:800}
.sh-bb-dep b{color:var(--red)}
.sh-slot-wrap{display:flex;flex-direction:column;gap:7px;font-family:var(--fc);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.sh-slot-wrap select{padding:13px;border:1px solid var(--line);border-radius:var(--rs);font-size:14px;
  font-family:var(--f);background:#fff;color:var(--ink)}
/* Passi numerati del buybox. Il box conteneva data, ora e un totale a trattini, senza
   dire che prima andava scelta l'esperienza: il prerequisito era invisibile finche' non
   ti rimbalzava. Tre righe numerate lo rendono una lista di cose da fare. */
.sh-bb-step{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--fc);font-size:11.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.sh-bb-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--red);color:#fff;font-size:11px;line-height:1}
/* Il passo 1 e' il primo elemento del box: niente spazio morto sopra il numero. */
.sh-bb-step:first-child{margin-top:0}
.sh-bb-lvl{margin-top:-4px}
.sh-bb-note{font-size:11.5px;color:var(--mut);margin:0;text-align:center}
/* Suggerimento sotto la CTA: dice COSA manca per prenotare. Deve essere LETTO, non
   intravisto, quindi --ink2 e non --mut (a 11.5px il grigio chiaro su bianco sta sotto
   il contrasto AA). Non e' un errore: e' una guida, quindi niente rosso. */
.sh-bb-hint{color:var(--ink2);font-weight:700;line-height:1.45}
/* Richiamo sul passo mancante quando si clicca la CTA senza averlo compilato. */
@keyframes sh-needs-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(228,0,43,0)}
  35%    {box-shadow:0 0 0 4px rgba(228,0,43,.22)}
}
.sh-needs{border-radius:var(--rs);animation:sh-needs-pulse 1.6s ease-out 1}
@media(prefers-reduced-motion:reduce){.sh-needs{animation:none;outline:2px solid var(--red);outline-offset:3px}}
/* Merchandising: media card (foto prodotto su fondo neutro) + sottotitoli sezione Dettagli */
.sh-card-media--merch{background:#f4f1ec;display:flex;align-items:center;justify-content:center}
.sh-card-media--merch .sh-card-img{object-fit:contain;padding:7%}
.sh-subh{font-family:var(--fc);font-size:14px;font-weight:800;margin:18px 0 8px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.sh-facts + .sh-subh,.sh-reqs + .sh-subh{margin-top:30px}   /* aria prima del sottotitolo che segue una lista (es. "Cura del prodotto") */
.sh-slot-pick{display:flex;flex-direction:column;gap:11px}
.sh-slot-wrap input[type="date"]{padding:13px;border:1px solid var(--line);border-radius:var(--rs);
  font-size:14px;font-family:var(--f);background:#fff;color:var(--ink);width:100%}
.sh-slot-wrap select:disabled{color:var(--mut);background:var(--cool)}
/* Larghezza dei controlli data/ora allineata al bottone sottostante.
   input[type=date] e select hanno una LARGHEZZA INTRINSECA MINIMA: dentro un
   flex column con align-items:stretch non scendono sotto quella, e su iOS
   Safari il date picker sfora il contenitore. min-width:0 e' la riga che
   permette la compressione; senza, width:100% non basta.
   appearance:none solo sul date: sul select toglierebbe la freccia nativa. */
.sh-slot-wrap input[type="date"],
.sh-slot-wrap select{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.sh-slot-wrap input[type="date"]{-webkit-appearance:none;appearance:none}
/* --- richiesta orario personalizzato ------------------------------------
   Text button grigio, allineato a sinistra sotto il campo orario: e' un'opzione
   di servizio, non deve competere con "Aggiungi al carrello". L'informazione
   sta in un tooltip, non in un pannello che sposta il layout.
   Il tooltip si apre su hover E su focus: solo-hover sarebbe irraggiungibile
   da tastiera e invisibile su touch. */
.sh-custom-row{position:relative;display:flex;align-items:center;gap:7px;margin-top:2px}
.sh-custom-open{padding:0;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--f);font-size:12.5px;color:var(--mut);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.sh-custom-open:hover{color:var(--ink2)}
.sh-custom-open:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
.sh-custom-open[aria-expanded="true"]{color:var(--ink2)}

.sh-tip{position:static;display:inline-flex;align-items:center;color:var(--mut);cursor:help}
.sh-tip:hover,.sh-tip:focus{color:var(--ink2)}
.sh-tip:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:50%}
/* Il tooltip e' ancorato alla RIGA, non all'icona, a QUALUNQUE larghezza.
   Ancorato all'icona usciva dal viewport da entrambi i lati: a 375px sforava di
   170px a sinistra, a 1280px di 64px a destra (il buybox e' un aside gia' al
   bordo). Ancorato alla riga occupa la larghezza del buybox e non puo' uscire,
   qualunque sia la lunghezza della traduzione del bottone.
   Niente punta: senza un ancoraggio certo all'icona indicherebbe il punto
   sbagliato. */
.sh-tip-box{position:absolute;bottom:calc(100% + 9px);left:0;right:0;
  padding:12px 14px;background:var(--ink);color:#fff;border-radius:var(--rs);
  font-size:12px;line-height:1.5;text-align:left;box-shadow:0 12px 30px rgba(21,23,28,.24);
  opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .18s ease,transform .18s ease;z-index:6;pointer-events:none}
.sh-tip:hover .sh-tip-box,.sh-tip:focus .sh-tip-box{opacity:1;visibility:visible;transform:translateY(0)}

.sh-custom{display:flex;flex-direction:column;gap:8px;margin-top:9px}
.sh-custom[hidden]{display:none}
.sh-custom .sh-btn{font-size:13px;padding:11px 14px}

.sh-slot-msg{font-size:12px;color:var(--ink2);margin:0}
/* Orario FACOLTATIVO: bottone che apre il selettore + spiegazione del vantaggio.
   Chiuso di default — chi non ha una preferenza non deve nemmeno vedere il campo. */
/* padding verticale generoso: e' un bersaglio TOUCH (94% del traffico e' mobile) e a
   2px di padding restava alto 25px, sotto i 44px raccomandati. Il testo non si muove,
   cresce solo l'area sensibile. */
.sh-time-open{appearance:none;background:none;border:0;padding:11px 0;cursor:pointer;text-align:left;
  font-family:var(--f);font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;min-height:44px}
.sh-time-open:hover{color:var(--red)}
.sh-time-open::before{content:"+ ";font-weight:800}
.sh-time-open[aria-expanded="true"]::before{content:"− "}
.sh-time-pick{margin:2px 0 0}
.sh-time-hint{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink2)}
/* nota "data confermata, orario da concordare" nel footer del carrello */
.sh-cart-tbd{background:var(--cool);border:1px solid var(--line);border-radius:var(--rs);
  padding:10px 12px;text-align:left}

/* sticky mobile book-now bar */
.sh-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;align-items:center;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(21,23,28,.08)}
.sh-stickybar .sh-sb-price{display:flex;flex-direction:column;line-height:1.15}
.sh-stickybar .sh-sb-price small{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.sh-stickybar .sh-sb-price b{font-family:var(--fc);font-size:20px;color:var(--red)}
.sh-stickybar .sh-btn{flex:1;animation:none}
@media(min-width:920px){.sh-stickybar{display:none}}

/* cart drawer */
.sh-cart-overlay{position:fixed;inset:0;background:rgba(17,19,24,.5);z-index:50;backdrop-filter:blur(2px)}
/* Il drawer scorre TUTTO, non solo la lista articoli.
   Prima scorreva il solo .sh-cart-body e ogni blocco dopo (piede, email, telefono,
   regalo, aiuto) aveva altezza fissa: sommati superavano l'altezza dello schermo e
   la parte bassa finiva fuori, irraggiungibile — campi inclusi. Bastava un blocco in
   piu' per rompere il carrello, ed e' quello che ha fatto il regalo.
   Ora: intestazione incollata in alto, CTA incollata in basso (spostata in fondo al
   markup, altrimenti coprirebbe i campi che le stavano sotto), il resto scorre. */
.sh-cart{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--bg);z-index:60;
  display:flex;flex-direction:column;box-shadow:var(--sh);color:var(--ink);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sh-cart-top{position:sticky;top:0;z-index:2;background:var(--bg)}
.sh-cart-foot{position:sticky;bottom:0;z-index:2}
.sh-cart[hidden]{display:none}
/* upsell popup pre-checkout: modale centrata sopra il drawer (z-index > cart) */
.sh-ups-overlay{position:fixed;inset:0;background:rgba(17,19,24,.6);z-index:70;backdrop-filter:blur(2px)}
.sh-ups-overlay[hidden]{display:none}
.sh-ups{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:80;width:min(460px,92vw);
  max-height:88vh;overflow-y:auto;background:var(--bg);border-radius:var(--r);box-shadow:var(--sh);
  padding:28px 24px 24px;color:var(--ink)}
.sh-ups[hidden]{display:none}
.sh-ups-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--mut)}
.sh-ups-x:hover{color:var(--ink)}
.sh-ups-t{font-family:var(--fd);font-size:21px;font-weight:600;margin:0 6% 6px 0}
.sh-ups-sub{margin:0 0 18px;color:var(--ink2);font-size:14px}
.sh-ups-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.sh-ups-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--rs)}
.sh-ups-item-main{flex:1;min-width:0}
.sh-ups-item-name{font-family:var(--fc);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.sh-ups-item-price{font-family:var(--fc);font-weight:800;font-size:16px;color:var(--red);margin-top:2px}
.sh-ups-add{flex:none;padding:8px 16px;font-size:12.5px}
.sh-ups-cta{display:flex;flex-direction:column;gap:10px}
.sh-cart-top{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line)}
.sh-cart-top b{font-family:var(--fd);font-size:20px;font-weight:600}
.sh-cart-top button{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--mut)}
.sh-cart-top button:hover{color:var(--ink)}
.sh-cart-body{flex:0 0 auto;padding:16px 20px}
/* telefono opzionale checkout: prefisso intl + numero, stile coerente col resto del form */
.sh-cart-phone{padding:16px 20px 18px;display:flex;flex-direction:column;gap:6px}
.sh-cart-phone-lbl{font-family:var(--fc);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink2)}
/* hint sotto la label: font più piccolo, tono muted, case normale (subtitle) */
.sh-cart-phone-hint{font-size:11.5px;color:var(--mut);margin-top:-2px}
.sh-cart-phone-row{display:flex;gap:8px}
.sh-cart-prefix{flex:none;width:38%;max-width:150px;font-family:var(--f);font-size:14px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--rs);padding:10px 12px;cursor:pointer}
.sh-cart-num{flex:1;min-width:0;font-family:var(--f);font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--rs);padding:10px 12px}
.sh-cart-prefix:focus-visible,.sh-cart-num:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.sh-cart-foot{padding:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;background:#fff}
.sh-cart-help{margin:16px 20px 20px;padding:12px 14px;background:var(--cool);border:1px solid var(--line);
  border-radius:var(--rs);display:flex;align-items:center;gap:11px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.sh-cart-help-ic{flex:none;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink2)}
.sh-cart-help-tx{flex:1}
.sh-cart-help a{display:block;color:var(--ink);font-family:var(--fc);font-weight:800;font-size:15px;
  white-space:nowrap;text-decoration:none;letter-spacing:.02em}
.sh-cart-help a:hover{color:var(--red)}
/* Il filetto NON sta piu' su ogni riga: separava l'esperienza dai suoi add-on, cioe'
   proprio le cose che vanno lette insieme. Ora chiude il GRUPPO (.sh-cg). */
.sh-ci{display:flex;gap:12px;padding:14px 0}
.sh-cg{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.sh-cg:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.sh-ci-main{flex:1}
.sh-ci-name{font-weight:700;font-size:14px}
.sh-ci-meta{font-size:12px;color:var(--ink2);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
/* La data e' quello che il cliente ricontrolla prima di pagare: minuscolo grigio dentro
   il meta non bastava, quindi ha una riga sua e il contrasto pieno. Ma NON in grassetto
   e senza icona: la riga propria basta gia' a farla trovare, il resto era rumore. */
.sh-ci-when{margin-top:5px;font-size:13px;color:var(--ink);line-height:1.3}
.sh-ci-price{font-family:var(--fc);font-weight:800;color:var(--ink)}
.sh-ci-rm{background:none;border:0;color:var(--mut);font-size:11px;cursor:pointer;text-decoration:underline;
  padding:5px 0;text-transform:uppercase;letter-spacing:.06em}
.sh-ci-rm:hover{color:var(--red)}
/* riga omaggio bundle nel drawer: display-only, agganciata alla riga tour sopra (no bordo, indent) */
.sh-ci--incl{border-bottom:0;padding:4px 0 4px 14px;margin-top:-4px}
.sh-ci--incl .sh-ci-name{font-weight:600;font-size:13px;color:var(--ink2)}
.sh-ci--incl .sh-ci-meta{color:var(--green-d)}
.sh-ci--addon{border-bottom:0;padding:4px 0 4px 14px;margin-top:-4px}
.sh-ci--addon .sh-ci-name{font-weight:600;font-size:13px}
.sh-ci--incl .sh-ci-price{color:var(--green-d)}
.sh-cart-empty{color:var(--ink2);text-align:center;padding:44px 0}
/* Rassicurazione nel footer del carrello: e' l'ultima schermata prima di Stripe,
   e fino a ora mostrava solo Totale/Acconto/bottone. Le condizioni stavano solo
   nelle PDP, che chi arriva da Ads sulla all-offers spesso non apre mai.
   Colore --ink2 e non --mut: a 11.5px il grigio chiaro su bianco sta sotto il
   contrasto AA (~2.9:1), ed e' un testo che deve essere LETTO, non intravisto. */
/* Email nel carrello: obbligatoria, ma NON e' un campo in piu' — Stripe la chiede
   comunque e la riceve gia' compilata, quindi il cliente la digita una volta sola. */
.sh-cart-email{width:100%}
.sh-cart-email.is-bad{border-color:var(--red);outline:2px solid rgba(228,0,43,.18);outline-offset:1px}
.sh-cart-err{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--red);font-weight:700}
.sh-cart-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink2);text-align:center}
.sh-cart-note b{color:var(--ink);font-weight:700}
.sh-cart-tot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);
  text-transform:uppercase;letter-spacing:.06em}
.sh-cart-tot.dep{font-size:14px;color:var(--ink)}
.sh-cart-tot.dep b{font-family:var(--fc);color:var(--red);font-weight:800;font-size:20px}

/* whatsapp fab */
@keyframes sh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sh-ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.sh-wa{position:fixed;right:22px;bottom:22px;z-index:45;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 14px 30px rgba(0,134,63,.4);text-decoration:none;
  animation:sh-float 3.4s ease-in-out infinite}
.sh-wa::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(0,166,81,.4);
  animation:sh-ring 2.4s ease-out infinite}
.sh-wa:hover{filter:saturate(1.1)}
body[data-page="car"] .sh-wa,body[data-page="product"] .sh-wa{bottom:88px}
@media(min-width:920px){body[data-page="car"] .sh-wa,body[data-page="product"] .sh-wa{bottom:22px}}

/* mock checkout banner */
/* toast checkout: messaggi reali (errore business / servizio non disponibile), non più "mock go-live" */
.sh-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;max-width:92vw;
  background:var(--dark2);color:#fff;font-size:13px;font-weight:500;padding:15px 20px;border-radius:var(--rs);
  box-shadow:var(--shd);text-align:center;border:1px solid rgba(255,255,255,.14)}

/* footer */
.sh-foot{background:var(--dark);color:rgba(240,242,246,.6);padding:56px 24px 42px;position:relative}
.sh-foot-cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.sh-foot-brand{margin-bottom:10px}
.sh-foot-brand .sh-brand-logo{height:65px}
.sh-foot p{margin:12px 0 0;font-size:13.5px;max-width:38ch}
.sh-foot-nav{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13.5px;flex:0 0 auto;width:max-content}
.sh-foot-nav-t{color:#fff;font-family:var(--fc);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;margin-bottom:2px}
.sh-foot-nav a{color:rgba(240,242,246,.72);text-decoration:none}
.sh-foot-nav a:hover{color:#fff}
.sh-foot-contacts{display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.sh-foot-contacts a{color:rgba(240,242,246,.72);text-decoration:none;display:flex;align-items:center;gap:10px}
.sh-foot-contacts a:hover{color:#fff}
.sh-foot-contacts .sh-ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.sh-foot-contacts .sh-ic--wa{background:var(--green);color:#fff}
/* social footer: icona + etichetta, un link per riga, allineati come le altre voci contatto */
.sh-foot-social{display:flex;flex-direction:column;gap:10px;margin-top:10px;font-size:13.5px}
.sh-foot-social a{color:rgba(240,242,246,.72);text-decoration:none;display:flex;align-items:center;gap:10px}
.sh-foot-social a:hover{color:#fff}
.sh-foot-social .sh-ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.sh-foot-disc{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
  color:rgba(240,242,246,.34);font-size:11.5px;line-height:1.5;max-width:var(--maxw);margin-inline:auto}
/* riga finale footer: copyright + credito developer EurekaGO — bianco pieno (PM) */
.sh-foot-legal{margin-top:12px;color:#fff;font-size:12px;max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.sh-foot-legal a{color:#fff;text-decoration:none}
.sh-foot-legal a:hover{text-decoration:underline}
.sh-heart{color:var(--red);vertical-align:middle}
.sh-foot-ego{display:inline-flex;align-items:center}
.sh-foot-ego img{height:14px;width:auto;vertical-align:middle;display:block}
.sh-foot-links{max-width:var(--maxw);margin:26px auto 0;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;text-align:center}
.sh-foot-links a{color:rgba(240,242,246,.62);text-decoration:none;font-size:12.5px}
.sh-foot-links a:hover{color:#fff}
/* Disclaimer + riga copyright + relativo SEPARATORE (border-top di .sh-foot-disc):
   CENTRATI orizzontalmente su TUTTE le larghezze (mobile incluso) e su UNA SOLA riga a desktop.
   - `.sh-foot p{margin:12px 0 0;max-width:38ch}` (0,1,1) è giusto per la tagline brand, ma qui
     va TOLTO il cap 38ch: serve larghezza piena sia per la riga singola desktop sia per rendere
     il SEPARATORE FULL WIDTH — il border-top di .sh-foot-disc, prima largo solo 38ch (≈344px,
     "parziale"), ora si estende come le colonne (--maxw). `.sh-foot .sh-foot-*` (0,2,0) batte
     (0,1,1) su max-width e margin-inline; il margin-top del disc/legal resta.
   - .sh-foot-legal è flex -> justify-content:center (text-align non centra i figli flex).
   Sostituisce il vecchio centraggio desktop-only (#302/#303): ora vale anche su mobile (PM). */
.sh-foot .sh-foot-disc,.sh-foot .sh-foot-legal{max-width:var(--maxw);margin-inline:auto;text-align:center}
.sh-foot .sh-foot-legal{justify-content:center}
/* FOOTER MOBILE (solo phone): contatti/social/brand restano a SINISTRA (default desktop);
   centrata la sezione link legali + il suo filetto. Disc/copyright ora centrati ovunque (sopra). */
@media(max-width:560px){
  .sh-foot-links{border-top:1px solid rgba(255,255,255,.08);margin:32px auto 0;padding-top:24px;
    justify-content:center;text-align:center}
}

/* pagine legali proprietarie — tipografia legale sobria */
.sh-legalpage{padding:26px 0 72px}
.sh-legal-h1{font-family:var(--fd);font-size:clamp(1.9rem,4.5vw,2.6rem);margin:10px 0 24px}
.sh-legal{max-width:820px;color:var(--ink2);font-size:15px;line-height:1.7}
.sh-legal h2{font-family:var(--fd);font-size:1.5rem;color:var(--ink);margin:34px 0 12px}
.sh-legal h3{font-family:var(--f);font-weight:700;font-size:1.15rem;color:var(--ink);margin:26px 0 8px}
.sh-legal h4{font-family:var(--f);font-weight:700;font-size:1rem;color:var(--ink);margin:20px 0 6px}
.sh-legal p{margin:0 0 12px}
.sh-legal ul,.sh-legal ol{margin:0 0 12px;padding-left:22px}
.sh-legal li{margin:4px 0}
.sh-legal a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.sh-legal table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:14px;display:block;overflow-x:auto}
.sh-legal th,.sh-legal td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.sh-legal th{background:var(--cool);font-weight:700;color:var(--ink)}
.sh-foot a{color:rgba(255,255,255,.72)}

/* ---------- Contatti ---------- */
/* Hero full-width, object-fit cover, responsive. Ora in FONDO pagina (rework PM): non è più
   LCP -> loading lazy nel markup. Variante --bottom PIÙ ALTA + object-position verso l'alto per
   far LEGGERE l'insegna "pitlane Test Drive" (fascia alta dell'immagine; il cover di default la
   taglierebbe). In cima ora c'è la band nera (sh-pdp-hero) come l'hub offerte. */
.sh-contact-hero{width:100%;height:clamp(200px,34vw,420px);overflow:hidden;background:var(--dark)}
.sh-contact-hero img{width:100%;height:100%;object-fit:cover;display:block}
/* Hero di chiusura contatti: l'insegna deve stare al BORDO SUPERIORE e il fondo
   (asfalto + frontali auto) non va MAI tagliato — richiesta PM 22 lug.
   L'immagine e' gia' ritagliata dall'insegna in giu' (1536x838): il contenitore
   ne segue l'aspect-ratio, cosi' non c'e' crop e si vede tutta.
   max-height copre fino a ~1536px di viewport senza tagli; oltre, object-position
   bottom fa tagliare dall'ALTO, cioe' sacrifica l'insegna e non il fondo — che e'
   il vincolo esplicito. min-height evita che su mobile diventi una striscia: li'
   cover ritaglia ai LATI, lasciando insegna e fondo intatti. */
.sh-contact-hero--bottom{aspect-ratio:1536/838;height:auto;min-height:240px;
  max-height:840px;margin-top:8px}
.sh-contact-hero--bottom img{object-position:center bottom}
.sh-contactpage .sh-sec{padding:26px 0 56px}
.sh-contact-h1{font-size:clamp(28px,4vw,40px);margin:8px 0 10px}
.sh-contact-intro{color:var(--ink2);max-width:58ch;margin:0 0 30px;font-size:16px;line-height:1.6}
.sh-contact-grid{display:grid;gap:32px}
@media(min-width:860px){.sh-contact-grid{grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}}
.sh-contact-info h2,.sh-contact-formwrap h2{display:grid;gap:18px}
/* Calendario apertura (Contatti): affiancato alla mappa su desktop, con il box
   calendario allineato SOTTO il form (stesse colonne del grid superiore) e alla
   STESSA altezza della mappa (align-items:stretch + box in flex). Su mobile:
   impilati, ordine dal DOM (mappa prima, calendario dopo). */
.sh-contact-side{display:grid;gap:18px;margin-top:40px}
@media(min-width:900px){.sh-contact-side{grid-template-columns:1fr 1.05fr;gap:48px;align-items:stretch}}
.sh-cal-col{display:flex;flex-direction:column}
.sh-cal-col[hidden]{display:none}
.sh-cal{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--card)}
.sh-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sh-cal-month{margin:0;font-family:var(--fc);font-weight:800;font-size:14.5px;text-transform:capitalize}
.sh-cal-nav{width:32px;height:32px;border:1px solid var(--line);background:none;border-radius:50%;
  cursor:pointer;font-size:18px;line-height:1;color:var(--ink2);display:grid;place-items:center}
.sh-cal-nav:hover{border-color:var(--ink2);color:var(--ink)}
.sh-cal-nav:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sh-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.sh-cal-dow{font-family:var(--fc);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--mut);text-align:center;padding-bottom:4px}
.sh-cal-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  aspect-ratio:1;border-radius:var(--rs);font-size:12px;line-height:1.1}
.sh-cal-cell b{font-weight:700;font-size:12.5px}
.sh-cal-cell i{font-style:normal;font-size:8.5px;letter-spacing:-.02em;opacity:.85}
.sh-cal-cell u{text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;opacity:.9;line-height:1.05}
.sh-cal-cell--void{background:none}
.sh-cal-cell.is-open{background:rgba(0,166,81,.10);color:#1c6b41}
.sh-cal-cell.is-closed{background:#ffe1e6;color:#c2334a}
.sh-cal-cell.is-today{outline:2px solid var(--red);outline-offset:-2px}
.sh-cal-note{margin:12px 0 0;font-size:11px;color:var(--mut);line-height:1.45}
/* prefisso telefonico nel form contatti: stesso componente del carrello */
.sh-contact-sep{color:var(--line);margin:0 8px;user-select:none}
.sh-phone-row{display:flex;gap:8px}
.sh-phone-row .sh-cart-prefix{flex:0 0 auto;max-width:44%}
.sh-phone-row input{flex:1;min-width:0}

.sh-contact-mapwrap h2,.sh-cal-col h2{font-size:22px;margin:0 0 16px}
.sh-contact-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:15px}
.sh-contact-list li{display:grid;gap:3px}
.sh-contact-k{font-family:var(--fc);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--mut)}
.sh-contact-list a{color:var(--red);text-decoration:none;font-weight:600}
.sh-contact-list a:hover{text-decoration:underline}
.sh-contact-social{display:flex;gap:20px;flex-wrap:wrap}
.sh-contact-social a{color:var(--ink2);text-decoration:none;font-weight:600;font-size:14px}
.sh-contact-social a:hover{color:var(--ink)}
.sh-contact-formwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--sh-sm)}
.sh-contact-formsub{color:var(--ink2);margin:0 0 18px;font-size:14.5px}
.sh-contact-form{display:grid;gap:16px}
.sh-field{display:grid;gap:6px}
.sh-field label{font-size:13px;font-weight:600;color:var(--ink)}
.sh-field input,.sh-field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:var(--rs);font:inherit;color:var(--ink);background:var(--bg);box-sizing:border-box}
.sh-field input:focus,.sh-field textarea:focus{outline:none;border-color:var(--red);background:var(--card)}
.sh-field textarea{resize:vertical;min-height:100px}
/* honeypot: fuori schermo ma NON display:none (alcuni bot skippano i campi nascosti così) */
.sh-field-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.sh-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2);
  line-height:1.5;cursor:pointer}
.sh-check input{margin-top:3px;flex:0 0 auto;accent-color:var(--red)}
.sh-check a{color:var(--red)}
.sh-contact-status{margin:0;padding:11px 13px;border-radius:var(--rs);font-size:14px;font-weight:600}
.sh-contact-status.is-ok{background:var(--green-l);color:var(--green-d)}
.sh-contact-status.is-err{background:rgba(228,0,43,.08);color:var(--red-deep)}
.sh-contact-mapwrap{display:flex;flex-direction:column}
.sh-contact-map{width:100%;flex:1;height:auto;min-height:360px;border:1px solid var(--line);border-radius:var(--r);display:block}
.sh-contact-maplink{display:inline-block;margin-top:12px;color:var(--red);text-decoration:none;
  font-weight:600;font-size:14px}
.sh-contact-maplink:hover{text-decoration:underline}

/* ---- Banner cookie -------------------------------------------------------
   ACCETTA e RIFIUTA hanno lo STESSO peso visivo: stessa dimensione, stesso
   contrasto, uno accanto all'altro. Un "accetta" grande e colorato con il
   rifiuto in grigio piccolo, o nascosto dietro "personalizza", e' la
   contestazione piu' frequente in assoluto sui banner europei — e sarebbe
   anche una bugia sul fatto che la scelta e' libera.
   Sta in fondo e non copre la pagina: un muro modale su un sito che vende
   esperienze fa perdere piu' clienti di quanti cookie salvi. */
/* NESSUNA ANIMAZIONE D'INGRESSO, di proposito.
   Tre tentativi hanno sbagliato lo stesso punto: far dipendere la POSIZIONE del banner
   da qualcosa che deve girare. Prima translateY(110%) piu' una classe aggiunta dopo,
   poi `animation ... both`, poi l'animazione senza fill-mode. In tutti e tre, se il
   motore grafico non avanza — scheda in secondo piano, rendering sospeso — il banner
   restava fuori schermo e NON CLICCABILE, misurato con elementFromPoint: il consenso
   non veniva mai chiesto. Che qui e' il difetto peggiore possibile, perche' non si vede
   e cade proprio sulla cosa che il banner esiste per fare.
   Un banner cookie che scorre non serve a nessuno. Sta fermo dov'e', e c'e' sempre. */
.sh-cc{position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:var(--card);border-top:2px solid var(--red);
  box-shadow:0 -8px 40px rgba(21,23,28,.16);
  }
.sh-cc-in{max-width:var(--maxw);margin:0 auto;padding:20px 24px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.sh-cc-tx{flex:1 1 420px;min-width:0;font-size:14px;line-height:1.55;color:var(--ink2)}
.sh-cc-tx b{color:var(--ink)}
.sh-cc-tx a{color:var(--red);text-decoration:underline}
.sh-cc-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sh-cc-b{font-family:var(--f);font-size:14px;font-weight:700;letter-spacing:.01em;
  padding:12px 22px;border-radius:var(--rs);border:1.5px solid var(--ink);
  background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s}
.sh-cc-b:hover{background:var(--ink);color:#fff}
.sh-cc-b.is-pri{background:var(--red);border-color:var(--red);color:#fff}
.sh-cc-b.is-pri:hover{background:var(--red-deep);border-color:var(--red-deep)}
.sh-cc-link{background:none;border:0;padding:6px 2px;font-family:var(--f);font-size:13.5px;
  color:var(--ink2);text-decoration:underline;cursor:pointer}
.sh-cc-link:hover{color:var(--red)}
/* Pannello di dettaglio: chiuso di default, si apre da "Personalizza". */
.sh-cc-det{flex:1 1 100%;border-top:1px solid var(--line);margin-top:4px;padding-top:16px;display:none}
.sh-cc.is-det .sh-cc-det{display:block}
.sh-cc-row{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.sh-cc-row:last-child{border-bottom:0}
.sh-cc-row h4{margin:0 0 2px;font-family:var(--f);font-size:14px;font-weight:700;color:var(--ink)}
.sh-cc-row p{margin:0;font-size:13px;line-height:1.5;color:var(--ink2)}
.sh-cc-sw{flex:0 0 auto;margin-top:2px}
.sh-cc-sw input{width:18px;height:18px;accent-color:var(--red);cursor:pointer}
.sh-cc-sw input[disabled]{cursor:not-allowed;opacity:.5}
@media (max-width:700px){
  .sh-cc-in{padding:16px;gap:14px}
  .sh-cc-act{width:100%}
  .sh-cc-b{flex:1 1 0;text-align:center;padding:12px 10px}
}

/* ---- pagina voucher regalo -------------------------------------------------
   Il voucher e' una PAGINA, non un PDF (decisione PM 14 ago): deve stare bene
   sullo schermo di un telefono al banco e uscire decente dalla stampante di casa
   di chi lo vuole mettere in una busta. Da qui il bordo tratteggiato, che dice
   "ritagliami" senza bisogno di scriverlo. */
.sh-vch{max-width:620px}
.sh-vch-load{color:var(--ink2);font-size:15px;text-align:center;padding:40px 0}
.sh-vch-card{border:2px dashed var(--red);padding:32px 28px;text-align:center;background:#fff}
.sh-vch-t{font-size:26px;margin:0 0 6px}
.sh-vch-code{font-size:30px;font-weight:800;letter-spacing:4px;color:var(--red);margin:18px 0}
.sh-vch-rows{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;text-align:left;
  margin:22px auto;max-width:400px;font-size:14px}
.sh-vch-rows dt{color:var(--ink2)}
.sh-vch-rows dd{margin:0;font-weight:700}
.sh-vch-msg{font-size:15px;line-height:1.6;margin:18px 0 0}
.sh-vch-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 0}
@media(max-width:560px){
  .sh-vch-code{font-size:23px;letter-spacing:2px}
  .sh-vch-card{padding:24px 18px}
}
/* Stampa: resta il regalo, sparisce il sito. Header, footer e bottoni su carta
   sono rumore — e il bottone "Stampa" stampato e' proprio un controsenso. */
@media print{
  .sh-head,.sh-utility,.sh-foot,.sh-vch-cta,.sh-wa,.sh-cart{display:none !important}
  .sh-vch-card{border-color:#000}
  .sh-vch-code{color:#000}
  body{background:#fff}
}

/* ---- "E' un regalo" nel carrello ------------------------------------------
   Sta sotto i dati di contatto e sopra il piede: e' l'ultima decisione prima di
   pagare, ed e' quella che cambia l'importo addebitato. */
.sh-cart-gift{border-top:1px solid var(--line);padding:14px 20px}
.sh-gift-on{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;cursor:pointer}
.sh-gift-on input{width:18px;height:18px;accent-color:var(--red);flex:0 0 auto}
/* COLONNA, come .sh-cart-phone qui sopra. Senza questo i campi restavano in flusso
   inline: <label> e <input> sono entrambi inline-level, quindi label e casella
   finivano affiancate e il testo delle etichette si infilava fra un campo e l'altro.
   Era il difetto visibile nello screenshot del PM. */
.sh-gift-fields{display:flex;flex-direction:column;gap:6px;margin:12px 0 0}
/* la larghezza piena la impone il contenitore flex, ma gli input hanno flex:1 pensato
   per la riga del telefono: qui vanno bloccati a tutta larghezza */
.sh-gift-fields .sh-cart-num{width:100%;flex:none}
.sh-gift-note{font-size:12.5px;line-height:1.5;color:var(--ink2);margin:0 0 6px}
/* respiro fra un campo e il successivo: la label del campo dopo non deve incollarsi
   all'input precedente (prima era uno style inline sul markup, ora sta qui) */
.sh-gift-fields .sh-cart-phone-lbl + .sh-cart-num{margin-bottom:6px}
.sh-gift-msg{min-height:72px;resize:vertical;font-family:inherit;line-height:1.5}

/* Riga "vuoi regalarla?" sotto il bottone d'acquisto: un suggerimento, non una CTA.
   Piu' piccola e staccata dalla nota acconto, cosi' non sembra una condizione di
   vendita ne' compete con "Aggiungi al carrello". */
/* Il richiamo al regalo era una riga grigia sotto la nota acconto: il PM l'ha visto
   solo perche' lo cercava. Ora e' un blocco con bordo tratteggiato e fondo caldo — lo
   stesso linguaggio visivo del voucher e della dedica — con il fiocco a sinistra e
   la frase chiave in evidenza. Resta senza bottone: l'azione e' nel carrello, qui si
   deve solo SAPERE che si puo' fare. */
.sh-bb-gift{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;
  border:1px dashed var(--red);border-radius:var(--rs);background:#faf7f2}
.sh-bb-gift-ic{font-size:20px;line-height:1.1;flex:0 0 auto}
.sh-bb-gift p{margin:0;font-size:13px;line-height:1.5;color:var(--ink);text-align:left}
.sh-bb-gift b{color:var(--red)}

/* CTA "Fai un regalo": secondo bottone in header, accanto a Prenota ora.
   Inchiostro e non rosso: due bottoni rossi affiancati si annullano, e l'azione
   primaria resta prenotare per se'. Il fiocco lo rende riconoscibile prima di
   leggerlo. Sotto i 900px non c'e': la voce vive nel pannello hamburger. */
/* ROSSO PIU' PROFONDO del primario (#E4002B), non un colore diverso: regalare e'
   la stessa famiglia di azioni del prenotare, non un'altra cosa. Distinguibile
   accanto a "Prenota ora" (gradiente #E4002B -> #ff2d4c) senza mettersi in
   concorrenza: un secondo bottone piu' acceso sposterebbe l'attenzione
   sull'azione secondaria. STESSO TRATTAMENTO (gradiente), tonalita' diversa:
   cambiando anche il trattamento sarebbero sembrati due componenti diversi.
   NIENTE EMOJI: il fiocco veniva iniettato da qui con ::before. */
.sh-btn-gift{background:linear-gradient(135deg,var(--red-deep),#c4102f);border-color:var(--red-deep);color:#fff}
.sh-btn-gift:hover{background:linear-gradient(135deg,#85001a,#a80d27);border-color:#85001a}
.sh-nav-gift{display:none}
@media(max-width:899px){
  .sh-btn-gift{display:none}
  /* nel pannello hamburger la voce torna, perche' li' il bottone non c'e' */
  .sh-nav-gift{display:block}
}

/* Contatore della dedica: discreto quando c'e' spazio, avvisa quando sta finendo.
   Allineato a destra sotto il campo, come si aspetta chi ha gia' scritto un SMS. */
.sh-gift-count{margin:2px 0 0;text-align:right;font-size:11.5px;color:var(--mut);
  font-variant-numeric:tabular-nums}
.sh-gift-count.quasi{color:var(--ink2)}
.sh-gift-count.pieno{color:var(--red);font-weight:700}

/* Blocco regalo sulla scheda, stato ATTIVO: si arriva dalla landing dei regali.
   Pieno invece che tratteggiato — la differenza si coglie senza leggere. */
.sh-bb-gift.attivo{background:var(--red);border-style:solid}
.sh-bb-gift.attivo p{color:#fff}
.sh-bb-gift.attivo b{color:#fff}

/* Asterisco di campo obbligatorio. Rosso perche' e' l'unico colore del sito che
   significa "attenzione qui", e aria-hidden perche' a chi usa uno screen reader
   l'obbligo lo dice aria-required sul controllo: sentirsi leggere "asterisco" non
   informa nessuno. */
.sh-req{color:var(--red);font-weight:700;margin-left:3px}