/* Foglio unico di ceinturechauffante.fr. L'accento arriva dalla testa di ogni pagina (--accento, --accento-scuro).
   Caratteri Fira Sans (licenza OFL) serviti dal sito stesso: nessuna richiesta a servizi esterni. */
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/font/fira-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/font/fira-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fira Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/font/fira-sans-condensed-latin-600-normal.woff2) format("woff2")}
:root{
  --fondo:#fffdfb; --fondo-2:#f8f1ec; --fondo-3:#fbe9df; --inchiostro:#2a211d; --inchiostro-2:#6b5d55; --linea:#eadcd3;
  --raggio:14px; --larghezza:1080px; --testo-max:720px;
  --testo:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --titoli:"Fira Sans Condensed","Fira Sans",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}   /* il fuoco e le ancore non finiscono sotto la testata fissa (WCAG 2.4.11) */
body{margin:0;background:var(--fondo);color:var(--inchiostro);font:17px/1.65 var(--testo)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accento-scuro);text-underline-offset:3px}
a:hover{color:var(--accento)}
h1,h2,h3{font-family:var(--titoli);font-weight:600;line-height:1.2;color:var(--inchiostro)}
h1{font-size:clamp(1.9rem,4.4vw,2.7rem);margin:.3em 0 .5em}
h2{font-size:clamp(1.35rem,2.8vw,1.75rem);margin:1.8em 0 .6em}
h3{font-size:1.15rem;margin:1.4em 0 .4em}
p,ul,ol{margin:0 0 1em}
li{margin:.25em 0}
h1,h2,h3,summary{text-wrap:balance}
p,li{text-wrap:pretty}
.salta{position:absolute;left:-9999px}
.salta:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}

/* testata */
.testata{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:5}
.testata-dentro{max-width:var(--larghezza);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{font-family:var(--titoli);font-weight:600;font-size:1.25rem;color:var(--inchiostro);text-decoration:none;white-space:nowrap}
.logo::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--accento);margin-right:8px;vertical-align:1px}
.menu{flex:1;min-width:0}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 16px;flex-wrap:wrap}
.menu a{color:var(--inchiostro-2);text-decoration:none;font-size:.95rem}
.menu a:hover,.menu a[aria-current]{color:var(--accento-scuro)}
.carrello-link{margin-left:auto;color:var(--inchiostro);text-decoration:none;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.conta{display:inline-block;min-width:22px;padding:0 6px;border-radius:11px;background:var(--accento);color:#fff;font-size:.8rem;text-align:center}
.conta[hidden]{display:none}  /* panier vuoto: niente «0» */
.menu-tel{display:none}
@media (max-width:760px){
  /* testata del telefono su una riga, logo · Menu · Panier (10-10 Marco): le sei voci stanno nella tendina, tutte visibili */
  html{scroll-padding-top:72px}
  .testata-dentro{position:relative;flex-wrap:nowrap;gap:4px;padding:6px 16px}
  .logo{font-size:1.12rem;margin-right:auto}
  .menu{display:none}
  .menu-tel{display:block}
  .menu-tel summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:999px;font-weight:600;cursor:pointer}
  .menu-tel summary::-webkit-details-marker{display:none}
  .menu-tel summary::before{content:"";flex:none;width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
  .menu-tel[open] summary{background:var(--fondo-2)}
  .menu-tel nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linea);box-shadow:0 10px 24px rgba(90,40,20,.10)}
  .menu-tel ul{list-style:none;margin:0;padding:0 16px 6px}
  .menu-tel li{margin:0}
  .menu-tel a{display:flex;align-items:center;min-height:48px;color:var(--inchiostro);text-decoration:none;border-top:1px solid var(--linea)}
  .menu-tel li:first-child a{border-top:0}
  .menu-tel a[aria-current]{color:var(--accento-scuro);font-weight:600}
  .carrello-link{margin-left:0;padding:0 4px}
}

