/* Willy B2B — stile condiviso vetrina + area riservata
   Direzione design v3 (2026-07-20): BRAND B2C. Base bianca e ariosa, titoli Anton
   maiuscoli, bottoni a pillola neri; giallo/rosa/azzurro solo come accenti
   (topbar rosa, banda CTA rosa, chip e badge gialli). Font da Google Fonts
   (Anton + Inter): la scelta v2 "niente CDN" e' superata dalla direttiva brand.
   Layout invariato rispetto alla v2: cambia solo la pelle. */
:root{
  --ink:#000; --carta:#fff; --sfondo:#fff; --sfondo-alt:#f7f7f5;
  --giallo:#f9d701; --giallo-scuro:#e0bd00; --rosa:#ff3d8b; --azzurro:#4fb8ff;
  --linea:#e8e8e3; --grigio:#55554f; --verde:#047857; --rosso:#b91c1c;
  /* [2026-07-20] Rosa e azzurro del brand sono CHIARI: come testo su fondo chiaro
     non si leggono (misurato: azzurro 2.0, giallo scuro 1.7 — sotto ogni soglia).
     Queste sono le versioni scure, da usare quando il colore fa da TESTO. */
  --rosa-testo:#d4126a; --azzurro-testo:#0b6fb8;
  --font-display:"Anton",sans-serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--sfondo);color:var(--ink);line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--grigio);border-bottom:3px solid var(--azzurro);
  padding-bottom:4px;margin-bottom:18px}

/* Accenti di colore su UNA parola del titolo (stile B2C) */
.t-rosa{color:var(--rosa-testo)}
.t-azzurro{color:var(--azzurro-testo)}

/* Topbar — CELESTE con testo bianco. [2026-07-20 Jacopo] era rosa/fucsia: "sulla
   barra alta non ci sta". Cambia SOLO qui: la banda CTA, i badge prodotto e gli
   accenti .t-rosa restano rosa come prima. */
.topbar{background:var(--azzurro);color:var(--ink);font-size:12.5px;font-weight:600}
.topbar .wrap{display:flex;gap:26px;justify-content:center;padding:8px 24px;flex-wrap:wrap}
/* testo NERO, non bianco: su celeste chiaro il bianco e' quasi illeggibile
   (contrasto ~2:1). Le pillole gialle restano identiche. */
.topbar b{background:var(--giallo);color:var(--ink);border-radius:999px;padding:1px 9px;font-weight:800}

/* Header */
header{background:var(--carta);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:50}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px}
.logo{font-family:var(--font-display);font-weight:400;font-size:26px;letter-spacing:.8px;
  text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo .b2b{background:var(--giallo);border-radius:999px;padding:2px 11px;font-size:17px}
/* [2026-07-20 Jacopo] logo Willy a SINISTRA del badge B2B. Altezza fissa e
   width:auto: il file e' largo e senza vincolo schiaccerebbe l'intestazione. */
/* [2026-07-20 Jacopo "voglio vedere il logo un po piu grosso"] 26 -> 40px (mobile 20 -> 30). */
.logo-img{height:40px;width:auto;display:block}
@media (max-width:600px){ .logo-img{height:30px} }
nav{display:flex;gap:24px;font-size:14.5px;font-weight:600}
nav a{text-decoration:none;color:var(--grigio)}
nav a:hover{color:var(--ink)}

/* Bottoni — pillola; primario nero, secondario bianco bordo nero */
.btn{display:inline-block;font-weight:700;font-size:14.5px;padding:11px 22px;border-radius:999px;
  border:1.5px solid var(--ink);text-decoration:none;cursor:pointer;transition:.15s;background:none}
.btn-pri{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-pri:hover{background:#1c1c1c;border-color:#1c1c1c}
.btn-ghost{background:var(--carta);color:var(--ink)}
.btn-ghost:hover{background:var(--sfondo-alt)}
.btn-nero{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-nero:hover{background:#1c1c1c}

/* Hero — bianco, titolo Anton nero, evidenziatore giallo su una parola */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:72px 0 56px}
h1{font-family:var(--font-display);font-size:52px;line-height:1.06;font-weight:400;
  letter-spacing:.3px;text-transform:uppercase;margin-bottom:18px}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--giallo) 62%)}
.hero .sub{font-size:17.5px;color:var(--grigio);max-width:520px;margin-bottom:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero .mini{font-size:13px;color:var(--grigio)}
.hero-img{position:relative}
.hero-img img{width:100%;border:1px solid var(--linea);border-radius:14px;display:block}
.chip-float{position:absolute;background:var(--carta);border:1px solid var(--linea);border-radius:999px;
  padding:9px 16px;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;gap:8px;align-items:center}
.cf1{top:16px;right:16px}.cf2{bottom:16px;left:16px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--verde)}

/* Numeri */
.nums{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--sfondo-alt)}
.nums .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 24px}
.nums .cell{text-align:center;padding:6px 12px}
.nums .cell + .cell{border-left:1px solid var(--linea)}
.nums .n{font-family:var(--font-display);font-size:38px;font-weight:400;letter-spacing:.5px;line-height:1.1}
/* [2026-07-20] Il NUMERO resta nero: colorarlo lo rendeva illeggibile sul fondo
   chiaro (azzurro 2.0, giallo 1.7 di contrasto). Il colore passa alla barretta
   sopra la cella, dove fa decorazione e non deve essere letto. */
