/* =========================================================
   PRODUCT PAGE – SKIN RAPIDA
   sezioni: Specifiche (#specs-card), Accessori (.accessories-widget),
            Photometrics (#photometrics)
   Coerenza “glass” iOS-like + brand De Sisti
   ========================================================= */

:root{
  --brand-yellow: #F4B532;
  --glass-bg: color-mix(in oklab, white 8%, transparent);
  --glass-brd: color-mix(in oklab, white 20%, transparent);
  --glass-ink: color-mix(in oklab, white 95%, black 10%);
  --card-r: 16px;
  --card-pad: clamp(14px, 2.5vmin, 20px);
  --gap: clamp(12px, 2.5vmin, 20px);
}

/* ======== SEZIONE TITOLI con “doppia linea” brand ======== */
.section-title, 
#specs-card > h2, .accessories-widget > h2, #photometrics > h2 {
  position: relative;
  font: 600 1.05rem/1.2 Oswald, system-ui, sans-serif;
  letter-spacing: .02em;
  margin: 0 0 .75rem;
  padding-left: 18px;
  color: var(--glass-ink);
}
.section-title::before,
#specs-card > h2::before,
.accessories-widget > h2::before,
#photometrics > h2::before{
  content:"";
  position:absolute; inset:auto auto 0 calc(-2px);
  width: 6px; height: 1.15em;
  background:
    linear-gradient(var(--brand-yellow), var(--brand-yellow)) left/3px 100% no-repeat,
    linear-gradient(color-mix(in oklab, var(--brand-yellow), white 55%),
                    color-mix(in oklab, var(--brand-yellow), white 55%)) right/1px 100% no-repeat;
  border-radius: 2px;
  transform: translateX(6px);
}

/* ======== CARD GLASS BASE ======== */
.glass-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--card-r);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
  color: var(--glass-ink);
}

/* ======== SPECIFICHE TECNICHE ======== */
#specs-card{
  margin-top: var(--gap);
  padding: var(--card-pad);
  border-radius: var(--card-r);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
}

#specs-card .specs-head,
#specs-card .units-toggle,
#specs-card .toolbar{
  display:flex; align-items:center; gap:10px;
  margin-bottom: .5rem;
}

/* pulsanti unità — allineati allo stile product-bar */
#specs-card [data-units]{
  appearance: none; cursor: pointer;
  font: 600 .78rem/1.1 "Oswald", var(--ds-font-sans);
  text-transform: uppercase; letter-spacing: .02em;
  padding: .34rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  color:#111;
  transition: background .2s, box-shadow .2s, transform .12s;
}
#specs-card [data-units]:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.9);
}
#specs-card [data-units][aria-pressed="true"],
#specs-card [data-units].is-active{
  background: var(--brand-yellow);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,1);
}
#specs-card [data-units]:focus-visible{
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
}

/* tabella */
#specs-card table{
  width:100%;
  border-collapse: collapse;
  font: 400 .92rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
#specs-card thead th{
  text-align:left;
  font: 600 .78rem/1 Oswald, system-ui, sans-serif;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--glass-ink), black 12%);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#specs-card tbody tr{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#specs-card td{
  padding: 10px 12px;
  vertical-align: top;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .03em;
}
#specs-card td:first-child{
  width: 34%;
  font-weight: 600;
  color: color-mix(in oklab, var(--glass-ink), black 18%);
}
@media (max-width: 780px){
  #specs-card td:first-child{ width:auto; display:block; padding-bottom:4px; }
  #specs-card td{ display:block; padding-top:0; }
}

/* ======== ACCESSORI ======== */
.accessories-widget{
  margin-top: calc(var(--gap) * 1.25);
}
.accessories-widget .acc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}
.accessories-widget .acc-card{
  padding: var(--card-pad);
  border-radius: var(--card-r);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .2s ease;
}
.accessories-widget .acc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}
.accessories-widget .acc-title{
  font: 600 .95rem/1.2 Oswald, system-ui, sans-serif;
  letter-spacing: .02em;
  margin: 0 0 4px;
}
.accessories-widget .acc-code{
  font: 600 .75rem/1 Oswald, system-ui, sans-serif;
  letter-spacing: .08em;
  color: color-mix(in oklab, var(--glass-ink), black 30%);
  margin-bottom: 8px;
}
.accessories-widget .acc-meta{
  display:flex; flex-wrap:wrap; gap:6px;
}
.accessories-widget .acc-meta .tag{
  font: 600 .68rem/1 Oswald, system-ui, sans-serif;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
}

/* ======== PHOTOMETRICS ======== */
#photometrics{
  margin-top: calc(var(--gap) * 1.25);
  padding: var(--card-pad);
  border-radius: var(--card-r);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
}
#photometrics .toolbar{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom: .75rem;
}
#photometrics .toolbar button,
#photometrics .toolbar .btn{
  appearance:none; cursor:pointer;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--brand-yellow), black 25%);
  background: color-mix(in oklab, var(--brand-yellow), white 85%);
  padding: 6px 10px;
  font: 600 .8rem/1 Oswald, system-ui, sans-serif;
}
#photometrics .toolbar [aria-pressed="true"]{
  background: color-mix(in oklab, var(--brand-yellow), white 65%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-yellow), white 70%) inset;
}
#photometrics .chart,
#photometrics canvas,
#photometrics svg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

/* ======== SPACING tra sezioni ======== */
.section-block{ margin-top: calc(var(--gap) * 1.25); }

/* ======== TWEAK MOBILE ======== */
@media (max-width: 720px){
  :root{ --card-pad: 14px; }
  .accessories-widget .acc-grid{ grid-template-columns: 1fr 1fr; }
}

