/* ===========================================================
   PRODUCT BAR — design clean single-source
   Stato attuale:
   - niente lastra sticky full-width
   - F7 chip scuro di test
   - range a destra
   - badges puliti
   - units leggere / provvisorie
   =========================================================== */

/* ========== TOKENS ========== */
/* START — PRODUCT BAR TOKENS / PROPORTIONS */
#pb.product-bar{
  --stick-offset: 10px;
  --min-h: 56px;

  --brand-yellow: #F4B532;

  /* ⚠️ 10/09/2026 — `--brand-amber` NON HA PIU' NESSUN USO in questo file.
     Serviva a una cosa sola: la barra spessa del badge «MADE IN ITALY». Ma quelle
     due barrette sono la DOPPIA LINEA DEL LOGO (5px spessa + 3px fine), e
     `ds-tokens.css` dichiara la coppia giusta — #F4B532 dominante e #F3E955
     accento. ⇒ Le barre ora leggono i token, e questo alias e' rimasto vuoto.
     Lo tengo DICHIARATO e lo dico qui invece di cancellarlo, perche' un ambra
     esiste davvero altrove (`--ds-range-amber` in family.css, l'icona attiva in
     key-features.css) e cancellarlo farebbe sembrare che l'ambra non esista.
     ⛔ Ma NON riusarlo per il marchio: se serve il giallo De Sisti, il token e'
     `--ds-brand-yellow-dark`. 🔑 Un alias vuoto lasciato senza spiegazione e' il
     modo in cui fra sei mesi qualcuno ridipinge il logo per sbaglio. */
  --brand-amber:  #FFC400;
  --ring-white:   rgba(255,255,255,.85);

  --pb-shell-max: 1360px;
  --pb-shell-max-wide: 1720px;
  --pb-shell-pad-x: clamp(18px, 3vw, 34px);
  --pb-shell-gap-x: clamp(18px, 2.6vw, 40px);
  --pb-shell-gap-y: 12px;

  /* scala coerente del gruppo top */
  --pb-group-w: clamp(460px, 48vw, 920px);
  --pb-eyebrow-fs: clamp(.96rem, .42vw + .86rem, 1.18rem);
  --pb-title-fs: clamp(44px, 4.8vw, 92px);

  --pb-range-h: clamp(34px, 1.9vw, 42px);
  --pb-range-fs: clamp(10px, .34vw + 8px, 13px);
  --pb-range-minw: clamp(104px, 8.2vw, 152px);
  --pb-range-gap: clamp(8px, .8vw, 12px);

  --pb-badge-fs: clamp(.72rem, .2vw + .68rem, .84rem);
  --pb-badge-gap: clamp(8px, .7vw, 10px);
  --pb-row-gap: clamp(7px, .7vw, 12px);
}
/* END — PRODUCT BAR TOKENS / PROPORTIONS */

/* ========== WRAPPER + TOP STATE ONLY ========== */
#pb-spacer{
  width: 100%;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

#pb.product-bar{
  position: relative;
  top: auto;
  z-index: 20;
  width: 100%;
  min-height: var(--min-h);
  background: transparent;
  border-bottom: 0;
  padding-inline: 0;
}

#pb.product-bar > *{
  position: relative;
  z-index: 3;
}

/* spegne ogni eventuale lastra legacy */
#pb.product-bar::before,
#pb.product-bar::after{
  display: none !important;
  content: none !important;
}

/* START — PRODUCT BAR SHELL 4-RIGHE */
/* START — PRODUCT BAR SHELL / ALIGNED GROUP */
#pb.product-bar .pb-wrap{
  width: min(var(--pb-shell-max), calc(100vw - 56px));
  margin: 0 auto;
  padding: 10px var(--pb-shell-pad-x) 8px;
  display: grid;
  grid-template-columns: minmax(280px, var(--pb-group-w));
  grid-template-rows: auto auto auto auto;
  align-items: start;
  justify-content: start;
  row-gap: var(--pb-row-gap);
}
/* END — PRODUCT BAR SHELL / ALIGNED GROUP */
/* END — PRODUCT BAR SHELL 4-RIGHE */

/* START — PRODUCT BAR LHS AS CONTENTS */
#pb.product-bar .lhs{
  min-width: 0;
  display: contents;
}

/* START — TITLE AS GRID-CONTENTS */
#pb.product-bar .title{
  display: contents;
}
/* END — TITLE AS GRID-CONTENTS */
/* END — PRODUCT BAR LHS AS CONTENTS */

/* START — EYEBROW ON ROW 1 */
/* START — EYEBROW PROPORTIONED */
#pb.product-bar .eyebrow{
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: start;

  margin: 0;
  font: 700 var(--pb-eyebrow-fs)/1.05 "Oswald", var(--ds-font-sans, system-ui);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #111;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 6px 14px rgba(0,0,0,.10);
}
/* END — EYEBROW PROPORTIONED */
/* END — EYEBROW ON ROW 1 */

/* chip prodotto: test etichetta scura */
/* START — PRODUCT NAME ON ROW 2 */
/* START — PRODUCT TITLE BALANCED */
#pb.product-bar .h{
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;

  margin: 0;
  width: fit-content;
  /* ⚠️ Era `min(100%, 250px)`: un tetto fisso tagliato sulla misura di «F7».
     La placca clona la targhetta fisica del proiettore, e una targhetta VERA
     e' larga quanto il nome che ci sta sopra — non 250 px sempre.
     Misurato il 01/09 a 1440 px (corpo 69 px, spazio utile 215 px):
       SBORDAVANO fuori dalla placca, sul fondo pagina — sei modelli:
         F10HP 288 · F10SHP 351 · F14HP 288 · S1XL 216 · S2XL 252 · S8XL 255
       andavano a capo su due righe — i quattro col nome composto:
         F4.7 Lite · F6 Lite · S1 Lite · S2 Lite
       stavano dentro — i nomi corti: F4.7 · F6 · F7 · F10 · S1 · S2 · S4 · S8 · P1
     ⚠️ E il primo tentativo — alzare il tetto a 400 px — REGGEVA A 1440 E
     CADEVA A 1920: li' il corpo arriva a 92 px (`clamp(44px, 4.8vw, 92px)`) e
     l'F10SHP torna a 468 px, fuori di 87. E' quasi certamente il motivo per cui
     il fix di cui David si ricordava «non aveva tenuto»: un numero fisso
     corretto in UNA fascia.
     ⇒ Nessun numero magico: la placca si fa larga quanto il nome
     (`width: fit-content`) e l'unico limite e' la colonna che la contiene.
     Verificato: il wrap della product-bar e' 1196 px a 1920, la placca piu'
     larga possibile ne chiede ~503. */
  max-width: 100%;
  padding: clamp(8px, .75vw, 11px) clamp(14px, 1.2vw, 18px);
  border-radius: 18px;
  background: linear-gradient(180deg, #1a1a1a, #0c0c0c);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.18);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

#pb.product-bar .title-chip,
#pb.product-bar [data-product-code]{
  font-size: var(--pb-title-fs);
  line-height: .90;
  letter-spacing: .06em;
  color: #f8f8f8;
  /* RILIEVO — luce verticale dall'alto, distanze simmetriche ±2px */
  text-shadow:
    0 -2px 0   rgba(255,255,255,.55),   /* highlight superiore */
    0  2px 0   rgba(0,0,0,1),           /* ombra inferiore — stessa distanza */
    0  4px 8px rgba(0,0,0,.55);         /* blur diffuso */
}
/* ── SUFFISSI DEL CODICE — la convenzione delle PLACCHE FISICHE (V-04) ───
   David, 28/08 h21:46: «guarda il file labels e controlla le scelte fatte:
   HP lo scriviamo piu' piccolo, come fosse un "alla seconda"; Lite invece si
   scrive sotto, sull'etichetta prodotto.»
   ⚠️ NON e' un rimedio allo sbordo: e' la regola fissa di CLAUDE.md — le label
   del sito CLONANO le placche stampate sul proiettore. Che poi lo sbordo si
   risolva da se' e' una conseguenza, non lo scopo: allargare, rimpicciolire e
   troncare erano le tre strade gia' bocciate da David.
   ⇒ Applicata a TUTTI i codici col suffisso, non solo ai cinque che uscivano:
   una convenzione vale ovunque, altrimenti e' un'eccezione. */