/* contenuto */
main{max-width:var(--larghezza);margin:0 auto;padding:12px 16px 56px}
article.pagina,article.guida,article.legale,article.servizio{max-width:var(--testo-max)}
article.home,article.con-apertura{max-width:none}
article.home > section:not(.apertura),article.con-apertura > section:not(.apertura){max-width:var(--testo-max)}
/* al computer le righe di lettura restano sotto i 75 caratteri (la colonna da 720 px ne faceva 80-94) */
:is(article,.descrizione) :is(p,ol,ul:not(.guide):not(.garanzie)){max-width:66ch}
.briciole{font-size:.85rem;color:var(--inchiostro-2);margin:8px 0 4px}
.briciole a{color:var(--inchiostro-2);display:inline-block;padding:10px 0;margin:-10px 0}
.briciole .sep{margin:0 4px}
@media (max-width:760px){
  /* al telefono il filo d'Arianna diventa «‹ livello di sopra»; quello intero resta nei dati strutturati */
  .briciole{margin:6px 0 2px}
  .briciole > a:not(.b-su),.briciole .sep,.briciole [aria-current]{display:none}
  .briciole .b-su{display:inline-block;padding:6px 0;margin:0;text-decoration:none}
  .briciole .b-su::before{content:"‹ ";font-weight:600}
}
section{margin:0}
.sottotitolo{font-size:1.15rem;color:var(--inchiostro-2);max-width:640px}
.riga-consegna,.consegna{font-size:.95rem;color:var(--inchiostro-2)}
.nota{font-size:.92rem;color:var(--inchiostro-2)}
.avviso{background:#fff4e5;border:1px solid #f0c98b;border-radius:10px;padding:10px 14px}
figure.foto{margin:1.2em 0;max-width:600px}
figure.foto img{border-radius:var(--raggio)}
figure.foto figcaption{font-size:.88rem;color:var(--inchiostro-2);margin-top:6px}
blockquote{margin:1em 0;padding:12px 16px;background:var(--fondo-2);border-left:4px solid var(--accento);border-radius:6px}
.encadre{background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--raggio);padding:14px 18px}

/* home */
/* al computer titolo, testo e consegna stanno insieme accanto alla carta, un po' sopra il centro ottico: le righe 1 e 5
   si dividono lo spazio in piu' che la carta alta lascerebbe fra un elemento e l'altro (0,35 sopra, 1 sotto) */
.apertura{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:minmax(0,.35fr) auto auto auto 1fr;gap:0 56px;align-items:start;padding:20px 0 12px}
.apertura h1{grid-column:1;grid-row:2;margin-top:0}
.apertura .sottotitolo{grid-column:1;grid-row:3}
.apertura .carta-prodotto{grid-column:2;grid-row:1 / -1;justify-self:end;width:100%;max-width:440px;margin:0}
.apertura .riga-consegna{grid-column:1;grid-row:4}
@media (max-width:760px){
  .apertura{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  .apertura h1,.apertura .sottotitolo,.apertura .riga-consegna{grid-row:auto}
  .apertura h1{font-size:1.85rem;margin-bottom:.35em}
  .apertura .sottotitolo{font-size:1.02rem;margin-bottom:.8em}
  .apertura .carta-prodotto{grid-column:1;grid-row:auto;max-width:none}
  .apertura .carta-prodotto img{aspect-ratio:4/3}
  .apertura .riga-consegna{margin-top:.7em}
  /* categoria: al telefono la carta viene subito dopo il titolo, il testo d'introduzione dopo */
  .apertura.carta-prima{display:flex;flex-direction:column}
  .apertura.carta-prima h1{order:1}
  .apertura.carta-prima .carta-prodotto{order:2;margin-bottom:0}
  .apertura.carta-prima .riga-consegna{order:3}
  .apertura.carta-prima .sottotitolo{order:4;margin-top:.4em}
}
/* garanzie sotto l'apertura della home: quattro fatti verificabili, nessun bollino */
.garanzie{list-style:none;margin:8px 0 6px;padding:14px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 18px;background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--raggio);font-size:.92rem;color:var(--inchiostro-2)}
.garanzie li{margin:0}
.garanzie strong{display:block;color:var(--inchiostro)}
@media (max-width:860px){.garanzie{grid-template-columns:1fr 1fr}}
ul.tre{padding-left:1.1em}
ul.tre li{margin:.35em 0}