/* START — MOBILE APP TABS / PRODUCT PAGE */
@media (max-width: 1399.98px){
  body.ds-vp-app{
    --ds-mobile-tabbar-h: 64px;       /* sessione 22 step 1.5a: 72→64 più snello */
    --ds-mobile-tabbar-gap: 10px;
    --ds-mobile-titlebar-h: 50px;     /* Step 2 fix: 44→50 più respiro per chip F7 (sembrava schiacciata) */
    /* +12 gap header + 44 titlebar h + 8 buffer = 64 totale spazio top occupato */
    --ds-mobile-app-top: calc(var(--ds-header-h, 66px) + var(--ds-mobile-titlebar-h) + 20px);
    overflow: hidden;
  }

  body.ds-vp-app .page-shell{
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: var(--ds-mobile-app-top);
    /* Step 1.5a fix: clearance solo per tab bar (64) + safe area + 12 margin.
       FAB usa scroll-aware: a fondo pagina è già nascosto, quindi non serve
       riservargli spazio. Scroll-guidato "tab bar incastrata sotto footer"
       rimandato (issue: spazio bianco gratuito visibile). */
    padding-bottom: calc(var(--ds-mobile-tabbar-h) + env(safe-area-inset-bottom) + 22px);
    scroll-padding-top: var(--ds-mobile-app-top);
    -webkit-overflow-scrolling: touch;
  }

  body.ds-vp-app #pb-sentinel,
  body.ds-vp-app #pb-spacer{
    display: none !important;
  }

  /* PBar originale: NASCOSTA in mobile (sostituita da title bar sticky compatta).
     Il title + range pills + badges erano duplicati in ogni tab = waste verticale. */
  body.ds-vp-app #pb{
    display: none !important;
  }

  body.ds-vp-app #product-top-grid,
  body.ds-vp-app .product-main-grid{
    /* sess.26 Tier 0: margin laterale token-driven (uniforme cross-widget mobile)
       --ds-mobile-body-px = 14px → 2× = 28px totali = 14px per lato. */
    width: min(100%, calc(100vw - 2 * var(--ds-mobile-body-px))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ds-vp-app #product-top-grid{
    margin-top: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    /* sess.26 Tier 0: gap intra-section uniforme token (hero ↔ top-right-col) */
    gap: var(--ds-mobile-gap-section) !important;
  }

  body.ds-vp-app .product-main-grid{
    display: block !important;
  }

  /* sess.24.6 REFACTOR tab → scroll: rimosso gating tab-pane mobile.
     Tutti i widget sono visibili in flow scroll continuo. Pattern Polestar
     4 / Apple Pro Display XDR / Linear: single-scroll + sticky chip-nav top
     scroll-spy + widget card surface differentiated per section identity.
     Le ex-classi .is-mobile-pane-active sono lasciate inerte (JS le applica
     ancora come stato logico per swipe-tab fallback / history pushState
     ma non hanno effetto visivo). Tutti i widget mobile sempre `display: block`.
     I `#product-top-grid` resta grid (era già). */
  body.ds-vp-app [data-mobile-pane]{
    display: block !important;
  }

  body.ds-vp-app #product-top-grid{
    display: grid !important;
  }

  body.ds-vp-app .hero{
    margin: 0 auto !important;
    padding-top: 0 !important;
  }

  body.ds-vp-app .hero .hero-card{
    width: min(100%, calc(100vw - 20px)) !important;
    margin: 0 auto !important;
  }

  /* Margin-top tra widget per section identity differentiated.
     sess.26 Tier 0: token-driven gap uniforme (--ds-mobile-gap-section).
     sess.26 Tier 0.1: .dmx-dl-col aggiunto (era escluso dalla lista →
     DMX strip si incollava a Specs come segnalato test mobile). Coppie
     legate semanticamente (DMX↔Downloads) restano a gap-section-tight
     tramite override flex gap in .dmx-dl-col (sotto). */
  body.ds-vp-app #key-features,
  body.ds-vp-app #specs-card,
  body.ds-vp-app #photometrics,
  body.ds-vp-app #dmx-widget,
  body.ds-vp-app .dmx-dl-col,
  body.ds-vp-app #accessories-widget,
  body.ds-vp-app #downloads-widget,
  body.ds-vp-app #portfolio-hero,
  body.ds-vp-app #rfq-cta{
    margin-top: var(--ds-mobile-gap-section) !important;
    scroll-margin-top: 116px;         /* header 44 + chip-nav 48 + buffer 24 = 116 */
  }

  /* sess.24.6 REFACTOR: tab bar bottom (markup #mobile-product-tabs) sostituita
     da chip-nav sticky top scroll-spy. Le regole sotto restano (position
     fixed, layout, dark mode) ma sono inerti perché override `display: none`
     più sotto le sovrascrive. JS bindMobileTabs/setActiveTab restano in
     place per back-compat ma `clearMobilePaneState` nasconde l'elemento
     comunque (host.hidden = true). */
  body.ds-vp-app .ds-mobile-tabs{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    z-index: 1100;
    height: var(--ds-mobile-tabbar-h);
    display: grid;
    /* sessione 22: 5 → 4 tab (Overview / Photometrics / Tech / Configure) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    /* Step 1.5a: bg pi solid (no glass-on-dark issue visto su footer) */
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow:
      inset 0 1px rgba(255,255,255,.92),
      0 -2px 8px rgba(0,0,0,.04),     /* light shadow top */
      0 12px 28px rgba(0,0,0,.14);
    /* Scroll-aware: nasconde su scroll-down, riapparizione su scroll-up
       (classe .is-tabs-hidden applicata da JS su body) */
    transition: transform .25s ease, opacity .25s ease;
  }

  body.ds-vp-app.is-tabs-hidden .ds-mobile-tabs{
    transform: translateY(calc(100% + env(safe-area-inset-bottom) + 12px));
    opacity: 0;
    pointer-events: none;
  }

  body.ds-vp-app .ds-mobile-tab{
    appearance: none;
    border: 0;
    min-width: 0;
    border-radius: 16px;
    padding: 6px 8px 4px;
    display: inline-flex;
    flex-direction: column;     /* sessione 22: icona top + label bottom */
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    color: rgba(18,18,18,.70);
    font: 700 .68rem/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition:
      background-color .18s ease,
      color .18s ease,
      transform .18s ease,
      box-shadow .18s ease;
  }

  body.ds-vp-app .ds-mobile-tab__icon{
    display: flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  body.ds-vp-app .ds-mobile-tab__icon svg{
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
  }

  body.ds-vp-app .ds-mobile-tab.is-active,
  body.ds-vp-app .ds-mobile-tab[aria-pressed="true"]{
    background: linear-gradient(180deg, rgba(255,209,0,.96), rgba(240,191,0,.90));
    color: #111;
    box-shadow:
      inset 0 1px rgba(255,255,255,.62),
      0 4px 12px rgba(0,0,0,.14);
  }

  body.ds-vp-app .ds-mobile-tab:active{
    transform: translateY(1px);
  }

  body.ds-vp-app .ds-mobile-tab__label{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ============================================================
     ANIMAZIONE CAMBIO TAB — cross-fade 200ms (DEPRECATED sess.24.6)
     Tab bar mobile rimossa, animation residua su .is-mobile-pane-active
     non causa danni (CSS rule self-contained). Lasciata per fallback
     swipe-tab JS preservato. Da rimuovere in pass cleanup futuro.
     ============================================================ */
  body.ds-vp-app [data-mobile-pane].is-mobile-pane-active{
    /* animation: ds-pane-fade-in 200ms ease-out; */   /* sess.24.6 disabled */
  }
  @keyframes ds-pane-fade-in{
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ============================================================
     FAB RFQ — Squircle 60×60, brand amber, sticky bottom-right
     Sopra tab bar + safe area. Visibile in Overview/Photometrics/Tech.
     Nascosto in Configure (l'utente è già nel form, niente doppia CTA).
     Sessione 22: morph verso "submit sticky" del form RFQ in Step 9.
     ============================================================ */
  body.ds-vp-app .ds-fab-rfq{
    display: inline-flex;
    position: fixed;
    right: 14px;
    /* Step 1.5a: pi distanza dalla tab bar (FAB sopra) + scroll-aware sync */
    bottom: calc(var(--ds-mobile-tabbar-h) + env(safe-area-inset-bottom) + 24px);
    z-index: 1050;
    width: 56px;             /* Step 1.5a: 60→56 meno invadente */
    height: 56px;
    border: 0;
    border-radius: 20px;     /* squircle proporzionato a 56px */
    background: linear-gradient(180deg, #F4B532, #F0BF00);
    color: #111;
    box-shadow:
      inset 0 1px rgba(255,255,255,.55),
      0 6px 16px rgba(0,0,0,.22),
      0 2px 4px rgba(0,0,0,.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      transform .18s ease,
      opacity .18s ease,
      box-shadow .18s ease;
  }

  body.ds-vp-app .ds-fab-rfq svg{
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.ds-vp-app .ds-fab-rfq:hover,
  body.ds-vp-app .ds-fab-rfq:focus-visible{
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px rgba(255,255,255,.7),
      0 10px 22px rgba(0,0,0,.26),
      0 3px 6px rgba(0,0,0,.12);
  }

  body.ds-vp-app .ds-fab-rfq:active{
    transform: translateY(1px);
  }

  /* Badge counter accessori (popolato da rfq-cart sync futuro) */
  body.ds-vp-app .ds-fab-rfq__badge{
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #111;
    color: #F4B532;
    font: 700 .68rem/18px "Oswald", system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
  }
  body.ds-vp-app .ds-fab-rfq__badge[hidden]{ display: none; }

  /* Il FAB sparisce quando il modal e' APERTO — la condizione vera.
     ⚠️ 10/09/2026: prima la regola era
         body.ds-vp-app[data-mobile-pane="configure"] .ds-fab-rfq
     cioe' «sei nel pannello configure, quindi sei nel form». Era un PROXY, e ha
     smesso di essere vero quando la sess.24.6 ha tolto il gating dei pannelli
     («tutti i widget visibili in scroll continuo»): da allora essere «nel
     pannello» voleva dire soltanto essere scrollati a una sezione.
     ⭐ E lo stato del pannello e' persistente in localStorage: dopo il primo
     tocco OGNI pagina prodotto apriva col FAB gia' spento, su ogni prodotto.
     `body.rfq-open` la mette `openPanel()` in `rfq.js`: e' la condizione che
     descrive davvero cio' che la regola vuole dire. */
  body.ds-vp-app.rfq-open .ds-fab-rfq{
    opacity: 0;
    pointer-events: none;
    transform: translateY(40px);
  }

  /* Sync FAB con scroll-aware tab bar: scende anche lui */
  body.ds-vp-app.is-tabs-hidden .ds-fab-rfq{
    transform: translateY(calc(var(--ds-mobile-tabbar-h) + 40px));
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* ============================================================
     TITLE BAR STICKY — sotto header, sempre visibile
     Sostituisce il #pb (nascosto in mobile) e il vecchio range pill
     galleggiante bottom. Mostra: F7 (title) + Range attivo (chevron)
     ============================================================ */
  body.ds-vp-app .ds-mobile-titlebar{
    position: fixed;
    /* Step 1.5a fix: gap +12 per non incastrarsi sotto bordo curvo header */
    top: calc(var(--ds-header-h, 66px) + 12px);
    left: 0;
    right: 0;
    z-index: 990;       /* sotto header (1000) ma sopra contenuto */
    height: var(--ds-mobile-titlebar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  /* Step 1.5c: title-chip identitario — replica pattern .title-chip della
     pbar desktop (testo emboss su fondino dark glass). Mobile: tag-box
     compatto 30px h, ConthraxSB grande, bg gradient dark, bordo amber. */
  body.ds-vp-app .ds-mobile-titlebar__title{
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
  }

  body.ds-vp-app .ds-mobile-titlebar__title .t-code{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-width: 44px;
    padding: 0 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1f1f1f, #0a0a0a);
    border: 1.5px solid #F4B532;
    color: #f8f8f8;
    font-family: "ConthraxSB", "Oswald", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: .06em;
    text-shadow:
      0 -1px 0 rgba(255,255,255,.35),
      0  1px 0 rgba(0,0,0,1);
    box-shadow:
      inset 0 1px rgba(255,255,255,.18),
      0 2px 6px rgba(0,0,0,.18);
  }

  /* t-range svuotato (rimosso da JS in Step 1.5c) ma elemento mantenuto
     nel markup per future estensioni — display none preventive */
  body.ds-vp-app .ds-mobile-titlebar__title em.t-range{
    display: none;
  }

  /* Chip range — Step 1.5a.2: replica fedele pattern pills originali della pbar:
     font ConthraxSB istituzionale + onda tricolore "Made in Italy" come ::after
     pseudo-element (gradient verde-bianco-rosso clipato in ellisse). NO bandierina
     iconografica (la bandiera serve a marcare il brand italiano, non la lingua). */
  body.ds-vp-app .ds-mobile-titlebar__range{
    appearance: none;
    position: relative;        /* per ::after onda tricolore */
    isolation: isolate;
    overflow: hidden;          /* clip onda tricolore al bordo */
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
    color: #111;
    border: 1.5px solid #F4B532;
    /* Font ConthraxSB istituzionale (gi caricato da pbar) */
    font-family: "ConthraxSB", "Oswald", system-ui, sans-serif;
    font-weight: 700;
    font-size: .72rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow:
      inset 0 1px rgba(255,255,255,.92),
      0 2px 6px rgba(0,0,0,.08);
    transition: background .18s ease, transform .15s ease, box-shadow .15s ease;
  }

  /* Onda tricolore "Made in Italy" — replica del pattern .pill::after delle
     pills pbar originali (product-bar.css L364-377). */
  body.ds-vp-app .ds-mobile-titlebar__range::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;
  }

  /* Label e chevron sopra l'onda */
  body.ds-vp-app .ds-mobile-titlebar__range > *{
    position: relative;
    z-index: 1;
  }

  body.ds-vp-app .ds-mobile-titlebar__range:hover,
  body.ds-vp-app .ds-mobile-titlebar__range[aria-expanded="true"]{
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,250,220,.95));
    box-shadow:
      inset 0 1px rgba(255,255,255,1),
      0 4px 10px rgba(0,0,0,.12);
  }

  body.ds-vp-app .ds-mobile-titlebar__range:active{
    transform: translateY(1px);
  }

  /* Chevron — z-index sopra onda tricolore */
  body.ds-vp-app .ds-mobile-titlebar__range .t-chevron{
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    transition: transform .18s ease;
    flex: 0 0 auto;
  }

  body.ds-vp-app .ds-mobile-titlebar__range[aria-expanded="true"] .t-chevron{
    transform: rotate(180deg);
  }

  /* Dropdown ranges: appare under il chip al tap */
  body.ds-vp-app .ds-mobile-titlebar__menu{
    position: absolute;
    top: calc(var(--ds-mobile-titlebar-h) + 4px);
    right: 14px;
    min-width: 160px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform-origin: top right;
    transform: scale(.95);
    opacity: 0;
    pointer-events: none;
    transition: transform .15s ease, opacity .15s ease;
  }

  body.ds-vp-app .ds-mobile-titlebar__menu.is-open{
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  body.ds-vp-app .ds-mobile-titlebar__menu button{
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font: 600 .85rem/1.2 "Oswald", system-ui, sans-serif;
    color: #111;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background .12s ease;
  }

  body.ds-vp-app .ds-mobile-titlebar__menu button:hover,
  body.ds-vp-app .ds-mobile-titlebar__menu button:focus-visible{
    background: rgba(255, 209, 0, .15);
  }

  body.ds-vp-app .ds-mobile-titlebar__menu button.is-active{
    background: #F4B532;
  }

  /* Sync titlebar con scroll-aware: trasla up con la tab bar */
  body.ds-vp-app.is-tabs-hidden .ds-mobile-titlebar{
    transform: translateY(calc(-1 * var(--ds-mobile-titlebar-h) - 4px));
    transition: transform .25s ease;
  }

  /* Vecchio "mobile float range pill" (#pb-float-pill): NASCOSTO in app mode
     (sostituito dalla titlebar sopra). Resta funzionante in compact >=1400px. */
  body.ds-vp-app #pb-float-pill{
    display: none !important;
  }
}
/* END — MOBILE APP TABS / PRODUCT PAGE */

/* FAB RFQ — hidden by default fuori dal regime ds-vp-app
   (la regola display: inline-flex è dentro body.ds-vp-app sopra) */
.ds-fab-rfq { display: none; }

/* MOBILE DRAWER + SUB-PANEL SETTINGS → spostato in components/mobile-drawer.css
   (sess.49 2026-06-05): ora condiviso con family/range, non piu product-only. */

/* START: RFQ CTA — align to glass widgets (neutralize custom sizing) */
.rfq-cta {
  /* Lasciare vuoto (eredita da .section .widget .card widget--glass-pro e .wrap) */
}
/* END: RFQ CTA — align to glass widgets */



/* Units Toggle */
.units-toggle { display: inline-flex; gap: .5rem; align-items: center; }
.units-chip {
  padding: .35rem .65rem;
  border: 1px solid var(--ds-border, #d0d5dd);
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1;
  background: #fff;
  cursor: pointer;
}
.units-chip.is-active {
  border-color: var(--ds-accent, #111827);
  background: var(--ds-accent-weak, #f3f4f6);
  font-weight: 600;
}
@media (max-width: 640px) {
  .units-toggle { gap: .4rem; }
  .units-chip { padding: .3rem .55rem; font-size: .8rem; }
}

/* START — DS DESIGN LAB / product layout master reset */

/* ==========================================================
   1) LAYOUT TOKENS
   ========================================================== */

:root{
  --ds-page-max-desktop: 1360px;
  --ds-page-max-wide: 1760px;

  /* top zone balance: between A and B */
  --ds-top-col-1: 1.55fr;
  --ds-top-col-2: 1fr;

  --ds-gap-desktop: 24px;
  --ds-gap-wide: 20px;
  --ds-gap-row: 28px;
  --ds-gap-mobile: 18px;
}

/* ==========================================================
   2) TOP GRID = HERO + PRODUCT INTRO
   Safe rule:
   - 1 column until there is REAL room
   - 2 columns only from 1440px
   ========================================================== */

#product-top-grid{
  width: min(100%, calc(100vw - 24px));
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-gap-mobile);
  align-items: start;
}

/* Sess.25 task #5 v5: grid radial-gradient ATMOSFERA TECH (datasheet pattern).
   Body background-image fisso. v22: widget surface-1 ora OPACHI (overlay
   alpha + solid base) → coprono il pattern → pattern visibile SOLO nelle
   zone di sfondo libero, mai sopra widget/pbar/titlebar.
   Light: nero subtle .035 · Dark: brand yellow subtle .08 · grid 26×26. */
body{
  background-image: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.075) 1px,
    transparent 1.5px
  );
  background-size: 26px 26px;
  background-attachment: fixed;
}
body.ds-dark{
  background-image: radial-gradient(
    circle at center,
    rgba(255, 209, 0, 0.08) 1px,
    transparent 1.5px
  );
}

#product-top-grid > .hero,
#product-top-grid > #ds-learnmore-taxo,
#product-top-grid > .top-right-col{
  min-width: 0;
  width: 100%;
}

/* Colonna destra: flex column a tutti i breakpoint
   – a ≥1440px è la seconda colonna del grid
   – a <1440px è un grid-item a colonna intera, centrato */
#product-top-grid .top-right-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  min-width: 0;
}

/* I figli riempiono sempre tutta la colonna destra */
#product-top-grid .top-right-col > #ds-learnmore-taxo{
  width: 100%;
  max-width: none;
  margin: 0 !important;
}
#product-top-grid .top-right-col > #key-features{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  margin-block: 0 !important;
}

/* Stacked (<1440px): stessa larghezza della hero-card per simmetria visiva */
@media (max-width: 1399.98px){
  #product-top-grid .top-right-col{
    width: min(100%, 860px);
    margin-inline: auto;
  }
}