.title-chip .chip-sfx{
  font-size:      .52em;         /* «alla seconda»: apice, non testo minore */
  vertical-align: super;
  letter-spacing: .04em;
  margin-left:    .06em;
}
/* XL: piccolo ACCANTO al numero, non in apice (cosi' sta sulla placca S1XL) */
.title-chip .chip-sfx--xl{
  vertical-align: baseline;
  font-size:      .58em;
  margin-left:    .08em;
}
/* Lite: SOTTO, seconda riga, in giallo brand — come sull'etichetta S2/Lite */
.title-chip .chip-sfx--lite{
  display:        block;
  vertical-align: baseline;
  font-size:      .40em;
  line-height:    1;
  margin:         .06em 0 0 .06em;
  letter-spacing: .10em;
  color:          var(--brand);
  /* il rilievo del titolo e' tarato sul corpo grande: su un corpo .40em
     schiaccerebbe le lettere, quindi qui si spegne */
  text-shadow:    none;
}

/* ── LOGO del prodotto dentro il chip (sess.68) ──────────────────────────
   ⚠️ QUESTA REGOLA DEVE STARE IN UN FOGLIO DI STILE, NON NEL JS.
   Prima veniva iniettata da product-wordmark.js a runtime. Da quando il
   generatore scrive l'immagine direttamente nell'HTML — per togliere il
   lampeggio del nome — il JS arriva troppo tardi: l'SVG restava alla sua
   dimensione naturale fino a ~1 s, e il chip misurava 608x310 px invece di
   177x72. Avevo scambiato un testo gigante con un'IMMAGINE gigante.
   Misurato, e visto: e' il caso in cui la misura «il testo non c'e' piu'»
   diceva il vero e il difetto era ancora li'.
   ⇒ l'altezza segue il corpo del testo che l'immagine sostituisce, cosi' il
   chip resta proporzionato in tutte e quattro le fasce senza misure fisse. */
#pb.product-bar .title-chip__wordmark,
.title-chip__wordmark{
  display: block;
  height: 1.05em;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
/* Testo per screen reader: il nome resta leggibile da chi non vede l'immagine
   e da chiunque legga textContent del chip (la titlebar mobile lo fa). */
.ds-sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* END — PRODUCT TITLE BALANCED */
/* END — PRODUCT NAME ON ROW 2 */


/* START — PRODUCT BAR BADGES UNDER TITLE */
/* START — BADGES ON ROW 4 */
/* START — BADGES ROW BALANCED */
#pb.product-bar .badges{
  grid-column: 1;
  grid-row: 4;
  justify-self: start;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pb-badge-gap);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  /* Reset emboss-glass--hard che lascia backdrop-filter attivo:
     il filter cattura il layer GPU del video hero creando una
     "maschera" visibile nell'area badge. */
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border-radius: 0 !important;
  width: 100%;
  max-width: 100%;
}
/* END — BADGES ROW BALANCED */
/* END — BADGES ON ROW 4 *//* END — PRODUCT BAR BADGES UNDER TITLE */

/* START — BADGES SCALED WITH GROUP */
#pb.product-bar .badges .badge{
  --bar1: 5px;
  --bar2: 3px;
  --bar-gap: 2px;
  --bar-left: 10px;

  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  flex: 0 1 auto;
  max-width: 100%;

  font: 600 var(--pb-badge-fs)/1.1 "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #111;

  padding: .34rem .72rem .34rem calc(var(--bar-left) + var(--bar1) + var(--bar-gap) + var(--bar2) + 8px);

  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 1px rgba(255,255,255,1),
    0 8px 16px rgba(0,0,0,.10);

  transition: transform .14s ease, box-shadow .20s ease, filter .20s ease;
}
/* END — BADGES SCALED WITH GROUP */

#pb.product-bar .badges .badge > *{
  position: relative;
  z-index: 1;
}

#pb.product-bar .badges .badge::before,
#pb.product-bar .badges .badge::after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
}

/* ⭐ QUESTE DUE BARRE SONO LA DOPPIA LINEA DEL LOGO, non due accenti qualsiasi:
   `--bar1: 5px` spessa e `--bar2: 3px` fine, affiancate a 2px. E `ds-tokens.css`
   dichiara esattamente questa coppia, con questi nomi:
       --ds-brand-yellow-dark:  #F4B532;  /* Pantone — dominante, doppia linea SPESSA */
       --ds-brand-yellow-light: #F3E955;  /* Pantone — accento,   doppia linea FINE   */
   ⚠️ 10/09/2026 — nessuna delle due barre usava il colore dichiarato: la spessa
   prendeva `--brand-amber` (#FFC400, un ambra che nessun documento definisce) e la
   fine prendeva `--brand-yellow`. Il marchio, sulla barra di OGNI pagina prodotto,
   era dipinto con due colori che non sono i suoi.
   ⇒ David, 10/09 h19:49: «uniforma il giallo sul pantone del logo». Questa E' la
   linea del logo, quindi qui si legge il token direttamente invece di passare per
   gli alias locali — che servono all'interfaccia e non al marchio.
   🔑 Il fallback ripete il valore del token: un `var()` che ripiega su un colore
   diverso dal token e' una divergenza che aspetta solo il giorno in cui il token
   non c'e' (successo stasera con `--ds-brand-yellow`, usata 13 volte e dichiarata mai). */
#pb.product-bar .badges .badge::before{
  left: var(--bar-left);
  width: var(--bar1);
  background: var(--ds-brand-yellow-dark, #F4B532);
}

#pb.product-bar .badges .badge::after{
  left: calc(var(--bar-left) + var(--bar1) + var(--bar-gap));
  width: var(--bar2);
  background: var(--ds-brand-yellow-light, #F3E955);
}

#pb.product-bar .badges .badge:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px rgba(255,255,255,1),
    0 12px 26px rgba(0,0,0,.14);
  filter: saturate(1.06);
}

