/* ============================================================================
   WIDGET TOOLBAR — "Stage Spotlight v3: Hardware Console"
   ----------------------------------------------------------------------------
   Concept refined: il pannello toolbar è una "estensione fisica" del widget
   stesso (stesso colore glass), con bottoni 3D in rilievo come tasti di una
   console hardware professionale (broadcast/lighting). Niente cornice
   esterna: il widget si solleva LEGGERMENTE e il pannello emerge dal top
   come un'aletta integrata.

   TIMING 3 FASI (gestito da JS):
   - 0-400ms: nulla (mouse di passaggio non innesca)
   - 400ms (teaser): widget micro-lift -1px + shadow appena accenna ("se
     resti succede qualcosa")
   - 850ms totali (reveal): pannello esce sopra il bordo top + lift
     completo + scale leggera
   - mouse out: 200ms di delay prima di richiudere tutto
   ============================================================================ */

/* ── Host del widget: lift fisico graduale (nessuna cornice esterna) ───── */
.has-widget-toolbar{
  position: relative;
  z-index: 1;
  /* Transition smooth — applica a teaser e spotlight */
  transition:
    transform 380ms cubic-bezier(.22, 1, .36, 1),
    filter 380ms cubic-bezier(.22, 1, .36, 1);
}

/* FASE 1 — TEASER: micro-lift (-1px) + shadow leggera che accenna.
   Scattata a 400ms hover dal JS via class .is-teasing. */
.has-widget-toolbar.is-teasing{
  transform: translateY(-1px);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* FASE 2 — SPOTLIGHT: lift completo + scale leggero + drop-shadow accentuata.
   Scattata a 850ms hover dal JS via class .is-spotlight (additiva a is-teasing). */
.has-widget-toolbar.is-spotlight{
  transform: scale(1.005) translateY(-2px);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.16));
  /* z-index 5 (NON 10): tienilo SEMPRE sotto al pbar (z-index 20 normale,
     960 sticky) per evitare bleed-through del rail/toolbar attraverso il
     glass del pbar in dark mode. La toolbar slide-up (translateY -100%) e
     il rail vertical-left (left -36px) escono dal bounding box del host
     e fluttuano nel suo stacking context — devono restare sotto pbar. */
  z-index: 5;
}

body.ds-dark .has-widget-toolbar.is-teasing{
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
}
/* Drop-shadow ridotta in dark mode: blur 36px + opacity .55 estendeva
   il veil ~36px verso l'alto e in dark mode la pill range attiva di
   pbar sticky (vetrosa, non al 100% opaca) lo lasciava trasparire come
   "velo parziale" sopra il pulsante. Feedback utente: "appare un velo
   parziale che si nota sulla pill range attivo di pbar sticky... succede
   solo quando sta apparendo la pulsantiera funzioni extra". Blur ridotto
   a 14px e opacity a .30 rimuove bleed-through senza compromettere il
   senso di lift. */
body.ds-dark .has-widget-toolbar.is-spotlight{
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.30));
}

/* ── Toolbar pannello: "estensione" fisica del widget al top.
      A riposo invisibile dietro il bordo top, a hover spotlight emerge sopra.
      Background = glass coerente con widget cards del sito (NON amber, è
      "stesso materiale" del widget → sembra parte di esso). */
