/* ============================================================
   CAR SYSTEM FP — Design system (sv-base)
   Token, componenti e responsive estratti dal prototipo di consegna.
   Caricato su TUTTE le pagine. Font: Inter (via Google Fonts).
   ============================================================ */
:root {
  /* Brand */
  --red: #CC1216;
  --red-dark: #A50E12;
  --red-tint: #fbeaea;
  --black: #0c0c0d;
  --ink: #18181b;
  --gray: #575757;
  --gray-2: #6b6b70;
  --gray-3: #9a9aa0;

  /* Surfaces */
  --bg: #ffffff;
  --soft: #f4f5f7;
  --soft-2: #eceef1;
  --line: #e4e5e9;
  --line-2: #d3d5db;
  --dark: #141417;
  --dark-2: #1d1d21;

  --radius: 4px;
  --cut: 9px;            /* 45° corner cut size */
  --shadow: 0 1px 2px rgba(12,12,13,.06), 0 8px 24px rgba(12,12,13,.06);
  --shadow-hover: 0 2px 4px rgba(12,12,13,.08), 0 18px 40px rgba(12,12,13,.12);

  --maxw: 1240px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Ancore interne: l'header è appiccicato in cima (84px, più la barra promo),
   quindi una sezione raggiunta con #ancora finirebbe mezza sotto di lui.
   Vale per qualunque <section id="…">, così un'ancora nuova funziona da sola. */
section[id] { scroll-margin-top: 110px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { margin: 0; line-height: 1.08; letter-spacing: -.02em; font-weight: 800; }
p { margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.app { min-height: 100vh; display: flex; flex-direction: column; }
.grow { flex: 1; }

/* ---------- angular detail utilities ---------- */
.cut {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
             calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.kicker {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
}
.kicker::before {
  content: ""; width: 22px; height: 9px; background: var(--red);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.kicker.on-dark { color: #ff5a5e; }

/* ---------- buttons ---------- */
.btn {
  --c: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  padding: 13px 22px; border: 0; background: var(--c); color: #fff;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
             calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .16s ease, transform .16s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--red-dark); }
.btn:active { transform: translateY(1px); }
.btn.dark { --c: var(--ink); }
.btn.dark:hover { background: #000; }
/* Bottone con contorno.
   Il contorno non si può fare con un box-shadow inset: il clip-path del taglio
   a 45° taglia via anche l'ombra, e sull'angolo obliquo la linea sparisce —
   il bottone sembra rotto. Qui il contorno è il fondo stesso, e uno strato
   interno più piccolo (::before) lascia scoperti 1,6px su tutti i lati,
   diagonale compresa. Le due tinte sono variabili, così lo stesso bottone
   funziona su fondo chiaro e su fondo scuro. */
.btn.ghost {
  --ghost-line: var(--ink);
  --ghost-fill: #fff;
  background: var(--ghost-line);
  color: var(--ink);
  box-shadow: none;
  position: relative;
  isolation: isolate;
}
.btn.ghost::before {
  content: "";
  position: absolute;
  inset: 1.6px;
  background: var(--ghost-fill);
  clip-path: polygon(calc(var(--cut) - 1.6px) 0, 100% 0,
             100% calc(100% - var(--cut) + 1.6px),
             calc(100% - var(--cut) + 1.6px) 100%, 0 100%, 0 calc(var(--cut) - 1.6px));
  z-index: -1;
}
.btn.ghost:hover { background: var(--ghost-line); --ghost-fill: var(--soft); }
.btn.ghost.on-dark { --ghost-line: #3a3a42; --ghost-fill: var(--dark-2, #1c1c20); color: #fff; }
.btn.wa { --c: #25d366; color: #07301a; }
.btn.wa:hover { background: #1fbb59; }
.btn.lg { padding: 16px 28px; font-size: 16px; }
.btn.sm { padding: 9px 14px; font-size: 13.5px; --cut: 7px; }
.btn.block { width: 100%; }

/* ---------- badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; color: #fff; background: var(--red);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}
/* Le tre varianti cambiano solo il fondo: corpo, peso, spaziatura e taglio
   dell'angolo restano quelli di `.badge`, così le etichette sono allineate fra
   loro qualunque sia lo stato del prodotto. La disponibile si chiama `avail` e
   non `stock` perché `.stock` è di WooCommerce: vedi la nota in woocommerce.css. */
.badge.avail { background: #138a4e; }
.badge.repair { background: var(--ink); }
.badge.offer { background: var(--red); }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--gray);
  padding: 7px 13px; background: var(--soft); border: 1px solid var(--line);
  border-radius: 999px; transition: .15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); cursor: pointer; }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .n { font-weight: 700; opacity: .6; font-variant-numeric: tabular-nums; }

/* ---------- negozio: filtro disponibilità e categorie ---------- */
.shopfilter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.shopfilter .chip { font-size: 13px; padding: 9px 15px; background: #fff; }
.shopfilter .chip.active { background: var(--red); border-color: var(--red); color: #fff; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.cs-cats { margin-top: 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.cs-cats > summary {
  cursor: pointer; list-style: none; padding: 12px 16px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.cs-cats > summary::-webkit-details-marker { display: none; }
.cs-cats > summary::after { content: "+"; margin-left: auto; font-size: 17px; color: var(--gray); }
.cs-cats[open] > summary::after { content: "−"; }
.cs-cats > summary .n { color: var(--gray); font-weight: 600; }
.cs-cats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px 26px; padding: 6px 16px 20px; border-top: 1px solid var(--line);
}
.cs-cats-fam > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--red); margin: 14px 0 8px; }
.cs-cats-fam ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.cs-cats-fam a { font-size: 13.5px; color: var(--gray); display: flex; gap: 8px; }
.cs-cats-fam a:hover { color: var(--ink); }
.cs-cats-fam a span { color: var(--gray-3); font-size: 12px; }
.cs-cats-fam a.active { color: var(--red); font-weight: 700; }

@media (max-width: 820px) {
  /* Su mobile i chip delle categorie diventano tre righe di pillole che
     spingono giù i prodotti: le stesse categorie stanno nel pannello qui
     sotto, ordinate per famiglia. Restano i chip della disponibilità, che
     sono tre e cambiano che cosa si vede. */
  .cs-chips { display: none; }
  .cs-cats { margin-top: 16px; }
  .cs-cats-grid { grid-template-columns: 1fr; gap: 4px 0; }
}

/* ---------- hero — scheda elettronica sul banco ----------
   Il movimento è tutto qui: la riga di scansione che scorre, il segnale che
   corre lungo due piste, tre pad che pulsano. Nessun JavaScript, così parte al
   primo paint anche con il rinvio degli script di WP Rocket. */
.cs-hero-art { position: relative; display: grid; gap: 18px; }
.cs-hero-art svg {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
.cs-hero-art .art-scan { animation: cs-art-scan 4.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes cs-art-scan {
  0%, 100% { transform: translateY(-8px); }
  50%      { transform: translateY(288px); }
}
.cs-hero-art .art-segnale path {
  stroke-dasharray: 26 210; stroke-dashoffset: 0;
  animation: cs-art-flusso 3.6s linear infinite;
}
.cs-hero-art .art-segnale path:nth-child(2) { animation-delay: 1.2s; }
@keyframes cs-art-flusso { to { stroke-dashoffset: -236; } }
.cs-hero-art .art-pad circle {
  transform-box: fill-box; transform-origin: center;
  animation: cs-art-pulsa 2.8s ease-in-out infinite;
}
.cs-hero-art .art-pad .p2 { animation-delay: .9s; }
.cs-hero-art .art-pad .p3 { animation-delay: 1.8s; }
@keyframes cs-art-pulsa {
  0%, 100% { opacity: .3; transform: scale(.75); }
  50%      { opacity: 1;  transform: scale(1.25); }
}
.cs-hero-art .art-onda path {
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: cs-art-onda 3.2s ease-in-out infinite;
}
@keyframes cs-art-onda {
  0%   { stroke-dashoffset: 200; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Fila di bottoni affiancati (hero delle riparazioni, CTA di chiusura, contatti,
   404…). Prima erano `style="display:flex;gap:12px;flex-wrap:wrap"` scritti nei
   template: uno stile in linea batte qualunque media query, quindi su telefono
   i bottoni restavano larghi quanto il loro testo — mezza riga a testa, allineati
   a sinistra. Con una classe il comportamento su mobile si decide qui una volta
   sola (vedi il blocco RESPONSIVE in fondo). */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-hero-art-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: start; }
/* justify-content esplicito: senza, le voci corte venivano centrate da una
   regola ereditata e la spunta finiva più a destra delle altre. */
.cs-hero-art-voci li { display: flex; align-items: center; justify-content: flex-start; gap: 10px; color: #c9c9d0; font-size: 14.5px; text-align: left; }
.cs-hero-art-voci li svg { color: var(--red); flex: 0 0 auto; width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) {
  .cs-hero-art .art-scan,
  .cs-hero-art .art-segnale path,
  .cs-hero-art .art-pad circle,
  .cs-hero-art .art-onda path { animation: none; }
  .cs-hero-art .art-onda path { stroke-dashoffset: 0; }
}
@media (max-width: 820px) {
  /* L'occhiello ha white-space: nowrap — su desktop è giusto, su telefono la
     riga "Elettronica auto · 45 anni di laboratorio" è più larga dello schermo
     e, essendo dentro una colonna grid, allargava l'intera colonna: tutto
     l'hero finiva fuori dal bordo destro. Qui va a capo, e agli elementi della
     griglia si dice che possono stringersi (min-width: 0). */
  .hero .wrap > * { min-width: 0; }
  .hero .kicker { white-space: normal; }
  .hero-cta { margin-top: 22px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .cs-hero-art { gap: 14px; }
  .cs-hero-art svg { max-width: 460px; margin: 0 auto; }
  .cs-hero-art-voci li { font-size: 14px; align-items: flex-start; }
  .cs-hero-art-voci li svg { margin-top: 3px; }
}

/* ---------- selettore di lingua ---------- */

/*
 * Il selettore resta SOLO nel footer (28 agosto 2026).
 *
 * Era in tre punti: in fondo alla barra di navigazione su desktop, dentro il
 * menu mobile e nel footer. Nella barra rubava spazio accanto alle voci vere, e
 * nel menu mobile allungava un elenco già lungo — per una cosa che quasi
 * nessuno usa: chi arriva da Google arriva già nella sua lingua (ogni pagina ha
 * il suo indirizzo e il suo hreflang), e in mezzo alla navigazione la lingua
 * non si cambia.
 *
 * Nascosto con la CSS e non tolto dai template di proposito: il markup di
 * `cs_selettore_lingua()` in header.php resta al suo posto — riaccenderlo è
 * togliere queste due righe, senza rimettere mano al PHP. Il selettore del
 * footer non è toccato.
 */
.nav .cs-lingua,
.drawer .drawer-lingue { display: none; }

.cs-lingua { position: relative; }
.cs-lingua > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--gray);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px;
}
.cs-lingua > summary::-webkit-details-marker { display: none; }
.cs-lingua > summary:hover { border-color: var(--ink); color: var(--ink); }
.cs-lingua > summary img { border-radius: 2px; }
.cs-lingua-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 180px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-hover);
  padding: 6px; display: grid; gap: 2px;
}
.cs-lingua-pop a {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 6px;
  font-size: 14px; color: var(--gray); white-space: nowrap;
}
.cs-lingua-pop a:hover { background: var(--soft); color: var(--ink); }
.cs-lingua-pop a.attiva { color: var(--ink); font-weight: 700; background: var(--soft); }
/* Nel menu mobile: prende il posto dell'elenco categorie, in fondo alle voci. */
.drawer-lingue { padding: 16px 22px 6px; }
.drawer-titolo {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-3); margin-bottom: 10px;
}
.cs-lingue-drawer { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cs-lingue-drawer a {
  font-size: 13px; font-weight: 600; color: var(--gray); padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px;
}
.cs-lingue-drawer a.attiva { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Dentro il menu mobile vince ".drawer nav a" (0,1,2): qui serve un selettore
   più specifico, altrimenti le sigle diventano voci di menu a riga intera. */
.drawer nav .cs-lingue-drawer a {
  display: inline-block; padding: 7px 12px; font-size: 13px; font-weight: 600;
  text-transform: none; border-bottom: 1px solid var(--line);
}
.drawer nav .cs-lingue-drawer a.attiva { border-color: var(--ink); color: #fff; }
/* nel footer: a destra della riga pagamenti, elenco che si apre verso l'alto */
.footer-barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-barra .pagamenti { flex: 1 1 auto; }
.cs-lingua-footer { flex: 0 0 auto; }
.cs-lingua-footer > summary {
  color: #d7d7db; border-color: #2c2c32; background: transparent;
  font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 9px 14px;
}
.cs-lingua-footer > summary:hover { border-color: #4a4a52; color: #fff; }
.cs-lingua-footer > summary svg { color: var(--red); }
.cs-lingua-footer .cs-lingua-pop { top: auto; bottom: calc(100% + 8px); }

/* ---------- top promo bar ---------- */
.topbar {
  background: var(--dark); color: #d7d7db; font-size: 13px;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding-top:6px; padding-bottom:6px;}
.topbar .promos { display: flex; flex: 1 1 auto; gap: 26px; flex-wrap: wrap; }
.topbar .promos .promo { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* La prima voce impostata "a destra" apre il gruppo di destra della barra. */
.topbar .promos .promo.starts-right { margin-left: auto; }
.topbar b { color: #fff; font-weight: 700; }
.topbar a:hover { color: #fff; }

/* Rotator della barra promo: una voce alla volta, altezza fissa di una riga.
   La modalità (mobile / sempre / mai) si sceglie in Impostazioni sito → Navigazione. */
.topbar .promos.is-rotator { min-width: 0; }
.topbar .promos.is-rotator .promo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.topbar .promos.rot-always {
  display: block; position: relative; flex: 1 1 auto; height: 22px;
}
.topbar .promos.rot-always .promo {
  position: absolute; top: 0; left: 0; right: 0; height: 22px; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.topbar .promos.rot-always .promo.is-current {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .topbar .promos.is-rotator .promo { transition: none; transform: none; }
}

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--line);
}
.header .bar { display: flex; align-items: center; gap: 26px; min-height: 84px; }
/* Logo e azioni prendono la stessa quota di spazio ai due lati (flex: 1 1 0):
   così la barra di ricerca resta centrata nel bar anche se il gruppo
   account/carrello è più largo del logo. Quando lo spazio non basta è la
   ricerca a stringersi, non i due lati. */
.logo { display: flex; align-items: center; flex: 1 1 0; min-width: max-content; }
.logo img { height: 46px; width: auto; }
.logo .logo-img { display: block; height: 46px; width: 152px; background: url("../media/sv/logo-carsystem.png") left center / contain no-repeat; }
.logo .cs-only { display: none; }

/* search "trova ricambio" */
.findbar {
  flex: 0 1 640px; display: flex; align-items: stretch; max-width: 640px; height: 54px;
  border: 1.5px solid var(--line-2); border-radius: 10px; overflow: hidden;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.findbar:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(12,12,13,.06); }
/* I campi sono trasparenti, il bianco lo mette la barra. Con il fondo bianco
   sui campi, agli angoli arrotondati il rettangolo del campo si sovrapponeva
   alla cornice e il bordo spariva: a sinistra, in alto e in basso, restava una
   lineetta bianca. */
.findbar select, .findbar input {
  border: 0; outline: 0; font-family: var(--font); font-size: 15px; color: var(--ink);
  padding: 0 18px; background: transparent;
}
.findbar select { border-right: 1px solid var(--line); color: var(--gray); font-weight: 600; max-width: 190px; }
.findbar input { flex: 1; min-width: 60px; }
.findbar button {
  background: var(--red); color: #fff; border: 0; padding: 0 24px; font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px; margin: 6px; border-radius: 7px;
}
.findbar button:hover { background: var(--red-dark); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 0; justify-content: flex-end; }
.iconbtn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; color: var(--ink); font-size: 11px; font-weight: 600;
  padding: 8px 10px; border-radius: var(--radius);
}
.iconbtn:hover { background: var(--soft); }
.iconbtn .ct {
  position: absolute; transform: translate(13px,-9px);
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center;
}
.cartwrap { position: relative; }

/* nav row */
.nav { border-top: 1px solid var(--line); background: #fff; }
.nav .wrap { display: flex; align-items: center; gap: 4px; min-height: 50px; position: relative; }
.navitem { display: flex; align-items: center; }

/* categories mega-menu */
.has-mega .mega {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-top: 0; box-shadow: var(--shadow-hover);
  padding: 22px; display: none; z-index: 55;
}
.has-mega:hover .mega { display: block; }
.mega-head { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nav .mega-cat { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 6px; transition: .15s; text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--ink); }
.nav .mega-cat:hover { border-color: var(--ink); background: var(--soft); color: var(--ink); }
.mega-cat .mic { display: block; width: 30px; height: 30px; flex: 0 0 auto; color: var(--red); }
.mega-cat .mtxt { display: flex !important; flex-direction: column !important; align-items: flex-start; min-width: 0; line-height: 1.3; }
.mega-cat .mtxt b { display: block; width: 100%; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.mega-cat .mtxt span { display: block; width: 100%; font-size: 12px; color: var(--gray-3); font-weight: 500; }
.nav a {
  font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); padding: 14px 16px; position: relative;
}
.nav a:hover { color: var(--red); }
.nav a.active { color: var(--red); }
.nav a.active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px;
  background: var(--red); clip-path: polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.nav .nav-spacer { flex: 1; }
.nav .nav-promo {
  display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 800;
  font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
}
.burger { display: none; }

/* mobile menu drawer */
.drawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; opacity: 0; pointer-events: none; transition: .2s; }
.drawer-back.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: #fff; z-index: 71;
  transform: translateX(100%); transition: transform .24s ease; display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.2);
}
.drawer.open { transform: none; }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer nav { padding: 8px 0; }
.drawer nav a { display: block; padding: 15px 22px; font-weight: 700; text-transform: uppercase; font-size: 15px; border-bottom: 1px solid var(--soft); }
.drawer nav a:hover { background: var(--soft); color: var(--red); }
.drawer .dfoot { margin-top: auto; padding: 18px 20px; display: grid; gap: 10px; }

/* ---------- mini carrello (entra da destra) ----------
   Stessa meccanica del menu mobile: un velo e un pannello che scorre. Due
   differenze:
   - z-index sopra al menu (72/73): se il menu è aperto e da lì si aggiunge
     qualcosa, il carrello deve comparire davanti;
   - stato chiuso con `visibility: hidden` e non `display: none`, altrimenti
     l'ingresso non si può animare e il pannello resterebbe raggiungibile col
     tabulatore mentre è fuori schermo.
   Il contenuto (`.widget_shopping_cart_content`) lo riscrive WooCommerce da
   solo dopo ogni aggiunta o rimozione: è il selettore dei suoi "fragment". */
.cs-minicart-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 72;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.cs-minicart-back.open { opacity: 1; pointer-events: auto; }
.cs-minicart {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 400px);
  background: #fff; z-index: 73; display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .24s ease, visibility 0s linear .24s;
  box-shadow: -20px 0 60px rgba(0,0,0,.2);
}
.cs-minicart.open { transform: none; visibility: visible; transition-delay: 0s; }
.cs-minicart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.cs-minicart-head b { font-size: 17px; font-weight: 800; }
.cs-minicart-head .n { color: var(--gray-2); font-weight: 600; font-size: 14px; margin-left: 6px; }
.cs-minicart .widget_shopping_cart_content {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}

/* elenco righe: scorre da solo, totale e bottoni restano sempre in vista */
.cs-minicart .woocommerce-mini-cart {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto;
}
.cs-minicart .woocommerce-mini-cart-item {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 26px;
  gap: 12px; align-items: start;
  padding: 14px 20px; border-bottom: 1px solid var(--soft); margin: 0;
}
.cs-minicart .woocommerce-mini-cart-item::before,
.cs-minicart .woocommerce-mini-cart-item::after { content: none; }
.cs-minicart .mc-ph {
  width: 62px; height: 62px; border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; background: var(--soft); display: grid; place-items: center;
}
.cs-minicart .mc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-minicart .mc-nome {
  font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cs-minicart .mc-nome:hover { color: var(--red); }
.cs-minicart .mc-cod { font-size: 12px; color: var(--gray-2); margin-top: 3px; }
.cs-minicart .mc-qta { font-size: 13.5px; color: var(--gray); margin-top: 6px; }
.cs-minicart .mc-qta .amount { font-weight: 800; color: var(--ink); }
.cs-minicart .remove_from_cart_button {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--soft); color: var(--gray-2);
  font-size: 17px; line-height: 1; text-decoration: none;
}
.cs-minicart .remove_from_cart_button:hover { background: var(--red-tint, #fdeaea); color: var(--red); }

/* piede: totale + due bottoni, sempre visibili */
.cs-minicart-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 16px 20px 20px; }
.cs-minicart-tot { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.cs-minicart-tot span { font-size: 14px; color: var(--gray); }
.cs-minicart-tot .amount, .cs-minicart-tot .woocommerce-Price-amount { font-size: 21px; font-weight: 900; color: var(--ink); }
/* Il simbolo di valuta è un <span> a sé dentro l'importo: senza questo resta
   al corpo del testo intorno e il totale esce come "99,00 €" con la € piccola. */
.cs-minicart-tot .woocommerce-Price-currencySymbol { font-size: inherit; font-weight: inherit; }
.cs-minicart-nota { font-size: 12.5px; color: var(--gray-2); margin: 0 0 14px; }
.cs-minicart-azioni { display: grid; gap: 10px; }
.cs-minicart-azioni .btn { width: 100%; white-space: normal; }

/* carrello vuoto */
.cs-minicart-vuoto { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 40px 24px; text-align: center; }
.cs-minicart-vuoto svg { color: var(--gray-3); width: 40px; height: 40px; }
.cs-minicart-vuoto p { color: var(--gray); font-size: 15px; margin: 0; }

/* pallino del contatore nell'header: c'è sempre, così WooCommerce può
   riscriverlo dopo un'aggiunta; a zero non si vede. */
.cartwrap .cs-cart-n.vuoto { display: none; }

/* ---------- hero / trova ricambio ---------- */
.hero {
  position: relative; background: var(--dark); color: #fff; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,.05) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.05) 95%);
  background-size: 30px 30px;
  opacity: .6;
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; top: 0; right: -10%; bottom: 0; width: 55%;
  background: linear-gradient(120deg, transparent 0 40%, rgba(204,18,22,.16) 40%, rgba(204,18,22,.06) 70%, transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; padding: 64px 28px 64px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 900; letter-spacing: -.03em; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero .lede { color: #c9c9d0; font-size: 18px; max-width: 46ch; margin-top: 18px; }
.hero .trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; }
.hero .trust .ti { display: flex; flex-direction: column; }
.hero .trust .ti b { font-size: 22px; font-weight: 900; }
.hero .trust .ti span { font-size: 12.5px; color: var(--gray-3); text-transform: uppercase; letter-spacing: .06em; }

/* search panel */
.finder {
  background: #fff; color: var(--ink); padding: 26px; border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  position: relative;
}
.finder .tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.finder .tab {
  flex: 1; text-align: center; padding: 11px; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em;
  background: var(--soft); color: var(--gray); border: 0;
  clip-path: polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);
}
.finder .tab.active { background: var(--ink); color: #fff; }
.finder label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); margin: 0 0 7px; }
.finder .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.finder .field { display: flex; flex-direction: column; }
.finder select, .finder input {
  font-family: var(--font); font-size: 15px; padding: 12px 13px; border: 1.5px solid var(--line-2);
  border-radius: var(--radius); outline: 0; color: var(--ink); background: #fff;
}
.finder select:focus, .finder input:focus { border-color: var(--ink); }
.finder .or { text-align: center; font-size: 12.5px; color: var(--gray-3); margin: 4px 0 14px; font-weight: 600; }

/* ---------- section scaffolding ---------- */
section { padding: 72px 0; }
section.soft { background: var(--soft); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; }
.sec-head p { color: var(--gray); margin-top: 10px; max-width: 52ch; }
.sec-link { font-weight: 700; color: var(--red); font-size: 14.5px; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.sec-link:hover { gap: 11px; }

/* ---------- macro-aree cards ---------- */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.area {
  position: relative; background: #fff; border: 1px solid var(--line); padding: 30px;
  border-radius: 6px; overflow: hidden; transition: .18s; display: block;
}
.area:hover { border-color: var(--ink); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.area .ic { width: 52px; height: 52px; color: var(--ink); margin-bottom: 18px; }
.area:hover .ic { color: var(--red); }
.area h3 { font-size: 21px; }
.area p { color: var(--gray); font-size: 14.5px; margin-top: 9px; }
.area .go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--red); }
.area .cnr { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 44px 44px 0; border-color: transparent var(--soft) transparent transparent; transition: .18s; }
.area:hover .cnr { border-color: transparent var(--red-tint) transparent transparent; }

/* ---------- product grid / card ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; transition: .18s; cursor: pointer; position: relative;
}
.pcard:hover { border-color: var(--line-2); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.pcard .ph { position: relative; aspect-ratio: 4/3; }
.pcard .badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pcard .body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.pcard .cat { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-3); }
.pcard h3 { font-size: 15.5px; font-weight: 700; margin: 7px 0 4px; line-height: 1.25; letter-spacing: -.01em; }
.pcard .code { font-size: 12.5px; color: var(--gray-2); font-family: 'Inter', monospace; }
.pcard .foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard .price { font-size: 20px; font-weight: 900; color: var(--ink); }
.pcard .price s { color: var(--gray-3); font-weight: 600; font-size: 13px; margin-right: 6px; }
.pcard .req { font-size: 13px; font-weight: 700; color: var(--gray); }

/* image placeholder */
.imgph {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, #eceef1 0 11px, #f4f5f7 11px 22px);
  display: grid; place-items: center; color: #aeb0b6;
}
.imgph span { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: .02em; text-align: center; padding: 6px 10px; white-space: pre-line; }
.imgph.dark { background: repeating-linear-gradient(135deg, #1c1c20 0 11px, #232328 11px 22px); color: #5a5a62; }

/* ---------- repair lead band ---------- */
.leadband { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
/* La banda diagonale è decorazione e basta: senza `pointer-events: none`
   copre il 46% destro della sezione — cioè esattamente la colonna dei
   pulsanti — e li rende tutti non cliccabili. È l'ultimo figlio della
   sezione, quindi si disegna sopra al contenuto anche senza z-index. */
.leadband::after {
  content:""; position:absolute; inset:0 0 0 auto; width: 46%;
  background: linear-gradient(110deg, transparent 0 30%, rgba(204,18,22,.18) 30% 33%, transparent 33%);
  pointer-events: none;
}
/* z-index: la banda diagonale è texture del fondo, non deve passare sopra le
   card e i pulsanti — con la sola `position: relative` ci passava, perché il
   pseudo-elemento viene dopo nel documento. */
.leadband .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
/* Il titolo qui è una frase intera, non tre parole: a 40px occupava cinque
   righe e schiacciava tutto il resto della banda. */
.leadband h2 { font-size: clamp(26px,2.7vw,34px); font-weight: 900; line-height: 1.15; }
.leadband h2 em { color: #ff5a5e; font-style: normal; }
.leadband p { color: #c9c9d0; margin-top: 14px; max-width: 46ch; }
.leadband ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.leadband li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: #e2e2e6; }
.leadband li svg { flex: 0 0 auto; color: #ff5a5e; margin-top: 3px; }
.leadcta { display: flex; flex-direction: column; gap: 12px; }
.leadcard { background: var(--dark-2); border: 1px solid #2c2c32; border-radius: 6px; padding: 22px; }
.leadcard h4 { font-size: 18px; }
.leadcard .row { display: grid; gap: 10px; margin-top: 16px; }

/* ---------- reviews ---------- */
.revhead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.gbadge { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 18px; box-shadow: var(--shadow); }
.gbadge .gscore { font-size: 30px; font-weight: 900; line-height: 1; }
.stars { display: inline-flex; gap: 2px; color: #f5a623; }
.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rev { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: flex; flex-direction: column; }
.rev .rt { font-size: 14.5px; color: #2a2a2e; line-height: 1.55; }
.rev .ru { margin-top: 16px; display: flex; align-items: center; gap: 11px; }
.rev .ru > div:last-child { flex: 1; min-width: 0; }
.rev .av { width: 38px; height: 38px; border-radius: 999px; background: var(--soft-2); display: grid; place-items: center; font-weight: 800; color: var(--gray); font-size: 14px; overflow: hidden; }
.rev .ru b { font-size: 14px; display: block; }
.rev .ru span { font-size: 12px; color: var(--gray-3); }

/* ---------- brand strip ---------- */
.brandstrip { padding: 52px 0; border-top: 1px solid var(--line); }
.brandstrip-label { text-align: center; color: var(--gray); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 26px; }
.brands { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.brandchip { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: .15s; }
.brandchip:hover { border-color: var(--ink); }

/* Recensioni: la sezione ha il fondo grigio, le card devono staccarsi in
   bianco. Il colore della card è una variabile del plugin Review Sync, quindi
   basta ridefinirla qui invece di rincorrere le sue regole. */
.cs-reviews { --rvs-card-bg: #fff; }
.cs-reviews .rvs-card { border: 1px solid var(--line); box-shadow: var(--shadow); }
.cs-reviews .rvs-header-rating { border-color: var(--line); }

/* nastro delle marche: scorre all'infinito, si ferma quando ci passi sopra */
.brandstrip-nastro {
  display: flex; gap: 14px; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brandstrip-nastro .brands {
  flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start;
  animation: cs-nastro 46s linear infinite; will-change: transform;
}
.brandstrip-nastro:hover .brands { animation-play-state: paused; }
@keyframes cs-nastro {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - 14px)); }
}
@media (prefers-reduced-motion: reduce) {
  .brandstrip-nastro { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .brandstrip-nastro .brands { animation: none; }
}

/* ---------- ABS landing blocks ---------- */
.absbrands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.absbrand { display: flex; align-items: center; gap: 10px; padding: 15px 18px; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; font-weight: 700; font-size: 15px; }
.absbrand svg { color: var(--red); flex: 0 0 auto; }
.absflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.absflow-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 26px; position: relative; }
/* Il numero del passo: a 13px era un'etichettina rossa che si leggeva solo
   cercandola, e sono tre passi — è la scaletta di cosa succede al pezzo dopo
   che l'hanno spedito, la prima cosa da vedere entrando nella scheda. A 34px
   fa da titolo alla card, con il testo che gli sta sotto. */
.absflow-card .n {
  display: block; font-size: 34px; font-weight: 900; line-height: 1;
  color: var(--red); letter-spacing: -.02em; margin-bottom: 2px;
}
.absflow-card b { display: block; font-size: 18px; margin: 9px 0 8px; }
.absflow-card p { color: var(--gray); font-size: 14.5px; }

/* landing two-column rows (responsive) */
.l2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.l2.center { align-items: center; }

/* ---------- footer ---------- */
.footer { background: var(--dark); color: #b7b7be; margin-top: auto; }
.footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding: 56px 0 40px; }
.footer h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 16px; font-weight: 800; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
.footer a:hover { color: #fff; }

/* Contatti: icona e testo in due colonne.
   Con l'icona dentro il testo (vertical-align) la seconda riga di un indirizzo
   lungo finiva sotto l'icona, e la colonna sembrava sfasata. Qui l'icona ha la
   sua colonna e il testo la propria: va a capo restando allineato. */
.footer ul.contatti { color: #b7b7be; }
.footer ul.contatti li { display: flex; align-items: flex-start; gap: 8px; }
.footer ul.contatti li > svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; color: var(--red); }
.footer ul.contatti li > span { min-width: 0; }
.footer .blurb { font-size: 14px; line-height: 1.6; max-width: 34ch; }
.footer .socials { display: flex; gap: 10px; margin-top: 16px; }
.footer .socials a { width: 38px; height: 38px; border: 1px solid #34343a; border-radius: 6px; display: grid; place-items: center; color: #cfcfd6; }
.footer .socials a:hover { border-color: var(--red); color: #fff; background: var(--red); }
/* ---------- pagine di riparazione: impaginato unico (era quello dell'ABS) ----
   Le regole della vecchia pagina riparazione — .riphead, .ripblocchi, .ripmarche,
   .ripdifetti, .ripcome, .ripprocesso, .rippermuta, .riplogistica, .ripreviews —
   sono state tolte insieme al template che le usava: adesso tutte e dodici le
   pagine passano da template-parts/landing-riparazione.php, che usa .hero,
   .absbrands, .absflow e .leadband. */

.riphero-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* Al posto della foto del pezzo, nell'hero, c'è la sua icona. Il PNG è di un
   colore solo su trasparente: qui il fondo è scuro, quindi il filtro la ribalta
   in bianco senza bisogno di un secondo file. */
.riphero-icona { display: grid; place-items: center; aspect-ratio: 4/3; }
.riphero-icona img {
  display: block; max-width: 94%; max-height: 100%; width: auto; height: auto;
  filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
  .riphero-icona { aspect-ratio: 16/9; }
  .riphero-icona img { max-width: 62%; }
}

/* ---------- perché Car System: i motivi, uno per riquadro ----------
   Sono otto argomenti lunghi: in elenco puntato diventano un muro, in griglia
   si leggono a colpo d'occhio e si può fermarsi su quello che interessa. */
.whycs { padding: 68px 0; }
.whycs h2 { font-size: clamp(26px,3vw,36px); font-weight: 900; margin: 12px 0 28px; }
.whycs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.whycs-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 22px 22px 24px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-content: start;
}
.whycs-card svg { width: 20px; height: 20px; color: var(--red); grid-row: 1; margin-top: 2px; }
.whycs-card b { font-size: 16px; font-weight: 800; line-height: 1.3; }
.whycs-card p { grid-column: 2; color: var(--gray); font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
@media (max-width: 1080px) { .whycs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .whycs-grid { grid-template-columns: 1fr; } .whycs { padding: 48px 0; } }

/* ---------- ritiro con corriere: riquadro e finestra ----------
   Il riquadro è giallo DHL (il colore arriva da --giallo, impostato inline da
   cs_ritiro_box() con il valore in Impostazioni sito). Il logo ha già il suo
   fondo giallo dentro il PNG, quindi ci si appoggia sopra senza stacchi. */
.cs-ritiro-box {
  background: var(--giallo, #FECC01); border: 0; border-radius: 8px;
  padding: 18px 20px 20px; display: grid; gap: 12px;
  box-shadow: 0 1px 2px rgba(12,12,13,.10), 0 10px 24px rgba(12,12,13,.10);
}
.cs-ritiro-logo { display: block; width: 132px; height: auto; margin: -4px 0 0 -6px; }
.cs-ritiro-testa b { display: block; font-size: 16px; font-weight: 900; color: #1a1508; letter-spacing: -.01em; }
/* Testo scuro su giallo: il grigio del resto del sito qui non si leggerebbe. */
.cs-ritiro-testa p { color: #4a3f14; font-size: 14px; line-height: 1.5; margin-top: 4px; }
.cs-ritiro-box .btn.dark { background: #17170f; margin-top: 2px; }
.cs-ritiro-box .btn.dark:hover { background: #000; }

/* Dentro la banda scura della home il giallo è già abbastanza forte: basta
   staccarlo dal fondo con un filo di ombra in più. */
.cs-ritiro-box.su-scuro {
  margin-top: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 16px 34px rgba(0,0,0,.28);
}

.cs-modale { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cs-modale[hidden] { display: none; }
.cs-modale-fondo { position: absolute; inset: 0; background: rgba(12,12,13,.55); }
.cs-modale-box {
  position: relative; background: #fff; border-radius: 8px;
  width: min(680px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.cs-modale-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.cs-modale-testa h3 { font-size: 20px; font-weight: 800; }
.cs-modale-corpo { padding: 22px 24px 26px; overflow-y: auto; }
/* La riga "solo in Italia" in cima al modulo del ritiro: si deve leggere prima
   di cominciare a compilare, non dopo. Barra a sinistra come gli avvisi di
   WooCommerce, non un riquadro pieno — è un'informazione, non un errore. */
.cs-ritiro-nota {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 10px 14px;
  background: var(--soft); border-left: 3px solid var(--ink);
  color: var(--gray); font-size: 14px; line-height: 1.35;
}
.cs-ritiro-nota svg { flex: 0 0 auto; color: var(--ink); }
@media (max-width: 560px) {
  .cs-modale { padding: 0; align-items: flex-end; }
  .cs-modale-box { max-height: 92vh; border-radius: 12px 12px 0 0; }
}

/* pagamenti accettati */
.footer .pagamenti {
  border-top: 1px solid #2a2a30; padding: 18px 0 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.footer .pag-titolo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #9a9aa0;
}
.footer .pag-titolo svg { width: 16px; height: 16px; color: var(--red); }
.footer .pag-loghi { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.footer .pag-loghi li { display: grid; place-items: center; width: 46px; height: 30px; background: #fff; border: 1px solid #dcdce1; border-radius: 5px; overflow: hidden; }
.footer .pag-loghi svg { display: block; border-radius: 5px; }
.footer .pag-loghi img { display: block; }
.pag-loghi li.pag-card img { width: 100%; height: 100%; object-fit: cover; }
.pag-loghi li.pag-icona img { width: auto; height: 20px; max-width: 34px; object-fit: contain; }
@media (max-width: 560px) {
  .footer .pagamenti { gap: 12px; }
  .footer .pag-loghi { gap: 6px; }
}

.footer .legal { border-top: 1px solid #2a2a30; padding: 20px 0; font-size: 12.5px; color: #7b7b83; line-height: 1.9; }
/* I link legali stanno sulla riga sotto, separati da un <br>: sono la stessa
   informazione dei riferimenti aziendali, non un blocco a parte. Su mobile
   vanno a capo fra loro senza spezzare una voce a metà. */
.footer .legal .legal-links { display: inline-block; }
.footer .legal .legal-links a { white-space: nowrap; }

/* CS wordmark for dark areas */
.cs-mark { display: inline-flex; align-items: center; font-weight: 900; letter-spacing: -.04em; font-size: 30px; }
.cs-mark .c { color: #fff; } .cs-mark .s { color: var(--red); }
.cs-word { font-weight: 900; letter-spacing: -.02em; font-size: 22px; }
.cs-word .car { color: #fff; } .cs-word .system { color: var(--red); }

/* ---------- whatsapp fab ---------- */
.wafab {
  position: fixed; right: 22px; bottom: 22px; z-index: 65;
  width: 58px; height: 58px; border-radius: 999px; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37,211,102,.45);
  border: 0; transition: .16s;
}
.wafab:hover { transform: scale(1.06); }
/* La misura dell'icona è scritta anche qui, non solo negli attributi dell'SVG:
   se un ottimizzatore toglie le regole del bottone, un SVG senza misure viene
   disegnato dal browser a 300×150 — la "bolla gigante". */
.wafab svg { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.wafab::after {
  /* Il testo arriva dall'attributo, non dal CSS: qui dentro non si traduce. */
  content: attr(data-tip); position: absolute; right: 70px; white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 6px;
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: .16s;
}
.wafab:hover::after { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .wafab { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .wafab svg { width: 24px; height: 24px; }
  .wafab::after { content: none; }
}

/* ---------- badge reCAPTCHA ----------
   Nascosto: sta in basso a destra e finisce sopra alla bolla WhatsApp.
   ⚠️ Google lo consente **a condizione** che l'attribuzione compaia nel modulo:
   ci pensa cs_recaptcha_attribuzione() in functions.php. Se un domani si toglie
   quella nota, va rimessa anche questa regola, altrimenti si sta fuori dai
   termini d'uso di reCAPTCHA. */
.grecaptcha-badge { display: none !important; }
.cs-recaptcha-nota {
  margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--gray-3);
}
.cs-recaptcha-nota a { color: var(--gray-2); text-decoration: underline; }
.cs-recaptcha-nota a:hover { color: var(--red); }

/* 🔴 La "bolla deformata": non è questo bottone, è un SECONDO bottone.
   Il contenitore Google Tag Manager GTM-PBZTD83 porta ancora un tag HTML del
   sito vecchio che inietta un <a> con dentro
   www.carsystemfp.com/…/2019/08/whatsapp-96.png a 55px e border-radius 15px —
   un quadrato con gli angoli stondati, appoggiato sopra al nostro tondo. Non
   sta nell'HTML: lo scrive il JS di GTM, e per questo ricompare ogni volta che
   si svuota la cache e si guarda la pagina dopo il primo tocco.
   Il rimedio vero è togliere quel tag da GTM (account del cliente): quando
   sarà fatto, queste due righe si possono cancellare. Nel frattempo evitano
   che al lancio si vedano due bolle — e una con un'immagine presa da un
   dominio che sta per cambiare padrone. */
img[src*="whatsapp-96"] { display: none !important; }
a:has(> img[src*="whatsapp-96"]) { display: none !important; }

/* ---------- category page ---------- */
.catlayout { display: grid; grid-template-columns: 256px 1fr; gap: 36px; align-items: start; }
.filters { position: sticky; top: 150px; }
.filters .fg { border-bottom: 1px solid var(--line); padding: 18px 0; }
.filters .fg:first-child { padding-top: 0; }
.filters h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); margin-bottom: 12px; }
.filters label { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 5px 0; color: var(--ink); cursor: pointer; }
.filters label:hover { color: var(--red); }
.filters input[type=checkbox] { accent-color: var(--red); width: 16px; height: 16px; }
.catbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.catbar .res { color: var(--gray); font-size: 14px; }
.catbar select { padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius); font-family: var(--font); font-size: 14px; }
.crumbs { font-size: 13px; color: var(--gray-2); padding: 18px 0; }
.crumbs a:hover { color: var(--red); }
.crumbs .sep { margin: 0 8px; color: var(--line-2); }

/* ---------- product detail ---------- */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; padding-top: 14px; }
.pdp .gallery .main { aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pdp .gallery .thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 10px; }
.pdp .gallery .thumbs .imgph { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.pdp .gallery .thumbs .imgph.sel { border-color: var(--red); }
.pdp h1 { font-size: clamp(24px,2.6vw,32px); font-weight: 900; }
.pdp .price-row { display: flex; align-items: baseline; gap: 14px; margin: 18px 0; }
.pdp .price-row .p { font-size: 34px; font-weight: 900; }
.pdp .price-row .vat { color: var(--gray-2); font-size: 13px; }
.pdp .meta { display: grid; gap: 9px; margin: 18px 0; }
.pdp .meta div { display: flex; gap: 10px; font-size: 14.5px; }
.pdp .meta b { min-width: 130px; color: var(--gray); font-weight: 600; }
.pdp .buybox { background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 22px; margin: 22px 0; }
.pdp .qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.pdp .qty button { width: 40px; height: 44px; background: #fff; border: 0; font-size: 18px; color: var(--ink); }
.pdp .qty button:hover { background: var(--soft-2); }
.pdp .qty input { width: 48px; height: 44px; border: 0; text-align: center; font-size: 15px; font-family: var(--font); }
.pdp .buyrow { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pdp .stockline { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #138a4e; }
.pdp .stockline.req { color: var(--gray); }

/* form */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formgrid .full { grid-column: 1 / -1; }
.field-l { display: block; font-size: 12.5px; font-weight: 700; color: var(--gray); margin-bottom: 6px; }
.inp { width: 100%; font-family: var(--font); font-size: 15px; padding: 12px 13px; border: 1.5px solid var(--line-2); border-radius: var(--radius); outline: 0; background: #fff; }
.inp:focus { border-color: var(--ink); }
textarea.inp { resize: vertical; min-height: 110px; }
.consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--gray); }
.consent input { accent-color: var(--red); margin-top: 3px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 6px; font-weight: 600; font-size: 14.5px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: .25s; z-index: 90;
  display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%); }

/* view container (no entry animation — keep content always visible) */
.view { }

/* ============================================================
   ICON TILES (brand 3-squares motif) + new pages
   ============================================================ */
.icontile { display: inline-grid; place-items: center; background: var(--gray); color: #fff; border-radius: 9px; flex: 0 0 auto; }
.icontile svg { width: 58%; height: 58%; }
/* Icona caricata da ACF: il PNG ha già il suo margine interno, qui basta contenerlo. */
.icontile img { width: 78%; height: 78%; object-fit: contain; display: block; }
.icontile.red { background: var(--red); }
.icontile.dark { background: var(--ink); }
.icontile.gray { background: var(--gray); }
.icontile.cut-tr { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }

/* --- pagina senza vie d'uscita: checkout (inc/checkout.php) e landing
   pubblicitarie (inc/adv.php). Quali pezzi spariscono lo decidono header.php e
   footer.php; qui c'è solo come si ricompone quello che resta. Stava in
   woocommerce.css, ma quel foglio si carica solo sulle pagine WooCommerce. */
.cs-focus .header .bar { min-height: 68px; }
.cs-focus .logo { flex: 0 0 auto; }
.cs-focus .footer .top { display: block; padding: 40px 0 28px; }
.cs-focus .footer .blurb { max-width: 52ch; }

/* Landing pubblicitaria: le recensioni restano — convincono — ma i rimandi a
   Google che ogni recensione si porta dietro sono trenta uscite in fondo alla
   pagina. Il testo e l'attribuzione "Recensioni Google" restano al loro posto:
   qui spariscono solo i collegamenti. Sono di un plugin, quindi si tolgono di
   mezzo dalla CSS e non toccando il suo markup. */
.cs-adv .rvs-source,
.cs-adv .rvs-header-meta a { display: none; }

.tiletrio { display: flex; gap: 18px; justify-content: flex-end; }
.tiletrio .icontile { box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.tiletrio .icontile:nth-child(2) { transform: translateY(26px); }
.tiletrio .icontile:nth-child(3) { transform: translateY(-12px); }

/* service grid (riparazioni hub) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; transition: .18s; display: flex; flex-direction: column; }
.svc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.svc-card .ph { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--soft); }
.svc-card .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Riquadro con l'icona invece della foto: il pittogramma va contenuto, non
   ritagliato, e il fondo è bianco come il resto della card — il grigio serviva
   a reggere la foto mentre caricava, dietro un'icona è solo una macchia. */
.svc-card .ph.icona { background: #fff; }
.svc-card .ph.icona > img { object-fit: contain; padding: 16px; }
.svc-tile { position: absolute; top: 12px; left: 12px; z-index: 2; }
.svc-card .body { padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-card h3 { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.svc-card .go { color: var(--red); flex: 0 0 auto; display: inline-flex; transition: .15s; }
.svc-card:hover .go { transform: translateX(3px); }

/* Due per riga, foto a sinistra e testo a destra: la card deve far capire se è
   il pezzo giusto, e il solo nome del componente non basta. */
.svc-grid.due { grid-template-columns: repeat(2, 1fr); }
.svc-card.con-testo { flex-direction: row; align-items: stretch; }
.svc-card.con-testo .ph { flex: 0 0 42%; aspect-ratio: auto; }
.svc-card.con-testo .body { flex: 1; padding: 20px 22px; align-items: center; }
.svc-card.con-testo h3 { font-size: 18px; }
.svc-card .svc-txt p {
  color: var(--gray); font-size: 13.5px; line-height: 1.5; margin-top: 7px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 820px) {
  .svc-grid.due { grid-template-columns: 1fr; }
  .svc-card.con-testo { flex-direction: column; }
  .svc-card.con-testo .ph { flex: none; aspect-ratio: 16/10; }
  .svc-card.con-testo .body { padding: 16px 18px; }
}

/* contatti */
.info-list { display: grid; gap: 16px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; }
.info-row .ii { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; color: var(--red); }
.info-row b { font-size: 15px; } .info-row p { color: var(--gray); font-size: 14px; }
.map-ph { height: 240px; border-radius: 8px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg,#eceef1 0 14px,#f4f5f7 14px 28px); display: grid; place-items: center; color: #9a9aa0; }
.map-ph span { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, monospace; font-size: 13px; }

/* mappa della sede (pagina Contatti) */
.cs-map { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); line-height: 0; }
/* 420px: sotto una certa altezza Google non disegna il riquadro con nome,
   indirizzo e recensioni dell'attività e scrive "Informazioni sul luogo non
   caricate". Quel riquadro è il motivo per cui la mappa punta al `cid` della
   scheda Google invece che alle coordinate (vedi cs_map_src in functions.php),
   quindi lo spazio glielo si dà. */
.cs-map iframe { width: 100%; height: 420px; border: 0; display: block; }
/* ---------- come raggiungerci: le foto della sede (Contatti) ---------- */
/* Una sotto l'altra, non affiancate (26 agosto 2026): su un'insegna e su un
   cancello i dettagli contano — il numero civico, dove sta la rampa — e a mezza
   colonna non si leggevano. Lo spazio arriva dalla mappa, passata a destra.
   L'altezza è fissa e uguale per tutte perché gli originali hanno proporzioni
   diverse (una orizzontale, una verticale) e impilati a proporzioni naturali
   il secondo diventava una colonna lunghissima. */
.cs-sede-foto { margin-top: 26px; }
.cs-sede-foto h3 { font-size: 18px; margin-bottom: 12px; }
.cs-sede-foto figure { margin: 0 0 18px; }
.cs-sede-foto figure:last-child { margin-bottom: 0; }
.cs-sede-foto img {
  width: 100%; height: 330px; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--line);
}
.cs-sede-foto figcaption {
  margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--gray);
}
@media (max-width: 820px) { .cs-sede-foto img { height: 260px; } }

.map-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 14px; font-weight: 600; color: var(--gray);
}
.map-link:hover { color: var(--red); }
/* su telefono la scheda dell'attività occupa quasi tutta la larghezza: 360px
   sono il minimo perché ci stia insieme alla mappa (prima erano 260) */
@media (max-width: 820px) { .cs-map iframe { height: 360px; } }

/* sconto operatori (meccanici e ricambisti) */
.cs-b2b-price { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-b2b-price del { color: var(--gray-3); font-weight: 500; }
.cs-b2b-price ins { text-decoration: none; }
.cs-b2b-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); background: rgba(204, 18, 22, .09);
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.cs-b2b-box {
  border-left: 4px solid var(--red); background: var(--soft);
  padding: 16px 18px; border-radius: 0 6px 6px 0; margin-bottom: 22px;
}
.cs-b2b-box b { display: block; margin-bottom: 4px; }
.cs-b2b-box p { color: var(--gray); font-size: 14.5px; margin: 0; }

/* ---------- riga "in alternativa" sotto i moduli ----------
   Sostituisce i due pulsanti a tutta larghezza (WhatsApp e Chiama) che stavano
   sotto l'invio: erano tre inviti dello stesso peso, uno sopra l'altro. Qui
   l'alternativa c'è ma non compete con l'azione principale. */
.cs-alt-contatto {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--gray); text-align: center; line-height: 1.5;
}
.cs-alt-contatto a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cs-alt-contatto a:hover { color: var(--red); }

/* ---------- sezione modulo a colonna unica ----------
   Intestazione sopra, centrata, e il modulo a tutta la larghezza utile. Si usa
   dove la colonna di fianco avrebbe avuto troppo poco da dire. */
.cs-form-largo { max-width: 760px; margin: 0 auto; }
.cs-form-largo-testa { text-align: center; margin-bottom: 26px; }
.cs-form-largo-testa p { max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ---------- "Come funziona": i passi 1-2-3-4 ----------
   Il numero di colonne arriva dal template come variabile `--passi`, non come
   stile inline sull'elemento: prima la griglia era scritta dentro l'attributo
   `style`, e uno stile inline batte qualunque media query — su telefono i
   quattro passi restavano affiancati e schiacciati. Qui invece le colonne si
   riducono ai breakpoint del design system. Usato da Riparazioni, Servizi,
   Richiedi preventivo e Riparazione ABS. */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(var(--passi, 4), minmax(0, 1fr)); }
/* Dentro una colonna a metà pagina i passi non ci stanno in riga: quattro
   colonne in 480px danno quattro strisce di testo strette, con i titoli a capo
   dopo una parola. Lì si impilano — come già fanno su telefono — e ognuno si
   prende la sua riga. Vale per la pagina "Richiedi preventivo" e per ogni altro
   `.steps` che finisca in una colonna del layout a due. */
.l2 .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* Incolonnati, la lineetta che univa un passo al successivo resta appesa a
   destra del numero senza unire più niente: via, come già su telefono. */
.l2 .steps > div > div > span:last-child:not(:first-child) { display: none; }
@media (max-width: 820px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* La lineetta fra un passo e l'altro ha senso solo in fila: incolonnati
     diventa un trattino sospeso a destra del numero. */
  .steps > div > div > span:last-child:not(:first-child) { display: none; }
}

/* meccanici */
.steps-ol { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps-ol li { counter-increment: s; position: relative; padding-left: 44px; font-size: 15.5px; color: var(--gray); min-height: 30px; display: flex; align-items: center; }
.steps-ol li b { color: var(--ink); }
.steps-ol li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: var(--ink); color: #fff; font-weight: 900; display: grid; place-items: center; clip-path: polygon(7px 0,100% 0,100% 100%,0 100%,0 7px); }
/* Lo stacco dai passi numerati qui sopra: senza, le card dello sconto
   toccano il terzo passo e sembrano parte dell'elenco invece di esserne
   la conclusione. Il valore segue il ritmo della pagina (nota sotto a 18px,
   colonne a 34px). */
.disc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.disc-card { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: #fff; }
.disc-card b { display: block; font-size: 34px; font-weight: 900; color: var(--red); line-height: 1; margin-bottom: 6px; }
.disc-card span { color: var(--gray); font-size: 13.5px; }

/* account */
.acct-layout { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; }
.acct-side { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.acct-tab { padding: 12px 14px; border-radius: 6px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.acct-tab:hover { background: var(--soft); }
.acct-tab.active { background: var(--ink); color: #fff; }
.acct-main { min-height: 300px; }
.empty { border: 1px dashed var(--line-2); border-radius: 8px; padding: 48px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.empty-ic { width: 54px; height: 54px; display: grid; place-items: center; background: var(--soft); border-radius: 999px; color: var(--gray); margin-bottom: 14px; }
.points-card { display: flex; align-items: baseline; gap: 14px; padding: 28px; background: var(--ink); color: #fff; border-radius: 8px; }
.points-card .pts { font-size: 48px; font-weight: 900; color: #ff5a5e; line-height: 1; }

/* legal */
.legal-note { display: flex; align-items: center; gap: 9px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; font-size: 14px; color: var(--gray); margin-bottom: 22px; }
.legal-toc { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 2px; }
.legal-toc li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.legal-toc li b { font-size: 16px; } .legal-toc li p { color: var(--gray); font-size: 14px; margin-top: 4px; }
.footer .legal a { color: #9a9aa0; text-decoration: underline; }
.footer .legal a:hover { color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .footer .top { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 920px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 34px; padding: 48px 24px; }
  .leadband .wrap { grid-template-columns: 1fr; gap: 32px; }
  .pdp { grid-template-columns: 1fr; gap: 30px; }
  .catlayout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .l2 { grid-template-columns: 1fr; gap: 32px; }
  .absflow { grid-template-columns: 1fr; }
  .tiletrio { justify-content: center; }
}
@media (max-width: 820px) {
  .wrap { padding: 0 18px; }
  .nav { display: none; }
  .findbar { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: var(--soft); border-radius: var(--radius); color: var(--ink); margin-left: auto; }
  .header .bar { min-height: 64px; gap: 14px; }
  .logo img, .logo .logo-img { height: 34px; width: 112px; }
  .areas { grid-template-columns: 1fr; }
  .revs { grid-template-columns: 1fr; }
  .topbar .promos { gap: 18px; }
  /* Su mobile la barra promo diventa una riga sola che ruota. */
  .topbar .wrap { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
  .topbar .promos.rot-mobile {
    display: block; position: relative; flex: 1 1 auto; height: 22px;
  }
  .topbar .promos.rot-mobile .promo {
    position: absolute; top: 0; left: 0; right: 0; height: 22px; margin: 0;
    justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(5px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  }
  .topbar .promos.rot-mobile .promo.is-current {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .topbar .promos.rot-always .promo { justify-content: center; }
  .absbrands { grid-template-columns: repeat(2, 1fr); }
  section { padding: 52px 0; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .acct-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .finder .grid2 { grid-template-columns: 1fr; }
  .hero .trust { gap: 16px; }
  .footer .top { grid-template-columns: 1fr; }
  .pcard h3 { font-size: 14px; }
  .pcard .price { font-size: 17px; }
  .absbrands { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .disc-cards { grid-template-columns: 1fr; }
  .tiletrio .icontile { width: 110px !important; height: 110px !important; }
  .mobile-find { display: flex !important; }

  /* Bottoni a tutta larghezza.
     Su telefono due bottoni affiancati diventano due bersagli stretti, con il
     testo che va a capo dentro un pulsante largo mezza riga. Uno sotto l'altro,
     ognuno a tutta larghezza: è il bersaglio più grande possibile e la fila
     resta leggibile anche con le etichette tradotte (più lunghe dell'italiano).
     Il `.btn` è inline-flex, ma come cella di una griglia a una colonna si
     allarga da sé. */
  .cta-row, .riphero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .cta-row > .btn, .riphero-cta > .btn { width: 100%; white-space: normal; }
  /* Bottoni soli dentro un contenitore qualsiasi (offerte, carrello vuoto,
     404): non c'è una fila da impilare, basta allargarli. */
  .btn.full-mobile, .woocommerce .return-to-shop .btn { width: 100%; white-space: normal; }
}
/* mobile inline search under header */
.mobile-find { display: none; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #fff; }
@media (max-width: 820px) { .mobile-find { display: flex; } }
.mobile-find .findbar { display: flex; max-width: none; flex: 1; }
    .pv-modal{position:fixed;inset:0;z-index:1200;background:var(--soft);display:flex;flex-direction:column;animation:pvIn .18s ease}
    @keyframes pvIn{from{opacity:0}to{opacity:1}}
    .pv-modal-bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);z-index:2}
    .pv-close{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:9px 16px;border-radius:6px;cursor:pointer}
    .pv-close:hover{background:var(--soft);border-color:var(--ink)}
    .pv-modal-scroll{flex:1;overflow:auto}

/* ---------- integrazioni WP: card prodotto cliccabile, immagini, finder ---------- */
.pcard .pcard-link { position: absolute; inset: 0; z-index: 1; }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .body { position: relative; z-index: 2; pointer-events: none; }
.pcard .body a, .pcard .body button { pointer-events: auto; }
.finder-panel { display: none; }
.finder-panel.active { display: block; }

/* ---------- corpo pagine legali / contenuto WYSIWYG ---------- */
.legal-body { color: var(--ink); font-size: 15.5px; line-height: 1.7; }
.legal-body h2 { font-size: 22px; font-weight: 800; margin: 30px 0 10px; }
.legal-body h3 { font-size: 18px; font-weight: 700; margin: 22px 0 8px; }
.legal-body p { color: var(--gray); margin: 0 0 14px; }
.legal-body ul, .legal-body ol { color: var(--gray); margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.legal-body a { color: var(--red); font-weight: 600; }
.legal-body strong, .legal-body b { color: var(--ink); }

/* Corpo delle pagine legali: stessa colonna del titolo, larghezza da lettura.
   Prima il blocco stava in un .wrap suo con margin-left:0, quindi partiva 20px
   più a sinistra dell'intestazione. */
.legal-layout { max-width: 820px; margin-top: 28px; }
.legal-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* Documenti incorporati (policy Iubenda): devono stare dentro la colonna. */
.legal-body #iub-pp-container,
.legal-body .iubenda_legal_document,
.legal-body [id^="iubenda"],
.legal-body [class*="iub_"] {
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
}
.legal-body img, .legal-body iframe { max-width: 100%; height: auto; }
.legal-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.legal-body pre { overflow-x: auto; }
.legal-body { overflow-wrap: anywhere; }