/* START — PRODUCT BAR RHS AS CONTENTS */
#pb.product-bar .rhs{
  min-width: 0;
  display: contents;
}
/* END — PRODUCT BAR RHS AS CONTENTS */

/* START — PRODUCT BAR RANGE NEXT TO TITLE */
/* START — RANGE ON ROW 3 */
/* START — RANGE ROW BALANCED */
#pb.product-bar .rhs .range-pills{
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: start;

  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pb-range-gap);
  margin: 0;
  padding: 0;
  max-width: 100%;
  width: fit-content;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* END — RANGE ROW BALANCED */
/* END — RANGE ON ROW 3 */
/* END — PRODUCT BAR RANGE NEXT TO TITLE */

/* sicurezza: nessun range a sinistra */
#pb.product-bar .lhs .range-pills{
  display: none !important;
}

/* START — PRODUCT BAR RANGE PILLS PROPORTIONATE */
/* START — RANGE PILLS SCALED / ACTIVE HIGHLIGHT */
#pb.product-bar .rhs .range-pills .pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-width: var(--pb-range-minw);
  /* 📌 V-60, 01/09 — segnalata «VARI-WHITE tagliata di 7 px a 1440». NON e'
     tagliata: il testo misura 100 px e finisce a 116 dentro una pill di 118.
     I 7 px sono la differenza fra `scrollWidth` e `clientWidth`, prodotta
     dagli pseudo-elementi ASSOLUTI (`::before` largo 122 a partire da -2) —
     cioe' da un bordo, non da una parola. Guardata a schermo a 1440: FIXED
     WHITE, VARI-WHITE e VW+C si leggono per intero.
     ⚠️ Lasciato com'era di proposito: avevo aggiunto un `flex: 0 0 auto`
     credendo a una compressione del flex, e non cambiava una virgola. Un fix
     che non fixa e' peggio del difetto: resta li' a dire che il problema e'
     stato risolto. */
  height: var(--pb-range-h);
  padding: 6px 16px;
  border-radius: 999px;

  text-transform: uppercase;
  font-family: "ConthraxSB", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  font-size: var(--pb-range-fs);
  line-height: 1;
  color: rgba(18,18,18,.78);
  white-space: nowrap;

  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);

  box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    0 2px 6px rgba(0,0,0,.06);

  transition: transform .12s, box-shadow .2s, background .2s, filter .2s, color .2s, opacity .2s;
}

#pb.product-bar .rhs .range-pills .pill:not(.active):not([aria-pressed="true"]){
  transform: scale(.94);
  opacity: .88;
  filter: grayscale(.18);
}

#pb.product-bar .rhs .range-pills .pill.active,
#pb.product-bar .rhs .range-pills .pill[aria-pressed="true"]{
  min-width: clamp(118px, 9vw, 164px);
  transform: translateY(-1px) scale(1.02);
  color: #111;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.90));
  box-shadow:
    0 8px 14px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,1);
}

/* sess.47b P0.3: gate :hover su device con hover reale (sticky-hover iOS) */
@media (hover: hover) {
  #pb.product-bar .rhs .range-pills .pill:hover{
    transform: translateY(-1px) scale(.98);
  }

  #pb.product-bar .rhs .range-pills .pill.active:hover,
  #pb.product-bar .rhs .range-pills .pill[aria-pressed="true"]:hover{
    transform: translateY(-1px) scale(1.04);
  }
}
/* END — RANGE PILLS SCALED / ACTIVE HIGHLIGHT */
/* END — PRODUCT BAR RANGE PILLS PROPORTIONATE */

#pb.product-bar .rhs .range-pills .pill::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -3px;
  height: 50%;
  background: linear-gradient(90deg,#009246 0 33.333%, #ffffff 33.333% 66.666%, #CE2B37 66.666%);
  clip-path: ellipse(120% 70% at 50% 115%);
  opacity: .95;
  filter: saturate(1.15);
  z-index: 0;
  pointer-events: none;
}

#pb.product-bar .rhs .range-pills .pill::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
  border: 3px solid transparent;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .18s, transform .18s, box-shadow .18s, border-color .18s;
}

#pb.product-bar .rhs .range-pills .pill.active,
#pb.product-bar .rhs .range-pills .pill[aria-pressed="true"]{
  transform: translateY(-1px) scale(1.012);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.88));
  box-shadow:
    0 8px 14px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,1);
}

#pb.product-bar .rhs .range-pills .pill.active::before,
#pb.product-bar .rhs .range-pills .pill:focus-visible::before{
  opacity: 1;
  transform: scale(1);
  border-color: var(--brand-yellow);
  box-shadow:
    0 0 0 4px var(--ring-white),
    inset 0 0 0 1px rgba(0,0,0,.35);
}

/* START — PRODUCT BAR UNITS HIDDEN FOR TOP LAYOUT */
#pb.product-bar .units-toggle{
  display: none !important;
}
/* END — PRODUCT BAR UNITS HIDDEN FOR TOP LAYOUT */

/* START — PRODUCT BAR STICKY PHASE 1 */
#pb.product-bar{
  --ds-pb-h: auto;
  transition: top .22s ease, transform .22s ease, opacity .22s ease;
}

#pb.product-bar .pb-wrap,
#pb.product-bar .eyebrow,
#pb.product-bar .h,
#pb.product-bar .title-chip,
#pb.product-bar .rhs,
#pb.product-bar .range-pills,
#pb.product-bar .badges{
  transition:
    width .22s ease,
    max-width .22s ease,
    padding .22s ease,
    gap .22s ease,
    row-gap .22s ease,
    column-gap .22s ease,
    font-size .22s ease,
    transform .22s ease,
    opacity .22s ease;
}

/* ── Curtain drop: keyframes per entrata della pill sticky ── */
@keyframes pb-curtain-drop{
  from{
    opacity: 0;
    transform: translateY(-10px) scale(.97);
  }
  to{
    opacity: 1;
    transform: translateY(0)   scale(1);
  }
}

#pb.product-bar.is-sticky{
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--ds-header-sticky-top, 8px) + var(--ds-header-sticky-h, 58px) + var(--ds-pb-sticky-gap, 8px));
  z-index: 960;
  pointer-events: none;
}

/* sess.47b — compact-sticky (1400-1849): la tools-dock orizzontale sta TRA il
   cerchio hamburger e la pill F7, quindi la pill scende sotto la toolbar.
   Solo compact: in wide >=1850 la dock non esiste, pill resta in alto.
   --ds-dock-block-h ~ altezza toolbar (~54px). */
