/* FILE GENERATO da tools/build_configuratore3.py — sorgente: prototypes/m6/assets/configuratore3.css */
/* ============================================================
   Configuratore 3.0 (M-6) — interfaccia nel sistema approvato
   Si carica DOPO css/home3.css e css/configuratore.css (componenti 2.0):
   qui si rimappano i token della 2.0 su quelli della 3.0 e si ridisegna
   l'impaginazione. Il motore 3D (configuratore3d.js) non cambia.
   ============================================================ */
.cfg3 {
  --color-dark: var(--c-ink); --color-beige: var(--c-surface); --color-beige-dark: var(--c-line); --color-white: var(--c-page);
  --font-body: var(--f-sans); --font-heading: var(--f-serif); --nav-height: var(--nav-h); --transition-base: .35s var(--ease-out);
  background: var(--c-page); color: var(--c-ink);
}
.nav:not(.is-solid) { color: var(--c-ink); background: var(--c-page); }
.nav:not(.is-solid)::before { opacity: 0; }
.nav:not(.is-solid) .nav__logo img { filter: brightness(0) opacity(.86); }

/* ---- testata della pagina ---- */
.cfg3 .cfg-header { padding: calc(var(--nav-h) + clamp(2rem, 4vw, 3.5rem)) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); background: none; text-align: left; border-bottom: 1px solid var(--c-line); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.cfg3 .cfg-header .container { display: contents; }
.cfg3 .cfg-header__eyebrow { grid-column: 1 / -1; font: 400 11px/1.3 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 1rem; }
.cfg3 .cfg-header__title { grid-column: 1 / 8; font: 300 clamp(2.8rem, 5.6vw, 5.6rem)/.95 var(--f-serif); letter-spacing: -.02em; margin: 0; color: inherit; }
.cfg3 .cfg-header__title em { font-style: italic; }
.cfg3 .cfg-header__subtitle { grid-column: 9 / 13; margin: 0; color: var(--c-muted); font-size: .98rem; line-height: 1.6; max-width: none; }

