/* ⛔ L'@import a Google Fonts era l'ULTIMO filo verso la rete, e il piu'
   nascosto: non un <link> in pagina ma la PRIMA RIGA di un CSS di componente.
   Tolti i 23 <link> dalle pagine, le richieste continuavano ad arrivare — e
   nessuna pagina le chiedeva piu'. ⚠️ Un @import in cima a un CSS non si vede
   leggendo l'HTML, e non lo trova chi cerca «script esterni».
   Oswald e' locale in ds-base.css dal 29/08: questa riga non serviva. */

:root {
  --ds-font-sans: 'Oswald', system-ui, sans-serif;
}


/* START: RFQ modal visibility + layout (header-safe + single scroll) */
/* rfq.js usa body.rfq-open, non body.modal-open */
html.rfq-open,
body.rfq-open { overflow: hidden; }
/* backward compat se mai rimane */
body.modal-open { overflow: hidden; }
/* END: RFQ modal visibility + layout (header-safe + single scroll) */

/* START: RFQ UI chips and states */
.chip.disabled { opacity:.45; cursor:not-allowed; text-decoration: line-through; }
.rfq-note { font-size:12px; opacity:.8; margin:8px 0 0; }
/* sess.35 follow-up: trigger DSDropdown range — desktop default hidden,
   mostrato solo nel @media mobile (linea ~37). */
.rfq-range-mobile-trigger{ display: none; }
/* sess.35 follow-up font: range è elemento brand identitario (regola brand
   ConthraxSB per range pills/codici prodotto/valori tecnici) — override
   font default DSDropdown da Oswald a ConthraxSB. Specificity matcha
   body.ds-vp-app .ds-dropdown-trigger (0,2,1) di ds-dropdown.css con
   body.ds-vp-app .rfq-range-mobile-trigger.ds-dropdown-trigger (0,3,1).
   Wrappato in @media mobile per coerenza scope DSDropdown (mobile-only). */
@media (max-width: 1399.98px){
  body.ds-vp-app .rfq-range-mobile-trigger.ds-dropdown-trigger{
    font-family: "ConthraxSB", "Oswald", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .05em;
  }
}
/* END: RFQ UI chips and states */




/* START: RFQ section finish align */
/* La section eredita già glass/padding dal tema; qui solo micro-regole locali */
.rfq-cta .rfq-text strong{ font-size: 1.125rem; font-weight: 700; display:block; }
.rfq-cta .rfq-text span{ opacity:.8; }

/* Bottone in linea con gli altri: usiamo radius e peso già in tema, qui solo dimensioni */
/* START: RFQ CTA button sizing (brand button inherited) */
.rfq-btn{ border-radius: 999px; padding: 12px 18px; font-weight: 600; }
@media (max-width: 767.98px){ .rfq-btn{ width:100%; } }

/* sess.35 follow-up candidate (f): RFQ range mobile — <select> native iOS
   sostituito da DSDropdown brand-coerente (panel dark glass + pill list).
   Hide il <select> sopra cui tap apre OS picker wheel, mostra il trigger
   button .rfq-range-mobile-trigger sibling injectato da ensureRangeSelect.
   Sync state preservato via listener change esistente. */
@media (max-width: 1399.98px){
  body.ds-vp-app #rfq-modal #rfq-range{
    display: none !important;
  }
  body.ds-vp-app #rfq-modal .rfq-range-mobile-trigger{
    display: inline-flex;
  }
}

/* sess.36 cleanup: rimosse regole #rfq-range pill estetica brand (height/
   padding/border/gradient bg/chevron SVG/focus/active/dark variant) — post
   refactor sess.35 candidate (f) il <select> è hidden mobile (display:none
   !important @media sopra linea 56-58) + sostituito da DSDropdown trigger
   .rfq-range-mobile-trigger (styling base ds-dropdown.css + override
   ConthraxSB linee 28-34). La <label for="rfq-range"> è hardcoded in
   product-f7.html e rimane visibile sopra il trigger DSDropdown — styling
   label preservato. */
@media (max-width: 1399.98px){
  /* Label "Range" sopra il pill — meno verbose mobile */
  body.ds-vp-app #rfq-modal label[for="rfq-range"]{
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(0,0,0,.55);
    margin-bottom: 4px;
  }
  body.ds-dark.ds-vp-app #rfq-modal label[for="rfq-range"]{
    color: rgba(218,214,206,.55);
  }
}
/* END: RFQ CTA button sizing (brand button inherited) */

/* START: MODAL POLISH (coerente con header-safe + single scroll) */
/* sess.47b — transizione fade+scale (era display:none↔flex secco). L'overlay è
   SEMPRE fixed; mostrato/nascosto via opacity+visibility su aria-hidden, così
   può animare. Allinea l'RFQ alla famiglia "buona" (photometrics/specs). */
.rfq-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  /* sess.33 Step 4b/4d — z-index parity photometrics/specs/dmx full-screen (9000+):
     modal copre header (4000) + titlebar (z-990) come pattern modali fullscreen
     site-wide. !important defensive vs stacking context (es. backdrop-filter body wrapper). */
  z-index: 9001 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.rfq-modal[aria-hidden="false"],
.rfq-modal.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}
.rfq-dialog{
  transform: scale(.96);
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.rfq-modal[aria-hidden="false"] .rfq-dialog,
.rfq-modal.open .rfq-dialog{
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce){
  .rfq-modal, .rfq-dialog{ transition: none; }
}

/* sess.33 Step 4d — Nasconde header + titlebar mobile durante RFQ modal aperto.
   Pattern parity body.dmx-modal-open + photometrics-maximize-open.
   rfq.js già setta body.rfq-open all'apertura/chiusura → CSS-only handler. */
@media (max-width: 1399.98px){
  body.rfq-open #site-header,
  body.rfq-open .ds-mobile-titlebar{
    display: none !important;
  }

  /* sess.33 Step 4e — .rfq-close pattern famiglia 4 icon button neutral
     (parity .kfm-close / .ph-modal-close / .dmx-modal-close): 44×44 round + glass */
  body.ds-vp-app .rfq-close{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.10);
    color: rgba(0,0,0,.78);
    display: grid;
    place-items: center;
    font-size: 20px;
    right: 14px;
    top: 14px;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
  }
  body.ds-dark.ds-vp-app .rfq-close{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
  }
  body.ds-vp-app .rfq-close:active{
    transform: scale(.94);
  }

  /* sess.33 Step 4e — .btn.ghost ANNULLA pattern outline gold ambra
     (parity .specs-extend-cta / .dl-filter .pill non-attive / .acc-filter-pill) */
  body.ds-vp-app #rfq-modal .rfq-actions .btn.ghost{
    background: transparent;
    border-color: rgba(244,181,50,.45);
    color: rgba(0,0,0,.78);
  }
  body.ds-vp-app #rfq-modal .rfq-actions .btn.ghost:active{
    background: rgba(244,181,50,.12);
  }
  body.ds-dark.ds-vp-app #rfq-modal .rfq-actions .btn.ghost{
    background: transparent;
    border-color: rgba(244,181,50,.45);
    color: rgba(255,255,255,.88);
  }
}

  /* sess.33 Step 4g Fix 3 — Required hint full-width SOPRA pulsanti su mobile.
     Era inline a sx → cropped fuori viewport (vedi screenshot utente: "OMPLETE
     EQUIRED ELECTIONS..." tagliato). Pattern: wrap actions + hint order:-1 row 1. */
  body.ds-vp-app #rfq-modal .rfq-actions{
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.ds-vp-app #rfq-modal .rfq-actions #rfq-required-hint{
    order: -1;
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(244,181,50,.10);
    border: 1px solid rgba(244,181,50,.30);
    color: rgba(0,0,0,.78);
    font: 600 11px/1.35 "Oswald", system-ui, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    justify-content: center;
    white-space: normal;
  }
  body.ds-dark.ds-vp-app #rfq-modal .rfq-actions #rfq-required-hint{
    background: rgba(244,181,50,.12);
    border-color: rgba(244,181,50,.35);
    color: rgba(228,224,216,.85);
  }

  /* sess.33 Step 4f — Qtà input + label più visibili mobile (utente: "casella
     piccolo, numero poco leggibile"). Pattern parity .rfq-input ma compatto
     pill style per coerenza estetica con altri pulsanti modal. */
  body.ds-vp-app .rfq-qty-holder{
    gap: 10px !important;
  }
  body.ds-vp-app .rfq-qty-label{
    font: 700 .80rem/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(0,0,0,.78);
    opacity: 1;
  }
  body.ds-dark.ds-vp-app .rfq-qty-label{
    color: rgba(255,255,255,.88);
  }
  body.ds-vp-app .rfq-qty{
    width: 72px;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(244,181,50,.45);
    background: rgba(255,255,255,.95);
    color: #111;
    font: 800 1.05rem/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .02em;
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,.55);
    -moz-appearance: textfield;     /* nascondi spinner Firefox */
  }
  body.ds-vp-app .rfq-qty::-webkit-outer-spin-button,
  body.ds-vp-app .rfq-qty::-webkit-inner-spin-button{
    -webkit-appearance: none;        /* nascondi spinner WebKit (iOS Safari) */
    margin: 0;
  }
  body.ds-vp-app .rfq-qty:focus{
    outline: none;
    border-color: rgba(244,181,50,.85);
    box-shadow:
      inset 0 1px rgba(255,255,255,.55),
      0 0 0 3px rgba(255,209,0,.25);
  }
  body.ds-dark.ds-vp-app .rfq-qty{
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.95);
    border-color: rgba(244,181,50,.45);
  }
}

