/* GED-PORTALE  versione foglio di stile: V3  -  31/07/2026 ore 22  */
/* ============================================================
   GeD Ingross — Portale B2B  ·  Design system
   Blu istituzionale + arancio. Font: Bricolage Grotesque / Manrope
   ============================================================ */
@font-face{
  font-family:'Manrope';
  src:url('fonts/manrope-latin-var.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}
:root{
  --topbar-h:68px;
  --hero-band-h:172px;
  --blu:#0E2A6B; --blu-2:#16357f; --blu-3:#1d44a0; --blu-ink:#081a45;
  --gold:#f5a623; --gold-d:#e0941a;
  --verde:#10915a; --verde-bg:#e7f6ee;
  --rosso:#d23b2e; --rosso-bg:#fdecea;
  --ambra:#b6791a; --ambra-bg:#fef4e2;
  --bg:#f3f5fa; --surface:#fff; --line:#e6eaf2; --line-2:#eef1f7;
  --ink:#141a2e; --ink-soft:#5b6480; --ink-mute:#8a92a8;
  --r-sm:9px; --r:13px; --r-lg:18px; --r-xl:24px;
  --sh-sm:0 1px 3px rgba(14,42,107,.06),0 1px 2px rgba(14,42,107,.04);
  --sh:0 4px 16px rgba(14,42,107,.08);
  --sh-lg:0 12px 36px rgba(14,42,107,.16);
  --sh-xl:0 24px 60px rgba(8,26,69,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
*{scrollbar-width:thin;scrollbar-color:var(--blu-3) #dbe4f7}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topbar-h);
  padding-bottom:max(0px, env(safe-area-inset-bottom));
}
.auth-page{
  padding-top:0;
  background:linear-gradient(150deg,var(--blu) 0%,var(--blu-ink) 100%);
}
.auth-page .auth{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 52% 50%,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 72% 52%,rgba(106,137,214,.12) 0%,rgba(106,137,214,0) 28%),
    linear-gradient(135deg,rgba(8,26,69,.22) 0%,rgba(29,68,160,.10) 100%);
}
.auth-page .auth::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.012) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,.028) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.01) 100%),
    linear-gradient(180deg,rgba(255,255,255,.016) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.02) 100%);
  pointer-events:none;
}
.auth-page .auth::after{
  content:"";
  position:absolute;
  top:8%;
  bottom:8%;
  left:52.4%;
  width:1px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.26) 18%,rgba(153,180,245,.42) 50%,rgba(255,255,255,.24) 82%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 0 24px rgba(125,157,233,.18),0 0 56px rgba(8,26,69,.22);
  opacity:.92;
  pointer-events:none;
}
.auth-page .auth > *{
  position:relative;
  z-index:1;
}
.auth-page .auth .left{
  background:transparent;
}
.auth-page .auth .right{
  background:linear-gradient(90deg,rgba(255,255,255,.008) 0%,rgba(255,255,255,.026) 100%);
}
.auth-page .auth-card{
  max-width:430px;
  padding:36px 34px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.52);
  border-radius:28px;
  box-shadow:0 24px 60px rgba(8,26,69,.24);
  backdrop-filter:blur(8px);
}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#dbe4f7}
*::-webkit-scrollbar-thumb{background:var(--blu-3);border-radius:999px;border:2px solid #dbe4f7}
*::-webkit-scrollbar-thumb:hover{background:var(--blu)}
h1,h2,h3,.display{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
a{color:var(--blu);text-decoration:none}
button{font-family:inherit}
img{display:block}

/* ---------------- TOP BAR ---------------- */
.topbar{
  background:linear-gradient(180deg,var(--blu) 0%,var(--blu-ink) 140%);
  color:#fff;height:68px;padding:0 clamp(16px,3vw,32px);
  display:flex;align-items:center;gap:14px;position:fixed;top:0;left:0;right:0;z-index:120;
  box-shadow:0 2px 20px rgba(8,26,69,.25);
}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand-logo{display:block;height:46px;width:auto;max-width:240px;object-fit:contain}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--gold),var(--gold-d));display:grid;place-items:center;color:var(--blu-ink);font-weight:800;font-size:18px;box-shadow:0 3px 10px rgba(245,166,35,.4)}
.brand b{color:var(--gold)}
.nav{display:flex;gap:6px;margin-left:8px}
.nav a{color:#cdd6ee;font-weight:600;font-size:14.5px;padding:8px 14px;border-radius:10px;transition:.18s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav a.on{color:#fff;background:rgba(255,255,255,.16)}
.tb-spacer{flex:1 1 auto;min-width:0}
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;margin-right:4px}
.who .n{font-weight:700;font-size:14px}
.who .l{font-size:11.5px;color:#aab6dd}
.topbar-catalog-strip{flex:1 1 620px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px 6px 10px;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(121,156,247,.16) 100%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.topbar-catalog-strip-main{display:grid;grid-template-columns:minmax(0,1.35fr) auto;align-items:center;gap:8px;min-width:0}
.topbar-catalog-intro{display:flex;flex-direction:column;gap:1px;min-width:0}
/* Il testo va tagliato con i puntini come fanno le due righe sotto: senza,
   quando la barra si stringe (fra 980 e 1300 px, cioe' su un tablet e su
   molti portatili) questa scritta esce dal suo riquadro e si stampa SOPRA
   "SPESA ATTUALE IVATA", rendendo illeggibili tutte e due. */
.topbar-catalog-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#bfd0ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-catalog-intro strong{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;line-height:1.03;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-catalog-intro small{font-size:11px;line-height:1.2;color:#dbe6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-catalog-spend{display:flex;flex-direction:column;gap:1px;padding:4px 8px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.topbar-catalog-spend strong{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;line-height:1;color:#fff}
.topbar-catalog-cart{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'count label' 'count cta';align-items:center;column-gap:7px;row-gap:0;min-width:152px;padding:6px 8px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;text-align:left;transition:background .16s var(--ease),border-color .16s var(--ease)}
.topbar-catalog-cart:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.topbar-catalog-cart b{grid-area:count;display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:#fff;color:var(--blu);font-size:12px;font-weight:900}
.topbar-catalog-cart span{grid-area:label;font-size:11px;font-weight:900;color:#fff}
.topbar-catalog-cart small{grid-area:cta;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#dbe6ff}
.topbar-price-toggle{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.10) 100%);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(8,26,69,.16)}
.topbar-price-btn{min-width:74px;min-height:32px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:#dbe6ff;font-size:12px;font-weight:900;letter-spacing:.02em;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.topbar-price-btn:hover{background:rgba(255,255,255,.10);color:#fff}
.topbar-price-btn.is-active{background:linear-gradient(135deg,#ffd978 0%,#ffbf2f 100%);color:var(--blu-ink);box-shadow:0 8px 18px rgba(245,166,35,.26)}
.icon-btn{background:rgba(255,255,255,.12);border:0;color:#fff;width:42px;height:42px;border-radius:12px;cursor:pointer;display:grid;place-items:center;position:relative;transition:.18s}
.icon-btn:hover{background:rgba(255,255,255,.22)}
.icon-btn svg{width:21px;height:21px}
.cart-count{position:absolute;top:-5px;right:-5px;background:var(--gold);color:var(--blu-ink);font-weight:800;font-size:11px;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;padding:0 5px;border:2px solid var(--blu-ink);transition:transform .2s var(--ease)}
.cart-count.pulse{transform:scale(1.35)}
.logout{color:#aab6dd;font-size:13px;font-weight:600}
.logout:hover{color:#fff}
.login-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:800;transition:.18s}
.login-link:hover{background:rgba(255,255,255,.24);color:#fff}

/* ---------------- HERO STRIP ---------------- */
.hero{background:linear-gradient(110deg,var(--blu) 0%,var(--blu-3) 100%);color:#fff;padding:30px clamp(16px,4vw,40px) 64px;position:relative;overflow:hidden;z-index:4}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(245,166,35,.25),transparent 70%);border-radius:50%}
.hero .wrap{max-width:1320px;margin:0 auto;position:relative;z-index:5}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.68fr);align-items:center;gap:36px}
.hero-layout-guest{grid-template-columns:minmax(0,1.08fr) minmax(260px,.72fr)}
.hero-main{min-width:0;display:flex;flex-direction:column;justify-content:center;align-self:center;padding:8px 0}
.hero h1{font-size:clamp(24px,3.4vw,38px);font-weight:800;line-height:1.05;max-width:720px}
.hero p{color:#cdd6ee;margin-top:10px;font-size:15.5px;max-width:660px}
.hero-badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.hbadge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.hbadge .d{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.guest-hero{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#d9e4ff;font-size:14px;font-weight:600}
.guest-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-login-hero{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--blu-ink);padding:11px 18px;border-radius:12px;font-weight:800;box-shadow:var(--sh)}
.btn-login-hero:hover{color:var(--blu-ink);background:#f8faff}
.btn-login-hero-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:none}
.btn-login-hero-secondary:hover{background:rgba(255,255,255,.18);color:#fff}

/* search big */
.search-xl{margin-top:26px;display:flex;gap:10px;max-width:780px}
.search-xl .field{flex:1;position:relative}
.search-xl input{width:100%;padding:15px 18px 15px 50px;border:0;border-radius:14px;font-size:16px;font-family:inherit;box-shadow:var(--sh-lg);outline:none}
.search-xl .field svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-mute)}
.search-xl > button{background:var(--gold);color:var(--blu-ink);border:0;padding:0 26px;border-radius:14px;font-weight:800;font-size:16px;cursor:pointer;box-shadow:var(--sh-lg);transition:.18s}
.search-xl > button:hover{background:var(--gold-d)}
.search-scan-btn{display:none}
.hero-balance{position:relative;display:flex;flex-direction:column;gap:14px;justify-self:center;align-self:center;min-width:0;width:min(100%, 420px);padding:4px 0}
.hero-balance::before{content:"";position:absolute;inset:50% auto auto 50%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 74%);transform:translate(-20%,-45%);filter:blur(8px);pointer-events:none}
.hero-balance-card{position:relative;display:flex;flex-direction:column;gap:5px;padding:18px 20px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.06) 100%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 36px rgba(8,26,69,.14);backdrop-filter:blur(12px)}
.hero-balance-card-primary{padding:20px 22px;min-height:132px;justify-content:center}
.hero-balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-balance-kicker{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#bfd0ff}
.hero-balance-card strong{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;line-height:1.02;color:#fff;letter-spacing:-.03em}
.hero-balance-card-primary strong{font-size:27px;max-width:260px}
.hero-balance-card small{font-size:12px;line-height:1.35;color:#dbe6ff}
/* ---------------- LAYOUT ---------------- */
.shell{max-width:1320px;margin:-36px auto 0;padding:0 clamp(16px,4vw,40px) 60px;position:relative;z-index:1;--catalog-sticky-top:calc(var(--topbar-h) + 18px)}
.shell-guest{margin:12px auto 0}
.shell-with-hero-band{margin:10px auto 0}
.grid-2{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.grid-2 main{min-width:0;display:flex;flex-direction:column;min-height:0}

/* sidebar — il menu delle categorie (rifatto il 23/09/2026).
   Perche': nella foto di Fabio le righe erano alte 50 px l'una (poche
   categorie in vista), i numeri stavano in pillole di larghezza diversa
   che non facevano colonna e avevano un grigio da 3,1:1 (sotto il minimo
   di 4,5), e sopra la lista c'erano due insegne («Navigazione rapida» e
   «CATEGORIE») che dicevano la stessa cosa. Ora: un titolo solo, righe da
   38 px, numeri a cifre tabellari allineati a destra in una colonna fissa,
   sottocategorie con lo stesso schema nome/numero dei genitori. */
.side{background:#fff;
  border:1px solid rgba(14,42,107,.08);border-radius:20px;padding:12px 12px 0;box-shadow:0 10px 28px rgba(14,42,107,.08);position:sticky;top:var(--catalog-sticky-top);max-height:calc(100vh - var(--catalog-sticky-top) - 24px);overflow:auto}
.side::before{content:"";display:block;height:4px;margin:-12px -12px 12px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--blu) 72%,var(--gold) 100%)}
/* Il velo in fondo: quando la lista scorre resta appiccicato al bordo
   inferiore e sfuma le ultime voci («c'e' altro sotto»); a fine lista si
   posa dopo l'ultima voce e fa da margine, senza coprire niente. */
.side::after{content:"";position:sticky;bottom:0;display:block;height:14px;margin:0 -12px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 85%);pointer-events:none}
.side h4{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.1;color:var(--blu-ink);margin:0 2px 6px;padding:6px 10px 11px;border-bottom:1px solid var(--line-2)}
.side .cat{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:38px;padding:8px 10px 8px 15px;border-radius:11px;color:var(--ink);font-size:13.5px;font-weight:700;line-height:1.3;transition:background-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);list-style:none;cursor:pointer}
.side > .cat{margin-bottom:2px}
.side .cat::before{content:"";position:absolute;left:5px;top:50%;width:3px;height:0;transform:translateY(-50%);border-radius:999px;background:var(--gold);transition:height .18s var(--ease)}
.side .cat:hover::before{height:14px}
.side .cat.on::before{height:20px}
.side .cat::-webkit-details-marker{display:none}
.side .cat:hover{background:#eef3ff}
.side .cat.on{background:linear-gradient(135deg,var(--blu) 0%,#1d44a0 100%);color:#fff;box-shadow:0 6px 16px rgba(14,42,107,.18)}
/* Il nome puo' andare su due righe (i nomi del gestionale sono lunghi):
   text-wrap:balance spezza a meta' invece di lasciare una parola orfana,
   e il numero resta agganciato alla prima riga. */
.cat-label{display:block;flex:1 1 auto;min-width:0;padding-top:2px;line-height:1.3;overflow-wrap:anywhere;word-break:break-word;text-wrap:balance}
.cat-meta{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:1px}
/* La colonna dei numeri: larghezza fissa, cifre tabellari, allineati a
   destra: le unita' stanno sotto le unita' su tutte le righe. Grigio
   --ink-soft (5,9:1 sul bianco), niente cornice. */
.side .cat .c{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-end;min-width:42px;height:20px;margin-top:1px;padding:0 2px;font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";transition:color .15s var(--ease)}
.side .cat:hover .c{color:var(--blu)}
.side .cat.on .c{color:#fff}
.cat-group{margin-bottom:2px}
.cat-arrow{font-size:15px;line-height:1;color:inherit;transition:transform .18s var(--ease)}
.cat-group[open] .cat-arrow{transform:rotate(45deg)}
.cat-link-all{display:block;margin:6px 0 0 12px;padding:9px 12px;font-size:12px;font-weight:800;color:var(--blu);border-radius:10px}
.cat-link-all:hover{background:#eef3ff}
.side .sub{padding:2px 0 2px 10px;border-left:2px solid rgba(29,68,160,.10);margin:4px 0 6px 15px}
.side .sub a{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:32px;padding:6px 8px 6px 10px;border-radius:9px;font-size:13px;line-height:1.3;color:var(--ink-soft);font-weight:600;transition:background-color .15s var(--ease),color .15s var(--ease)}
.side .sub a .cat-label{padding-top:0;line-height:18px}
.side .sub a .c{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-end;min-width:42px;height:18px;padding:0 2px;font-size:12px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.side .sub a:hover{background:#eef3ff;color:var(--ink)}
.side .sub a.on{background:rgba(29,68,160,.08);color:var(--blu);font-weight:800}
.side .sub a.on .c{color:var(--blu)}
/* Il pallino ambra sulla guida: segna la sottocategoria aperta. */
.side .sub a.on::before{content:"";position:absolute;left:-15px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #fff}
/* Da tastiera l'anello di fuoco e' blu, fuori dalla riga: si vede anche
   sulla voce attiva (che e' blu dentro) e sullo sfondo del cassetto. */
.side .cat:focus-visible,.side .sub a:focus-visible{outline:2px solid var(--blu-3);outline-offset:2px}
/* In modalita' app (telefono vero, app-bridge/ged-app.min.css) il menu e'
   una striscia di chip orizzontale: il velo in fondo, le altezze minime e la
   colonna dei numeri del cassetto non valgono e si azzerano, o i chip
   crescono da 34 a 48 px e i numeri si staccano dal nome. */
html.ged-app .catalog-shell .side::after{display:none}
html.ged-app .catalog-shell .side .cat,html.ged-app .catalog-shell .side .sub a{min-height:0}
html.ged-app .catalog-shell .side .cat .c,html.ged-app .catalog-shell .side .sub a .c{min-width:30px;height:22px;margin-top:0;justify-content:center}
/* I numeri dei chip in modalita' app si leggono (23/09/2026 sera): il grigio
   di ged-app.min.css (--ged-text-3, #8494B8) sul bianco dava 3,04:1, sotto
   il 4,5:1 che serve a un testo cosi' piccolo (10,5 px). Il grigio del testo
   secondario della stessa app (--ged-text-2, #5b6480) da' 5,87:1. «a.cat»
   invece di «.cat» per vincere su quella regola, che ha lo stesso peso e si
   carica dopo; il chip acceso (a.cat.on, 7,8:1 sul blu) resta com'e'. */
html.ged-app .catalog-shell .side a.cat .c{color:var(--ged-text-2,#5b6480)}
/* Il + spento si riconosce anche in modalita' app (difetto 272): il foglio
   dell'app colora il tasto «aggiungi» della scheda e della finestra col blu
   pieno anche quando e' spento, e un articolo non ordinabile sembrava
   ordinabile. Stesso grigio-azzurro dei tasti spenti fuori dall'app. */
html.ged-app .cards .card .buy .add:disabled,html.ged-app .cards .card .buy .add.disabled,
html.ged-app #modal .buy .add:disabled,html.ged-app #modal .buy .add.disabled{background:#aeb6cc;box-shadow:none;cursor:not-allowed}
html.ged-app .catalog-shell .side .cat-label{padding-top:0;line-height:inherit}
/* La barra di scorrimento del menu: sottile, in tinta, discreta. */
.side{scrollbar-width:thin;scrollbar-color:rgba(14,42,107,.22) transparent}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-track{background:transparent}
.side::-webkit-scrollbar-thumb{background:rgba(14,42,107,.18);border-radius:999px}
.side::-webkit-scrollbar-thumb:hover{background:rgba(14,42,107,.34)}

/* toolbar */
.catalog-head{margin-bottom:6px;position:relative;top:auto;z-index:auto}
.catalog-head-copy{display:flex;flex-direction:column;gap:5px;padding:9px 11px;border:1px solid rgba(14,42,107,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(246,249,255,.965) 100%);
  box-shadow:0 6px 16px rgba(14,42,107,.06);
  position:relative;overflow:visible;backdrop-filter:blur(10px)}
.catalog-body-scroll{min-height:0}
.catalog-head-copy::before{display:none}
.catalog-head-copy::after{display:none}
.catalog-mobile-bar{display:none}
.mobile-catalog-trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:64px;
  padding:10px 12px;
  border:1px solid rgba(14,42,107,.09);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(241,245,253,.96) 100%);
  box-shadow:0 10px 24px rgba(14,42,107,.075);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease),background .2s var(--ease);
}
.mobile-catalog-trigger::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 42%,rgba(121,156,247,.08) 100%);
  pointer-events:none;
}
.mobile-catalog-trigger::after{
  content:"›";
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(14,42,107,.05);
  color:var(--blu);
  font-size:20px;
  font-weight:900;
  line-height:1;
  flex:0 0 28px;
  position:relative;
  z-index:1;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.mobile-catalog-trigger[aria-expanded="true"]{
  border-color:rgba(29,68,160,.16);
  background:linear-gradient(180deg,#ffffff 0%,#eef4ff 100%);
  box-shadow:0 14px 30px rgba(14,42,107,.10);
}
.mobile-catalog-trigger[aria-expanded="true"]::after{
  transform:rotate(90deg);
  background:rgba(29,68,160,.10);
}
.mobile-catalog-trigger-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blu) 0%,var(--blu-3) 100%);
  color:#fff;
  flex:0 0 38px;
  box-shadow:0 8px 18px rgba(14,42,107,.18);
  position:relative;
  z-index:1;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.mobile-catalog-trigger-icon svg{width:18px;height:18px}
.mobile-catalog-trigger[aria-expanded="true"] .mobile-catalog-trigger-icon{
  transform:translateX(1px);
  box-shadow:0 10px 22px rgba(14,42,107,.22);
}
.mobile-catalog-trigger-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;position:relative;z-index:1}
.mobile-catalog-trigger-copy strong{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;line-height:1.05;color:var(--blu-ink)}
/* Il sottotitolo del tasto «Menu categorie» (la categoria in cui si e') in
   --ink-soft: in --ink-mute sul bianco dava 3,1:1, poco per 12 px (23/09). */
.mobile-catalog-trigger-copy small{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-catalog-trigger-meta{
  min-width:34px;
  height:28px;
  padding:0 9px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(14,42,107,.08) 0%,rgba(14,42,107,.04) 100%);
  color:var(--blu);
  font-size:11px;
  font-weight:900;
  position:relative;
  z-index:1;
}
.side-mobile-head{display:none}
.catalog-side-overlay{display:none}
.toolbar{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(320px,.95fr);align-items:start;gap:10px;margin-bottom:16px}
.toolbar{margin-bottom:0}
.toolbar .count{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;position:relative;z-index:1;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(14,42,107,.045) 0%,rgba(29,68,160,.075) 100%);border:1px solid rgba(14,42,107,.08);box-shadow:var(--sh-sm)}
.count-main{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.count-number{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;line-height:1;color:var(--blu);font-weight:800;letter-spacing:-.03em}
.count-text{font-size:15px;font-weight:800;color:var(--ink-soft);padding-bottom:4px}
.count-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:0}
.count-badge{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(29,68,160,.08);color:var(--blu-3);font-size:12px;font-weight:800;border:1px solid rgba(29,68,160,.1)}
.context-pill{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:rgba(16,145,90,.08);color:var(--verde);font-size:12px;font-weight:800;border:1px solid rgba(16,145,90,.12)}
.context-pill.alt{background:rgba(245,166,35,.10);color:#996411;border-color:rgba(245,166,35,.18)}
.toolbar .right{margin-left:0;display:block;position:relative;z-index:1}
.catalog-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,248px);align-items:stretch;gap:8px;padding:8px;border-radius:18px;background:linear-gradient(180deg,#f5f8fe 0%,#eef3fb 100%);border:1px solid rgba(14,42,107,.07);box-shadow:var(--sh-sm)}
.sortbox{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid rgba(14,42,107,.08);box-shadow:0 8px 20px rgba(14,42,107,.05)}
.sortbox-label{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.sortsel{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;outline:none;box-shadow:0 1px 2px rgba(14,42,107,.04);min-width:210px}
.price-toggle-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:#fff;border:1px solid rgba(14,42,107,.08);border-radius:16px;box-shadow:0 8px 20px rgba(14,42,107,.05)}
.price-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:linear-gradient(180deg,#eaf0fb 0%,#f8fbff 100%);border:1px solid #d9e3f3;box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.price-toggle-btn{min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink-soft);font-size:13px;font-weight:900;cursor:pointer;transition:.18s;letter-spacing:.02em}
.price-toggle-btn:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.price-toggle-btn.is-active{background:linear-gradient(135deg,#ffd978 0%,#ffbf2f 100%);color:var(--blu-ink);box-shadow:0 10px 24px rgba(245,166,35,.30);transform:translateY(-1px)}
.crumbs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11px;color:var(--ink-mute);font-weight:800;line-height:1.3}
.crumb-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(245,166,35,.16)}
.crumbs span{color:#aeb7cc}
.crumbs b{color:var(--blu)}

/* pagination */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}
.page-numbers{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-btn,.page-num,.page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:11px;font-size:14px;font-weight:800}
.page-btn,.page-num{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-sm);transition:.16s}
.page-btn:hover,.page-num:hover{background:var(--bg);border-color:#d6deef}
/* La pagina corrente: il catalogo la segna con «on», l'admin (storico
   ordini e lista clienti) con «is-active» (27/09/2026). Prima «is-active»
   non aveva regola e il numero della pagina in cui eri era bianco come
   gli altri. */
.page-num.on,.page-num.is-active{background:var(--blu);border-color:var(--blu);color:#fff}
.page-btn.disabled{pointer-events:none;opacity:.45}
.page-gap{color:var(--ink-mute);min-width:auto;padding:0 2px}

.catalog-body-scroll{
  overflow:visible;
  max-height:none;
  padding-right:0;
  padding-bottom:0;
}

/* ---------------- PRODUCT GRID ---------------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;grid-auto-rows:1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease);position:relative;height:100%;content-visibility:auto;contain-intrinsic-size:520px}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:#d6deef}
.card .ph{height:228px;background:#fff;display:grid;place-items:center;padding:14px;cursor:pointer;position:relative;border-bottom:1px solid var(--line-2)}
.card .ph img{transition:transform .25s var(--ease)}
.product-media{width:100%;height:100%;display:grid;place-items:center;overflow:hidden;position:relative;background:linear-gradient(180deg,#fff 0%,#f8faff 100%)}
.product-media::before{content:"";position:absolute;inset:18px;border-radius:20px;background:linear-gradient(110deg,rgba(221,228,242,.35) 8%,rgba(244,247,253,.92) 18%,rgba(221,228,242,.35) 33%);background-size:200% 100%;opacity:0;transition:opacity .22s ease;pointer-events:none}
.product-media.is-pending::before{opacity:1;animation:mediaShimmer 1.4s linear infinite}
.product-img{width:100%;height:100%;object-fit:contain;object-position:center center;opacity:1;transform:translateY(0);transition:opacity .24s ease,transform .24s ease}
.product-img.is-pending{opacity:0;transform:translateY(8px)}
.product-img.is-ready{opacity:1;transform:translateY(0)}
.product-media .product-img.img-ultra-portrait{max-width:132px;max-height:186px}
.product-media .product-img.img-portrait{max-width:154px;max-height:188px}
.product-media .product-img.img-square{max-width:176px;max-height:176px}
.product-media .product-img.img-landscape{max-width:188px;max-height:152px}
@keyframes mediaShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card:hover .ph img{transform:scale(1.05)}
.tag{position:absolute;top:11px;font-size:11px;font-weight:900;padding:6px 11px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em;z-index:4}
.tag.promo{left:11px;background:linear-gradient(135deg,#ffd978 0%,#ffbf2f 100%);color:var(--blu-ink);box-shadow:0 8px 18px rgba(245,166,35,.38);border:1px solid rgba(255,255,255,.38)}
.tag.low{right:11px;background:var(--ambra-bg);color:var(--ambra)}
.tag.out{right:11px;background:var(--rosso-bg);color:var(--rosso)}
.card .body{
  padding:16px;
  display:grid;
  grid-template-areas:
    "meta"
    "name"
    "stock"
    "price"
    "info"
    "buy";
  grid-template-rows:auto minmax(48px,auto) 22px auto minmax(74px,1fr) auto;
  gap:9px;
  flex:1;
  align-content:stretch
}
.product-meta{display:flex;flex-direction:column;gap:3px;min-height:0}
.product-meta{grid-area:meta}
.card .cod{font-size:11px;color:var(--ink-mute);font-weight:700;letter-spacing:.03em;line-height:1.2}
.card .ean{font-size:12px;color:#6d7792;font-weight:800;letter-spacing:.04em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 23/09/2026 - IL NOME TAGLIATO A DUE RIGHE NON MOSTRA PIU' LA TERZA.
   Il line-clamp ferma il testo a due righe (2 x 20,7 = 41,4 px), ma il
   riquadro era alto ALMENO 48 px e la griglia lo stirava fino al fondo della
   riga: in quei 6,6 px di avanzo si vedeva la cima della terza riga nascosta
   (misurato su PRV012 a 1280 px: la scritta «D'ORO» spuntava per 7,8 px;
   3,6 px a 390). Ora il riquadro e' alto quanto le due righe e sta in cima
   alla sua riga di griglia (align-self:start): il posto minimo lo riserva
   gia' la riga della griglia (minmax(48px,auto)), non serve qui. */
.card .name{grid-area:name;font-size:15px;font-weight:800;line-height:1.38;color:var(--ink);align-self:start;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .name:hover{color:var(--blu)}
.stock{grid-area:stock;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;height:22px}
.stock .d{width:8px;height:8px;border-radius:50%}
.stock.ok{color:var(--verde)} .stock.ok .d{background:var(--verde)}
.stock.low{color:var(--ambra)} .stock.low .d{background:var(--gold)}
.stock.out{color:var(--rosso)} .stock.out .d{background:var(--rosso)}
.price-row{grid-area:price;display:flex;align-items:center;gap:10px;min-height:56px;flex-wrap:wrap}
.price{display:inline-flex;align-items:center;padding:10px 14px;border-radius:16px;background:linear-gradient(180deg,#eef4ff 0%,#ffffff 100%);border:1px solid #dfe7f5;box-shadow:0 10px 24px rgba(14,42,107,.08);font-family:'Bricolage Grotesque';font-size:28px;font-weight:800;color:var(--blu);line-height:1;letter-spacing:-.03em}
.price-unit{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:999px;background:#eff3fa;font-size:12px;font-weight:800;color:var(--ink-mute)}
.price-old{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:999px;background:#fff4de;font-size:12px;color:#996411;text-decoration:line-through;font-weight:800}
.conf{grid-area:info;font-size:11.5px;color:var(--ink-mute);font-weight:600;display:flex;gap:6px;flex-wrap:wrap;min-height:74px;align-content:flex-start}
.conf .pill{background:#f7faff;padding:6px 10px;border-radius:999px;border:1px solid #e1e8f5;font-weight:800}
.price-row.masked{align-items:center}
.price-guest{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;background:var(--bg);color:var(--ink-soft);font-weight:800;font-size:14px}
.guest-copy{font-size:12.5px;line-height:1.45;color:var(--ink-soft);min-height:54px}
.guest-card-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.guest-card-cta{display:flex;align-items:center;justify-content:center;margin-top:auto;background:var(--blu);color:#fff;border-radius:10px;padding:12px 14px;font-weight:800;font-size:14px;text-align:center}
.guest-card-cta:hover{background:var(--blu-3);color:#fff}
.guest-card-cta-secondary{background:#fff;color:var(--blu);border:1px solid var(--line)}
.guest-card-cta-secondary:hover{background:var(--bg);color:var(--blu)}
.guest-modal-note{margin-top:4px;padding:12px 14px;border-radius:12px;background:var(--bg);color:var(--ink-soft);font-size:13px;line-height:1.5}

/* stepper + add */
.buy{grid-area:buy;display:flex;flex-direction:column;gap:12px;align-self:end;min-width:0;align-items:stretch;margin-top:auto;padding-top:8px}
.stepper-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stepper-label{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 8px 18px rgba(14,42,107,.06)}
.stepper{flex:0 0 auto}
.stepper button{width:40px;height:48px;border:0;background:#fff;font-size:19px;font-weight:800;color:var(--blu);cursor:pointer;transition:.12s}
.stepper button:hover{background:var(--bg)}
.stepper input{width:54px;height:48px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:inherit;font-size:16px;font-weight:800;outline:none}
.add{width:100%;min-width:0;min-height:52px;background:linear-gradient(180deg,var(--blu) 0%,var(--blu-3) 100%);color:#fff;border:0;border-radius:16px;font-weight:900;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.16s;padding:0 18px;white-space:nowrap;box-shadow:0 14px 28px rgba(14,42,107,.22)}
.add:hover{background:linear-gradient(180deg,#1a45a5 0%,#12347d 100%);transform:translateY(-1px)}
.add:active{transform:scale(.97)}
.add svg{width:16px;height:16px;flex:0 0 auto}
.add.disabled,.add:disabled{background:#aeb6cc;cursor:not-allowed}
.add.disabled:hover{background:#aeb6cc}

/* unit toggle */
.unit-tg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:11.5px;font-weight:700}
.unit-tg button{border:0;background:#fff;padding:4px 9px;cursor:pointer;color:var(--ink-soft)}
.unit-tg button.on{background:var(--blu);color:#fff}

/* ---------------- CART DRAWER ---------------- */
/* Il velo del carrello sta SOPRA la barra alta (120): quando il cassetto
   e' aperto la pagina intera si scurisce, testata compresa, e niente
   resta cliccabile per sbaglio la' sotto. */
.overlay{position:fixed;inset:0;background:rgba(8,26,69,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s;z-index:122}
.overlay.show{opacity:1;visibility:visible}
body.has-panel-open{overflow:hidden}
/* Il cassetto del carrello era a z-index 90, SOTTO la barra alta (120):
   su telefono la testata col bottone di chiusura restava coperta e il
   primo prodotto sembrava accavallato. Ora sta sopra (125, sotto le
   schede prodotto a 130): la sua testata si vede SEMPRE. */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--bg);box-shadow:var(--sh-xl);transform:translateX(100%);transition:transform .32s var(--ease);z-index:125;display:flex;flex-direction:column}
.drawer.show{transform:translateX(0)}
.drawer-head{background:var(--blu);color:#fff;padding:20px 22px;display:flex;align-items:center;justify-content:space-between}
.drawer-head h3{font-size:19px;font-weight:800}
.drawer-head .x{background:rgba(255,255,255,.15);border:0;color:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:20px;line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:16px}
.ci{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;gap:12px;margin-bottom:10px;animation:slideup .3s var(--ease)}
.ci .ci-img{width:58px;height:58px;border-radius:9px;border:1px solid var(--line-2);object-fit:contain;background:#fff;flex-shrink:0;padding:4px}
.ci .ci-main{flex:1;min-width:0}
.ci .ci-name{font-size:13px;font-weight:700;line-height:1.3;margin-bottom:3px}
.ci .ci-cod{font-size:11px;color:var(--ink-mute);font-weight:600}
.ci .ci-bot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ci .mini-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ci .mini-step button{width:28px;height:30px;border:0;background:#fff;font-size:15px;font-weight:700;color:var(--blu);cursor:pointer}
.ci .mini-step input{width:38px;height:30px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:inherit;font-weight:700;font-size:13px;outline:none}
.ci .ci-price{font-weight:800;color:var(--blu);font-size:15px}
.ci .ci-rm{background:0;border:0;color:var(--ink-mute);cursor:pointer;font-size:11px;font-weight:700;margin-top:4px;padding:0}
.ci .ci-rm:hover{color:var(--rosso)}
.drawer-empty{text-align:center;padding:50px 20px;color:var(--ink-mute)}
.drawer-empty svg{width:64px;height:64px;opacity:.3;margin-bottom:14px}
.drawer-foot{background:#fff;border-top:1px solid var(--line);padding:18px 22px}
.dtot{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;color:var(--ink-soft)}
.dtot.big{font-size:19px;font-weight:800;color:var(--ink);margin-top:8px;padding-top:10px;border-top:1px solid var(--line-2)}
.dtot.big b{color:var(--blu)}
.btn-go{display:block;width:100%;background:var(--gold);color:var(--blu-ink);border:0;text-align:center;padding:15px;border-radius:13px;font-weight:800;font-size:16px;cursor:pointer;margin-top:14px;transition:.16s}
.btn-go:hover{background:var(--gold-d);text-decoration:none;color:var(--blu-ink)}

/* ---------------- PRODUCT MODAL ---------------- */
.modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal .box{position:relative;background:#fff;border-radius:var(--r-xl);max-width:700px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--sh-xl);display:grid;grid-template-columns:1fr 1fr;animation:pop .3s var(--ease)}
.modal-loading{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.modal-loading-media,.modal-loading-kicker,.modal-loading-title,.modal-loading-line,.modal-loading-grid span,.modal-loading-cta{
  background:linear-gradient(110deg,rgba(221,228,242,.55) 8%,rgba(244,247,253,.96) 18%,rgba(221,228,242,.55) 33%);
  background-size:200% 100%;
  animation:mediaShimmer 1.25s linear infinite;
}
.modal-loading-media{margin:30px;border-radius:26px;min-height:420px}
.modal-loading-copy{padding:34px 30px;display:flex;flex-direction:column;gap:14px}
.modal-loading-kicker{width:96px;height:14px;border-radius:999px}
.modal-loading-title{width:76%;height:34px;border-radius:16px}
.modal-loading-line{width:88%;height:16px;border-radius:999px}
.modal-loading-line.short{width:62%}
.modal-loading-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.modal-loading-grid span{display:block;height:74px;border-radius:14px}
.modal-loading-cta{width:220px;height:48px;border-radius:16px;margin-top:8px}
.modal-preview-shell{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.modal-preview-info{display:flex;flex-direction:column;gap:14px}
.modal-preview-note{display:inline-flex;align-items:center;align-self:flex-start;min-height:28px;padding:0 12px;border-radius:999px;background:#eef4ff;color:var(--blu);font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.modal-preview-grid{margin:0}
.modal-preview-info .modal-loading-copy{padding:0;gap:12px}
.modal-error{padding:42px 28px;font-size:15px;font-weight:700;color:var(--ink)}
.modal .m-ph{background:#fff;display:grid;place-items:center;padding:22px;border-right:1px solid var(--line-2);position:relative}
.modal-media{padding:8px}
.modal .m-ph img{max-height:min(52vh,380px)}
.modal .m-ph img{width:100%;height:100%;object-fit:contain;object-position:center center}
.modal .m-ph .modal-product-img.img-ultra-portrait{max-width:180px;max-height:292px}
.modal .m-ph .modal-product-img.img-portrait{max-width:220px;max-height:300px}
.modal .m-ph .modal-product-img.img-square{max-width:276px;max-height:276px}
.modal .m-ph .modal-product-img.img-landscape{max-width:306px;max-height:236px}
.modal .m-info{padding:22px 24px 20px;position:relative}
.modal .m-x{position:absolute;top:14px;right:14px;z-index:5;background:#fff;border:1px solid var(--line,#e6eaf2);width:42px;height:42px;border-radius:999px;cursor:pointer;font-size:22px;line-height:1;color:#141a2e;box-shadow:0 4px 14px rgba(14,42,107,.14);display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease}
.modal .m-x:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(14,42,107,.22)}
.modal .m-x:active{transform:scale(.96)}
.modal .m-cod-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modal .m-cod{font-size:12px;color:var(--ink-mute);font-weight:700;letter-spacing:.04em}
.modal .m-ean{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:#f4f7fc;border:1px solid #dfe7f5;font-size:11px;color:#5d6987;font-weight:800;letter-spacing:.04em}
.modal .m-name{font-family:'Bricolage Grotesque';font-size:21px;font-weight:800;line-height:1.14;margin:5px 0 10px;color:var(--ink)}
.modal .m-cat{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-bottom:16px}
.modal .m-cat span{color:var(--blu)}
.modal .m-price{font-family:'Bricolage Grotesque';font-size:34px;font-weight:800;color:var(--blu)}
.modal .m-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.modal .m-stat{background:var(--bg);border-radius:10px;padding:8px 11px}
.modal .m-stat .k{font-size:10px;color:var(--ink-mute);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.modal .m-stat .v{font-size:14px;font-weight:800;color:var(--ink);margin-top:1px}
.modal .buy{flex-direction:column;align-items:stretch;max-width:320px}
.modal .stepper-wrap{justify-content:space-between}
.scanner-modal{position:fixed;inset:0;z-index:140;display:none;align-items:flex-end;justify-content:center;padding:14px;background:rgba(8,26,69,.58);backdrop-filter:blur(4px)}
.scanner-modal.show{display:flex}
.scanner-sheet{position:relative;width:min(100%,460px);max-height:min(92vh,760px);display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:linear-gradient(180deg,#0b245e 0%,#071a47 100%);box-shadow:var(--sh-xl);color:#fff}
.scanner-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 14px}
.scanner-head-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.scanner-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#9fb7ff}
.scanner-head strong{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;line-height:1;color:#fff}
.scanner-close{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.scanner-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:14px}
.scanner-preview{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(113,150,245,.2),rgba(11,36,94,.94));border:1px solid rgba(255,255,255,.08)}
.scanner-video{width:100%;height:100%;object-fit:cover;background:#071a47}
.scanner-reticle{position:absolute;inset:16% 10%;border:2px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:0 0 0 999px rgba(8,26,69,.24)}
.scanner-reticle::before{content:"";position:absolute;left:7%;right:7%;top:50%;height:2px;background:linear-gradient(90deg,rgba(245,166,35,0) 0%,rgba(245,166,35,.95) 16%,rgba(255,255,255,.98) 50%,rgba(245,166,35,.95) 84%,rgba(245,166,35,0) 100%);box-shadow:0 0 16px rgba(245,166,35,.45)}
.scanner-status{margin:0;font-size:13px;line-height:1.45;color:#dbe6ff}
.scanner-status[data-tone="warn"]{color:#ffd58a}
.scanner-status[data-tone="ok"]{color:#bdf5d4}
.scanner-zoom{display:flex;align-items:center;gap:10px;color:#dbe6ff;font-size:12.5px;font-weight:700}
.scanner-zoom input{flex:1;accent-color:var(--gold);min-height:28px}
.scanner-actions{display:flex;gap:10px}
.scanner-btn{flex:1;min-height:54px;padding:0 16px;border:0;border-radius:15px;font-size:15px;font-weight:900;letter-spacing:.01em;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform 80ms}
.scanner-btn:active{transform:scale(.97)}
.scanner-btn-primary{background:linear-gradient(180deg,#f8bf38 0%,#f0a91f 100%);color:var(--blu-ink)}
.scanner-btn-secondary{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26)}
/* Torcia ACCESA: giallo pieno, si vede anche al sole. Prima questa classe
   veniva messa dal codice ma non aveva vestito: stato invisibile. */
.scanner-btn.scanner-torch-on{background:linear-gradient(180deg,#f8bf38 0%,#f0a91f 100%);color:var(--blu-ink,#081a45);border-color:transparent}

/* ---- Il foglio-risultato DENTRO lo scanner: la pistola da magazzino ----
   Bip -> gli angoli del mirino si accendono di verde e sale un foglio
   bianco morbido: foto grande, numero gigante coi +/- e «Scansiona il
   prossimo». Mai piu' salti di pagina mentre si scansiona. Transizioni
   solo su transform/opacity: sui tablet economici il video non scatta. */
.scanner-reticle{transition:border-color .15s ease}
.scanner-reticle.colto{border-color:#2ec27e}
.scanner-esito{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;background:#fff;border-radius:26px;color:var(--ink,#141a2e);overflow:auto;padding:14px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.scanner-esito.show{display:flex;animation:se-sale .24s cubic-bezier(.2,.8,.2,1)}
@keyframes se-sale{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}
.scanner-esito-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border:1px solid var(--line,#e6eaf2);border-radius:999px;background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--ink,#141a2e);box-shadow:0 4px 14px rgba(14,42,107,.14)}
/* La foto e' il pezzo ELASTICO del foglio: prende tutto lo spazio che
   avanza dopo nome, prezzo, comandi e bottone. L'immagine vive ASSOLUTA
   dentro il riquadro: puo' solo riempirlo, mai traboccare sui fratelli
   (successo: copriva nome e prezzo, e i numeri non lo vedevano). */
.scanner-sheet.con-esito{min-height:min(92vh,760px)}
.se-foto{flex:1 1 auto;position:relative;min-height:110px;background:#fff;border:1px solid var(--line-2,#eef1f7);border-radius:14px;overflow:hidden}
.se-foto img{position:absolute;inset:8px;margin:auto;max-width:calc(100% - 16px);max-height:calc(100% - 16px);width:auto;height:auto;object-fit:contain}
.se-nome,.se-sotto,.se-avviso,.se-carrello,.se-prossimo{flex:none}
.se-nome{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;line-height:1.2;margin:10px 2px 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.se-sotto{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 2px 0}
.se-prezzo{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;color:var(--blu,#0E2A6B)}
.se-prezzo small{font-size:13px;font-weight:700;color:var(--ink-soft,#5b6480)}
.se-conf{font-size:13px;font-weight:700;color:var(--ink-soft,#5b6480)}
.se-avviso{margin:10px 2px 0;padding:9px 12px;border-radius:12px;background:#fdf2f0;border:1px solid #f1d4d0;color:#c6362b;font-size:13px;font-weight:800}
.se-avviso.arrivo{background:#fff8e6;border-color:#f2e3b3;color:#8a6d00}
.se-carrello{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 0;padding:10px;background:#f3f6ff;border:1.5px solid rgba(14,42,107,.18);border-radius:18px}
.se-carrello button{flex:none;width:64px;height:60px;border-radius:14px;border:1.5px solid rgba(14,42,107,.26);background:#fff;font-size:30px;font-weight:800;color:var(--blu,#0E2A6B);cursor:pointer}
.se-carrello button:disabled{opacity:.35}
.se-n{flex:1;text-align:center;min-width:0}
.se-n b{display:block;font-size:30px;line-height:1;color:var(--blu,#0E2A6B);font-variant-numeric:tabular-nums}
.se-n.pieno b{color:var(--green,#10915a)}
.se-n.lampo b{animation:se-lampo .3s ease}
@keyframes se-lampo{0%{color:#10915a;transform:scale(1.14)}100%{transform:none}}
.se-n span{display:block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5b6480}
.se-prossimo{margin-top:14px;min-height:56px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--blu,#0E2A6B) 0%,var(--blu-3,#1d44a0) 100%);color:#fff;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 14px 28px rgba(14,42,107,.22)}
.se-vuoto{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px}
.se-vuoto b{font-size:19px}
.se-vuoto .se-spiega{font-size:13px;color:#5b6480}
.se-vuoto .mono-ean{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#5b6480;background:#f4f7fc;border:1px solid #dfe7f5;border-radius:999px;padding:4px 12px}
.se-attesa{flex:1;display:grid;place-items:center;font-weight:800;color:#5b6480;min-height:160px}
@media (prefers-reduced-motion:reduce){
  .scanner-esito.show{animation:none}
  .se-n.lampo b{animation:none}
  .scanner-reticle{transition:none}
}
/* Telefono in orizzontale: schermo basso, foto piu' discreta, comandi
   compatti — ma sempre grandi abbastanza per un pollice in movimento. */
@media (max-height:520px){
  .se-foto{min-height:70px}
  .se-nome{font-size:15px;margin-top:6px}
  .se-carrello{margin-top:8px;padding:8px}
  .se-carrello button{width:58px;height:52px;font-size:26px}
  .se-n b{font-size:24px}
  .se-prossimo{margin-top:8px;min-height:48px}
}

/* ---------------- TOAST ---------------- */
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:150;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{background:var(--blu-ink);color:#fff;padding:13px 20px;border-radius:13px;font-weight:700;font-size:14px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;animation:toastin .3s var(--ease)}
.toast svg{width:18px;height:18px;color:var(--gold)}

/* ---------------- LOGIN ---------------- */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr}
.auth .left{background:linear-gradient(150deg,var(--blu) 0%,var(--blu-ink) 100%);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth .left::after{content:"";position:absolute;right:-80px;bottom:-80px;width:380px;height:380px;background:radial-gradient(circle,rgba(245,166,35,.22),transparent 70%);border-radius:50%}
.auth .left .brand{display:inline-flex}
.auth .left .brand .brand-logo{height:74px;max-width:320px}
.auth .left .pitch{position:relative;z-index:1}
.auth .left .pitch h2{font-size:34px;font-weight:800;line-height:1.08;margin-bottom:14px}
.auth .left .pitch p{color:#cdd6ee;font-size:16px;max-width:420px}
.auth .left .feat{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.auth .left .feat div{display:flex;align-items:center;gap:11px;font-weight:600;font-size:15px}
.auth .left .feat .ic{width:30px;height:30px;border-radius:9px;background:rgba(245,166,35,.2);display:grid;place-items:center;color:var(--gold);font-weight:800}
.auth .right{display:grid;place-items:center;padding:40px;background:var(--bg)}
.auth-card{width:100%;max-width:380px}
.auth-card-head{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.auth-card-kicker{display:inline-flex;align-items:center;align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(14,42,107,.07);color:var(--blu);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.auth-card h1{font-size:27px;font-weight:800;color:var(--ink)}
.auth-card .s{color:#66708c;margin:0;font-size:15px}
.auth-card label{display:block;font-size:13px;font-weight:700;margin:16px 0 7px;color:var(--ink)}
.auth-card input,.auth-card select,.auth-card textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-family:inherit;outline:none;transition:.16s;background:#fff;color:var(--ink)}
.auth-card input:focus,.auth-card select:focus,.auth-card textarea:focus{border-color:var(--blu);box-shadow:0 0 0 4px rgba(14,42,107,.1)}
.auth-card textarea{resize:vertical}
.auth-card .go{width:100%;margin-top:24px;background:var(--blu);color:#fff;border:0;padding:14px;border-radius:12px;font-weight:800;font-size:16px;cursor:pointer;transition:.16s}
.auth-card .go:hover{background:var(--blu-3)}
.auth-card .err{background:var(--rosso-bg);color:var(--rosso);padding:11px 15px;border-radius:11px;font-size:14px;font-weight:600;margin-top:16px;text-align:center}
.auth-card .hint{font-size:12.5px;color:#7a859f;margin-top:6px}
.auth-card .hint.ok{color:var(--verde)}
.auth-card .hint.ko{color:var(--rosso)}
.auth-card .err-campo{color:var(--rosso);font-size:12.5px;font-weight:600;margin-top:6px}
.auth-card .campo-ko{border-color:var(--rosso)}
.auth-card .riga-3{display:grid;grid-template-columns:110px 1fr 70px;gap:10px}
.auth-note-panel{margin-top:20px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,#f7f9fd 0%,#f1f5fb 100%);border:1px solid #e4eaf5}
.auth-card .note{text-align:center;font-size:12.5px;color:#7a859f;margin-top:0;line-height:1.6}
.auth-card .note b{color:#5f6984}
.guest-access-link{display:flex;align-items:center;justify-content:center;margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:800;transition:.16s}
.guest-access-link:hover{background:var(--bg);color:var(--blu)}
.guest-request-link{margin-top:18px;background:var(--blu);border-color:var(--blu);color:#fff}
.guest-request-link:hover{background:var(--blu-3);border-color:var(--blu-3);color:#fff}

/* ---------------- GENERIC PAGE ---------------- */
.page{max-width:1100px;margin:0 auto;padding:34px clamp(16px,4vw,40px) 60px}
.ptitle{font-size:28px;font-weight:800;color:var(--ink)}
.psub{color:var(--ink-soft);margin:4px 0 26px;font-size:15px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
/* Un pannello che contiene una tabella deve poterla far scorrere di lato.
   Con il solo overflow:hidden qui sopra, sullo storico ordini le colonne
   Totale, Stato e il tasto "Riordina" restavano tagliate fuori e non c'era
   nessun modo di raggiungerle: ne' col dito sul telefono, ne' col mouse sul
   tablet. Dove la tabella ci sta tutta, "auto" non cambia niente. */
/* Nota del 20/09/2026: qui era stata provata una sfumatura sul bordo destro
   per far capire che la tabella scorre. E' stata TOLTA prima di consegnarla,
   per due motivi: non l'aveva chiesta Fabio (era una proposta nel registro
   difetti), e soprattutto non funzionava come il commento prometteva - la
   "copertura" era trasparente e la sfumatura restava disegnata anche dove la
   tabella non scorre affatto (misurato sugli ordini a 1400 px: 1018 px dentro
   1018, e la tinta si vedeva lo stesso sopra la colonna AZIONI).
   Se un giorno si rifa': le coperture vanno OPACHE del colore del pannello e
   in "local", le ombre in "scroll", e si prova su tre casi - inizio, fondo,
   tabella che non scorre. Difetto registrato in lavoro\difetti.jsonl. */
.panel:has(> .tbl), .panel:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 23/09/2026 - LE TABELLE DICONO CHE SCORRONO, terzo tentativo (difetto 158,
   riaperto da Fabio). Sul telefono una tabella da sei colonne ne mostra
   quattro e le altre sembrano non esistere. Qui l'indizio e' un'OMBRA sul
   bordo del riquadro, dal lato in cui c'e' ancora roba da vedere, e sparisce
   quando si e' arrivati in fondo da quel lato.
   PERCHE' E' FATTA COSI', dopo i due tentativi falliti del 20/09 (sfumature
   nello sfondo del riquadro):
   1. L'ombra deve stare SOPRA il contenuto. Lo sfondo del riquadro sta sotto
      le celle, che sono opache (testate, righe evidenziate): un'ombra nello
      sfondo non si vede mai. Qui l'ombra e' un elemento POSIZIONATO
      (position:sticky), e un elemento posizionato si disegna sopra le celle.
   2. L'ombra deve restare ferma sul bordo del riquadro mentre la tabella
      scorre, e coprire SOLO la tabella. La versione del 20/09 copriva anche la
      testata «Situazione contabile» degli ordini, che sta nello stesso
      riquadro ma non scorre. Uno sticky puo' muoversi solo dentro il suo
      contenitore: un figlio del riquadro ha un contenitore largo quanto lo
      schermo e non riesce a restare sul bordo; una finta cella (tr::after)
      Chrome non la disegna affatto (provato: larghezza zero anche a chiederla
      di 20 px). L'appiglio giusto e' una <caption> vuota, alta zero, che
      assets/tabelle.js aggiunge alla tabella la prima volta che la vede
      scorrere: la caption e' larga quanto la tabella, quindi i suoi due
      pseudo-elementi sticky restano incollati ai bordi del riquadro per tutta
      la corsa, e sono alti quanto la tabella (--tbl-h, misurata dallo stesso
      file) e niente di piu'. clip-path taglia la sfumatura sopra e sotto.
   3. Chi decide da che lato c'e' altro da vedere e' sempre assets/tabelle.js,
      che scrive sul riquadro data-scorre="dx", "sx" o "sx dx" misurando lo
      scorrimento; senza quell'attributo queste regole non esistono e la
      tabella e' identica a prima, al pixel: e' la garanzia per le pagine dove
      la tabella ci sta tutta (computer) o e' gia' diventata una pila di schede
      (telefono, modalita' app), dove la caption non viene nemmeno aggiunta.
   4. La caption ha altezza zero e nessun contenuto: non sposta nessuna
      colonna e non allarga ne' allunga la tabella (misurato colonna per
      colonna, prima e dopo).
   L'ombra compare e sparisce con una dissolvenza breve; con
   prefers-reduced-motion e' immediata. Provato su Chromium e WebKit. */
/* text-align:start e' obbligatorio: il browser da' alle caption
   «-webkit-center», che centra anche i blocchi, e l'ombra di sinistra finiva
   in mezzo alla tabella (misurato: a 259 px su 522). */
.tbl-spia{display:table-caption;caption-side:top;text-align:start;height:0;padding:0;margin:0;border:0;overflow:visible;line-height:0;font-size:0}
.panel[data-scorre] > table > .tbl-spia::before,
.panel[data-scorre] > table > .tbl-spia::after{
  content:"";display:block;width:0;height:var(--tbl-h,0px);
  position:sticky;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .28s ease;
  clip-path:inset(0 -48px 0 -48px);
  box-shadow:0 0 18px 10px rgba(14,42,107,.16),0 0 5px 2px rgba(14,42,107,.10)}
.panel[data-scorre] > table > .tbl-spia::before{left:0;margin-right:auto}
.panel[data-scorre] > table > .tbl-spia::after{right:0;margin-left:auto;margin-top:calc(-1 * var(--tbl-h,0px))}
.panel[data-scorre~="sx"] > table > .tbl-spia::before,
.panel[data-scorre~="dx"] > table > .tbl-spia::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .panel[data-scorre] > table > .tbl-spia::before,
  .panel[data-scorre] > table > .tbl-spia::after{transition:none}
}
/* Su carta non si scorre: l'ombra non si stampa. */
@media print{
  .panel[data-scorre] > table > .tbl-spia::before,
  .panel[data-scorre] > table > .tbl-spia::after{content:none}
}
.tbl{width:100%;border-collapse:collapse}
.tbl th{background:var(--bg);text-align:left;padding:14px 16px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.tbl td{padding:14px 16px;border-top:1px solid var(--line-2);font-size:14px}
.tbl tr:hover td,.tbl tbody tr:hover{background:var(--bg)}
.tbl tfoot td{font-weight:800;font-size:16px;background:var(--bg)}
.mono{font-family:ui-monospace,monospace;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700}
.chip.ok{background:var(--verde-bg);color:var(--verde)}
.chip.off{background:var(--rosso-bg);color:var(--rosso)}
.chip.neu{background:var(--bg);color:var(--ink-soft)}
.btn{border:0;border-radius:10px;padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.16s}
.btn.pri{background:var(--blu);color:#fff} .btn.pri:hover{background:var(--blu-3)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{background:var(--bg)}
.btn.gold{background:var(--gold);color:var(--blu-ink)} .btn.gold:hover{background:var(--gold-d)}
.orders-table td{vertical-align:middle}
.orders-number{font-weight:800;white-space:nowrap}
.orders-total{font-weight:800;color:var(--blu);white-space:nowrap}
.orders-actions-cell{width:332px;min-width:332px}
/* Quattro tasti (Documento, PDF, ORD, Riordina) in due file da due, nella stessa larghezza di prima:
   allargare la colonna stringeva Data e IVA e le mandava a capo (10/09/2026). */
.orders-actions-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:end;gap:8px 10px;max-width:324px;margin-left:auto}
.orders-actions-wrap .btn{width:100%;min-width:0;text-align:center;padding:8px 12px;border-radius:13px}
.cart-qty-cell{min-width:172px}
.cart-qty-stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cart-mini-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
/* 20/09/2026: 40 -> 44 px. Misurato sulla copia di prova a 390 px, era
   l'ultimo tasto del carrello sotto il bersaglio del dito. Il riquadro del
   carrello non cambia forma: i quattro pixel se li prende la riga, che qui
   e' alta piu' del bottone. */
.cart-mini-step button{width:34px;height:44px;border:0;background:#fff;font-size:18px;font-weight:700;color:var(--blu);cursor:pointer;transition:.12s}
.cart-mini-step button:hover{background:var(--bg)}
.cart-mini-step input{width:52px;max-width:52px;height:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:inherit;font-size:15px;font-weight:700;outline:none;padding:0;-moz-appearance:textfield}
.cart-mini-step input::-webkit-outer-spin-button,.cart-mini-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-qty-meta{font-size:12px;color:var(--ink-mute)}

/* ---------------- ADMIN PREMIUM ---------------- */
.admin-login-shell{min-height:100vh;display:grid;place-items:center;padding:32px;background:linear-gradient(180deg,#eef2f9 0%,#f7f9fc 100%)}
.admin-login-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 30px;box-shadow:var(--sh-lg)}
.admin-login-logo{height:52px;width:auto;max-width:220px;margin-bottom:18px}
.admin-login-kicker{display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;padding:6px 11px;border-radius:999px;background:rgba(14,42,107,.06);color:var(--blu);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.admin-login-card h1{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;line-height:1.06;color:var(--ink)}
.admin-login-card p{margin:10px 0 22px;color:var(--ink-soft);font-size:14px;line-height:1.6}
.admin-login-card label{display:block;font-size:13px;font-weight:800;margin:0 0 8px;color:var(--ink)}
.admin-login-card input{width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:14px;font-size:15px;font-family:inherit;outline:none;transition:.16s}
.admin-login-card input:focus{border-color:var(--blu);box-shadow:0 0 0 4px rgba(14,42,107,.08)}
.admin-login-card .go{width:100%;margin-top:18px;background:var(--blu);color:#fff;border:0;padding:14px;border-radius:14px;font-weight:800;font-size:15px;cursor:pointer}
.admin-login-card .go:hover{background:var(--blu-3)}
.admin-page{display:flex;flex-direction:column;gap:20px}
.admin-shell{display:flex;flex-direction:column;gap:18px}
.admin-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--sh-sm)}
.admin-header .ptitle{margin-bottom:6px}
.admin-header .psub{max-width:860px;margin:0;color:var(--ink-soft)}
.admin-header-note{min-width:280px;padding:16px 18px;border-radius:18px;background:#f8faff;border:1px solid #e8eef9;display:flex;flex-direction:column;gap:6px}
.admin-header-label{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.admin-header-note strong{font-size:14px;line-height:1.5;color:var(--ink)}
.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.admin-stat-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 18px 16px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:8px}
.admin-stat-card strong{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;line-height:1;color:var(--blu)}
.admin-stat-card small{color:var(--ink-soft);font-size:13px}
.admin-stat-label{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.admin-stat-card.ok{border-color:rgba(16,145,90,.15);background:linear-gradient(180deg,#fff 0%,#f6fcf9 100%)}
.admin-stat-card.warn{border-color:rgba(245,166,35,.2);background:linear-gradient(180deg,#fff 0%,#fffaf1 100%)}
.admin-stat-card.off{border-color:rgba(210,59,46,.15);background:linear-gradient(180deg,#fff 0%,#fff8f7 100%)}
.admin-flash{display:block;padding:16px 18px;border-radius:16px;font-size:14px;line-height:1.55}
.admin-flash.ok{background:var(--verde-bg);color:var(--verde)}
.admin-flash.off{background:var(--rosso-bg);color:var(--rosso)}
.admin-toolbar{display:flex;align-items:flex-end;gap:16px;padding:18px;flex-wrap:wrap}
.admin-toolbar-search{flex:1 1 360px}
.admin-field-label{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
.admin-search{position:relative}
.admin-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-mute)}
.admin-search input{width:100%;padding:14px 16px 14px 48px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:15px;font-family:inherit;outline:none;box-shadow:0 1px 2px rgba(14,42,107,.04)}
.admin-search input:focus{border-color:var(--blu);box-shadow:0 0 0 4px rgba(14,42,107,.08)}
.admin-toolbar-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.admin-selectbox{display:flex;flex-direction:column;gap:6px}
.admin-selectbox span{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.admin-select{min-width:180px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);outline:none;box-shadow:0 1px 2px rgba(14,42,107,.04)}
.admin-select:focus{border-color:var(--blu);box-shadow:0 0 0 4px rgba(14,42,107,.08)}
.admin-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin-table-card{overflow:auto}
.admin-table th{white-space:nowrap}
.admin-table td{vertical-align:top}
.admin-table-main{display:flex;flex-direction:column;gap:4px;min-width:220px}
.admin-table-main strong{font-size:14px;color:var(--ink)}
.admin-table-main span{font-size:12.5px;color:var(--ink-soft)}
.admin-table-main small{font-size:12px;color:var(--ink-mute)}
.admin-table-inline strong{font-size:13px;color:var(--ink)}
.admin-table-stack{display:flex;flex-direction:column;gap:4px;min-width:120px}
.admin-table-stack span{font-size:13px;color:var(--ink);font-weight:700}
.admin-table-stack small{font-size:12px;color:var(--ink-mute)}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap}
.admin-actions .btn{flex:1 1 180px}
.admin-actions-compact{min-width:180px}
.admin-actions-compact .btn{flex:1 1 auto;padding:9px 12px}

.success-wrap{max-width:560px;margin:60px auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:50px 40px;box-shadow:var(--sh)}
.success-wrap .circle{width:84px;height:84px;border-radius:50%;background:var(--verde-bg);display:grid;place-items:center;margin:0 auto 22px;animation:pop .4s var(--ease)}
.success-wrap .circle svg{width:42px;height:42px;color:var(--verde)}
.success-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.success-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-width:190px;padding:14px 24px;font-size:15px}

/* ---------------- ANIM ---------------- */
@keyframes slideup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.card{animation:slideup .4s var(--ease) backwards}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:980px){
  .hero-layout,.hero-layout-guest{grid-template-columns:1fr;gap:18px}
  .hero-balance{display:none}
  .search-xl .field{display:block}
  .search-xl input{padding-right:130px}
  .search-scan-btn{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:42px;
    padding:0 14px;
    border:1px solid rgba(14,42,107,.12);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(244,247,253,.98) 100%);
    color:var(--blu-ink);
    font-size:12px;
    font-weight:900;
    box-shadow:0 8px 20px rgba(14,42,107,.10);
    cursor:pointer;
    position:absolute;
    overflow:hidden;
    isolation:isolate;
  }
  .search-scan-btn::before{
    content:"";
    position:absolute;
    inset:7px;
    border-radius:10px;
    background:
      linear-gradient(90deg,transparent 0 12%,rgba(8,26,69,.92) 12% 15%,transparent 15% 24%,rgba(8,26,69,.86) 24% 27%,transparent 27% 34%,rgba(8,26,69,.96) 34% 38%,transparent 38% 49%,rgba(8,26,69,.82) 49% 52%,transparent 52% 61%,rgba(8,26,69,.95) 61% 66%,transparent 66% 75%,rgba(8,26,69,.84) 75% 78%,transparent 78% 88%,rgba(8,26,69,.92) 88% 91%,transparent 91% 100%);
    opacity:.34;
    pointer-events:none;
    z-index:0;
  }
  .search-scan-btn svg{width:18px;height:18px;position:relative;z-index:1;color:var(--blu-ink)}
  .search-scan-btn span{position:relative;z-index:1}
  /* === mobile: barra cliente in stile app (solo nelle pagine che la contengono) === */
  body:has(.topbar-catalog-strip){--topbar-h:calc(140px + env(safe-area-inset-top,0px))}
  body:has(.topbar-catalog-strip) .topbar{flex-wrap:wrap;height:auto;min-height:68px;padding-top:calc(9px + env(safe-area-inset-top,0px));padding-bottom:9px}
  .topbar-catalog-strip{order:9;flex:1 1 100%;width:100%;margin-top:1px;padding:8px 12px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.13) 0%,rgba(121,156,247,.20) 100%),rgba(8,26,69,.16);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 10px 24px rgba(8,26,69,.30)}
  .topbar-catalog-strip-main{gap:10px}
  .topbar-catalog-intro{gap:2px}
  .topbar-catalog-intro .topbar-catalog-kicker{display:inline-flex;align-items:center;gap:6px;color:#d6e2ff}
  .topbar-catalog-intro .topbar-catalog-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:gedLivePulse 2.4s ease-out infinite}
  .topbar-catalog-intro strong{font-size:14px;letter-spacing:-.01em}
  .topbar-catalog-spend{align-self:center;padding:6px 11px;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.07) 100%);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
  .topbar-catalog-spend .topbar-catalog-kicker{color:#c6d6ff}
  .topbar-catalog-spend strong{font-size:16px}
  .grid-2{grid-template-columns:1fr}
  .auth-page .auth::after{display:none}
  .catalog-mobile-bar{display:flex;margin-bottom:10px}
  .catalog-shell .side{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(360px,86vw);
    max-height:none;
    margin:0;
    padding:16px 12px 0;
    border-radius:0 24px 24px 0;
    background:linear-gradient(180deg,#fff 0%,#f4f7fd 100%);
    box-shadow:var(--sh-xl);
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-104%);
    transition:transform .32s var(--ease),box-shadow .32s var(--ease);
    z-index:112;
  }
  .catalog-shell .side.show{transform:translateX(0)}
  /* Col cassetto aperto la shell sale sopra la topbar (z 120) e l'hero (z 4).
     Cassetto e velo scuro sono figli della shell (z 1): prima restavano
     coperti, e la testata con la X finiva sotto la barra in alto. Il velo
     dentro la shell copre cosi' anche la topbar, come deve fare un pannello
     modale. `:has()` e' gia' in uso in questo foglio (body:has(...)). */
  .catalog-shell:has(.side.show){z-index:121}
  .catalog-shell .side::before{margin:-16px -12px 16px;border-radius:0 24px 0 0}
  /* In fondo al cassetto il velo fa anche da margine, e sui telefoni con la
     barra di casa in basso lascia lo spazio di sicurezza. */
  .catalog-shell .side::after{height:calc(22px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(244,247,253,0) 0%,#f4f7fd 70%)}
  .side-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 8px 12px}
  .side-mobile-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
  .side-mobile-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#4f5f8f}
  .side-mobile-head strong{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;line-height:1;color:var(--blu-ink)}
  /* 44 px: la misura minima per un dito. */
  .side-mobile-close{
    width:44px;
    height:44px;
    border:0;
    border-radius:14px;
    background:rgba(14,42,107,.08);
    color:var(--blu);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    flex:0 0 44px;
  }
  .side-mobile-close:focus-visible{outline:2px solid var(--blu-3);outline-offset:2px}
  .catalog-side-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(8,26,69,.42);
    backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:111;
    pointer-events:none;
  }
  .catalog-side-overlay.show{display:block;opacity:1;visibility:visible;pointer-events:auto}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-head-copy{position:relative;top:auto}
  .toolbar{grid-template-columns:1fr}
  .toolbar .right{grid-template-columns:1fr}
  .topbar-price-btn{min-width:68px;padding:0 12px}
  .modal .box{grid-template-columns:1fr}
  .modal-loading,.modal-preview-shell{grid-template-columns:1fr;min-height:auto}
  .modal-loading-media{min-height:260px;margin:24px 24px 0}
  .modal-loading-copy{padding:24px}
  .modal .m-ph{border-right:0;border-bottom:1px solid var(--line-2);padding:24px}
  .auth{grid-template-columns:1fr}
  .auth .left{display:none}
  .auth .right{place-items:start center;padding-top:26px}
  .admin-header{flex-direction:column}
  .admin-header-note{min-width:0;width:100%}
  .admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-toolbar{flex-direction:column;align-items:stretch}
  .admin-toolbar-filters{width:100%}
  .admin-toolbar-filters > *{flex:1 1 220px}
}
@media(max-width:560px){
  body{background:#eef2f8;--topbar-h:88px}
  .nav{display:none}
  .topbar{gap:12px;padding:10px 14px;min-height:68px;height:auto;align-items:center;flex-wrap:wrap}
  .brand-logo{height:38px;max-width:160px}
  /* I tasti da toccare (logo, carrello, Esci, «Torna al catalogo») stanno
     nel blocco «@media (pointer: coarse)» in fondo al file: quello che conta
     non e' la larghezza dello schermo ma il dito. */
  .who{display:none}
  .topbar-price-toggle{order:3;width:auto;margin-left:auto}
  .topbar-price-btn{min-width:64px;padding:0 10px}
  /* === mobile stretto: barra app compatta su una riga; carrello affidato all'icona in alto === */
  body:has(.topbar-catalog-strip){--topbar-h:calc(210px + env(safe-area-inset-top,0px))}
  .topbar-catalog-cart{display:none}
  .topbar-catalog-strip{grid-template-columns:1fr;padding:9px 12px}
  .topbar-catalog-strip-main{grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
  .topbar-catalog-intro strong{font-size:13.5px}
  .topbar-catalog-spend{align-self:center}
  /* === mobile: menu di navigazione come tab in stile app (solo utenti loggati) === */
  body:has(.logout):not(:has(.topbar-catalog-strip)){--topbar-h:calc(146px + env(safe-area-inset-top,0px))}
  body:has(.logout) .nav{display:flex}
  .nav{order:10;flex:1 1 100%;width:100%;margin:2px 0 0;gap:6px;padding:4px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.05) 100%);border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
  .nav a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:0 8px;font-size:12.5px;font-weight:800;color:#cdd9f5;border-radius:10px;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease),transform .12s var(--ease)}
  .nav a:active{transform:scale(.97)}
  .nav a.on{background:linear-gradient(135deg,#ffffff 0%,#eaf0ff 100%);color:var(--blu-ink);box-shadow:0 4px 12px rgba(8,26,69,.22)}

  /* Sotto i 520 px le voci non ci stanno piu' affiancate: con Volantino,
     Ordini, Notifiche e Area agente il testo uscirebbe dal riquadro. La fila
     scorre di lato come nelle app, cosi' ogni voce resta leggibile per intero
     invece di essere tagliata a meta'. */
  @media (max-width:520px){
    body:has(.logout) .nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start}
    body:has(.logout) .nav::-webkit-scrollbar{display:none}
    body:has(.logout) .nav a{flex:0 0 auto;padding:0 12px}
  }

  /* Aree sicure dell'iPhone: da quando la pagina si allarga sotto la tacca
     (viewport-fit=cover) la barra alta deve scansarla su TUTTE le pagine, non
     solo su quelle con la striscia del catalogo. Senza, dentro l'app il logo
     finisce sotto la tacca su Ordini, Carrello e Notifiche. */
  .topbar{
    padding-top:calc(10px + env(safe-area-inset-top,0px));
    padding-left:calc(14px + env(safe-area-inset-left,0px));
    padding-right:calc(14px + env(safe-area-inset-right,0px));
  }
  .shell{
    padding-left:calc(14px + env(safe-area-inset-left,0px));
    padding-right:calc(14px + env(safe-area-inset-right,0px));
  }
  .logout{margin-left:auto}
  .hero{margin-top:-16px;padding:38px 14px 46px}
  .hero p{font-size:14px}
  .search-xl .field{min-width:0}
  .search-xl input{padding-right:58px}
  .search-scan-btn{right:6px;width:46px;min-height:44px;padding:0;justify-content:center;border-radius:12px}
  .search-scan-btn::before{inset:6px}
  .search-scan-btn span{display:none}
  .shell{margin-top:-24px;padding:0 14px 32px}
  .shell-guest{margin-top:8px}
  .shell-with-hero-band{margin-top:8px}
  .catalog-mobile-bar{margin-bottom:8px}
  .mobile-catalog-trigger{gap:9px;min-height:60px;padding:10px 11px;border-radius:15px}
  .mobile-catalog-trigger::after{width:26px;height:26px;font-size:18px;flex-basis:26px}
  .mobile-catalog-trigger-icon{width:36px;height:36px;flex-basis:36px}
  .mobile-catalog-trigger-icon svg{width:17px;height:17px}
  .mobile-catalog-trigger-copy strong{font-size:13.5px}
  .mobile-catalog-trigger-copy small{font-size:12px}
  .mobile-catalog-trigger-meta{min-width:32px;height:26px;padding:0 8px;font-size:12px}
  .catalog-shell .side{width:min(336px,90vw);padding:14px 12px 0;border-radius:0 22px 22px 0}
  .catalog-shell .side::before{margin:-14px -12px 14px;border-radius:0 22px 0 0}
  .side-mobile-head{padding:2px 6px 10px}
  .side-mobile-head strong{font-size:20px}
  .scanner-modal{padding:0}
  .scanner-sheet{width:100%;max-height:100vh;border-radius:24px 24px 0 0}
  .scanner-head{padding:16px 16px 12px}
  .scanner-body{padding:0 16px 16px}
  .scanner-head strong{font-size:22px}
  .scanner-preview{border-radius:18px}
  .page{padding:20px 14px 32px}
  .search-xl{flex-direction:column}
  .search-xl input,.search-xl button,.auth-card .go,.guest-access-link{min-height:50px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{
    animation:none;
    content-visibility:auto;
    contain-intrinsic-size:420px;
  }
  .catalog-head-copy,.panel,.side,.card{border-radius:18px}
  .catalog-head-copy{padding:14px}
  .toolbar{align-items:flex-start}
  .count-number{font-size:26px}
  .toolbar .right{margin-left:0;width:100%}
  .toolbar .right form{width:100%}
  .catalog-tools{width:100%}
  .sortbox{width:100%}
  .sortsel{width:100%;min-width:0}
  .card .ph{height:158px;padding:10px}
  .product-media .product-img.img-ultra-portrait{max-width:92px;max-height:134px}
  .product-media .product-img.img-portrait{max-width:104px;max-height:136px}
  .product-media .product-img.img-square{max-width:112px;max-height:112px}
  .product-media .product-img.img-landscape{max-width:118px;max-height:96px}
  .card .body{padding:12px;grid-template-rows:auto minmax(44px,auto) 20px auto minmax(68px,1fr) auto;gap:8px}
  .card .name{height:auto;min-height:0}
  .conf{min-height:auto}
  .stepper-wrap{flex-direction:column;align-items:stretch}
  .stepper{width:100%}
  .stepper button{flex:0 0 44px}
  .stepper input{flex:1 1 0;width:auto;min-width:0}
  .guest-copy{min-height:auto}
  .card .ean{white-space:normal}
  .buy{flex-wrap:nowrap}
  .price{font-size:18px;padding:9px 11px}
  .price-unit,.price-old{font-size:11px}
  .conf{gap:5px}
  /* 20/09/2026: il testo sale a 12 px per leggersi, ma il riempimento si
     stringe cosi' due pastiglie restano affiancate come prima. Alzare la
     misura senza stringere i fianchi allungava la scheda di una riga -
     piu' leggibile e meno ordinata, che non e' un pareggio accettabile. */
  .conf .pill{padding:4px 7px;font-size:12px;letter-spacing:-.005em}
  .stepper-label{font-size:11px}
  /* 20/09/2026: erano 42 px, cioe' due sotto il bersaglio di 44 che Fabio
     pretende per il dito. Misurati sulla copia di prova con
     verifica-responsive.py --accedi: 24 tasti «-» e «+» a 42 px nel catalogo
     a 360 e 390, e uno a 40 nel carrello. Non li aveva visti nessuno perche'
     si guardava il CSS del MENU, che invece e' a posto: qui decide la misura
     sulla pagina viva, non la lettura del foglio.
     Due pixel in piu' per riga: la scheda non cambia impaginazione (il
     bottone «aggiungi» qui sotto e' gia' a 48). */
  .stepper button,.stepper input{height:44px}
  .add{min-height:48px;font-size:12px;padding:0 10px}
  .add svg{width:14px;height:14px}
  .pagination{justify-content:center}
  .page-btn{flex:1 1 calc(50% - 6px)}
  .page-numbers{justify-content:center}
  /* 44 px per il dito anche nel catalogo (27/09/2026, proposta approvata da
     Fabio): numeri e tasti erano alti 42. L'admin lo faceva gia' da se'. */
  .page-btn,.page-num,.page-gap{height:44px;min-width:44px}
  .auth .right{padding:20px 14px}
  .auth-card,.auth-page .auth-card{max-width:100%;padding:24px 18px;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.55);border-radius:24px;box-shadow:0 18px 40px rgba(8,26,69,.18)}
  .auth-card-head{gap:6px;margin-bottom:20px}
  .auth-card-kicker{font-size:10px;padding:6px 10px}
  .auth-card h1{font-size:24px}
  .auth-note-panel{padding:12px 14px;border-radius:16px}
  .drawer{width:100%;border-radius:22px 22px 0 0;top:auto;bottom:0;height:min(88vh,760px);transform:translateY(100%)}
  .drawer.show{transform:translateY(0)}
  /* Con la barra dell'app in basso, il cassetto si ferma SOPRA la barra:
     cosi' Catalogo e Scanner restano a portata di pollice anche col
     carrello aperto. La barra resta viva sopra il velo (123 > 122).
     Se sale la tastiera la barra sparisce e il cassetto torna a terra. */
  html.ged-app-conbarra .drawer{bottom:calc(64px + env(safe-area-inset-bottom,0px));height:min(calc(88vh - 64px),760px);border-radius:22px 22px 0 0;transform:translateY(calc(100% + 84px + env(safe-area-inset-bottom,0px)))}
  html.ged-app-conbarra .drawer.show{transform:translateY(0)}
  html.ged-app-conbarra.ged-tastiera .drawer{bottom:0;height:min(88vh,760px)}
  html.ged-app-conbarra .ged-nav{z-index:123}
}

/* ==================== LA RETE CHE NON PERDE NIENTE ====================
   Il nastro di stato rete, la coda offline nel cassetto del carrello e
   la carta «ordine in coda»: la faccia gentile di assets/coda.js. */
.ged-rete{position:fixed;left:12px;right:12px;bottom:12px;z-index:119;background:linear-gradient(160deg,#16357f,var(--blu));color:#fff;font-size:13.5px;line-height:1.5;padding:12px 16px;border-radius:14px;box-shadow:0 14px 34px rgba(8,26,69,.4);border:1px solid rgba(255,255,255,.16);transform:translateY(140%);opacity:0;transition:transform .3s var(--ease),opacity .3s;pointer-events:none;max-width:640px;margin:0 auto}
.ged-rete.show{transform:none;opacity:1;pointer-events:auto}
.ged-rete b{color:var(--gold)}
.ged-rete .ged-rete-chip{display:inline-block;margin-left:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.ged-rete.coda{background:linear-gradient(160deg,#0d7a4b,#10915a)}
.ged-rete.invio .ged-rete-chip{animation:gedRetePulsa 1.2s infinite}
@keyframes gedRetePulsa{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.ged-rete{transition:none}.ged-rete.invio .ged-rete-chip{animation:none}}
/* Con la barra dell'app il nastro sale sopra di lei. */
html.ged-app-conbarra .ged-rete{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* La coda dentro il cassetto: righe pulite, una per voce. */
.coda-box{background:#fdf6e3;border-bottom:1px solid #f0dca4;padding:12px 16px}
.coda-testa{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8a5c10;margin-bottom:8px}
.coda-riga{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #f0dca4;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.coda-pill{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.08em;background:var(--blu);color:#FFCC00;border-radius:999px;padding:4px 9px;margin-top:2px}
.coda-pill.warn{background:#d23b2e;color:#fff}
.coda-chi{flex:1;min-width:0}
.coda-chi b{display:block;font-size:13px;color:#16223f;line-height:1.35}
.coda-chi span{display:block;font-size:12px;color:#7b8db0;margin-top:2px;line-height:1.45}
.coda-msg{margin-top:6px;font-size:12px;font-weight:700;color:#a3552a}
.coda-x{flex:none;border:1px solid #e0b4b4;background:#fff;color:#b91c1c;border-radius:8px;width:28px;height:28px;font-size:12px;font-weight:800;cursor:pointer;line-height:1}
.coda-riprova{display:block;width:100%;border:0;border-radius:10px;background:linear-gradient(160deg,#16357f,var(--blu));color:#FFCC00;font-weight:800;font-size:13px;padding:10px 14px;cursor:pointer;margin-top:2px}
/* La carta «ordine in coda» nella pagina carrello: una promessa, non un
   errore. */
.coda-conferma-carta{display:flex;gap:18px;align-items:flex-start;background:linear-gradient(160deg,#16357f,var(--blu));color:#fff;border-radius:20px;padding:26px 28px;margin:18px 0;box-shadow:0 18px 44px rgba(8,26,69,.35)}
.coda-conferma-icona{flex:none;width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#FFCC00}
.coda-conferma-icona svg{width:30px;height:30px}
.coda-conferma-testo{display:flex;flex-direction:column;gap:6px}
.coda-conferma-testo b{font-size:18px;line-height:1.3}
.coda-conferma-testo>span{font-size:14px;line-height:1.65;color:#DCE5F7}
.coda-conferma-testo .btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.coda-conferma-testo .btn.ghost:hover{background:rgba(255,255,255,.12)}
/* Si riapre il blocco telefono originale (560px): le regole qui sotto
   erano gia' sue, il nastro della coda le ha solo attraversate. */
@media(max-width:560px){
  .coda-conferma-carta{flex-direction:column;padding:22px 20px}
  .drawer-head{padding:18px}
  .drawer-body{padding:14px}
  .drawer-foot{padding:16px 18px calc(18px + max(0px, env(safe-area-inset-bottom)))}
  .admin-stats{grid-template-columns:1fr}
  .admin-toolbar-filters{flex-direction:column}
  .admin-toolbar-filters > *{width:100%}
  .admin-select{min-width:0;width:100%}
  .admin-actions .btn{flex:1 1 100%}
  .orders-actions-cell{width:auto;min-width:0}
  .orders-actions-wrap{grid-template-columns:1fr;justify-content:flex-start;max-width:none;margin-left:0}
  .orders-actions-wrap .btn{min-width:0}
  .cart-qty-cell{min-width:0}
  .cart-mini-step input{width:48px;max-width:48px}
  .success-wrap{padding:38px 22px}
  .success-actions .btn{min-width:0;flex:1 1 100%}
}

/* IN MODALITA' APP NON SI TOCCA NIENTE (23/09/2026 sera): sul telefono vero
   (html.ged-app) gli ordini erano GIA' a schede con i fogli della modalita'
   app, e queste regole ci aggiungevano qualche pixel qua e la'. Valgono solo
   fuori dall'app, dove la tabella era larga 607 px in 360. */
/* === LA TABELLA DEGLI ORDINI SUL TELEFONO: UNA SCHEDA PER ORDINE ===========
   Difetto 194 del 20/09/2026, misurato non immaginato: a 390 px ogni riga era
   alta 229 px e la tabella larga 607 px dentro uno schermo da 390. Si vedevano
   numero, data e imponibile; TOTALE, STATO e tutti e quattro i tasti
   (Documento, PDF, ORD, Riordina) restavano fuori a destra, e niente faceva
   capire che esistessero. Dal telefono un cliente non poteva scaricare il
   documento ne' riordinare: non e' una questione di bellezza, e' una funzione
   irraggiungibile.
   Qui la riga diventa una scheda: tutto dentro la larghezza dello schermo,
   nessuno scorrimento di lato, e le etichette (i data-label, che sul computer
   non si vedono) prendono il posto dell'intestazione che sparisce.
   SUL COMPUTER NON CAMBIA NIENTE: sta tutto dentro il @media, e sopra i 560 px
   la tabella e' quella di sempre. */
@media(max-width:560px){
  html:not(.ged-app) .orders-table thead{display:none}
  html:not(.ged-app) .orders-table,html:not(.ged-app) .orders-table tbody{display:block;width:100%}
  html:not(.ged-app) .orders-table tr{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-template-areas:
      "num num num num stato stato"
      "data data data data data data"
      "imp imp iva iva tot tot"
      "azioni azioni azioni azioni azioni azioni";
    gap:8px 10px;align-items:center;
    padding:14px 16px;border-top:1px solid var(--line-2)
  }
  html:not(.ged-app) .orders-table tr:hover td{background:transparent}
  html:not(.ged-app) .orders-table td{display:block;border:0;padding:0;font-size:14px}
  html:not(.ged-app) .orders-table .orders-number{grid-area:num;font-size:17px}
  html:not(.ged-app) .orders-table .orders-data{grid-area:data;font-size:13px;color:var(--ink-mute)}
  html:not(.ged-app) .orders-table .orders-imp{grid-area:imp}
  html:not(.ged-app) .orders-table .orders-iva{grid-area:iva}
  html:not(.ged-app) .orders-table .orders-total{grid-area:tot;font-size:18px;text-align:right}
  html:not(.ged-app) .orders-table .orders-stato{grid-area:stato;justify-self:end}
  /* senza intestazione, «375,06» e «31,18» uno accanto all'altro non direbbero
     quale e' l'imponibile e quale l'IVA: l'etichetta va sopra il numero */
  html:not(.ged-app) .orders-table .orders-imp::before,
  html:not(.ged-app) .orders-table .orders-iva::before,
  html:not(.ged-app) .orders-table .orders-total::before{
    content:attr(data-label);display:block;
    font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-mute);font-weight:700;margin-bottom:2px
  }
  /* LA RIGA «NESSUN ORDINE ANCORA» (seconda lettura, 20/09/2026).
     Quel messaggio sta in un <td colspan="7">, e colspan NON vale niente
     dentro una griglia: senza questa regola il td finirebbe in una casella
     da un sesto di schermo e la frase uscirebbe schiacciata in una
     strisciolina. Non si vedeva in nessuna prova perche' il cliente di
     collaudo ha 17 ordini: lo stato vuoto lo incontra solo un cliente nuovo.
     La regola e' la stessa gia' scritta per la modalita' app
     (app-bridge\modalita-app.css): li' il caso era gia' stato pagato. */
  /* Occupa TUTTA la griglia (1 / 1 / -1 / -1), non solo la prima riga: le
     altre tre tracce restano alte zero, ma i loro 8 px di distacco no, e
     mettendo il messaggio solo in cima restavano 24 px di vuoto sotto - il
     testo finiva a 54 px dal bordo di sopra e a 78 da quello di sotto,
     visibilmente storto (misurato dalla seconda lettura). Cosi' invece il
     riquadro e' uno solo e il messaggio sta in mezzo.
     Niente padding qui: quel td ha gia' il suo scritto nell'HTML, che vince
     comunque sul foglio di stile - una regola che non si applica mai e'
     peggio che nessuna regola, perche' fa credere di aver sistemato qualcosa. */
  html:not(.ged-app) .orders-table tbody td[colspan]{
    grid-area:1 / 1 / -1 / -1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    text-align:center
  }
  html:not(.ged-app) .orders-table tbody td[colspan]::before{content:none}
  html:not(.ged-app) .orders-table .orders-actions-cell{grid-area:azioni;width:auto;min-width:0;margin-top:2px}
  /* I tasti in fila invece che incolonnati: restano alti 44 px (la regola dei
     tasti sul telefono) ed e' questo che toglie i 229 px di riga.
     In fila FLESSIBILE, non a colonne fisse, per due motivi misurati il
     20/09/2026: il tasto ORD non c'e' per tutti i clienti (per i codici W....
     non viene stampato), e una griglia a quattro colonne fisse lascerebbe un
     buco quando i tasti sono tre; e a 360 px «Documento» - la parola piu'
     lunga - usciva tagliata di 2 px in colonne tutte uguali. Qui Documento
     pesa un po' di piu' degli altri e Riordina un po' piu' di PDF e ORD, cosi'
     ognuno ha lo spazio della sua parola. */
  html:not(.ged-app) .orders-table .orders-actions-wrap{
    display:flex;flex-wrap:nowrap;gap:8px;max-width:none;margin-left:0
  }
  html:not(.ged-app) .orders-table .orders-actions-wrap .btn{
    flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;
    font-size:12.5px;white-space:nowrap
  }
  html:not(.ged-app) .orders-table .orders-actions-wrap .btn.gold{flex-grow:1.35}
  html:not(.ged-app) .orders-table .orders-actions-wrap .btn:last-child{flex-grow:1.15}
}
/* Sui telefoni piu' stretti (iPhone SE della prima serie e simili, 320 px)
   nemmeno cosi' «Documento» ci sta: gli mancano 2 px, misurati. Li' i tasti
   vanno a due per riga - la scheda diventa piu' alta, ma una parola tagliata
   a meta' non si vede da nessuna parte. */
@media(max-width:340px){
  html:not(.ged-app) .orders-table .orders-actions-wrap{flex-wrap:wrap}
  html:not(.ged-app) .orders-table .orders-actions-wrap .btn,
  html:not(.ged-app) .orders-table .orders-actions-wrap .btn.gold,
  html:not(.ged-app) .orders-table .orders-actions-wrap .btn:last-child{flex:1 1 calc(50% - 4px)}
}

/* === Rifinitura menu categorie mobile (aggiunta sicura, non rimuove nulla) === */
@media (max-width:980px){
  /* la testata del cassetto dice gia' "Categorie": niente etichette ripetute */
  .catalog-shell .side > h4{display:none}
  /* tap comodi (mai sotto i 44 px) ma righe piu' fitte di prima (52 px):
     nel cassetto entrano piu' categorie senza scorrere */
  .catalog-shell .side .cat{min-height:48px;padding:12px 12px 12px 16px;font-size:15px}
  .catalog-shell .side .cat .c{min-width:46px;height:22px;margin-top:1px;font-size:13px}
  .catalog-shell .side .cat.on::before{height:22px}
  .catalog-shell .side .sub a{min-height:44px;padding:11px 10px;font-size:14px}
  .catalog-shell .side .sub a .c{min-width:46px;font-size:13px}
  /* "Vedi tutta la categoria": bottone chiaro e largo, e' l'azione che apre */
  .catalog-shell .cat-link-all{
    margin:8px 0 6px 12px;
    padding:12px 14px;
    background:rgba(14,42,107,.06);
    border-radius:12px;
    font-size:13px;
  }
}
/* Chi ha chiesto meno movimento non vede ne' la barretta ambra che cresce,
   ne' il cassetto che scivola: compaiono e basta. */
@media (prefers-reduced-motion:reduce){
  .side .cat,.side .cat::before,.side .cat .c,.side .sub a{transition:none}
  .catalog-shell .side,.catalog-side-overlay{transition:none}
}

/* ---- Link Volantino nel menu ---- */
.nav .nav-volantino{color:#f5a623;font-weight:800;position:relative}
.nav .nav-volantino.on{color:#f5a623}
.ci-vol{display:inline-block;background:#f5a623;color:#231a00;font-weight:800;font-size:10px;
  letter-spacing:.06em;border-radius:5px;padding:2px 7px;vertical-align:middle}

/* === Barra cliente mobile: pulsazione "live" del pallino (rispetta prefers-reduced-motion) === */
@keyframes gedLivePulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@media (prefers-reduced-motion:reduce){.topbar-catalog-intro .topbar-catalog-kicker::before{animation:none}}

/* ====================================================================
   AGGIUNTE PORTALE 2026: pedana 3D, prezzo consigliato, area agenti,
   articoli in arrivo, app installabile.
   Blocco unico in coda: non modifica nulla di quanto sopra.
   ==================================================================== */

/* ============ WIDGET PEDANA: barra, scena 3D, cartoni ============ */
.pedw{position:relative;border-radius:24px;padding:16px 18px 14px;overflow:hidden}
.pedw-hero{background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.06) 100%);border:1px solid rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 18px 36px rgba(8,26,69,.18);backdrop-filter:blur(12px);color:#fff}
.pedw-light{background:#fff;border:1px solid var(--line);box-shadow:var(--sh);color:var(--ink);margin:0 0 22px}
.pedw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pedw-kicker{display:block;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#bfd0ff}
.pedw-light .pedw-kicker{color:var(--ink-mute)}
.pedw-sub{display:block;font-size:11.5px;margin-top:3px;color:rgba(255,255,255,.62)}
.pedw-light .pedw-sub{color:var(--ink-mute)}
.pedw-big{text-align:right;line-height:1}
.pedw-big b{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;letter-spacing:-.035em;font-weight:800;font-variant-numeric:tabular-nums;transition:color .35s}
.pedw-big small{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-top:4px;color:rgba(255,255,255,.6)}
.pedw-light .pedw-big small{color:var(--ink-mute)}
.pedw.is-warn .pedw-big b{color:#ff9d92}
.pedw-light.is-warn .pedw-big b{color:var(--rosso)}
.pedw.is-full .pedw-big b{color:var(--gold)}

/* barra di avanzamento della pedana in corso */
.pedw-track{position:relative;height:10px;border-radius:999px;margin:16px 0 6px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.pedw-light .pedw-track{background:var(--line-2);box-shadow:inset 0 1px 3px rgba(14,42,107,.10)}
.pedw-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;overflow:hidden;background:linear-gradient(90deg,var(--blu-3),#5b86e5);transition:width .55s cubic-bezier(.22,.61,.36,1),background .35s}
.pedw-light .pedw-fill{background:linear-gradient(90deg,var(--blu),var(--blu-3))}
.pedw-shine{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-100%);animation:pedwShine 2.6s ease-in-out infinite}
@keyframes pedwShine{0%{transform:translateX(-100%)}55%{transform:translateX(220%)}100%{transform:translateX(220%)}}
.pedw-tick{position:absolute;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.28);border-radius:1px}
.pedw-light .pedw-tick{background:rgba(14,42,107,.14)}
.pedw-cursor{position:absolute;top:-7px;left:0;transform:translateX(-50%);transition:left .55s cubic-bezier(.22,.61,.36,1)}
.pedw-cursor b{display:block;font-size:12px;font-weight:900;padding:3px 8px;border-radius:999px;background:#fff;color:var(--blu);box-shadow:0 3px 10px rgba(8,26,69,.3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pedw.is-warn .pedw-fill{background:linear-gradient(90deg,#c0392b,#e2685a)}
.pedw.is-warn .pedw-cursor b{background:var(--rosso);color:#fff}
.pedw.is-full .pedw-fill{background:linear-gradient(90deg,#e0941a,var(--gold))}
.pedw.is-full .pedw-cursor b{background:var(--gold);color:#231a00}

/* scena 3D */
.pedw-scene{position:relative;height:232px;display:flex;align-items:center;justify-content:center;perspective:1050px;margin:8px 0 0}
.pedw-world{position:relative;width:172px;height:120px;margin-top:30px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);animation:pedwFloat 8s ease-in-out infinite}
@keyframes pedwFloat{0%{transform:rotateX(58deg) rotateZ(-38deg) translateZ(0)}50%{transform:rotateX(58deg) rotateZ(-38deg) translateZ(6px)}100%{transform:rotateX(58deg) rotateZ(-38deg) translateZ(0)}}
.pedw-world i{display:block;position:absolute}
.pedw-shadow{position:absolute;left:-18px;top:-16px;right:-26px;bottom:-24px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(3,10,32,.46) 0%,rgba(3,10,32,0) 68%);transform:translateZ(-16px)}
.pedw-light .pedw-shadow{background:radial-gradient(ellipse at center,rgba(14,42,107,.20) 0%,rgba(14,42,107,0) 68%)}

/* pedana vera: pianale a doghe, blocchetti, aperture per le forche */
.pedw-pallet{width:172px;height:120px;transform-style:preserve-3d}
.pedw-pallet i{display:block;position:absolute}
.pedw-pallet .pp-deck{top:0;left:0;right:0;bottom:0;transform:translateZ(15px);border-radius:2px;background:repeating-linear-gradient(90deg,#d2a86a 0,#d2a86a 28px,#a67d43 28px,#a67d43 30px,#6b4b25 30px,#6b4b25 34px);box-shadow:inset 0 0 0 2px rgba(96,64,28,.55),inset 0 0 22px rgba(96,64,28,.20)}
.pedw-pallet .pp-front{left:0;top:100%;width:172px;height:15px;transform-origin:top;transform:rotateX(-90deg);background:linear-gradient(90deg,#b78f52 0,#b78f52 20%,#3a2712 20%,#3a2712 38%,#b78f52 38%,#b78f52 62%,#3a2712 62%,#3a2712 80%,#b78f52 80%,#b78f52 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.35)}
.pedw-pallet .pp-side{top:0;left:100%;width:15px;height:120px;transform-origin:left;transform:rotateY(90deg);background:linear-gradient(0deg,#9d7743 0,#9d7743 26%,#33220f 26%,#33220f 48%,#9d7743 48%,#9d7743 74%,#33220f 74%,#33220f 96%,#9d7743 96%,#9d7743 100%);box-shadow:inset 0 0 0 1px rgba(60,38,16,.5)}

/* cartoni: 4 x 2 per strato, 5 strati */
.pedw-boxes{position:absolute;width:164px;height:112px;left:4px;top:4px;transform-style:preserve-3d;transform:translateZ(16px)}
.pedw-boxes.hit{animation:pedwHit .4s cubic-bezier(.3,.9,.4,1)}
@keyframes pedwHit{0%{transform:translateZ(16px)}30%{transform:translateZ(12px)}60%{transform:translateZ(17px)}100%{transform:translateZ(16px)}}
.pedw-box{position:absolute;left:0;top:0;width:41px;height:56px;transform-style:preserve-3d;transform:var(--tf)}
.pedw-box i{display:block;position:absolute}
.pedw-box.in{animation:pedwDrop .58s cubic-bezier(.25,1,.5,1) var(--dly,0ms) backwards}
/* Ogni collo cade con una rotazione sua (--rot, casuale da JS), tocca la
   pedana, si schiaccia per il peso e rimbalza. La parte var(--tf) va
   ripetuta a ogni passaggio: e' cio' che tiene il cartone al suo posto
   nella pila 3D. */
@keyframes pedwDrop{
  0%{transform:var(--tf) translateZ(150px) rotateZ(var(--rot,-8deg)) scale3d(1.08,1.08,1);opacity:0;filter:brightness(1.45)}
  22%{opacity:1}
  46%{transform:var(--tf) translateZ(0) rotateZ(0deg) scale3d(1,1,1);filter:brightness(1.2)}
  62%{transform:var(--tf) translateZ(0) rotateZ(0deg) scale3d(1.08,1.08,.82);filter:brightness(1.1)}
  80%{transform:var(--tf) translateZ(2px) rotateZ(0deg) scale3d(.96,.96,1.05)}
  100%{transform:var(--tf) translateZ(0) rotateZ(0deg) scale3d(1,1,1);opacity:1;filter:none}
}
.pedw-box.in::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,236,190,.95);opacity:0;pointer-events:none;animation:pedwRing .5s ease-out var(--dly,0ms)}
@keyframes pedwRing{0%{transform:scale(.5);opacity:0}70%{transform:scale(.7);opacity:.9}100%{transform:scale(4.6);opacity:0}}
.pedw-box .bt{left:1px;top:1px;width:39px;height:54px;transform:translateZ(26px);border-radius:1px;background-size:34px 34px,cover;box-shadow:inset 0 0 0 1px rgba(110,70,26,.45),inset 0 0 12px rgba(110,70,26,.14)}
.pedw-box .ba{left:1px;top:100%;width:39px;height:26px;transform-origin:top;transform:translateY(-1px) rotateX(-90deg);background-size:34px 34px,cover;box-shadow:inset 0 0 0 1px rgba(110,70,26,.4),inset 0 3px 6px rgba(0,0,0,.10)}
.pedw-box .bb{top:1px;left:100%;width:26px;height:54px;transform-origin:left;transform:translateX(-1px) rotateY(90deg);background-size:34px 34px,cover;box-shadow:inset 0 0 0 1px rgba(110,70,26,.4),inset 3px 0 6px rgba(0,0,0,.14)}
.pedw-box .bt::after{content:"";position:absolute;left:0;right:0;top:46%;height:10%;background:rgba(122,80,32,.30);box-shadow:0 -1px 0 rgba(255,255,255,.22),0 1px 0 rgba(255,255,255,.22)}
.pedw-box .ba::after{content:"";position:absolute;left:22%;top:26%;width:56%;height:46%;border-radius:1px;background:rgba(255,252,244,.72);box-shadow:inset 0 0 0 1px rgba(110,70,26,.22)}
.pedw-box.t0 .bt{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(150deg,#e9bd82,#dbab6c)}
.pedw-box.t0 .ba{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#d3a163,#c28f52)}
.pedw-box.t0 .bb{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#c1904f,#b17f42)}
.pedw-box.t1 .bt{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(150deg,#f0c78f,#e2b478)}
.pedw-box.t1 .ba{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#dcaa6d,#cb985c)}
.pedw-box.t1 .bb{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#ca9959,#ba884c)}
.pedw-box.t2 .bt{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(150deg,#dfb175,#d1a061)}
.pedw-box.t2 .ba{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#c99a5c,#b8884b)}
.pedw-box.t2 .bb{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#b88848,#a8783c)}
.pedw.is-warn .pedw-box .bt{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(150deg,#f0a094,#e2756a)}
.pedw.is-warn .pedw-box .ba{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#dd6d60,#cb5b4f)}
.pedw.is-warn .pedw-box .bb{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#cb5b4f,#b94c41)}
.pedw.is-warn .pedw-box .bt::after{background:rgba(120,30,22,.24)}
.pedw.is-full .pedw-box .bt{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(150deg,#ffdc95,#f7b53c)}
.pedw.is-full .pedw-box .ba{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#f0a92a,#dd991f)}
.pedw.is-full .pedw-box .bb{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E"),linear-gradient(180deg,#dd991f,#c98718)}
.pedw.is-full .pedw-box .bt::after{background:rgba(140,88,8,.24)}

/* pedane gia' chiuse: pile dorate accodate dietro */
.pedw-done-wrap{position:absolute;top:0;left:0;right:0;bottom:0;transform-style:preserve-3d}
.pedw-done{position:absolute;left:4px;top:4px;width:164px;height:112px;transform-style:preserve-3d;transform-origin:0 0;transition:transform .68s cubic-bezier(.22,.61,.36,1),opacity .68s,filter .68s}
.pedw-done i{display:block;position:absolute}
.pedw-done .dp{left:-4px;top:-4px;width:172px;height:120px;border-radius:2px;transform:translateZ(-1px);background:repeating-linear-gradient(90deg,#d2a86a 0,#d2a86a 28px,#a67d43 28px,#a67d43 30px,#6b4b25 30px,#6b4b25 34px);box-shadow:inset 0 0 0 2px rgba(96,64,28,.55)}
.pedw-done .dt{top:0;left:0;right:0;bottom:0;transform:translateZ(130px);border-radius:2px;background:linear-gradient(150deg,#ffdc95,#f7b53c);box-shadow:inset 0 0 0 2px rgba(151,96,10,.42)}
.pedw-done .da{left:0;top:100%;width:164px;height:130px;transform-origin:top;transform:rotateX(-90deg);background:repeating-linear-gradient(0deg,#f0a92a 0,#f0a92a 26px,#dd991f 26px,#dd991f 28px);box-shadow:inset 0 0 0 1px rgba(151,96,10,.35)}
.pedw-done .db{top:0;left:100%;width:130px;height:112px;transform-origin:left;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#dd991f 0,#dd991f 26px,#c98718 26px,#c98718 28px);box-shadow:inset 0 0 0 1px rgba(151,96,10,.35)}
.pedw-done.d1{transform:translate3d(-56px,-40px,0) scale(.82);opacity:.95;filter:brightness(.97)}
.pedw-done.d2{transform:translate3d(-102px,-73px,0) scale(.66);opacity:.7;filter:brightness(.88)}
.pedw-done.arrive{transform:translate3d(0,0,0) scale(1);opacity:1;filter:none}

/* momento della pedana completata */
.pedw-scene::after{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:22px;background:radial-gradient(ellipse at 52% 58%,rgba(245,166,35,.4) 0%,rgba(245,166,35,0) 62%);opacity:0;pointer-events:none}
.pedw.celebrate .pedw-scene::after{animation:pedwGlow 1.5s ease-out}
@keyframes pedwGlow{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.pedw.celebrate .pedw-cursor b{animation:pedwPulse .55s cubic-bezier(.2,.75,.3,1.4) 2}
@keyframes pedwPulse{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.pedw-flag.gold{color:var(--gold)}
.pedw-light .pedw-flag.gold{color:var(--ambra)}

.pedw-empty{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7)}
.pedw-light .pedw-empty{color:var(--ink-mute)}
.pedw:not(.is-empty) .pedw-empty{display:none}
.pedw.is-empty .pedw-world{opacity:.9}
.pedw-mid{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;min-height:20px}
.pedw-m3{font-size:12.5px;color:rgba(255,255,255,.72);font-weight:600}
.pedw-light .pedw-m3{color:var(--ink-mute)}
.pedw-full{display:flex;align-items:center;gap:4px}
.pedw-full i{width:20px;height:12px;border-radius:2px;background:linear-gradient(135deg,#ffd98c,#f5a623);border:1px solid rgba(151,96,10,.55);transform:skewX(-16deg);box-shadow:1px 1px 0 rgba(0,0,0,.18)}
.pedw-full u{text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.04em;margin-left:4px;color:var(--gold)}
.pedw-light .pedw-full u{color:var(--ambra)}
.pedw-flag{margin-top:8px;font-size:12.5px;font-weight:800;color:rgba(255,255,255,.85)}
.pedw.is-warn .pedw-flag{color:#ffb4ab}
.pedw-light .pedw-flag{color:var(--ink-soft)}
.pedw-light.is-warn .pedw-flag{color:var(--rosso)}
.pedw-stima{margin-top:7px;font-size:12px;font-weight:700;line-height:1.4;color:#ffd08a}
.pedw-light .pedw-stima{color:var(--ambra)}
.pedw-min{margin-top:9px;padding:9px 12px;border-radius:11px;font-size:12.5px;font-weight:700;line-height:1.45;background:rgba(245,166,35,.16);border:1px solid rgba(245,166,35,.34);color:#ffd98c}
.pedw-light .pedw-min{background:var(--ambra-bg);border-color:#f0d9a8;color:var(--ambra)}
@media (prefers-reduced-motion:reduce){
  .pedw-world{animation:none}
  .pedw-box.in{animation:none}
  .pedw-box.in::after{animation:none}
  .pedw-shine{animation:none}
}
@media (max-width:980px){
  .hero-balance.hero-balance-pedana{display:flex;width:100%;max-width:540px;margin:8px auto 0;justify-self:stretch}
}
@media (max-width:700px){
  .pedw-big b{font-size:28px}
  .pedw-scene{height:210px}
}

/* ================= PREZZO CONSIGLIATO (listino 8) ================= */
.rec-price{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.rec-price b{color:var(--ink);font-weight:800;font-size:13.5px}
.rec-price small{font-size:11px;color:var(--ink-mute);font-weight:600}
.rec-margin{background:var(--verde-bg);color:var(--verde);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800;letter-spacing:.02em}

/* ================= ARTICOLO IN ARRIVO ================= */
.tag.arrivo{right:11px;background:var(--ambra-bg);color:var(--ambra)}
.stock.arrivo{color:var(--ambra)}
.stock.arrivo .d{background:var(--gold)}

/* ================= FASCIA MODALITA' AGENTE ================= */
.agent-band{background:linear-gradient(90deg,#8f1d13,#c0392b);color:#fff;font-size:13px;font-weight:600;position:relative;z-index:60}
.agent-band-inner{max-width:1400px;margin:0 auto;padding:8px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.agent-band-dot{width:8px;height:8px;border-radius:50%;background:#ffd978;flex:none}
.agent-band-txt{flex:1;min-width:200px}
.agent-band-actions{display:flex;gap:10px;flex-wrap:wrap}
.agent-band-actions a{color:#fff;text-decoration:none;font-weight:800;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.agent-band-actions a:hover{border-bottom-color:#fff}
.nav a.nav-agente{color:#a32a20;font-weight:800}
@media (max-width:700px){.agent-band-inner{padding:7px 14px;font-size:12px}}

/* ================= BANNER CARRELLO (sospesi, errori) ================= */
.cart-banner{border-radius:var(--r);padding:14px 18px;margin-bottom:18px;font-size:14px;line-height:1.55;font-weight:600}
.cart-banner.rosso{background:var(--rosso-bg);color:#a32a20;border:1px solid #f3c3bd}
.cart-banner.ambra{background:var(--ambra-bg);color:var(--ambra);border:1px solid #f0d9a8}
.cart-banner b{font-weight:900;letter-spacing:.02em}

/* ================= BANNER "INSTALLA L'APP" =================
   Nascosto per costruzione: si vede solo con la classe pwa-show, che il
   codice aggiunge solo da telefono. Su computer non compare mai. */
.pwa-banner{display:none}
.pwa-banner.pwa-show{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:220;display:flex;align-items:center;gap:11px;background:#0E2A6B;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 12px;box-shadow:0 16px 40px rgba(8,26,69,.42);max-width:520px;margin:0 auto;animation:pwaUp .34s cubic-bezier(.22,.61,.36,1)}
@keyframes pwaUp{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
.pwa-ico{width:38px;height:38px;border-radius:10px;flex:none;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.pwa-txt{flex:1;min-width:0;line-height:1.3}
.pwa-txt b{display:block;font-size:13.5px;letter-spacing:-.01em}
.pwa-txt span{display:block;font-size:11.5px;color:#bfd0ff;margin-top:2px}
.pwa-btn{flex:none;border:none;border-radius:10px;background:var(--gold);color:#231a00;font-weight:800;font-size:13px;padding:9px 14px;cursor:pointer;font-family:inherit}
.pwa-btn:active{transform:scale(.97)}
.pwa-x{flex:none;border:none;background:rgba(255,255,255,.14);color:#fff;width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;font-family:inherit;padding:0}
.pwa-x:active{background:rgba(255,255,255,.26)}
@media (min-width:901px){.pwa-banner{display:none}.pwa-banner.pwa-show{display:none}}

/* scheda prodotto: se le caselle sono in numero dispari, l'ultima si
   allarga su entrambe le colonne invece di lasciare il vuoto a destra */
.modal .m-grid .m-stat:last-child:nth-child(odd){grid-column:1 / -1}

/* ---- Scheda prodotto sul telefono: foglio pieno, una colonna ---- */
@media (max-width: 760px){
  .modal{padding:0;align-items:stretch;justify-content:stretch}
  .modal .box{grid-template-columns:1fr;max-width:none;width:100%;max-height:100dvh;height:100dvh;border-radius:0;animation:none}
  .modal .m-x{position:sticky;top:10px;margin-left:auto;margin-right:10px;width:44px;height:44px}
  .modal-loading{grid-template-columns:1fr;min-height:100dvh}
  .modal-loading-media{margin:16px;min-height:260px}
}

/* ---- Suggerimenti istantanei della ricerca ---- */
.sugg-box{display:none;position:fixed;z-index:2000;background:#fff;border:1px solid var(--line,#e6eaf2);border-radius:16px;box-shadow:0 18px 44px rgba(14,42,107,.16);overflow:hidden;max-height:min(430px,60vh);overflow-y:auto}
.sugg-box.show{display:block}
.sugg-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;background:#fff;border:0;border-bottom:1px solid var(--line,#eef1f7);cursor:pointer;text-align:left;font:inherit}
.sugg-item:hover{background:#f4f7ff}
.sugg-img{width:44px;height:44px;object-fit:contain;flex:none;border-radius:10px;background:#f6f8fc}
.sugg-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sugg-nome{font-weight:700;font-size:14px;color:#141a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg-cod{font-size:12px;color:#5b6480;display:flex;align-items:center;gap:6px}
.sugg-disp{width:8px;height:8px;border-radius:999px;background:#1c9d5b;display:inline-block}
.sugg-tutti{display:block;width:100%;padding:12px 14px;background:#f7f9ff;border:0;cursor:pointer;font-weight:700;font-size:13px;color:var(--navy,#0E2A6B);text-align:center}
.sugg-tutti:hover{background:#eef3ff}
@media (max-width:760px){
  .sugg-box{max-height:52vh;border-radius:14px}
  .sugg-item{padding:12px}
}

/* ---- "Gia' nel tuo ordine": la scheda dice quanti colli del prodotto ----
   ---- sono gia' nel carrello dell'ordine corrente (tutti gli schermi) ---- */
.gia-ordine{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:9px 12px;background:#ecfaf2;border:1px solid rgba(28,157,91,.25);border-radius:12px;font-size:13px;font-weight:700;color:#31405f;max-width:280px}
.gia-ordine[hidden]{display:none}
.gia-spunta{width:22px;height:22px;border-radius:50%;background:#0f8a4d;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.gia-ordine b{margin-left:auto;font-size:16px;color:#0f8a4d;white-space:nowrap}

/* ---- La pistola da negozio: +/- del carrello nella scheda (mobile) ---- */
.pistola-bar{display:none}
@media (max-width:980px){
  .pistola-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:8px 10px;background:#f3f6ff;border:1px solid rgba(29,68,160,.14);border-radius:14px}
  .pistola-bar button{width:52px;height:44px;border-radius:12px;border:1px solid rgba(29,68,160,.20);background:#fff;font-size:22px;font-weight:800;color:var(--blu,#1d44a0);cursor:pointer}
  .pistola-bar button:disabled{opacity:.35}
  .pistola-bar .pistola-n{font-size:13px;font-weight:700;color:#31405f}
  .pistola-bar .pistola-n b{font-size:16px;color:var(--blu,#1d44a0)}
  .pistola-bar.pistola-viva{background:#ecfaf2;border-color:rgba(28,157,91,.25)}
  .pistola-bar.pistola-viva .pistola-n b{color:#0f8a4d}
}

/* ---- Distintivo sulla card: quanti colli gia' in carrello --------------
   Nasce e muore dal javascript del catalogo (mappa dal carrello, mai dal
   PHP: l'HTML delle card viaggia in cache). Basso a destra nella foto,
   non copre i cartellini in alto. ---- */
.gia-card{position:absolute;bottom:11px;right:11px;z-index:4;display:inline-flex;align-items:center;gap:6px;background:#0f8a4d;color:#fff;font-size:11px;font-weight:900;letter-spacing:.02em;padding:6px 11px;border-radius:999px;box-shadow:0 8px 18px rgba(15,138,77,.35);pointer-events:none;animation:gia-card-pop .18s ease-out}
.gia-card-spunta{font-size:12px}
@keyframes gia-card-pop{from{opacity:0;transform:translateY(5px) scale(.92)}to{opacity:1;transform:none}}
@media (max-width:980px){.gia-card{bottom:8px;right:8px;padding:5px 9px}}
@media (prefers-reduced-motion:reduce){.gia-card{animation:none}}

/* Avvisi rossi: quando la rete perde un gesto, lo si dice chiaro. */
.toast.toast-err{background:var(--rosso)}
.toast.toast-err svg{color:#fff}

/* ---- La scheda dopo la scansione (telefono e tablet) -------------------
   La foto e' un riscontro, non la protagonista: piccola e sempre intera.
   La zona d'azione (colli, +/- della pistola, Aggiungi) resta incollata
   in fondo allo schermo: bip, piu', piu', prossimo — senza mai scorrere. */
@media (max-width:980px){
  .modal .m-ph{padding:10px 14px 6px}
  .modal .m-ph img,
  .modal .m-ph .modal-product-img,
  .modal .m-ph .modal-product-img.img-ultra-portrait,
  .modal .m-ph .modal-product-img.img-portrait,
  .modal .m-ph .modal-product-img.img-square,
  .modal .m-ph .modal-product-img.img-landscape{max-height:24vh;max-width:72%;width:auto;height:auto}
  .modal .m-info{padding:14px 16px 10px}
  .modal .m-grid{gap:8px}
  .modal .buy{position:sticky;bottom:0;z-index:4;background:#fff;max-width:none !important;margin-top:14px;padding:10px 0 12px;box-shadow:0 -12px 22px rgba(14,42,107,.10);border-top:1px solid var(--line-2,#eef1f7)}
  .pistola-bar button{width:64px;height:52px;font-size:24px}
  .pistola-bar .pistola-n b{font-size:18px}
}

/* Telefono tenuto in orizzontale: lo schermo e' basso, la zona d'azione
   si mette in riga (colli, +/- pistola, Aggiungi affiancati) e la foto
   si fa ancora piu' discreta. Tutto in vista anche a 390px di altezza. */
@media (max-width:980px) and (max-height:520px){
  .modal .m-ph img,
  .modal .m-ph .modal-product-img,
  .modal .m-ph .modal-product-img.img-ultra-portrait,
  .modal .m-ph .modal-product-img.img-portrait,
  .modal .m-ph .modal-product-img.img-square,
  .modal .m-ph .modal-product-img.img-landscape{max-height:16vh}
  .modal .buy{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding:8px 0 10px;margin-top:8px}
  .modal .buy .stepper{flex:0 0 auto}
  .modal .buy .pistola-bar{margin-top:0;flex:0 0 auto;gap:8px;padding:6px 8px}
  .modal .buy .pistola-bar button{width:48px;height:44px;font-size:20px}
  .modal .buy .add{flex:1 1 auto;min-width:0}
  .modal .buy .gia-ordine{display:none}
}

/* Foglio scanner, variante ospite: l'invito ad accedere e la nota di
   quando la torcia non e' offerta dal browser. */
.se-accedi{display:block;text-align:center;margin-top:12px;padding:14px;border:1.5px solid var(--blu,#1d44a0);border-radius:13px;color:var(--blu,#1d44a0);font-weight:800;font-size:15px;text-decoration:none;background:#fff}



/* ==========================================================================
   iPHONE: LO SCHERMO NON SI INGRANDISCE PIU' QUANDO SI TOCCA UN CAMPO
   ==========================================================================
   Segnalato da Fabio il 26/08/2026: «gli iPhone quando cliccano si zooma lo
   schermo».

   PERCHE' SUCCEDE: iOS ingrandisce la pagina da solo ogni volta che si mette
   il dito in un campo il cui testo e' piu' piccolo di 16 punti. E' una regola
   di Apple, non un difetto del sito: serve a non far scrivere la gente su
   caratteri minuscoli. Nel portale alcuni campi erano a 13 e 15 punti, e
   bastavano quelli a far saltare la pagina a ogni tocco.

   ⚠ NON si toglie con `maximum-scale=1` nel viewport, che e' il rimedio che
   si trova in giro: quello vieta l'ingrandimento A TUTTI, anche a chi ci vede
   poco e deve allargare per leggere. Si porta il testo dei campi a 16 punti
   sui dispositivi che si toccano: iOS smette di ingrandire da solo, e chi
   vuole ingrandire con le dita continua a poterlo fare.

   Vale solo dove si tocca (`pointer: coarse`): sul computer i campi restano
   come sono. */
@media (pointer: coarse) {
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }

}

/* ===================================================================
   TASTI DA TOCCARE COL DITO (20/09/2026, misurati)
   -------------------------------------------------------------------
   Il metro di casa vuole almeno 44 px di lato: sotto, il dito prende il
   tasto accanto.

   Le DUE condizioni separate dalla virgola valgono come «oppure», e ci
   sono tutte e due per un motivo pagato il 20/09:
   - «pointer: coarse» prende i telefoni e i tablet VERI, a qualunque
     larghezza (a 768 px «Esci» tornava a 20 px quando la regola stava solo
     sotto max-width:560px);
   - «max-width: 820px» prende il misuratore e chiunque guardi da una
     finestra stretta col mouse: verifica-responsive.py apre un browser da
     scrivania ridimensionato, dove «pointer: coarse» NON si attiva, e
     senza questa seconda condizione segnalerebbe rossi che sul telefono
     vero non esistono. Un falso rosso e' peggio di nessun controllo:
     insegna a non guardare piu'.

   Non si ingrandisce niente a vedersi - il logo resta alto 38, la scritta
   «Esci» resta piccola - si allarga solo la ZONA che risponde al tocco.
   =================================================================== */
@media (pointer: coarse), (max-width: 820px) {
  .brand { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .logout { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  /* Un link dentro una frase che pero' e' l'unica via d'uscita della pagina
     («Torna al catalogo» nel carrello vuoto): resta un link, ma la zona che
     risponde al dito arriva a 44 px. */
  .link-tocca { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  /* I bottoncini dentro le tabelle (Documento, PDF, ORD, Riordina negli
     ordini): erano alti 39 px, cioe' cinque in meno del necessario. Si
     alzano soltanto: larghezza, testo e colore restano quelli. */
  .btn { min-height: 44px; }
  a.btn { display: inline-flex; align-items: center; justify-content: center; }
  /* I due interruttori del prezzo in testata («Imp.» e «Ivato»): erano alti
     32 px. Si alzano a 44 senza toccare la larghezza, cosi' la coppia resta
     della stessa forma e non spinge fuori il resto della barra. */
  .topbar-price-btn { min-height: 44px; }
  /* Le voci del menu: a 44 px erano gia' sotto i 560 px, ma su un tablet da
     768 tornavano a 38. Qui valgono ovunque si tocchi. */
  .nav a { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ===================================================================
   IL PREZZO E' CAMBIATO - la banda e il cartellino del carrello
   (20/09/2026)
   -------------------------------------------------------------------
   I colori NON sono --ambra e --verde nudi: su sfondo chiaro quei due
   arrivano a 3,6:1 e 3,7:1, sotto il 4,5:1 che serve perche' un testo si
   legga davvero. Qui il testo usa le due versioni scure (#8a5a00 e
   #0b6b43, misurate a 6,1:1 e 6,0:1 sui rispettivi sfondi) e l'ambra e il
   verde di casa restano dove il contrasto non conta: bordo e riga
   laterale. La spunta e' alta 44 px come ogni cosa che si tocca col dito.
   =================================================================== */
.cv-banda{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  align-items:start;
  padding:16px 18px; margin:0 0 14px;
  border:1px solid; border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.cv-banda.su { background:var(--ambra-bg); border-color:rgba(182,121,26,.30); }
.cv-banda.giu{ background:var(--verde-bg); border-color:rgba(16,145,90,.28); }
/* La pastiglia col simbolo: prende tutte e tre le righe della griglia, cosi'
   resta in alto accanto al titolo anche quando il testo va a capo. */
.cv-banda .cv-seg{
  grid-row:1 / span 3; align-self:start;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  font-size:15px; line-height:1; font-weight:700;
}
.cv-banda.su  .cv-seg{ background:rgba(182,121,26,.16); color:#8a5a00; }
.cv-banda.giu .cv-seg{ background:rgba(16,145,90,.14);  color:#0b6b43; }
.cv-banda .cv-tit{ font-weight:800; font-size:16px; line-height:1.3; }
.cv-banda.su  .cv-tit{ color:#8a5a00; }
.cv-banda.giu .cv-tit{ color:#0b6b43; }
.cv-banda .cv-txt{ color:var(--ink); font-size:14px; line-height:1.55; }
.cv-banda .cv-txt b{ font-weight:700; }
.cv-spunta{
  grid-column:2;
  /* Il quadratino si allinea alla PRIMA riga del testo, non al centro di
     tutte: con due righe (20/09/2026, «facoltativo» andato a capo) un
     quadratino centrato sembra storto rispetto alla frase che etichetta. */
  display:flex; align-items:flex-start; gap:11px;
  min-height:44px; margin-top:2px; padding:0 2px;
  font-weight:700; color:var(--ink); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cv-spunta input{ width:22px; height:22px; flex:none; accent-color:var(--blu); cursor:pointer; }

/* Il cartellino sopra il prezzo della riga cambiata. E' un blocco a se',
   non un pezzo di testo accanto al prezzo: sul telefono la cella della
   tabella e' una griglia e due figli sulla stessa riga andrebbero a capo
   sotto l'etichetta invece che accanto al valore. */
.cv-era{
  display:block; font-size:12px; font-weight:700;
  line-height:1.35; letter-spacing:.2px; white-space:nowrap;
}
.cv-era.su { color:#8a5a00; }
.cv-era.giu{ color:#0b6b43; }
.cv-era .cv-fre{ font-size:11px; }

@media (max-width:560px){
  .cv-banda{ padding:14px 15px; gap:3px 11px; }
  .cv-banda .cv-seg{ width:32px; height:32px; font-size:13px; }
  .cv-banda .cv-tit{ font-size:15px; }
  .cv-era{ white-space:normal; }
}

/* Il prezzo della riga non si spezza fra il simbolo e il numero (20/09/2026).
   A 390 px la cella e' larga 104 px e «€ 103,33/collo» non ci sta: senza
   questo, il browser lasciava «€» da solo su una riga e il numero sotto.
   Con nowrap il numero resta intero e, se proprio non ci sta, e' «/collo» a
   scendere - che si legge, mentre un simbolo di valuta orfano no. */
.cv-prezzo{ white-space:nowrap; }
.cv-prezzo .cv-um{ white-space:nowrap; }
@media (max-width:560px){
  .cv-prezzo{ display:inline-block; }
  .cv-prezzo .cv-um{ display:inline-block; }
}

/* L'etichetta della spunta: la parola «facoltativo» sta su una riga sua,
   piccola e smorzata, invece di accodarsi alla frase e andare a capo a
   meta'. Cosi' a 390 px il blocco resta allineato e si legge in un colpo. */
.cv-spunta-testo{ display:flex; flex-direction:column; line-height:1.3; }
.cv-spunta-testo small{
  font-weight:600; font-size:12px; color:var(--ink-mute);
  font-style:normal; letter-spacing:.2px;
}
.cv-spunta input{ margin-top:1px; }

/* ===================================================================
   DIFETTI VISTI NELLE FOTO DEL 23/09/2026 (giro a 1280 e 390 px)
   -------------------------------------------------------------------
   Tre cose, ognuna col suo motivo scritto qui sotto:
   1. il carrello sul telefono era una tabella da 617 px in 360: si vedevano
      codice, nome e prezzo; il «+», il totale di riga, «Rimuovi» e perfino
      gli importi di Imponibile / IVA / Totale ordine restavano fuori a
      destra, senza niente che dicesse che c'erano (misurato: scrollWidth
      617 contro clientWidth 360). Chi conferma dal telefono non vedeva le
      cifre che sta confermando;
   2. il tasto «Rimuovi» nella tabella del carrello aveva l'aspetto grezzo
      del browser (bordo grigio, sfondo a bottone): la regola che lo veste
      vale solo dentro il cassetto (.ci .ci-rm) e qui non arrivava;
   3. la barra in alto fra 981 e 1536 px (tablet in orizzontale e quasi
      tutti i portatili): a 1024 «SPESA ATTUALE IVATA» e «articoli nel
      carrello» si stampavano UNO SOPRA L'ALTRO, a 1280 «Cliente attivo»
      diventava «CLIENTE A...», e le voci del menu andavano a capo su due
      righe fino a 1536. La striscia del cliente scende su una riga sua,
      come gia' fa sotto i 980, e sopra c'e' posto per tutto.
   =================================================================== */

/* IN MODALITA' APP NON SI TOCCA NIENTE (23/09/2026 sera): sul telefono vero
   il portale entra in modalita' app (html.ged-app) e li' il carrello e' GIA'
   a schede, con ged-app.min.css: queste regole lo spostavano («Rimuovi» a
   sinistra, − / + al centro). Valgono solo fuori dall'app, dove la tabella
   era davvero larga 606 px in 360 (browser stretto, finestra ridotta). */
/* --- 1. IL CARRELLO SUL TELEFONO: UNA SCHEDA PER RIGA ------------------
   Stesso metodo della tabella ordini (blocco «LA TABELLA DEGLI ORDINI SUL
   TELEFONO» qui sopra): sotto i 560 px l'intestazione sparisce e ogni riga
   e' una griglia. Dove cade ogni cella:
     riga 1: codice (a sinistra) e «Rimuovi» (a destra)
     riga 2: nome dell'articolo con la confezione
     riga 3: prezzo al collo (a sinistra) e i colli con − / + (a destra)
     riga 4: totale di riga, con l'etichetta sopra
   Le tre righe del piede (Imponibile, IVA, Totale ordine) diventano
   «etichetta a sinistra, cifra a destra»: la cella vuota di servizio
   sparisce. Il JavaScript non c'entra: upd() ricarica la pagina, e le
   classi cart-* stanno nell'HTML di carrello.php. SUL COMPUTER NON CAMBIA
   NIENTE: sta tutto dentro il @media. */
@media(max-width:560px){
  html:not(.ged-app) .cart-table thead{display:none}
  html:not(.ged-app) .cart-table,html:not(.ged-app) .cart-table tbody,html:not(.ged-app) .cart-table tfoot{display:block;width:100%}
  html:not(.ged-app) .cart-table tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "cod rm"
      "prod prod"
      "prezzo qta"
      "tot tot";
    gap:8px 12px;align-items:center;
    padding:14px 16px;border-top:1px solid var(--line-2)
  }
  html:not(.ged-app) .cart-table tbody tr:hover td,html:not(.ged-app) .cart-table tbody tr:hover{background:transparent}
  html:not(.ged-app) .cart-table td{display:block;border:0;padding:0;font-size:14px;min-width:0;text-align:left !important}
  html:not(.ged-app) .cart-table .cart-cod{grid-area:cod;font-size:12px;color:var(--ink-mute)}
  html:not(.ged-app) .cart-table .cart-rm{grid-area:rm;justify-self:end}
  html:not(.ged-app) .cart-table .cart-prod{grid-area:prod;font-size:15px;line-height:1.3}
  html:not(.ged-app) .cart-table .cart-prezzo{grid-area:prezzo}
  html:not(.ged-app) .cart-table .cart-qty-cell{grid-area:qta;justify-self:end}
  html:not(.ged-app) .cart-table .cart-qty-stack{align-items:flex-end}
  html:not(.ged-app) .cart-table .cart-qty-meta{text-align:right}
  html:not(.ged-app) .cart-table .cart-tot{grid-area:tot;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:17px;padding-top:6px;border-top:1px dashed var(--line-2)}
  /* senza intestazione la cifra da sola non direbbe che e' il totale della
     riga: l'etichetta viene dall'intestazione che non c'e' piu' */
  html:not(.ged-app) .cart-table .cart-tot::before{content:"Totale riga";font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);font-weight:700}
  /* il piede: Imponibile / IVA / Totale ordine, etichetta e cifra sulla
     stessa riga; il colspan non vale in una griglia, e la cella vuota
     di servizio (l'ultima) va nascosta */
  html:not(.ged-app) .cart-table tfoot tr.cart-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line-2);background:var(--bg)}
  html:not(.ged-app) .cart-table tfoot tr.cart-foot td{background:transparent;font-size:15px}
  html:not(.ged-app) .cart-table tfoot tr.cart-foot td:last-child{display:none}
  html:not(.ged-app) .cart-table tfoot tr.cart-foot td[colspan]{flex:1 1 auto}
  html:not(.ged-app) .cart-table tfoot tr.cart-foot td[id]{white-space:nowrap;font-size:17px}
}

/* --- 2. «RIMUOVI» NELLA TABELLA DEL CARRELLO, VESTITO COME NEL CASSETTO ---
   Testo grigio senza bordo che diventa rosso al passaggio, e alto 44 px
   per il dito: sotto un tasto piccolo si sbaglia riga, e qui sbagliare
   riga vuol dire togliere dall'ordine l'articolo sbagliato. */
html:not(.ged-app) .cart-table .ci-rm{background:0;border:0;color:var(--ink-mute);cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;padding:10px 8px;min-height:44px;border-radius:8px;transition:.15s}
html:not(.ged-app) .cart-table .ci-rm:hover{color:var(--rosso);background:var(--rosso-bg)}

/* --- 3. LA BARRA IN ALTO FRA 981 E 1536 PX ------------------------------
   Sotto i 980 px la striscia «Cliente attivo · Spesa attuale» scende gia'
   su una riga sua (regola piu' su, nel blocco dei 980). Fra 981 e 1536 non
   scendeva e non ci stava: a 1024 i due riquadri si sovrapponevano, a 1280
   il nome del cliente era tagliato. Qui si applica lo stesso rimedio a
   quelle larghezze: la barra va a capo, la striscia prende tutta la seconda
   riga, l'altezza della barra (--topbar-h, che sposta il contenuto sotto)
   sale a 140 px come sul tablet. Le voci del menu stanno su una riga sola
   (white-space:nowrap) invece di spezzarsi in «I miei / ordini». */
@media (min-width:981px) and (max-width:1536px){
  body:has(.topbar-catalog-strip){--topbar-h:140px}
  body:has(.topbar-catalog-strip) .topbar{flex-wrap:wrap;height:auto;min-height:68px;padding-top:9px;padding-bottom:9px}
  .topbar-catalog-strip{order:9;flex:1 1 100%;width:100%;margin-top:1px}
  .topbar-catalog-tail{display:none}
}
@media (min-width:981px){
  .nav a{white-space:nowrap}
}

/* --- 4. «CATALOGO» NELLA FILA IN ALTO, SEMPRE (03/10/2026) ---------------
   Fabio dall'iPhone, sul volantino: «manca sopra il tasto per riportarli al
   catalogo»; poi «anche apk deve avere sulla sezione volantino il tasto
   catalogo» e «non lo devi nascondere mai». Il vestito dell'APK (e dal 02/10
   quello della PWA, che ne e' la copia) toglieva «Catalogo» dalla fila in
   alto perche' c'e' gia' nella barra in basso: ma chi sta sul volantino
   guarda in alto, e in alto la strada per tornare al catalogo non c'era.
   Qui la voce torna su ogni telefono e tablet: browser, PWA e APK.
   La classe ripetuta TRE volte non e' un errore: il vestito dell'APK entra
   nella pagina DOPO questo foglio e usa la classe ripetuta due volte; a
   parita' vincerebbe lui e la voce resterebbe nascosta. Cosi' la cura vale
   anche per le APK gia' installate, senza bisogno di una versione nuova.
   Sul telefono, col Volantino (quattro voci) o per l'agente (cinque), le
   voci accanto al logo non ci stanno piu' (a 390 px ne resterebbe fuori
   mezza): la fila prende una riga tutta sua sotto il logo, e «Esci» con
   «Imp. / Ivato» salgono accanto al logo. Senza Volantino le tre voci
   restano accanto al logo, come prima. Quanto costa, misurato a 360-430
   px: catalogo e volantino restano alti come prima (175 px contro 179); le
   pagine senza la striscia «Cliente attivo» (consegne, conto, ordini) a
   390 px passano da 96 a 112: e' il posto che serve a «Catalogo» per non
   sparire mai. */
html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a[href$="index.php"]{display:inline-flex;align-items:center;justify-content:center}
@media (max-width:560px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar:has(.nav-volantino) .nav,
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar:has(.nav-agente) .nav{order:10;flex:1 1 100%;width:100%;gap:6px}
  /* lo spazio vuoto fra il logo e «Esci» spinge «Esci» e i prezzi a destra */
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar:has(.nav-volantino) .tb-spacer,
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar:has(.nav-agente) .tb-spacer{flex:1 1 auto}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a:not([href$="preferenze.php"]){padding:0 8px}
  /* Nella riga sua le voci scritte si dividono lo spazio che avanza;
     l'omino del conto resta il suo quadrato da 44 px. Sui telefoni piu'
     stretti (320 px) le quattro voci del cliente ci stanno solo stringendo
     un poco i margini, quindi qui possono stringersi (misurato: la scritta
     resta dentro). */
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar:has(.nav-volantino) .nav a:not([href$="preferenze.php"]){flex:1 1 auto}
  /* All'agente che ordina per un cliente si aggiunge «Area agente»: cinque
     voci sotto i 430 px non ci stanno, e stringendole la scritta usciva dal
     riquadro. Per lui le voci non si stringono MAI (lo 0 in mezzo): la fila
     scorre di lato, come gia' faceva, e «Catalogo» resta il primo. Questa
     regola deve stare DOPO quella sopra: hanno la stessa forza, e per
     l'agente col Volantino deve vincere questa. */
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav:has(.nav-agente) a:not([href$="preferenze.php"]){flex:1 0 auto}
}
/* Fra 561 e 980 px (tablet, telefoni in orizzontale) la testata delle
   pagine senza striscia e' alta 68 px fissi: tutto su UNA riga. Con
   «Catalogo» in piu' lo spazio per il nome del cliente cala, e gia' prima
   con un nome lungo «Le mie consegne» andava a capo e il nome finiva su tre
   righe (misurato online a 600 e 640 px). Qui le voci non vanno mai a capo
   e il nome sta al massimo su due righe, poi i puntini.
   All'agente che ordina per un cliente il nome qui non serve: c'e' gia',
   per intero, nella fascia «ordine per ...» subito sotto. Togliendolo, le
   sue cinque voci ci stanno senza spingere fuori «Esci». */
@media (min-width:561px) and (max-width:980px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a{white-space:nowrap}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .who{flex:0 1 auto;min-width:0}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .who .n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-align:right}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar:has(.nav-agente) .who{display:none}
  /* Agente, pagine senza striscia, sotto i 650 px circa: nemmeno senza il
     nome le cinque voci stanno accanto al logo e a «Esci». Invece di
     mandare «Esci» fuori dallo schermo (succedeva gia' online a 600 px), la
     riga resta una sola e la fila scorre di lato. I 5 px sopra e sotto
     tengono dentro la zona del dito, come fa il vestito sul telefono. */
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:not(:has(.topbar-catalog-strip)) .topbar:has(.nav-agente){flex-wrap:nowrap}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:not(:has(.topbar-catalog-strip)) .topbar:has(.nav-agente) .nav{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;padding-top:5px;padding-bottom:5px;margin-top:-5px;margin-bottom:-5px}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:not(:has(.topbar-catalog-strip)) .topbar:has(.nav-agente) .nav::-webkit-scrollbar{display:none}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:not(:has(.topbar-catalog-strip)) .topbar:has(.nav-agente) .nav a{flex:0 0 auto}
}
/* Fino a 899 px la fila e «Imp. / Ivato» si stringono un poco (gli stessi
   margini del vestito sul telefono): e' quello che fa stare tutto su una
   riga a 667 px (iPhone SE in orizzontale), con 26 px di avanzo. Sotto i
   720 px anche il nome del cliente si nasconde, come sul telefono in
   verticale: accanto a quattro voci e a «Esci» non ci starebbe. */
@media (min-width:561px) and (max-width:899px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a:not([href$="preferenze.php"]){padding:0 8px}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .topbar-price-btn{min-width:44px;padding:0 6px}
}
@media (min-width:561px) and (max-width:720px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .who{display:none}
}
/* Pagine con la striscia «Cliente attivo» (catalogo e volantino): se
   logo, voci, «Imp. / Ivato» e «Esci» non stanno su una riga, la fila
   prende una riga sua come sul telefono. Le soglie sono misurate e
   lasciano un margine vero (almeno 14 px). Aggiornate la sera del 03/10
   quando e' tornato anche «I miei ordini» (blocco 5): col Volantino la
   fila scende fino a 677 px (a 656 «Esci» andava a capo); per l'agente
   senza Volantino fino a 695 (a 678 avanzavano 0 px); per l'agente col
   Volantino fino a 780 (a 766 avanzavano 2 px) e di nuovo fra 900 e 945,
   dove le scritte tornano lunghe (a 900 «Esci» andava a capo, a 960
   avanzano 35 px). Il cliente senza Volantino sta sempre su una riga: a
   600 px avanzano 24 px. Il margine sinistro a zero tiene la fila
   allineata al logo e alla striscia (senza, rientrava di 8 px). */
@media (min-width:561px) and (max-width:677px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-volantino) .nav{order:8;flex:1 1 100%;width:100%;margin-left:0}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-volantino) .tb-spacer{flex:1 1 auto}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-volantino) .logout{order:1}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-volantino) .topbar-price-toggle{order:2}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-volantino) .nav a:not([href$="preferenze.php"]){flex:1 1 auto}
}
@media (min-width:561px) and (max-width:695px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente) .nav{order:8;flex:1 1 100%;width:100%;margin-left:0}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente) .tb-spacer{flex:1 1 auto}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente) .logout{order:1}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente) .topbar-price-toggle{order:2}
  /* dopo la regola del Volantino qui sopra, che ha la stessa forza: per
     l'agente le voci non si stringono mai */
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente) .nav a:not([href$="preferenze.php"]){flex:1 0 auto}
}
@media (min-width:696px) and (max-width:780px), (min-width:900px) and (max-width:945px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente):has(.nav-volantino) .nav{order:8;flex:1 1 100%;width:100%;margin-left:0}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente):has(.nav-volantino) .tb-spacer{flex:1 1 auto}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente):has(.nav-volantino) .logout{order:1}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente):has(.nav-volantino) .topbar-price-toggle{order:2}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar:has(.nav-agente):has(.nav-volantino) .nav a:not([href$="preferenze.php"]){flex:1 0 auto}
}

/* --- 5. «I MIEI ORDINI» NELLA FILA IN ALTO, COME «CATALOGO» (03/10/2026 sera)
   Fabio: «si sono d'accordo con tutti 1 2 3 4 5 punti ma per favore non
   facciamo errori» (punto 4: «I miei ordini» anche nella fila in alto). Il
   vestito dell'APK lo toglieva per lo stesso motivo di «Catalogo»: sta nella
   barra in basso («Ordini»). Qui torna su telefoni e tablet, anche nelle APK
   gia' installate (stessa classe ripetuta tre volte del blocco 4).
   Con cinque voci le scritte lunghe sul telefono non ci stanno: fino a 899
   px «I miei ordini» e «Le mie consegne» si leggono «Ordini» e «Consegne»,
   le stesse parole corte della barra in basso. La scritta lunga resta nel
   collegamento (e' quella che legge la lettura vocale); la corta e'
   disegnata nel ::before, perche' il ::after e' gia' la zona invisibile da
   44 px per il dito. Sul telefono la fila sta sempre su una riga sua: anche
   senza Volantino ora le voci sono quattro, e accanto al logo non stanno. */
html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a[href$="ordini.php"]{display:inline-flex;align-items:center;justify-content:center}
/* Tutte le voci della fila centrate in altezza allo stesso modo. Senza,
   sul portale installato come app su un COMPUTER (mouse, niente vestito)
   in una finestra fra 561 e 980 px «Volantino» e «Il mio account» stavano
   in alto nella loro pastiglia e le voci nuove al centro (visto in foto a
   850 px). Nessuna voce viene nascosta qui: chi la nasconde lo fa sulla
   fila intera (.nav), non sulla voce. */
html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a{display:inline-flex;align-items:center;justify-content:center}
@media (max-width:899px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a[href$="ordini.php"],
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a[href$="consegne.php"]{font-size:0}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a[href$="ordini.php"]::before{content:"Ordini";content:"Ordini" / "";font-size:12.5px;line-height:1.2}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a[href$="consegne.php"]::before{content:"Consegne";content:"Consegne" / "";font-size:12.5px;line-height:1.2}
  /* la scritta corta e' un pezzo a se': la voce la centra in altezza come le
     altre anche dove il vestito non la mette gia' in fila (il portale
     installato come app sul computer, col mouse, fra 821 e 899 px) */
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a[href$="consegne.php"]{display:inline-flex;align-items:center;justify-content:center}
}
/* Pagine con la striscia, cliente SENZA Volantino (quattro voci): fra 561 e
   590 px logo, voci, «Imp. / Ivato» e «Esci» non stanno su una riga (a 561
   «Esci» andava a capo da solo); a 600 ne avanzano 24. Li' la fila prende
   una riga sua come col Volantino. */
@media (min-width:561px) and (max-width:590px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar .nav{order:8;flex:1 1 100%;width:100%;margin-left:0}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar .tb-spacer{flex:1 1 auto}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar .logout{order:1}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar .topbar-price-toggle{order:2}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra body:has(.topbar-catalog-strip) .topbar .nav a:not([href$="preferenze.php"]){flex:1 1 auto}
}
@media (max-width:560px){
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav{order:10;flex:1 1 100%;width:100%;gap:6px}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .tb-spacer{flex:1 1 auto}
  html.ged-app-conbarra.ged-app-conbarra.ged-app-conbarra .topbar .nav a:not([href$="preferenze.php"]){flex:1 1 auto}
}