#product-top-grid .hero{
  width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  align-self: start !important;
}

#product-top-grid .hero .hero-card{
  width: min(100%, 860px);
  margin-left: auto !important;
  margin-right: auto !important;
}

#ds-learnmore-taxo{
  width: min(100%, 760px);
  margin: 0 auto !important;
  border-radius: 22px;
  /* Surface tier 1 (sess.25 task #3 step7) — coerenza con altri widget */
  background: var(--ds-surface-1-bg);
  border: 1px solid var(--ds-surface-1-border);
  box-shadow: var(--ds-surface-1-shadow);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 22px 24px;
  align-self: start !important;
  min-height: 0 !important;
}

#ds-learnmore-taxo .ds-learnmore-copy{
  margin-bottom: 18px;
}

#ds-learnmore-taxo .ds-learnmore-copytext{
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(0,0,0,.82);
}

#ds-learnmore-taxo .ds-learnmore-row{
  display: grid;
  gap: 14px;
}

#ds-learnmore-taxo .ds-learnmore-title{
  font-family: "Oswald", system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(0,0,0,.76);
}

#ds-learnmore-taxo .ds-learnmore-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Card-button per Family / Range ─────────────────────────────────────── */
#ds-learnmore-taxo .ds-taxo-btn{
  all: unset;
  box-sizing: border-box;
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 17px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px rgba(255,255,255,.85),
    0 4px 10px rgba(0,0,0,.07);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