/* scheda carta del prodotto */
.carta-prodotto{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden;text-decoration:none;color:var(--inchiostro);max-width:420px;margin:0 0 16px;transition:box-shadow .15s}
.carta-prodotto:hover{box-shadow:0 6px 20px rgba(90,40,20,.12)}
.carta-prodotto img{width:100%;aspect-ratio:1/1;object-fit:cover}
.carta-nome{display:block;padding:12px 16px 2px;font-weight:600}
.carta-prezzo{display:block;padding:0 16px 10px;color:var(--accento-scuro);font-weight:600;font-size:1.25rem}
.carta-prezzo small{font-size:.8rem;font-weight:400;color:var(--inchiostro-2);margin-left:4px}
.carta-azione{display:block;margin:0 16px 16px;padding:12px 20px;border-radius:999px;background:var(--accento);color:#fff;font-weight:600;text-align:center}
.carta-prodotto:hover .carta-azione{background:var(--accento-scuro)}

/* bottoni */
.bottone,button,.bottone-secondario{display:inline-block;font:600 1rem var(--testo);border-radius:999px;padding:13px 26px;cursor:pointer;text-decoration:none;border:2px solid var(--accento)}
.bottone,button{background:var(--accento);color:#fff}
.bottone:hover,button:hover{background:var(--accento-scuro);border-color:var(--accento-scuro);color:#fff}
.bottone-secondario{background:#fff;color:var(--accento-scuro)}
button:disabled{opacity:.6;cursor:default}

/* pagina prodotto */
.prodotto{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start;margin-top:8px}
.galleria{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.galleria img{border-radius:12px;background:var(--fondo-2)}
.galleria img:first-child{grid-column:1 / -1}
.galleria img:first-child:nth-last-child(even) ~ img:last-child{grid-column:1 / -1}  /* al computer l'ultima foto non resta sola */
/* colonna destra: titolo, prezzo e «ce qu'il faut savoir» accanto alle foto; quando il riquadro esce dallo schermo
   subentra la barra d'acquisto in basso (il riquadro «sticky» copriva il blocco che lo segue) */
.scheda-prodotto h1{font-size:clamp(1.7rem,3.6vw,2.3rem);margin-bottom:.2em}
.accroche{font-weight:600;color:var(--accento-scuro);margin:0 0 .7em}
.scheda-prodotto .breve{color:var(--inchiostro-2)}
.acquisto-box{background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--raggio);padding:18px 20px}
.prezzo{font-family:var(--titoli);font-size:2rem;font-weight:600;margin:0}
.nota-prezzo{font-size:.88rem;color:var(--inchiostro-2);margin:0 0 12px}
.acquisto{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.acquisto button{flex:1 1 220px}
.variante select{font:inherit;padding:8px;border-radius:8px;border:1px solid #8f7f76}
.data-consegna{margin:12px 0 0;font-weight:600;color:var(--inchiostro)}
.data-consegna + .consegna{margin-top:2px}
.consegna{margin:10px 0 0}
.fatti{list-style:none;padding:0;margin:12px 0 0;font-size:.92rem}
.fatti li{padding-left:22px;position:relative}
.fatti li::before{content:"✓";position:absolute;left:0;color:var(--accento-scuro);font-weight:600}
.fatti a{display:inline-block;padding:6px 0;margin:-6px 0}
.descrizione{max-width:var(--testo-max)}
/* «ce qu'il faut savoir avant d'acheter»: cinque righe brevi subito dopo l'acquisto */
.essenziale{margin:20px 0 8px;padding:18px 20px;background:#fff;border:1px solid var(--linea);border-radius:var(--raggio)}
.essenziale h2{margin:0 0 .6em;font-size:1.3rem}
.essenziale dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 24px}
.essenziale dl > div{margin:0}
.essenziale dt{font-weight:600}
.essenziale dd{margin:2px 0 0;font-size:.95rem;color:var(--inchiostro-2)}
.galleria-punti{display:none}
.nota-foto{margin:8px 0 0;font-size:.82rem;line-height:1.4;color:var(--inchiostro-2)}
@media (max-width:860px){
  .prodotto{grid-template-columns:1fr;gap:0}
  /* al telefono: titolo, foto, prezzo e bottone nella prima schermata; la descrizione breve viene dopo l'acquisto */
  .scheda-prodotto{display:contents}
  .scheda-prodotto h1{order:1;font-size:1.6rem;margin:.15em 0 .15em}
  .accroche{order:2;font-size:.95rem;margin-bottom:10px}
  .galleria-blocco{display:contents}
  .galleria{order:3}
  .galleria-punti{order:4}
  .nota-foto{order:4;margin:0;text-align:center;font-size:.78rem}
  .nota-foto-dati{display:none}
  .acquisto-box{order:5;margin-top:10px;padding:14px 16px}
  .scheda-prodotto .breve{order:6;margin:14px 0 0}
  .essenziale{order:7;margin-top:22px}
  .prezzo{font-size:1.75rem}
  .nota-prezzo{margin-bottom:10px}
  /* la galleria e' una striscia che scorre di lato: la foto dopo si vede di taglio, e i punti dicono quante sono */
  .galleria{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .galleria::-webkit-scrollbar{display:none}
  .galleria img{flex:0 0 82%;min-width:0;scroll-snap-align:start}
  .galleria-punti{display:flex;justify-content:center;gap:2px;margin-top:2px}
  .galleria-punti button{width:28px;height:28px;padding:0;border:0;background:transparent;border-radius:50%;display:grid;place-items:center}
  .galleria-punti button::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--linea)}
  .galleria-punti button[aria-current="true"]::after{background:var(--accento)}
  .galleria-punti button:hover{background:transparent}
}
/* telefoni bassi (Safari lascia ~664 px su un iPhone 13): foto un po' piu' strette perche' prezzo e bottone restino in vista */
@media (max-width:860px) and (max-height:740px){
  .galleria img{flex-basis:66%}
  .accroche{margin-bottom:6px}
  .acquisto-box{margin-top:6px}
}
/* barra d'acquisto del telefono */
.barra-acquisto{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linea);box-shadow:0 -6px 18px rgba(60,30,15,.08)}
.barra-acquisto[hidden]{display:none}
.barra-prezzo{margin:0;font-family:var(--titoli);font-weight:600;font-size:1.25rem;line-height:1.15}
.barra-prezzo small{display:block;font-family:var(--testo);font-weight:400;font-size:.78rem;color:var(--inchiostro-2)}
.barra-acquisto .acquisto{flex:1;flex-wrap:nowrap;justify-content:flex-end}
.barra-acquisto button{flex:0 1 auto;padding:11px 20px}
body.con-barra{padding-bottom:76px}
@media (min-width:861px){.barra-acquisto{padding-left:max(16px,calc((100vw - var(--larghezza)) / 2 + 16px));padding-right:max(16px,calc((100vw - var(--larghezza)) / 2 + 16px))}.barra-acquisto .acquisto{flex:0 0 auto}.barra-prezzo{margin-right:auto}}

/* tabelle, gpsr, guide */
table.dati{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:.95rem;background:#fff}
table.dati caption{text-align:left;font-size:.85rem;color:var(--inchiostro-2);padding-bottom:6px}
table.dati th,table.dati td{border-bottom:1px solid var(--linea);padding:9px 10px;text-align:left;vertical-align:top}
table.dati th{width:36%;font-weight:600;background:var(--fondo-2)}
/* confronto delle guide: una colonna per soluzione, si legge dall'alto in basso */
table.confronto{table-layout:fixed}
table.confronto th[scope=row]{width:26%}
table.confronto.tre-colonne th[scope=row]{width:22%}
table.confronto thead th{width:auto;background:var(--fondo-3);font-size:.9rem}
table.confronto thead td{background:none;border-bottom:1px solid var(--linea)}
@media (max-width:480px){table.confronto{font-size:.86rem}table.confronto th,table.confronto td{padding:8px 6px;hyphens:auto}}
/* il prodotto in fondo alle guide comparative */
.modello{margin-top:2.5em;padding-top:1.2em;border-top:1px solid var(--linea)}
.modello h2{margin-top:0}
.gpsr{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:12px 16px;font-size:.92rem}
.gpsr p{margin:.3em 0}
ul.guide{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
ul.guide li{margin:0}
ul.guide a{display:block;height:100%;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--inchiostro)}
ul.guide a:hover{border-color:var(--accento)}
.guida-titolo{display:block;font-weight:600;color:var(--accento-scuro)}
.guida-riga{display:block;font-size:.9rem;color:var(--inchiostro-2);margin-top:4px}

/* domande: tutta la riga si tocca, il segno + / − sta dentro la scheda */
main details{background:#fff;border:1px solid var(--linea);border-radius:12px;margin:0 0 10px}
main details summary{list-style:none;position:relative;cursor:pointer;font-weight:600;padding:12px 44px 12px 16px}
main details summary::-webkit-details-marker{display:none}
main details summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.35rem;line-height:1;font-weight:400;color:var(--accento-scuro)}
main details[open] summary::after{content:"\2212"}
main details > :not(summary){margin:.2em 16px .4em}
main details[open] > :last-child{margin-bottom:14px}

/* moduli: bordi dei campi a 3,8:1 sul bianco (WCAG 1.4.11), il campo sbagliato si vede e si annuncia */
.modulo{display:grid;gap:12px;max-width:560px;background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--raggio);padding:18px}
.modulo label{display:grid;gap:4px;font-weight:600;font-size:.95rem}
.modulo label small{font-weight:400;color:var(--inchiostro-2)}
.modulo input,.modulo textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid #8f7f76;border-radius:8px;background:#fff}
.modulo [aria-invalid="true"]{border:2px solid #b3261e}

/* carrello */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.carrello-righe{list-style:none;padding:0;margin:0 0 12px}
.carrello-riga{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--linea);padding:10px 0}
.carrello-riga img{border-radius:8px}
.carrello-qta{display:flex;gap:8px;align-items:center;margin-top:4px}
.carrello-qta button{min-width:44px;min-height:44px;padding:0;font-size:1.1rem;background:#fff;color:var(--accento-scuro);border:1px solid #8f7f76;border-radius:10px}
.carrello-qta button:hover{background:var(--fondo-2);color:var(--accento-scuro);border-color:var(--accento-scuro)}
.carrello-qta .retirer{min-width:0;border:0;background:none;color:var(--inchiostro-2);font-size:.92rem;font-weight:400;text-decoration:underline;padding:0 6px;margin-left:4px}
.carrello-qta .retirer:hover{background:none;color:var(--accento-scuro)}
.carrello-prezzo{font-weight:600;white-space:nowrap}
.carrello-totale{font-size:1.15rem;font-weight:600}
@media (max-width:760px){#alla-cassa{width:100%}}
body.panier-vide .dopo-carrello{display:none}

/* piede */
.piede{background:var(--fondo-2);border-top:1px solid var(--linea);margin-top:40px}
.piede-dentro{max-width:var(--larghezza);margin:0 auto;padding:28px 16px;display:grid;grid-template-columns:1fr 1.4fr;gap:20px;font-size:.92rem;color:var(--inchiostro-2)}
.piede-marchio{font-family:var(--titoli);font-weight:600;font-size:1.1rem;color:var(--inchiostro);margin-bottom:.3em}
.piede nav ul{list-style:none;margin:0;padding:0;columns:2;column-gap:20px}
.piede nav li{margin:0}
.piede nav a{color:var(--inchiostro-2);display:inline-block;padding:10px 0}
.piede a:hover{color:var(--accento-scuro)}
.piede-nota{grid-column:1 / -1;border-top:1px solid var(--linea);padding-top:12px;margin:0}
@media (max-width:640px){.piede-dentro{grid-template-columns:1fr}}