/* ===========================================================
   SPECS — v3 design "sheet premium"
   Option A: 2 colonne, gerarchia tipografica forte
   Label: Oswald uppercase muted · Value: bold/conthrax prominente
   Nessun "tray bianco" — righe trasparenti su glass card
   =========================================================== */

:root{
  --specs-maxh: 3000px;
  --specs-sep:  rgba(0,0,0,.07);
  --specs-row-hover: rgba(255,208,0,.06);
  --specs-row-alt:   rgba(0,0,0,.018);
  --specs-label-c:   rgba(0,0,0,.46);
  --specs-value-c:   rgba(0,0,0,.90);
  --specs-accent:    #F4B532;
}

/* ── CONTAINER ────────────────────────────────────────────── */
section#specs-card.specs-card{
  --_x: var(--page-x, 32px);
  width: min(var(--content-w, 1204px), calc(100% - (var(--_x) * 2)));
  margin: 28px auto;
  border-radius: 22px;
  position: relative;
  z-index: 0;
  background:
    radial-gradient(160% 120% at 50% -30%, rgba(255,255,255,.28), transparent 60%),
    rgba(255,255,255,.36);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 18px 36px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(255,255,255,.50),
    inset 0 0 0 1.5px rgba(0,0,0,.06);
}

/* riflesso superiore sottile */
section#specs-card.specs-card::before{
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 28%);
  mix-blend-mode: screen;
  opacity: .55;
  mask: linear-gradient(#000, transparent);
}
section#specs-card.specs-card::after{ display:none; }

/* ── HEADER ───────────────────────────────────────────────── */
#specs-card .specs-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* padding orizzontale = 0: il container #specs-card ha già padding: var(--card-pad).
     padding-top = 0: il card-pad esterno gestisce il margine superiore.
     Così specs-title si allinea allo stesso livello verticale degli altri widget. */
  padding: 0 0 12px;
  position: relative;
  z-index: 1;
}

#specs-card .specs-title{
  margin: 0;
  /* Proprietà separate invece di font shorthand:
     Chrome non parsava correttamente clamp() dentro la shorthand →
     fallback al browser-default h2 (1.5rem = 24px). */
  font-family: "Oswald", system-ui;
  font-weight: 600;
  font-size: clamp(.88rem, 1vw + .5rem, 1.05rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.75);
  /* brand accent bar sinistra */
  padding-left: 14px;
  position: relative;
}
#specs-card .specs-title::before{
  content:"";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 32px; /* uguale a DMX/ACC span bar */
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F4B532, #F3E955);
}

#specs-card .specs-controls{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1;
}

/* ── UNITS — visibility swap pill desktop / DSDropdown mobile.
   Sess.31 FASE 2E introdotto markup `<select.units-select>` come dropdown
   mobile gold-outline. Sess.35 Step 5 sostituito da DSDropdown
   (button.units-mobile-trigger) per coerenza brand cross-widget.
   Il `<select>` resta nel DOM come fallback se DSDropdown non si carica
   (script error) + sync event 'change' bidirezionale, ma sempre hidden
   visivamente (display:none desktop default + mobile @media swap).
   Sess.36 cleanup: rimosse regole visive .units-select (height/padding/
   border/bg SVG/color/font/focus/option + dark mode) — dead code post
   refactor sess.35. Trigger DSDropdown styled da ds-dropdown.css. */
#specs-card .units-select{
  display: none; /* default desktop: select hidden, pill visible */
}
/* sess.35 Step 5: trigger DSDropdown nuovo elemento mobile-only.
   Desktop default hidden — mostrato solo nel @media mobile (linea ~498). */
#specs-card .units-mobile-trigger{
  display: none;
}

/* ── UNITS TOGGLE (legacy) ────────────────────────────────────
   Le rules .units-chip restano per safety in caso di re-binding
   ritardato o componenti che riusano il pattern. Markup attuale
   sess.31 FASE 1e usa <select>, ma .units-chip rules sono ancora
   referenziate da specs-render.js fallback (paranoia). */
#specs-card .units-chip{
  cursor: pointer;
  appearance: none;
  font: 600 .78rem/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 0 .80rem;
  height: 32px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.09);
  color: rgba(0,0,0,.72);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: background .15s, transform .10s, box-shadow .15s;
}
/* Hover gated @media (hover: hover) per evitare sticky-hover iOS Safari.
   Vedi memo feedback_sticky_hover_ios.md — su mobile WebKit lo stato :hover
   resta sticky dopo tap fino al tap successivo altrove → border/bg/transform
   permangono. Gate impedisce attivazione su touch device. */