.ds-widget-toolbar{
  position: absolute;
  /* riposo: pannello esattamente sul bordo top del widget, NASCOSTO sotto */
  top: 0;
  right: 16px;
  z-index: 6;

  /* Layout interno: pill orizzontale con bottoni 3D */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;

  /* Forma "linguetta": rounded top, flat bottom (si "aggancia" al widget) */
  border-radius: 12px 12px 0 0;

  /* GLASS coerente con widget cards (uniform widget look del progetto):
     opacità .55 = stesso range dei container glass (.36-.55) → il pannello
     "respira" come estensione del widget, non blocchetto opaco distinto.
     Backdrop blur+saturate fa fondere ulteriormente con lo sfondo pagina. */
  background:
    radial-gradient(160% 120% at 50% 130%, rgba(255,255,255,.42), transparent 60%),
    rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.50);
  border-bottom: none;  /* attaccato al widget, no separatore */

  /* Shadow leggera che dà profondità ma sottile, come un'estensione fisica.
     Negative top shadow per "sollevare" dal widget. */
  box-shadow:
    0 -3px 12px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.85);

  /* Stato riposo: trasparente */
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;

  /* Transition morbida (no overshoot ora — più "professional console") */
  transition:
    opacity 320ms cubic-bezier(.22, 1, .36, 1),
    transform 480ms cubic-bezier(.22, 1, .36, 1);
}

/* Stato spotlight: SLIDE-UP esatto sopra il bordo top del widget (no offset
   cornice perché niente cornice). translateY(-100%) = 100% della propria
   altezza verso l'alto. */
.has-widget-toolbar.is-spotlight .ds-widget-toolbar{
  opacity: 1;
  transform: translateY(-100%);
  pointer-events: auto;
}

/* ── OVERRIDE Hero: la <section.hero> ha .hero-card con margin-top:20px.
      Il bordo VISIBILE del widget è 20px sotto il top del section, quindi
      sposto il pannello giù di 20px per agganciarlo al bordo reale. */
#hero-gallery > .ds-widget-toolbar{
  top: 20px;
}

/* Bug fix storico (ora ridondante: la regola generale .is-spotlight
   sopra è z-index 5 per tutti i widget — risolve l'overlap con pbar
   sia su hero-gallery sia su specs-card/photometrics). Lascio
   l'override esplicito a 5 come safety net se qualcuno alzasse il
   default in futuro. */
#hero-gallery.has-widget-toolbar.is-spotlight{
  z-index: 5 !important;
}

/* ── Bottoni toolbar widget — flat brand giallo (sess.25 flat-ten).
      Pattern coerente con .ds-btn--primary / .kf-rail-btn / .ph-nav-btn:
      microelevation default, glow ambra on hover, scale press on active. */
.ds-widget-toolbar__btn{
  appearance: none;
  cursor: pointer;
  margin: 0;

  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 11px;
  border-radius: 999px;

  /* fill brand giallo + bordo subtle */
  background: #F4B532;
  color: rgba(0,0,0,.88);
  border: 1px solid #C9A800;

  /* tipo brand standard, size compatto da control */
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
  font-size: .70rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;

  /* Flat: microelevation soft, no 3D drop */
  box-shadow: 0 1px 2px rgba(0,0,0,.10);

  transition:
    background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    transform  120ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}

.ds-widget-toolbar__btn:hover{
  background: #E8C000;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(201,168,0,.45),
    0 5px 16px rgba(255,209,0,.35);
}

.ds-widget-toolbar__btn:active{
  transform: translateY(0) scale(0.96);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.ds-widget-toolbar__btn:focus-visible{
  outline: 2px solid #C9A800;
  outline-offset: 2px;
}

/* Icona — eredita black dal button */
.ds-widget-toolbar__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: rgba(0,0,0,.88);
}
.ds-widget-toolbar__icon svg{ display: block; }

/* Label sempre visibile — comunica intent dell'azione */
.ds-widget-toolbar__label{
  display: inline-block;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   Pannello = glass scuro warm coerente con widget dark.
   Bottoni: amber resta acceso (è accent), shadow inferiore neutra. */
body.ds-dark .ds-widget-toolbar{
  /* Glass scuro warm coerente con widget dark, opacità ridotta per
     integrazione visiva (range .55-.70 stesso dei container dark). */
  background:
    radial-gradient(160% 120% at 50% 130%, rgba(255,255,255,.06), transparent 60%),
    rgba(40,36,28,.62);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 -3px 12px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.10);
}
body.ds-dark .ds-widget-toolbar__btn{
  background: #F4B532;
  color: rgba(0,0,0,.88);
  border-color: #C9A800;
  /* Flat: microelevation più marcata su dark */
  box-shadow: 0 1px 4px rgba(0,0,0,.50);
}
body.ds-dark .ds-widget-toolbar__btn:hover{
  background: #E8C000;
  box-shadow:
    0 0 0 1px rgba(201,168,0,.55),
    0 5px 20px rgba(255,209,0,.40),
    0 1px 4px rgba(0,0,0,.50);
}
body.ds-dark .ds-widget-toolbar__icon{ color: rgba(0,0,0,.88); }