body.ds-vp-compact.is-page-sticky #pb.product-bar.is-sticky{
  /* sess.49 b: la dock 2-righe ora parte da top:8 (sostituisce il pallino) ed e' alta ~97px →
     la pill scende SUBITO sotto la dock con piccolo gap (prima era troppo distante). */
  top: calc(var(--ds-header-sticky-top, 8px) + 97px + 8px);
}


/* START — PRODUCT BAR STICKY / COMPACT SHELL */
#pb.product-bar.is-sticky .pb-wrap{
  pointer-events: auto;
  width: fit-content;
  max-width: calc(100vw - 20px);
  padding: 8px 18px;
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(14px, 2vw, 28px);
  row-gap: 0;
  margin-inline: auto;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px rgba(255,255,255,.88),
    0 10px 22px rgba(0,0,0,.10);
  /* Curtain drop: scivola giù dall'header al primo snap */
  animation: pb-curtain-drop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* END — PRODUCT BAR STICKY / COMPACT SHELL */

#pb.product-bar.is-sticky .lhs{
  display: block;
  min-width: 0;
}

#pb.product-bar.is-sticky .title{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#pb.product-bar.is-sticky .eyebrow{
  display: none;
}

#pb.product-bar.is-sticky .h{
  margin: 0;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;

  inline-size: clamp(82px, 5.8vw, 114px);
  aspect-ratio: 1.72 / 1;

  max-width: none;
  padding: 0 7px;
  border-radius: 16px;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 6px 14px rgba(0,0,0,.14);
}

#pb.product-bar.is-sticky .title-chip,
#pb.product-bar.is-sticky [data-product-code]{
  display: inline-block;
  font-size: clamp(30px, 2.3vw, 44px);
  line-height: .95;
  letter-spacing: .035em;
  white-space: nowrap;
  transform: translateY(-1px);
  /* rilievo sticky — simmetrico, proporzionato al chip ridotto */
  text-shadow:
    0 -2px 0   rgba(255,255,255,.50),
    0  2px 0   rgba(0,0,0,1),
    0  3px 6px rgba(0,0,0,.50);
}

#pb.product-bar.is-sticky .badges{
  display: none !important;
}

/* START — PRODUCT BAR STICKY / ACTIVE RANGE + EXPAND ON HOVER */
#pb.product-bar.is-sticky .rhs{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

#pb.product-bar.is-sticky .rhs .range-pills{
  width: auto;
  max-width: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  overflow: visible;
}

#pb.product-bar.is-sticky .rhs .range-pills .pill{
  display: none;
  min-width: 0;
  height: 36px;
  padding: 6px 16px;
  font-size: .78rem;
  transform: none;
  opacity: 1;
  filter: none;
}

#pb.product-bar.is-sticky .rhs .range-pills .pill.active,
#pb.product-bar.is-sticky .rhs .range-pills .pill[aria-pressed="true"]{
  display: inline-flex;
  min-width: 124px;
}

/* quando l’utente entra sull’area range, riapri tutte le pill */
#pb.product-bar.is-sticky .rhs:hover .range-pills,
#pb.product-bar.is-sticky .rhs:focus-within .range-pills{
  gap: 10px;
}

#pb.product-bar.is-sticky .rhs:hover .range-pills .pill,
#pb.product-bar.is-sticky .rhs:focus-within .range-pills .pill{
  display: inline-flex;
}

#pb.product-bar.is-sticky .rhs:hover .range-pills .pill:not(.active):not([aria-pressed="true"]),
#pb.product-bar.is-sticky .rhs:focus-within .range-pills .pill:not(.active):not([aria-pressed="true"]){
  opacity: .92;
}
/* END — PRODUCT BAR STICKY / ACTIVE RANGE + EXPAND ON HOVER */
/* nota: il blocco capsula ≥1980px è stato rimosso — la card colonna ≥1900px
   gestisce tutto; il blocco capsula <1400 resta invariato */

/* START — PRODUCT BAR STICKY / 1120-781 COMPACT */
@media (max-width: 1120px){
  #pb.product-bar.is-sticky .pb-wrap{
    width: fit-content;
    max-width: calc(100vw - 18px);
    margin-inline: auto;
    grid-template-columns: max-content max-content;
    justify-content: center;
    padding: 7px 12px;
    column-gap: 10px;
  }

  #pb.product-bar.is-sticky .title{
    gap: 8px;
  }

  #pb.product-bar.is-sticky .h{
    inline-size: clamp(72px, 7.2vw, 88px);
    aspect-ratio: 1.72 / 1;
    padding-inline: 4px;
  }

  #pb.product-bar.is-sticky .title-chip,
  #pb.product-bar.is-sticky [data-product-code]{
    font-size: clamp(25px, 2.2vw, 31px);
    line-height: .95;
  }

  #pb.product-bar.is-sticky .rhs .range-pills{
    gap: 0;
  }

  #pb.product-bar.is-sticky .rhs:hover .range-pills,
  #pb.product-bar.is-sticky .rhs:focus-within .range-pills{
    gap: 7px;
  }

  #pb.product-bar.is-sticky .rhs .range-pills .pill{
    height: 33px;
    padding-inline: 11px;
    font-size: .68rem;
  }

  #pb.product-bar.is-sticky .rhs .range-pills .pill.active,
  #pb.product-bar.is-sticky .rhs .range-pills .pill[aria-pressed="true"]{
    min-width: 104px;
  }
}
/* END — PRODUCT BAR STICKY / 1120-781 COMPACT */

@media (max-width: 780px){
  #pb.product-bar.is-sticky{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 20;
    pointer-events: auto;
  }

  #pb.product-bar.is-sticky .pb-wrap{
    width: calc(100vw - 28px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    justify-content: start;
    row-gap: 8px;
    border-radius: 26px;
    padding: 8px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  #pb.product-bar.is-sticky .title{
    display: contents;
  }

  #pb.product-bar.is-sticky .h{
    width: fit-content;
    max-width: min(190px, 58vw);
  }

  #pb.product-bar.is-sticky .rhs{
    display: block;
  }

  #pb.product-bar.is-sticky .rhs .range-pills{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/* END — PRODUCT BAR STICKY PHASE 1 */