/* ---- impaginazione: anteprima agganciata a sinistra, scelte a destra ---- */
.cfg3 .cfg-main { max-width: none; margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(3rem, 6vw, 5rem); grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: clamp(2rem, 4vw, 4rem); }
.cfg3 .cfg-viewer { border-radius: 0; border: 0; background: radial-gradient(120% 90% at 50% 35%, #FBF8F3 0%, var(--c-surface) 70%); aspect-ratio: 5 / 4; }
@media (min-width: 901px) { .cfg3 .cfg-stage { top: calc(var(--nav-h) + 1.25rem); } .cfg3 .cfg-viewer { max-height: calc(100svh - var(--nav-h) - 9.5rem); width: 100%; } }
.cfg3 .cfg-viewer__loading { font: italic 300 1.4rem/1.2 var(--f-serif); color: var(--c-muted); }
.cfg3 .cfg-stage__bar { padding: .9rem 0; border-bottom: 1px solid var(--c-line); }
.cfg3 .cfg-stage__hint { font: 400 10.5px/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.cfg3 .cfg-linkbtn { font: 400 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding: 0 0 .3rem; }
.cfg3 .cfg-stage__stats { border: 0; padding: 1rem 0 0; gap: 1.5rem; }
.cfg3 .cfg-stat__k { font: 400 10px/1.3 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); opacity: 1; }
.cfg3 .cfg-stat__v { font: 300 1.25rem/1.2 var(--f-serif); }

/* ---- pannello delle scelte ---- */
.cfg3 .cfg-panel { gap: 0; }
.cfg3 .cfg-panel__group { padding: 1.6rem 0 1.8rem; border-top: 1px solid var(--c-line); margin: 0; }
.cfg3 .cfg-panel__group:first-child { border-top: 0; padding-top: .4rem; }
.cfg3 .cfg-panel__label { display: flex; align-items: baseline; gap: .9rem; font: 300 1.65rem/1.1 var(--f-serif); letter-spacing: -.005em; text-transform: none; margin-bottom: 1.1rem; }
.cfg3 .cfg-step { font: italic 300 1rem/1 var(--f-serif); color: var(--c-muted); background: none; border: 0; width: auto; height: auto; padding: 0; }
.cfg3 .cfg-sublabel { font: 400 10.5px/1.3 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); margin: 1.3rem 0 .7rem; }
.cfg3 .cfg-card, .cfg3 .cfg-pill, .cfg3 .cfg-target { border-radius: 0; border-color: var(--c-line); background: transparent; }
.cfg3 .cfg-card.is-active, .cfg3 .cfg-pill.is-active { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); background: var(--c-page); color: var(--c-ink); }
.cfg3 .cfg-card__label, .cfg3 .cfg-pill__label { font: 400 12px/1.3 var(--f-sans); letter-spacing: .06em; }
.cfg3 .cfg-target-switch { border-radius: 100px; border: 1px solid var(--c-line); padding: 3px; display: inline-flex; gap: 0; background: none; }
.cfg3 .cfg-target { border: 0; border-radius: 100px; padding: .55rem 1.2rem; font: 400 11px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; }
.cfg3 .cfg-target.is-active { background: var(--c-ink); color: var(--c-page); }
.cfg3 .cfg-tex__img { border-radius: 0; }
.cfg3 .cfg-tex.is-active .cfg-tex__img { box-shadow: 0 0 0 1px var(--c-page), 0 0 0 2px var(--c-ink); }
.cfg3 .cfg-tex__label { font: 400 10.5px/1.3 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; }
.cfg3 .cfg-tex-hint { font-size: 12px; color: var(--c-muted); opacity: 1; }
.cfg3 .cfg-coloracc__head { font: 400 12px/1.3 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; padding-block: .85rem; }
.cfg3 .cfg-swatch-colore.is-active { box-shadow: 0 0 0 2px var(--c-page), 0 0 0 3px var(--c-ink); }
.cfg3 .cfg-select, .cfg3 .cfg-note { border-radius: 0; border: 0; border-bottom: 1px solid var(--c-ink); background: transparent; padding: .8rem 0; font: 300 1.2rem/1.3 var(--f-serif); color: inherit; }
.cfg3 .cfg-note { font: 400 .95rem/1.5 var(--f-sans); border: 1px solid var(--c-line); padding: .8rem; }
.cfg3 .cfg-select:focus-visible, .cfg3 .cfg-note:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.cfg3 .cfg-materasso-info { border: 0; background: var(--c-surface); padding: 1rem 1.1rem; border-radius: 0; margin-top: .9rem; }
.cfg3 .cfg-materasso-info__name { font: 300 1.3rem/1.2 var(--f-serif); }
.cfg3 :is(.cfg-card, .cfg-pill, .cfg-target, .cfg-tex, .cfg-swatch-colore, .cfg-coloracc__head):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* ---- riepilogo e invio ---- */
.cfg3 .cfg-submit { max-width: none; margin: 0; padding: clamp(3rem, 6vw, 5rem) var(--gutter); background: #2B241F; color: #F3EEE6; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; text-align: left; }
.cfg3 .cfg-sum { grid-column: 1 / 8; }
.cfg3 .cfg-sum h2 { font: 300 clamp(2.2rem, 4vw, 3.6rem)/1 var(--f-serif); margin: .9rem 0 1.8rem; }
.cfg3 .cfg-sum h2 em { font-style: italic; }
.cfg3 .cfg-sum__eb { font: 400 11px/1.3 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(243,238,230,.6); }
.cfg3 .cfg-sum dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: 1px solid rgba(243,238,230,.16); }
.cfg3 .cfg-sum dt, .cfg3 .cfg-sum dd { padding: .8rem 0; border-bottom: 1px solid rgba(243,238,230,.16); margin: 0; }
.cfg3 .cfg-sum dt { font: 400 10.5px/1.6 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(243,238,230,.6); padding-right: 2rem; }
.cfg3 .cfg-sum dd { font: 300 1.15rem/1.35 var(--f-serif); }
.cfg3 .cfg-send { grid-column: 9 / 13; align-self: end; display: grid; gap: 1rem; justify-items: start; }
.cfg3 .cfg-send p { color: rgba(243,238,230,.7); font-size: .92rem; line-height: 1.6; margin: 0; }
.cfg3 .cfg-submit__btn { margin: 0; border-radius: 100px; border: 1px solid #F3EEE6; background: #F3EEE6; color: #2B241F; padding: 1rem 1.6rem; font: 400 11.5px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.cfg3 .cfg-submit__btn:hover { background: transparent; color: #F3EEE6; }
.cfg3 .cfg-submit__btn:disabled { opacity: .5; cursor: progress; }
.cfg3 .cfg-submit__confirm { color: #F3EEE6; font: 300 1.1rem/1.4 var(--f-serif); min-height: 1.4em; margin: 0; }
.cfg3 .cfg-send .t-link { color: inherit; font-size: 11px; }

/* barra fissa su smartphone: vai all'invio senza scorrere tutto */
.cfg-bar { display: none; }

/* ---- smartphone ---- */
@media (max-width: 900px) {
  .cfg3 .cfg-header { padding-top: calc(var(--nav-h) + 1.2rem); padding-bottom: 1.2rem; }
  .cfg3 .cfg-header__title, .cfg3 .cfg-header__subtitle { grid-column: 1 / -1; }
  .cfg3 .cfg-header__title { font-size: clamp(2.3rem, 10vw, 3rem); }
  .cfg3 .cfg-header__subtitle { margin-top: .8rem; font-size: .9rem; }
  .cfg3 .cfg-main { grid-template-columns: 1fr; padding: 0 0 6rem; gap: 0; }
  /* l'anteprima resta in alto mentre si scelgono le opzioni */
  .cfg3 .cfg-stage { position: sticky; top: var(--nav-h); z-index: 6; background: var(--c-page); box-shadow: 0 10px 18px -14px rgba(0,0,0,.35); }
  .cfg3 .cfg-viewer { position: static; aspect-ratio: auto; height: min(40svh, 74vw); box-shadow: none; }
  .cfg3 .cfg-stage__bar { padding: .55rem var(--gutter); }
  .cfg3 .cfg-stage__hint { display: none; }
  .cfg3 .cfg-stage__stats { display: none; }
  .cfg3 .cfg-panel { padding-inline: var(--gutter); }
  .cfg3 .cfg-panel__label { font-size: 1.4rem; }
  .cfg3 .cfg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfg3 .cfg-submit { grid-template-columns: 1fr; }
  .cfg3 .cfg-sum, .cfg3 .cfg-send { grid-column: 1 / -1; }
  .cfg3 .cfg-sum dl { grid-template-columns: 1fr; }
  .cfg3 .cfg-sum dt { border-bottom: 0; padding-bottom: 0; }
  .cfg-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #2B241F; color: #F3EEE6; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 1rem; transition: transform .4s var(--ease-out); }
  .cfg-bar.off { transform: translateY(110%); }
  .cfg-bar span { font: 300 1rem/1.2 var(--f-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cfg-bar a { flex: none; font: 400 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: #2B241F; background: #F3EEE6; border-radius: 100px; padding: .75rem 1.1rem; text-decoration: none; }
  .cfg3 ~ .wa { bottom: 5rem; }
}
.rm .cfg-bar { transition: none; }

/* ---- M-10c: misure richieste (facoltative) ---- */
.cfg-mis { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; min-width: 0; }
.cfg-mis legend { padding: 0; margin-bottom: .2rem; }
.cfg-mis__h { font-size: .85rem; color: var(--c-muted); margin: 0; }
.cfg-mis__row { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
.cfg-mis label { display: grid; gap: .35rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.cfg-mis__in { display: flex; align-items: center; border: 1px solid var(--c-line); background: var(--c-page); }
.cfg-mis__in:focus-within { border-color: var(--c-ink); }
.cfg-mis input { width: 6.5rem; border: 0; background: none; font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--c-ink); padding: .65rem .7rem; -moz-appearance: textfield; }
.cfg-mis input::-webkit-outer-spin-button, .cfg-mis input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfg-mis input:focus { outline: none; }
.cfg-mis__in i { font-style: normal; font-size: .85rem; color: var(--c-muted); padding-right: .7rem; }
.cfg-mis__x { padding-bottom: .7rem; color: var(--c-muted); }

/* ---- M-10k: invio più visibile su desktop ---- */
.cfg3 .cfg-go-wrap { display: grid; gap: .7rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.cfg3 .cfg-go { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; background: #2B241F; color: #F3EEE6; border-radius: 100px; text-decoration: none;
  font: 400 12px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; transition: background .3s; }
.cfg3 .cfg-go:hover { background: #000; }
.cfg3 .cfg-go:focus-visible { outline: 2px solid #2B241F; outline-offset: 3px; }
.cfg3 .cfg-go__hint { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--c-muted); }
.cfg3 .cfg-submit__btn { padding: 1.25rem 2.2rem; font-size: 12.5px; box-shadow: 0 0 0 6px rgba(243,238,230,.08); }
.cfg3 .cfg-submit__btn:focus-visible { outline: 2px solid #F3EEE6; outline-offset: 4px; }
@media (min-width: 861px) {
  /* barra mobile riusata su desktop come pillola fissa in basso a sinistra (a destra c'è WhatsApp) */
  .cfg-bar { display: flex; position: fixed; left: var(--gutter); bottom: 1.5rem; z-index: 30; max-width: min(34rem, 60vw); align-items: center; gap: 1.25rem;
    background: #2B241F; color: #F3EEE6; padding: .45rem .45rem .45rem 1.3rem; border-radius: 100px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); transition: transform .4s var(--ease-out), opacity .4s; }
  .cfg-bar.off { transform: translateY(160%); opacity: 0; }
  .cfg-bar span { font: 300 1rem/1.2 var(--f-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cfg-bar a { flex: none; font: 400 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: #2B241F; background: #F3EEE6; border-radius: 100px; padding: .8rem 1.2rem; text-decoration: none; pointer-events: auto; }
}

/* 21/10/2026 · email chiesta solo all'invio (niente finestra iniziale) */
.cfg3 .cfg-email { display: grid; gap: .45rem; width: 100%; max-width: 26rem; color: rgba(243,238,230,.7); font: 400 10.5px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.cfg3 .cfg-email input { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid rgba(243,238,230,.45); color: #F3EEE6; padding: .7rem 0; font: 300 1.1rem/1.3 var(--f-serif); letter-spacing: 0; text-transform: none; border-radius: 0; }
.cfg3 .cfg-email input::placeholder { color: rgba(243,238,230,.35); }
.cfg3 .cfg-email input:focus { outline: none; border-bottom-color: #F3EEE6; }
.cfg3 .cfg-email input:focus-visible { outline: 2px solid #F3EEE6; outline-offset: 4px; }
.cfg3 .cfg-email input[aria-invalid="true"] { border-bottom-color: #E8A28C; }
.cfg3 .cfg-send .cfg-email__pp { font-size: .78rem; line-height: 1.55; max-width: 26rem; }
.cfg3 .cfg-email__pp a { color: #F3EEE6; }