@media (hover: hover){
  #specs-card .units-chip:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
  }
}
#specs-card .units-chip.is-active{
  background: var(--specs-accent);
  border-color: #C9A800;
  color: #111;
  box-shadow:
    0 0 0 3px rgba(255,208,0,.22),
    0 4px 8px rgba(0,0,0,.10);
}

/* ── TOGGLE "SHOW EXTENDED" ───────────────────────────────── */
#specs-card .specs-toggle{
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 .70rem/1 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .36rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.09);
  color: rgba(0,0,0,.62);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: background .15s, color .15s, box-shadow .15s, transform .10s;
  white-space: nowrap;
}
@media (hover: hover){
  #specs-card .specs-toggle:hover{
    background: rgba(255,255,255,.85);
    color: rgba(0,0,0,.80);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,.09);
  }
}
/* chevron animato via data-open */
#specs-card .specs-toggle::after{
  content: "▾";
  font-size: .75em;
  transition: transform .25s ease;
  display: inline-block;
}
#specs-card.is-open .specs-toggle::after{
  transform: rotate(180deg);
}

/* ── SEPARATOR header → tabella ───────────────────────────── */
#specs-card .specs-head{
  border-bottom: 1px solid rgba(0,0,0,.07);
}

/* ── BODY — zero padding, tabella flush al container ─────── */
#specs-card .specs-body{
  padding: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* 2 colonne quando extended è aperto — desktop */
#specs-card.is-open .specs-body{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px){
  #specs-card.is-open .specs-body{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── GLASS-BOX — trasparente, nessun bordo proprio ────────── */
/* La card esterna (specs-card) è l'unica superficie visiva.  */
/* La glass-box è solo un wrapper di layout.                  */
#specs-card .glass-box{
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
}
/* Separatore verticale tra le due colonne in stato is-open */
#specs-card.is-open .specs-body .glass-box:first-child{
  border-right: 1px solid rgba(0,0,0,.06);
}
/* Arrotondamento inferiore ereditato dal card solo sull'ultimo elemento */
#specs-card .specs-body > .glass-box:last-child,
#specs-card .specs-body > .specs-extended:last-child .glass-box{
  border-radius: 0 0 20px 20px;
}
/* nessun pseudo-elemento residuo */
#specs-card .glass-box::before,
#specs-card .glass-box::after{ display:none; content:none; }

/* ── TABELLA ──────────────────────────────────────────────── */
#specs-card .glass-box .specs-table{
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border: none;
}

/* riga — separatore sottile */
#specs-card .glass-box .specs-table tr{
  border-bottom: 1px solid var(--specs-sep);
  background: transparent;
  box-shadow: none;
  transition: background .12s;
}
#specs-card .glass-box .specs-table tr:last-child{
  border-bottom: 0;
}

/* zebra molto soffice */
#specs-card .glass-box .specs-table tr:nth-child(2n){
  background: var(--specs-row-alt);
}

/* hover row — tint giallo */
@media (hover: hover){
  #specs-card .glass-box .specs-table tr:hover{
    background: var(--specs-row-hover);
  }
}

/* ── LABEL (th) ───────────────────────────────────────────── */
#specs-card .glass-box .specs-table th{
  width: 38%;
  padding: 11px 14px 11px 16px;
  vertical-align: middle;

  font: 700 11px/1.2 "Oswald", system-ui;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--specs-label-c);
  text-shadow: none;

  /* accento giallo a sinistra */
  border-left: 2px solid rgba(244,181,50,.55);
  position: relative;
}

/* ── VALORE (td) ──────────────────────────────────────────── */
#specs-card .glass-box .specs-table td{
  padding: 11px 16px 11px 14px;
  vertical-align: middle;

  font: 500 13.5px/1.4 "Oswald", system-ui;
  letter-spacing: .01em;
  color: var(--specs-value-c);
  text-shadow: none;
}

/* ── PANNELLO ESTESO ──────────────────────────────────────── */
#specs-card .specs-extended{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(0);
  transition:
    max-height .45s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;
}
#specs-card .specs-extended.is-open{
  max-height: var(--specs-maxh);
  opacity: 1;
}

/* ── EXTENDED TABLE — row rhythm alignment ────────────────
   In 2-column layout (is-open) the left (specsCore) and right
   (specsExtra) panels are separate tables so row heights are
   independent.  Setting height on <tr> acts as min-height in
   every major browser: single-line rows stay at 44px; multi-
   line rows expand but at a generous base so the mis-alignment
   between columns stays within one cell, not random fractions. */