/* accento laterale brand (identico alle KF pills) */
#ds-learnmore-taxo .ds-taxo-btn::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ds-c-accent, #F4B532);
  border-radius: 12px 0 0 12px;
  opacity: .60;
  transition: opacity 140ms ease, width 140ms ease;
}
#ds-learnmore-taxo .ds-taxo-btn::after{
  content: "";
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 1.5px;
  background: var(--ds-brand-yellow-light, #F3E955);
  opacity: .40;
  transition: opacity 140ms ease;
}

/* hover */
#ds-learnmore-taxo .ds-taxo-btn:hover{
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.12);
  box-shadow:
    inset 0 1px rgba(255,255,255,.90),
    0 6px 16px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
#ds-learnmore-taxo .ds-taxo-btn:hover::before{ opacity: .90; }
#ds-learnmore-taxo .ds-taxo-btn:hover::after { opacity: .65; }

#ds-learnmore-taxo .ds-taxo-btn:focus-visible{
  outline: 2px solid var(--ds-c-accent, #F4B532);
  outline-offset: 2px;
}
#ds-learnmore-taxo .ds-taxo-btn:active{
  transform: translateY(0);
}

/* blocco testo interno */
#ds-learnmore-taxo .lm-taxo-inner{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#ds-learnmore-taxo .lm-taxo-kicker{
  display: block;
  font: 600 9px/1 "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ds-c-accent, #F4B532);
  opacity: .90;
}
#ds-learnmore-taxo .lm-taxo-name{
  display: block;
  font: 700 13px/1.1 "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(0,0,0,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* micro descrizione azione */
#ds-learnmore-taxo .lm-taxo-desc{
  display: block;
  font: 500 9px/1 system-ui, sans-serif;
  text-transform: none;
  letter-spacing: .02em;
  color: rgba(0,0,0,.38);
  margin-top: 3px;
}
#ds-learnmore-taxo .ds-taxo-btn:hover .lm-taxo-desc{
  color: rgba(0,0,0,.55);
}
body.ds-dark #ds-learnmore-taxo .lm-taxo-desc{
  color: rgba(218,214,206,.35);
}
body.ds-dark #ds-learnmore-taxo .ds-taxo-btn:hover .lm-taxo-desc{
  color: rgba(218,214,206,.55);
}

/* freccia */
#ds-learnmore-taxo .lm-taxo-arrow{
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: rgba(0,0,0,.35);
  transition: transform 140ms ease, color 140ms ease;
}
#ds-learnmore-taxo .ds-taxo-btn:hover .lm-taxo-arrow{
  transform: translateX(2px);
  color: rgba(0,0,0,.60);
}

/* ── Dark mode — Learn More widget (sess.25 v24)
   bg + backdrop-filter + drop shadow legacy RIMOSSI: i tokens surface-1
   sono già auto-reattivi e OPACHI dal v22 (overlay + bg base solid),
   quindi il pattern body NON traspare più attraverso il learn-more
   anche in mobile (era il vero culprit del "pattern sopra LM mobile"). */
body.ds-dark #ds-learnmore-taxo .ds-learnmore-copytext{
  color: rgba(218,214,206,.86);
}
body.ds-dark #ds-learnmore-taxo .ds-learnmore-title{
  color: rgba(200,196,188,.70);
}
body.ds-dark #ds-learnmore-taxo .ds-taxo-btn{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 4px 10px rgba(0,0,0,.24);
}
body.ds-dark #ds-learnmore-taxo .ds-taxo-btn:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 6px 16px rgba(0,0,0,.36);
}
body.ds-dark #ds-learnmore-taxo .lm-taxo-name{
  color: rgba(228,224,216,.90);
}
body.ds-dark #ds-learnmore-taxo .lm-taxo-arrow{
  color: rgba(218,214,206,.40);
}
body.ds-dark #ds-learnmore-taxo .ds-taxo-btn:hover .lm-taxo-arrow{
  color: rgba(218,214,206,.70);
}

/* ── Sticky sidebar ≥1440px ─────────────────────────────────────────────────
   La colonna destra è un pannello sticky che si ancora subito sotto la nav.
   - non va mai dietro l'header
   - NESSUNO scroll: learn-more sempre completo; KF si compatta in carousel
   - il JS legge --rc-max-h per calcolare lo spazio disponibile per KF
   - quando il grid esce dal viewport, la colonna scorre via normalmente
   ─────────────────────────────────────────────────────────────────────────── */