/* ════════════════════════════════════════════════════════════════════════
   VARIANTE — VERTICAL-LEFT SIDE RAIL
   Per widget specs-card e photometrics: rail laterale verticale ancorato
   al lato sinistro del widget, sempre visibile, altezza piena container.
   ════════════════════════════════════════════════════════════════════════ */

/* Host con rail verticale: condivide il pattern lift/spotlight con
   l'horizontal-top. La regola base .has-widget-toolbar applica lift
   in is-teasing (-1px) e is-spotlight (scale + translateY -2px).
   overflow: visible esplicito per consentire al rail di sporgere
   fuori dal box widget (left: -52px). */
.has-widget-toolbar--vertical{
  overflow: visible !important;
}

/* Rail HOVER-REVEALED: stesso pattern dell'horizontal-top (teaser
   400ms + spotlight 850ms). A riposo: nascosto fuori bordo sx, opacity
   0, no pointer-events. Su .has-widget-toolbar.is-spotlight: slide-in
   da sx + fade.
   ATTACCATO al bordo del widget: left = -36px (= width esatta del rail
   senza gap). Il bordo destro del rail tocca il bordo sinistro del
   widget — visivamente sembra estensione fisica del container.
   border-right invisibile + border-radius solo a sx per dare
   continuità estetica con il widget. */
.ds-widget-toolbar--vertical-left{
  position: absolute !important;
  /* Rail FLUSH al bordo del widget: width = 40px, left = -40px → bordo
     destro del rail allineato esattamente al bordo sinistro del widget.
     Nessuna sovrapposizione (feedback utente, dopo accorciamento verticale:
     "con rail corteo tornerei a metterlo in linea con il bordo del
     widget non più leggermente sovrapposto"). Width 40px (era 36px) per
     dare al pulsante 28×28 più aria intorno e centratura più equilibrata
     (feedback iterativo: "il bottone sia un pelo fuori proporzione
     rispetto alla larghezza della barra... ingrandire un pelino la barra
     e centrerei il pulsante"). Padding inline orizzontale azzerato e
     bottone centrato via align-items: center sul flex. */
  left: -40px !important;
  right: auto !important;
  /* Estensione verticale = solo la PARTE LINEARE del bordo del widget.
     I widget host (specs-card, photometrics) hanno border-radius: 22px
     → la rail è inset di 22px top/bottom così non sporge dietro gli
     angoli arrotondati creando "buchi" visivi. Feedback utente:
     "andava anche bene rendere la barra più corta alta solo quanto la
     parte lineare del widget senza arrivare a angoli". */
  top: 22px !important;
  bottom: 22px !important;
  z-index: 4;

  /* Layout interno: colonna verticale con bottoni stacked */
  display: flex !important;
  flex-direction: column !important;
  /* Bottone 28×28 centrato orizzontalmente sulla rail di 40px (margine ~6px
     ciascun lato). Feedback utente: "ingrandirei un pelino la barra e
     centrerei il pulsante". */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 10px 0 10px 0 !important;
  /* Width 40px = rail un pelo più larga + bottone centrato (no overlap). */
  width: 40px !important;
  /* Solo lato sx rounded (il dx tocca il widget, evitiamo dx rounded
     così resta visivamente continuo con il widget) */
  border-radius: 10px 0 0 10px !important;

  /* STATO RIPOSO: nascosto, slide-out a sinistra, no interazione */
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-8px) !important;
  transition:
    opacity 320ms cubic-bezier(.22, 1, .36, 1),
    transform 480ms cubic-bezier(.22, 1, .36, 1),
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 240ms ease !important;

  /* Background discreto + bordo coerente con widget. Il bordo destro è
     trasparente (transitivo verso il widget), gli altri tre amber. */
  background:
    linear-gradient(180deg, rgba(244,181,50,.10), rgba(244,181,50,.04)) !important;
  border: 1px solid rgba(244,181,50,.30) !important;
  border-right-color: transparent !important;
  border-bottom: 1px solid rgba(244,181,50,.30) !important;
  box-shadow: -2px 4px 12px rgba(0,0,0,.06) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
          backdrop-filter: blur(8px) saturate(140%) !important;
}