#specs-card.is-open .specs-extended .glass-box .specs-table tr{
  height: 44px;         /* acts as min-height on <tr> */
}
#specs-card.is-open .specs-extended .glass-box .specs-table th,
#specs-card.is-open .specs-extended .glass-box .specs-table td{
  padding-top: 11px;
  padding-bottom: 11px;
  vertical-align: middle;
}

/* ── EXTEND CTA (mobile) — pill "↗ Tool esteso" che apre maximize modal.
   Pattern parity .pm-extend-cta (photometrics). Default desktop: hidden
   (l'utente desktop usa la toolbar maximize del side-rail vertical-left).
   Visibile <=640px come secondo CTA visibile in-page.
   Sess.31 FASE 1. */
#specs-card .specs-extend-cta{
  display: none;
}

/* ── MOBILE (≤640px) ──────────────────────────────────────────
   Refactor sess.31 FASE 1 — preview + modal-first:
   1. Header su 2 row (title sopra, controls sotto) — no più wrap caotico
   2. Hide .specs-toggle + .specs-extended (in-page = preview, full nel modal)
   3. Units chips compatti 28px alta, font ridotto
   4. CTA "↗ Tool esteso" visibile, apre DSSpecsMaximize
   5. Tabella padding compatto + font ridotto per leggibilità portrait
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1399.98px){
  section#specs-card.specs-card{ --_x: 12px; }

  /* Header — 2 row: title sopra, controls sotto justify-between.
     Sess.31 FASE 1L fix simmetria percettiva (definitiva):
     padding-bottom 7px → space_below toggle = 7+1+4 = 12px.
     Combinato con gap-row .specs-controls = 16px → space_above 16, sotto 12.
     Δ +4 mat → percettivamente -2 con compensazione bg-tint + border visual
     weight in basso. Utente test: "abbassato di 2px" da baseline 14=14.
     Memo: feedback_simmetria_estetica_fondamentale.md (matematica vs percezione). */
  #specs-card .specs-head{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px 7px;
  }
  #specs-card .specs-title{
    align-self: flex-start;
  }
  #specs-card .specs-controls{
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
  }

  /* Body padding compatto */
  #specs-card .specs-body{ padding: 4px 12px 14px; }
  #specs-card .glass-box .specs-table th,
  #specs-card .glass-box .specs-table td{ padding: 9px 10px; }

  /* Tabella: tipografia leggermente ridotta per portrait <=400px */
  #specs-card .glass-box .specs-table th{ font-size: 10.5px; letter-spacing: .08em; }
  #specs-card .glass-box .specs-table td{ font-size: 12.5px; }

  /* Toggle "MOSTRA SPECIFICHE ESTESE" full-width row 2 (sess.31 FASE 1g).
     User feedback: label completa coerente desktop preferita; pill compatta
     non bastava (24 char letter-spaced non entra in row con units + CTA).
     Layout finale mobile:
     row 1: [units select]                    [↗ Tool esteso]
     row 2: [─── MOSTRA SPECIFICHE ESTESE ▾ ───] full-width
     Pill big tap target, super-discoverable, label premium-IT/EN-canonical. */
  #specs-card .specs-controls{
    flex-wrap: wrap !important; /* permette toggle a wrap su row 2 */
    /* gap-row 16px = abbassa toggle di 2px da baseline 14=14 simmetrico
       matematico. Combinato con head pad-bot 7px (sotto = 7+1+4 = 12):
       - matematica: sopra 16 > sotto 12 (Δ +4)
       - percezione: bg-tint+border peso visivo ~2-3px sotto + bias
         human-visual occupare aria sopra elementi UI = percettivamente
         sopra 16 ≈ sotto 14 ≈ percepito equilibrato.
       Sess.31 FASE 1L post-feedback utente: precedente fix `d65ba72`
       andava in direzione opposta (errore mio interpretazione "abbassato").
       Memo: feedback_simmetria_estetica_fondamentale.md sub-pattern
       "user dice abbassato/alzato di N px" = N px sopra in più / meno. */
    /* gap-row 17px = abbassa toggle di 2px ulteriori (commit precedente
       3fb33ec ridusse erroneamente a 15 = alzato di 1px invece di
       abbassare di 1). Stato: sopra 17, sotto 12 (Δ +5 mat).
       Percezione: bg-tint+border weight ~3-5px sotto compensa →
       sopra 17 ≈ sotto 15-16 percepito = visivamente equilibrato.
       Sess.31 FASE 1M chiusura definitiva loop simmetria. */
    gap: 17px 10px;
  }
  #specs-card .units{ order: 1; }
  #specs-card .specs-extend-cta{ order: 2; margin-left: auto; }
  #specs-card .specs-toggle{
    order: 3;
    flex: 0 0 100%;                 /* full-width row 2 */
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(244,181,50,.45);
    box-shadow: none;
    font: 700 .68rem/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(0,0,0,.78);
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, transform 100ms ease, border-color 160ms ease;
  }
  /* Label mobile = stessa label desktop (coerenza brand) */
  #specs-card .specs-toggle .lbl{
    display: inline;
  }
  /* Nascondo <svg> legacy desktop — uso ::after che ruota con is-open
     (rule esistente CSS originale riga 162). */
  #specs-card .specs-toggle .chev{
    display: none;
  }
  /* Chev unicode più visibile + color gold + dim font matched */
  #specs-card .specs-toggle::after{
    content: "▾";
    font-size: 12px;
    line-height: 1;
    color: rgba(244,181,50,.85);
  }
  #specs-card .specs-toggle:active{
    transform: scale(.98);
    background: rgba(244,181,50,.12);
  }
  /* Tabella estesa: RIMOSSO display:none — restaurata su mobile.
     Stato is-open mobile → single column (default media già esistente),
     no border separatore tra "core" e "estesa" (sono adjacent stacked). */
  #specs-card.is-open .specs-body{ grid-template-columns: minmax(0, 1fr); }
  #specs-card.is-open .specs-body .glass-box:first-child{ border-right: none; }

  /* Mobile: swap pill ↔ trigger DSDropdown visibility (sess.35 Step 5).
     Desktop default = pill visible, select+trigger hidden.
     Mobile (≤640px @media wrap) = pill hidden, DSDropdown trigger visible.
     Native <select> rimane nel DOM hidden — fallback se DSDropdown non
     caricato (script error o caricamento lento) + sync state via change. */
  #specs-card .units-chip{
    display: none !important;
  }
  #specs-card .units-select{
    display: none !important; /* sess.35: hidden mobile, sostituito da DSDropdown */
  }
  #specs-card .units-mobile-trigger{
    display: inline-flex; /* mostrato solo mobile */
  }

  /* CTA "↗ Tool esteso" — outline-only pill, pattern parity photometrics
     (.pm-extend-cta) — background transparent, border gold outline.
     Sess.35 follow-up screenshot iPhone: height 32 → 44 universal touch
     target match DSDropdown trigger (METRIC dropdown sibling). Font 13px
     uniforme con DSDropdown trigger + altre pill famiglia 3. */
  #specs-card .specs-extend-cta{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(244,181,50,.45);
    border-radius: 999px;
    background: transparent;
    color: rgba(0,0,0,.78);
    font: 600 13px/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, transform 100ms ease, box-shadow 160ms ease;
  }
  #specs-card .specs-extend-cta__icon{
    font-size: .95em;
    line-height: 1;
    display: inline-block;
  }
  /* Active state: nessun transform base sull'elemento → solo scale è safe */
  #specs-card .specs-extend-cta:active{
    transform: scale(.96);
    background: rgba(244,181,50,.12);
  }

}