@media (hover: hover) and (max-width: 1099.98px){
  body.ds-vp-app .rfq-close:hover{
    background: rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.18);
  }
  body.ds-dark.ds-vp-app .rfq-close:hover{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
  }
  body.ds-vp-app #rfq-modal .rfq-actions .btn.ghost:hover{
    background: rgba(244,181,50,.16);
    border-color: rgba(244,181,50,.65);
  }
}

.rfq-close{ position:absolute; right:14px; top:12px; font-size:22px; line-height:1; background:transparent; border:0; cursor:pointer; }
/* END: MODAL POLISH (coerente con header-safe + single scroll) */

.rfq-field{ display:grid; gap:8px; margin:14px 0; }
.rfq-label{ font-weight:600; font-size:14px; }
.rfq-input{
  width:100%; border:1px solid rgba(0,0,0,.15); border-radius: 12px;
  padding:10px 12px; background:#fff;
}
.rfq-input:focus{ outline:2px solid var(--accent, #111); outline-offset:0; }
.rfq-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; }

/* --- CHIP STATES --- */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border-radius:999px; border:1px solid rgba(0,0,0,.15);
  background:#fff; color:#222; cursor:pointer; font:inherit; transition:.15s ease;
}
@media (hover: hover){ .chip:hover{ box-shadow: 0 1px 0 rgba(0,0,0,.06); } }
.chip.active{ background: var(--accent, #111); color:#fff; border-color: transparent; }
/* Prima erano barrate/grigie: ora sono “ghost” ma CLICCABILI per richiedere CUSTOM */
.chip.incompatible{
  opacity:.7; border-style:dashed; border-color: var(--accent, #111);
  position: relative;
}
.chip.incompatible::after{
  content: attr(data-custom-hint); /* i18n via JS: rfq.extras.customHint */
  font-size: 11px; font-weight:600;
  background: #fff; color: var(--accent, #111);
  border:1px dashed var(--accent, #111);
  padding:2px 6px; border-radius: 999px;
  margin-left: 6px;
}
.chip.custom{ border-style:dashed; border-color: var(--accent, #111); }
/* END: RFQ section finish align */
/* START: RFQ CCT layout */
#rfq-cct .chip{ margin-right: 6px; margin-bottom: 6px; }
/* quando diventa select, eredità già le regole .rfq-input */
#rfq-cct-select{ min-width: 200px; }
/* END: RFQ CCT layout */

/* START: RFQ – specificity boost to match other widgets */
section#rfq-cta.widget.widget--glass-pro .rfq-wrap{
  max-width: var(--page-max, 1200px);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
section#rfq-cta.widget.widget--glass-pro .rfq-text strong{ font-size: 1.125rem; font-weight: 700; display:block; }
section#rfq-cta.widget.widget--glass-pro .rfq-text span{ opacity:.8; }

/* bottone coerente con i bottoni unificati */
section#rfq-cta.widget.widget--glass-pro .rfq-btn{
  border-radius: 999px; padding: 12px 18px; font-weight: 600;
}
@media (max-width: 767.98px){
  section#rfq-cta.widget.widget--glass-pro .rfq-btn{ width: 100%; }
}
/* END: RFQ – specificity boost to match other widgets */

/* START: RFQ inner card — Surface tier 1 transparent (sess.25 task #3 step8).
   Risolve l'effetto "toppa" — il container outer #rfq-cta ha già il
   surface tier proper, l'inner card era una "card dentro card" bianca
   glass legacy che sbordava verticalmente. Ora è solo un wrapper
   semantico con padding, no bg/shadow/blur duplicati. */
section#rfq-cta.section.widget .rfq-card {
  border-radius: 18px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  box-shadow: none;
  padding: 18px 20px;
}

section#rfq-cta.section.widget .rfq-card .rfq-wrap{
  display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:center;
}

section#rfq-cta.section.widget .rfq-card .rfq-text strong{
  display:block; font-size:1.125rem; font-weight:700;
}
section#rfq-cta.section.widget .rfq-card .rfq-text span{
  opacity:.8;
}

section#rfq-cta.section.widget .rfq-card .rfq-btn{
  border-radius:999px; padding:12px 18px; font-weight:600;
}
@media (max-width: 767.98px){
  section#rfq-cta.section.widget .rfq-card .rfq-wrap{ grid-template-columns: 1fr; }
  section#rfq-cta.section.widget .rfq-card .rfq-btn{ width:100%; }
}
/* END: RFQ – match other glass widgets */

/* Modal polish (resta) */

/* START: RFQ — Surface tier 1 (sess.25 task #3 step6, pattern Linear)
   Auto-reattivo light/dark via tokens. Accent bars left+right gestito
   da product.css come full-row design rule. */
section#rfq-cta.section.widget.widget--glass-pro{
  --_x: var(--page-x, 32px);
  width: min(var(--content-w, 1204px), calc(100% - (var(--_x) * 2))) !important;
  margin: 28px auto !important;
  border-radius: 22px !important;
  position: relative !important;
  z-index: 0 !important;

  background: var(--ds-surface-1-bg) !important;
  outline: none !important;
  border: 1px solid var(--ds-surface-1-border) !important;
  padding: 0 !important;
}
/* ::before glossy iOS light residuo rimosso (sess.25 task #3 step6).
   ::after inset border rimosso (gestito da border + accent product.css). */
section#rfq-cta.section.widget.widget--glass-pro::before,
section#rfq-cta.section.widget.widget--glass-pro::after{
  content: none !important;
}
/* END: RFQ — Surface tier 1 */
/* START: RFQ CTA brand typography + spacing */
#rfq-cta .widget-title{
  font: 700 18px/1.25 var(--ds-font-sans, system-ui);
  margin: 0 0 4px;
}
#rfq-cta .widget-subtitle{
  font: 400 14px/1.45 var(--ds-font-sans, system-ui);
  opacity: .8;
  margin: 0;
}
/* card glass: già ereditato da widget--glass-pro; qui solo armonizziamo i paddings interni */
#rfq-cta .widget-content.rfq-wrap{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 767.98px){
  #rfq-cta .widget-content.rfq-wrap{ grid-template-columns: 1fr; }
  #rfq-cta .rfq-btn{ width: 100%; }
}
/* END: RFQ CTA brand typography + spacing */

