/* ==========================================================================
   Pagina Kart, piano v3 (P2.2)
   - .t4kh  testata: foto a tutta pagina, titolo in basso a sinistra
   - .t4kb  striscia dei banner sotto la testata (Filament, Sezioni v3)
   - .t4kx-sheet  pannello "costo d'uso" (t4fx.sheet)
   - .t4ks  blocco unico "Scegli il tuo kart" (richieste v4, T3): palco con lo
            scontorno e le foto, card dei modelli, pannello completo del kart
            (dati, prezzo, step del configuratore di t4-config.css, modulo)
   - .t4ku  sezione Usato (t4-used.js) e i suoi moduli (.t4kf)
   Token e .t4-pill da t4-fx.css. Misure in px con clamp(): la root del tema
   cambia valore con la larghezza (12px a 1000-1699, 16px sotto i 992px).
   Movimento solo dentro (prefers-reduced-motion: no-preference): con
   "riduci movimento" resta lo stato finale.
   ========================================================================== */
.t4kh, .t4kb, .t4ks, .t4ku { --t4k-gut: max(18px, 4.8vw); box-sizing: border-box; }
/* posto tenuto ai blocchi che arrivano dalle API (meno salti della pagina):
   il blocco unico è alto quanto il pannello con gli step chiusi (misurato col
   Senior: 2270-2310px da 995 a 1920, 2940px a 390) */