/* Hover gated (sticky_hover_ios) — vale per device pointer:fine */
@media (hover: hover){
  #specs-card .specs-extend-cta:hover{
    background: rgba(244,181,50,.16);
    border-color: rgba(244,181,50,.65);
    box-shadow: 0 4px 10px rgba(244,181,50,.18);
  }
}

/* ── Animation gold flash subtle — feedback visuale quando l'utente
   apre "+ ESTESE" su mobile. La tabella estesa appare sotto la fold,
   il flash della prima riga (background amber che si attenua in 1.5s)
   conferma all'utente che il delta è successo. Combinato con scroll
   smooth (JS) → triple cue: chev rotato + scroll automatico + flash.
   Sess.31 FASE 1f post-feedback boomer-friendliness. */
@keyframes ds-specs-extra-flash{
  0%   { background-color: rgba(244,181,50,.22); }
  60%  { background-color: rgba(244,181,50,.10); }
  100% { background-color: transparent; }
}
@media (max-width: 1399.98px){
  #specs-card.is-open .specs-extended.is-open .specs-extra tbody tr{
    animation: ds-specs-extra-flash 1.5s ease-out 0.2s 1;
  }
}
/* Respect prefers-reduced-motion */
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce){
  #specs-card.is-open .specs-extended.is-open .specs-extra tbody tr{
    animation: none;
  }
}