/* START/RFQ ACTIONS BRAND BUTTONS */
.rfq-actions .btn{ border-radius: 999px; padding: 10px 18px; font-weight: 600; }
.rfq-actions .btn.ghost{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.12);
}
/* END/RFQ ACTIONS BRAND BUTTONS */

/* START: RFQ — CTA glass + spacing + type */
section#rfq-cta.section.widget.widget--glass-pro{
  /* il contenitore glass è già allineato; qui uniformo solo spaziatura */
  padding: 0 !important;
}
#rfq-cta .widget-content.rfq-wrap{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}
#rfq-cta .widget-title{
  font: 700 18px/1.25 var(--ds-font-sans, system-ui);
  margin: 0 0 4px;
}
#rfq-cta .widget-subtitle{
  font: 400 14px/1.45 var(--ds-font-sans, system-ui);
  opacity: .8;
  margin: 0;
}
#rfq-cta .rfq-btn{ border-radius: 999px; padding: 12px 18px; font-weight: 600; }
@media (max-width: 767.98px){
  #rfq-cta .widget-content.rfq-wrap{ grid-template-columns: 1fr; }
  #rfq-cta .rfq-btn{ width:100%; }
}
/* END: RFQ — CTA glass + spacing + type */

/* START: RFQ modal — brand chips & fields */
.rfq-dialog{
  width: min(820px, 96vw);
  background: var(--surface, #fff);
  color: var(--ds-c-text, #111);
  font-family: var(--ds-font-sans, system-ui);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 22px;
  position: relative;
}

.rfq-title{ font: 600 20px/1.25 var(--ds-font-sans); margin: 2px 0 8px; }

/* SELECT, INPUT, TEXTAREA in stile brand */
#rfq-modal .rfq-input,
#rfq-modal select.rfq-input,
#rfq-modal textarea.rfq-input{
  width: 100%;
  font: 500 14px/1.25 var(--ds-font-sans, system-ui);
  color: var(--ds-c-text, #111);
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 10px 12px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  outline: none;
}
#rfq-modal .rfq-input:focus{
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 0 0 3px rgba(255,209,0,.35);
}

/* Note/instruction */
#rfq-modal .rfq-note{
  font: 400 12px/1.35 var(--ds-font-sans, system-ui);
  opacity: .75;
  margin-top: 6px;
}

/* Azioni (pulsanti in basso) — lascia usare i brand .btn; qui solo dimensioni */
/* END: RFQ modal — brand chips & fields */

/* START: RFQ — CTA & Modal brand polish v2 (selectors reali) */

/* CTA — layout e tipografia coerenti */
section#rfq-cta.section.widget.widget--glass-pro{ padding:0 !important; }
section#rfq-cta .rfq-card .rfq-wrap{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:16px 18px;
}
#rfq-cta .widget-title{
  font:700 18px/1.25 var(--ds-font-sans, system-ui);
  text-transform:uppercase; letter-spacing:.02em; margin:0 0 4px;
}
#rfq-cta .widget-subtitle{
  font:400 14px/1.45 var(--ds-font-sans, system-ui);
  text-transform:uppercase; letter-spacing:.02em;
  opacity:.8; margin:0;
}
/* CTA button: forzo uppercase con specificità alta */
section#rfq-cta .rfq-card .rfq-btn.btn.primary{
  border-radius:999px; padding:12px 18px; font-weight:600;
  text-transform:uppercase !important; letter-spacing:.02em;
}

@media (max-width:1099.98px){
  body.ds-vp-app section#rfq-cta .rfq-card .rfq-wrap{ grid-template-columns:1fr; }
  body.ds-vp-app section#rfq-cta .rfq-card .rfq-btn{
    width: 100%;
    /* sess.33 fix utente: testo centrato (era allineato sx per default button con flex children) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* sess.33 Step 4g Fix 2 — Cart link in widget #rfq-cta (visibile solo se cart > 0).
   Pattern outline gold ambra famiglia 3 (parity Specs .specs-extend-cta /
   Downloads filter pill non-active). Mobile + desktop coerente. */
.rfq-cart-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0 16px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(244,181,50,.45);
  background: transparent;
  color: rgba(0,0,0,.78);
  font: 700 .82rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.rfq-cart-link[hidden]{
  display: none !important;
}
.rfq-cart-link__count{
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #F4B532;
  color: #111;
  font: 800 .72rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: 0;
  border: 1px solid #C9A800;
}
.rfq-cart-link:active{
  background: rgba(244,181,50,.12);
  transform: scale(.98);
}
body.ds-dark .rfq-cart-link{
  color: rgba(255,255,255,.88);
  border-color: rgba(244,181,50,.45);
}
body.ds-dark .rfq-cart-link__count{
  background: #F4B532;
  color: #111;
  border-color: #C9A800;
}
@media (hover: hover){
  .rfq-cart-link:hover{
    background: rgba(244,181,50,.16);
    border-color: rgba(244,181,50,.65);
  }
}
/* Mobile width 100% nel widget #rfq-cta in-page (sotto button "Configura") */
@media (max-width: 1399.98px){
  body.ds-vp-app section#rfq-cta .rfq-cart-link{
    width: 100%;
  }
}

/* MODALE — headings e label in uppercase coerente */
#rfq-modal .rfq-title{
  font:700 20px/1.25 var(--ds-font-sans, system-ui);
  text-transform:uppercase; letter-spacing:.02em; margin:2px 0 8px;
}
#rfq-modal .rfq-label{
  font:700 12px/1 var(--ds-font-sans, system-ui);
  text-transform:uppercase; letter-spacing:.02em;
}

/* Pill (CCT/CONTROL/MAINS/EXTRAS): glass + uppercase + ACTIVE ben visibile */
#rfq-modal .rfq-field > div button:not(.btn){
  appearance:none; border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--ds-c-text,#111);
  border-radius:999px; padding:8px 12px; margin:4px 6px 4px 0;
  font:600 12px/1 var(--ds-font-sans, system-ui);
  text-transform:uppercase; letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  cursor:pointer;
}
@media (hover: hover){
  #rfq-modal .rfq-field > div button:not(.btn):hover{
    box-shadow:0 3px 10px rgba(0,0,0,.10); transform:translateY(-1px);
  }
}
/* Stato attivo: .is-active o aria-pressed=true */
#rfq-modal .rfq-field > div button:not(.btn).is-active,
#rfq-modal .rfq-field > div button:not(.btn)[aria-pressed="true"]{
  background:var(--brand,#F4B532); color:#111; border-color:rgba(0,0,0,.18);
  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Azioni modale: pelle brand già dalle .btn globali, qui solo sizing/uppercase */
.rfq-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.rfq-actions .btn{ border-radius:999px; padding:10px 18px; font-weight:600; text-transform:uppercase; }

/* END: RFQ — CTA & Modal brand polish v2 (selectors reali) */

/* START: RFQ — CTA & Submit buttons as real primary (sessione) */

/* CTA in pagina prodotto */
section#rfq-cta .rfq-card .rfq-btn.btn.primary{
  /* base brand */
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  text-transform: uppercase !important;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 800;
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
}
@media (hover: hover){
  section#rfq-cta .rfq-card .rfq-btn.btn.primary:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 30px rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(255,255,255,.45);
    filter: saturate(115%);
  }
}
section#rfq-cta .rfq-card .rfq-btn.btn.primary:active{
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
section#rfq-cta .rfq-card .rfq-btn.btn.primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,209,0,.45),
    0 10px 26px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

/* Bottone di invio nel footer del modale */
#rfq-modal .rfq-actions .btn.primary{
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  text-transform: uppercase !important;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 800;
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
}
@media (hover: hover){
  #rfq-modal .rfq-actions .btn.primary:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 30px rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(255,255,255,.45);
    filter: saturate(115%);
  }
}
#rfq-modal .rfq-actions .btn.primary:active{
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.35);
}
#rfq-modal .rfq-actions .btn.primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,209,0,.45),
    0 10px 26px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