/* ── Sticky sidebar ≥1440px ─────────────────────────────────────────────────
   Con la product bar ora FUORI dal grid (full-width sopra), entrambe le
   colonne partono dallo stesso Y. Nessun padding-top necessario.
   La colonna destra si ancora subito sotto il nav header (la pb sticky
   è separata e sta "sopra" nel DOM — il sibling combinator CSS la gestisce).
   --rc-max-h è letto dal JS del carousel KF per sapere lo spazio disponibile.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1400px){
  /* ── Layout sticky + box della colonna destra ──────────────────────────────
     margin-top: 20px → sposta l'intera card verso il basso di 20px,
       allineando il bordo superiore con hero-card (che ha margin-top:20px
       da hero-gallery.css). Il contenuto della card (learnmore, KF) vive
       in un unico blocco visivo senza separatore.
  ─────────────────────────────────────────────────────────────────────────── */
  #product-top-grid .top-right-col{
    position:   sticky;
    top:        var(--ds-header-h, 66px);
    align-self: start;

    /* allineamento con hero-card: margin-top sposta l'intera card (bordo incluso)
       di 20px verso il basso, esattamente come hero-card margin-top:20px */
    margin-top:     20px;
    /* Surface tier 1 (sess.25 task #3 step9) — coerenza con altri widget product. */
    background:     var(--ds-surface-1-bg);
    border:    1px solid var(--ds-surface-1-border);
    border-radius:  20px;
    box-shadow:     var(--ds-surface-1-shadow);
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
    overflow:   hidden;          /* clip al border-radius */
    padding-inline: 0;           /* padding gestito dai figli */
    gap: 0;                      /* LM e KF devono essere flush dentro la card */

    /* parità altezza con hero-card: JS scrive --hero-card-h via ResizeObserver */
    min-height: var(--hero-card-h, 0px);
    /* cap: la card destra non può MAI superare l'hero — overflow:hidden clipa */
    max-height: var(--hero-card-h, none);

    /* soglia per il JS carousel KF */
    --rc-max-h: calc(100vh - var(--ds-header-h, 66px) - 16px);
  }

  /* pb sticky → colonna destra si sposta sotto (sibling combinator, zero JS) */
  #pb.is-sticky ~ #product-top-grid .top-right-col{
    top: calc(var(--ds-header-h, 66px) + var(--ds-pb-h, 80px) + 8px);
    --rc-max-h: calc(100vh - var(--ds-header-h, 66px) - var(--ds-pb-h, 80px) - 24px);
  }

  /* learnmore dentro il container card: rimuove la card doppia */
  #product-top-grid .top-right-col #ds-learnmore-taxo{
    background:        transparent !important;
    box-shadow:        none !important;
    backdrop-filter:   none !important;
    -webkit-backdrop-filter: none !important;
    border-radius:     0 !important;
    padding:           20px 20px 0 !important;  /* bottom 0: il separatore ::after gestisce il respiro */
    margin:            0 !important;
    width:             100% !important;
    max-width:         none !important;
    flex-shrink: 0;
  }
  /* Spacing interno learnmore: ottimizzato per la card compatta */
  #product-top-grid .top-right-col #ds-learnmore-taxo .ds-learnmore-copy{
    margin-bottom: 12px !important;   /* base 18px → compatto; 12px ≈ ritmo interno coerente */
  }
  #product-top-grid .top-right-col #ds-learnmore-taxo .ds-learnmore-row{
    gap: 10px !important;             /* tra "APPROFONDISCI" e i bottoni famiglia/range */
  }
  /* Separatore brand: ::after del learnmore — posizione FISSA (non dipende da KF).
     margin-top: 14px = spazio fisso dal fondo dei pulsanti alla linea.
     margin: 0 -4px allinea la linea alla larghezza del KF (LM pad 20px, KF pad 16px → delta 4px). */
  #product-top-grid .top-right-col #ds-learnmore-taxo::after{
    content: '';
    display: block;
    height: 2px;
    margin: 14px -4px 0;
    background: linear-gradient(to right, #F4B532 45%, rgba(255,209,0,.18) 100%);
    border-radius: 2px;
    flex-shrink: 0;
  }

  /* KF dentro il container card: layout compatto (il JS usa always-carousel).
     La linea superiore è ::after di #ds-learnmore-taxo (posizione FISSA).
     Il centering avviene nel .kf-rail che espande a tutta l'altezza disponibile.

     Sess.25 task #3 polish v2: padding-inline 20px matching learnmore sopra
     (risolve "trapezoidale" — KF e learnmore ora stessa width visiva).
     border-bottom-radius 18px per sagomare angoli inferiori col container
     outer (20px − 1.5px border ≈ 18). Angoli alti spigolo vivo (top: 0)
     perché il KF è incollato al separator del learnmore.

     Sess.46 step 2 punto c: aggiunto flex-shrink: 0 + min-height per
     proteggere KF carousel dallo squeeze quando learn-more body cresce
     in altezza (testo lungo). Compact range. */
  #product-top-grid .top-right-col #key-features{
    /* padding-bottom: 16px = 14px gap + 2px linea → riserva spazio per la linea inferiore assoluta */
    padding: 0 20px 16px !important;
    margin:  0 !important;
    flex: 1 1 auto;      /* prende tutto lo spazio residuo sotto la linea superiore */
    flex-shrink: 0;      /* protezione: KF non comprimibile sotto min-height */
    min-height: 120px;   /* riserva altezza per pill + hint + linea inf */
    display: flex;
    flex-direction: column;
    /* NO justify-content: il centering avviene nel .kf-rail (v. sotto) */
    overflow: hidden;
    position: relative;
    border-radius: 0 0 18px 18px;
  }

  /* Rail: espande a tutta l'altezza KF e centra il carousel al suo interno.
     In questo modo l'asse di simmetria verticale è sempre esatto, indipendentemente
     dall'altezza della card o dal numero di righe (1 o 2). */
  #product-top-grid .top-right-col #key-features .kf-rail{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centra verticalmente il .kf-list nel rail pieno */
    align-items: stretch;      /* larghezza piena per lo scroll orizzontale */
  }

  /* Padding top del list = padding bottom (6px) → le pill sono centrate nell'elemento. */
  #product-top-grid .top-right-col #key-features .kf-list.as-carousel2{
    padding-top: 6px !important;
  }

  /* Clearance frecce: simmetrica sx+dx — frecce 28px + 6px gap = 34px.
     CRITICO: USIAMO margin, NON padding. Con padding-inline:34px le colonne grid
     sono posizionate dentro il content-box (= clientWidth − padding), ma overflow:
     scroll consente al contenuto di estendersi visivamente nel padding-zone, quindi
     la 7ª colonna sarebbe parzialmente visibile a destra. Con margin invece il
     box del .kf-list è proprio più stretto → 6 colonne riempiono esattamente la
     larghezza e nessuna 7ª è visibile prima di scroll. */
  #product-top-grid .top-right-col #key-features .kf-list.as-carousel2{
    padding-left:  0 !important;
    padding-right: 0 !important;
    margin-left:  70px !important;   /* 36 base + 34 corridoio frecce */
    margin-right: 70px !important;
    scroll-padding-inline: 0 !important;
  }

  /* Fade SINISTRO — specchio del destro.
     Senza di esso le pill che scorrono da destra entrano "a crudo" nell'area
     coperta dalla freccia prev, creando lo "shift" visivo durante lo scroll. */
  #product-top-grid .top-right-col #key-features .kf-rail::before{
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to left, transparent, rgba(255,255,255,.94));
    pointer-events: none;
    z-index: 3;
  }

  /* Fade DESTRO sul carousel: suggerisce che ci sono altre pills da scrollare */
  #product-top-grid .top-right-col #key-features .kf-rail::after{
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.94));
    pointer-events: none;
    z-index: 3;
  }

  /* Nascondi h2 "Key Features" — il titolo non serve, le pills parlano da sole */
  #product-top-grid .top-right-col #key-features > h2{
    display: none !important;
  }

  /* ── Frame inferiore KF: linea FISSA a 14px dal fondo card (posizione assoluta).
     2px come la linea superiore, ma con gradiente INVERTITO (da destra) e opacità
     ridotta: crea simmetria visiva senza competere con la linea del learnmore.
     Sess.25 polish v2: left/right 20px (matching learnmore separator sopra). */
  #product-top-grid .top-right-col #key-features::after{
    content: '';
    position: absolute;
    bottom: 14px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(to left, #F4B532 45%, rgba(255,209,0,.18) 100%);
    border-radius: 2px;
  }

  /* ── Hint KF: tolto dal flusso flex → non altera più il baricentro del carousel.
     Posizione assoluta sopra la linea inferiore (bottom: 18px > linea a 14px). */
  #product-top-grid .top-right-col #key-features .kf-hint{
    position: absolute;
    bottom: 18px;
    left: 20px;
    right: 20px;
    margin-top: 0;
    text-align: center;
  }
}

/* ── sess.46 step 2 punto c: clamp font-size learn-more body in compact
   Quando il testo learn-more è lungo (es. placeholder o copy reale
   prolissi), il container .ds-learnmore-copytext cresce in altezza e
   schiaccia il KF carousel. Soluzione: clamp font-size proporzionale
   alla viewport in compact 1400-1849 + line-height ridotto. Wide ≥1850
   resta 16px (più spazio disponibile). */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #product-top-grid .top-right-col #ds-learnmore-taxo .ds-learnmore-copytext{
    /* 13.5px @ 1400 → 16px @ 1849 (scala proporzionale) */
    font-size: clamp(13.5px, 0.95vw, 16px);
    line-height: 1.55;
  }
  /* Margin-bottom ridotto sotto il body learn-more per compattare */
  #product-top-grid .top-right-col #ds-learnmore-taxo .ds-learnmore-copy{
    margin-bottom: 10px !important;  /* era 12px (sess.25), 18px default */
  }

  /* sess.46 step 3 fix (c): KF pills MENO density / PIÙ larghe.
     In compact il JS applica .kf-list.as-carousel2 (+ eventuali sub-class
     kf-single-row / kf-centered). Override --kf-col-px da 80 a 130 →
     pills più larghe e leggibili (era 14 pills × 80 troppo dense).
     IMPORTANTE: NON override grid-template-columns (resta `none` di
     as-carousel2.css:912) altrimenti la prima pill diventa auto-fill
     minmax mentre le altre seguono auto-columns → asymmetric width. */
  #product-top-grid .top-right-col #key-features .kf-list.as-carousel2,
  #product-top-grid .top-right-col #key-features .kf-list.as-carousel2.kf-single-row,
  #product-top-grid .top-right-col #key-features .kf-list.as-carousel2.kf-centered{
    --kf-col-px: 130px !important;
    grid-auto-columns: 130px !important;
  }
  /* Branch wrap-grid (rare quando lista corta): override minmax + 3-col */
  #product-top-grid .top-right-col #key-features .kf-list:not(.as-carousel2){
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
}

/* Frecce KF: visibili solo all'hover su dispositivi con puntatore reale.
   Su touch (hover:none) rimangono sempre visibili per usabilità. */
@media (min-width: 1400px) and (hover: hover){
  #product-top-grid .top-right-col #key-features .kf-rail-btn{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  #product-top-grid .top-right-col #key-features:hover .kf-rail-btn{
    opacity: 1;
    pointer-events: auto;
  }
}

/* dark mode: surface-1 tokens auto-reattivi (sess.25 task #3 step9).
   bg warm + drop shadow legacy rimossi — coerente con altri widget. */
/* dark mode: separatore brand su LM::after */
body.ds-dark #product-top-grid .top-right-col #ds-learnmore-taxo::after{
  background: linear-gradient(to right, rgba(255,209,0,.55) 45%, rgba(255,209,0,.08) 100%);
}
/* dark mode: KF stesso sfondo del card — nessuna tinta aggiuntiva */
/* dark mode: fade bilaterale del carousel */
body.ds-dark #product-top-grid .top-right-col #key-features .kf-rail::before{
  background: linear-gradient(to left,  transparent, rgba(22,20,14,.92));
}
body.ds-dark #product-top-grid .top-right-col #key-features .kf-rail::after{
  background: linear-gradient(to right, transparent, rgba(22,20,14,.92));
}
/* dark mode: frame inferiore KF — gradiente da destra, tono warm-dark */
body.ds-dark #product-top-grid .top-right-col #key-features::after{
  background: linear-gradient(to left, rgba(255,209,0,.55) 45%, rgba(255,209,0,.08) 100%);
}
/* (border-bottom separator rimosso — learnmore e KF sono un unico blocco) */