/* Dark mode — CTA "Tool esteso" outline-only (transparent fill) */
body.ds-dark #specs-card .specs-extend-cta{
  background: transparent;
  border-color: rgba(244,181,50,.45);
  color: rgba(255,255,255,.88);
}
@media (hover: hover){
  body.ds-dark #specs-card .specs-extend-cta:hover{
    background: rgba(244,181,50,.12);
    border-color: rgba(244,181,50,.65);
  }
}

/* Dark mode — toggle "Mostra estese" mobile (chev icon-only) */
@media (max-width: 1399.98px){
  body.ds-dark #specs-card .specs-toggle{
    background: transparent;
    border-color: rgba(244,181,50,.45);
  }
  body.ds-dark #specs-card .specs-toggle::after{
    color: rgba(244,181,50,.92);
  }
}

/* ── DARK MODE ────────────────────────────────────────────── */
body.ds-dark section#specs-card.specs-card{
  background:
    radial-gradient(160% 120% at 50% -30%, rgba(255,255,255,.03), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
body.ds-dark section#specs-card.specs-card::before{ opacity:0; }

body.ds-dark #specs-card .glass-box{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 8px 20px rgba(0,0,0,.40), inset 0 1px rgba(255,255,255,.05);
}
body.ds-dark #specs-card .glass-box .specs-table tr{
  border-bottom-color: rgba(255,255,255,.07);
}
body.ds-dark #specs-card .glass-box .specs-table tr:nth-child(2n){
  background: rgba(255,255,255,.03);
}
@media (hover: hover){
  body.ds-dark #specs-card .glass-box .specs-table tr:hover{
    background: rgba(255,208,0,.05);
  }
}
body.ds-dark #specs-card .glass-box .specs-table th{
  color: rgba(255,255,255,.44);
  border-left-color: rgba(244,181,50,.40);
}
body.ds-dark #specs-card .glass-box .specs-table td{
  color: rgba(255,255,255,.88);
}
body.ds-dark #specs-card .units-chip{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
}
body.ds-dark #specs-card .units-chip.is-active{
  background: var(--specs-accent);
  color: #111;
}
body.ds-dark #specs-card .specs-toggle{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
}
body.ds-dark #specs-card .specs-title{
  color: rgba(255,255,255,.78);
}

/* ── PRODUCT INFO ROW (first row — model + active range) ─────────────────── */
#specs-card .glass-box .specs-product-row{
  background: rgba(244,181,50,.07) !important; /* soft amber tint */
  border-bottom: 1px solid rgba(244,181,50,.22) !important;
}
@media (hover: hover){
  #specs-card .glass-box .specs-product-row:hover{
    background: rgba(244,181,50,.11) !important;
  }
}
#specs-card .glass-box .specs-product-row .specs-product-key{
  border-left-color: #F4B532;  /* stronger amber accent */
  color: var(--specs-label-c);
  font-size: 11px;  /* allineato agli altri th (era 10px — sembrava più piccolo) */
  letter-spacing: .10em;
  opacity: .85;
}
#specs-card .glass-box .specs-product-row .specs-product-val{
  display: flex;
  align-items: center;
  gap: 7px;
}
.specs-product-name{
  font: 700 14px/1 "Oswald", system-ui;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--specs-value-c);
}
.specs-product-sep{
  color: rgba(0,0,0,.25);
  font-size: 12px;
  line-height: 1;
}
.specs-product-range{
  font: 500 12px/1 "Oswald", system-ui;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.52);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(244,181,50,.18);
  border: 1px solid rgba(244,181,50,.30);
}

/* dark mode */
body.ds-dark #specs-card .glass-box .specs-product-row{
  background: rgba(244,181,50,.06) !important;
  border-bottom-color: rgba(244,181,50,.18) !important;
}
@media (hover: hover){
  body.ds-dark #specs-card .glass-box .specs-product-row:hover{
    background: rgba(244,181,50,.10) !important;
  }
}
body.ds-dark .specs-product-sep{
  color: rgba(255,255,255,.22);
}
body.ds-dark .specs-product-range{
  color: rgba(255,208,0,.82);
  background: rgba(244,181,50,.12);
  border-color: rgba(244,181,50,.25);
}