/* Pulsante “Annulla” (ghost) — più leggibile ma non competitivo col primary */
#rfq-modal .rfq-actions .btn.ghost{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.12);
  color: var(--ds-c-text, #111);
}
@media (hover: hover){
  #rfq-modal .rfq-actions .btn.ghost:hover{
    background: rgba(0,0,0,.06);
  }
}
/* END: RFQ — CTA & Submit buttons as real primary (sessione) */

/* START: RFQ extras pills — base + active (robusto) */
#rfq-extras button:not(.btn),
#rfq-extras [data-extra],
#rfq-extras label,
#rfq-extras .rfq-pill{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--ds-c-text,#111);
  border-radius: 999px;
  padding: 8px 12px;
  margin: 4px 6px 4px 0;
  font: 600 12px/1 var(--ds-font-sans, system-ui);
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
@media (hover: hover){
  #rfq-extras button:not(.btn):hover,
  #rfq-extras [data-extra]:hover,
  #rfq-extras label:hover,
  #rfq-extras .rfq-pill:hover{
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
    transform: translateY(-1px);
  }
}
#rfq-extras button:not(.btn).is-active,
#rfq-extras button:not(.btn)[aria-pressed="true"],
#rfq-extras [data-extra].is-active,
#rfq-extras [data-extra][aria-pressed="true"],
#rfq-extras label.is-active,
#rfq-extras label[aria-pressed="true"],
#rfq-extras .rfq-pill.is-active,
#rfq-extras .rfq-pill[aria-pressed="true"]{
  background: var(--brand, #F4B532);
  color:#111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}
/* END: RFQ extras pills — base + active (robusto) */

/* START: RFQ EXTRAS — evidenza basata su input:checked (robusto) */

/* Base pill per label (se non sono già “button”) */
#rfq-extras label,
#rfq-extras .rfq-pill{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--ds-c-text,#111);
  border-radius: 999px;
  padding: 8px 12px;
  margin: 4px 6px 4px 0;
  font: 600 12px/1 var(--ds-font-sans, system-ui);
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
@media (hover: hover){
  #rfq-extras label:hover,
  #rfq-extras .rfq-pill:hover{
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
    transform: translateY(-1px);
  }
}

/* === STATI ATTIVI (tutte le varianti strutturali) === */

/* Caso A: input prima del label */
#rfq-extras input[type="checkbox"]:checked + label,
#rfq-extras input[type="radio"]:checked + label{
  background: var(--brand, #F4B532);
  color:#111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Caso B: label che WRAPPA l’input */
#rfq-extras label:has(input[type="checkbox"]:checked),
#rfq-extras label:has(input[type="radio"]:checked){
  background: var(--brand, #F4B532);
  color:#111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Fallback opzionale: se aggiungiamo .is-active da JS su qualsiasi nodo */
#rfq-extras .is-active,
#rfq-extras [aria-pressed="true"]{
  background: var(--brand, #F4B532) !important;
  color:#111 !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* END: RFQ EXTRAS — evidenza basata su input:checked (robusto) */

#rfq-extras .chip.active,
#rfq-extras .chip.is-active,
#rfq-extras .chip[aria-pressed="true"] {
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* === EXTRAS: base chip === */
#rfq-extras .chip {
  appearance: none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--ds-c-text,#111);
  border-radius: 999px;
  padding: 8px 12px;
  margin: 4px 6px 4px 0;
  font: 600 12px/1 var(--ds-font-sans, system-ui);
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .06s ease,
              box-shadow .12s ease,
              background-color .12s ease,
              border-color .12s ease;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}

@media (hover: hover){
  #rfq-extras .chip:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
    transform: translateY(-1px);
  }
}

/* === EXTRAS: stato attivo (supporta .active e aria-pressed) === */
#rfq-extras .chip.active,
#rfq-extras .chip[aria-pressed="true"] {
  background: var(--brand, #F4B532);
  color: #111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}
/* START: RFQ — extras active + custom badge */
#rfq-extras .chip.is-active,
#rfq-extras button:not(.btn)[aria-pressed="true"]{
  background: var(--brand, #F4B532);
  color: #111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

#rfq-extras .chip.is-active[data-custom="1"]::after,
#rfq-extras button[aria-pressed="true"][data-custom="1"]::after{
  content: "CUSTOM";
  margin-left: 8px;
  font: 700 10px/1 var(--ds-font-sans, system-ui);
  padding: 3px 6px;
  border-radius: 999px;
  background: #111;
  color: #fff;
}
/* END: RFQ — extras active + custom badge */

/* START: RFQ — Add to RFQ disabled/ready states + hint */

/* Hint testuale a sinistra dei bottoni */
#rfq-modal .rfq-actions #rfq-required-hint {
  margin-right: auto;
  font: 600 12px/1.2 var(--ds-font-sans, system-ui);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: rgba(0,0,0,.65);
  display: none; /* mostrato da JS quando mancano selezioni */
}

/* Pulsante disabilitato: spento e non cliccabile */
#rfq-modal .rfq-actions .btn.primary[disabled],
#rfq-modal .rfq-actions .btn.primary[aria-disabled="true"]{
  background: rgba(0,0,0,.14) !important;
  color: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  filter: grayscale(.2);
  transform: none !important;
}

/* Pulsante abilitato (classe is-enabled aggiunta dal JS) → enfatizza il brand */
#rfq-modal .rfq-actions .btn.primary.is-enabled{
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
}
@media (hover: hover){
  #rfq-modal .rfq-actions .btn.primary.is-enabled:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 30px rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(255,255,255,.45);
    filter: saturate(115%);
  }
}

/* END: RFQ — Add to RFQ disabled/ready states + hint */




/* Chip stato attivo (già presente) */
#rfq-extras .chip.is-active { background: var(--brand,#F4B532); color:#111; }

/* Evidenziazione specifica per i CUSTOM attivi */
#rfq-extras .chip.custom.is-active::after {
  content: "CUSTOM";
  font: 600 10px/1 var(--ds-font-sans,system-ui);
  color: #fff;
  background: #111;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 8px;
}

/* RFQ — extras active + custom badge */
#rfq-extras .chip.is-active,
#rfq-extras button:not(.btn)[aria-pressed="true"]{
  background: var(--brand, #F4B532);
  color:#111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Mostra sempre il badge CUSTOM se la chip è marcata come custom */
#rfq-extras .chip[data-custom="1"]::after {
  content: "CUSTOM";
  margin-left: 8px;
  font: 700 10px/1 var(--ds-font-sans, system-ui);
  padding: 3px 6px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  opacity: .65;                /* leggermente opaco quando non attiva */
  transition: opacity .15s ease;
}

/* Quando la chip è attiva → badge pieno */
#rfq-extras .chip.is-active[data-custom="1"]::after,
#rfq-extras button[aria-pressed="true"][data-custom="1"]::after {
  opacity: 1;
}

/* === RFQ accessories pills (included/removed) =================== */
#rfq-accessories .acc-pill{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--ds-c-text,#111);
  border-radius: 999px;
  padding: 8px 12px;
  margin: 4px 6px 4px 0;
  font: 600 12px/1 var(--ds-font-sans, system-ui);
  text-transform: uppercase;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}

@media (hover: hover){
  #rfq-accessories .acc-pill:hover{ box-shadow: 0 3px 10px rgba(0,0,0,.10); transform: translateY(-1px); }
}

#rfq-accessories .acc-pill.is-selected{
  background: var(--brand, #F4B532);
  color:#111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Badge della dotazione (solo per item con data-included="1")
   ⚠️ IL TESTO ARRIVA DALL'ATTRIBUTO, non dal CSS. Prima era scritto qui a
   mano — «INCLUDED» e «REMOVED» — e restava inglese anche sulla pagina
   italiana: il CSS non sa che lingua si sta guardando, e nessun dizionario
   puo' tradurre una `content`. Ora lo scrive `rfq.js` in `data-etichetta`
   prendendolo da `acc.included` / `acc.removed`.
   Il fallback resta in italiano: se l'i18n non arriva, meglio la lingua di
   casa che quella di nessuno. */
#rfq-accessories .acc-pill[data-included="1"]::after{
  content: attr(data-etichetta);
  font: 700 10px/1 'Oswald', system-ui, sans-serif;
  letter-spacing: .06em;
  color:#111; background:#ffc; border:1px solid rgba(0,0,0,.18);
  padding: 3px 6px; border-radius:999px;
}
#rfq-accessories .acc-pill[data-included="1"]:not([data-etichetta])::after{
  content: "INCLUSO";
}