/* desktop: due colonne da 1440px in su */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #product-top-grid{
    /* width/margin gestiti dal blocco 1400-1899px sotto */
    margin-top: 16px;
    grid-template-columns: minmax(0, var(--ds-top-col-1)) minmax(0, var(--ds-top-col-2));
    gap: 20px;
    align-items: start;
  }

  /* hero card si adatta alla colonna */
  #product-top-grid .hero .hero-card{
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* right col: gap azzerato — i figli gestiscono padding propri,
     risparmiamo i 14px tra learnmore e KF per dare respiro al carousel */
  #product-top-grid .top-right-col{
    gap: 0;
  }
}

/* wide / ultrawide — layout simmetrico a due rail */
@media (min-width: 1850px){
  /* I token --ds-content-inset / --ds-content-margin sono definiti
     in right-rail.css (caricato prima) e usati qui per simmetria.
     Fallback espliciti in caso il file non sia caricato. */

  #product-top-grid{
    width: min(
      var(--ds-page-max-wide),
      calc(100vw - var(--ds-content-inset, 388px) * 2)
    );
    margin-left:  var(--ds-content-margin, calc(var(--ds-rail-lane-wide, 312px) + 76px));
    margin-right: var(--ds-content-margin, calc(var(--ds-rail-lane-wide, 312px) + 76px));
    /* Bug fix 1850-1949px: le vecchie minmax(760px, ...) + minmax(460px, ...)
       sommavano 1220px di min-width. A viewport 1850-1949 il container
       disponibile è ~1124-1197px (100vw - 2 × content-inset) → grid
       overflow del minimo, top-grid si ferma a "1950px equivalente"
       mentre il resto della pagina continua a shrink. Fix: minmax(0, ...)
       per consentire shrink fluido come product-main-grid. */
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--ds-gap-wide);
    align-items: start;
  }

  #product-top-grid .hero .hero-card{
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* colonna destra: gap resta 0 come a 1440px — LM e KF sono flush nella card */
  #product-top-grid .top-right-col{
    gap: 0;
  }

  /* learnmore wide: padding laterale leggermente più ampio, bottom=0 (il separatore ::after gestisce il respiro) */
  #product-top-grid > .top-right-col > #ds-learnmore-taxo{
    padding: 22px 22px 0 !important;
  }
}

/* ==========================================================
   3) MAIN GRID
   Order (DOM + visual):
   row 1  photometrics          (full width)
   row 2  specs (col 1-7)  |  dmx (col 8-12)
   row 3  specs (continua) |  downloads (col 8-12)
   row 4  accessories           (full width)
   row 5  portfolio             (full width)
   row 6  rfq                   (full width)
   ========================================================== */

.product-main-grid{
  width: min(100%, calc(100vw - 24px)) !important;
  margin: 18px auto 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--ds-gap-mobile) !important;
  row-gap: var(--ds-gap-mobile) !important;
  align-items: start !important;
}

.product-main-grid > section,
.product-main-grid > div{
  min-width: 0;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
}

.product-main-grid > #key-features,
.product-main-grid > #specs-card,
.product-main-grid > #photometrics,
.product-main-grid > .dmx-dl-col,
.product-main-grid > #accessories-widget,
.product-main-grid > #portfolio-hero,
.product-main-grid > #rfq-cta{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  position: relative;
}
/* Gli elementi interni al flex column mantengono il proprio width */
.dmx-dl-col > #dmx-widget,
.dmx-dl-col > #downloads-widget{
  max-width: none !important;
  margin-inline: 0 !important;
}

/* ── SPECS: reset anti-rientro (specificità superiore a specs.css) ──────────
   specs.css usa:  section#specs-card.specs-card  → (1,1,1)
   Questo selettore: .product-main-grid > section#specs-card.specs-card → (1,2,1)
   Batte specs.css e azzera width:min(...) + margin:auto che causano indentazione.
   ─────────────────────────────────────────────────────────────────────────── */
.product-main-grid > section#specs-card.specs-card{
  width: 100% !important;
  margin: 0 !important;
  --_x: 0px;            /* azzera la variabile usata nel calcolo width */
  --content-w: 100%;    /* azzera anche l'eventuale limite max-width interno */
}

/* Stessa logica per il DMX strip dentro il wrapper:
   dmx.css usa: #dmx-widget.dmx-strip → (1,1,0)
   Questo: .dmx-dl-col > #dmx-widget.dmx-strip → (1,2,0) — vince */
.dmx-dl-col > #dmx-widget.dmx-strip{
  width: 100% !important;
  margin: 0 !important;
  --_x: 0px;
  --content-w: 100%;
}

.product-main-grid > #specs-card,
.product-main-grid > #key-features,
.product-main-grid > #photometrics,
.product-main-grid > .dmx-dl-col,
.product-main-grid > #accessories-widget,
.product-main-grid > #portfolio-hero{
  margin-top: 0 !important;
}

.product-main-grid > #key-features{
  padding-top: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* desktop wide only:
   2 colonne vere solo da 1920px in su */
@media (min-width: 1850px){
  .product-main-grid{
    width: min(var(--ds-page-max-wide), calc(100vw - 88px)) !important;
    margin-top: 18px !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    gap: 22px !important;
    row-gap: 24px !important;
  }

  /* #key-features nel main-grid non compare a wide: è nel top-right-col */
  .product-main-grid > #key-features{
    display: none !important;
  }

  /* row 1 — photometrics full-width */
  .product-main-grid > #photometrics{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* row 2-3 — specs 67% (col 1-9), spanna entrambe le righe */
  .product-main-grid > #specs-card{
    grid-column: 1 / 9 !important;
    grid-row: 2 / 4 !important;
    align-self: stretch !important;
    margin: 0 !important;          /* annulla margin: 28px auto da specs.css */
    width: 100% !important;        /* annulla width: min(...) da specs.css */
    --_x: 0px;                     /* azzera la variabile interna di specs.css */
  }

  /* col destra (rows 2-3) — flex column che cresce fino al bottom di Specs */
  .product-main-grid > .dmx-dl-col{
    grid-column: 9 / -1 !important;
    grid-row: 2 / 4 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;       /* stesso row-gap del grid */
  }
  /* DMX strip: fix nell'angolo in alto del wrapper, zero margini */
  .product-main-grid > .dmx-dl-col > #dmx-widget{
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 100% !important;
    margin: 0 !important;       /* reset deciso: nessun offset top */
    align-self: flex-start !important;
    --_x: 0px;                  /* azzera variabile interna larghezza dmx-strip */
  }
  /* Downloads: riempie il resto del flex column (align con bottom di Specs) */
  .product-main-grid > .dmx-dl-col > #downloads-widget{
    flex: 1 1 0% !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;       /* reset margin: 28px auto da downloads.css */
    align-self: stretch !important;
  }
  /* dl-body scrollable se Downloads è costretto in altezza fissa */
  .product-main-grid > .dmx-dl-col > #downloads-widget .dl-body{
    overflow-y: auto;
    min-height: 0;
  }

  /* row 4 — accessories */
  .product-main-grid > #accessories-widget{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin-top: 4px !important;
  }

  /* row 5 — portfolio */
  .product-main-grid > #portfolio-hero{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    margin: 0 !important;
  }

  /* row 6 — rfq */
  .product-main-grid > #rfq-cta{
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
    margin-top: 4px !important;
  }
}
/* wide / ultrawide — simmetrico al top-grid (allineato su 1900px) */
@media (min-width: 1850px){
  .product-main-grid{
    width: min(
      var(--ds-page-max-wide),
      calc(100vw - var(--ds-content-inset, 388px) * 2)
    ) !important;
    margin-left:  var(--ds-content-margin, calc(var(--ds-rail-lane-wide, 312px) + 76px)) !important;
    margin-right: var(--ds-content-margin, calc(var(--ds-rail-lane-wide, 312px) + 76px)) !important;
    gap: 22px !important;
    row-gap: 24px !important;
  }
}

/* ── pb-wrap allineato al grid (pb ora full-width sopra il grid) ─────────────
   Il pb è uscito dal grid ed è diventato full-width: il suo contenitore
   interno (pb-wrap) deve usare gli stessi margini del grid per rimanere
   allineato visivamente con la colonna hero e la colonna destra.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #pb.product-bar .pb-wrap{
    width:        auto;
    max-width:    none;
    margin-left:  var(--ds-rail-lane-wide, 228px);
    /* sess.46: margin-right ricalcolato per fare spazio al rail dx
       visibile da ≥1400. Gap 32px tra content e rail dx (in wide è 76px,
       in compact più stretto). Era rail-left 24px solo. */
    margin-right: calc(var(--ds-rail-lane-wide, 228px) + 32px);
  }
}
@media (min-width: 1850px){
  #pb.product-bar .pb-wrap{
    width:        auto;
    max-width:    none;
    margin-left:  var(--ds-content-margin, calc(var(--ds-rail-lane-wide, 312px) + 76px));
    margin-right: var(--ds-content-margin, calc(var(--ds-rail-lane-wide, 312px) + 76px));
  }
}