/* ========== BREAKPOINTS ========== */
/* START — BREAKPOINTS COHERENT SCALE */
/* START — 1439 tuned */
@media (max-width: 1399.98px){
  #pb.product-bar{
    --pb-group-w: clamp(420px, 46vw, 680px);
    --pb-title-fs: clamp(46px, 4.4vw, 82px);
    --pb-range-h: clamp(31px, 1.7vw, 38px);
  }

  #pb.product-bar .pb-wrap{
    width: calc(100vw - 42px);
  }

  #pb.product-bar .badges{
    width: min(100%, 680px);
  }
}
/* END — 1439 tuned */
/* START — 1120 tuned */
@media (max-width: 1120px){
  #pb.product-bar{
    --pb-group-w: min(100%, 560px);
    --pb-title-fs: clamp(38px, 4.8vw, 56px);
    --pb-range-h: 36px;
    --pb-range-minw: clamp(88px, 20vw, 128px);
  }

  #pb.product-bar .pb-wrap{
    width: calc(100vw - 28px);
    grid-template-columns: minmax(0, 1fr);
  }

  #pb.product-bar .badges{
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  #pb.product-bar .badges .badge{
    flex: 0 1 auto;
  }

  /* START — badges de-emphasis under 1120 */
  #pb.product-bar{
    --pb-badge-fs: .68rem;
    --pb-badge-gap: 7px;
  }

  #pb.product-bar .badges .badge{
    --bar1: 4px;
    --bar2: 2px;
    --bar-gap: 2px;
    --bar-left: 8px;

    padding: .28rem .60rem .28rem calc(var(--bar-left) + var(--bar1) + var(--bar-gap) + var(--bar2) + 7px);
    box-shadow:
      inset 0 1px rgba(255,255,255,.96),
      0 5px 12px rgba(0,0,0,.08);
  }

  #pb.product-bar .badges .badge::before,
  #pb.product-bar .badges .badge::after{
    height: 12px;
  }
}
/* END — 1120 tuned */

/* START — 820 tuned */
@media (max-width: 820px){
  #pb.product-bar{
    --pb-group-w: 100%;
    --pb-title-fs: clamp(30px, 7vw, 40px);
    --pb-range-h: 34px;
    --pb-range-minw: clamp(92px, 28vw, 126px);
    --pb-badge-fs: .76rem;
  }

  #pb.product-bar .pb-wrap{
    padding-top: 4px;
    width: calc(100vw - 20px);
  }

  #pb.product-bar .h{
    width: fit-content;
    max-width: min(170px, 54vw);
    padding: 8px 14px;
  }

  #pb.product-bar .badges{
    gap: 8px;
  }

  #pb.product-bar .badges .badge{
    max-width: 100%;
  }

  /* START — badges de-emphasis under 820 */
  #pb.product-bar{
    --pb-badge-fs: .64rem;
    --pb-badge-gap: 6px;
  }

  #pb.product-bar .badges{
    gap: 6px;
  }

  #pb.product-bar .badges .badge{
    --bar1: 3px;
    --bar2: 2px;
    --bar-gap: 1px;
    --bar-left: 7px;

    padding: .24rem .52rem .24rem calc(var(--bar-left) + var(--bar1) + var(--bar-gap) + var(--bar2) + 6px);
    letter-spacing: .015em;
    box-shadow:
      inset 0 1px rgba(255,255,255,.95),
      0 4px 10px rgba(0,0,0,.07);
  }

  #pb.product-bar .badges .badge::before,
  #pb.product-bar .badges .badge::after{
    height: 10px;
  }
}
/* END — 820 tuned */

/* END — BREAKPOINTS COHERENT SCALE */


/* START — PRODUCT BAR DESKTOP RAIL / COMPACT + WIDE */
@media (min-width: 1400px){
  #pb.product-bar.is-sticky{
    left: var(--ds-rail-left, 24px);
    right: auto;
    width: auto;
  }

  #pb.product-bar.is-sticky .pb-wrap{
    margin-inline: 0;
  }
}

/* ── PRODUCT BAR 1400-1899px — card colonna compatta ─────────────────── */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #pb.product-bar.is-sticky{
    left: var(--ds-rail-left, 24px);
    right: auto;
    top: calc(var(--ds-header-sticky-top, 8px) + var(--ds-header-sticky-h, 58px) + var(--ds-rail-stack-gap, 10px));
  }

  #pb.product-bar.is-sticky .pb-wrap{
    width: 176px;
    max-width: 176px;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
    row-gap: 9px;
    column-gap: 0;
    border-radius: 14px;   /* sess.49 b: uguale alla dock (raggi container coerenti) */
    background:
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84));
    border: 1px solid rgba(255,255,255,.76);
    box-shadow:
      inset 3px 0 0 rgba(244,181,50,.48),   /* sess.49 b: accento ambra sx (colonna sx, come la dock) */
      inset 0 1px rgba(255,255,255,.92),
      0 10px 22px rgba(0,0,0,.10);
  }

  #pb.product-bar.is-sticky .title{
    display: block;
    width: 100%;
    text-align: center;
  }

  #pb.product-bar.is-sticky .h{
    /* ⚠️ Era `inline-size: 92px`: la stessa malattia della targhetta grande,
       una scatola FISSA tarata su «F7». Nel rail flottante l'F10SHP ne chiedeva
       113 e usciva di 29 px anche DOPO la composizione in apice (prima erano
       69: l'apice ne ha tolti 40, non tutti).
       ⇒ La mini-placca si fa larga quanto il nome, con un minimo che tiene la
       colonna allineata quando il nome e' corto (F7, S1, P1). */
    inline-size: fit-content;
    min-inline-size: 92px;
    max-inline-size: 100%;
    justify-self: center;
  }

  #pb.product-bar.is-sticky .title-chip,
  #pb.product-bar.is-sticky [data-product-code]{
    font-size: 31px;
  }

  #pb.product-bar.is-sticky .rhs{
    display: block;
    width: 100%;
  }

  #pb.product-bar.is-sticky .rhs .range-pills{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  #pb.product-bar.is-sticky .rhs .range-pills .pill{
    display: none;
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    height: 31px;
    padding-inline: 10px;
    font-size: .67rem;
    justify-content: center;
  }

  #pb.product-bar.is-sticky .rhs .range-pills .pill.active,
  #pb.product-bar.is-sticky .rhs .range-pills .pill[aria-pressed="true"]{
    display: inline-flex;
  }

  #pb.product-bar.is-sticky .rhs:hover .range-pills,
  #pb.product-bar.is-sticky .rhs:focus-within .range-pills{
    gap: 6px;
  }

  #pb.product-bar.is-sticky .rhs:hover .range-pills .pill,
  #pb.product-bar.is-sticky .rhs:focus-within .range-pills .pill{
    display: inline-flex;
  }
}

/* ── PRODUCT BAR ≥1900px — card colonna larga, simmetria rail ─────────────
   Breakpoint canonico: 1900px (era 1920/1980 — unificato).
   Right rail = 312px = --ds-rail-lane-wide.
   La card si allarga a 312px per centrare il contenuto tra i due rail.
   L'effetto colonna (pill attiva + expand on hover) resta invariato.
   Gap visivo sx = dx = 52px (= 388px margin - 24px offset - 312px rail). */
