/* MBNF supply — il portale clienti. Stesso sistema del gestionale (DESIGN.md: «La Cabina Calma»,
   stone di giorno, grafite di sera, inchiostro #1c1917, Bricolage su titoli e numeri, raggio 11px,
   easing iOS). Sul computer: minimal come /stock — testata d'inchiostro, schede con la foto su
   fondo pietra, entrata scorrendo, alone che segue il cursore. Sul telefono: le schede-tessera e la
   barra di vetro di iOS 26 del gestionale (pillola liquida, bolla, si stringe scorrendo), fogli
   che salgono dal basso e passaggi fra pagine come il «push» di iOS. */

@font-face { font-family: 'Bricolage Grotesque'; src: url("/static/bricolage.woff2") format('woff2');
  font-weight: 300 800; font-display: swap; }

:root {
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --testo: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --r: 11px; --r-sm: 8px; --r-lg: 14px;
  /* chiaro TENUE: niente bianco acceso, pietra calda (gli occhi non si stancano) */
  --sfondo: #eeece7; --carta: #f8f7f4; --carta-2: #f2f0eb; --inchiostro: #1c1917; --testo-2: #57534e;
  --muted: #78716c; --bordo: #e2ded7; --bordo-2: #d2cdc4;
  --accento: #1c1917; --accento-ink: #fff; --focus: #3b6fe0;
  --tono-neutro-bg: #e6e3dd; --tono-neutro-fg: #57534e;
  --tono-verde-bg: #e8f8ee; --tono-verde-fg: #1e8e43;
  --tono-ambra-bg: #fff3e0; --tono-ambra-fg: #b9760f;
  --tono-rosso-bg: #ffeceb; --tono-rosso-fg: #c4271d;
  --foto: linear-gradient(176deg, #ebe7e0, #dfdad1);
  --testata: #1c1917;
}
html[data-tema="dark"] {
  --sfondo: #1b1a17; --carta: #232221; --carta-2: #2c2b28; --inchiostro: #ece9e2; --testo-2: #cdc9c1;
  --muted: #a8a29e; --bordo: #393732; --bordo-2: #4a4741;
  --accento: #dcd5c8; --accento-ink: #1b1a17; --focus: #dcd5c8;
  --tono-neutro-bg: #2e2d29; --tono-neutro-fg: #a8a29e;
  --tono-verde-bg: #1d3326; --tono-verde-fg: #6fcf8f;
  --tono-ambra-bg: #3a2f1a; --tono-ambra-fg: #d6a35c;
  --tono-rosso-bg: #3a1d1b; --tono-rosso-fg: #f0857c;
  --testata: #201f1b;
  /* la foto al buio: la stessa piastra crema più scura del gestionale (il chiaro abbagliava) */
  --foto: linear-gradient(176deg, #e1dcd2, #d2ccc1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--sfondo); color: var(--inchiostro);
  font: 15.5px/1.45 var(--testo); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.mono { font-family: var(--mono); font-size: .9em; }
.tenue { color: var(--muted); font-weight: 500; }
.nota { color: var(--muted); font-size: .82rem; margin: 10px 0 0; }

/* ── testata: inchiostro come il gestionale ─────────────────────────────── */
.testata { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px;
  min-height: 60px; padding: 0 28px; background: var(--testata); color: #fafaf9;
  view-transition-name: testata; }
.logo { font: 800 1.2rem/1 var(--display); letter-spacing: .04em; white-space: nowrap; }
.logo span { font-weight: 500; color: #a8a29e; letter-spacing: .02em; }
.nav-pc { display: flex; gap: 22px; }
.nav-pc a { color: #a8a29e; font-weight: 500; padding: 19px 0 17px; border-bottom: 2px solid transparent;
  transition: color .2s; }
.nav-pc a:hover { color: #fff; }
.nav-pc a.on { color: #fff; border-bottom-color: #fff; }
.testata-dx { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lingua-btn, .borsa-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 0 14px; border-radius: 20px; color: #e7e5e4; font-weight: 600; font-size: .86rem;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12);
  transition: background-color .2s, transform .2s var(--ease-ios); }
.lingua-btn:hover, .borsa-btn:hover { background: rgb(255 255 255 / .14); }
.lingua-btn:active, .borsa-btn:active { transform: scale(.96); }
.borsa-btn.on { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .32); color: #fff; }
.borsa-n, .tb-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accento); color: var(--accento-ink); font: 700 .72rem/20px var(--testo);
  text-align: center; font-variant-numeric: tabular-nums; }
html:not([data-tema="dark"]) .borsa-n { background: #fafaf9; color: #1c1917; }
.borsa-btn.on .borsa-n { background: #fafaf9; color: #1c1917; }
.testata-indietro, .testata-titolo, .ta-btn { display: none; }

main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 34px 28px 80px; }

/* ── avvisi e tasti ─────────────────────────────────────────────────────── */
.avviso { margin: 0 0 16px; padding: 11px 14px; border-radius: var(--r); font-size: .9rem;
  border: 1px solid transparent; }
.avviso { background: var(--tono-neutro-bg); color: var(--testo-2); }
.avviso-ok { background: var(--tono-verde-bg); color: var(--tono-verde-fg); }
.avviso-err { background: var(--tono-rosso-bg); color: var(--tono-rosso-fg); }
.avviso-warn { background: var(--tono-ambra-bg); color: var(--tono-ambra-fg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 20px; border-radius: var(--r); border: 1px solid var(--accento); background: var(--accento);
  color: var(--accento-ink); font-weight: 650; cursor: pointer; text-decoration: none;
  transition: transform .15s var(--ease-ios), filter .2s, background-color .2s; -webkit-tap-highlight-color: transparent; }
.btn:hover { filter: brightness(1.12); }
html[data-tema="dark"] .btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(.97); }
.btn-secondario { background: var(--carta); color: var(--inchiostro); border-color: var(--bordo-2); }
.btn-secondario:hover { filter: none; background: var(--carta-2); }
.btn-pericolo { background: none; color: var(--tono-rosso-fg); border-color: color-mix(in srgb, var(--tono-rosso-fg) 40%, transparent); }
.btn-pericolo:hover { filter: none; background: var(--tono-rosso-bg); }
.btn-pieno { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.caricamento { opacity: .7; pointer-events: none; }

/* ── ingresso (accedi, registrati, attesa) ──────────────────────────────── */
.pagina-ingresso main { max-width: 1040px; padding-top: 7vh; }
.ingresso { display: grid; grid-template-columns: minmax(0, 440px); justify-content: center; }
.ingresso:has(.pannello-largo) { grid-template-columns: minmax(0, 560px); }
.pannello { background: var(--carta); border: 1px solid var(--bordo); border-radius: 20px; padding: 28px;
  box-shadow: 0 10px 30px rgb(28 25 23 / .06); }
html[data-tema="dark"] .pannello { box-shadow: 0 14px 34px rgb(0 0 0 / .35); }
.pannello h1 { font: 700 1.7rem/1.15 var(--display); letter-spacing: -.02em; }
.pannello h2 { font: 700 1.1rem/1.2 var(--display); margin-bottom: 14px; }
.pannello .sotto { color: var(--testo-2); margin: 8px 0 20px; }
.pannello-largo { max-width: 560px; }
.pannello-piede { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px;
  font-size: .9rem; color: var(--muted); }
.pannello-piede a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--bordo-2); }
.pallino { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 14px; }
.pallino-ambra { background: var(--tono-ambra-fg); box-shadow: 0 0 0 6px var(--tono-ambra-bg); }
.modulo { display: grid; gap: 14px; }
.modulo-2 { grid-template-columns: 1fr 1fr; }
.modulo .intera, .modulo button { grid-column: 1 / -1; }
.modulo label { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.modulo label small { font-weight: 400; }
input[type=email], input[type=password], input[type=text], input[type=tel], input[type=search],
input[type=number], select, textarea {
  width: 100%; min-height: 46px; padding: 0 13px; border-radius: var(--r); border: 1px solid var(--bordo-2);
  background: var(--carta); color: var(--inchiostro); font-size: 1rem; outline: none;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
textarea { padding: 11px 13px; min-height: 90px; resize: vertical; }
select { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
input:focus, select:focus, textarea:focus { border-color: var(--inchiostro); box-shadow: 0 0 0 3px rgb(28 25 23 / .08); }
html[data-tema="dark"] :is(input, select, textarea):focus { box-shadow: 0 0 0 3px rgb(220 213 200 / .12); }
.campo-pw { position: relative; display: block; }
.campo-pw input { padding-right: 84px; }
.mostra-pw { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 .82rem var(--testo); cursor: pointer; }
.mostra-pw:hover, .mostra-pw[aria-pressed="true"] { color: var(--inchiostro); }
.esca { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dati { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 20px; font-size: .92rem; }
.dati dt { color: var(--muted); }
.dati dd { margin: 0; word-break: break-word; }

/* ── listino ────────────────────────────────────────────────────────────── */
.titolo-tel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* computer: lo dice il menu */
.titolo-grande { font: 700 2rem/1.1 var(--display); letter-spacing: -.025em; }
.lst-conto { color: var(--muted); font-size: .9rem; margin: 0; font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* LA BARRA del listino, stile Apple Store: una riga sottile che resta in alto, il filo sotto */
.lst-barra { position: sticky; top: 60px; z-index: 20; display: flex; align-items: center; gap: 18px;
  min-height: 56px; margin: -14px 0 26px; background: color-mix(in srgb, var(--sfondo) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--bordo); }
.lst-barra::before { content: ""; position: absolute; inset: 0 -28px; z-index: -1; background: inherit;
  border-bottom: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; }
.lst-brand { position: relative; display: flex; align-items: stretch; gap: 26px; flex: 1 1 auto; min-width: 0;
  align-self: stretch; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.lst-brand::-webkit-scrollbar { display: none; }
.brand-tab { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
  color: var(--muted); font: 600 .92rem/1 var(--testo); letter-spacing: .005em; transition: color .2s; }
.brand-tab:hover { color: var(--inchiostro); }
.brand-tab.on { color: var(--inchiostro); }
.brand-segno { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--bs-w, 0); border-radius: 2px;
  background: var(--inchiostro); transform: translateX(var(--bs-x, 0)); pointer-events: none;
  transition: transform .45s var(--ease-ios), width .45s var(--ease-ios); }
.lst-dx { display: flex; align-items: center; gap: 22px; flex: none; }
/* la lente che si apre in un campo */
.lst-cerca { display: flex; align-items: center; }
.cerca-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 18px; background: none; color: var(--inchiostro); cursor: pointer; transition: background-color .2s; }
.cerca-btn:hover { background: var(--tono-neutro-bg); }
.lst-cerca input { width: 0; min-height: 36px; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: none; font-size: .92rem; opacity: 0; transition: width .45s var(--ease-ios), opacity .25s, padding .45s var(--ease-ios); }
.lst-cerca.aperta input { width: 220px; padding: 0 4px; opacity: 1; border-bottom-color: var(--bordo-2); }
.lst-cerca input:focus { box-shadow: none; border-bottom-color: var(--inchiostro); }
/* la × per svuotare: grigia come il resto, non il blu di sistema */
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  cursor: pointer; background: center / contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
/* Taglia ▾ e Ordina ▾: tendine vestite da testo */
.sel-testo select { width: auto; min-height: 36px; padding: 0 16px 0 0; border: 0; border-radius: 0; background-color: transparent;
  color: var(--inchiostro); font: 600 .92rem/1 var(--testo); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 6px) 55%, calc(100% - 2px) 55%; background-size: 4px 4px; }
.sel-testo select:focus { box-shadow: none; }
.sel-testo select:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.sel-testo select.attivo { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* US · EU in piccolo */
.scala-testo { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .86rem; }
.scala-testo button { padding: 6px 0; border: 0; background: none; color: var(--muted); font: 600 .86rem/1 var(--testo); cursor: pointer; }
.scala-testo button.on { color: var(--inchiostro); }
/* i segmenti (scheda prodotto, foglio dei filtri, account) */
.segmenti { display: inline-flex; padding: 3px; gap: 2px; border-radius: 23px; background: var(--tono-neutro-bg); }
.segmenti > * { position: relative; min-height: 38px; min-width: 52px; padding: 0 14px; border: 0; border-radius: 20px;
  background: none; color: var(--testo-2); font-weight: 650; font-size: .86rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: background-color .25s var(--ease-ios), color .2s, box-shadow .25s; }
.segmenti > .on { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 3px rgb(28 25 23 / .12); }
html[data-tema="dark"] .segmenti > .on { background: #3a3935; }
.segmenti-pieni { display: flex; width: 100%; margin-bottom: 12px; }
.segmenti-pieni > * { flex: 1 1 0; }
.segmenti-piccoli > * { min-height: 32px; min-width: 44px; font-size: .78rem; }

/* la scheda prodotto (come /stock sul computer) */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--carta); border-radius: 16px;
  overflow: hidden; box-shadow: 0 3px 12px rgb(0 0 0 / .06);
  transition: transform .35s var(--ease-ios), box-shadow .35s var(--ease-ios); }
html[data-tema="dark"] .card { box-shadow: 0 5px 16px rgb(0 0 0 / .34); border: 1px solid rgb(236 233 226 / .07); }
.card-foto { position: relative; background: var(--foto); }
.card-foto img, .placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 6% 7%; }
.card-foto img { filter: drop-shadow(0 6px 7px rgb(45 36 26 / .13)) drop-shadow(0 18px 24px rgb(45 36 26 / .2));
  transition: transform .5s cubic-bezier(.2, .9, .3, 1); }
.placeholder { display: flex; align-items: center; justify-content: center; }
.placeholder span { font: 800 1.35rem/1 var(--display); letter-spacing: .02em; color: rgb(120 113 108 / .32);
  text-transform: uppercase; }
.card-badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px;
  color: #1c1917; font: 700 .72rem/1.2 var(--testo); font-variant-numeric: tabular-nums;
  background: rgb(255 255 255 / .74); -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: 0 1px 4px rgb(28 25 23 / .14), inset 0 1px 0 rgb(255 255 255 / .85); }
.card-info { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
  padding: 13px 15px 16px; }
.card-info h3 { flex-basis: 100%; font-size: .95rem; font-weight: 650; line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.prezzo { margin: 6px 0 0; font: 700 1.05rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.card .sku { margin: 6px 0 0; font-size: .76rem; color: var(--muted); }
.card .prezzo + .sku::before { content: "·\00a0"; }
.taglie-mini { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.taglie-mini span { padding: 2px 7px; border-radius: 7px; background: var(--tono-neutro-bg); color: var(--tono-neutro-fg);
  font-size: .72rem; font-variant-numeric: tabular-nums; }
.taglie-mini small { opacity: .6; }
.taglie-mini span.trovata { background: var(--accento); color: var(--accento-ink); }
/* l'alone caldo che segue il cursore + l'entrata scorrendo (come /stock) */
.card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .5s ease; filter: blur(30px);
  background: radial-gradient(360px 360px at var(--cx, 50%) var(--cy, 50%), rgba(90,110,200,.16), rgba(90,110,200,.05) 50%, transparent 72%); }
html[data-tema="dark"] .card::before {
  background: radial-gradient(360px 360px at var(--cx, 50%) var(--cy, 50%), rgba(255,236,206,.15), rgba(255,236,206,.05) 50%, transparent 72%); }
@media (hover: hover) {
  .card:hover::before { opacity: 1; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / .14); }
  .card:hover img { transform: scale(1.05) rotate(-1deg); }
  html[data-tema="dark"] .card:hover { box-shadow: 0 24px 52px rgb(0 0 0 / .55); }
}
@keyframes cardrise { from { opacity: 0; transform: translateY(16px); } }
html.js .griglia .card { opacity: 0; }
html.js .griglia .card.in { opacity: 1; animation: cardrise .55s cubic-bezier(.2, .9, .3, 1); }
.card.via { display: none; }
.vuoto { text-align: center; padding: 60px 20px; color: var(--muted); }
.vuoto p { margin: 0 0 16px; font-size: 1.05rem; }

/* ── scheda di un prodotto ─────────────────────────────────────────────── */
.torna-pc { display: inline-flex; align-items: center; gap: 6px; margin: -10px 0 18px; color: var(--muted);
  font-weight: 600; font-size: .9rem; }
.torna-pc:hover { color: var(--inchiostro); }
.prodotto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.prodotto-info { position: sticky; top: 84px; }
.prodotto-foto { position: sticky; top: 90px; border-radius: 26px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(28 25 23 / .05); }
.prodotto-foto img, .prodotto-foto .placeholder { aspect-ratio: 4 / 3.4; padding: 8%; animation: foto-in .7s cubic-bezier(.2, .9, .3, 1); }
.prodotto-foto .placeholder span { font-size: 2.6rem; }
@keyframes foto-in { from { opacity: 0; transform: scale(.94) rotate(-2deg); } }
.occhiello { margin: 0 0 6px; color: var(--muted); font-weight: 650; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.prodotto-info h1 { font: 700 2rem/1.12 var(--display); letter-spacing: -.02em; }
.sku-riga { color: var(--muted); margin: 10px 0 0; font-size: .9rem; }
.sku-riga b { color: var(--inchiostro); font-family: var(--mono); font-weight: 500; }
.prezzo-grande { margin: 18px 0 0; font: 700 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; }
.prezzo-grande small { font: 500 .8rem var(--testo); color: var(--muted); margin-left: 6px; }
.taglie-form { margin-top: 28px; }
.taglie-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.taglie-testa h2 { font: 650 .95rem var(--testo); color: var(--testo-2); }
.taglie-righe { list-style: none; margin: 0; padding: 4px 0; border-radius: var(--r-lg); background: var(--carta);
  border: 1px solid var(--bordo); }
/* una riga per taglia, a colonne fisse: taglia · EU · disponibili · quantità (tutto incolonnato) */
.tg-riga { display: grid; grid-template-columns: 64px 88px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 56px; padding: 6px 8px 6px 16px; }
.tg-riga + .tg-riga { border-top: 1px solid var(--bordo); }
.tg-nome { display: flex; align-items: baseline; gap: 5px; }
.tg-nome b { font: 700 1.15rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.tg-nome small { color: var(--muted); font-size: .7rem; font-weight: 600; }
.tg-eu { color: var(--testo-2); font-size: .86rem; font-variant-numeric: tabular-nums; }
.tg-disp { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.solo-tel { display: none; }
.passo { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 23px; background: var(--tono-neutro-bg); }
.passo-btn { width: 40px; height: 40px; border: 0; border-radius: 20px; background: var(--carta); color: var(--inchiostro);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 2px rgb(28 25 23 / .1); transition: transform .15s var(--ease-ios), opacity .2s; -webkit-tap-highlight-color: transparent; }
html[data-tema="dark"] .passo-btn { background: #3a3935; }
.passo-btn:active { transform: scale(.9); }
.passo-btn[disabled] { opacity: .35; }
.passo input { width: 46px; min-height: 40px; padding: 0; border: 0; background: none; text-align: center;
  font: 700 1.05rem var(--display); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.passo input::-webkit-inner-spin-button, .passo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.passo input:focus { box-shadow: none; }
.pagina-prodotto .tg-riga.scelta .tg-nome b { color: var(--accento); }
html:not([data-tema="dark"]) .pagina-prodotto .tg-riga.scelta { background: rgb(28 25 23 / .03); }
.aggiungi-barra { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px;
  padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--carta); border: 1px solid var(--bordo); }
.aggiungi-conto { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lbl-breve { display: none; }
.aggiungi-conto b { color: var(--inchiostro); font-family: var(--display); font-size: 1.1rem; }

/* ── la richiesta ──────────────────────────────────────────────────────── */
.richiesta { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.richiesta-righe { display: grid; gap: 14px; }
.rq-prodotto { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 14px; border-radius: 18px;
  background: var(--carta); border: 1px solid var(--bordo); }
.rq-foto { border-radius: 14px; overflow: hidden; align-self: start; }
.rq-foto img, .rq-foto .placeholder { aspect-ratio: 1 / 1; padding: 8%; }
.rq-foto .placeholder span { font-size: .8rem; }
.rq-nome { font-weight: 650; }
.rq-info .sku { color: var(--muted); font-size: .8rem; margin: 4px 0 10px; }
.taglie-righe.compatte { border: 0; padding: 0; background: none; }
.taglie-righe.compatte .tg-riga { min-height: 52px; padding: 4px 0; }
.richiesta-riepilogo { position: sticky; top: 90px; }
.pannello-riepilogo { padding: 22px; }
.riepilogo { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.riepilogo dt { color: var(--muted); }
.riepilogo dd { margin: 0; text-align: right; font: 700 1.1rem var(--display); }
.riepilogo dd small { font: 400 .74rem var(--testo); color: var(--muted); }
.nota-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: .8rem; font-weight: 600; color: var(--muted); }

/* ── storico, account ──────────────────────────────────────────────────── */
.elenco { list-style: none; margin: 0; padding: 4px 0; border-radius: var(--r-lg); background: var(--carta); border: 1px solid var(--bordo); max-width: 760px; }
.elenco li + li { border-top: 1px solid var(--bordo); }
.elenco-riga { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; transition: background-color .2s; }
.elenco-riga:hover { background: var(--carta-2); }
.elenco-riga::after { content: "›"; color: var(--muted); font-size: 1.2rem; }
.er-testo { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.er-testo small { color: var(--muted); font-variant-numeric: tabular-nums; }
.stato { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--tono-neutro-bg); color: var(--tono-neutro-fg); white-space: nowrap; }
.stato-inviata, .stato-lavorazione { background: var(--tono-ambra-bg); color: var(--tono-ambra-fg); }
.stato-confermata { background: var(--tono-verde-bg); color: var(--tono-verde-fg); }
.stato-rifiutata, .stato-annullata { background: var(--tono-rosso-bg); color: var(--tono-rosso-fg); }
.pannello-lista { padding: 6px 0; max-width: 760px; }
.rv-righe { list-style: none; margin: 0; padding: 0; }
.rv-righe li { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; }
.rv-righe li + li { border-top: 1px solid var(--bordo); }
.rv-nome { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.rv-nome small { color: var(--muted); font-size: .8rem; }
.rv-qta, .rv-prezzo { font: 700 1rem var(--display); font-variant-numeric: tabular-nums; }
.rv-prezzo { min-width: 80px; text-align: right; }
.rv-nota { margin: 0; padding: 14px 18px; border-top: 1px solid var(--bordo); color: var(--testo-2); }
.account-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.account-griglia .pannello { box-shadow: none; }
.elimina-form { margin-top: 10px; }

/* offerte */
.stato-of-pending { background: var(--tono-neutro-bg); color: var(--tono-neutro-fg); }
.stato-of-countered { background: var(--tono-ambra-bg); color: var(--tono-ambra-fg); }
.stato-of-accepted { background: var(--tono-verde-bg); color: var(--tono-verde-fg); }
.stato-of-declined { background: var(--tono-rosso-bg); color: var(--tono-rosso-fg); }
.stato-of-withdrawn, .stato-of-expired { background: var(--tono-neutro-bg); color: var(--muted); }
.rq-offerta { margin-top: 10px; }
.of-taglie { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.of-taglie span { padding: 3px 9px; border-radius: 999px; background: var(--carta-2); border: 1px solid var(--bordo);
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.of-taglie small { color: var(--muted); font-weight: 500; margin-left: 2px; }
.of-prezzo { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 6px 12px;
  font-size: .8rem; font-weight: 600; color: var(--muted); }
.of-prezzo > span:first-child { grid-column: 1 / -1; }
.campo-euro { position: relative; display: block; width: 150px; }
.campo-euro b { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.campo-euro input { padding-left: 30px; font: 700 1.1rem var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.of-x { font-weight: 500; font-variant-numeric: tabular-nums; }
.of-prezzi { display: flex; gap: 18px; text-align: right; font: 700 1rem var(--display); font-variant-numeric: tabular-nums; }
.of-prezzi > span { display: flex; flex-direction: column; min-width: 78px; }
.of-prezzi small { font: 500 .72rem var(--testo); color: var(--muted); }
.of-mbnf { color: var(--tono-ambra-fg); }
.of-cambio { color: var(--tono-ambra-fg); font-size: .8rem; }
.of-totali { max-width: 760px; margin-top: 14px; padding: 18px 20px; box-shadow: none; }
.of-totali .riepilogo { margin: 0; }
.of-azioni { display: grid; gap: 10px; margin-top: 16px; }
.of-azioni form { margin: 0; }
@media (min-width: 761px) { .of-azioni { grid-template-columns: repeat(3, max-content); } .of-azioni .btn-pieno { width: auto; } }

/* testi legali (privacy, termini) */
.testo-legale { max-width: 760px; margin: 0 auto; box-shadow: none; line-height: 1.6; }
.testo-legale h2 { margin: 26px 0 8px; }
.testo-legale p, .testo-legale li { color: var(--testo-2); }
.testo-legale ul { padding-left: 20px; }
.testo-legale li + li { margin-top: 6px; }
.testo-legale a, .piede-legale a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bordo-2); }
.piede-legale { margin-top: 16px; }

/* API dal portale */
.api-nuova { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px; border-radius: var(--r);
  background: var(--tono-ambra-bg); color: var(--tono-ambra-fg); }
.api-nuova p { margin: 0; font-weight: 600; font-size: .88rem; }
.api-nuova code { display: block; padding: 10px 12px; border-radius: 9px; background: var(--carta); color: var(--inchiostro);
  font: 600 .86rem var(--mono); word-break: break-all; user-select: all; -webkit-user-select: all; }
.api-nuova .btn { justify-self: start; }
.link-sottile { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bordo-2); }

/* passkey */
.oppure { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--muted); font-size: .82rem; }
.oppure::before, .oppure::after { content: ""; flex: 1; height: 1px; background: var(--bordo); }
.oppure[hidden] { display: none; }
.avviso-pk { margin: 12px 0 0; }
.accessi-esterni { display: grid; gap: 10px; }
.btn-google .ico, .btn-apple .ico { width: 19px; height: 19px; }
.btn-apple .ico { margin-top: -2px; }
.accessi-esterni + .btn-pk { margin-top: 10px; }
.pk-elenco { list-style: none; margin: 0 0 14px; padding: 0; }
.pk-elenco li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; }
.pk-elenco li + li { border-top: 1px solid var(--bordo); }
.pk-ico .ico { width: 22px; height: 22px; color: var(--muted); }
.pk-testo { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.pk-testo small { color: var(--muted); font-size: .8rem; }
.pk-elenco form { margin: 0; }
.pk-togli { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--tono-rosso-fg); font: 600 .85rem var(--testo); cursor: pointer; }
.pk-nuova[hidden] { display: none; }

/* verifica in due passaggi */
.h2-stato { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nota-su { margin: 0 0 14px; }
.campo-codice { font: 700 1.35rem var(--display); letter-spacing: .18em; font-variant-numeric: tabular-nums; text-align: center; }
.campo-codice::placeholder { color: var(--bordo-2); letter-spacing: .18em; }
.piega { border-top: 1px solid var(--bordo); margin-top: 14px; }
.piega summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem; -webkit-tap-highlight-color: transparent; }
.piega summary::-webkit-details-marker { display: none; }
.piega summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid var(--muted);
  border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s var(--ease-ios); }
.piega[open] summary::after { transform: rotate(-135deg); }
.piega > .modulo { padding-bottom: 6px; }
.due-passi { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 22px; }
.due-passi > li { counter-increment: passo; display: grid; gap: 12px; padding-left: 40px; position: relative; }
.due-passi > li::before { content: counter(passo); position: absolute; left: 0; top: -2px; width: 28px; height: 28px;
  border-radius: 50%; display: grid; place-items: center; background: var(--tono-neutro-bg); color: var(--tono-neutro-fg);
  font: 700 .9rem var(--display); font-variant-numeric: tabular-nums; }
.due-passi p { margin: 0; color: var(--testo-2); }
.due-qr { width: 200px; height: 200px; padding: 8px; border-radius: 14px; background: #fff;     /* il QR va letto: fondo chiaro anche al buio */
  box-shadow: inset 0 0 0 1px rgb(28 25 23 / .08); -webkit-touch-callout: default; }
.due-chiave { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.due-chiave code, .riserva code { font: 600 .98rem ui-monospace, "SF Mono", Menlo, monospace; color: var(--inchiostro);
  letter-spacing: .04em; word-break: break-all; user-select: all; -webkit-user-select: all; }
.riserva { list-style: none; margin: 0 0 20px; padding: 14px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px;
  border-radius: var(--r); background: var(--carta-2); border: 1px solid var(--bordo); }
.riserva-az { display: flex; flex-wrap: wrap; gap: 10px; }
.due-app { display: none; justify-self: start; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) { .due-app { display: inline-flex; } }
@media (max-width: 760px) {
  .of-righe li { flex-wrap: wrap; }
  .of-righe .rv-nome { flex-basis: 100%; }
  .of-prezzi { margin-left: auto; }
  .riserva { grid-template-columns: 1fr; }
  .riserva-az .btn { flex: 1 1 100%; }
  .due-app { justify-self: stretch; }
}

.toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 12px 18px;
  border-radius: 999px; background: #1c1917; color: #fafaf9; font-weight: 600; font-size: .9rem;
  box-shadow: 0 12px 30px rgb(0 0 0 / .25); animation: toast-su .4s var(--ease-ios); }
html[data-tema="dark"] .toast { background: #dcd5c8; color: #1b1a17; }
.toast.err { background: var(--tono-rosso-fg); color: #fff; }
@keyframes toast-su { from { opacity: 0; transform: translate(-50%, 14px); } }

/* fogli e barra: spenti sul computer */
.tabbar, .foglio, .foglio-velo { display: none; }
.installa-btn { display: none; }

/* la guida per installare l'app (foglio dal fondo, solo telefono) */
.inst-app { display: flex; align-items: center; gap: 14px; margin: 6px 8px 14px; }
.inst-app img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .12); flex: none; }
.inst-app p { margin: 0; font-size: .92rem; color: var(--testo-2); line-height: 1.4; }
.inst-passi { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.inst-passi li { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px; border-radius: 12px; }
.inst-passi li + li { border-top: 1px solid var(--bordo); border-radius: 0; }
.inst-passi .ico { flex: none; width: 26px; height: 26px; color: var(--inchiostro); }
.inst-passi span { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: .95rem; }
.inst-passi small { font-weight: 400; font-size: .8rem; color: var(--muted); }
#foglio-installa:not([data-os="ios"]) .inst-ios, #foglio-installa[data-os="ios"] .inst-android { display: none; }

/* ═══ COMPUTER STRETTO ═══ */
@media (max-width: 1015px) {
  .ingresso { grid-template-columns: 1fr; gap: 24px; }
  .prodotto { grid-template-columns: 1fr; gap: 26px; }
  .prodotto-info { position: static; }
  .prodotto-foto { position: relative; top: 0; max-width: 560px; }
  .richiesta { grid-template-columns: 1fr; }
  .richiesta-riepilogo { position: static; }
}

/* ═══ TELEFONO: la testata e la barra di iOS 26 del gestionale ═══ */
@media (max-width: 760px) {
  :root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --tb-lato: 22px;
    --tb-giu: max(12px, calc(var(--sab) - 12px)); --tabbar-spazio: calc(78px + var(--tb-giu)); }
  body { font-size: 16px; }
  .testata { gap: 10px; min-height: 0; padding: calc(11px + var(--sat)) 16px 11px; }
  .nav-pc, .borsa-btn, .torna-pc { display: none; }
  /* i tasti della pagina in UNA capsula di vetro, come la testata del gestionale */
  .testata-dx { gap: 0; height: 44px; padding: 0 1px; border-radius: 22px; background: rgb(255 255 255 / .1);
    border: 1px solid rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
  .testata-dx > .ta-btn, .testata-dx > .lingua-btn { width: 42px; height: 42px; min-height: 0; padding: 0; border: 0;
    border-radius: 21px; background: none; box-shadow: none; justify-content: center; }
  .lingua-btn { min-height: 44px; width: 44px; padding: 0; justify-content: center; border-radius: 22px; }
  .lingua-btn span { display: none; }
  .lingua-btn .ico { width: 20px; height: 20px; }
  .installa-btn:not([hidden]) { display: inline-flex; }
  .ta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 22px; color: #f5f5f4; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .12);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, transform .2s var(--ease-ios); }
  .ta-btn:active { background: rgb(255 255 255 / .16); transform: scale(.92); }
  .ta-btn .ico { width: 21px; height: 21px; }
  .ta-btn b { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--accento); color: var(--accento-ink); font: 700 .62rem/16px var(--testo); }
  html:not([data-tema="dark"]) .ta-btn b { background: #fafaf9; color: #1c1917; }
  /* dettaglio: il chevron in un cerchio di vetro e il nome al centro */
  body:has(.testata-indietro) .logo { display: none; }
  .testata-indietro { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
    border-radius: 22px; color: #fafaf9; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .12);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease-ios); }
  .testata-indietro:active { transform: scale(.92); }
  .testata-indietro .ico { width: 24px; height: 24px; margin-left: -2px; }
  .testata-titolo { display: block; flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 650; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(.testata-indietro) .testata-dx { margin-left: 0; }

  main { padding: 18px 16px calc(28px + var(--tabbar-spazio)); }
  .pagina-ingresso main { padding-top: 22px; padding-bottom: 40px; }
  .pagina-prodotto main { padding-bottom: calc(110px + var(--tabbar-spazio)); }
  .pannello { padding: 22px 18px; border-radius: 22px; box-shadow: none; }
  .modulo-2 { grid-template-columns: 1fr; }
  .titolo-grande { font-size: 1.85rem; }

  /* listino: la barra diventa la ricerca di iOS + i brand che scorrono come capsule; Taglia,
     Ordina e scala vanno nel foglio dei filtri (tasto in testata) */
  .titolo-tel { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-bottom: 14px; }
  .lst-barra { position: static; flex-direction: column-reverse; align-items: stretch; gap: 12px; min-height: 0;
    margin: 0 0 18px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
  /* niente barra fissa: la ricerca si apre dalla lente in testata, i brand sono nel foglio */
  .lst-barra:not(.cerca-tel), .lst-brand { display: none; }
  .lst-barra.cerca-tel { animation: cerca-giu .28s var(--ease-ios); }
  @keyframes cerca-giu { from { opacity: 0; transform: translateY(-8px); } }
  .ta-cerca.on, .ta-filtri.on { background: rgb(255 255 255 / .22); }
  .fg-brand { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
  .fg-brand button { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--bordo-2);
    background: none; color: var(--inchiostro); font: 600 .9rem var(--testo); cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s, transform .15s var(--ease-ios); }
  .fg-brand button:active { transform: scale(.96); }
  .fg-brand button.on { background: var(--accento); border-color: var(--accento); color: var(--accento-ink); }
  .lst-barra::before { display: none; }
  .lst-dx { gap: 0; }
  .lst-dx > :not(.lst-cerca) { display: none; }
  .lst-cerca { position: relative; flex: 1 1 auto; }
  .cerca-btn { position: absolute; left: 4px; width: 34px; height: 34px; pointer-events: none; color: var(--muted); }
  .lst-cerca input, .lst-cerca.aperta input { width: 100%; opacity: 1; min-height: 42px; padding: 0 12px 0 40px;
    border: 0; border-radius: 12px; background: var(--tono-neutro-bg); font-size: 1rem; }
  /* i brand come sul computer: testo, la sottolineatura che scivola, lo scorrimento che sfuma ai
     bordi invece di tagliare l'ultima voce */
  .lst-brand { gap: 22px; margin: 0 -16px; padding: 0 16px; min-height: 40px; border-bottom: 1px solid var(--bordo);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent); }
  .brand-tab { min-height: 40px; font-size: .95rem; }
  .lst-brand::after { content: ""; flex: 0 0 4px; }        /* spazio in fondo: l'ultima non resta sotto la sfumatura */
  /* la scheda-tessera di iOS: foto arrotondata con l'etichetta di vetro, sotto il testo senza scatola */
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .card, html[data-tema="dark"] .card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .card::before { display: none; }
  .card-foto { border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(28 25 23 / .05); }
  html[data-tema="dark"] .card-foto { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
  .card-foto img, .card-foto .placeholder { aspect-ratio: 1 / 1; padding: 4% 3%; }
  .card-badge { top: 8px; left: 8px; padding: 4px 9px; font-size: .7rem; }
  .card-info { padding: 9px 4px 0; column-gap: 6px; }
  .card-info h3 { font-size: .88rem; min-height: 0; }
  .prezzo { font-size: .95rem; margin-top: 3px; }
  .card .sku { margin-top: 3px; font-size: .72rem; }
  .taglie-mini { margin-top: 7px; }
  .taglie-mini span { font-size: .68rem; padding: 2px 6px; }
  .card:active .card-foto { transform: scale(.97); transition: transform .15s var(--ease-ios); }

  .prodotto-info h1 { font-size: 1.6rem; }
  .prodotto-foto { border-radius: 24px; }
  .taglie-form { margin-top: 22px; }
  /* l'aggiunta è il riepilogo in fondo alle taglie: non copre le righe mentre si scorre */
  .aggiungi-barra { margin-top: 14px; padding: 10px 10px 10px 16px; border-radius: 22px; }
  .aggiungi-barra .lbl-lunga { display: none; }
  .aggiungi-barra .lbl-breve { display: inline; }
  .aggiungi-barra .btn { padding: 0 22px; }
  /* colonne in comune fra le righe (subgrid): la taglia larga (EU 43 1/3) non va a capo e le
     disponibilità restano incolonnate */
  .taglie-righe { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; }
  .tg-riga { grid-column: 1 / -1; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-columns: subgrid;
    padding-left: 14px; }
  .tg-nome { min-width: 44px; }
  .tg-nome b { white-space: nowrap; }
  /* nella richiesta la colonna è stretta: taglia sopra, disponibilità sotto, quantità a destra */
  .taglie-righe.compatte { display: block; }
  .taglie-righe.compatte .tg-riga { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0; }
  .taglie-righe.compatte .tg-nome { grid-area: 1 / 1; }
  .taglie-righe.compatte .tg-disp { grid-area: 2 / 1; display: flex; flex-wrap: wrap; column-gap: 8px; }
  .taglie-righe.compatte .passo { grid-area: 1 / 2 / 3 / 3; }
  .tg-eu { display: none; }
  .tg-disp small.solo-tel { display: block; font-size: .74rem; }
  .rq-prodotto { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .rv-righe li { padding: 10px 14px; }
  .toast { bottom: calc(var(--tabbar-spazio) + 14px); }

  /* LA BARRA IN BASSO: il vetro di iOS 26 (dal gestionale, style.css) — quattro voci */
  .tabbar { display: flex; position: fixed; z-index: 80; left: var(--tb-lato); right: var(--tb-lato); bottom: var(--tb-giu);
    justify-content: flex-start; pointer-events: none; transition: transform .5s var(--ease-ios), opacity .3s; }
  .tb-vetro { pointer-events: auto; position: relative; isolation: isolate; flex: 1 1 auto; min-width: 0; height: 64px;
    max-width: 100%; border-radius: 32px; overflow: hidden; background: rgb(250 250 249 / .58);
    -webkit-backdrop-filter: blur(16px) saturate(1.9); backdrop-filter: blur(16px) saturate(1.9);
    border: 1px solid rgb(255 255 255 / .75);
    box-shadow: 0 12px 34px rgb(28 25 23 / .16), 0 2px 6px rgb(28 25 23 / .07), inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(28 25 23 / .05);
    transition: max-width .5s var(--ease-ios), height .4s var(--ease-ios); }
  .tb-vetro::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 42%); }
  .tb-voci { position: relative; display: flex; height: 100%; padding: 4px; touch-action: none;
    -webkit-user-select: none; user-select: none; transition: transform .5s var(--ease-ios); }
  .tb-voce { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; border: 0; border-radius: 28px; padding: 0; background: none; color: #57534e;
    font: 650 .63rem/1 var(--testo); letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; -webkit-user-drag: none; transition: color .25s; }
  .tb-voce .ico { width: 23px; height: 23px; vertical-align: 0; transition: transform .2s var(--ease-ios); }
  .tb-voce.sotto { color: #1c1917; }
  .tb-voce.sotto .ico { transform: scale(1.22); }
  .tb-voce > span { max-height: 14px; white-space: nowrap; transition: opacity .25s, max-height .4s var(--ease-ios); }
  .tb-voce.on { color: #1c1917; }
  .tb-n { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
    font-size: .62rem; line-height: 17px; background: #1c1917; color: #fff; }
  .tb-bolla { position: absolute; z-index: 3; left: 0; top: -6px; height: 76px; border-radius: 38px; pointer-events: none;
    opacity: 0; transform-origin: center; will-change: transform; background: rgb(28 25 23 / .075); border: 1px solid transparent;
    transition: opacity .16s, background-color .2s, border-color .2s, box-shadow .2s; }
  .tb-bolla.su { opacity: 1; background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .75);
    box-shadow: 0 12px 30px rgb(28 25 23 / .2), inset 0 1.5px 1px rgb(255 255 255 / .95), inset 0 -4px 10px rgb(255 255 255 / .22), inset 0 0 0 .5px rgb(255 255 255 / .45);
    transition: background-color .12s, border-color .12s, box-shadow .12s; }
  .tb-bolla.su.giu { background: rgb(28 25 23 / .075); border-color: transparent; box-shadow: none;
    transition: background-color .14s, border-color .14s, box-shadow .14s; }
  .tb-bolla.di-colpo, .tb-pill.di-colpo { transition: none; }
  .tb-pill.sotto-bolla { opacity: 0 !important; transition: none; }
  html.bolla-in-volo .tb-pill { opacity: 0 !important; transition: none; view-transition-name: none; }
  html.vt-bolla .tb-pill { view-transition-name: none; }
  .tb-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--tb-w, calc((100% - 8px) / 4));
    transform: translateX(var(--tb-x, calc(4px + var(--tb-i, 0) * 100%))) scale(var(--tb-s, 1)); border-radius: 28px;
    background: rgb(28 25 23 / .075);
    transition: transform .42s var(--ease-ios), width .42s var(--ease-ios), top .2s, bottom .2s, background .2s, box-shadow .2s, opacity .2s; }
  .tabbar.mini .tb-vetro { max-width: 54px; height: 54px; }
  .tabbar.mini .tb-voci { width: var(--tb-pieno, auto); transform: translateX(var(--tb-mini-x, 0px)); }
  .tabbar.mini .tb-voce > span, .tabbar.mini .tb-n { opacity: 0; max-height: 0; }
  .tabbar.mini .tb-voce { gap: 0; }
  .tabbar.mini .tb-pill { opacity: 0 !important; }
  html[data-tema="dark"] .tb-vetro { background: rgb(40 39 36 / .66); border-color: rgb(255 255 255 / .13);
    box-shadow: 0 14px 38px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .16); }
  html[data-tema="dark"] .tb-vetro::after { background: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 42%); }
  html[data-tema="dark"] .tb-voce { color: #cfcac1; }
  html[data-tema="dark"] .tb-voce.on, html[data-tema="dark"] .tb-voce.sotto { color: var(--accento); }
  html[data-tema="dark"] .tb-pill { background: rgb(255 255 255 / .1); }
  html[data-tema="dark"] .tb-bolla { background: rgb(255 255 255 / .1); }
  html[data-tema="dark"] .tb-bolla.su { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .32);
    box-shadow: 0 12px 30px rgb(0 0 0 / .5), inset 0 1px 1px rgb(255 255 255 / .55), inset 0 -4px 10px rgb(255 255 255 / .08); }
  html[data-tema="dark"] .tb-bolla.su.giu { background: rgb(255 255 255 / .1); border-color: transparent; box-shadow: none; }
  html[data-tema="dark"] .tb-n { background: var(--accento); color: var(--accento-ink); }

  /* I FOGLI dal basso (filtri): vetro, maniglia, si trascinano (portale.js) */
  .foglio-velo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 95; background: rgb(28 25 23 / .28); }
  .foglio:not([hidden]) { display: block; position: fixed; z-index: 96; left: 0; right: 0; bottom: 0; max-height: 62vh;
    overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px calc(16px + var(--sab)); border-radius: 30px 30px 0 0;
    color: #1c1917; background: rgb(250 250 249 / .64); border: 1px solid rgb(255 255 255 / .6); border-bottom: 0;
    -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
    box-shadow: 0 24px 60px rgb(28 25 23 / .3), inset 0 1px 0 rgb(255 255 255 / .7); animation: mf-su .38s var(--ease-ios);
    scrollbar-width: none; }
  html[data-tema="dark"] .foglio:not([hidden]) { color: #f5f5f4; background: rgb(36 35 32 / .6); border-color: rgb(255 255 255 / .12);
    box-shadow: 0 24px 60px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .1); }
  @keyframes mf-su { from { transform: translateY(100%); } }
  .foglio.foglio-alto { max-height: calc(100dvh - var(--sat) - 10px) !important; }
  .mf-maniglia { width: 36px; height: 5px; border-radius: 3px; background: rgb(120 113 108 / .45); margin: 0 auto 4px; }
  .mf-testa { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 2px; font: 700 1.15rem var(--display); }
  .mf-fine { background: none; border: 0; color: inherit; cursor: pointer; padding: 10px 4px; font: 600 1rem/1 var(--testo); }
  .fg-sez { margin: 14px 8px 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
  .fg-gruppo { margin: 0 0 10px; padding: 2px 6px; border-radius: 16px; background: rgb(255 255 255 / .62); }
  html[data-tema="dark"] .fg-gruppo { background: rgb(255 255 255 / .06); }
  .fg-select { border: 0; background-color: transparent; min-height: 50px; }
  .fg-azzera { margin-top: 8px; }
  body:has(.foglio:not([hidden])) .tabbar { transform: translateY(calc(100% + 12px + var(--tb-giu))); opacity: 0; }
}

/* PASSAGGI FRA PAGINE (telefono): la barra resta ferma, entrare in un prodotto è il «push» di iOS */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .tb-vetro { view-transition-name: tb-barra; }
  .tb-pill { view-transition-name: tb-pill; }
  .tb-bolla { view-transition-name: tb-bolla; }
}
::view-transition-group(tb-barra), ::view-transition-group(tb-pill) { animation-duration: .45s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
html.vt-bolla::view-transition-group(tb-bolla) { animation: none; }
html.vt-bolla::view-transition-old(tb-bolla) { animation: none; opacity: 0; }
html.vt-bolla::view-transition-new(tb-bolla) { animation: none; }
html:is(.vt-avanti, .vt-indietro)::view-transition-old(root), html:is(.vt-avanti, .vt-indietro)::view-transition-new(root) {
  mix-blend-mode: normal; animation-duration: .46s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
html.vt-avanti::view-transition-old(root) { animation-name: vt-via-sx; }
html.vt-avanti::view-transition-new(root) { animation-name: vt-da-dx; box-shadow: -14px 0 36px rgb(0 0 0 / .2); }
html.vt-indietro::view-transition-old(root) { z-index: 1; animation-name: vt-via-dx; box-shadow: -14px 0 36px rgb(0 0 0 / .2); }
html.vt-indietro::view-transition-new(root) { animation-name: vt-da-sx; }
@keyframes vt-da-dx { from { transform: translateX(100%); } }
@keyframes vt-via-sx { to { transform: translateX(-30%); filter: brightness(.82); } }
@keyframes vt-via-dx { to { transform: translateX(100%); } }
@keyframes vt-da-sx { from { transform: translateX(-30%); filter: brightness(.82); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .griglia .card { opacity: 1; }
}