/* ═════════════════════════════════════════════════════════════
   PG SRL · CONFIGURATORE
   - HERO: in linea col tema del sito (light/dark)
   - SHELL/CRUSCOTTO: sempre scuro morbido (è un'app industriale)
   - Tutti i selettori prefissati .cfg- per evitare cascate dal sito
   ═════════════════════════════════════════════════════════════ */

/* ───── EFFETTO B — SVG line-trace solo sulle quote dimensionali ─────
   Solo le linee di quota (.dim-line, .crosshair) e i testi (.dim-text) si
   "ridisegnano" da zero. La foto macchina <image> resta stabile per evitare
   il flash bianco di re-decoding. */
@keyframes cfgSvgTrace {
  0%   { stroke-dashoffset: 320; opacity: 0.2; }
  100% { stroke-dashoffset: 0;   opacity: 1;   }
}
@keyframes cfgSvgFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#cfgSvg.is-redrawing .dim-line,
#cfgSvg.is-redrawing .crosshair,
.cfg-dim-group.is-redrawing .dim-line {
  stroke-dasharray: 320;
  animation: cfgSvgTrace 0.55s cubic-bezier(.22,.7,.22,1) both;
}
#cfgSvg.is-redrawing .dim-text,
.cfg-dim-group.is-redrawing .dim-text {
  animation: cfgSvgFadeIn 0.4s ease both;
  animation-delay: 0.15s;
}



/* ───────── HERO (segue tema sito) ───────── */
.cfg-hero {
  background: var(--bg, #FAFAF7) !important;
  color: var(--ink, #0A0A0A) !important;
  padding: clamp(72px, 8vw, 128px) clamp(24px, 5vw, 80px) clamp(32px, 4vw, 56px) !important;
  position: relative;
  overflow: hidden;
}
.cfg-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .cfg-hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}
.cfg-hero-inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 2; }
.cfg-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55) !important;
  margin-bottom: 32px;
}
[data-theme="dark"] .cfg-hero-eyebrow { color: rgba(255,255,255,0.55) !important; }
.cfg-hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #E30613;
  box-shadow: 0 0 12px rgba(227,6,19,0.8);
  animation: cfgDotPulse 2s ease-in-out infinite;
}
@keyframes cfgDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.cfg-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 24px 0;
  color: var(--ink, #0A0A0A) !important;
}
[data-theme="dark"] .cfg-hero-title { color: #fff !important; }
.cfg-hero-title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, #E30613 0%, #ff5a6c 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  display: inline-block;
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.cfg-hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(0,0,0,0.65) !important;
  max-width: 60ch;
  margin: 0;
}
[data-theme="dark"] .cfg-hero-sub { color: rgba(255,255,255,0.7) !important; }

/* ═══════════════════════════════════════════════════════════════
   SHELL — CRUSCOTTO INDUSTRIALE (sempre scuro morbido)
   ═══════════════════════════════════════════════════════════════ */
.cfg-shell {
  /* Variabili scope-locali del cruscotto: lavorano sempre su scuro */
  --c-bg: #0E0E10;
  --c-bg-2: #161618;
  --c-bg-3: #1C1C1F;
  --c-line: rgba(255,255,255,0.08);
  --c-line-strong: rgba(255,255,255,0.15);
  --c-ink: #FAFAFA;
  --c-ink-2: rgba(255,255,255,0.7);
  --c-ink-3: rgba(255,255,255,0.5);
  --c-ink-4: rgba(255,255,255,0.32);
  --c-red: #E30613;
  --c-red-soft: rgba(227,6,19,0.12);

  background: var(--c-bg) !important;
  color: var(--c-ink) !important;
  padding: 0 !important;
  position: relative;
}
/* Mobile: la nav è position:sticky (v3 2026-05-13) dentro .cfg-shell.
   Sticky è scoped al parent, quindi la nav ESCE NATURALMENTE dal flusso
   quando l'utente scrolla oltre il container del configuratore. Non
   serve più il padding-bottom di compensazione (era necessario solo
   per la versione fixed che restava attaccata al viewport). */

/* ─────────────────────────────────────────────────────────────────
   FUORI DAL CONFIGURATORE — hide nav + pill quando l'utente scrolla
   oltre il .cfg-shell (es. nel footer). IntersectionObserver in
   configurator.js (initCfgOutOfViewHide) toggla la classe sul body.
   Senza questo, la nav mobile (position:fixed) resterebbe attaccata
   al fondo dello schermo anche su contenuti che non c'entrano col
   configuratore. Su desktop la nav è sticky e si auto-nasconde col
   container — ma applichiamo il toggle su entrambi per coerenza.
   ─────────────────────────────────────────────────────────────── */
body.cfg-shell-out-of-view .cfg-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(110%) !important;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(.22,.7,.22,1) !important;
}
body.cfg-shell-out-of-view .cfg-scroll-chevron {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Linea rossa hairline in cima */
.cfg-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-red) 50%, transparent);
  opacity: 0.7;
  z-index: 5;
}
.cfg-grid {
  display: grid;
  grid-template-columns: minmax(360px, 40%) 1fr;
  min-height: 90vh;
  max-width: 1600px;
  margin: 0 auto;
}

/* ───────── LEFT: Summary ───────── */
.cfg-summary {
  background: var(--c-bg-2);
  border-right: 1px solid var(--c-line);
  position: relative;
}
.cfg-summary-inner {
  position: sticky;
  top: 0;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 90vh;
}
.cfg-kicker {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.3em;
  color: var(--c-red) !important;
  text-transform: uppercase;
}

/* SVG canvas */
.cfg-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(227,6,19,0.06) 0%, transparent 60%),
    var(--c-bg) !important;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
}
.cfg-canvas::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.cfg-canvas svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.cfg-canvas .frame { fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 1.5; }
.cfg-canvas .frame-fill { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.7); stroke-width: 1.5; }
.cfg-canvas .accent { fill: none; stroke: var(--c-red); stroke-width: 2; }
.cfg-canvas .accent-fill { fill: rgba(227,6,19,0.18); stroke: var(--c-red); stroke-width: 1.5; }
.cfg-canvas .dim-line { stroke: rgba(255,255,255,0.45); stroke-width: 1; stroke-dasharray: 3 3; }
.cfg-canvas .dim-text {
  fill: rgba(255,255,255,0.7);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.cfg-canvas .dim-text-accent { fill: var(--c-red); }
.cfg-canvas .label {
  fill: rgba(255,255,255,0.5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.cfg-canvas .crosshair { stroke: rgba(255,255,255,0.22); stroke-width: 0.5; }
.cfg-canvas .ram, .cfg-canvas .bed, .cfg-canvas .upright {
  transition: all 0.6s cubic-bezier(.22,.7,.22,1);
}

/* Meta grid */
.cfg-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.cfg-meta-cell {
  padding: 14px 16px;
  background: var(--c-bg-2);
}
.cfg-meta-cell .lbl {
  display: block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.2em;
  color: var(--c-ink-3) !important;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cfg-meta-cell .val {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 22px !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ink) !important;
  line-height: 1;
}
.cfg-meta-cell .val.empty { color: var(--c-ink-4) !important; }
.cfg-meta-cell .val.tech { color: var(--c-red) !important; }

/* Price */
.cfg-price {
  border-top: 1px solid var(--c-line);
  padding-top: 24px;
  margin-top: auto;
}
.cfg-price-lbl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.2em;
  color: var(--c-ink-3) !important;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cfg-price-bars {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.cfg-price-bars span {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  transition: background 0.4s ease;
}
.cfg-price-bars span.active { background: var(--c-red); }
.cfg-price-note {
  font-size: 11px !important;
  color: var(--c-ink-4) !important;
  line-height: 1.4;
}

/* ───────── RIGHT: Main ───────── */
.cfg-main {
  padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 64px);
  display: flex;
  flex-direction: column;
  min-height: 90vh;
  background: var(--c-bg);
}

/* Progress */
.cfg-progress {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: clamp(32px, 4vw, 56px);
  position: relative;
}
.cfg-progress::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px; right: 11px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  z-index: 0;
}
.cfg-step {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: opacity 0.2s;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.cfg-step:not(.active):not(.done) { opacity: 0.45; }
.cfg-step:not(.active):not(.done):hover { opacity: 0.75; }
.cfg-dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background: var(--c-bg) !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  margin-bottom: 12px;
  position: relative;
  transition: all 0.3s;
  display: block;
}
.cfg-step.active .cfg-dot {
  border-color: var(--c-red) !important;
  background: var(--c-red) !important;
  box-shadow: 0 0 0 4px rgba(227,6,19,0.2), 0 0 16px rgba(227,6,19,0.55);
}
.cfg-step.done .cfg-dot {
  border-color: var(--c-red) !important;
  background: var(--c-red) !important;
}
.cfg-step.done .cfg-dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}
.cfg-step-lbl {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.18em;
  color: var(--c-ink-2) !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.cfg-step.active .cfg-step-lbl { color: var(--c-ink) !important; }

/* Phase content */
.cfg-phase { flex: 1; display: flex; flex-direction: column; }
.cfg-phase-head { margin-bottom: 32px; }
.cfg-phase-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.25em;
  color: var(--c-red) !important;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cfg-phase-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  margin: 0 0 12px 0 !important;
  color: var(--c-ink) !important;
}
.cfg-phase-sub {
  font-size: 15px !important;
  line-height: 1.55;
  color: var(--c-ink-2) !important;
  max-width: 60ch;
  margin: 0 !important;
}

/* Question groups */
.cfg-q { margin-bottom: 36px; }
.cfg-q-label {
  display: block;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.2em;
  color: var(--c-ink-3) !important;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cfg-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cfg-option {
  padding: 12px 18px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: var(--c-ink) !important;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  letter-spacing: 0;
}
.cfg-option:hover {
  border-color: rgba(255,255,255,0.55) !important;
  transform: translateY(-1px);
  background: rgba(255,255,255,0.03) !important;
}
.cfg-option.sel {
  background: var(--c-red) !important;
  border-color: var(--c-red) !important;
  color: #fff !important;
}
.cfg-option[disabled],
.cfg-option.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tech cards (Phase 2) */
.cfg-tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .cfg-tech-grid { grid-template-columns: 1fr; }
}
.cfg-tech-card {
  background: var(--c-bg-2) !important;
  border: 1px solid var(--c-line-strong) !important;
  padding: 28px !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.22,.7,.22,1);
  position: relative;
  overflow: hidden;
  text-align: left;
  font-family: inherit !important;
  color: var(--c-ink) !important;
}
.cfg-tech-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--c-red);
  transition: width 0.5s cubic-bezier(.22,.7,.22,1);
}
.cfg-tech-card:hover {
  border-color: rgba(255,255,255,0.3) !important;
  transform: translateY(-2px);
  background: var(--c-bg-3) !important;
}
.cfg-tech-card:hover::before { width: 100%; }
.cfg-tech-card.sel {
  border-color: var(--c-red) !important;
  background: linear-gradient(180deg, rgba(227,6,19,0.1) 0%, var(--c-bg-2) 100%) !important;
  box-shadow: 0 0 0 1px rgba(227,6,19,0.35), 0 8px 24px -10px rgba(227,6,19,0.4);
}
.cfg-tech-card.sel::before { width: 100%; height: 3px; }
.cfg-tech-card.dimmed { opacity: 0.5; }