@media (min-width: 1850px){
  #pb.product-bar.is-sticky{
    left: var(--ds-rail-left, 24px);
    right: auto;
    top: calc(var(--ds-header-sticky-top, 8px) + var(--ds-header-sticky-h, 58px) + var(--ds-rail-stack-gap, 10px));
  }

  #pb.product-bar.is-sticky .pb-wrap{
    width: var(--ds-rail-lane-wide, 312px);
    max-width: var(--ds-rail-lane-wide, 312px);
    padding: 14px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
    row-gap: 11px;
    column-gap: 0;
    border-radius: 12px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84));
    border: 1px solid rgba(255,255,255,.76);
    box-shadow:
      inset 0 1px rgba(255,255,255,.92),
      0 10px 22px rgba(0,0,0,.10);
  }

  #pb.product-bar.is-sticky .title{
    display: block;
    width: 100%;
    text-align: center;
  }

  #pb.product-bar.is-sticky .h{
    inline-size: 108px;
    justify-self: center;
  }

  #pb.product-bar.is-sticky .title-chip,
  #pb.product-bar.is-sticky [data-product-code]{
    font-size: 38px;
  }

  #pb.product-bar.is-sticky .rhs{
    display: block;
    width: 100%;
  }

  #pb.product-bar.is-sticky .rhs .range-pills{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* pill di default: nascosta; quella attiva al centro della card */
  #pb.product-bar.is-sticky .rhs .range-pills .pill{
    display: none;
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    height: 35px;
    padding-inline: 12px;
    font-size: .70rem;
    justify-content: center;
  }

  #pb.product-bar.is-sticky .rhs .range-pills .pill.active,
  #pb.product-bar.is-sticky .rhs .range-pills .pill[aria-pressed="true"]{
    display: inline-flex;
  }

  /* hover: tutte le pills appaiono, centrate a colonna se ≤2, griglia se 3+ */
  #pb.product-bar.is-sticky .rhs:hover .range-pills,
  #pb.product-bar.is-sticky .rhs:focus-within .range-pills{
    gap: 7px;
  }

  #pb.product-bar.is-sticky .rhs:hover .range-pills .pill,
  #pb.product-bar.is-sticky .rhs:focus-within .range-pills .pill{
    display: inline-flex;
  }
}

/* START — PRODUCT BAR TOP OFFSET / TOP STATE */
@media (min-width: 1400px){
  body:not(.is-page-sticky) #pb.product-bar{
    margin-top: calc(var(--ds-header-h, 82px) + 12px);
  }
}

@media (max-width: 1399.98px){
  body:not(.is-page-sticky) #pb.product-bar{
    margin-top: calc(var(--ds-header-h, 82px) + 8px);
  }
}
/* END — PRODUCT BAR TOP OFFSET / TOP STATE */

/* END — PRODUCT BAR DESKTOP RAIL / COMPACT + WIDE */