/* Stato "rimosso" per included deselezionati */
#rfq-accessories .acc-pill[data-included="1"][data-removed="1"]{
  background: #fff; color:#666; border-style: dashed;
}
#rfq-accessories .acc-pill[data-included="1"][data-removed="1"]::after{
  background:#eee; color:#444;
}
#rfq-accessories .acc-pill[data-included="1"][data-removed="1"]:not([data-etichetta])::after{
  content: "RIMOSSO";
}

/* Alternative (stesso gruppo) si escludono a vicenda → evidenzia gruppo attivo */
#rfq-accessories .acc-pill[data-group] {
  position: relative;
}

/* --- RFQ modal: layout a colonna + footer sticky --- */
#rfq-modal .rfq-dialog{
  display: flex;
  flex-direction: column;
  max-height: 90vh;      /* già presente in alcune varianti, qui è “safety” */
  overflow: auto;        /* consente lo scroll del contenitore */
}

/* il contenuto (campi) scorre; il footer resta attaccato in basso */
#rfq-modal .rfq-actions{
  position: sticky;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 14%);
  padding-top: 12px;     /* separazione visiva dal contenuto che scorre */
  margin-top: 8px;
  z-index: 1;            /* sopra alle chip/pill durante lo scroll */
}

/* quando la lista accessori è lunga, non “spinge fuori” il footer */
#rfq-accessories .rfq-pills{
  max-height: 44vh;      /* ~ metà schermo: aggiusta se serve */
  overflow:auto;
  padding-right: 4px;    /* micro spazio per la scrollbar */
}

/* --- RFQ accessories: accordion groups --- */
#rfq-accessories .acc-group { margin-bottom: 10px; }
#rfq-accessories .acc-group__title{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 8px 12px;
  font: 700 12px/1 var(--ds-font-sans, system-ui);
  text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer;
}
#rfq-accessories .acc-group__title[aria-expanded="false"] svg{
  transform: rotate(-90deg);
}
#rfq-accessories .acc-group__body{
  padding: 8px 0 4px;
}

/* --- RFQ Accessories: accordion --- */
#rfq-accessories .acc-group { border-radius: 12px; background: rgba(255,255,255,.72); backdrop-filter: blur(6px); box-shadow: 0 1px 4px rgba(0,0,0,.06); margin: 8px 0; overflow: hidden; }

#rfq-accessories .acc-group__title{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 14px; font:600 12px/1 var(--ds-font-sans, system-ui);
  letter-spacing:.02em; text-transform:uppercase; cursor:pointer; background:transparent; border:0;
}

#rfq-accessories .acc-group__title svg{ transition: transform .18s ease; transform: rotate(-90deg); }
#rfq-accessories .acc-group__title[aria-expanded="true"] svg{ transform: rotate(0deg); }

#rfq-accessories .acc-group__body{
  display:none; /* chiuso di default */
  padding: 10px 12px 12px;
}

#rfq-accessories .acc-group__title[aria-expanded="true"] + .acc-group__body{
  display:block; /* aperto quando aria-expanded=true */
}

#rfq-accessories .rfq-pills{ display:flex; flex-wrap:wrap; gap:8px; }

/* pill degli accessori */
.acc-pill{
  appearance:none; border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  border-radius: 999px; padding: 10px 14px; font:600 12px/1 var(--ds-font-sans, system-ui);
  text-transform: uppercase; letter-spacing:.02em; box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

.acc-pill.is-selected{
  background: var(--brand,#F4B532);
  color:#111; border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

/* --- RFQ sticky footer ---- */
#rfq-modal .rfq-footer,
#rfq-modal .rfq-actions{
  position: sticky; bottom: 0; z-index: 5;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 14px 18px; border-top: 1px solid rgba(0,0,0,.06);
}

/* --- RFQ buyback block ---- */
.rfq-acc { border:1px solid rgba(0,0,0,.08); border-radius: 12px; overflow: hidden; margin: 14px 0; }
.rfq-acc > summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  font: 700 13px/1.2 var(--ds-font-sans, system-ui);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: #fff; position: relative;
}
.rfq-acc > summary::marker { display:none; }
.rfq-acc > summary .hint { font-weight:600; color:#777; font-size:12px; }
.rfq-acc[open] > summary { box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); }
.rfq-acc .acc-body { padding: 12px 14px; background: #fff; display:grid; gap:10px; }
.rfq-acc input[type="text"], .rfq-acc input[type="number"], .rfq-acc textarea {
  width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.12); border-radius:10px;
  font: 500 13px/1.2 var(--ds-font-sans, system-ui);
}
.rfq-acc .row { display:grid; grid-template-columns: 1fr 160px; gap:12px; }
@media (max-width: 700px){ .rfq-acc .row { grid-template-columns: 1fr; } }


/* hint di validazione (testo a sinistra del CTA) */
#rfq-required-hint{
  margin-right:auto; font:500 12px/1.3 var(--ds-font-sans, system-ui);
  color: #555; display: inline-flex; align-items:center; gap:6px;
}

/* CTA stato disabilitato/enabled */
#rfq-add[disabled]{ opacity:.55; cursor:not-allowed; filter: grayscale(0.3); }
#rfq-add.is-enabled{ opacity:1; filter:none; }

/* === BUYBACK (hero card) ======================================= */
:root {
  /* Buyback brand = giallo De Sisti */
  --bb-brand: var(--brand, #F4B532);
  --bb-brand-600: #C7A600;   /* tono più scuro per hover/focus */
  --bb-brand-50: #FFF6CC;    /* tenue per badge/fondi soft */
}


#rfq-buyback {
  position: relative;
  margin-top: 18px;
}

.bb-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.bb-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}

.bb-title {
  display: flex; flex-direction: column; gap: 4px;
}

.bb-title h4 {
  margin: 0;
  font: 800 18px/1.2 var(--ds-font-sans,system-ui);
  letter-spacing: .2px;
}

.bb-title p {
  margin: 0;
  color: #444;
  font: 500 13px/1.35 var(--ds-font-sans,system-ui);
}

.bb-badge {
  display:inline-flex;align-items:center;gap:8px;
  padding: 6px 10px;
  background: var(--bb-brand-50);
  color: #111;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  font: 700 11px/1 var(--ds-font-sans,system-ui);
  text-transform: uppercase; letter-spacing:.04em;
}


.bb-toggle {
  appearance: none;
  border: 0;
  background: #fff8cc;                 /* luce giallo soft */
  color: #111;
  font: 800 12px/1 var(--ds-font-sans,system-ui);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--bb-brand);
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
@media (hover: hover){ .bb-toggle:hover { transform: translateY(-1px); } }
.bb-toggle:active { transform: translateY(0); }

.bb-toggle.is-on {
  background: var(--bb-brand);
  color: #111;
 text-shadow: 0 1px 0 rgba(255,255,255,.6);  
box-shadow: 0 10px 22px rgba(0,0,0,.18);
  animation: bb-pop .22s ease-out;
}

@keyframes bb-pop {
  from { transform: scale(.98); opacity:.8; }
  to   { transform: scale(1);   opacity:1;  }
}

#bb-fields {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

#bb-fields .bb-grid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
}
#bb-fields .bb-row { display:flex; gap:10px; align-items:center; margin-top:10px; }

#bb-fields input[type="text"],
#bb-fields input[type="number"],
#bb-fields textarea,
#bb-fields select {
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px 12px;
  font: 600 13px/1.2 var(--ds-font-sans,system-ui);
  background: #fff;
}