.nums .cell{position:relative}
.nums .cell::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:34px;height:4px;border-radius:999px}
.nums .cell:nth-child(1)::before{background:var(--rosa)}
.nums .cell:nth-child(2)::before{background:var(--azzurro)}
.nums .cell:nth-child(3)::before{background:var(--ink)}
.nums .cell:nth-child(4)::before{background:var(--giallo)}
.nums .l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--grigio)}

section{padding:64px 0}
.sec-title{font-family:var(--font-display);font-size:36px;font-weight:400;letter-spacing:.3px;
  text-transform:uppercase;line-height:1.12;margin-bottom:10px}
.sec-sub{color:var(--grigio);font-size:16px;margin-bottom:34px;max-width:620px}

/* Card generiche */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--carta);border:1px solid var(--linea);border-radius:14px;padding:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card .ico{font-size:24px;margin-bottom:12px}
.card .big{font-family:var(--font-display);font-size:30px;font-weight:400;display:block;
  margin-bottom:2px;letter-spacing:.3px}
.card h3{font-size:15.5px;font-weight:700;margin-bottom:6px}
.card p{font-size:13.5px;color:var(--grigio)}

/* Categorie */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{background:var(--carta);border:1px solid var(--linea);border-radius:14px;overflow:hidden;transition:.15s}
.cat:hover{border-color:var(--ink)}
/* [2026-07-20 Jacopo] accento a rotazione sulle card categoria: la home non e'
   piu' una sequenza di riquadri tutti uguali con la stessa freccia nera. */
.cat{border-top:4px solid var(--linea)}
.cats .cat:nth-child(3n+1){border-top-color:var(--rosa)}
.cats .cat:nth-child(3n+2){border-top-color:var(--azzurro)}
.cats .cat:nth-child(3n+3){border-top-color:var(--giallo)}
.cats .cat:nth-child(3n+1):hover .arr{color:var(--rosa-testo)}
.cats .cat:nth-child(3n+2):hover .arr{color:var(--azzurro-testo)}
.cats .cat:nth-child(3n+3):hover .arr{color:var(--giallo-scuro)}
.cat img{width:100%;aspect-ratio:1.7;object-fit:cover;display:block;border-bottom:1px solid var(--linea)}
.cat .in{padding:15px 18px;display:flex;justify-content:space-between;align-items:center}
.cat h3{font-size:16px;font-weight:700}
.cat small{display:block;color:var(--grigio);font-size:12.5px;margin-top:1px}
.cat .arr{font-weight:800;color:var(--grigio)}
.cat:hover .arr{color:var(--rosa-testo)}