[data-t4-kselect]:empty { background: var(--t4-navy); min-height: 2900px; }
[data-t4-used]:empty { background: var(--t4-page); min-height: 640px; }
@media (min-width: 992px) { [data-t4-kselect]:empty { min-height: 2250px; } }
.t4kh *, .t4kb *, .t4ks *, .t4ku *, .t4kx-sheet * { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Testata
   -------------------------------------------------------------------------- */
.t4kh {
  background: var(--t4-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  justify-content: flex-end;
  min-height: max(560px, 100vh);
  min-height: max(560px, 100svh);
  overflow: hidden;
  position: relative;
}
.t4kh__media { inset: 0; margin: 0; position: absolute; z-index: -2; }
.t4kh__media img { display: block; height: 100%; object-fit: cover; object-position: 64% 42%; width: 100%; }
/* velo: in alto per la pillola dell'header, in basso a sinistra per il titolo */
.t4kh::before {
  background:
    linear-gradient(180deg, rgba(14, 20, 48, .5) 0%, rgba(14, 20, 48, 0) 22%),
    linear-gradient(0deg, rgba(14, 20, 48, .94) 0%, rgba(14, 20, 48, .55) 30%, rgba(14, 20, 48, 0) 62%),
    linear-gradient(90deg, rgba(14, 20, 48, .6) 0%, rgba(14, 20, 48, 0) 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.t4kh__inner { max-width: 1040px; padding: 120px var(--t4k-gut) clamp(92px, 12vh, 150px); position: relative; }
.t4kh__crumb { display: flex; font-family: var(--t4-mono); font-size: 12px; gap: 8px; letter-spacing: .1em; opacity: .78; text-transform: uppercase; }
.t4kh__crumb a { color: inherit; text-decoration: none; }
.t4kh__crumb a:hover { color: #fff; text-decoration: underline; }
.t4kh__title {
  color: #fff;
  font-family: var(--t4-head);
  font-size: clamp(52px, 7.6vw, 120px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .88;
  margin: 18px 0 0;
  text-transform: uppercase;
}
/* da desktop su una riga: oltre i 1700px "T4" andava a capo da solo */
@media (min-width: 992px) { .t4kh__title { white-space: nowrap; } }
.t4kh__lead { font-family: var(--t4-mono); font-size: clamp(14px, 13px + .2vw, 17px); line-height: 1.55; margin: 22px 0 0; max-width: 48ch; opacity: .88; }
.t4kh__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.t4kh__hint { bottom: 22px; color: #fff; left: 50%; position: absolute; transform: translateX(-50%); }
@media (max-width: 600px) {
  .t4kh__inner { padding-bottom: 104px; }
  .t4kh__cta .t4-pill { flex: 1 1 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: no-preference) {
  .t4kh__media img { animation: t4kh-zoom 1.8s var(--t4-ease-out) .4s both; }
  .t4kh__inner > * { animation: t4kh-up .9s var(--t4-ease-out) both; }
  .t4kh__inner > :nth-child(1) { animation-delay: .6s; }
  .t4kh__inner > :nth-child(2) { animation-delay: .68s; }
  .t4kh__inner > :nth-child(3) { animation-delay: .8s; }
  .t4kh__inner > :nth-child(4) { animation-delay: .9s; }
}
@keyframes t4kh-zoom { from { transform: scale(1.06); } }
@keyframes t4kh-up { from { opacity: 0; transform: translateY(24px); } }

/* --------------------------------------------------------------------------
   Striscia dei banner: colonne separate da linee sottili a tutta altezza,
   cifra grande, unità piccola, didascalia in Space Mono. Nessun prezzo.
   -------------------------------------------------------------------------- */
.t4kb { background: var(--t4-navy); color: #fff; position: relative; }
.t4kb__wrap:empty { min-height: clamp(220px, 22vw, 340px); }
.t4kb__list { border-top: 1px solid var(--t4-hair-dark); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.t4kb__item { border-left: 1px solid var(--t4-hair-dark); display: flex; min-height: clamp(230px, 22vw, 340px); min-width: 0; position: relative; }
.t4kb__item:first-child { border-left: 0; }
/* il contenuto sta in un blocco (o nel bottone/link) che riempie la colonna */
.t4kb__in {
  align-items: flex-start;
  background: none;
  border: 0;
  color: inherit;
  display: flex;
  flex: 1;
  flex-direction: column;
  font: inherit;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 38px) clamp(18px, 2vw, 36px) clamp(26px, 2.8vw, 46px);
  text-align: left;
  text-decoration: none;
}
.t4kb__item:first-child .t4kb__in { padding-left: var(--t4k-gut); }
.t4kb__item:last-child .t4kb__in { padding-right: var(--t4k-gut); }
a.t4kb__in, button.t4kb__in { cursor: pointer; transition: background-color var(--t4-dur) var(--t4-ease); }
a.t4kb__in:hover, button.t4kb__in:hover { background: rgba(134, 160, 255, .06); color: inherit; }
a.t4kb__in:focus-visible, button.t4kb__in:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: -6px; }
.t4kb__idx { color: var(--t4-sky); display: block; font-family: var(--t4-mono); font-size: 11px; letter-spacing: .12em; opacity: .8; }
.t4kb__fig { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: auto; padding-top: 28px; }
.t4kb__num { font-family: var(--t4-head); font-size: clamp(60px, 6.6vw, 96px); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.04em; line-height: .9; white-space: nowrap; }
.t4kb__num--text { font-size: clamp(34px, 3.4vw, 58px); letter-spacing: -.03em; white-space: normal; }
.t4kb__unit { font-family: var(--t4-head); font-size: clamp(18px, 1.7vw, 28px); font-weight: 500; letter-spacing: -.01em; opacity: .9; }
.t4kb__cap { display: block; font-family: var(--t4-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.45; margin-top: 14px; text-transform: uppercase; }
.t4kb__note { display: block; font-family: var(--t4-mono); font-size: 11px; letter-spacing: .06em; line-height: 1.4; margin-top: 6px; min-height: 1.4em; opacity: .62; }
.t4kb__cap:empty { min-height: 1.45em; }
.t4kb__more { align-items: center; color: var(--t4-sky); display: inline-flex; font-family: var(--t4-mono); font-size: 11px; gap: 8px; letter-spacing: .1em; position: absolute; right: clamp(16px, 1.6vw, 28px); text-transform: uppercase; top: clamp(18px, 2vw, 34px); }
.t4kb__item:last-child .t4kb__more { right: var(--t4k-gut); }
.t4kb__more i { border: 1px solid currentColor; border-radius: 50%; display: grid; font-style: normal; height: 22px; place-items: center; transition: transform var(--t4-dur) var(--t4-ease); width: 22px; }
button.t4kb__in:hover .t4kb__more i { transform: rotate(90deg); }
.t4kb__more i svg { height: 12px; width: 12px; }
a.t4kb__in:hover .t4kb__more--go i { transform: translate(2px, -2px); }
/* il claim: solo testo, rivelato "a inchiostro" (t4fx.ink) sopra una copia fantasma */
.t4kb__claim {
  color: rgba(134, 160, 255, .26);
  display: block;
  font-family: var(--t4-head);
  font-size: clamp(24px, 2.3vw, 40px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: auto;
  padding-top: 28px;
  text-transform: uppercase;
  text-wrap: balance;
}
/* 992-1699: la colonna è stretta, il claim su righe pari senza "FIA" da solo */
@media (min-width: 992px) and (max-width: 1699px) { .t4kb__claim { font-size: clamp(22px, 1.9vw, 32px); } }
.t4kb__claim .t4fx-ink__copy { background-image: linear-gradient(120deg, #fff 0%, #fff 45%, var(--t4-sky) 100%); padding-top: inherit; }
/* Da 992px la striscia sta sulla griglia del tema (.fh-1619 in surface.css:
   box 90,94% largo al massimo 108,375rem, linee a 23,65% / 50% / 76,35%):
   le linee della pagina fanno da separatori, così non ne compaiono due vicine.
   Con meno di 4 banner il JS allarga l'ultimo numero (--span). */
@media (min-width: 992px) {
  .t4kb { border-top: 1px solid var(--t4-hair-dark); }
  .t4kb__list { border-top: 0; grid-template-columns: 23.65% 26.35% 26.35% 23.65%; margin-inline: auto; max-width: 108.375rem; width: 90.94%; }
  .t4kb__item { border-left: 0; grid-column: span var(--span, 1); }
  .t4kb__item:first-child .t4kb__in { padding-left: 0; }
  .t4kb__item:last-child .t4kb__in { padding-right: clamp(18px, 2vw, 36px); }
  .t4kb__item:last-child .t4kb__more { right: clamp(16px, 1.6vw, 28px); }
}
/* 992-1279: la prima colonna è stretta e la scritta copriva "01 / 04": resta
   l'icona, la scritta solo per i lettori di schermo */
@media (min-width: 992px) and (max-width: 1279px) {
  .t4kb__more span { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
}
/* telefono: griglia 2x2; il claim e l'ultimo rimasto da solo vanno a tutta
   riga. Inizio e fine riga (classi is-m-*) li calcola il JS, che sa dov'è il claim */
@media (max-width: 991px) {
  .t4kb__list { border-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t4kb__item { border-left: 1px solid var(--t4-hair-dark); border-top: 1px solid var(--t4-hair-dark); min-height: 200px; }
  .t4kb__item.is-m-start { border-left: 0; }
  .t4kb__item.is-m-start .t4kb__in { padding-left: var(--t4k-gut); }
  .t4kb__item.is-m-end .t4kb__in { padding-right: var(--t4k-gut); }
  .t4kb__item.is-m-full { grid-column: 1 / -1; min-height: 0; }
  .t4kb__item.is-m-full .t4kb__fig, .t4kb__item.is-m-full .t4kb__claim { padding-top: 22px; }
  .t4kb__more { right: 16px; }
  .t4kb__item.is-m-end .t4kb__more { right: var(--t4k-gut); }
}
@media (max-width: 420px) {
  .t4kb__num { font-size: 52px; }
  .t4kb__in { padding-left: 14px; padding-right: 14px; }
  .t4kb__more span { display: none; }
}
/* banner di testo (es. "Carburatore", richieste v4 T2): da telefono sta nella
   mezza colonna senza uscire; la parola lunga non si spezza a metà */
@media (max-width: 991px) {
  .t4kb__num--text { font-size: clamp(25px, 6.4vw, 44px); }
}

/* --------------------------------------------------------------------------
   Pannello "costo d'uso" (dentro .t4fx-sheet)
   -------------------------------------------------------------------------- */
.t4kx-sheet__body { padding: 28px clamp(22px, 3vw, 40px) 40px; }
.t4kx-sheet__kicker { color: var(--t4-blue); font-family: var(--t4-mono); font-size: 12px; letter-spacing: .12em; margin: 8px 0 0; text-transform: uppercase; }
.t4kx-sheet__title { color: var(--t4-navy); font-family: var(--t4-head); font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.025em; line-height: 1; margin: 14px 0 0; text-transform: uppercase; }
.t4kx-sheet__fig { align-items: baseline; border-bottom: 1px solid var(--t4-hair); border-top: 1px solid var(--t4-hair); display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 28px 0 0; padding: 22px 0; }
.t4kx-sheet__fig b { font-family: var(--t4-head); font-size: clamp(64px, 6vw, 96px); font-weight: 500; letter-spacing: -.04em; line-height: .9; }
.t4kx-sheet__fig span { font-family: var(--t4-head); font-size: 24px; font-weight: 500; }
.t4kx-sheet__fig small { display: block; flex-basis: 100%; font-family: var(--t4-mono); font-size: 12px; letter-spacing: .08em; margin-top: 10px; opacity: .7; text-transform: uppercase; }
.t4kx-sheet__items { margin: 0; padding: 0; }
.t4kx-sheet__items > div { border-bottom: 1px solid var(--t4-hair); display: flex; gap: 16px; justify-content: space-between; padding: 14px 0; }
.t4kx-sheet__items dt { font-size: 15px; }
.t4kx-sheet__items dd { font-family: var(--t4-mono); font-size: 13px; margin: 0; white-space: nowrap; }
.t4kx-sheet__text { font-size: 14px; line-height: 1.6; margin: 20px 0 0; opacity: .8; }
.t4kx-sheet__cta { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Blocco unico "Scegli il tuo kart": a sinistra palco, miniature e card dei
   modelli (colonna ferma da desktop, ScrollTrigger in t4-kart-select.js),
   a destra il pannello completo del kart scelto
   -------------------------------------------------------------------------- */
.t4ks {
  background: var(--t4-navy);
  color: #fff;
  overflow: hidden;
  overflow: clip;
  padding: clamp(64px, 7vw, 132px) 0 clamp(64px, 7vw, 120px);
  position: relative;
}
/* trama di croci "+" e un alone blu sotto il palco */
.t4ks::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 23v10M23 28h10' stroke='%2386a0ff' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 40% at 34% 22%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 40% at 34% 22%, #000 20%, transparent 78%);
  pointer-events: none;
  position: absolute;
}
.t4ks::after {
  background: radial-gradient(ellipse 46% 22% at 34% 30%, rgba(36, 72, 216, .32), rgba(36, 72, 216, 0) 70%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.t4ks__wrap {
  align-items: start;
  column-gap: clamp(24px, 3vw, 64px);
  display: grid;
  grid-template-areas: "left panel";
  /* 22/10: metà foto del kart e metà configuratore */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 0 var(--t4k-gut);
  position: relative;
  z-index: 1;
}
/* titolo e pulsanti dei modelli sopra il kart (21/10): una fila a pillola, solo testo */
.t4ks__head { align-items: center; display: flex; flex: 0 0 auto; gap: 10px 18px; min-width: 0; }
.t4ks__kicker { color: var(--t4-sky); flex: 0 0 auto; font-family: var(--t4-mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; line-height: 1.4; margin: 0; text-transform: uppercase; white-space: nowrap; }
.t4ks__kicker b { color: #fff; font-weight: 400; }
/* da 992 a 1799px la fila dei modelli prende tutta la riga (colonna del palco a metà
   schermo dal 22/10): il titolo resta per i lettori di schermo */
@media (min-width: 992px) and (max-width: 1799px) {
  .t4ks__kicker { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
}
/* colonna del palco: da desktop alta quanto lo schermo sotto la barra del menu
   (resta ferma mentre il pannello scorre), il kart al centro e sotto frecce,
   tacche e la fila piccola dei modelli, come una scheda prodotto */
.t4ks__left { display: flex; flex-direction: column; gap: 12px; grid-area: left; min-width: 0; }
@media (min-width: 992px) {
  /* palco e pannello alti uguali, dentro lo schermo sotto la barra del menu
     (l'ancora #scegli porta la colonna a 100px dall'alto) */
  .t4ks { --t4ks-h: clamp(540px, calc(100vh - 104px), 960px); --t4ks-h: clamp(540px, calc(100svh - 104px), 960px); }
  .t4ks__wrap { align-items: stretch; }
  .t4ks__left { height: var(--t4ks-h); position: relative; }
  /* titolo sopra la foto, in alto a sinistra (fuori dal flusso: il palco resta alto) */
  .t4ks__left > .t4ks__stage { flex: 1 1 auto; height: auto; min-height: 0; }
}

/* palco */
.t4ks__stage {
  -webkit-user-select: none;
  cursor: grab;
  height: clamp(300px, 27vw, 560px);
  perspective: 1400px;
  flex: 0 0 auto;
  position: relative;
  touch-action: pan-y;
  user-select: none;
}
.t4ks__stage.is-drag { cursor: grabbing; }
.t4ks__stage.is-photo { cursor: auto; }
.t4ks__word {
  top: 47%;
  color: transparent;
  font-family: var(--t4-head);
  font-size: clamp(96px, 15vw, 290px);
  font-weight: 500;
  left: 50%;
  letter-spacing: -.045em;
  line-height: .8;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  -webkit-text-stroke: 1px rgba(134, 160, 255, .24);
  white-space: nowrap;
}
/* ombra a terra e luce del palco */
.t4ks__floor {
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) 50% 62% / 70% 34% no-repeat,
    radial-gradient(closest-side, rgba(36, 72, 216, .5), rgba(36, 72, 216, 0)) 50% 50% / 100% 100% no-repeat;
  bottom: 8%;
  height: 20%;
  left: 8%;
  pointer-events: none;
  position: absolute;
  right: 8%;
}
.t4ks__kart {
  inset: 5% 7% 9%;
  margin: 0;
  position: absolute;
  transform: rotateX(var(--t4ks-rx, 0deg)) rotateY(var(--t4ks-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .7s var(--t4-ease-out);
}
.t4ks__stage.is-tilting .t4ks__kart { transition: transform .15s linear; }
.t4ks__shot { height: 100%; position: relative; width: 100%; }
.t4ks__zoom { height: 100%; position: relative; width: 100%; }
.t4ks__shot img, .t4ks__shot canvas { display: block; filter: drop-shadow(0 28px 26px rgba(0, 0, 0, .5)); height: 100%; object-fit: contain; width: 100%; }
.t4ks__shot canvas { filter: none; inset: 0; position: absolute; }
.t4ks__shot img { -webkit-user-drag: none; }
/* livelli delle opzioni (image_layer di Filament) sopra lo scontorno */
.t4ks__layers { inset: 0; pointer-events: none; position: absolute; }
.t4ks__layer { filter: none; inset: 0; position: absolute; }
/* passata di luce blu: una banda che attraversa solo i pixel del kart (maschera = lo scontorno) */
.t4ks__sweep {
  background: linear-gradient(100deg, rgba(134, 160, 255, 0) 38%, rgba(134, 160, 255, .75) 50%, rgba(134, 160, 255, 0) 62%) 130% 0 / 260% 100% no-repeat;
  inset: 0;
  -webkit-mask: var(--t4ks-cut) center / contain no-repeat;
  mask: var(--t4ks-cut) center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.t4ks.is-used .t4ks__shot { filter: grayscale(1); opacity: .32; }
@media (prefers-reduced-motion: no-preference) { .t4ks__shot { transition: filter .45s var(--t4-ease), opacity .45s var(--t4-ease); } }
/* foto del modello al posto dello scontorno (miniature sotto il palco) */
.t4ks__photo { border-radius: 20px; inset: 0; margin: 0; overflow: hidden; position: absolute; }
.t4ks__photo[hidden] { display: none; }
/* 23/10: la foto intera (contain), senza tagliare muso e coda dei kart nelle foto larghe */
.t4ks__photo img { display: block; height: 100%; object-fit: contain; width: 100%; -webkit-user-drag: none; }
.t4ks__stage.is-photo .t4ks__kart, .t4ks__stage.is-photo .t4ks__word, .t4ks__stage.is-photo .t4ks__floor { visibility: hidden; }
.t4ks__note { bottom: 8px; font-family: var(--t4-mono); font-size: 10px; left: 0; letter-spacing: .12em; margin: 0; opacity: .55; position: absolute; text-transform: uppercase; }
.t4ks__note[hidden] { display: none; }
/* slider del kart scelto: frecce in basso a sinistra, una tacca per immagine */
.t4ks__ctrl { align-items: center; display: flex; flex: 0 0 auto; gap: 8px; }
.t4ks__ctrl.is-empty { visibility: hidden; }
.t4ks__arrow {
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  align-items: center;
  backdrop-filter: blur(10px) saturate(140%);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px rgba(0, 0, 0, .25);
  color: #fff;
  cursor: pointer;
  display: grid;
  flex: 0 0 auto;
  height: 44px;
  justify-items: center;
  padding: 0;
  transition: background-color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease), transform var(--t4-dur) var(--t4-ease);
  width: 44px;
}
.t4ks__arrow:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }
.t4ks__arrow:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 3px; }
.t4ks__arrow[data-slide="-1"]:hover { transform: translateX(-2px); }
.t4ks__arrow[data-slide="1"]:hover { transform: translateX(2px); }
.t4ks__arrow svg { height: 18px; width: 18px; }
.t4ks__ticks { display: flex; flex: 1 1 auto; gap: 4px; margin-left: 12px; min-width: 0; }
.t4ks__tick { align-items: center; background: none; border: 0; cursor: pointer; display: flex; flex: 1 1 0; height: 28px; padding: 0; }
.t4ks__tick i { background: rgba(255, 255, 255, .2); border-radius: 2px; display: block; height: 2px; transition: background-color var(--t4-dur) var(--t4-ease), height var(--t4-dur) var(--t4-ease); width: 100%; }
.t4ks__tick:hover i { background: rgba(255, 255, 255, .5); }
.t4ks__tick[aria-pressed="true"] i { background: #fff; height: 3px; }
.t4ks__tick:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 2px; }
.t4ks__pos { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .1em; margin-left: 8px; opacity: .6; white-space: nowrap; }

/* pannello del kart scelto, da scheda prodotto (esempio Canyon, 20/10): corpo
   che da desktop scorre da solo se serve, piede fisso con totale e bottone */
.t4ks__panel {
  /* vetro sfocato e più coprente: la grande scritta del palco dietro non deve
     passare attraverso le scelte */
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  background: linear-gradient(160deg, rgba(30, 40, 92, .86), rgba(17, 24, 62, .9));
  border: 1px solid rgba(134, 160, 255, .5);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 60px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  grid-area: panel;
  min-width: 0;
}
.t4ks__panel:focus { outline: none; }
.t4ks__panel:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 4px; }
.t4ks__body { padding: clamp(14px, 1.2vw, 20px) clamp(18px, 1.6vw, 26px) 10px; }
/* il piede misura sé stesso: totale accanto al bottone solo se c'è posto (t4-config.css) */
.t4ks__foot { border-top: 1px solid rgba(134, 160, 255, .3); container-type: inline-size; padding: 10px clamp(18px, 1.6vw, 26px) 8px; }
@media (min-width: 992px) {
  .t4ks__panel { height: var(--t4ks-h); overflow: hidden; position: relative; }
  /* 22/10: il corpo scorre solo in verticale (con trackpad non si sposta più di lato) */
  .t4ks__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; scrollbar-color: rgba(134, 160, 255, .45) transparent; scrollbar-width: thin; }
  .t4ks__foot { background: rgba(8, 13, 38, .5); border-radius: 0 0 23px 23px; flex: 0 0 auto; }
  /* sotto c'è altro: una sfumatura sopra il piede lo dice (classe da t4-kart-select.js) */
  .t4ks__panel::after { background: linear-gradient(rgba(14, 20, 52, 0), rgba(14, 20, 52, .97) 85%); bottom: var(--t4ks-foot, 96px); content: ""; height: 48px; left: 1px; opacity: 0; pointer-events: none; position: absolute; right: 8px; transition: opacity var(--t4-dur) var(--t4-ease); }
  .t4ks__panel.is-more::after { opacity: 1; }
}
.t4ks__top { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.t4ks__top[hidden] { display: none; }
.t4ks__badge { border: 1px solid rgba(134, 160, 255, .6); border-radius: 999px; color: var(--t4-sky); font-family: var(--t4-mono); font-size: 11px; letter-spacing: .1em; line-height: 1; padding: 6px 10px; text-transform: uppercase; }
.t4ks__badge--fill { background: rgba(134, 160, 255, .16); border-color: transparent; color: #fff; }
.t4ks__homol { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .04em; opacity: .72; }
.t4ks__name { color: #fff; font-family: var(--t4-head); font-size: clamp(20px, 1.55vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1; margin: 0; text-transform: uppercase; }
.t4ks__tag { -webkit-box-orient: vertical; display: -webkit-box; font-size: 12.5px; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.5; margin: 8px 0 0; opacity: .75; overflow: hidden; }
.t4ks__tag[hidden] { display: none; }
/* schermi bassi: la frase breve lascia il posto alle scelte (la descrizione è nella scheda tecnica) */
@media (min-width: 992px) and (max-height: 919px) { .t4ks__tag { display: none; } }
/* prezzo con la dicitura IVA e il costo d'uso */
.t4ks__buy { margin-top: 12px; }
.t4ks__buy[hidden] { display: none; }
.t4ks__amount { align-items: center; display: flex; gap: 4px 14px; margin: 0; }
.t4ks__amount strong { flex: 0 0 auto; font-family: var(--t4-head); font-size: clamp(26px, 2.1vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.t4ks__pside { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t4ks__pside > span { font-family: var(--t4-mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.35; opacity: .7; }
.t4ks__pside:empty { display: none; }
.t4ks__hourly { align-items: baseline; background: none; border: 0; color: var(--t4-sky); cursor: pointer; display: inline-flex; flex-wrap: wrap; font-family: var(--t4-mono); font-size: 11px; gap: 0 8px; line-height: 1.35; padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.t4ks__hourly small { color: rgba(255, 255, 255, .6); display: inline-block; font-size: 10.5px; text-decoration: none; }
.t4ks__hourly:hover { color: #fff; }
.t4ks__hourly:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 3px; }
/* dati di gara: una riga di cifre (potenza, cilindrata, peso, carburatore) */
.t4ks__stats { margin-top: 8px; }
.t4ks__stats[hidden] { display: none; }
.t4ks__dl { border-bottom: 1px solid var(--t4-hair-dark); border-top: 1px solid var(--t4-hair-dark); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; }
.t4ks__dl > div { border-left: 1px solid var(--t4-hair-dark); min-width: 0; padding: 7px 6px 7px 10px; }
.t4ks__dl > div:first-child { border-left: 0; padding-left: 0; }
.t4ks__dl dt { font-family: var(--t4-mono); font-size: 9.5px; letter-spacing: .1em; opacity: .6; text-transform: uppercase; white-space: nowrap; }
.t4ks__dl dd { font-family: var(--t4-head); font-size: clamp(15px, 1.15vw, 19px); font-weight: 500; letter-spacing: -.015em; line-height: 1.1; margin: 4px 0 0; overflow-wrap: anywhere; }
.t4ks__dl dd small { display: block; font-family: var(--t4-mono); font-size: 9.5px; letter-spacing: .03em; margin-top: 3px; opacity: .6; }
.t4ks__dl dd.is-text { font-size: clamp(12.5px, .9vw, 14px); letter-spacing: 0; line-height: 1.25; }
.t4ks__bars { display: grid; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.t4ks__bars:empty { display: none; }
.t4ks__bar-h { display: flex; font-family: var(--t4-mono); font-size: 11px; justify-content: space-between; letter-spacing: .08em; text-transform: uppercase; }
.t4ks__bar-h b { font-weight: 400; opacity: .8; }
.t4ks__bar-t { background: rgba(134, 160, 255, .16); border-radius: 2px; display: block; height: 4px; margin-top: 7px; overflow: hidden; }
.t4ks__bar-t i { background: linear-gradient(90deg, var(--t4-blue), var(--t4-sky)); border-radius: inherit; display: block; height: 100%; transform: scaleX(var(--v, 0)); transform-origin: 0 50%; }
.t4ks__list { list-style: none; margin: 18px 0 0; padding: 0; }
.t4ks__list li { border-top: 1px solid var(--t4-hair-dark); display: flex; font-size: 13px; gap: 12px; justify-content: space-between; padding: 10px 0; }
.t4ks__list li span:last-child { font-family: var(--t4-mono); font-size: 12px; white-space: nowrap; }
.t4ks__empty { font-size: 13px; line-height: 1.55; margin: 18px 0 0; opacity: .8; }
/* "Compreso nel kit" e "Scheda tecnica": voci affiancate, una aperta alla volta */
.t4ks__info { margin-top: 12px; }
.t4ks__info:empty { display: none; }
.t4ks__body { overflow-x: clip; }
/* età in vista sopra "Compreso nel kit" / "Scheda tecnica" (22/10) */
.t4ks__age { align-items: baseline; display: flex; gap: 12px; margin: 10px 0 0; padding: 0 0 10px; }
.t4ks__age span { color: var(--t4-sky); flex: 0 0 auto; font-family: var(--t4-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.t4ks__age strong { font-family: var(--t4-head); font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; letter-spacing: -.01em; }
.t4ks__info-tabs { border-bottom: 1px solid var(--t4-hair-dark); border-top: 1px solid var(--t4-hair-dark); display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.t4ks__info-b { align-items: center; background: none; border: 0; color: #fff; cursor: pointer; display: flex; font-family: var(--t4-mono); font-size: 10.5px; gap: 8px; justify-content: space-between; letter-spacing: .1em; min-height: 36px; padding: 0 10px 0 0; text-align: left; text-transform: uppercase; }
.t4ks__info-b + .t4ks__info-b { border-left: 1px solid var(--t4-hair-dark); padding-left: 12px; }
.t4ks__info-b svg { flex: 0 0 auto; height: 14px; transition: transform var(--t4-dur) var(--t4-ease); width: 14px; }
.t4ks__info-b:hover, .t4ks__info-b[aria-expanded="true"] { color: var(--t4-sky); }
.t4ks__info-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.t4ks__info-b:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: -2px; }
.t4ks__info-p { padding: 12px 0 2px; }
.t4ks__info-p[hidden] { display: none; }
.t4ks__dots { display: grid; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1280px) { .t4ks__dots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t4ks__dots li { font-size: 12px; line-height: 1.45; padding-left: 13px; position: relative; }
.t4ks__dots li::before { background: var(--t4-sky); border-radius: 50%; content: ""; height: 5px; left: 0; position: absolute; top: .55em; width: 5px; }
.t4ks__out { font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.t4ks__out span { display: block; font-family: var(--t4-mono); font-size: 9.5px; letter-spacing: .1em; opacity: .65; text-transform: uppercase; }
.t4ks__desc { font-size: 12.5px; line-height: 1.55; margin: 0 0 10px; opacity: .82; }
.t4ks__spec { margin: 10px 0 0; }
.t4ks__spec > div { border-top: 1px solid var(--t4-hair-dark); display: grid; gap: 2px 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 6px 0; }
.t4ks__spec dt { font-family: var(--t4-mono); font-size: 9.5px; letter-spacing: .08em; opacity: .62; padding-top: 2px; text-transform: uppercase; }
.t4ks__spec dd { font-size: 12px; line-height: 1.4; margin: 0; }
/* piede: azione dell'usato e "Preferisci provarlo?" in una riga */
.t4ks__cta { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.t4ks__cta:empty { display: none; }
.t4ks__try { align-items: center; display: flex; flex-wrap: wrap; font-family: var(--t4-mono); font-size: 11px; gap: 4px 12px; margin: 8px 0 0; }
.t4ks__try[hidden] { display: none; }
/* piede stretto: "Rivenditori" andava a capo da solo (resta nel menu e nella consegna) */
@container (max-width: 419px) { .t4ks__try a.is-quiet { display: none; } }
/* telefoni stretti: la domanda andava a capo e alzava il piede fisso, resta il bottone */
@media (max-width: 420px) { .t4ks__try > span { display: none; } }
.t4ks__try > span { opacity: .62; }
.t4ks__try a { align-items: center; color: #fff; display: inline-flex; min-height: 26px; text-decoration: underline; text-underline-offset: 3px; }
.t4ks__try a.is-quiet { opacity: .65; }
/* "Prenota un test" (21/10): bottone a contorno, più grande della riga */
.t4ks__try a.t4ks__try-b { border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; font-size: 12px; letter-spacing: .06em; min-height: 34px; padding: 0 14px; text-decoration: none; text-transform: uppercase; }
.t4ks__try a.t4ks__try-b:hover, .t4ks__try a.t4ks__try-b:focus { background: #fff; border-color: #fff; color: var(--t4-navy); }
.t4ks__try a:hover, .t4ks__try a:focus { color: var(--t4-sky); opacity: 1; }
.t4ks__try a:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 2px; }
/* modulo di preventivo o conferma: restano nome, prezzo e modulo */
.t4ks__panel.is-form :is(.t4ks__tag, .t4ks__stats, .t4ks__bars, .t4ks__info, .t4ks__try),
.t4ks__panel.is-sent :is(.t4ks__tag, .t4ks__stats, .t4ks__bars, .t4ks__info) { display: none; }
.t4ks__cta:empty { display: none; }

/* fila dei modelli (ruolo tablist): pillole di testo, la scelta in bianco pieno;
   si cambia modello solo con un clic deliberato */
.t4ks__garage { background: rgba(255, 255, 255, .04); border: 1px solid rgba(134, 160, 255, .28); border-radius: 999px; display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.t4ks__garage::-webkit-scrollbar { display: none; }
.t4ks__car {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  font: inherit;
  justify-content: center;
  min-height: 46px;
  opacity: .72;
  padding: 5px 14px;
  text-align: center;
  transition: background-color var(--t4-dur) var(--t4-ease), color var(--t4-dur) var(--t4-ease), opacity var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease);
  white-space: nowrap;
}
.t4ks__car:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.t4ks__car:focus-visible { opacity: 1; outline: 2px solid var(--t4-sky); outline-offset: -2px; }
.t4ks__car[aria-selected="true"] { background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); color: var(--t4-navy); opacity: 1; }
.t4ks__car-name { display: block; font-family: var(--t4-head); font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.1; text-transform: uppercase; }
.t4ks__car-sub { display: block; font-family: var(--t4-mono); font-size: 9.5px; line-height: 1.3; margin-top: 2px; opacity: .68; }
/* 992-1279px: un po' meno spazio intorno (le colonne restano metà e metà) */
@media (min-width: 992px) and (max-width: 1279px) {
  .t4ks__body { padding: 16px 16px 14px; }
  .t4ks__foot { padding: 10px 16px; }
}

/* movimento: cambio di modello, passata di luce, barre, fuoco e livelli */
@media (prefers-reduced-motion: no-preference) {
  /* senza maschera pronta la banda coprirebbe tutto il riquadro: si aspetta lo scontorno */
  .t4ks.is-sweep .t4ks__kart.has-cut .t4ks__sweep { animation: t4ks-sweep 1.1s var(--t4-ease) both; }
  .t4ks__bar-t i { transition: transform .6s var(--t4-ease-out) var(--d, 0s); }
  .t4ks__word { transition: opacity .45s var(--t4-ease); }
  .t4ks__word.is-out { opacity: 0; }
  /* lo step aperto porta il render sul dettaglio (image_focus): zoom e punto in 0,6 s */
  .t4ks__zoom { transition: transform .6s var(--t4-ease), transform-origin .6s var(--t4-ease); }
  .t4ks__layer { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--t4-ease), transform .45s var(--t4-ease); }
  .t4ks__layer.is-in { opacity: 1; transform: none; }
}
@keyframes t4ks-sweep {
  0% { background-position: 130% 0; opacity: 0; }
  15% { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t4ks__kart, .t4ks__car, .t4ks__arrow, .t4ks__tick i { transition: none; }
}

/* telefono e tablet: palco in alto (~40vh), frecce e tacche, fila dei modelli che scorre, pannello sotto */
@media (max-width: 991px) {
  .t4ks__wrap { grid-template-areas: "left" "panel"; grid-template-columns: minmax(0, 1fr); }
  .t4ks__left { gap: 10px; }
  .t4ks__stage { cursor: auto; height: clamp(230px, 40vh, 440px); margin-top: 8px; }
  .t4ks__kart { inset: 6% 8% 10%; }
  .t4ks__note { bottom: 0; }
  .t4ks__ticks { margin-left: 6px; }
  .t4ks__head { align-items: stretch; flex-direction: column; }
  .t4ks__garage { scroll-snap-type: x proximity; }
  .t4ks__car { flex: 0 0 auto; padding: 5px 12px; scroll-snap-align: start; }
  .t4ks__panel { margin-top: 8px; }
  /* il piede (totale e bottone) resta in fondo allo schermo mentre si scorre il pannello */
  .t4ks__foot {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    background: rgba(14, 20, 48, .9);
    border-radius: 0 0 23px 23px;
    bottom: 0;
    box-shadow: 0 -14px 30px rgba(0, 0, 0, .3);
    position: sticky;
    z-index: 5;
  }
}
@media (max-width: 560px) {
  .t4ks__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t4ks__dl > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .t4ks__dl > div:nth-child(n+3) { border-top: 1px solid var(--t4-hair-dark); }
}
@media (max-width: 400px) {
  .t4ks__body { padding: 18px 16px 14px; }
  .t4ks__foot { padding: 10px 16px; }
}

/* --------------------------------------------------------------------------
   Usato
   -------------------------------------------------------------------------- */
.t4ku { background: var(--t4-page); color: var(--t4-navy); overflow: hidden; padding: clamp(64px, 7vw, 132px) 0; position: relative; }
.t4ku__wrap { padding: 0 var(--t4k-gut); position: relative; z-index: 1; }
.t4ku__head { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; }
.t4ku__kicker { color: var(--t4-blue); font-family: var(--t4-mono); font-size: 12px; letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.t4ku__title { color: var(--t4-navy); font-family: var(--t4-head); font-size: var(--t4-h2); font-weight: 500; letter-spacing: var(--t4-h2-track); line-height: .92; margin: 14px 0 0; text-transform: uppercase; }
.t4ku__lead { font-size: clamp(13px, 12px + .2vw, 15px); line-height: 1.6; margin: 16px 0 0; max-width: 54ch; opacity: .75; }
.t4ku__nav { align-items: center; display: flex; gap: 16px; }
.t4ku__nav[hidden] { display: none; }
.t4ku__prog { background: var(--t4-hair); border-radius: 2px; height: 2px; overflow: hidden; width: clamp(90px, 12vw, 200px); }
.t4ku__prog i { background: var(--t4-blue); display: block; height: 100%; transform: scaleX(var(--p, .2)); transform-origin: 0 50%; transition: transform .3s linear; }
.t4ku__arrow { align-items: center; background: #fff; border: 1px solid var(--t4-hair); border-radius: 50%; color: var(--t4-navy); cursor: pointer; display: grid; height: 48px; justify-items: center; padding: 0; transition: background-color var(--t4-dur) var(--t4-ease), color var(--t4-dur) var(--t4-ease), opacity var(--t4-dur) var(--t4-ease); width: 48px; }
.t4ku__arrow:hover:not(:disabled) { background: var(--t4-navy); color: #fff; }
.t4ku__arrow:disabled { cursor: default; opacity: .35; }
.t4ku__arrow:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 3px; }
.t4ku__arrow svg { height: 18px; width: 18px; }
.t4ku__filters { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 32px; }
.t4ku__filters:empty { display: none; }
.t4ku__fgroup { border: 0; margin: 0; min-width: 0; padding: 0; }
.t4ku__fgroup legend { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .12em; margin-bottom: 10px; opacity: .6; padding: 0; text-transform: uppercase; }
.t4ku__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t4ku__chip { background: #fff; border: 1px solid var(--t4-hair); border-radius: 999px; color: var(--t4-navy); cursor: pointer; font-family: var(--t4-mono); font-size: 12px; letter-spacing: .04em; line-height: 1; padding: 9px 14px; transition: background-color var(--t4-dur) var(--t4-ease), color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease); }
.t4ku__chip:hover { border-color: var(--t4-navy); }
.t4ku__chip[aria-pressed="true"] { background: var(--t4-navy); border-color: var(--t4-navy); color: #fff; }
.t4ku__chip:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 2px; }
.t4ku__row {
  display: flex;
  gap: clamp(14px, 1.4vw, 24px);
  margin: 30px calc(-1 * var(--t4k-gut)) 0;
  overflow-x: auto;
  padding: 6px var(--t4k-gut) 28px;
  scroll-padding-inline: var(--t4k-gut);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.t4ku__row::-webkit-scrollbar { display: none; }
.t4ku__row.is-drag { scroll-snap-type: none; }
.t4ku__card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 0 var(--t4-hair);
  cursor: pointer;
  display: flex;
  flex: 0 0 clamp(272px, 24vw, 400px);
  flex-direction: column;
  min-height: clamp(430px, 34vw, 560px);
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  transition: translate var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease);
}
.t4ku__card:hover { box-shadow: 0 22px 44px rgba(14, 20, 48, .14); translate: 0 -4px; }
.t4ku__card[hidden] { display: none; }
.t4ku__img { aspect-ratio: 4 / 3; background: #e3e6ef; margin: 0; overflow: hidden; position: relative; }
.t4ku__img img { display: block; height: 100%; object-fit: cover; transition: scale .8s var(--t4-ease-out); width: 100%; }
.t4ku__card:hover .t4ku__img img { scale: 1.04; }
.t4ku__img .t4-ph { border-radius: 0; height: 100%; min-height: 0; }
.t4ku__status { background: #fff; border-radius: 999px; color: var(--t4-navy); font-family: var(--t4-mono); font-size: 11px; left: 12px; letter-spacing: .1em; line-height: 1; padding: 7px 11px; position: absolute; text-transform: uppercase; top: 12px; z-index: 2; }
.t4ku__status--riservato { background: var(--t4-navy); color: #fff; }
.t4ku__status--venduto { background: #5c6070; color: #fff; }
.t4ku__card.is-sold .t4ku__img img, .t4ku__card.is-sold .t4ku__img .t4-ph { filter: grayscale(1); opacity: .55; }
.t4ku__card.is-sold .t4ku__body { color: #5c6070; }
.t4ku__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.t4ku__meta { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; margin: 0; opacity: .7; text-transform: uppercase; }
.t4ku__name { color: inherit; font-family: var(--t4-head); font-size: clamp(20px, 1.6vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; margin: 0; text-transform: uppercase; }
.t4ku__cond { align-self: flex-start; border: 1px solid var(--t4-navy); border-radius: 999px; font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; line-height: 1; padding: 6px 10px; text-transform: uppercase; }
.t4ku__cond--ottimo { background: var(--t4-navy); color: #fff; }
.t4ku__cond--da_revisionare { border-style: dashed; }
.t4ku__price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: auto 0 0; padding-top: 14px; padding-right: 56px; }
.t4ku__price strong { font-family: var(--t4-head); font-size: clamp(24px, 2vw, 34px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.t4ku__price strong.is-text { font-size: clamp(17px, 1.3vw, 21px); }
.t4ku__price small { font-family: var(--t4-mono); font-size: 11px; opacity: .65; }
.t4ku__plus { align-items: center; background: var(--t4-navy); border: 0; border-radius: 50%; bottom: 18px; color: #fff; cursor: pointer; display: grid; height: 44px; justify-items: center; padding: 0; position: absolute; right: 18px; transition: background-color var(--t4-dur) var(--t4-ease), transform var(--t4-dur) var(--t4-ease); width: 44px; z-index: 2; }
.t4ku__card:hover .t4ku__plus { background: var(--t4-blue); transform: rotate(90deg); }
.t4ku__plus:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 3px; }
.t4ku__plus svg { height: 18px; width: 18px; }
.t4ku__card--alert { align-items: flex-start; background: transparent; border: 1.5px dashed rgba(25, 43, 136, .35); box-shadow: none; cursor: default; justify-content: flex-end; padding: 26px 24px; }
.t4ku__card--alert:hover { box-shadow: none; translate: none; }
.t4ku__card--alert h3 { font-family: var(--t4-head); font-size: clamp(22px, 1.8vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; margin: 0; text-transform: uppercase; }
.t4ku__card--alert p { font-size: 13px; line-height: 1.55; margin: 12px 0 22px; opacity: .75; }
.t4ku__none { font-size: 13px; margin: 8px 0 0; }
.t4ku__none[hidden] { display: none; }
.t4ku__none button { background: none; border: 0; color: var(--t4-blue); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.t4ku__empty { background: #fff; border-radius: 24px; display: grid; gap: 28px 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin-top: 36px; padding: clamp(24px, 3vw, 48px); }
.t4ku__empty h3 { font-family: var(--t4-head); font-size: clamp(26px, 2.4vw, 40px); font-weight: 500; letter-spacing: -.025em; line-height: 1; margin: 0; text-transform: uppercase; }
.t4ku__empty p { font-size: 14px; line-height: 1.6; margin: 14px 0 0; opacity: .75; }
@media (max-width: 767px) {
  /* chip su una riga che scorre, così i filtri non spingono giù le card */
  .t4ku__filters { gap: 12px; margin-top: 24px; }
  .t4ku__fgroup { min-width: 0; width: 100%; }
  .t4ku__fgroup legend { margin-bottom: 8px; }
  .t4ku__chips { flex-wrap: nowrap; margin: 0 calc(-1 * var(--t4k-gut)); overflow-x: auto; padding: 0 var(--t4k-gut) 2px; scrollbar-width: none; }
  .t4ku__chips::-webkit-scrollbar { display: none; }
  .t4ku__chip { flex: 0 0 auto; }
  .t4ku__empty { grid-template-columns: minmax(0, 1fr); }
  .t4ku__nav .t4ku__prog { width: 80px; }
  .t4ku__card { flex-basis: min(82vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .t4ku__card, .t4ku__img img, .t4ku__plus, .t4ku__prog i { transition: none; }
}

/* scheda di un usato (dentro .t4fx-sheet) */
.t4ku-sheet__body { padding: 8px clamp(20px, 3vw, 36px) 40px; }
/* sotto il bottone di chiusura (flottante) del pannello */
.t4ku-sheet__gal, .t4ku-sheet__body > .t4kx-sheet__kicker { clear: both; }
.t4ku-sheet__gal { margin: 6px 0 0; }
.t4ku-sheet__main { aspect-ratio: 4 / 3; background: #e3e6ef; border-radius: 16px; overflow: hidden; position: relative; }
.t4ku-sheet__main img { display: block; height: 100%; object-fit: cover; width: 100%; }
.t4ku-sheet__main .t4-ph { border-radius: 16px; height: 100%; min-height: 0; }
.t4ku-sheet__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.t4ku-sheet__thumbs button { background: #e3e6ef; border: 2px solid transparent; border-radius: 10px; cursor: pointer; flex: 0 0 72px; height: 54px; overflow: hidden; padding: 0; }
.t4ku-sheet__thumbs button[aria-current="true"] { border-color: var(--t4-blue); }
.t4ku-sheet__thumbs img { display: block; height: 100%; object-fit: cover; width: 100%; }
.t4ku-sheet__title { color: var(--t4-navy); font-family: var(--t4-head); font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.025em; line-height: 1; margin: 22px 0 0; text-transform: uppercase; }
.t4ku-sheet__price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 0; }
.t4ku-sheet__price strong { font-family: var(--t4-head); font-size: 28px; font-weight: 500; }
.t4ku-sheet__price span { font-family: var(--t4-mono); font-size: 12px; opacity: .7; }
.t4ku-sheet__h { color: var(--t4-blue); font-family: var(--t4-mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; margin: 26px 0 0; text-transform: uppercase; }
.t4ku-sheet__dl { margin: 8px 0 0; }
.t4ku-sheet__dl > div { border-bottom: 1px solid var(--t4-hair); display: flex; gap: 16px; justify-content: space-between; padding: 11px 0; }
.t4ku-sheet__dl dt { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .08em; opacity: .65; text-transform: uppercase; }
.t4ku-sheet__dl dd { font-size: 14px; margin: 0; text-align: right; }
.t4ku-sheet__dl a { color: var(--t4-blue); }
.t4ku-sheet__ul { margin: 8px 0 0; padding-left: 18px; }
.t4ku-sheet__ul li { font-size: 14px; line-height: 1.5; padding: 4px 0; }
.t4ku-sheet__text { font-size: 14px; line-height: 1.6; margin: 12px 0 0; }

/* moduli della sezione Usato (richiesta su un kart, "Avvisami") */
.t4kf { display: grid; gap: 14px; margin-top: 14px; position: relative; }
.t4kf__row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .t4kf__row { grid-template-columns: minmax(0, 1fr); } }
.t4kf__f { display: grid; gap: 6px; min-width: 0; }
.t4kf__f > span { font-family: var(--t4-mono); font-size: 11px; letter-spacing: .1em; opacity: .7; text-transform: uppercase; }
.t4kf input[type="text"], .t4kf input[type="email"], .t4kf input[type="tel"], .t4kf select, .t4kf textarea {
  background: #fff;
  border: 1px solid rgba(14, 20, 48, .2);
  border-radius: 12px;
  color: var(--t4-navy);
  font-family: inherit;
  font-size: 16px;
  min-height: 48px;
  padding: 11px 14px;
  width: 100%;
}
.t4kf textarea { min-height: 96px; resize: vertical; }
.t4kf input:focus-visible, .t4kf select:focus-visible, .t4kf textarea:focus-visible { border-color: var(--t4-blue); outline: 2px solid var(--t4-blue); outline-offset: 1px; }
.t4kf [aria-invalid="true"] { border-color: #b3261e; }
.t4kf__check { align-items: flex-start; display: flex; font-size: 13px; gap: 10px; line-height: 1.45; }
.t4kf__check input { accent-color: var(--t4-blue); flex: 0 0 auto; height: 18px; margin: 1px 0 0; width: 18px; }
.t4kf__check a { color: var(--t4-blue); }
.t4kf__hp { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }
.t4kf__err { color: #b3261e; font-family: var(--t4-mono); font-size: 12px; margin: -6px 0 0; }
.t4kf__msg { border-radius: 12px; font-size: 14px; line-height: 1.5; margin: 0; padding: 12px 14px; }
.t4kf__msg[hidden] { display: none; }
/* vuoto resta nell'albero accessibile (role=status), senza occupare posto */
.t4kf__msg:empty { clip: rect(0 0 0 0); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.t4kf__msg.is-ok { background: rgba(36, 72, 216, .1); color: var(--t4-ink); }
.t4kf__msg.is-err { background: rgba(179, 38, 30, .08); color: #8c1d18; }
.t4kf .t4-pill { justify-self: start; }
.t4kf .t4-pill[aria-busy="true"] { opacity: .6; pointer-events: none; }