/* ── Rail-sx alignment 1400-1899px ───────────────────────────────────
   A questi breakpoint il pallino + la pb-card sticky occupano la rail
   virtuale sinistra (larghezza = --ds-rail-lane-wide, definita in
   header.css a ≥1400px). Il contenuto viene spostato a destra della
   rail per non scorrere sotto la card.
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #product-top-grid{
    /* sess.46: width ricalcolata sottraendo ENTRAMBE le rail (sx + dx) +
       gap 32px dal rail dx per evitare overlap (content right invadeva
       rail dx left di ~19px senza gap). margin-left resta solo
       rail-lane-wide perché il rail sx pill termina esattamente a
       quel pixel (pill width ≈ rail-lane-wide - rail-left, adjacent al
       content). A 1400 con rail=228: 920px content. A 1849 con rail=266:
       1285px (capped 1440 non scatta). */
    width: min(
      calc(100vw - var(--ds-rail-lane-wide, 228px) * 2 - 32px),
      1440px
    );
    margin-left:  var(--ds-rail-lane-wide, 228px);
    margin-right: calc(var(--ds-rail-lane-wide, 228px) + 32px);
  }
  .product-main-grid{
    /* sess.46: come sopra. Simmetria con gap rail dx. */
    width: calc(100vw - var(--ds-rail-lane-wide, 228px) * 2 - 32px) !important;
    margin-left:  var(--ds-rail-lane-wide, 228px) !important;
    margin-right: calc(var(--ds-rail-lane-wide, 228px) + 32px) !important;
  }

  /* sess.47b — ritmo gap widget: il wide (≥1850) rende .dmx-dl-col flex + gap e
     azzera il margin:28px di downloads, ma il compact NO → downloads teneva
     margin 28 → gap dmx→downloads 28 e downloads→accessori 46 (vs 18 altrove).
     Allineo il compact: col flex con gap = row-gap del grid + margin downloads 0. */
  .product-main-grid > .dmx-dl-col{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .product-main-grid > .dmx-dl-col > #downloads-widget.downloads-card{
    margin: 0 !important;
  }
}

/* below desktop-safe threshold:
   everything stays 1 column */
@media (max-width: 1399.98px){
  #product-top-grid{
    margin-top: 18px !important;
  }

  .product-main-grid{
    margin-top: 18px !important;
    row-gap: 18px !important;
  }

  .product-main-grid > #key-features,
  .product-main-grid > #specs-card,
  .product-main-grid > #photometrics,
  .product-main-grid > .dmx-dl-col,
  .product-main-grid > #accessories-widget,
  .product-main-grid > #portfolio-hero,
  .product-main-grid > #rfq-cta{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  /* i figli del wrapper escono dallo stack normale in mobile */
  .dmx-dl-col{
    display: contents; /* dissolve il wrapper: i figli tornano direct children del flusso */
  }
}

/* END — DS DESIGN LAB / product layout master reset */

/* ─── Modal button fix (moved from ds-tokens) ─── */
.ds-modal-btn{
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 8px 14px;
}
/* .ds-learnmore-actions buttons sono ora .ds-taxo-btn — stile dedicato sopra */


/* ================================================================
   DS HERO ZONE — 2-column layout (DEFERRED)
   The .ds-hero-zone wrapper exists in the HTML but the 2-col grid
   is not activated. Product bar stays full-width at top (default).
   ================================================================ */
.ds-hero-zone {
  /* transparent wrapper — no layout change */
}

/* END: DS HERO ZONE — 2-column layout (deferred — not active) */

/* ================================================================
   STICKY BAR — scroll clearance
   html scroll-padding-top: accounts for the sticky product bar height
   (--ds-pb-h is set live by JS; 0px when bar is not sticky).
   scroll-margin-top on product sections ensures scrollIntoView()
   and hash-navigation never land behind the sticky bar.
   Not applied on mobile app mode (page-shell is the scroll root there,
   scroll-padding-top already set in the mobile-tabs block above).
   ================================================================ */
/* Mobile-app mode scrolls via .page-shell (not html), which already has
   scroll-padding-top set. For all other viewports html is the scroll root. */
html{
  scroll-padding-top: var(--ds-pb-h, 0px);
}

#key-features,
#specs-card,
#photometrics,
#dmx-widget,
#downloads-widget,
#accessories-widget,
#portfolio-hero,
#rfq-cta{
  scroll-margin-top: calc(var(--ds-pb-h, 0px) + 8px);
}

/* ================================================================
   UNIFORM SECTION CARD — Surface tier 1 (sess.25 task #3 step6)
   Pattern Linear: bordo rgba sottile + microelevation soft, no
   backdrop-filter blur, no drop shadow legacy. Auto-reattivo
   light/dark via tokens (--ds-surface-1-*).
   Width / margin restano gestiti dal product-main-grid.
   Accent bars (sx/dx) gestiti da regole "ACCENT BARS" più sotto.
   ================================================================ */
#photometrics,
#specs-card,
#dmx-widget,
#downloads-widget,
#accessories-widget,
#rfq-cta{
  border-radius: 22px !important;
  background: var(--ds-surface-1-bg) !important;
  border: 1px solid var(--ds-surface-1-border) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  /* box-shadow è settato dalle regole ACCENT BARS sottostanti
     che combinano accent + var(--ds-surface-1-shadow). */
}
/* END — UNIFORM SECTION CARD */

/* ================================================================
   ACCENT BARS — "palcoscenico" effect
   Vertical amber stripe on section containers via inset box-shadow.
   Default (1-col / <1900px): left bar on every section.
   ≥1900px layout-aware:
     • Full-width rows (photometrics, accessories): left + right
     • Left column (specs): left only
     • Right column (dmx, downloads): right only
   ================================================================ */

/* Regola design (valida a TUTTI i breakpoint):
   - Logical full-row (photometrics, accessories, portfolio-hero, rfq) → sx + dx
   - Logical left col   (specs)                                         → solo sx
   - Logical right col  (dmx, downloads)                                → solo dx
   La distinzione è semantica/logica: anche a 1-col specs resta "left col". */

/* Sess.25 task #3: accent bars (design rule full-row/left/right) +
   surface tier system (Linear pattern microelevation). Drop shadow
   legacy 18px 36px sostituita da var(--ds-surface-1-shadow). Border
   sottile inset rgba(255,255,255,.10) mantenuto per definizione,
   ma in futuro sostituibile da var(--ds-surface-1-border). */

/* Logical full-row → sx + dx */
#photometrics,
#accessories-widget,
.portfolio-hero,
#rfq-cta{
  box-shadow:
    inset  3px 0 0 rgba(244,181,50,.48),
    inset -3px 0 0 rgba(244,181,50,.48),
    inset 0 0 0 1px rgba(0,0,0,.06),
    var(--ds-surface-1-shadow) !important;
}
/* Logical left col → solo sx */
#specs-card{
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.48),
    inset 0 0 0 1px rgba(0,0,0,.06),
    var(--ds-surface-1-shadow) !important;
}
/* Logical right col → solo dx */
#dmx-widget,
#downloads-widget{
  box-shadow:
    inset -3px 0 0 rgba(244,181,50,.48),
    inset 0 0 0 1px rgba(0,0,0,.06),
    var(--ds-surface-1-shadow) !important;
}

/* Dark mode — stesso pattern, accent alpha .32 e inset border bianco */
body.ds-dark #photometrics,
body.ds-dark #accessories-widget,
body.ds-dark .portfolio-hero,
body.ds-dark #rfq-cta{
  box-shadow:
    inset  3px 0 0 rgba(244,181,50,.32),
    inset -3px 0 0 rgba(244,181,50,.32),
    inset 0 0 0 1px rgba(255,255,255,.10),
    var(--ds-surface-1-shadow) !important;
}
body.ds-dark #specs-card{
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.32),
    inset 0 0 0 1px rgba(255,255,255,.10),
    var(--ds-surface-1-shadow) !important;
}
body.ds-dark #dmx-widget,
body.ds-dark #downloads-widget{
  box-shadow:
    inset -3px 0 0 rgba(244,181,50,.32),
    inset 0 0 0 1px rgba(255,255,255,.10),
    var(--ds-surface-1-shadow) !important;
}