/* When phase 2 first appears with a recommended tech already selected, give
   the .sel card a one-shot highlight so the user immediately notices that one
   has been pre-picked. The class is added by JS on phase enter and removed
   right after the animation completes. */
@keyframes cfgTechCardArrive {
  0%   { box-shadow: 0 0 0 0   rgba(227,6,19,0);    transform: translateY(0); }
  35%  { box-shadow: 0 0 0 10px rgba(227,6,19,0.25); transform: translateY(-3px); }
  100% { box-shadow: 0 0 0 1px rgba(227,6,19,0.35), 0 8px 24px -10px rgba(227,6,19,0.4); transform: translateY(0); }
}
.cfg-tech-card.sel.cfg-arrived {
  animation: cfgTechCardArrive 1s cubic-bezier(.22,.7,.22,1);
}

.cfg-tech-badge {
  position: absolute;
  top: 16px; right: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--c-red);
  color: #fff;
  border-radius: 2px;
}
.cfg-tech-glyph {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.55);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(.34, 1.4, .64, 1);
}
.cfg-tech-glyph svg { width: 100%; height: 100%; display: block; }
.cfg-tech-card.sel .cfg-tech-glyph {
  color: var(--c-red);
  transform: scale(1.08);
}
.cfg-tech-card:hover:not(.sel) .cfg-tech-glyph { color: rgba(255,255,255,0.85); }
.cfg-tech-badge.alt {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
}
.cfg-tech-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--c-ink);
}
.cfg-tech-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-red);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.cfg-tech-payoff {
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-ink);
  margin-bottom: 18px;
}
.cfg-tech-vantaggi {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cfg-tech-vantaggi li {
  font-size: 13px;
  color: var(--c-ink-2);
  padding-left: 16px;
  position: relative;
}
.cfg-tech-vantaggi li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-red);
}
.cfg-tech-range {
  border-top: 1px solid var(--c-line);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--c-ink-3);
}
.cfg-tech-range strong {
  color: var(--c-ink);
  font-weight: 500;
}

/* Niche hint */
.cfg-niche-hint {
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(227,6,19,0.07);
  border: 1px solid rgba(227,6,19,0.22);
  border-radius: 4px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cfg-niche-hint-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--c-red);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--c-red);
  font-weight: 700;
}
.cfg-niche-hint-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink);
}
.cfg-niche-hint-text strong { color: #fff; }
.cfg-niche-hint-link {
  margin-top: 6px;
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-red);
  text-decoration: none;
  border-bottom: 1px solid var(--c-red);
  cursor: pointer;
}

/* ─── Sliders premium (graduazione tipo righello + fill rosso + knob lift) ─── */
.cfg-slider {
  position: relative;
  margin-top: 18px;
  padding: 14px 0 8px;
}

/* Track: barra di base + barra di riempimento (gradiente rosso da sx a knob) */
.cfg-slider-track {
  position: relative;
  height: 4px;
  cursor: pointer;
  touch-action: none;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin: 0 12px;
  /* la fill è disegnata via ::before con --fill-pct messa da JS */
  --fill-pct: 0%;
}
[data-theme="light"] .cfg-slider-track { background: rgba(0,0,0,0.08); }
.cfg-slider-track::before {
  content: "";
  position: absolute;
  /* Fill must start from the FIRST ENABLED tick (--heat-start), not from
     the absolute left edge — otherwise the red line under the disabled
     zone looks like the user could drag back into invalid values. */
  top: 0;
  bottom: 0;
  left: var(--heat-start, 0%);
  width: max(0px, calc(var(--fill-pct) - var(--heat-start, 0%)));
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-red) 50%, transparent), var(--c-red));
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-red) 40%, transparent);
  transition: left 0.18s cubic-bezier(.2,.8,.2,1), width 0.18s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.cfg-slider-track.cfg-slider-dragging::before {
  transition: none; /* live durante drag */
}
.cfg-slider-track.cfg-slider-dragging { cursor: grabbing; }

/* Tick container: si distribuisce e mantiene allineamento con i numeri sotto */
.cfg-slider-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tick non attivo: tacca verticale */
.cfg-slider-tick {
  width: 1px !important;
  height: 10px !important;
  background: rgba(255,255,255,0.32);
  position: relative;
  cursor: pointer;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  transition: height .18s ease, background .18s ease;
  outline: none;
}
[data-theme="light"] .cfg-slider-tick { background: rgba(0,0,0,0.28); }

/* Hit area generosa */
.cfg-slider-tick::before {
  content: "";
  position: absolute;
  inset: -10px -8px;
  z-index: 1;
}

/* Ogni 5° tick: più alto (graduazione tipo righello) */
.cfg-slider-tick:nth-child(5n+1) {
  height: 16px !important;
  background: rgba(255,255,255,0.5);
}
[data-theme="light"] .cfg-slider-tick:nth-child(5n+1) {
  background: rgba(0,0,0,0.4);
}

/* Tick disabilitato: opacity gradiente + diagonal pattern */
.cfg-slider-tick.disabled {
  opacity: 0.22;
  cursor: not-allowed;
  background: repeating-linear-gradient(
    -35deg,
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.5) 2px,
    transparent 2px,
    transparent 4px
  );
}
.cfg-slider-tick.disabled::before { cursor: not-allowed; }

/* Hover su tick abilitato: lift leggero */
.cfg-slider-tick:not(.disabled):not(.active):hover {
  height: 18px !important;
  background: var(--c-red);
}

/* KNOB placeholder: shown before the user has picked a value, to make it clear
   that the slider is interactive and where to start dragging. Same shape as
   the active knob but slightly translucent and pulsing to invite the action.
   Cleared by softSelectTick() the moment the user picks a real value. */
.cfg-slider-tick.is-placeholder {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--c-red) 65%, transparent) !important;
  margin-top: 0;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.55),
    0 0 0 4px color-mix(in srgb, var(--c-red) 40%, transparent),
    0 4px 14px -4px rgba(227,6,19,0.5);
  z-index: 3;
  animation: cfgPlaceholderPulse 1.6s ease-in-out infinite;
}
[data-theme="dark"] .cfg-slider-tick.is-placeholder {
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.6),
    0 0 0 4px color-mix(in srgb, var(--c-red) 50%, transparent),
    0 4px 16px -4px rgba(227,6,19,0.6);
}
@keyframes cfgPlaceholderPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.55),
      0 0 0 4px color-mix(in srgb, var(--c-red) 40%, transparent),
      0 0 0 0 rgba(227,6,19,0.45);
  }
  50% {
    transform: scale(1.16);
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.7),
      0 0 0 6px color-mix(in srgb, var(--c-red) 55%, transparent),
      0 0 0 12px rgba(227,6,19,0);
  }
}

/* KNOB attivo: cerchio rialzato, bordo bianco, glow rosso */
.cfg-slider-tick.active {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--c-red) !important;
  margin-top: 0;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 5px var(--c-red),
    0 6px 16px -4px rgba(227,6,19,0.6),
    0 0 24px rgba(227,6,19,0.4);
  z-index: 3;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
[data-theme="dark"] .cfg-slider-tick.active {
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.95),
    0 0 0 5px var(--c-red),
    0 6px 16px -4px rgba(227,6,19,0.7),
    0 0 28px rgba(227,6,19,0.5);
}

/* Knob: focus accessibile (tastiera) */
.cfg-slider-tick.active:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 5px var(--c-red),
    0 0 0 9px rgba(227,6,19,0.35),
    0 6px 16px -4px rgba(227,6,19,0.6);
}

/* Knob durante drag: scala + pulse glow */
.cfg-slider-track.cfg-slider-dragging .cfg-slider-tick.active {
  transform: scale(1.18);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 6px var(--c-red),
    0 0 0 12px rgba(227,6,19,0.25),
    0 8px 20px -4px rgba(227,6,19,0.7);
}

/* Labels (min/max) sotto la track: graduazione mono */
.cfg-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  opacity: 0.75;
}

/* Valore live grande (sopra la track) */
.cfg-slider-value {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.cfg-slider-value .num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 64px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  transition: color .12s ease;
}
.cfg-slider-track.cfg-slider-dragging ~ .cfg-slider-value .num,
.cfg-slider:has(.cfg-slider-dragging) .cfg-slider-value .num {
  color: var(--c-red);
}
.cfg-slider-value .unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--c-ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cfg-slider-value .conv {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--c-ink-3);
  letter-spacing: 0.1em;
  opacity: 0.7;
}