#bb-fields small { color:#555; font:500 12px/1.3 var(--ds-font-sans,system-ui); }

/* --- Buyback uppercase & Oswald weight --- */
#rfq-buyback,
#rfq-buyback .bb-card,
#rfq-buyback .bb-title h4,
#rfq-buyback label span,
#rfq-buyback .bb-badge,
#rfq-buyback button,
#rfq-buyback input,
#rfq-buyback textarea {
  font-family: var(--ds-font-sans, 'Oswald', system-ui);
  text-transform: uppercase;
  letter-spacing: .03em;
}

#rfq-buyback input[type="checkbox"] {
  accent-color: var(--brand, #F4B532);
  width: 18px;
  height: 18px;
}


.bb-note {
  margin-top: 10px;
  color:#444; font:600 12px/1.35 var(--ds-font-sans,system-ui);
}

.bb-foot {
  display:flex; justify-content:flex-end; margin-top: 8px;
}

/* apertura morbida */
[data-bb-open="true"] #bb-fields { animation: bb-slide .18s ease-out both; }
@keyframes bb-slide {
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}

.rfq-acc > summary .hint{
  background: var(--bb-brand-50);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
  color: #111;
}

/* === BUYBACK — premium look & sticky actions (De Sisti brand) === */

/* Glass card + respiro */
#rfq-buyback .bb-card{
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 16px;
}

/* Titolo e badge, Oswald upper */
#rfq-buyback .bb-title{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
#rfq-buyback .bb-title h4{
  font-family: var(--ds-font-sans,'Oswald',system-ui);
  text-transform: uppercase;
  letter-spacing:.03em;
  font-weight:600;
  font-size: 18px;
  margin:0;
}
#rfq-buyback .bb-badge{
  font-family: var(--ds-font-sans,'Oswald',system-ui);
  text-transform: uppercase;
  letter-spacing:.04em;
  background: #111; color:#fff;
  padding:4px 8px; border-radius:999px;
  font-size:11px; font-weight:600;
}

/* Toggle ON in giallo brand */
#rfq-buyback .bb-toggle.is-on{
  background: var(--brand, #F4B532);
  color:#111;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 8px 18px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

/* Checkbox gialle (no blu) */
#rfq-buyback input[type="checkbox"]{
  accent-color: var(--brand, #F4B532);
  width:18px; height:18px;
}

/* Uppercase coerente dentro il buyback */
#rfq-buyback,
#rfq-buyback .bb-card,
#rfq-buyback .bb-title h4,
#rfq-buyback label span,
#rfq-buyback .bb-badge,
#rfq-buyback button,
#rfq-buyback input,
#rfq-buyback textarea{
  font-family: var(--ds-font-sans,'Oswald',system-ui);
  text-transform: uppercase;
  letter-spacing:.03em;
}

/* “Area campi” un pelo più compatta */
#rfq-buyback .bb-fields{
  display: grid; gap: 10px;
}

/* Mini descrizioni in small in minuscolo (leggibilità) */
#rfq-buyback small{
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(0,0,0,.55);
}

/* Piccola animazione di comparsa quando abiliti */
#rfq-buyback .bb-card[aria-expanded="true"]{
  animation: bbFadeIn .18s ease-out;
}
@keyframes bbFadeIn{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* START: RFQ Spigot Section (pills + inline input) */
#rfq-spigot { margin-top: 18px; }
#rfq-spigot .rfq-label{
  display:block; margin-bottom:6px;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
#rfq-spigot .rfq-pills{
  display:flex; flex-wrap:wrap; gap:6px;
}
#rfq-spigot .chip.is-active{
  background: var(--brand, #F4B532);
  color:#111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}
.rfq-spigot-extra{ margin-top:10px; }
.rfq-spigot-extra input{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.2);
  font:600 13px/1.35 var(--ds-font-sans, system-ui);
}
.rfq-spigot-extra input:focus{
  outline:2px solid var(--brand, #F4B532);
}
/* END: RFQ Spigot Section (pills + inline input) */

/* ==== RFQ Cart — presentazione dettagli ==== */
#rfq-cart-page .rfq-item{border:1px solid #e5e5e5;border-radius:16px;padding:16px;margin:12px 0;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06)}
#rfq-cart-page .rfq-item-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}
#rfq-cart-page .rfq-item-title{font:600 18px/1.2 Oswald,system-ui,Segoe UI,Roboto,sans-serif;letter-spacing:.2px;margin:0}
#rfq-cart-page .rfq-item-specs{display:flex;flex-wrap:wrap;gap:6px}

#rfq-cart-page .chip{display:inline-block;border-radius:999px;background:#f5f5f5;padding:6px 10px;font:600 12px/1 Oswald,system-ui,sans-serif;letter-spacing:.3px}
#rfq-cart-page .chip.is-custom{background:#111;color:#fff}
#rfq-cart-page .chip.is-included{background:#ffeaa7}
#rfq-cart-page .chip.is-removed{background:#ffe0e0}

#rfq-cart-page .rfq-sec{margin:10px 0}
#rfq-cart-page .rfq-sec-title{font:600 12px/1 Oswald,system-ui,sans-serif;opacity:.65;margin:0 0 6px}
#rfq-cart-page .rfq-chips{display:flex;flex-wrap:wrap;gap:8px}
#rfq-cart-page .rfq-note{font:400 12px/1.35 system-ui,Segoe UI,Roboto,sans-serif;opacity:.85}

#rfq-cart-page .rfq-buyback{border-top:1px dashed rgba(0,0,0,.12);padding-top:8px}
#rfq-cart-page .rfq-buyback-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#rfq-cart-page .rfq-buyback-grid .wide{grid-column:1/-1}
#rfq-cart-page .rfq-buyback-grid label{display:block;font:600 11px/1 Oswald,system-ui;opacity:.6;margin-bottom:2px}

#rfq-cart-page .rfq-item-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
#rfq-cart-page .rfq-item-foot .qty{display:inline-flex;align-items:center;border-radius:999px;background:#f5f5f5;overflow:hidden}
#rfq-cart-page .rfq-item-foot .qty .qminus,
#rfq-cart-page .rfq-item-foot .qty .qplus{width:32px;height:32px;border:0;background:transparent;font:700 18px/1 system-ui;cursor:pointer}
#rfq-cart-page .rfq-item-foot .qty .qval{width:56px;height:32px;border:0;background:transparent;text-align:center;font:600 14px/1 Oswald,system-ui}
#rfq-cart-page .rfq-item-foot .remove{border:0;background:#111;color:#fff;border-radius:999px;padding:8px 12px;font:600 12px/1 Oswald,system-ui;cursor:pointer}

/* START: RFQ accessories pills — interaction fixes & active state */
#rfq-modal .acc-pill {
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

#rfq-modal .acc-pill.incompatible {
  /* Deve restare cliccabile: niente pointer-events:none */
  pointer-events: auto;
  opacity: .85;                 /* leggero accenno */
  border-style: dashed;         /* affordance visiva “custom possibile” */
}

#rfq-modal .acc-pill.is-active,
#rfq-modal .acc-pill[aria-pressed="true"],
#rfq-modal .acc-pill.is-selected {
  background: var(--brand, #F4B532);
  color: #111;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

#rfq-modal .acc-pill.is-removed {
  background: rgba(0,0,0,.06);
  color: #444;
  border-color: rgba(0,0,0,.12);
}
/* END: RFQ accessories pills — interaction fixes & active state */