/* Hover bridge: pseudo-element che estende l'hit-area del host fino
   alla zona del rail (left -36px → 0px). Senza questo, il mouse che
   esce dal widget per andare verso il rail attraversava un'area "vuota"
   e il browser scattava mouseleave del host → fade-out rail. Con
   pseudo-element figlio del host, l'area è coperta e mouseleave non
   scatta finché il mouse è sul rail o sul bridge. */
.has-widget-toolbar--vertical::before{
  content: '';
  position: absolute;
  left: -40px;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: auto;
  z-index: 3;
}
.has-widget-toolbar--vertical:not(.is-teasing):not(.is-spotlight)::before{
  /* A riposo: nessun hit-area pseudo, evitiamo trap del cursore quando
     il rail non è in spotlight. Mouse passa attraverso. */
  pointer-events: none;
}

/* SPOTLIGHT (post 850ms hover): rail visibile, slide-in completo */
.has-widget-toolbar.is-spotlight .ds-widget-toolbar--vertical-left{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* TEASER (400ms hover, sub-stato is-teasing): mini-anteprima — rail
   appena accenna ma resta non-cliccabile per evitare hit accidentali */
.has-widget-toolbar.is-teasing:not(.is-spotlight) .ds-widget-toolbar--vertical-left{
  opacity: 0.30 !important;
  transform: translateX(-6px) !important;
}

/* Bottoni rail: solo icone, label come tooltip on-hover (compatto).
   Override del pattern brand pill: qui sono bottoni square 28x28.
   Hover lift + glow per feedback fisico tasti console. */
.ds-widget-toolbar--vertical-left .ds-widget-toolbar__btn{
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  position: relative;
  /* Override pattern pill orizzontale (gap:6 + padding asymm): qui il
     button è square e contiene SOLO l'icona (label è tooltip absolute).
     Centro perfetto via flex. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  transition:
    transform 120ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 160ms ease,
    background 160ms ease !important;
}
.ds-widget-toolbar--vertical-left .ds-widget-toolbar__btn:hover{
  transform: translateX(1px) scale(1.05) !important;
  /* Flat: glow ambra coerente con altri widget toolbar */
  box-shadow:
    0 0 0 1px rgba(201,168,0,.45),
    0 5px 16px rgba(255,209,0,.35) !important;
}
.ds-widget-toolbar--vertical-left .ds-widget-toolbar__btn:active{
  transform: translateX(1px) scale(0.98) !important;
}

/* Label: nascosta visivamente ma resta accessibile via title (set da JS).
   Mostriamo via tooltip absolute on-hover a destra del bottone. */
.ds-widget-toolbar--vertical-left .ds-widget-toolbar__label{
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font: 600 .65rem/1 "Oswald", system-ui;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
  z-index: 10;
}
.ds-widget-toolbar--vertical-left .ds-widget-toolbar__btn:hover .ds-widget-toolbar__label,
.ds-widget-toolbar--vertical-left .ds-widget-toolbar__btn:focus-visible .ds-widget-toolbar__label{
  opacity: 1;
}

/* Light mode rail variant */
body:not(.ds-dark) .ds-widget-toolbar--vertical-left{
  background:
    linear-gradient(180deg, rgba(244,181,50,.08), rgba(244,181,50,.02)) !important;
  border-color: rgba(200,150,30,.25) !important;
}
body:not(.ds-dark) .ds-widget-toolbar--vertical-left:hover{
  background:
    linear-gradient(180deg, rgba(244,181,50,.14), rgba(244,181,50,.05)) !important;
  border-color: rgba(200,150,30,.40) !important;
}

/* Mobile (≤920px): la rail si sposta sopra il widget orizzontale per non
   bruciare spazio orizzontale già scarso. */
@media (max-width: 920px){
  .has-widget-toolbar--vertical{
    padding-left: 0 !important;
    padding-top: 44px !important;
  }
  .ds-widget-toolbar--vertical-left{
    flex-direction: row !important;
    width: auto !important;
    height: 36px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    top: 4px !important;
    justify-content: flex-start !important;
    padding: 6px 8px !important;
  }
  .ds-widget-toolbar--vertical-left .ds-widget-toolbar__label{
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — LA LINGUETTA NON ESCE PIU' DAL RIQUADRO · 11/09/2026

   ⛔ David, h08:33: «se resti col mouse sull'hero e appare il pulsante schermo
   intero, sulla range pill compare un rettangolino semitrasparente».

   Misurato su product-f7 a 1440: con l'hero in spotlight la linguetta sta a
   y 281-326, e `.pb-wrap` (la barra prodotto, con la pill del range e i badge)
   arriva a y 294. Si sovrappongono. Su un portatile, dove la barra prodotto e'
   piu' alta perche' il titolo va a capo, la sovrapposizione arriva proprio
   sulla pill.

   🔑 LA CAUSA NON E' LO Z-INDEX — ed e' per questo che il rattoppo storico qui
   sopra (`z-index: 5 !important`) non l'ha mai risolto davvero. La linguetta
   e' fatta per EMERGERE DAL BORDO ALTO del widget: `translateY(-100%)` la porta
   FUORI dal proprio riquadro, per 45 px. Sugli altri widget sopra c'e' aria e
   funziona benissimo. Sull'hero sopra c'e' la barra prodotto.
   ⇒ Un pannello vetro con `backdrop-filter` che passa dietro un altro pannello
   vetro non sparisce: si vede. Abbassarne l'ordine lo rende PIU' FIOCO, non
   assente — ed e' esattamente «un rettangolino semitrasparente».

   ⇒ Sull'hero, e SOLO sull'hero, la linguetta resta DENTRO: si aggancia al
   bordo alto dal di dentro invece che dal di fuori. Stessa comparsa, stessi
   bottoni, stesso vetro. Non puo' piu' toccare niente perche' non esce.
   🔑 La regola: un elemento che esce dal proprio riquadro va bene finche' lo
   spazio fuori e' suo. Qui non lo era, e non lo e' mai stato.
   ══════════════════════════════════════════════════════════════════════════ */
#hero-gallery.has-widget-toolbar.is-spotlight > .ds-widget-toolbar{
  transform: translateY(0);
  /* linguetta appesa al bordo alto: gli angoli tondi vanno sotto */
  border-radius: 0 0 12px 12px;
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,.50);
  box-shadow:
    0 3px 12px rgba(0,0,0,.10),
    inset 0 -1px 0 rgba(255,255,255,.85);
}
/* Il riposo parte un filo piu' su, cosi' la comparsa resta un movimento e non
   un lampo: scende dentro il riquadro invece di salirne fuori. */
#hero-gallery > .ds-widget-toolbar{
  transform: translateY(-6px);
}
body.ds-dark #hero-gallery.has-widget-toolbar.is-spotlight > .ds-widget-toolbar{
  border-bottom-color: rgba(255,255,255,.16);
  box-shadow: 0 3px 12px rgba(0,0,0,.34);
}