/* Portale — era tutto nero: ora chiaro con card bianche */
.portale{background:var(--sfondo-alt);color:var(--ink);padding:64px 0}
.portale .sec-title{color:var(--ink)}
.portale .sec-sub{color:var(--grigio)}
.portale .eyebrow{color:var(--grigio)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat{background:var(--carta);border:1px solid var(--linea);border-radius:14px;padding:24px}
.feat .ico{font-size:24px;margin-bottom:12px}
.feat h3{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.feat p{font-size:13.5px;color:var(--grigio)}
.feat .tag{display:inline-block;margin-top:12px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  color:var(--ink);background:var(--giallo);border:1px solid var(--giallo);border-radius:999px;padding:3px 10px}
.feats .feat:nth-child(3n+2) .tag{background:var(--azzurro);border-color:var(--azzurro)}
.feats .feat:nth-child(3n+3) .tag{background:var(--rosa);border-color:var(--rosa);color:var(--ink)}

/* Pagamenti */
.pay{background:var(--carta);border:1px solid var(--linea);border-radius:16px;padding:30px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.pay h3{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:.3px;text-transform:uppercase}
.pay p{color:var(--grigio);font-size:14px;max-width:460px}
.pay-logos{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--linea);border-radius:999px;padding:8px 15px;font-weight:700;font-size:13.5px;background:var(--sfondo-alt)}
.chip.y{background:var(--giallo);border-color:var(--giallo)}

/* FAQ */
.faq{max-width:760px}
details{background:var(--carta);border:1px solid var(--linea);border-radius:12px;margin-bottom:10px;padding:16px 20px}
summary{font-weight:700;cursor:pointer;font-size:15px}
details p{margin-top:10px;color:var(--grigio);font-size:14.5px}

/* CTA finale — banda rosa, titolo Anton bianco, bottone bianco pillola */
.cta{background:var(--rosa);padding:64px 0;text-align:center}
.cta h2{font-family:var(--font-display);font-size:40px;font-weight:400;letter-spacing:.3px;
  text-transform:uppercase;color:#fff;margin-bottom:10px}
.cta p{font-weight:600;color:#fff;opacity:.92;margin-bottom:24px}
.cta .btn{background:var(--carta);border-color:var(--carta);color:var(--ink)}
.cta .btn:hover{background:var(--giallo);border-color:var(--giallo);color:var(--ink)}

/* Footer — chiaro */
footer{background:var(--sfondo-alt);color:var(--grigio);font-size:12.5px;padding:36px 0;
  text-align:center;line-height:1.9;border-top:1px solid var(--linea)}
footer b{font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:.5px;color:var(--ink)}
footer a{color:var(--ink);font-weight:600}

/* ===== Pagine form (registrati / login / password) ===== */
.page-form{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;padding:56px 0;align-items:start}
.form-card{background:var(--carta);border:1px solid var(--linea);border-radius:16px;padding:34px;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.form-card h1{font-family:var(--font-display);font-size:32px;font-weight:400;letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:6px}
.form-card .lead{color:var(--grigio);font-size:14.5px;margin-bottom:24px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1.5px solid var(--linea);
  border-radius:10px;font-size:14.5px;font-family:inherit;background:var(--carta)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field .hint{font-size:12px;color:var(--grigio);margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--grigio);margin:16px 0}
.check input{margin-top:3px}
.form-msg{border-radius:10px;padding:12px 14px;font-size:14px;font-weight:600;margin-bottom:14px;display:none}
.form-msg.err{display:block;background:#fef2f2;color:var(--rosso);border:1px solid #fecaca}
.form-msg.ok{display:block;background:#f0fdf4;color:var(--verde);border:1px solid #bbf7d0}
.side-step{display:flex;gap:14px;margin-bottom:22px}
.side-step .num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--giallo);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.side-step h4{font-size:15px;font-weight:700;margin-bottom:3px}
.side-step p{font-size:13.5px;color:var(--grigio)}
.side-box{background:var(--sfondo-alt);border:1px solid var(--linea);border-radius:14px;padding:24px;margin-top:26px}
.side-box h4{font-size:14px;font-weight:800;margin-bottom:10px}
.side-box ul{font-size:13.5px;color:var(--grigio);padding-left:18px;line-height:2}
.center-card{max-width:440px;margin:64px auto}
.link-row{display:flex;justify-content:space-between;font-size:13.5px;margin-top:16px}
.link-row a{color:var(--grigio);font-weight:600}

@media(max-width:960px){
  .hero,.page-form{grid-template-columns:1fr;padding:40px 0}
  h1{font-size:36px}
  .sec-title{font-size:29px}
  .cta h2{font-size:31px}
  .cards4,.cats,.feats,.nums .wrap{grid-template-columns:1fr 1fr}
  .nums .cell + .cell{border-left:none}
  nav{display:none}
}

/* ===== Area riservata: header, toolbar, catalogo, carrello, ordini =====
   Resta SOBRIA (e' uno strumento di lavoro): stessi token, prezzi in Anton,
   badge semantici invariati, cartbar scura perche' funzionale. */
.header-user{display:flex;align-items:center;gap:10px}
.customer-name{font-size:13px;font-weight:700;color:var(--grigio);max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-sm{padding:8px 16px;font-size:13px}
.cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  border-radius:999px;background:var(--giallo);color:var(--ink);font-size:11.5px;font-weight:800;margin-left:5px;padding:0 5px}

.toolbar{background:var(--carta);border-bottom:1px solid var(--linea);position:sticky;top:64px;z-index:40}
.toolbar .wrap{padding:12px 24px;display:flex;flex-direction:column;gap:10px}
.search{width:100%;max-width:520px;padding:11px 14px;border:1.5px solid var(--linea);border-radius:999px;
  font-size:14.5px;font-family:inherit}
.search:focus{outline:none;border-color:var(--ink)}
/* Catalogo: filtri categoria in COLONNA a sinistra (2026-07-20, Jacopo: in cima
   davano fastidio). La griglia prodotti non cambia: cambia dove stanno i filtri. */
.cat-layout{display:grid;grid-template-columns:222px minmax(0,1fr);gap:28px;align-items:start}
/* [2026-07-20 Jacopo] la colonna DEVE poter scorrere: con molte famiglie le ultime
   restavano irraggiungibili sotto il bordo dello schermo. */
.cat-filtri{position:sticky;top:132px;padding:18px 0 8px;
  max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
/* [2026-07-20 Jacopo "non mi piace il fonte di CATEGORIE e delle voci sotto,
   sono diverse"] Il titolo era in Anton (il carattere dei TITOLI) e le voci in
   Inter maiuscolo: due caratteri diversi a 3px di distanza, e la colonna
   sembrava montata male. Ora la colonna e' tutta Inter: il titolino fa da
   etichetta piccola e grigia, le voci sono la cosa da leggere. Anton resta
   dove serve davvero, cioe' nei titoli veri delle sezioni. */
.filtri-tit{font-family:var(--font-sans);font-size:11px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--grigio);margin:0 0 8px}
.famiglie{display:flex;flex-direction:column;gap:3px}
/* Voci categoria: NON maiuscole. Un elenco di 17 nomi tutto in maiuscolo si
   legge male e allunga le righe su due capi (es. "ACCESSORI UOMO-DONNA-BAMBINO"). */
.fchip{border:1.5px solid transparent;background:none;border-radius:10px;padding:7px 11px;
  font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:pointer;
  text-align:left;width:100%;color:var(--ink);text-transform:none;line-height:1.3}
.fchip:hover{background:var(--sfondo-alt)}
.fchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Filtri prezzo / disponibilita' / ordinamento, sotto le categorie */
.filtri-tit-2{margin-top:22px;padding-top:16px;border-top:1px solid var(--linea)}
.f-prezzo{display:flex;align-items:center;gap:7px}
.f-prezzo input{width:100%;min-width:0;padding:8px 10px;border:1.5px solid var(--linea);
  border-radius:10px;font-size:13.5px;font-family:inherit;background:var(--carta)}
.f-prezzo input:focus{outline:none;border-color:var(--ink)}
.f-prezzo span{color:var(--grigio);font-weight:700}
.f-hint{font-size:11.5px;color:var(--grigio);margin-top:6px}
.f-check{display:flex;gap:9px;align-items:center;font-size:13.5px;font-weight:600;cursor:pointer}
.f-nota{font-weight:500;color:var(--grigio);font-size:12px}
/* Bottoni di download: a tutta colonna nella barra filtri, in linea nella scheda */
/* Anteprima riordino: cosa e' cambiato dall'ordine di allora, PRIMA di confermare */
.riordino-box{background:var(--sfondo-alt);border:1px solid var(--linea);border-radius:12px;
  padding:16px 18px;margin-top:12px;font-size:14px}
.riordino-avvisi{margin:6px 0 0;padding-left:20px;font-size:13.5px;line-height:1.75;color:var(--grigio)}
.riordino-avvisi b{color:var(--ink)}
.dl-listino{display:block;width:100%;text-align:center}
.dl-foto{display:inline-block;margin-top:14px}
.f-select{width:100%;padding:8px 10px;border:1.5px solid var(--linea);border-radius:10px;
  font-size:13.5px;font-family:inherit;background:var(--carta);cursor:pointer}
.f-select:focus{outline:none;border-color:var(--ink)}

/* Riepilogo dei filtri attivi sopra la griglia: ogni filtro e' una pillola con
   la X. Serve a non lasciare mai l'utente davanti a "12 prodotti" senza sapere
   perche' (regola di casa: mai filtri di default nascosti). */
.filtri-attivi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:18px 0 0}
.filtri-attivi .lab{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--grigio)}
.fa-chip{display:inline-flex;align-items:center;gap:8px;background:var(--giallo);
  border:1.5px solid var(--giallo);border-radius:999px;padding:5px 8px 5px 13px;
  font-size:13px;font-weight:700;color:var(--ink)}
.fa-chip button{border:none;background:rgba(0,0,0,.14);color:var(--ink);cursor:pointer;
  width:19px;height:19px;border-radius:50%;font-size:13px;line-height:1;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0}
.fa-chip button:hover{background:var(--ink);color:#fff}
.fa-reset{border:none;background:none;text-decoration:underline;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--grigio);font-family:inherit}
.fa-reset:hover{color:var(--ink)}

@media (max-width:900px){
  /* schermo stretto: la colonna resterebbe schiacciata -> i filtri tornano sopra
     la griglia e riprendono la forma a pillole in fila */
  .cat-layout{grid-template-columns:1fr;gap:6px}
  .cat-filtri{position:static;padding:12px 0 0}
  .filtri-tit{display:none}
  .famiglie{flex-direction:row;flex-wrap:wrap;gap:8px}
  .fchip{width:auto;border-radius:999px;border-color:var(--linea);background:var(--carta)}
  /* i titoletti dei filtri servono anche stretti: senza, prezzo e ordinamento
     diventerebbero campi senza nome */
  .filtri-tit-2{display:block;font-size:13px;margin-top:16px;padding-top:12px}
  .f-prezzo,.f-check,.f-select{max-width:420px}
}

.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px 0}
.prod{background:var(--carta);border:1px solid var(--linea);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s}
.prod-off{opacity:.62}
/* Riquadro foto a misura FISSA e uguale per tutte le card (Jacopo 2026-07-20:
   "alcune più grandi, alcune più piccole"). Il box è quadrato e definito dal
   contenitore; l'immagine ci sta DENTRO con max-width/max-height e non lo
   deforma mai. NB: width/height:100% sull'img non bastava — dentro un flex,
   se l'altezza dell'ancora non risolve, l'immagine ricade sulla dimensione
   naturale e ogni foto esce di misura diversa. Con inset:0 + max-* il box è
   sempre lo stesso, qualunque sia la foto (verticale, orizzontale, minuscola). */
/* Badge NOVITÀ sull'angolo della foto. Rosa del brand (non il rosso di Colorbaby):
   e' un accento, resta leggibile su qualsiasi foto perche' sta su fondo pieno. */
.prod-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--rosa);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  border-radius:999px;padding:4px 11px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.prod-img{background:#fff;border-bottom:1px solid var(--linea);aspect-ratio:1;position:relative;overflow:hidden}
.prod-img a{position:absolute;inset:0;display:block;padding:10px}
/* L'immagine RIEMPIE il riquadro: width/height 100% + object-fit:contain la scala
   fino a toccare i bordi senza tagliarla e senza deformarla. NB: con max-width/
   max-height (primo tentativo) le foto piccole restavano minuscole in mezzo al
   riquadro — "non sono grosse come il riquadro" (Jacopo). Qui l'ancora e' gia'
   un box definito (inset:0), quindi il 100% risolve sempre: e' proprio la
   condizione che mancava prima e che faceva uscire le card di misure diverse. */
.prod-img img{width:100%;height:100%;object-fit:contain;display:block}
/* Prodotto già nel carrello: la card si illumina e resta illuminata finché
   c'è dentro (Jacopo 2026-07-20). L'anello è in outline, non in box-shadow,
   così non litiga con l'animazione di conferma qui sotto. */
.prod.in-carrello{border-color:var(--ink);outline:2px solid var(--giallo);outline-offset:-1px}
@keyframes prodAggiunto{
  0%{box-shadow:0 0 0 0 rgba(249,215,1,.95)}
  100%{box-shadow:0 0 0 16px rgba(249,215,1,0)}
}
.prod.appena-aggiunto{animation:prodAggiunto .6s ease-out}
@media(prefers-reduced-motion:reduce){.prod.appena-aggiunto{animation:none}}
/* [2026-07-20 Jacopo] Schede a GRIGLIA RIGIDA: ogni riga della card ha un'altezza
   fissa, cosi' famiglia, titolo, codice, prezzo e bottoni cadono alla STESSA quota
   su tutte le schede. Prima l'altezza dipendeva dalla lunghezza del testo e le
   schede accanto risultavano sfalsate. Il titolo si taglia a 2 righe con i
   puntini: e' l'unico campo che varia davvero, e tagliarlo e' meglio che far
   ballare tutta la fila. */
.prod-body{padding:14px 16px;display:flex;flex-direction:column;gap:0;flex:1}
.prod-fam{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--grigio);height:16px;line-height:16px;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.prod-body h3{font-size:14.5px;font-weight:700;line-height:1.35;
  height:calc(2 * 1.35em);margin-top:4px;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.prod-sku{font-size:11.5px;color:#9a9a92;height:18px;line-height:18px;margin-top:2px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.prod-price{font-family:var(--font-display);font-size:23px;font-weight:400;letter-spacing:.3px;
  margin-top:6px;height:30px;line-height:30px}
.prod-price span{font-family:var(--font-sans);font-size:11.5px;font-weight:600;color:var(--grigio)}
/* Offerte riservate: badge rosa acceso, prezzo pieno barrato, margine alla riga */
.prod-badge.badge-off{background:var(--rosso);color:#fff}
.prod-pieno{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--grigio);margin-left:6px}
.prod-margine{font-size:12px;font-weight:700;color:var(--verde);margin-top:2px}
.prod-sugg{font-size:12px;color:var(--grigio);text-decoration:line-through}
.prod-moq{font-size:12px;color:var(--grigio);background:var(--sfondo-alt);border-radius:999px;
  padding:0 10px;margin-top:6px;height:24px;line-height:24px;align-self:flex-start;
  overflow:hidden;white-space:nowrap}
.prod-stock{font-size:12px;font-weight:700;margin-top:8px;display:flex;align-items:center;
  gap:6px;height:18px}
.prod-stock.ok{color:var(--verde)}
.prod-stock.off{color:var(--grigio)}
.prod-ctl{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.stepper{display:flex;border:1.5px solid var(--linea);border-radius:999px;overflow:hidden}
/* [2026-07-20 Jacopo "manca il + e il numero non e' centrato"] Un <input> ha una
   larghezza NATURALE di ~20 caratteri: dentro un flex non scende sotto quella
   misura da solo, quindi la riga sfondava la pillola e il bottone "+", finito
   oltre il bordo, veniva tagliato da overflow:hidden. Il numero sembrava
   spostato a sinistra per lo stesso motivo: era centrato in un campo piu' largo
   della pillola visibile. min-width:0 permette al campo di stringersi; i due
   bottoni non si restringono mai. */
.stepper button{flex:0 0 38px;width:38px;height:36px;border:none;background:var(--sfondo-alt);
  font-size:17px;font-weight:700;line-height:1;cursor:pointer;color:var(--ink)}
.stepper button:hover{background:var(--giallo)}
.stepper .qty{flex:1 1 auto;min-width:0;width:100%;border:none;text-align:center;
  font-size:14px;font-weight:700;font-family:inherit;background:var(--carta);color:var(--ink)}
.stepper.sm button{flex:0 0 32px;width:32px;height:32px}
.load-more-wrap{text-align:center;padding:10px 0 60px}
.load-more-wrap .mini{margin-top:10px;color:var(--grigio);font-size:13px}

/* Tag della scheda prodotto: tradotti dall'inglese dei marketplace (2026-07-20) */
.pdp-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.pdp-tag{font-size:12px;font-weight:600;color:var(--grigio);background:var(--sfondo-alt);
  border:1px solid var(--linea);border-radius:999px;padding:4px 12px}
/* Riga ordine non piu' riordinabile: sbiadita ma LEGGIBILE, col motivo accanto
   (2026-07-20 Jacopo: "se non e' presente lo metti scuro o in dissolvenza"). */
.ctable .row-off{opacity:.45}
.ctable .row-off img{filter:grayscale(1)}
.riordina-tutto{flex-wrap:wrap}

/* Pallini sotto la foto: quante altre immagini ha l'articolo (si sfogliano
   passandoci sopra col mouse). */
.img-dots{position:absolute;bottom:6px;left:0;right:0;text-align:center;
  font-size:8px;letter-spacing:2px;color:var(--grigio);pointer-events:none}

/* Carrello: sconto cartone e spedizione in promo (2026-07-20, Jacopo) */
.csconto{font-size:11.5px;font-weight:700;color:var(--verde);margin-top:2px}
.trow.sconto b{color:var(--verde)}
.trow.spediz b{color:var(--verde)}

/* Fascia promozione in cima (2026-07-20, Jacopo): spedizione gratuita come promo B2B.
   Il testo arriva dal pannello contenuti: vuoto = fascia assente. */
/* [2026-07-20] La fascia promo era diventata azzurra quando la barra alta era
   ancora rosa. Ora che la barra alta e' CELESTE (richiesta Jacopo) due fasce
   azzurre finivano attaccate: la promo torna gialla, cosi' scendendo si legge
   celeste -> giallo -> rosa invece di due bande dello stesso colore. */
.promo-strip{background:var(--giallo);color:var(--ink);text-align:center;
  font-family:var(--font-display);letter-spacing:.6px;text-transform:uppercase;
  font-size:13px;padding:7px 16px}

/* Storico ordini: miniatura del prodotto + riordino (2026-07-20, Jacopo) */
.ordimg{width:56px;padding-right:0}
.ordimg img{width:48px;height:48px;object-fit:contain;background:#fff;
  border:1px solid var(--linea);border-radius:8px;display:block}
.riordina-tutto{display:flex;align-items:center;gap:12px;padding:10px 0 4px;flex-wrap:wrap}
.riordina-tutto .mini{color:var(--grigio)}

/* Scheda "I miei dati" (2026-07-20, Jacopo): il nome nell'header la apre */
.customer-name.clickabile{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.modale-back{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modale{background:var(--carta);border-radius:16px;max-width:520px;width:100%;
  max-height:86vh;overflow:auto;padding:22px 24px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.modale-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modale-top h2{font-family:var(--font-display);font-size:22px;margin:0;text-transform:uppercase}
.modale-x{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--grigio)}
.modale-x:hover{color:var(--ink)}
.dati .dato{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--linea)}
.dati .dato span{color:var(--grigio);font-size:13px;flex:0 0 auto}
.dati .dato b{text-align:right;font-size:13.5px}
.modale .mini{margin-top:14px;color:var(--grigio)}

/* La barra riassunto fissa in fondo e' stata RIMOSSA il 2026-07-20 (Jacopo:
   "togli la barra sotto del riassunto che non interessa"): il carrello si vede
   dal bottone con il contatore in alto a destra. */

.ctable{width:100%;border-collapse:collapse;background:var(--carta);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.ctable th{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--grigio);text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--linea);background:var(--sfondo-alt)}
.ctable td{padding:14px 16px;border-bottom:1px solid var(--linea);font-size:14px;vertical-align:middle}
.ctable tr:last-child td{border-bottom:none}
.ctable .r{text-align:right}
.ctable.sub{background:var(--sfondo-alt);margin:8px 0}
.row-off{opacity:.6}
.cname{font-weight:700}
.csku{font-size:12px;color:#9a9a92}
.rm{border:none;background:none;font-size:15px;color:var(--grigio);cursor:pointer}
.rm:hover{color:var(--rosso)}
.totals{max-width:420px;margin-left:auto;margin-top:22px;background:var(--carta);border:1px solid var(--linea);
  border-radius:14px;padding:20px 24px}
.trow{display:flex;justify-content:space-between;font-size:14.5px;padding:5px 0}
.trow.tot{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;
  font-family:var(--font-display);font-size:23px;font-weight:400;letter-spacing:.3px}
.trow.mini{font-size:12px;color:var(--grigio);justify-content:flex-end}
.pay-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;align-items:center}
.pay-actions .btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* [2026-07-20] carta "non ancora disponibile": spenta ma DIVERSA da un bottone bloccato dal
   carrello — niente pieno nero, bordo tratteggiato: si legge come "in arrivo", non "hai
   sbagliato qualcosa". Opacita' piu' alta della disabled generica, se no sparisce. */
.pay-actions .btn.pay-off[disabled]{opacity:.7;background:transparent;color:var(--soft,#6b6b6b);
  border:1px dashed var(--linea,#d8d5cd);font-weight:600}

.badge-st{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.badge-st.ok{background:#f0fdf4;color:var(--verde);border:1px solid #bbf7d0}
.badge-st.wait{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.badge-st.prog{background:var(--sfondo-alt);color:var(--grigio);border:1px solid var(--linea)}
.orow{cursor:default}
.odetail td{background:var(--sfondo-alt)}

@media(max-width:960px){
  .prod-grid{grid-template-columns:1fr 1fr}
  .toolbar{top:60px}
  .header-user{flex-wrap:wrap}
}

/* ===== Scheda prodotto (pdp) ===== */
.crumb{padding:22px 0 0}
.crumb a{font-size:13.5px;font-weight:600;color:var(--grigio);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;padding:18px 0 90px;align-items:start}
/* Stessa regola del riquadro catalogo: box quadrato fisso, foto contenuta dentro. */
.pdp-main{background:#fff;border:1px solid var(--linea);border-radius:16px;overflow:hidden;
  aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:16px;cursor:zoom-in}
.pdp-main img{width:100%;height:100%;object-fit:contain;
  display:block;transition:transform .18s ease}
.pdp-main img.zoom{transform:scale(1.9)}
/* [2026-07-20 Jacopo] miniature in COLONNA a sinistra della foto grande.
   Sotto i 700px tornano in fila orizzontale: in colonna, su telefono,
   mangerebbero meta' larghezza alla foto principale. */
.pdp-gallery{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:start}
.pdp-thumbs{display:flex;flex-direction:column;gap:10px;margin:0;order:-1}
.pdp-thumbs img{width:74px;height:74px;object-fit:contain;background:#fff;border:1.5px solid var(--linea);
  border-radius:12px;cursor:pointer;padding:4px}
.pdp-thumbs img.on,.pdp-thumbs img:hover{border-color:var(--ink)}
@media (max-width:700px){
  .pdp-gallery{grid-template-columns:1fr}
  .pdp-thumbs{flex-direction:row;flex-wrap:wrap;order:0;margin-top:12px}
}

/* Bottone carrello: solo l'icona (2026-07-20 Jacopo) */
.btn-carrello{padding:11px 18px;line-height:1;font-size:20px}
.btn-carrello .ico-carrello{display:inline-block;transform:translateY(1px)}
.btn-carrello.dentro{background:var(--verde);border-color:var(--verde)}
.btn-carrello.dentro::after{content:" ✓";font-size:15px}

/* Stepper della scheda: il numero e' scrivibile e sta al centro, i segni
   sono leggibili (prima il + spariva sul fondo chiaro). */
.pdp-ctl .stepper{align-items:stretch}
.pdp-ctl .stepper .qty{min-width:70px;text-align:center;font-size:15px;font-weight:700;
  background:var(--carta);color:var(--ink);border:none;padding:0 4px}
.pdp-ctl .stepper .qty:focus{outline:2px solid var(--giallo);outline-offset:-2px}
.pdp-ctl .stepper button{font-size:20px;font-weight:800;color:var(--ink);line-height:1}

/* Pagina FAQ dedicata (2026-07-20 Jacopo: fuori dalla home, link nel footer) */
.faq-pagina{padding:34px 0 70px;max-width:820px}
.faq-pagina .sec-title{font-size:38px;margin-bottom:8px}
.faq-pagina .sec-sub{margin-bottom:26px}
.faq-chiusura{margin-top:34px;padding-top:22px;border-top:1px solid var(--linea);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.faq-chiusura p{font-weight:700}

/* Striscia categorie in cima al catalogo (2026-07-20 Jacopo): le stesse sei
   della home, con le stesse foto. Scorre in orizzontale su schermi stretti. */
.cat-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);
  gap:10px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.cat-mini{scroll-snap-align:start;background:var(--carta);border:1.5px solid var(--linea);
  border-radius:12px;padding:0 0 8px;cursor:pointer;overflow:hidden;display:flex;
  flex-direction:column;gap:6px;font-family:var(--font-sans);font-size:12px;
  font-weight:700;color:var(--ink);text-align:center;line-height:1.25}
.cat-mini img{width:100%;aspect-ratio:1.5;object-fit:cover;display:block}
.cat-mini span{padding:0 8px}
.cat-mini:hover{border-color:var(--ink)}
.cat-mini.on{border-color:var(--ink);outline:2px solid var(--giallo);outline-offset:-2px}

/* Richiamo franchising/corner sotto la scheda prodotto (2026-07-20 Jacopo:
   al posto dei "visti di recente"). Fondo chiaro e non una fascia colorata:
   sta dentro la pagina prodotto, non deve gridare piu' del prodotto stesso. */
.richiamo-franchising{background:var(--sfondo-alt);border:1px solid var(--linea);
  border-radius:16px;padding:28px 30px;margin:0 0 60px}
.rf-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rf-in .sec-title{font-size:26px;margin:8px 0 6px}
.rf-in .sec-sub{margin-bottom:0;max-width:640px}
/* Il richiamo ha DUE paragrafi (corner e franchising, 2026-07-20 sera): senza
   questo si toccherebbero, perche' qui sopra .sec-sub azzera il margine. */
.rf-in .sec-sub + .sec-sub{margin-top:12px}
.rf-in .btn{flex:none}

/* Newsletter in home (2026-07-20 Jacopo, resa PIU' EVIDENTE il 20/07 sera).
   Fascia GIALLA piena: si stacca dal bianco della pagina e si vede scorrendo.
   Il bottone resta nero e non giallo, per non sparire dentro la fascia; e la
   banda rosa dell'invito a registrarsi resta DOPO, perche' registrarsi vale
   piu' che iscriversi e deve restare l'ultima cosa che si legge. */
.newsletter-b2b{background:var(--giallo);border-top:1px solid var(--giallo-scuro);
  border-bottom:1px solid var(--giallo-scuro);padding:60px 0}
.news-in{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.news-occhiello{display:inline-block;background:var(--ink);color:#fff;font-size:11px;
  font-weight:800;letter-spacing:1.6px;text-transform:uppercase;border-radius:999px;
  padding:4px 12px;margin-bottom:12px}
.news-in .sec-title{font-size:34px;line-height:1.1;margin-bottom:10px;color:var(--ink)}
.news-in .sec-sub{margin-bottom:0;color:var(--ink);opacity:.78;font-size:15.5px}
.news-form{display:grid;gap:10px}
.news-form input{padding:14px 18px;border:2px solid var(--ink);border-radius:999px;
  font-size:15px;font-family:inherit;background:var(--carta)}
.news-form input::placeholder{color:#8a8a80}
.news-form input:focus{outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.news-form .btn{padding:14px 22px;font-size:15.5px}
.news-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.news-esito{font-size:13.5px;min-height:18px;color:var(--ink);font-weight:600}
.news-esito.ok{color:#0b5d34;font-weight:800}
.news-esito.err{color:#8c1b1b;font-weight:800}
.news-nota{font-size:11.5px;color:var(--ink);opacity:.65;line-height:1.45}
.news-ciao{font-weight:700;font-size:14px;align-self:center;margin-right:4px}
@media (max-width:800px){
  .news-in{grid-template-columns:1fr;gap:24px}
  .news-in .sec-title{font-size:27px}
}

/* Carrello in alto: solo l'icona (2026-07-20 Jacopo). Il testo resta per chi
   usa uno screen reader, nascosto alla vista ma non all'assistenza vocale. */
.btn-carrello-top{display:inline-flex;align-items:center;gap:6px;font-size:17px;padding:8px 14px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Avviso sconto cartone: sta accanto alla quantita', dove si decide (2026-07-20) */
.pdp-cartone{background:#f2fbf5;border:1px solid #b7e3c6;border-radius:12px;
  padding:10px 14px;font-size:13.5px;margin:8px 0 4px;color:var(--ink)}
.pdp-cartone b{color:var(--verde)}
.link-cartone{background:none;border:none;padding:0;font:inherit;font-weight:700;
  color:var(--verde);text-decoration:underline;cursor:pointer}

/* Barra "potrebbero interessarti" / "visti di recente" */
.pdp-correlati{padding:0 0 46px}
.pdp-correlati .sec-title{font-size:22px;margin-bottom:14px}
.corr-riga{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);
  gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.corr-card{scroll-snap-align:start;text-decoration:none;color:inherit;background:var(--carta);
  border:1px solid var(--linea);border-radius:14px;padding:10px;display:flex;
  flex-direction:column;gap:6px}
.corr-card:hover{border-color:var(--ink)}
.corr-img{display:block;aspect-ratio:1;background:#fff;border-radius:10px;overflow:hidden}
.corr-img img{width:100%;height:100%;object-fit:contain;display:block}
.corr-nome{font-size:12.5px;font-weight:600;line-height:1.3;height:calc(2 * 1.3em);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.corr-prezzo{font-family:var(--font-display);font-size:17px}
.corr-prezzo small{font-family:var(--font-sans);font-size:10.5px;color:var(--grigio);font-weight:600}
.pdp-title{font-family:var(--font-display);font-size:34px;font-weight:400;letter-spacing:.3px;
  line-height:1.15;margin:6px 0 4px}
.pdp-codes{font-size:12.5px;color:#9a9a92;margin-bottom:14px}
.pdp-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pdp-price{font-family:var(--font-display);font-size:38px;font-weight:400;letter-spacing:.3px}
.pdp-price span{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--grigio)}
.pdp-sugg{font-size:13.5px;color:var(--grigio)}
.pdp-info .prod-moq{margin-top:14px}
.pdp-info .prod-stock{margin-top:10px}
.pdp-ctl{display:flex;gap:12px;margin-top:20px;align-items:stretch}
.pdp-ctl .stepper{width:190px}
.pdp-specs{margin-top:22px;font-size:14px;color:var(--grigio);border-top:1px solid var(--linea);padding-top:16px}
.pdp-long{margin-top:12px;font-size:14.5px;line-height:1.7;white-space:pre-line}
.pdp-empty{text-align:center;padding:80px 0 110px}
.pdp-empty h2{font-family:var(--font-display);font-size:30px;font-weight:400;letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:8px}
.pdp-empty p{color:var(--grigio);margin-bottom:22px}

/* Card catalogo cliccabili verso la scheda prodotto */
.prod-img a{display:block;width:100%;height:100%}
.prod-body h3 a{text-decoration:none}
.prod-body h3 a:hover{text-decoration:underline}

@media(max-width:960px){
  .pdp{grid-template-columns:1fr;gap:24px;padding-bottom:120px}
  .pdp-title{font-size:27px}
  .pdp-ctl{flex-direction:column}
  .pdp-ctl .stepper{width:100%}
}