/* ── Compact 1400-1849.98: widget in colonna singola → bordi sx + dx ──
   sess.46 step 2 decisione utente: in compact 1400-1849 i widget
   Downloads e DMX sono full-row (colonna singola) → bordo ambra su
   ENTRAMBI i lati. Wide ≥1850 mantiene solo dx (riga 2278+).
   Deviazione cosciente dalla memo feedback_accent_borders_logical
   ("right col → solo dx anche a 1-col"): l'utente ha mente il rail dx
   visibile a 1400-1849 che chiude visivamente il frame → simmetria
   sx+dx è coerente con quel framing. Mobile + compact-narrow restano
   solo dx (regola base attiva). */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #dmx-widget,
  #downloads-widget{
    box-shadow:
      inset  3px 0 0 rgba(244,181,50,.48),
      inset -3px 0 0 rgba(244,181,50,.48),
      inset 0 0 0 1px rgba(0,0,0,.06),
      var(--ds-surface-1-shadow) !important;
  }
  body.ds-dark #dmx-widget,
  body.ds-dark #downloads-widget{
    box-shadow:
      inset  3px 0 0 rgba(244,181,50,.32),
      inset -3px 0 0 rgba(244,181,50,.32),
      inset 0 0 0 1px rgba(255,255,255,.10),
      var(--ds-surface-1-shadow) !important;
  }

  /* sess.46 step 3 fix (d): Downloads widget width allineata agli altri.
     Default downloads.css:10 → width: min(1204, 100% - 2×32) → a 1440
     compact main-grid 952 → effettivo 888 (64px stretto rispetto a DMX/
     Specs/etc che usano full main-grid width). Override gutter --_x: 0
     per fare width 100% del main-grid (952 a 1440). Wide ≥1850
     unchanged (gutter --_x: 32 default OK perché downloads ha il suo
     contenitore .dmx-dl-col stretto). */
  .product-main-grid > .dmx-dl-col > #downloads-widget,
  .product-main-grid > #downloads-widget,
  #downloads-widget{
    --_x: 0px;
  }
}

/* ≥1900px — layout-aware overrides */
@media (min-width: 1850px){
  /* Full-width: both bars — surface tier microelevation */
  .product-main-grid > #photometrics,
  .product-main-grid > #accessories-widget,
  .product-main-grid > #portfolio-hero,
  .product-main-grid > #rfq-cta{
    box-shadow:
      inset  3px 0 0 rgba(244,181,50,.48),
      inset -3px 0 0 rgba(244,181,50,.48),
      inset 0 0 0 1px rgba(0,0,0,.06),
      var(--ds-surface-1-shadow) !important;
  }
  body.ds-dark .product-main-grid > #photometrics,
  body.ds-dark .product-main-grid > #accessories-widget,
  body.ds-dark .product-main-grid > #portfolio-hero,
  body.ds-dark .product-main-grid > #rfq-cta{
    box-shadow:
      inset  3px 0 0 rgba(244,181,50,.32),
      inset -3px 0 0 rgba(244,181,50,.32),
      inset 0 0 0 1px rgba(255,255,255,.10),
      var(--ds-surface-1-shadow) !important;
  }
  /* Right column: right bar only (DMX strip + Downloads, ora dentro .dmx-dl-col) */
  #dmx-widget.dmx-strip{
    box-shadow:
      inset -3px 0 0 rgba(244,181,50,.48),
      inset 0 0 0 1px rgba(0,0,0,.06),
      var(--ds-surface-1-shadow) !important;
  }
  .product-main-grid > .dmx-dl-col > #downloads-widget{
    box-shadow:
      inset -3px 0 0 rgba(244,181,50,.48),
      inset 0 0 0 1px rgba(0,0,0,.06),
      var(--ds-surface-1-shadow) !important;
  }
  body.ds-dark #dmx-widget.dmx-strip{
    box-shadow:
      inset -3px 0 0 rgba(244,181,50,.32),
      inset 0 0 0 1px rgba(255,255,255,.10),
      var(--ds-surface-1-shadow) !important;
  }
  body.ds-dark .product-main-grid > .dmx-dl-col > #downloads-widget{
    box-shadow:
      inset -3px 0 0 rgba(244,181,50,.32),
      inset 0 0 0 1px rgba(255,255,255,.10),
      var(--ds-surface-1-shadow) !important;
  }
  /* Left column (specs): left bar — inherited from default, no override needed */
}
/* END — ACCENT BARS */

/* Mobile app: pane-based navigation doesn't use browser scroll anchoring */
body.ds-vp-app #key-features,
body.ds-vp-app #specs-card,
body.ds-vp-app #photometrics,
body.ds-vp-app #dmx-widget,
body.ds-vp-app #downloads-widget,
body.ds-vp-app #accessories-widget,
body.ds-vp-app #portfolio-hero,
body.ds-vp-app #rfq-cta{
  scroll-margin-top: 0;
}

/* ================================================================
   FOOTER RFQ BAND — DISABILITATO 03/05/2026
   Decisione: il rail dx ha già CTA Configura sempre visibile. Duplicare
   in fondo pagina = ridondante e pressante per B2B di servizio. La sezione
   #rfq-cta è display:none a >=1900 (vedi right-rail.css ~615).
   In attesa feedback team — se decidono di reintrodurla, gli stili sotto
   sono il punto di partenza già pronto.
   ================================================================ */
@media (min-width: 1850px) and (max-width: 1px){  /* MQ disabilitata */
  /* Annulla TUTTI gli stili widget glass su #rfq-cta wide */
  .product-main-grid > #rfq-cta{
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 24px !important;
    /* separator brand: linea gradient da sx a trasparente, full-width */
    border-top: 0;
    background-image: linear-gradient(to right,
      rgba(244,181,50,.55) 0%,
      rgba(244,181,50,.55) 38%,
      rgba(244,181,50,.10) 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 2px !important;
    background-position: 0 0 !important;
  }
  /* Card interna: trasparente, layout flex band */
  .product-main-grid > #rfq-cta .rfq-card{
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 18px 4px 4px !important;
  }
  .product-main-grid > #rfq-cta .widget-content,
  .product-main-grid > #rfq-cta .rfq-wrap{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .product-main-grid > #rfq-cta .rfq-text{
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Tipografia compressa */
  .product-main-grid > #rfq-cta .widget-title{
    font-family: "Oswald", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,.78) !important;
    margin: 0 !important;
    padding: 0 !important;
    /* niente accent bar titolo qui — è footer, non widget */
  }
  .product-main-grid > #rfq-cta .widget-title::before{ display: none !important; }
  .product-main-grid > #rfq-cta .rfq-sub{
    font-size: .80rem !important;
    line-height: 1.4 !important;
    color: rgba(0,0,0,.50) !important;
    margin: 4px 0 0 !important;
    max-width: 60ch;
  }
  /* CTA: brand giallo standard, dimensioni discrete */
  .product-main-grid > #rfq-cta .rfq-btn{
    flex-shrink: 0;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #F4B532 !important;
    color: rgba(0,0,0,.88) !important;
    border: 1px solid #C9A800 !important;
    font: 600 .78rem/1 "Oswald", system-ui, sans-serif !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(201,168,0,.28), inset 0 1px 0 rgba(255,255,255,.55) !important;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
  }
  .product-main-grid > #rfq-cta .rfq-btn:hover{
    transform: translateY(-1px) !important;
    background: #ffe032 !important;
    box-shadow: 0 8px 18px rgba(201,168,0,.40), inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  /* Dark mode */
  body.ds-dark .product-main-grid > #rfq-cta{
    background-image: linear-gradient(to right,
      rgba(255,209,0,.55) 0%,
      rgba(255,209,0,.55) 38%,
      rgba(255,209,0,.08) 100%) !important;
  }
  body.ds-dark .product-main-grid > #rfq-cta .widget-title{ color: rgba(232,230,224,.86) !important; }
  body.ds-dark .product-main-grid > #rfq-cta .rfq-sub{ color: rgba(218,216,210,.50) !important; }
}
/* END — FOOTER RFQ BAND */
/* ═══ 12/09/2026 — IL LOGOTIPO NELLA TITLEBAR MOBILE ═══════════════════════
   Il chip `.t-code` della titlebar mobile puo' contenere il LOGOTIPO del
   prodotto invece del codice: oggi succede per il Piccoletto, che sulla placca
   fisica porta il nome nella calligrafia di Mario De Sisti.
   L'altezza segue il corpo del testo che sostituisce (come il chip desktop),
   cosi' la placca resta proporzionata sia in verticale (40px) sia in
   orizzontale (32px) senza misure fisse da tenere allineate a mano.
   `.ds-sr-only` tiene il nome leggibile agli screen reader. */
body.ds-vp-app .ds-mobile-titlebar__title .t-code .ds-mt-wordmark{
  display: block;
  height: 1.4em;
  width: auto;
  object-fit: contain;
}
body.ds-vp-app .ds-mobile-titlebar__title .t-code .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;
}