/* RFQ CTA — sottotitolo sempre visibile e coerente */
section#rfq-cta .rfq-card .rfq-text .widget-subtitle{
  display:block;              /* forza visibilità */
  margin: 0;                  /* evita “spinte” strane */
  font: 400 14px/1.45 var(--ds-font-sans, system-ui);
  text-transform: none;       /* sottotitoli in minuscolo (come da tue preferenze) */
  opacity: .8;
}
/* RFQ CTA subtitle */
.rfq-cta .rfq-text .rfq-sub{
  display:block;
  margin-top: 6px;
  color: var(--ds-c-text-weak, #666);
  font-size: 0.95rem;
  line-height: 1.35;
}

/* ============================================================
   RFQ — DARK MODE
   Copertura completa: modal, form, pills, accessori, buyback,
   cart. Tutti i bianchi hardcoded → equivalenti scuri brand.
   ============================================================ */

/* ── Overlay ── */
body.ds-dark .rfq-modal[aria-hidden="false"],
body.ds-dark .rfq-modal.open{
  background: rgba(0,0,0,.60);
}

/* ── Dialog container ── */
body.ds-dark .rfq-dialog{
  background: rgba(22,18,12,.96);
  color: rgba(228,224,216,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ── Titolo e label ── */
body.ds-dark #rfq-modal .rfq-title{
  color: rgba(228,224,216,.95);
}
body.ds-dark #rfq-modal .rfq-label{
  color: rgba(200,196,188,.70);
}

/* ── Close button ── */
body.ds-dark .rfq-close{
  color: rgba(228,224,216,.65);
}
@media (hover: hover){
  body.ds-dark .rfq-close:hover{
    color: rgba(228,224,216,.92);
  }
}

/* ── Input, select, textarea ── */
body.ds-dark #rfq-modal .rfq-input,
body.ds-dark #rfq-modal select.rfq-input,
body.ds-dark #rfq-modal textarea.rfq-input{
  background: rgba(255,255,255,.07);
  color: rgba(228,224,216,.90);
  border-color: rgba(255,255,255,.12);
}
body.ds-dark #rfq-modal .rfq-input:focus,
body.ds-dark #rfq-modal select.rfq-input:focus,
body.ds-dark #rfq-modal textarea.rfq-input:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(255,209,0,.25);
}
body.ds-dark #rfq-modal .rfq-input::placeholder{
  color: rgba(200,196,188,.35);
}

/* ── Note/hint ── */
body.ds-dark #rfq-modal .rfq-note{
  color: rgba(200,196,188,.55);
}
body.ds-dark #rfq-modal .rfq-actions #rfq-required-hint{
  color: rgba(200,196,188,.60);
}

/* ── Chip globali ── */
body.ds-dark .chip{
  background: rgba(255,255,255,.08);
  color: rgba(228,224,216,.88);
  border-color: rgba(255,255,255,.12);
}
@media (hover: hover){
  body.ds-dark .chip:hover{
    background: rgba(255,255,255,.12);
  }
}
/* Chip incompatible */
body.ds-dark .chip.incompatible::after{
  background: rgba(22,18,12,.90);
  color: var(--brand, #F4B532);
  border-color: rgba(255,209,0,.40);
}

/* ── Pills nel modal (CCT / CONTROL / MAINS) ── */
body.ds-dark #rfq-modal .rfq-field > div button:not(.btn){
  background: rgba(255,255,255,.07);
  color: rgba(228,224,216,.88);
  border-color: rgba(255,255,255,.11);
  box-shadow: none;
}
@media (hover: hover){
  body.ds-dark #rfq-modal .rfq-field > div button:not(.btn):hover{
    background: rgba(255,255,255,.12);
    box-shadow: 0 3px 10px rgba(0,0,0,.30);
  }
}

/* ── Extras pills (button, label, .rfq-pill, .chip) ── */
body.ds-dark #rfq-extras button:not(.btn),
body.ds-dark #rfq-extras [data-extra],
body.ds-dark #rfq-extras label,
body.ds-dark #rfq-extras .rfq-pill,
body.ds-dark #rfq-extras .chip{
  background: rgba(255,255,255,.07);
  color: rgba(228,224,216,.88);
  border-color: rgba(255,255,255,.11);
  box-shadow: none;
}
@media (hover: hover){
  body.ds-dark #rfq-extras button:not(.btn):hover,
  body.ds-dark #rfq-extras [data-extra]:hover,
  body.ds-dark #rfq-extras label:hover,
  body.ds-dark #rfq-extras .rfq-pill:hover,
  body.ds-dark #rfq-extras .chip:hover{
    background: rgba(255,255,255,.12);
    box-shadow: 0 3px 10px rgba(0,0,0,.30);
  }
}
/* Badge CUSTOM in dark */
body.ds-dark #rfq-extras .chip[data-custom="1"]::after{
  background: rgba(228,224,216,.18);
  color: rgba(228,224,216,.80);
}
body.ds-dark #rfq-extras .chip.is-active[data-custom="1"]::after,
body.ds-dark #rfq-extras button[aria-pressed="true"][data-custom="1"]::after{
  background: #111;
  color: #fff;
}

/* ── Accessories pills ── */
body.ds-dark #rfq-accessories .acc-pill,
body.ds-dark #rfq-modal .acc-pill,
body.ds-dark .acc-pill{
  background: rgba(255,255,255,.07);
  color: rgba(228,224,216,.88);
  border-color: rgba(255,255,255,.11);
  box-shadow: none;
}
@media (hover: hover){
  body.ds-dark #rfq-accessories .acc-pill:hover,
  body.ds-dark #rfq-modal .acc-pill:hover{
    background: rgba(255,255,255,.12);
    box-shadow: 0 3px 10px rgba(0,0,0,.30);
  }
}
/* Badge INCLUDED in dark — sess.33 Step 4g Fix 2: color bianco→nero per parity
   light + leggibilità su bg gialla tinted (utente: "testo bianco su giallo illegibile") */
body.ds-dark #rfq-accessories .acc-pill[data-included="1"]::after{
  background: rgba(255,209,0,.35);
  color: #111;
  border-color: rgba(255,209,0,.45);
}
/* Stato REMOVED in dark */
body.ds-dark #rfq-accessories .acc-pill[data-included="1"][data-removed="1"]{
  background: rgba(255,255,255,.04);
  color: rgba(200,196,188,.45);
  border-color: rgba(255,255,255,.09);
}
body.ds-dark #rfq-accessories .acc-pill[data-included="1"][data-removed="1"]::after{
  background: rgba(255,255,255,.08);
  color: rgba(200,196,188,.55);
}
/* Acc-pill rimossa in modal */
body.ds-dark #rfq-modal .acc-pill.is-removed{
  background: rgba(255,255,255,.04);
  color: rgba(200,196,188,.45);
  border-color: rgba(255,255,255,.09);
}

/* ── Accordion accessories groups ── */
body.ds-dark #rfq-accessories .acc-group{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.ds-dark #rfq-accessories .acc-group__title{
  color: rgba(228,224,216,.82);
}
@media (hover: hover){
  body.ds-dark #rfq-accessories .acc-group__title:hover{
    background: rgba(255,255,255,.04);
  }
}

/* ── Bottoni azioni footer ── */
body.ds-dark #rfq-modal .rfq-actions .btn.ghost{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  color: rgba(228,224,216,.80);
}
@media (hover: hover){
  body.ds-dark #rfq-modal .rfq-actions .btn.ghost:hover{
    background: rgba(255,255,255,.11);
  }
}
/* Disabled in dark */
body.ds-dark #rfq-modal .rfq-actions .btn.primary[disabled],
body.ds-dark #rfq-modal .rfq-actions .btn.primary[aria-disabled="true"]{
  background: rgba(255,255,255,.10) !important;
  color: rgba(228,224,216,.35) !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ── Footer/actions sticky ── */
body.ds-dark #rfq-modal .rfq-footer,
body.ds-dark #rfq-modal .rfq-actions{
  background: rgba(22,18,12,.92);
  border-top-color: rgba(255,255,255,.07);
}