/* START — PRODUCT BAR PRE-STICKY TRANSITION */
@media (min-width: 1400px){
  #pb.product-bar,
  #pb.product-bar .pb-wrap,
  #pb.product-bar .title-chip,
  #pb.product-bar [data-product-code],
  #pb.product-bar .badges,
  #pb.product-bar .rhs .range-pills,
  #pb.product-bar .rhs .range-pills .pill{
    transition:
      transform 120ms linear,
      opacity 120ms linear,
      filter 120ms linear,
      box-shadow 120ms linear,
      min-width 120ms linear,
      max-width 120ms linear,
      padding 120ms linear,
      gap 120ms linear;
    will-change: transform, opacity;
  }

  body:not(.is-page-sticky) #pb.product-bar{
    --ds-sticky-late: clamp(0, calc((var(--ds-sticky-progress-eased) - 0.52) * 2.2), 1);
    transform:
      translateX(calc(-42px * var(--ds-sticky-progress-eased)))
      translateY(calc(4px * var(--ds-sticky-progress-eased)));
    opacity: calc(1 - (0.03 * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #pb.product-bar .pb-wrap{
    transform-origin: left top;
    transform:
      translateX(calc(-8px * var(--ds-sticky-late)))
      scale(calc(1 - (0.040 * var(--ds-sticky-progress-eased))));
    box-shadow:
      0 calc(4px * var(--ds-sticky-late)) calc(14px * var(--ds-sticky-late)) rgba(0,0,0,.08);
  }

  body:not(.is-page-sticky) #pb.product-bar .title-chip,
  body:not(.is-page-sticky) #pb.product-bar [data-product-code]{
    transform: scale(calc(1 - (0.07 * var(--ds-sticky-progress-eased))));
    transform-origin: left center;
  }

  body:not(.is-page-sticky) #pb.product-bar .badges{
    opacity: calc(1 - (0.52 * var(--ds-sticky-progress-eased)) - (0.28 * var(--ds-sticky-late)));
    transform: translateY(calc(-4px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills{
    gap: calc(var(--pb-range-gap) * (1 - (0.60 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills .pill:not(.active):not([aria-pressed="true"]){
    opacity: calc(1 - (1.35 * var(--ds-sticky-progress-eased)));
    transform:
      translateY(calc(-3px * var(--ds-sticky-progress-eased)))
      scale(calc(1 - (0.18 * var(--ds-sticky-progress-eased))));
    min-width: calc(var(--pb-range-minw) - (34px * var(--ds-sticky-progress-eased)));
    max-width: calc(var(--pb-range-minw) - (34px * var(--ds-sticky-progress-eased)));
    padding-inline: calc(16px - (8px * var(--ds-sticky-progress-eased)));
    overflow: hidden;
  }

  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills .pill.active,
  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills .pill[aria-pressed="true"]{
    transform:
      translateY(calc(-1px * var(--ds-sticky-progress-eased)))
      scale(calc(1 + (0.03 * var(--ds-sticky-progress-eased))));
  }
}
/* END — PRODUCT BAR PRE-STICKY TRANSITION */

/* START — PRODUCT BAR PRE-DOCK COMPACT OVERRIDE */
@media (min-width: 1400px) and (max-width: 1849.98px){
  body:not(.is-page-sticky) #pb.product-bar{
    --ds-sticky-late-compact: clamp(0, calc((var(--ds-sticky-progress-eased) - 0.34) * 3.3), 1);
    transform:
      translateX(calc(-64px * var(--ds-sticky-progress-eased)))
      translateY(calc(5px * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #pb.product-bar .pb-wrap{
    transform-origin: left top;
    transform:
      translateX(calc(-16px * var(--ds-sticky-late-compact)))
      scale(calc(1 - (0.048 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #pb.product-bar .title-chip,
  body:not(.is-page-sticky) #pb.product-bar [data-product-code]{
    transform:
      translateX(calc(-6px * var(--ds-sticky-late-compact)))
      scale(calc(1 - (0.078 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #pb.product-bar .badges{
    opacity: calc(1 - (0.64 * var(--ds-sticky-progress-eased)) - (0.34 * var(--ds-sticky-late-compact)));
  }

  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills .pill.active,
  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills .pill[aria-pressed="true"]{
    transform:
      translateX(calc(-3px * var(--ds-sticky-late-compact)))
      translateY(calc(-1px * var(--ds-sticky-progress-eased)))
      scale(calc(1 + (0.04 * var(--ds-sticky-progress-eased))));
  }
}
/* END — PRODUCT BAR PRE-DOCK COMPACT OVERRIDE */

/* START — PRODUCT BAR PRE-DOCK WIDE OVERRIDE */
@media (min-width: 1850px){
  /* Spring-settle snap on dock at wide viewport */
  #pb.product-bar,
  #pb.product-bar .pb-wrap,
  #pb.product-bar .title-chip,
  #pb.product-bar [data-product-code],
  #pb.product-bar .badges,
  #pb.product-bar .rhs .range-pills,
  #pb.product-bar .rhs .range-pills .pill{
    transition:
      transform     190ms cubic-bezier(.22,.82,.34,1.02),
      opacity       190ms cubic-bezier(.22,.82,.34,1.02),
      filter        190ms cubic-bezier(.22,.82,.34,1.02),
      box-shadow    210ms cubic-bezier(.22,.82,.34,1.02),
      min-width     190ms cubic-bezier(.22,.82,.34,1.02),
      max-width     190ms cubic-bezier(.22,.82,.34,1.02),
      padding       190ms cubic-bezier(.22,.82,.34,1.02),
      gap           190ms cubic-bezier(.22,.82,.34,1.02);
  }

  body:not(.is-page-sticky) #pb.product-bar{
    /* late fires at 42% scroll progress — more suspense before snap */
    --ds-sticky-late-wide: clamp(0, calc((var(--ds-sticky-progress-eased) - 0.42) * 2.6), 1);
    transform:
      translateX(calc(-66px * var(--ds-sticky-progress-eased)))
      translateY(calc(6px * var(--ds-sticky-progress-eased)));
    opacity: calc(1 - (0.04 * var(--ds-sticky-progress-eased)));
  }

  body:not(.is-page-sticky) #pb.product-bar .pb-wrap{
    transform-origin: left top;
    transform:
      translateX(calc(-16px * var(--ds-sticky-late-wide)))
      scale(calc(1 - (0.052 * var(--ds-sticky-progress-eased))));
    box-shadow:
      0 calc(6px * var(--ds-sticky-late-wide)) calc(20px * var(--ds-sticky-late-wide)) rgba(0,0,0,.10);
  }

  body:not(.is-page-sticky) #pb.product-bar .title-chip,
  body:not(.is-page-sticky) #pb.product-bar [data-product-code]{
    transform:
      translateX(calc(-7px * var(--ds-sticky-late-wide)))
      scale(calc(1 - (0.090 * var(--ds-sticky-progress-eased))));
  }

  body:not(.is-page-sticky) #pb.product-bar .badges{
    opacity: calc(1 - (0.62 * var(--ds-sticky-progress-eased)) - (0.38 * var(--ds-sticky-late-wide)));
    transform: translateY(calc(-6px * var(--ds-sticky-late-wide)));
  }

  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills .pill.active,
  body:not(.is-page-sticky) #pb.product-bar .rhs .range-pills .pill[aria-pressed="true"]{
    transform:
      translateX(calc(-4px * var(--ds-sticky-late-wide)))
      translateY(calc(-2px * var(--ds-sticky-progress-eased)))
      scale(calc(1 + (0.05 * var(--ds-sticky-progress-eased))));
  }
}
/* END — PRODUCT BAR PRE-DOCK WIDE OVERRIDE */


/* ================================================================
   MOBILE FLOAT RANGE PILL  (<1400px)
   Appare in basso al centro quando la product bar è scorsa fuori
   dalla viewport. Tap → espande le opzioni range sopra il pill.
   A ≥1400px è SEMPRE nascosto: header e product-bar sticky già forniscono
   l'accesso al range, il float pill mobile non serve. Senza questa regola
   default il <div> resta nel flow normale e appare come testo in basso.
   ================================================================ */
#pb-float-pill{ display: none !important; }

@media (max-width: 1399.98px){

  #pb-float-pill{
    position: fixed;
    display: flex !important;
    /* sit above the mobile tab bar (z-index 1100) + its height */
    bottom: calc(var(--ds-mobile-tabbar-h, 72px) + 12px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    /* hidden: slida giù fuori dalla viewport */
    transform: translateX(-50%) translateY(calc(100% + 48px));
    z-index: 1200;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0;
    transition:
      transform 340ms cubic-bezier(.34, 1.52, .64, 1),
      opacity   220ms ease;
  }

  #pb-float-pill.is-visible{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Options panel (above trigger) — cluster di range pills ── */
  #pb-float-pill .pfp-options{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow:
      0 6px 24px rgba(0,0,0,.10),
      inset 0 1px rgba(255,255,255,.85);
    max-width: min(calc(100vw - 48px), 360px);
    /* hidden state */
    transform: translateY(8px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 220ms cubic-bezier(.34, 1.2, .64, 1),
      opacity   160ms ease;
  }

  #pb-float-pill.is-expanded .pfp-options{
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Trigger — stile identico alla pill.active ── */
  #pb-float-pill .pfp-trigger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    height: 42px;
    padding: 6px 20px;
    border-radius: 999px;
    border: none;

    text-transform: uppercase;
    font-family: "ConthraxSB", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .03em;
    font-size: 13px;
    line-height: 1;
    color: #111;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;   /* iOS: no double-tap zoom, immediate click */
    -webkit-tap-highlight-color: transparent;

    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.88));
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow:
      0 8px 20px rgba(0,0,0,.18),
      inset 0 1px rgba(255,255,255,1);

    transition:
      transform  150ms ease,
      box-shadow 150ms ease;
  }

  /* tricolore — identico al ::after delle range pills */
  #pb-float-pill .pfp-trigger::after{
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -3px;
    height: 50%;
    background: linear-gradient(90deg, #009246 0 33.333%, #ffffff 33.333% 66.666%, #CE2B37 66.666%);
    clip-path: ellipse(120% 70% at 50% 115%);
    opacity: .95;
    filter: saturate(1.15);
    z-index: 0;
    pointer-events: none;
  }

  #pb-float-pill .pfp-label{
    position: relative;
    z-index: 1;
  }

  #pb-float-pill .pfp-trigger:active{
    transform: scale(.96);
  }

  #pb-float-pill .pfp-chevron{
    position: relative;
    z-index: 1;
    width: 10px;
    height: 7px;
    flex-shrink: 0;
    opacity: .55;
    transition: transform 240ms cubic-bezier(.34, 1.56, .64, 1), opacity 150ms ease;
  }

  #pb-float-pill.is-expanded .pfp-chevron{
    transform: rotate(180deg);
    opacity: .8;
  }

  /* ── Option buttons — stile identico alle range pills ── */
  #pb-float-pill .pfp-opt{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    height: 36px;
    padding: 5px 14px;
    border-radius: 999px;
    border: none;

    text-transform: uppercase;
    font-family: "ConthraxSB", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .03em;
    font-size: 11px;
    line-height: 1;
    color: rgba(18,18,18,.78);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow:
      inset 0 1px rgba(255,255,255,.9),
      0 2px 6px rgba(0,0,0,.06);

    transform: scale(.94);
    opacity: .88;
    filter: grayscale(.18);

    transition:
      transform     120ms ease,
      box-shadow    200ms ease,
      background    200ms ease,
      color         200ms ease,
      opacity       200ms ease,
      filter        200ms ease;
  }

  /* tricolore sulle opzioni */
  #pb-float-pill .pfp-opt::after{
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -3px;
    height: 50%;
    background: linear-gradient(90deg, #009246 0 33.333%, #ffffff 33.333% 66.666%, #CE2B37 66.666%);
    clip-path: ellipse(120% 70% at 50% 115%);
    opacity: .95;
    filter: saturate(1.15);
    pointer-events: none;
  }

  #pb-float-pill .pfp-opt.active{
    transform: scale(1.02);
    opacity: 1;
    filter: none;
    color: #111;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.88));
    box-shadow:
      0 6px 14px rgba(0,0,0,.13),
      inset 0 1px rgba(255,255,255,1);
  }

  #pb-float-pill .pfp-opt:active{
    transform: scale(.90);
  }

}
/* END — MOBILE FLOAT RANGE PILL */

