/* =====================================================================
   SHELL — compact topbar navigation (Model A)
   Replaces the full-width journey nav + step-2 title header + section nav +
   under-viewer price/CTA with one sticky topbar (≤56px). Brand-token driven
   (reuses the --f5-* OKLCH aliases defined in fase5.css). No !important.
   Scope: #asg-configuratore-wrapper.asg-shell-immersive
   ===================================================================== */

#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  min-height: 56px; padding: 8px 14px; margin: 0 0 18px;
  border-radius: 16px;
  background: var(--f5-glass-2, rgba(10, 15, 28, .9));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--f5-line, rgba(255, 255, 255, .08));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---- lead: back + brand + model name ---- */
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-lead {
  display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-back {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--f5-line, rgba(255,255,255,.08));
  color: #dbe6f3; font-size: 14px;
  transition: background var(--f5-fast, 140ms) var(--f5-ease, ease), transform var(--f5-fast, 140ms) var(--f5-spring, ease);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-back:hover { background: rgba(255, 255, 255, .12); }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-back:active { transform: scale(.94); }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-brand {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-logo {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; object-fit: contain;
  background: rgba(255, 255, 255, .04);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-logo-fallback {
  display: grid; place-items: center; color: var(--f5-accent, #00d4aa); font-size: 16px;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-titles {
  display: grid; gap: 1px; min-width: 0;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--f5-accent, #00d4aa); line-height: 1;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-model {
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}

/* ---- stepper (overrides legacy .asg-config-sections-nav grid layout) ---- */
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper {
  flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 6px;
  min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  overflow-x: auto; scrollbar-width: none;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper::-webkit-scrollbar { display: none; }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 14px; border-radius: 11px; border: 1px solid transparent;
  background: transparent; color: var(--f5-muted, #9bb0cf);
  font-size: 13px; font-weight: 700; letter-spacing: .005em; cursor: pointer; min-height: 40px;
  transition: background var(--f5-base, 220ms) var(--f5-ease, ease), color var(--f5-fast, 140ms) var(--f5-ease, ease), transform var(--f5-fast, 140ms) var(--f5-spring, ease);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep .asg-topstep-n {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: rgba(255, 255, 255, .08); color: inherit;
  transition: background var(--f5-base, 220ms) var(--f5-ease, ease), color var(--f5-base, 220ms) var(--f5-ease, ease);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep:hover {
  color: #fff; background: rgba(255, 255, 255, .05);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep:active { transform: scale(.97); }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep.is-complete {
  color: #d8eee7;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep.is-complete .asg-topstep-n {
  background: color-mix(in srgb, var(--f5-accent, #00d4aa) 28%, transparent);
  color: var(--f5-accent, #00d4aa);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep.is-active {
  color: var(--f5-accent-contrast, #04121a);
  background: linear-gradient(135deg, var(--f5-accent, #00d4aa), var(--f5-accent-strong, #008a6e));
  box-shadow: 0 4px 16px -4px var(--f5-accent, #00d4aa);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep.is-active .asg-topstep-n {
  background: rgba(0, 0, 0, .18); color: var(--f5-accent-contrast, #04121a);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep:focus-visible {
  outline: 2px solid var(--f5-focus, #38e0bd); outline-offset: 2px;
}

/* ---- trail: gear + price + CTA ---- */
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-trail {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-gear {
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center; color: #dbe6f3; font-size: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--f5-line, rgba(255,255,255,.08));
  transition: background var(--f5-fast, 140ms) var(--f5-ease, ease);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-gear:hover { background: rgba(255, 255, 255, .12); }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-gear.is-active {
  background: color-mix(in srgb, var(--f5-accent, #00d4aa) 18%, transparent); color: #fff;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-price {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 0 4px;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-price .price-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--f5-muted, #9bb0cf);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-price .price-value {
  display: inline-flex; align-items: baseline; gap: 3px;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-price .currency { color: var(--f5-muted, #9bb0cf); font-size: 14px; font-weight: 700; }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-price #asg-total-price {
  font-size: 21px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-price.is-price-bumping #asg-total-price { /* count-up bump from fase5 */ }

#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 12px; cursor: pointer; min-height: 40px;
  background: linear-gradient(135deg, var(--f5-accent, #00d4aa), var(--f5-accent-strong, #008a6e));
  color: var(--f5-accent-contrast, #04121a); border: 1px solid transparent;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  transition: transform var(--f5-fast, 140ms) var(--f5-spring, ease), box-shadow var(--f5-base, 220ms) var(--f5-ease, ease), filter var(--f5-fast, 140ms) var(--f5-ease, ease);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px var(--f5-accent, #00d4aa); }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta:disabled,
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta-2 {
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--f5-line-2, rgba(255,255,255,.14)); color: #dbe6f3;
  transition: background var(--f5-fast, 140ms) var(--f5-ease, ease);
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta-2:hover { background: rgba(255, 255, 255, .12); }

/* ---- state-driven visibility ---- */
/* models catalog: only brand is meaningful */
#asg-configuratore-wrapper.asg-shell-immersive.asg-state-models .asg-topbar-back,
#asg-configuratore-wrapper.asg-shell-immersive.asg-state-models .asg-topbar-stepper,
#asg-configuratore-wrapper.asg-shell-immersive.asg-state-models .asg-topbar-gear,
#asg-configuratore-wrapper.asg-shell-immersive.asg-state-models .asg-topbar-cta,
#asg-configuratore-wrapper.asg-shell-immersive.asg-state-models .asg-topbar-cta-2,
#asg-configuratore-wrapper.asg-shell-immersive.asg-state-models .asg-topbar-price { display: none; }
#asg-configuratore-wrapper.asg-shell-immersive.asg-state-models .asg-topbar { min-height: 52px; }

/* ---- compact the now-redundant live bar (kept for JS targets) ---- */
#asg-configuratore-wrapper.asg-shell-immersive .asg-config-live-primary { display: none; }
#asg-configuratore-wrapper.asg-shell-immersive .asg-config-live-bar {
  padding: 10px 14px; background: transparent; border-color: transparent; box-shadow: none;
}
#asg-configuratore-wrapper.asg-shell-immersive .asg-config-live-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- slim the under-viewer dock (now: meta + summary chips + footer) ---- */
#asg-configuratore-wrapper.asg-shell-immersive .asg-viewer-bottom-dock .asg-dock-inline-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep,
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta,
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-back { transition-duration: .001ms; }
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep .asg-topstep-l { display: none; }
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep { padding: 8px 10px; }
}
@media (max-width: 767px) {
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar {
    flex-wrap: wrap; gap: 10px 12px; min-height: 0; padding: 8px 12px;
  }
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-lead { order: 1; flex: 1 1 auto; }
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-trail { order: 2; flex: 0 0 auto; }
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper { order: 3; flex: 1 0 100%; justify-content: flex-start; }
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-stepper .asg-topstep .asg-topstep-l { display: inline; }
  /* on phones the full CTA label is dropped; icon-only Preventivo */
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta .asg-topbar-cta-label { display: none; }
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-cta { padding: 9px 12px; }
  #asg-configuratore-wrapper.asg-shell-immersive .asg-topbar-model { max-width: 14ch; }
}