/* ─── EFFETTI EXTRA ─── */

/* 1. Ondulazione rossa al cambio: ring che si espande dal knob */
@keyframes cfg-knob-pulse {
  0%   { box-shadow:
          0 0 0 3px rgba(255,255,255,0.95),
          0 0 0 5px var(--c-red),
          0 0 0 5px rgba(227,6,19,0.6),
          0 6px 16px -4px rgba(227,6,19,0.6);
  }
  60%  { box-shadow:
          0 0 0 3px rgba(255,255,255,0.95),
          0 0 0 5px var(--c-red),
          0 0 0 22px rgba(227,6,19,0),
          0 6px 16px -4px rgba(227,6,19,0.6);
  }
  100% { box-shadow:
          0 0 0 3px rgba(255,255,255,0.95),
          0 0 0 5px var(--c-red),
          0 0 0 5px rgba(227,6,19,0),
          0 6px 16px -4px rgba(227,6,19,0.6);
  }
}
.cfg-slider-tick.active.cfg-knob-pulse {
  animation: cfg-knob-pulse 0.55s cubic-bezier(.2,.6,.2,1);
}

/* 2. Number flip animation (al cambio valore) */
@keyframes cfg-num-flip {
  0%   { transform: translateY(0); opacity: 1; }
  40%  { transform: translateY(-8px); opacity: 0; filter: blur(2px); }
  41%  { transform: translateY(8px); opacity: 0; filter: blur(2px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.cfg-slider-value .num.cfg-num-flip {
  animation: cfg-num-flip 0.32s cubic-bezier(.2,.8,.2,1);
}

/* 3. Glow ambient sotto la track durante il drag */
.cfg-slider {
  isolation: isolate;
}
.cfg-slider::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 24px;
  height: 24px;
  background: radial-gradient(ellipse at var(--mouse-x, 50%) 50%,
    color-mix(in srgb, var(--c-red) 35%, transparent) 0%,
    transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  filter: blur(8px);
  z-index: -1;
}
.cfg-slider:has(.cfg-slider-dragging)::after,
.cfg-slider:hover::after {
  opacity: 1;
}

/* 4. Marker numerici sotto i tick principali (ogni 5°) */
.cfg-slider-tick.cfg-tick-major::after {
  content: attr(data-label);
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  transition: color .18s ease, transform .18s ease;
}
[data-theme="light"] .cfg-slider-tick.cfg-tick-major::after {
  color: rgba(0,0,0,0.5);
}
.cfg-slider-tick.cfg-tick-major.active::after {
  color: var(--c-red);
  font-weight: 700;
  transform: translateX(-50%) translateY(-2px);
}

/* 5. Cursor following indicator (anteprima posizione) */
.cfg-slider-cursor {
  position: absolute;
  top: -8px;
  bottom: -16px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--c-red) 60%, transparent),
    transparent);
  left: var(--cursor-x, -100px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
}
.cfg-slider-cursor::before {
  content: attr(data-preview);
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-red);
  background: var(--c-bg-1);
  border: 1px solid color-mix(in srgb, var(--c-red) 50%, transparent);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px -2px rgba(227,6,19,0.3);
}
.cfg-slider-track:hover .cfg-slider-cursor,
.cfg-slider-track.cfg-slider-dragging .cfg-slider-cursor {
  opacity: 1;
}
.cfg-slider-track.cfg-slider-dragging .cfg-slider-cursor {
  opacity: 0; /* nasconde durante drag, il knob è già sufficiente */
}

/* 6. Tick "ripple" effect — onda che si propaga dal knob agli altri tick al cambio */
@keyframes cfg-tick-wave {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(1.6); background: color-mix(in srgb, var(--c-red) 70%, transparent); }
  100% { transform: scaleY(1); }
}
.cfg-slider-tick.cfg-tick-wave {
  animation: cfg-tick-wave 0.4s cubic-bezier(.4, .0, .2, 1);
  transform-origin: center;
}

/* 7. HEATMAP RANGE: sfumatura colorata lungo la track per indicare range ottimale tecnologia */
.cfg-slider-track.has-heatmap {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.08) var(--heat-start, 0%),
      color-mix(in srgb, var(--c-red) 22%, transparent) var(--heat-start, 0%),
      color-mix(in srgb, var(--c-red) 22%, transparent) var(--heat-end, 100%),
      rgba(255,255,255,0.08) var(--heat-end, 100%),
      rgba(255,255,255,0.08) 100%
    );
}
[data-theme="light"] .cfg-slider-track.has-heatmap {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0.08) var(--heat-start, 0%),
      color-mix(in srgb, var(--c-red) 18%, transparent) var(--heat-start, 0%),
      color-mix(in srgb, var(--c-red) 18%, transparent) var(--heat-end, 100%),
      rgba(0,0,0,0.08) var(--heat-end, 100%),
      rgba(0,0,0,0.08) 100%
    );
}

/* 4. RANGE PRESSURE: frecce ai lati che pulsano se vicini ai limiti */
.cfg-slider-pressure {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfg-slider-pressure.left  { left: -22px; }
.cfg-slider-pressure.right { right: -22px; }
.cfg-slider-pressure svg { width: 100%; height: 100%; fill: var(--c-red); }
.cfg-slider-pressure.active {
  opacity: 1;
  animation: cfg-pressure-pulse 1.1s cubic-bezier(.4,.0,.6,1) infinite;
}
@keyframes cfg-pressure-pulse {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.5; }
  50%      { transform: translateY(-50%) translateX(var(--pressure-dir, 4px)); opacity: 1; }
}

/* 3. TRAIL EFFECT: echi rossi che svaniscono dietro al knob durante drag */
.cfg-slider-trail {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-red);
  top: -5px;
  pointer-events: none;
  transform: translate(-50%, 0);
  opacity: 0;
  filter: blur(1px);
}
.cfg-slider-trail.cfg-trail-go {
  animation: cfg-trail-fade 0.55s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes cfg-trail-fade {
  0%   { opacity: 0.6; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, 0) scale(0.4); filter: blur(4px); }
}

/* 9. GHOST VALUE: vecchio numero che svanisce a fianco del nuovo */
.cfg-slider-value .ghost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--c-ink-3);
  opacity: 0;
  margin-left: -6px;
  letter-spacing: 0.1em;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--c-red) 60%, transparent);
  align-self: flex-start;
  margin-top: 8px;
}
.cfg-slider-value .ghost.cfg-ghost-show {
  animation: cfg-ghost-fade 0.7s cubic-bezier(.2,.6,.2,1) forwards;
}
@keyframes cfg-ghost-fade {
  0%   { opacity: 0;   transform: translateX(-12px); }
  20%  { opacity: 0.7; transform: translateX(0); }
  100% { opacity: 0;   transform: translateX(8px); }
}
.cfg-slider-value .conv {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--c-ink-4);
  margin-left: auto;
}

/* Warning */
.cfg-warn {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(227,6,19,0.08);
  border-left: 2px solid var(--c-red);
  font-size: 13px;
  color: var(--c-ink);
  line-height: 1.5;
}

/* Calc box */
.cfg-calc {
  margin-top: 24px;
  padding: 24px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: 4px;
}
.cfg-calc-head {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.2em;
  color: var(--c-ink-3) !important;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cfg-calc-input {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  color: var(--c-ink) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 28px !important;
  font-weight: 500;
  padding: 8px 0 !important;
  outline: none !important;
  border-radius: 0 !important;
}
.cfg-calc-input:focus { border-color: var(--c-red) !important; }
.cfg-calc-out {
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(227,6,19,0.08);
  border: 1px solid rgba(227,6,19,0.22);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--c-ink);
  letter-spacing: 0.04em;
}
.cfg-calc-out strong { color: var(--c-red); font-size: 18px; font-weight: 500; }

/* Nav buttons */
.cfg-nav {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  gap: 16px;
}
.cfg-btn {
  padding: 14px 28px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: transparent !important;
  color: var(--c-ink) !important;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 999px !important;
  font-weight: 400;
}
.cfg-btn:hover {
  border-color: var(--c-ink) !important;
  background: rgba(255,255,255,0.04) !important;
}
.cfg-btn-primary {
  background: var(--c-red) !important;
  border-color: var(--c-red) !important;
  color: #fff !important;
  font-weight: 500;
}
.cfg-btn-primary:hover {
  background: #ff1a2c !important;
  border-color: #ff1a2c !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(227,6,19,0.3);
}
.cfg-btn[disabled] { opacity: 0.3 !important; cursor: not-allowed; pointer-events: none; }
.cfg-btn-ghost { border-color: rgba(255,255,255,0.15) !important; }

/* "Continua" in blocked state — phase is incomplete. Stays clickable so we can
   trigger the shake + missing-fields highlight via goNext(). */