/* ── rfq-acc (details/summary) ── */
body.ds-dark .rfq-acc{
  border-color: rgba(255,255,255,.09);
}
body.ds-dark .rfq-acc > summary{
  background: rgba(255,255,255,.05);
  color: rgba(228,224,216,.88);
}
body.ds-dark .rfq-acc[open] > summary{
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
}
body.ds-dark .rfq-acc .acc-body{
  background: rgba(22,18,12,.80);
  color: rgba(228,224,216,.82);
}
body.ds-dark .rfq-acc > summary .hint{
  background: rgba(255,209,0,.15);
  color: rgba(228,224,216,.80);
  border-color: rgba(255,209,0,.25);
}
/* inputs dentro rfq-acc */
body.ds-dark .rfq-acc input[type="text"],
body.ds-dark .rfq-acc input[type="number"],
body.ds-dark .rfq-acc textarea{
  background: rgba(255,255,255,.07);
  color: rgba(228,224,216,.90);
  border-color: rgba(255,255,255,.12);
}

/* ── DARK MODE: stati ATTIVI / SELEZIONATI ────────────────────────────────
   Problema: le regole base dark-mode hanno specificità più alta delle regole
   attive light-mode (body.ds-dark aggiunge type+class → supera l'ID-based
   light-mode active). Fix: replichiamo le regole attive con prefisso ds-dark. */

/* Pill modale (CCT / CONTROL / MAINS) */
body.ds-dark #rfq-modal .rfq-field > div button:not(.btn).is-active,
body.ds-dark #rfq-modal .rfq-field > div button:not(.btn)[aria-pressed="true"]{
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* Extras chips/buttons */
body.ds-dark #rfq-extras .chip.active,
body.ds-dark #rfq-extras .chip.is-active,
body.ds-dark #rfq-extras .chip[aria-pressed="true"],
body.ds-dark #rfq-extras button:not(.btn).is-active,
body.ds-dark #rfq-extras button:not(.btn)[aria-pressed="true"],
body.ds-dark #rfq-extras [data-extra].is-active,
body.ds-dark #rfq-extras [data-extra][aria-pressed="true"],
body.ds-dark #rfq-extras input[type="checkbox"]:checked + label,
body.ds-dark #rfq-extras input[type="radio"]:checked + label,
body.ds-dark #rfq-extras label:has(input[type="checkbox"]:checked),
body.ds-dark #rfq-extras label:has(input[type="radio"]:checked){
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* Accessories pills nel modal e nella sezione accessories */
body.ds-dark #rfq-accessories .acc-pill.is-selected,
body.ds-dark #rfq-modal .acc-pill.is-selected,
body.ds-dark .acc-pill.is-selected{
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* Chip globali (fuori da extras/modal) */
body.ds-dark .chip.active,
body.ds-dark .chip.is-active,
body.ds-dark .chip[aria-pressed="true"]{
  background: var(--brand, #F4B532) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,.18) !important;
}

/* ── Buyback block ── */
body.ds-dark #rfq-buyback .bb-card{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
body.ds-dark #rfq-buyback .bb-title h4{
  color: rgba(228,224,216,.95);
}
body.ds-dark #rfq-buyback .bb-title p,
body.ds-dark .bb-note{
  color: rgba(200,196,188,.60);
}
body.ds-dark #rfq-buyback .bb-badge{
  background: rgba(255,255,255,.12);
  color: rgba(228,224,216,.88);
  border-color: rgba(255,255,255,.10);
}
body.ds-dark #rfq-buyback .bb-toggle{
  background: rgba(255,255,255,.08);
  color: rgba(228,224,216,.80);
  box-shadow: inset 0 0 0 2px rgba(255,209,0,.40);
}
/* bb-fields inputs in dark */
body.ds-dark #bb-fields input[type="text"],
body.ds-dark #bb-fields input[type="number"],
body.ds-dark #bb-fields textarea,
body.ds-dark #bb-fields select{
  background: rgba(255,255,255,.07);
  color: rgba(228,224,216,.90);
  border-color: rgba(255,255,255,.12);
}
body.ds-dark #bb-fields small{
  color: rgba(200,196,188,.55);
}
body.ds-dark #bb-fields{
  border-top-color: rgba(255,255,255,.09);
}

/* ── Spigot section ── */
body.ds-dark .rfq-spigot-extra input{
  background: rgba(255,255,255,.07);
  color: rgba(228,224,216,.90);
  border-color: rgba(255,255,255,.14);
}
body.ds-dark .rfq-spigot-extra input:focus{
  outline-color: var(--brand, #F4B532);
}

/* ── Cart page ── */
body.ds-dark #rfq-cart-page .rfq-item{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
}
body.ds-dark #rfq-cart-page .chip{
  background: rgba(255,255,255,.09);
  color: rgba(228,224,216,.80);
}
body.ds-dark #rfq-cart-page .chip.is-custom{
  background: rgba(228,224,216,.18);
  color: rgba(228,224,216,.92);
}
body.ds-dark #rfq-cart-page .chip.is-included{
  background: rgba(255,209,0,.18);
  color: rgba(228,224,216,.88);
}
body.ds-dark #rfq-cart-page .chip.is-removed{
  background: rgba(220,60,60,.18);
  color: rgba(228,224,216,.80);
}
body.ds-dark #rfq-cart-page .rfq-item-foot .qty{
  background: rgba(255,255,255,.08);
}
/* ⛔ David, 11/09 h07:21: «il carrello in dark mode e' illeggibile».
   Misurato, non guardato: il «−» e il «+» della quantita' erano
   **rgb(0,0,0) su rgb(12,12,12)** — rapporto di contrasto **1,07**. Cioe'
   invisibili: i due comandi piu' usati della pagina, spariti.

   🔑 LA CAUSA, che vale oltre questo caso: un `<button>` NON eredita il colore
   del testo — il browser gli da' `buttontext`, che e' nero. Le regole chiare
   dicevano `background:transparent` e basta: in chiaro quel nero cadeva sul
   tondo grigio `#f5f5f5` e si leggeva benissimo, quindi il difetto non si e'
   mai visto finche' il fondo non e' diventato scuro.
   ⇒ Ovunque si tolga lo sfondo a un bottone, il colore va RIDICHIARATO. */
body.ds-dark #rfq-cart-page .rfq-item-foot .qty .qminus,
body.ds-dark #rfq-cart-page .rfq-item-foot .qty .qplus{
  color: rgba(232,230,224,.92);
}
body.ds-dark #rfq-cart-page .rfq-item-foot .qval{
  color: rgba(228,224,216,.90);
}
body.ds-dark #rfq-cart-page .rfq-item-foot .remove{
  background: rgba(228,224,216,.18);
  color: rgba(228,224,216,.90);
}

/* ── CTA section glass (widget--glass-pro) in dark ── */
/* sess.25 task #3 step6: body.ds-dark override rimosso — i token
   surface-1 sono auto-reattivi al tema via ds-tokens.css. ::before
   e ::after rimossi nello step principale (content: none). */

/* END: RFQ — DARK MODE */



/* ═══ 12/09/2026 — LA CONFERMA DELL'AGGIUNTA ════════════════════════════════
   Sta in fondo al BODY, non dentro la modale: quella, appena chiusa, resta
   `opacity:0; visibility:hidden` e si porta dietro qualunque messaggio.
   ⭐ Sul telefono e' anche l'unica strada verso il carrello che compaia nel
   momento giusto, quindi il link e' un bersaglio da dito, non una postilla.
   Sta sopra la barra dei tab mobile (`bottom` generoso) e sotto qualunque
   modale (`z-index` piu' basso di 1000). */
.rfq-conferma{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 950;   /* sopra l’invito al tour (901), sotto le tendine (9999) */
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid var(--ds-c-accent-border, rgba(255,209,0,.35));
  background: var(--ds-c-surface-1, #17171a);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  font: 500 14px/1.25 "Oswald", system-ui, sans-serif;
  white-space: nowrap;
  color: var(--ds-c-text, #E8E6E0);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
}
.rfq-conferma.is-on{
  opacity: 1;
  transform: translate(-50%, 0);
}
.rfq-conferma__cart{
  flex: 0 0 auto;
  color: var(--ds-c-accent, #F4B532);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  /* 44 px di bersaglio senza alzare la riga */
  padding: 14px 6px;
  margin: -14px 0;
}
@media (prefers-reduced-motion: reduce){
  .rfq-conferma{ transition: none; }
}