/* ── DARK MODE ──────────────────────────────────────────────────────────── */

/* Eyebrow */
body.ds-dark #pb.product-bar .eyebrow{
  color: rgba(222,218,210,.90);
  text-shadow: none;
}

/* Badges */
body.ds-dark #pb.product-bar .badges .badge{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.10);
  color: rgba(218,214,206,.88);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 8px 16px rgba(0,0,0,.30);
  text-shadow: none;
}
/* Stessa doppia linea del logo, in tema scuro. ⚠️ Il marchio NON cambia colore
   col tema: se qui i due valori divergessero da quelli chiari, il logo avrebbe due
   versioni a seconda di come e' impostato il telefono di chi guarda. */
body.ds-dark #pb.product-bar .badges .badge::before{
  background: var(--ds-brand-yellow-dark, #F4B532);
}
body.ds-dark #pb.product-bar .badges .badge::after{
  background: var(--ds-brand-yellow-light, #F3E955);
}

/* Range pills (top state) */
body.ds-dark #pb.product-bar .rhs .range-pills .pill{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
  color: rgba(218,214,206,.82);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 2px 6px rgba(0,0,0,.22);
}
body.ds-dark #pb.product-bar .rhs .range-pills .pill.active,
body.ds-dark #pb.product-bar .rhs .range-pills .pill[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.11));
  color: rgba(236,232,224,.95);
  box-shadow:
    0 8px 14px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.10);
}

/* Sticky wrap (capsula e card rail) */
body.ds-dark #pb.product-bar.is-sticky .pb-wrap{
  background: linear-gradient(180deg, rgba(26,22,16,.92), rgba(18,15,10,.84));
  border-color: rgba(255,255,255,.11);
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.32),   /* sess.49 b: accento ambra sx (dark) */
    inset 0 1px rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.52);
}

/* Sticky range pills */
body.ds-dark #pb.product-bar.is-sticky .rhs .range-pills .pill.active,
body.ds-dark #pb.product-bar.is-sticky .rhs .range-pills .pill[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  color: rgba(236,232,224,.95);
}

/* Float pill mobile */
body.ds-dark #pb-float-pill .pfp-options{
  background: rgba(22,19,14,.90);
  box-shadow:
    0 6px 24px rgba(0,0,0,.44),
    inset 0 1px rgba(255,255,255,.06);
}
body.ds-dark #pb-float-pill .pfp-trigger{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  color: rgba(218,214,206,.90);
  box-shadow:
    0 8px 20px rgba(0,0,0,.40),
    inset 0 1px rgba(255,255,255,.08);
}
body.ds-dark #pb-float-pill .pfp-opt{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color: rgba(200,196,188,.80);
}
body.ds-dark #pb-float-pill .pfp-opt.active{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.11));
  color: rgba(232,228,220,.95);
}

/* ================================================================
   PRODUCT BAR — RFQ CTA PILL
   Visibile solo nel compact-card sticky tra 1400-1899px.
   A ≥1900px il pulsante RFQ è nel rail destro.
   ================================================================ */

/* Base: nascosto in tutti gli stati */
.pb-rfq-btn{ display: none; }

/* Compact sticky 1400-1899px: terza riga nel card */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #pb.product-bar.is-sticky .rhs .pb-rfq-btn{
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    width:           100%;
    margin-top:      9px;
    padding:         9px 10px;
    border-radius:   10px;
    border:          none;
    background:      var(--brand-yellow, #F4B532);
    color:           #111;
    font:            700 9.5px/1 "Oswald", system-ui, sans-serif;
    text-transform:  uppercase;
    letter-spacing:  .09em;
    cursor:          pointer;
    box-shadow:
      inset 0 1px rgba(255,255,255,.50),
      0 4px 10px rgba(0,0,0,.14);
    transition:
      filter  130ms ease,
      transform 100ms ease,
      box-shadow 130ms ease;
    pointer-events: auto;
  }
  #pb.product-bar.is-sticky .rhs .pb-rfq-btn:hover{
    filter:    brightness(1.07);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px rgba(255,255,255,.55),
      0 7px 16px rgba(0,0,0,.18);
  }
  #pb.product-bar.is-sticky .rhs .pb-rfq-btn:active{
    transform: translateY(0);
  }
  #pb.product-bar.is-sticky .rhs .pb-rfq-btn:focus-visible{
    outline:        2px solid rgba(0,0,0,.40);
    outline-offset: 2px;
  }
  /* Icona: proporzioni compatte */
  #pb.product-bar.is-sticky .rhs .pb-rfq-btn svg{
    flex-shrink: 0;
  }
}

/* Dark mode */
body.ds-dark #pb.product-bar.is-sticky .rhs .pb-rfq-btn{
  background: rgba(244,181,50,.86);
  box-shadow:
    inset 0 1px rgba(255,255,255,.20),
    0 4px 10px rgba(0,0,0,.30);
}
/* END — PRODUCT BAR RFQ CTA PILL */


/* SESS.24 chiusura DOPPIA LINEA BRAND desktop product-bar bottom:
   RIMOSSA dopo test utente. Implementazione "linea retta esterna" non
   si fondeva con product-bar container curvo (sticky compact). Apparizione
   "buttata lì a view top". Refactor proper tracciato in polish_backlog:
   doppia linea deve seguire il border-radius del container (es. pseudo
   internamente con border-radius matching, oppure container ad angoli
   vivi). Vedi `polish_backlog.md` voce "Doppia linea brand desktop
   container-aware". */