.cfg-btn-primary.is-blocked {
  opacity: 0.45;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--c-red) 60%, #555) !important;
  border-color: color-mix(in srgb, var(--c-red) 60%, #555) !important;
  box-shadow: none !important;
}
.cfg-btn-primary.is-blocked:hover {
  background: color-mix(in srgb, var(--c-red) 60%, #555) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Shake feedback when the user clicks a blocked "Continua" — wakes them up to
   look at the highlighted .cfg-q below. */
@keyframes cfgShake {
  0%, 100%   { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-7px); }
  20%, 40%, 60%, 80% { transform: translateX(7px); }
}
.cfg-btn.cfg-shake { animation: cfgShake 0.55s cubic-bezier(.36,.07,.19,.97); }

/* "Next up" cue — discreet outline pulse on the next .cfg-q (or macro-row) the
   user should fill. Lighter than .cfg-missing (which fires on a wrong click);
   the page does NOT move, the eye is drawn down to the next field naturally. */
@keyframes cfgNextUpPulse {
  0%   { box-shadow: 0 0 0 0   rgba(227,6,19,0); }
  35%  { box-shadow: 0 0 0 6px rgba(227,6,19,0.18); }
  100% { box-shadow: 0 0 0 0   rgba(227,6,19,0); }
}
.cfg-q.cfg-next-up,
[data-macro-row].cfg-next-up {
  border-radius: 12px;
  animation: cfgNextUpPulse 1s cubic-bezier(.22,.7,.22,1);
}

/* Highlight the question wrapper(s) tied to missing fields. Pulse the border
   + a soft background tint, then settle back. */
@keyframes cfgMissingPulse {
  0%   { box-shadow: 0 0 0 0   rgba(227,6,19,0.55); background-color: rgba(227,6,19,0.08); }
  60%  { box-shadow: 0 0 0 10px rgba(227,6,19,0);   background-color: rgba(227,6,19,0.04); }
  100% { box-shadow: 0 0 0 0   rgba(227,6,19,0);   background-color: transparent; }
}
.cfg-q.cfg-missing,
.cfg-tech-grid.cfg-missing,
.cfg-tech-list.cfg-missing,
.cfg-techs.cfg-missing {
  border-radius: 12px;
  animation: cfgMissingPulse 1.6s ease-out;
  outline: 1px solid rgba(227,6,19,0.55);
  outline-offset: 8px;
}
.cfg-q.cfg-missing .cfg-q-label {
  color: var(--c-red) !important;
}

/* Pulse cue when a phase has just become valid — the user might not have noticed
   that "Continua" is below the fold. */
@keyframes cfgNudge {
  0%   { transform: translateY(0)   scale(1);   box-shadow: 0 0 0 0 rgba(227,6,19,0.45); }
  35%  { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 28px rgba(227,6,19,0.55); }
  60%  { transform: translateY(0)   scale(1);   box-shadow: 0 0 0 12px rgba(227,6,19,0); }
  100% { transform: translateY(0)   scale(1);   box-shadow: 0 0 0 0 rgba(227,6,19,0); }
}
.cfg-btn.cfg-nudge { animation: cfgNudge 1.2s cubic-bezier(.22,.7,.22,1); }

/* Sentinel sits in flow right above the nav. When it scrolls above the viewport
   we know the nav is "stuck"; otherwise the nav is in its natural flow position. */
.cfg-nav-sentinel { height: 1px; width: 100%; }

/* Sticky cfg-nav on desktop too. We keep it *transparent by default* and only
   apply the gradient/blur when it actually becomes "stuck" — i.e. when the user
   has scrolled and there's content underneath that would otherwise be hidden.
   That avoids covering up options that are still visible on the page. */
.cfg-nav {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 16px 0 12px;
  margin-bottom: -8px;
  /* Even when not "stuck", give the bar a faint translucent backdrop so the
     buttons are clearly clickable and don't bleed visually into the content
     scrolling underneath. */
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c-bg, #0e0e0f) 70%, transparent) 0%,
    color-mix(in srgb, var(--c-bg, #0e0e0f) 40%, transparent) 60%,
    transparent 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
.cfg-nav.is-stuck {
  background: linear-gradient(to top,
    var(--c-bg, #0e0e0f) 0%,
    color-mix(in srgb, var(--c-bg, #0e0e0f) 92%, transparent) 70%,
    color-mix(in srgb, var(--c-bg, #0e0e0f) 60%, transparent) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Old tiny "↓ scorri" hint — replaced by the high-contrast red pill
   (.cfg-scroll-chevron, see below). Kept hidden in case any partial still
   renders the markup. */
.cfg-scroll-hint { display: none !important; }

/* ─── Scroll-down hint pill (mobile + desktop) ────────────────────────
   Red rounded pill with bobbing chevron + "Scorri per altro" text.
   Position fixed at bottom of viewport, horizontally centered on the
   .cfg-nav (left coord is set by JS via syncPillPos on resize/scroll).
   On the desktop layout the cfg-grid has a left sidebar — the JS sync
   ensures the pill stays over the cfg-main column where the nav lives.
   Pointer-events:none so it never intercepts taps on the buttons. */
.cfg-scroll-chevron {
  position: fixed;
  bottom: 28px;
  /* left set by JS, transform centers the pill on that x */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(227,6,19,0.94);
  box-shadow:
    0 8px 24px -6px rgba(227,6,19,0.55),
    0 0 0 1px rgba(255,255,255,0.10) inset;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(.22,.7,.22,1);
  animation: cfgScrollHintBob 1.6s ease-in-out infinite;
  white-space: nowrap;
  z-index: 91;
}
.cfg-scroll-chevron::before {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'><path d='M3 4 l8 7 l8 -7' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Hide pill when user reaches the bottom of the phase. */
.cfg-shell.cfg-at-bottom .cfg-nav .cfg-scroll-chevron { opacity: 0; }
/* Also hide it when there's nothing more to scroll — i.e. nav DOESN'T
   have .has-more (the page already fits in the viewport). */
.cfg-nav:not(.has-more) .cfg-scroll-chevron { opacity: 0; }
/* On desktop, the first two phases (Profilo, Tecnologia) are compact
   enough to fit without scrolling — the pill would just be noise there.
   Step 3 (Taglia) now hosts the "Verifica forza di piega" mini-card
   below the fold, so the pill IS useful there (gated by JS until the
   user enters a bend length — see initCfgStickyHint). Mobile keeps the
   pill on every phase. */
@media (min-width: 761px) {
  body[data-cfg-step="1"] .cfg-scroll-chevron,
  body[data-cfg-step="2"] .cfg-scroll-chevron {
    display: none !important;
  }
}
@keyframes cfgScrollHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* Phase fade */
.cfg-phase-content { animation: cfgFadeIn 0.5s cubic-bezier(.22,.7,.22,1); }
@keyframes cfgFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤1100px)
   Bumped from 1000 → 1100 (sessione 2026-05-13) per coprire iPad
   landscape (1024px). Sotto 1100 il grid passa a single-column
   stack — sopra le due colonne (aside 360px + main min ≥820px)
   sommano a ~1180px, il browser mobile shrink-to-fit'a la pagina,
   nav e content escono dallo viewport. Vedi SESSION-LOG 2026-05-13.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cfg-grid {
    /* minmax(0, 1fr) instead of bare 1fr — without it the min-content of the
       phase content (long option pills, equip rows) blows the track up past
       the viewport and we end up with horizontal overflow hidden by body. */
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }
  .cfg-summary, .cfg-main { min-width: 0; }
  .cfg-summary {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    /* BUG-011 — offset by global .nav height (fixed top:0, ~72px) so the
       summary doesn't get covered by the nav on iPad portrait. */
    top: 72px;
    z-index: 20;
  }
  .cfg-summary-inner {
    position: relative;
    min-height: auto;
    padding: 24px 28px;
    gap: 20px;
  }
  .cfg-canvas { aspect-ratio: 16/9; max-height: 32vh; max-height: 32dvh; }
  .cfg-step-lbl { display: none; }
  .cfg-main {
    padding: 32px 28px 120px;
    min-height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤640px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Hero compatto */
  .cfg-hero {
    padding: clamp(64px, 18vw, 96px) 20px 28px !important;
  }
  .cfg-hero-eyebrow { margin-bottom: 20px; font-size: 10px; }
  .cfg-hero-title { font-size: clamp(36px, 11vw, 56px); margin-bottom: 16px; }
  .cfg-hero-sub { font-size: 14.5px; line-height: 1.5; }

  /* Summary collassabile in alto: sticky più aggressivo */
  .cfg-summary-inner {
    padding: 16px 20px;
    gap: 14px;
  }
  .cfg-canvas {
    aspect-ratio: 16/9;
    max-height: 26vh;
    max-height: 26dvh;
    min-height: 160px;
  }
  .cfg-meta-grid { grid-template-columns: 1fr 1fr; }
  .cfg-meta-cell { padding: 10px 12px; }
  .cfg-meta-cell .lbl { font-size: 8px !important; margin-bottom: 4px; letter-spacing: 0.18em; }
  .cfg-meta-cell .val { font-size: 16px !important; }
  .cfg-price { padding-top: 14px; }
  .cfg-price-bars { margin-bottom: 8px; }
  .cfg-price-bars span { height: 6px; }
  .cfg-price-note { font-size: 10px !important; }

  /* Progress compatto. Padding generoso top/bottom per non tagliare il
     pulse ring del dot active (.cfg-step.active .cfg-dot::before scala fino
     a 1.6× dal centro = ~13px oltre il dot di 18px). overflow-x: clip lascia
     visible l'asse Y così il glow sopra/sotto resta fuori dal taglio. */
  .cfg-progress {
    margin-bottom: 24px;
    padding: 16px 4px 12px;
    overflow-x: clip;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* BUG-028 — soft fade on horizontal edges so step labels don't cut
       harshly against the viewport border. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .cfg-progress::-webkit-scrollbar { display: none; }
  /* BUG-014 — WCAG 2.5.5 (AAA) touch target ≥44×44 on the step button. */
  .cfg-step { min-width: 44px; min-height: 44px; flex: 1; }
  .cfg-dot {
    width: 16px !important;
    height: 16px !important;
    margin-bottom: 6px;
  }
  /* Track centerline: 16px dot + 16px padding-top = center at 24px from
     .cfg-progress top, minus 1px half-line = 23-24px. */
  .cfg-progress::before { top: 24px !important; }
  .cfg-progress::after { top: 24px !important; }

  /* Main column padding */
  .cfg-main {
    padding: 20px 20px 110px;
  }

  /* Phase headers */
  .cfg-phase-num { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 12px; }
  .cfg-phase-title {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }
  .cfg-phase-sub { font-size: 14px; line-height: 1.5; }
  .cfg-phase-head { margin-bottom: 28px; }

  /* Question label + options spacing */
  .cfg-q { margin-bottom: 28px; }
  .cfg-q-label { font-size: 11px !important; margin-bottom: 12px !important; }
  .cfg-options {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cfg-option {
    width: 100% !important;
    padding: 16px 14px !important;
    font-size: 14px !important;
    min-height: 52px; /* hit-target generoso */
    text-align: left !important;
  }

  /* Tech grid: stack 1 col + carosello orizzontale opzionale */
  .cfg-tech-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .cfg-tech-card {
    padding: 22px 20px !important;
    min-height: auto !important;
  }
  .cfg-tech-name { font-size: 28px !important; }
  .cfg-tech-sub { font-size: 12px !important; }
  .cfg-tech-payoff { font-size: 14px !important; margin: 12px 0 14px !important; }
  .cfg-tech-vantaggi li { font-size: 12.5px !important; }
  .cfg-tech-range { padding-top: 14px !important; font-size: 11px !important; }
  .cfg-niche-hint {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 10px;
  }
  .cfg-niche-hint-text { font-size: 13px; line-height: 1.5; }

  /* Sliders touch-friendly */
  .cfg-slider-value { font-size: 14px; }
  .cfg-slider-value .num { font-size: 32px !important; }
  .cfg-slider-value .unit { font-size: 16px !important; margin-left: 4px; }
  .cfg-slider-value .conv { display: block; margin-top: 4px; font-size: 11px !important; }
  .cfg-slider-value .ghost { display: none; } /* su mobile evitiamo clutter */
  .cfg-slider {
    padding: 12px 0 24px;
  }
  .cfg-slider-track {
    height: 56px; /* aumenta hit area */
    touch-action: pan-y;
  }
  .cfg-slider-tick {
    min-width: 28px; /* hit area touch */
    width: 28px;
  }
  .cfg-slider-tick::before {
    width: 8px !important;
    height: 8px !important;
  }
  .cfg-slider-tick.active::before {
    width: 18px !important;
    height: 18px !important;
  }
  .cfg-slider-tick.cfg-tick-major::after {
    font-size: 10px !important;
  }
  .cfg-slider-pressure {
    width: 16px; height: 16px;
  }
  .cfg-slider-cursor { display: none; } /* tooltip su mobile è un overhead */

  /* Calcolatore luce */
  .cfg-calc {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cfg-calc-head { font-size: 10px; }
  .cfg-calc-input { width: 100%; padding: 12px 14px; font-size: 16px; /* anti-zoom iOS */ }
  .cfg-calc-out { font-size: 12.5px; line-height: 1.45; }

  /* Equipaggiamento — single col, opzioni padding ridotto */
  .cfg-equip { gap: 18px; }
  .cfg-equip-row {
    padding: 20px 0;
    gap: 12px;
  }
  .cfg-equip-title { font-size: 16px; }
  .cfg-equip-sub { font-size: 12px; }
  .cfg-equip-opt {
    padding: 14px 14px;
    min-height: 56px;
  }
  .cfg-equip-opt-name { font-size: 13.5px; }
  .cfg-equip-opt-desc { font-size: 12px; line-height: 1.4; }

  /* Datasheet stretto */
  .cfg-datasheet { padding: 0; }
  .cfg-ds-head {
    flex-direction: column;
    gap: 16px;
    padding: 22px 20px 16px;
  }
  .cfg-ds-logo { height: 42px; }
  .cfg-ds-tag { font-size: 12px; }
  .cfg-ds-meta { gap: 16px; text-align: left; }
  .cfg-ds-hero {
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    gap: 18px 0;
  }
  .cfg-ds-kpi { padding: 0 14px; }
  .cfg-ds-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cfg-ds-kpi:nth-child(3),
  .cfg-ds-kpi:nth-child(4) { border-top: 1px solid #e8e8e8; padding-top: 18px; }
  .cfg-ds-kpi-val { font-size: 24px; }
  .cfg-ds-section { padding: 18px 20px; }
  .cfg-ds-grid { grid-template-columns: 1fr; }
  .cfg-ds-row { font-size: 12.5px; }
  .cfg-ds-foot { padding: 18px 20px 22px; grid-template-columns: 1fr; gap: 12px; }
  .cfg-ds-foot-info { justify-content: flex-start; gap: 10px; }

  /* Form */
  .cfg-form { margin-top: 28px; padding-top: 28px; }
  .cfg-form-grid { grid-template-columns: 1fr; gap: 14px; }
  .cfg-field input { font-size: 16px; /* anti-zoom iOS */ padding: 12px 14px; }
  .cfg-form-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .cfg-form-priv { font-size: 11.5px; max-width: none; }
  .cfg-btn-primary { width: 100%; padding: 15px 24px; }
  .cfg-actions { flex-direction: column; }
  .cfg-actions .cfg-btn-ghost { width: 100%; text-align: center; }

  /* Mobile-cinema gestisce ora il bottom nav (sticky reliable). Lasciamo
     vuoto qui per non duplicare con position:fixed che sui browser che
     stampano/screenshot a PDF perde il rendering. Vedi mobile-cinema.css
     sezione "CONFIGURATORE MOBILE — wizard step-by-step". */
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile XS (≤380px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .cfg-meta-grid { grid-template-columns: 1fr; }
  .cfg-canvas { max-height: 22vh; max-height: 22dvh; }
  .cfg-tech-name { font-size: 24px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   FASE 04 · EQUIPAGGIAMENTO
═══════════════════════════════════════════════════════════════ */
.cfg-equip {
  display: grid;
  gap: 28px;
}
.cfg-equip-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--cfg-border, rgba(255,255,255,0.08));
  align-items: start;
}
.cfg-equip-row:first-child { border-top: none; padding-top: 0; }
.cfg-equip-head { padding-top: 4px; }
.cfg-equip-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--cfg-fg, #fff);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.cfg-equip-sub {
  font-size: 13px;
  color: var(--cfg-fg-muted, rgba(255,255,255,0.55));
  line-height: 1.5;
}
.cfg-equip-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cfg-equip-opt {
  text-align: left;
  padding: 18px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--cfg-fg, #fff);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.18s ease;
  font-family: inherit;
}
.cfg-equip-opt:hover:not(.disabled):not(.sel) {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.cfg-equip-opt.sel {
  background: rgba(220, 38, 38, 0.08);
  border-color: var(--cfg-accent, #DC2626);
  box-shadow: 0 0 0 1px var(--cfg-accent, #DC2626) inset;
}
.cfg-equip-opt.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cfg-equip-opt-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cfg-equip-opt-desc {
  font-size: 12.5px;
  color: var(--cfg-fg-muted, rgba(255,255,255,0.55));
  line-height: 1.45;
}

@media (max-width: 880px) {
  .cfg-equip-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cfg-equip-opts {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FASE 05 · DATASHEET + FORM
═══════════════════════════════════════════════════════════════ */
.cfg-datasheet {
  background: #fff;
  color: #0a0a0a;
  border-radius: 14px;
  padding: 0;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.04);
  margin-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
}
/* Watermark di sfondo */
.cfg-datasheet::before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 520px; height: 520px;
  background: url('logo-pg-emblem-only.png') no-repeat center / contain;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}
.cfg-datasheet > * { position: relative; z-index: 1; }

/* Striscia rossa decorativa in alto */
.cfg-ds-stripe {
  height: 5px;
  background: linear-gradient(90deg, #E30613 0%, #E30613 35%, #b00510 60%, #0a0a0a 100%);
}

/* HEADER */
.cfg-ds-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding: 32px 44px 24px;
  border-bottom: 1px solid #e8e8e8;
}
.cfg-ds-head-l {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cfg-ds-logo {
  height: 56px;
  width: auto;
  display: block;
}
.cfg-ds-head-meta {
  border-left: 2px solid #E30613;
  padding-left: 18px;
}
.cfg-ds-doc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #E30613;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cfg-ds-tag {
  font-size: 14px;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: -0.01em;
}
.cfg-ds-meta {
  display: flex;
  gap: 28px;
  text-align: right;
  flex-wrap: wrap;
}
.cfg-ds-meta > div { display: flex; flex-direction: column; gap: 3px; }
.cfg-ds-meta span {
  color: #999;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 600;
}
.cfg-ds-meta strong {
  font-size: 14px;
  font-weight: 700;
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
  color: #0a0a0a;
}

/* HERO KPI */
.cfg-ds-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 44px;
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
  border-bottom: 1px solid #e8e8e8;
}
.cfg-ds-kpi {
  padding: 0 22px;
  border-left: 1px solid #e8e8e8;
}
.cfg-ds-kpi:first-child { border-left: 0; padding-left: 0; }
.cfg-ds-kpi-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #999;
  margin-bottom: 8px;
}
.cfg-ds-kpi-val {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0a0a0a;
  font-feature-settings: "tnum";
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cfg-ds-kpi-unit {
  font-size: 16px;
  font-weight: 600;
  color: #E30613;
  letter-spacing: -0.01em;
}
.cfg-ds-kpi-sub {
  font-size: 11px;
  color: #777;
  margin-top: 6px;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum";
}

/* SEZIONI */
.cfg-ds-section {
  padding: 22px 44px 18px;
  border-bottom: 1px solid #f0f0f0;
}
.cfg-ds-section:last-of-type { border-bottom: 0; }
.cfg-ds-section-h {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cfg-ds-section-h::before {
  content: "";
  width: 4px;
  height: 14px;
  background: #E30613;
  border-radius: 1px;
}
.cfg-ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.cfg-ds-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dotted #e5e5e5;
  font-size: 13px;
  align-items: baseline;
}
.cfg-ds-row-k {
  color: #666;
  font-weight: 500;
  flex-shrink: 0;
}
.cfg-ds-row-v {
  color: #0a0a0a;
  font-weight: 600;
  text-align: right;
  font-feature-settings: "tnum";
}

/* FOOTER */
.cfg-ds-foot {
  margin-top: 0;
  padding: 22px 44px 28px;
  background: #0a0a0a;
  color: #ccc;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 32px;
  align-items: center;
  font-size: 11.5px;
  letter-spacing: 0.01em;
}
.cfg-ds-foot-brand {
  font-size: 12px;
  color: #fff;
}
.cfg-ds-foot-brand strong {
  color: #E30613;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.cfg-ds-foot-info {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  flex-wrap: wrap;
  color: #999;
  font-size: 11px;
  font-feature-settings: "tnum";
}
.cfg-ds-foot-note {
  grid-column: 1 / -1;
  font-size: 10.5px;
  color: #777;
  line-height: 1.55;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}

.cfg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 24px 0 8px;
}
.cfg-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--cfg-fg, #fff);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.18s ease;
}
.cfg-btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.32);
}

/* Form */
.cfg-form {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--cfg-border, rgba(255,255,255,0.08));
}
.cfg-form-head { margin-bottom: 24px; }
.cfg-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.cfg-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfg-field-full { grid-column: 1 / -1; }
.cfg-field span {
  font-size: 12px;
  color: var(--cfg-fg-muted, rgba(255,255,255,0.55));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}
.cfg-field input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 13px 16px;
  color: var(--cfg-fg, #fff);
  font-family: inherit;
  font-size: 15px;
  transition: all 0.18s ease;
}
.cfg-field input:hover {
  border-color: rgba(255,255,255,0.2);
}
.cfg-field input:focus {
  outline: none;
  border-color: var(--cfg-accent, #DC2626);
  background: rgba(255,255,255,0.06);
}
.cfg-form-foot {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cfg-form-priv {
  font-size: 12px;
  color: var(--cfg-fg-muted, rgba(255,255,255,0.5));
  max-width: 480px;
  line-height: 1.5;
  margin: 0;
}
.cfg-btn-primary {
  background: var(--cfg-accent, #DC2626);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.cfg-btn-primary:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(220, 38, 38, 0.5);
}

@media (max-width: 720px) {
  .cfg-datasheet { padding: 0; }
  .cfg-ds-head { flex-direction: column; padding: 24px 22px 18px; gap: 18px; }
  .cfg-ds-meta { text-align: left; gap: 18px; }
  .cfg-ds-logo { height: 44px; }
  .cfg-ds-hero {
    grid-template-columns: 1fr 1fr;
    padding: 22px;
    gap: 18px 0;
  }
  .cfg-ds-kpi { padding: 0 14px; }
  .cfg-ds-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cfg-ds-kpi:nth-child(3) { border-top: 1px solid #e8e8e8; padding-top: 18px; }
  .cfg-ds-kpi:nth-child(4) { border-top: 1px solid #e8e8e8; padding-top: 18px; }
  .cfg-ds-kpi-val { font-size: 26px; }
  .cfg-ds-section { padding: 18px 22px; }
  .cfg-ds-grid { grid-template-columns: 1fr; gap: 0; }
  .cfg-ds-foot { padding: 18px 22px 22px; grid-template-columns: 1fr; gap: 12px; }
  .cfg-ds-foot-info { justify-content: flex-start; gap: 10px; }
  .cfg-form-grid { grid-template-columns: 1fr; }
  .cfg-form-foot { flex-direction: column; align-items: stretch; }
  .cfg-btn-primary { width: 100%; }
}

/* ─── Phase 4 — Per-quote head: glyph + label + 1-line help ───
   Replaces the "abstract press side-view" prototype: it didn't communicate
   what each quote actually is. Now each .cfg-q gets a small icon and a
   plain-language sentence, so the user can answer the question without
   first decoding a schematic. */
.cfg-q-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.cfg-q-glyph {
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}
.cfg-q-glyph svg { width: 100%; height: 100%; display: block; }
.cfg-q-help {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif;
  text-transform: none;
  max-width: 56ch;
}
[data-theme="light"] .cfg-q-glyph { color: rgba(255,255,255,0.55); }
[data-theme="light"] .cfg-q-help { color: rgba(255,255,255,0.55); }
.cfg-q-head .cfg-q-label { margin: 0; }

/* ─── Phase 4 — Live press-side-view diagram with corsa/luce/incavo ───
   (Deprecated: replaced by per-quote head above. Kept for safety in case
   something still references .cfg-press-diagram-wrap.) */
.cfg-press-diagram-wrap {
  margin: 8px 0 28px;
  padding: 18px 14px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%),
    rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cfg-press-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  font-family: 'JetBrains Mono', monospace;
}
.cfg-press-diagram .cfg-press-q-label {
  fill: rgba(255,255,255,0.55);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cfg-press-diagram .cfg-press-q-val {
  fill: #fff;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}
.cfg-press-diagram .cfg-press-q-corsaval { fill: #E30613; }
.cfg-press-diagram .cfg-press-ram {
  transition: y 0.4s cubic-bezier(.22,.7,.22,1),
              height 0.4s cubic-bezier(.22,.7,.22,1);
}
[data-theme="light"] .cfg-press-diagram-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%),
    rgba(0,0,0,0.18);
}

/* ─── Phase 7 entry flourish — animated red border that traces the
       datasheet perimeter once. Layered over the existing border via SVG so
       we control the stroke length precisely (pathLength="100"). */
.cfg-ds-border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.cfg-ds-border-svg rect {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.cfg-ds-border-svg.is-drawing rect {
  animation: cfgDsBorderDraw 1.6s 0.15s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes cfgDsBorderDraw {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  60%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
.cfg-datasheet { position: relative; }

/* ─── PDF gating ─────────────────────────────────────────────── */
.cfg-actions-locked .cfg-btn-ghost {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(255,255,255,0.02);
  border-style: dashed !important;
}
.cfg-actions-locked .cfg-btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  transform: none;
}
.cfg-form.cfg-form-flash {
  animation: cfgFormFlash 1.1s ease-out;
}
@keyframes cfgFormFlash {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px rgba(220,38,38,0.45), 0 0 32px rgba(220,38,38,0.25); }
}

/* ═══════════════════════════════════════════════════════════════
   WHEEL PICKER — iOS-style (touch devices)
   Sostituisce gli slider tonnellaggio + lunghezza su:
   - viewport ≤ 1024px (tutti gli iPad portrait + iPad std land)
   - dispositivi touch puri (mobile + iPad in modalità mobile site)
   - iPad Pro 10.5/11/12.9 LANDSCAPE in "Request Desktop Website" (Safari default)
     → catturato via `(any-pointer: coarse)`: iPad ha sempre touch input,
     anche quando UA è spoofato macOS Safari. Limit a 1366px per non
     toccare laptop Surface/touchscreen.
   Lo slider tradizionale su touch è una hair-line da 4px con tick da 1×10px:
   impossibile da centrare con un dito.
═══════════════════════════════════════════════════════════════ */
.cfg-wheel { display: none; } /* default: nascosto su desktop con mouse */

@media (max-width: 1024px),
       (max-width: 1366px) and (any-pointer: coarse),
       (hover: none) and (pointer: coarse) {
  .cfg-slider-wrap { display: none !important; }
  .cfg-wheel { display: block; }
}

/* JS-side fallback (configurator.js adds .cfg-is-touch to <html> when
   navigator.maxTouchPoints > 1 — copre iPad anche se @media non scatta). */
html.cfg-is-touch .cfg-slider-wrap { display: none !important; }
html.cfg-is-touch .cfg-wheel { display: block !important; }

.cfg-wheel {
  position: relative;
  margin-top: 18px;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
.cfg-wheel-frame {
  position: relative;
  height: 168px; /* 3 righe × 56px (1 centrale + 1 sopra + 1 sotto) */
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
[data-theme="light"] .cfg-wheel-frame {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
/* Banda centrale evidenziata (selection indicator) */
.cfg-wheel-frame::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 56px; height: 56px;
  background: linear-gradient(90deg, rgba(227,6,19,0.10), rgba(227,6,19,0.04));
  border-top: 1px solid rgba(227,6,19,0.35);
  border-bottom: 1px solid rgba(227,6,19,0.35);
  pointer-events: none;
  z-index: 1;
}
/* Fade in/out top/bottom (soft mask) */
.cfg-wheel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0) 28%,
      rgba(0,0,0,0) 72%,
      rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 2;
}
[data-theme="light"] .cfg-wheel-frame::after {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,0.92) 100%);
}
/* Configurator has a fixed dark bg regardless of the global theme.
   Apple-style liquid-glass picker: cool curved gradient (top brighter, center
   recessed, bottom brighter again) with bright edge highlights, plus a soft
   dark fade on top/bottom so non-selected items recede behind frosted glass
   instead of disappearing into a flat band. */
.cfg-shell .cfg-wheel-frame {
  /* Curved-glass cylinder effect: bright edges, deep center, cool tint.
     Mimics the iOS UIPickerView "drum" — like a slice of polished glass
     turning toward you, brighter where it catches light at the rim. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.10) 8%,
      rgba(255,255,255,0.02) 28%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0.02) 72%,
      rgba(255,255,255,0.10) 92%,
      rgba(255,255,255,0.22) 100%) !important;
  border-color: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 2px 4px -2px rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px -2px rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 14px 36px -14px rgba(0,0,0,0.70);
}
.cfg-shell .cfg-wheel-frame::after {
  background:
    linear-gradient(180deg,
      rgba(10,10,10,0.55) 0%,
      rgba(10,10,10,0.15) 26%,
      rgba(10,10,10,0) 42%,
      rgba(10,10,10,0) 58%,
      rgba(10,10,10,0.15) 74%,
      rgba(10,10,10,0.55) 100%) !important;
}
.cfg-shell .cfg-wheel-item { color: rgba(255,255,255,0.45) !important; }
.cfg-shell .cfg-wheel-item.active { color: var(--c-red) !important; }
.cfg-shell .cfg-wheel-item.disabled { color: rgba(255,255,255,0.18) !important; }
/* Fresh wheel: nothing has been picked yet. Hide the red center selection
   indicator (band + side lines) and don't pre-magnify any item, so it
   doesn't look like 40 t / 1,25 m is already selected. */
.cfg-shell .cfg-wheel.is-fresh .cfg-wheel-frame::before {
  opacity: 0;
}
.cfg-shell .cfg-wheel.is-fresh .cfg-wheel-item.cfg-wheel-near {
  transform: none;
  color: rgba(255,255,255,0.45) !important;
}
/* Item closest to the snap center (live, updated on scroll). Slight scale +
   color lift = the "magnification" felt while turning a real picker drum. */
.cfg-shell .cfg-wheel-item.cfg-wheel-near {
  transform: scale(1.06);
  color: rgba(255,255,255,0.85) !important;
}
.cfg-shell .cfg-wheel-item.active.cfg-wheel-near {
  transform: scale(1.0); /* let the .active scale (1.0 baseline) win */
}
/* Snap-confirmation flash: 280ms red glow when a value is locked. */
@keyframes cfgWheelFlash {
  0%   { box-shadow: 0 0 0 0   rgba(227,6,19,0.0),  inset 0 0 0 0 rgba(227,6,19,0.0); }
  35%  { box-shadow: 0 0 0 8px rgba(227,6,19,0.18), inset 0 0 24px rgba(227,6,19,0.35); }
  100% { box-shadow: 0 0 0 0   rgba(227,6,19,0.0),  inset 0 0 0  0 rgba(227,6,19,0.0); }
}
.cfg-shell .cfg-wheel-item.cfg-wheel-flash {
  animation: cfgWheelFlash 0.28s cubic-bezier(.22,.7,.22,1);
}
/* "Tocca o scorri" learning hint, shown once below the first wheel. */
.cfg-wheel-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  opacity: 0;
  animation: cfgWheelHintIn 0.4s 0.4s cubic-bezier(.22,.7,.22,1) forwards,
             cfgWheelHintOut 0.6s 6s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events: none;
}
.cfg-wheel-hint-arrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  animation: cfgWheelHintBob 1.6s ease-in-out infinite;
}
@keyframes cfgWheelHintIn  { to { opacity: 1; } }
@keyframes cfgWheelHintOut { to { opacity: 0; visibility: hidden; } }
@keyframes cfgWheelHintBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Track scrollabile: snap mandatorio sui figli */
.cfg-wheel-track {
  position: absolute;
  inset: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 56px 0; /* spacer top/bottom così il primo/ultimo item può centrarsi */
  z-index: 3;
}
.cfg-wheel-track::-webkit-scrollbar { display: none; }
.cfg-wheel-item {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
  transition: color .15s ease, transform .15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .cfg-wheel-item { color: rgba(0,0,0,0.42); }
.cfg-wheel-item .unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  margin-left: 6px;
  opacity: 0.7;
}
.cfg-wheel-item.active {
  color: var(--c-red);
  font-size: 28px;
  font-weight: 600;
}
.cfg-wheel-item.disabled {
  color: rgba(255,255,255,0.18);
  text-decoration: line-through;
  pointer-events: none;
}
[data-theme="light"] .cfg-wheel-item.disabled { color: rgba(0,0,0,0.18); }

/* ═══════════════════════════════════════════════════════════════
   PRINT — solo datasheet (no pagine bianche / no offset)
═══════════════════════════════════════════════════════════════ */
@media print {
  /* Reset: niente animazioni, niente fixed/sticky che possono creare pagine vuote */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Nascondi TUTTO con display:none così non occupa spazio in stampa.
     Riveliamo solo gli antenati del datasheet + il datasheet stesso. */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body > *:not(.cfg-print-root) { display: none !important; }

  /* Wrapper di stampa: contiene solo il datasheet, niente sticky/fixed */
  .cfg-print-root {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #cfgDatasheet {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14mm 14mm !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    page-break-inside: auto;
  }
  #cfgDatasheet * { color: #000 !important; }

  /* Evita break orfani su titoli */
  #cfgDatasheet h1, #cfgDatasheet h2, #cfgDatasheet h3 {
    page-break-after: avoid;
    break-after: avoid;
  }
  /* Sezioni: rispetta i salti naturali ma non forzare nuove pagine vuote */
  #cfgDatasheet section,
  #cfgDatasheet .ds-block,
  #cfgDatasheet table {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  @page {
    size: A4;
    margin: 12mm 10mm;
  }
}


/* Snap flash — feedback quando il cambio ton sposta automaticamente lungh/corsa/luce/incavo */
@keyframes cfg-snap-flash {
  0%   { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.7); transform: scale(1); }
  30%  { box-shadow: 0 0 0 10px rgba(227, 6, 19, 0.0); transform: scale(1.18); }
  60%  { transform: scale(0.96); }
  100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); transform: scale(1); }
}
.cfg-snap-flash {
  animation: cfg-snap-flash 1.2s cubic-bezier(.2,.6,.2,1);
  position: relative;
  z-index: 5;
}
.cfg-option.cfg-snap-flash {
  background: rgba(227, 6, 19, 0.15) !important;
  border-color: var(--c-red) !important;
}
.cfg-slider-tick.cfg-snap-flash {
  background: var(--c-red) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FLUIDITÀ — phase transitions, micro-feedback, polish
   ═══════════════════════════════════════════════════════════════ */

/* Phase content: fade + slide-up in entrata */
@keyframes cfgPhaseEnter {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.cfg-phase-content {
  animation: cfgPhaseEnter 0.55s cubic-bezier(.22,.7,.22,1) both;
  will-change: transform, opacity;
}
/* fade-out on leave (scope-locale via classe sul wrapper) */
.cfg-phase.is-leaving .cfg-phase-content {
  animation: cfgPhaseLeave 0.22s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes cfgPhaseLeave {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
}

/* Stagger su elementi interni della fase */
.cfg-phase-content > *,
.cfg-phase-content .cfg-q,
.cfg-phase-content .cfg-tech-grid,
.cfg-phase-content .cfg-niche-hint {
  animation: cfgItemRise 0.65s cubic-bezier(.22,.7,.22,1) both;
}
.cfg-phase-content > *:nth-child(1) { animation-delay: 0.04s; }
.cfg-phase-content > *:nth-child(2) { animation-delay: 0.10s; }
.cfg-phase-content > *:nth-child(3) { animation-delay: 0.16s; }
.cfg-phase-content > *:nth-child(4) { animation-delay: 0.22s; }
.cfg-phase-content > *:nth-child(5) { animation-delay: 0.28s; }
.cfg-phase-content > *:nth-child(6) { animation-delay: 0.34s; }
.cfg-phase-content > *:nth-child(7) { animation-delay: 0.40s; }
@keyframes cfgItemRise {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Progress bar — linea di riempimento progressiva (sopra la track grigia) */
.cfg-progress::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  height: 1px;
  width: var(--cfg-progress-pct, 0%);
  max-width: calc(100% - 22px);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c-red) 70%, transparent),
    var(--c-red));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-red) 50%, transparent);
  z-index: 0;
  transition: width 0.7s cubic-bezier(.22,.7,.22,1);
  pointer-events: none;
}
.cfg-step,
.cfg-step .cfg-dot,
.cfg-step .cfg-step-lbl {
  transition: opacity .35s cubic-bezier(.22,.7,.22,1),
              color   .35s cubic-bezier(.22,.7,.22,1),
              background .35s cubic-bezier(.22,.7,.22,1),
              border-color .35s cubic-bezier(.22,.7,.22,1),
              box-shadow .45s cubic-bezier(.22,.7,.22,1),
              transform .35s cubic-bezier(.22,.7,.22,1) !important;
}
.cfg-step.active .cfg-dot {
  transform: scale(1.08);
}
.cfg-step.active .cfg-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--c-red);
  opacity: 0;
  animation: cfgDotRing 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes cfgDotRing {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Pills + cards — micro-press feedback */
.cfg-option, .cfg-tech-card {
  will-change: transform;
}
.cfg-option:active {
  transform: translateY(0) scale(0.97) !important;
  transition: transform .08s ease;
}
.cfg-tech-card:active {
  transform: translateY(0) scale(0.99) !important;
  transition: transform .08s ease;
}
.cfg-option.sel {
  animation: cfgPillPop 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cfgPillPop {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Riepilogo (left) — aggiornamento valori con micro-flash */
.cfg-meta-cell .val {
  transition: color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.cfg-meta-cell.is-updated .val {
  animation: cfgValBump 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cfgValBump {
  0%   { transform: translateY(4px); opacity: 0.4; }
  60%  { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); }
}

/* Canvas SVG — glow leggero pulsante sull'accent + transizione morphing */
.cfg-canvas .accent,
.cfg-canvas .accent-fill {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-red) 45%, transparent));
}
.cfg-canvas .ram,
.cfg-canvas .bed,
.cfg-canvas .upright,
.cfg-canvas .accent-fill,
.cfg-canvas .accent,
.cfg-canvas .dim-line,
.cfg-canvas .dim-text,
.cfg-canvas rect,
.cfg-canvas line,
.cfg-canvas path,
.cfg-canvas text {
  transition: all 0.65s cubic-bezier(.22,.7,.22,1);
}

/* Price bars — accensione progressiva (stagger gestito da JS via --i) */
.cfg-price-bars span {
  transform-origin: left center;
  transition: background .45s cubic-bezier(.22,.7,.22,1),
              transform .45s cubic-bezier(.34,1.56,.64,1);
}
.cfg-price-bars span.active {
  transform: scaleY(1.15);
}

/* Bottoni nav — hover + press piu vivi */
#cfgPrev, #cfgNext {
  transition: background .25s ease, color .25s ease,
              border-color .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s ease;
}
#cfgNext:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--c-red) 35%, transparent);
}
#cfgNext:not(:disabled):active,
#cfgPrev:active { transform: translateY(0) scale(0.98); }

/* Sticky summary — leggero parallax via blur sul bordo */
.cfg-summary {
  position: relative;
}
.cfg-summary::after {
  content: "";
  position: absolute;
  top: 0; right: -1px; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--c-red) 20%, var(--c-red) 80%, transparent);
  opacity: 0.0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.cfg-shell.is-active .cfg-summary::after { opacity: 0.15; }

/* Riduzione del jump tra fasi: minima altezza phase-content */
.cfg-phase { min-height: 420px; }

/* Reduce motion — rispetto preferenze utente */
@media (prefers-reduced-motion: reduce) {
  .cfg-phase-content,
  .cfg-phase-content > *,
  .cfg-step.active .cfg-dot::before,
  .cfg-option.sel { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ═════════════════════════════════════════════════════════════
   VERIFICA FORZA DI PIEGA — mini-card tecnica in phase 3.
   Riusa i tokens del cruscotto (.cfg- è già scuro morbido).
   Compatta, premium, accento rosso, no overflow su 360px.
   ═════════════════════════════════════════════════════════════ */
.cfg-bcheck {
  margin-top: 28px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 100%);
  border: 1px solid var(--cfg-border, rgba(255,255,255,0.08));
  border-left: 2px solid var(--c-red, #E30613);
  border-radius: 6px;
  position: relative;
  isolation: isolate;
}
.cfg-bcheck::before {
  /* halo rosso decorativo in alto a destra */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at top right, rgba(227,6,19,0.12), transparent 70%);
  pointer-events: none;
  border-radius: 0 6px 0 0;
  z-index: -1;
}
.cfg-bcheck-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker spess"
    "title  spess"
    "sub    spess";
  gap: 2px 16px;
  align-items: start;
  margin-bottom: 14px;
}
.cfg-bcheck-kicker {
  grid-area: kicker;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red, #E30613);
}
.cfg-bcheck-title {
  grid-area: title;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-ink, #fff);
  margin: 2px 0 0;
}
.cfg-bcheck-sub {
  grid-area: sub;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255,255,255,0.6);
  margin: 4px 0 0;
}
.cfg-bcheck-spess {
  grid-area: spess;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
}
.cfg-bcheck-spess span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.cfg-bcheck-spess strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink, #fff);
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   r25 (2026-05-14) — Inline thickness picker (step 3 mini-card)
   Trasforma il display Spessore statico in un selettore collapsibile:
   click sul valore → griglia chip con tutti gli spessori → click chip →
   state.spessore aggiornato + rebuild mini-card. Vedi configurator.v3.js.
═══════════════════════════════════════════════════════════════ */
.cfg-bcheck-spess { position: relative; }
.cfg-bcheck-spess-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.cfg-bcheck-spess-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: opacity .2s, color .2s;
}
.cfg-bcheck-spess-btn:hover { opacity: 0.85; }
.cfg-bcheck-spess-btn:focus-visible {
  outline: 2px solid rgba(227,6,19,0.5);
  outline-offset: 3px;
  border-radius: 2px;
}
.cfg-bcheck-spess-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink, #fff);
  letter-spacing: -0.01em;
}
.cfg-bcheck-spess-arrow {
  color: rgba(255,255,255,0.55);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.cfg-bcheck-spess-btn.open .cfg-bcheck-spess-arrow {
  transform: rotate(180deg);
  color: var(--c-red, #E30613);
}
.cfg-bcheck-spess-btn::after {
  content: 'modifica';
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-left: 2px;
  transition: color .2s;
}
.cfg-bcheck-spess-btn:hover::after,
.cfg-bcheck-spess-btn.open::after { color: var(--c-red, #E30613); }

.cfg-bcheck-spess-pick {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  gap: 4px;
  padding: 10px;
  min-width: 320px;
  max-width: 380px;
  background: var(--c-bg, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
  animation: cfgSpessPickIn .18s cubic-bezier(.2,.8,.2,1);
}
.cfg-bcheck-spess-pick[hidden] { display: none; }
@keyframes cfgSpessPickIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cfg-bcheck-spess-opt {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  padding: 8px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.cfg-bcheck-spess-opt:hover {
  background: rgba(227,6,19,0.10);
  border-color: rgba(227,6,19,0.45);
  color: #fff;
}
.cfg-bcheck-spess-opt:active { transform: translateY(1px); }
.cfg-bcheck-spess-opt.sel {
  background: var(--c-red, #E30613);
  border-color: var(--c-red, #E30613);
  color: #fff;
}
/* Light theme */
[data-theme="light"] .cfg-bcheck-spess-pick {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
}
[data-theme="light"] .cfg-bcheck-spess-opt {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.75);
}
[data-theme="light"] .cfg-bcheck-spess-opt:hover {
  background: rgba(227,6,19,0.08);
  border-color: rgba(227,6,19,0.4);
  color: #000;
}
/* iPad / mobile: griglia più stretta + hide "modifica" hint */
@media (max-width: 1024px) {
  .cfg-bcheck-spess-pick {
    grid-template-columns: repeat(4, 1fr);
    min-width: 280px;
    max-width: 340px;
  }
}
@media (max-width: 720px) {
  .cfg-bcheck-spess-btn::after { display: none; }
  .cfg-bcheck-spess-pick {
    grid-template-columns: repeat(4, 1fr);
    min-width: 0;
    width: min(340px, calc(100vw - 60px));
    right: -8px;
  }
}

/* Empty state (no spessore / no tabella) */
.cfg-bcheck-empty .cfg-bcheck-empty-msg {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
}

/* Block label (mono) usata sopra chip + sopra input */
.cfg-bcheck-block-lab,
.cfg-bcheck-field-lab {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}

/* Chip cave V */
.cfg-bcheck-block { margin-bottom: 14px; }
.cfg-bcheck-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cfg-bcheck-chip {
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--c-ink, #fff);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.1;
  transition: border-color 140ms ease, background 140ms ease, transform 80ms ease;
}
.cfg-bcheck-chip:hover { border-color: rgba(227,6,19,0.4); background: rgba(227,6,19,0.05); }
.cfg-bcheck-chip:active { transform: translateY(1px); }
.cfg-bcheck-chip.sel {
  border-color: var(--c-red, #E30613);
  background: rgba(227,6,19,0.14);
  box-shadow: inset 0 0 0 1px rgba(227,6,19,0.4);
}
.cfg-bcheck-chip-v {
  font-weight: 700;
  font-size: 12px;
  color: var(--c-ink, #fff);
}
.cfg-bcheck-chip-tpm {
  font-size: 10.5px;
  color: rgba(255,255,255,0.65);
}
.cfg-bcheck-chip-tpm em {
  font-style: normal;
  color: rgba(255,255,255,0.4);
  margin-left: 2px;
}
.cfg-bcheck-chip-dot {
  display: inline-block;
  margin-left: 4px;
  font-size: 7px;
  color: var(--c-red, #E30613);
  vertical-align: middle;
  transform: translateY(-1px);
}
.cfg-bcheck-chip.rec.sel .cfg-bcheck-chip-dot { color: #fff; }

/* Meta opzionale (ri / b min) */
.cfg-bcheck-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.07);
}
.cfg-bcheck-meta-i {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.cfg-bcheck-meta-i span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.cfg-bcheck-meta-i strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink, #fff);
}

/* Calc row: input lunghezza + risultato */
.cfg-bcheck-calc {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
}
.cfg-bcheck-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cfg-bcheck-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 140ms ease, background 140ms ease;
}
.cfg-bcheck-input-wrap:focus-within {
  border-color: var(--c-red, #E30613);
  background: rgba(0,0,0,0.4);
}
.cfg-bcheck-input-wrap input {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  border: 0;
  color: var(--c-ink, #fff);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  outline: none;
}
.cfg-bcheck-input-wrap input::-webkit-outer-spin-button,
.cfg-bcheck-input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cfg-bcheck-input-wrap input[type=number] { -moz-appearance: textfield; }
.cfg-bcheck-input-unit {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

/* Risultato forza */
.cfg-bcheck-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(227,6,19,0.10), rgba(227,6,19,0.04));
  border: 1px solid rgba(227,6,19,0.28);
  border-radius: 4px;
  min-width: 0;
}
.cfg-bcheck-result .cfg-bcheck-field-lab { margin-bottom: 0; }
.cfg-bcheck-result-v {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  color: var(--c-ink, #fff);
  white-space: nowrap;
}
.cfg-bcheck-result-v strong {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.cfg-bcheck-result-v em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* Compatibilità */
.cfg-bcheck-compat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.4;
}
.cfg-bcheck-compat.ok {
  background: rgba(60,180,90,0.10);
  border: 1px solid rgba(60,180,90,0.32);
  color: #aef0c4;
}
.cfg-bcheck-compat.no {
  background: rgba(227,6,19,0.10);
  border: 1px solid rgba(227,6,19,0.40);
  color: #ffb3b8;
}
.cfg-bcheck-compat.hint {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
}
.cfg-bcheck-compat-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.cfg-bcheck-compat.ok .cfg-bcheck-compat-ic { background: rgba(60,180,90,0.18); color: #cdf3d6; }
.cfg-bcheck-compat.no .cfg-bcheck-compat-ic { background: rgba(227,6,19,0.20); color: #ffd1d4; }
.cfg-bcheck-compat.hint .cfg-bcheck-compat-ic { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

/* Disclaimer */
.cfg-bcheck-disc {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.42);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
}

/* ─── Mobile / narrow tablet (≤640px): stack verticale ─── */
@media (max-width: 640px) {
  .cfg-bcheck {
    margin-top: 22px;
    padding: 16px 14px 14px;
  }
  .cfg-bcheck-head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker"
      "title"
      "sub"
      "spess";
    gap: 4px;
  }
  .cfg-bcheck-spess {
    align-items: flex-start;
    flex-direction: row;
    align-self: start;
    gap: 8px;
    padding: 5px 9px;
    margin-top: 6px;
  }
  .cfg-bcheck-spess span { align-self: center; }
  .cfg-bcheck-title { font-size: 16px; }
  .cfg-bcheck-calc {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cfg-bcheck-result-v strong { font-size: 24px; }
  .cfg-bcheck-meta { gap: 10px 16px; }
}