/* Vivemia Factory · design system */
@font-face { font-family: 'Inter'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('/fonts/inter-tight-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Palette: bianco + senape Vivemia, testo inchiostro. I nomi storici restano per compatibilità:
     --viola = inchiostro, --lilla / --lilla-2 = tinte senape per gli stati selezionati. */
  --senape: #D6AD16; /* oro vivemia.it */
  --senape-2: #E2BF45;
  --oro-scuro: #A98200; /* oro scuro vivemia.it (pulsanti al passaggio del mouse) */
  --senape-scuro: #A98200;
  --viola: #171717;
  --viola-2: #3A3340;
  --viola-scuro: #15121A;
  --crema: #FFFFFF;
  --crema-2: #F7F6F2;
  --lilla: #FBEFCF;
  --lilla-2: #FDF8EA;
  --inchiostro: #171717;
  --testo: #303030;
  --grigio: #707070;
  --grigio-2: #A3A3A3;
  --linea: #E8E6E0;
  --linea-2: #D6D3CB;
  --bianco: #FFFFFF;
  --verde: #2E7D4F;
  --verde-sf: #E8F4EC;
  --giallo: #8A6410;
  --giallo-sf: #FDF6E3;
  --rosso: #B3261E;
  --rosso-sf: #FBE9E7;
  --glow: rgba(214, 173, 22, .28);
  --r-s: 8px;
  --r: 14px;
  --r-l: 18px;
  --ombra-s: 0 1px 2px rgba(23, 23, 23, .05), 0 2px 8px rgba(23, 23, 23, .04);
  --ombra: 0 2px 6px rgba(23, 23, 23, .05), 0 12px 32px rgba(23, 23, 23, .07);
  --ombra-l: 0 24px 64px rgba(23, 23, 23, .14);
  --f-titolo: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* come vivemia.it */
  --f-testo: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-marchio: 'Outfit', 'Inter Tight', Arial, sans-serif;
  --max: 1240px;
  --header-h: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: var(--testo); font: 400 16px/1.55 var(--f-testo); -webkit-font-smoothing: antialiased; }
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--viola); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-titolo); color: var(--inchiostro); margin: 0 0 .4em; line-height: 1.08; letter-spacing: -.02em; }
h1 { font-size: clamp(38px, 6vw, 76px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.04em; }
h3 { font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: 20px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
small, .piccolo { font-size: 13px; }
.muto { color: var(--grigio); }
.contenitore { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--senape); outline-offset: 2px; }
::selection { background: var(--senape); color: var(--inchiostro); }

/* ------------------------------------------------------------------ logo */
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo img { display: block; height: 32px; width: auto; }
@media (max-width: 480px) { .logo img { height: 24px; } .lingua { height: 34px; padding: 0 10px; } }

/* ---------------------------------------------------------------- header */
.testata { position: sticky; top: 0; z-index: 50; background: #FFFFFF; border-top: 4px solid var(--senape); border-bottom: 1px solid var(--linea); box-shadow: 0 6px 24px rgba(23, 23, 23, .06); }
.testata.ombra { box-shadow: 0 8px 28px rgba(23, 23, 23, .10); }
.testata .contenitore { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.nav { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav > a:not(.btn) { position: relative; color: var(--inchiostro); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; transition: color .2s; }
.nav > a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; background: var(--senape); transition: width .22s; }
.nav > a:not(.btn):hover, .nav > a:not(.btn)[aria-current="page"] { color: var(--oro-scuro); }
.nav > a:not(.btn):hover::after, .nav > a:not(.btn)[aria-current="page"]::after { width: 100%; }
.carrello-link { position: relative; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav .carrello-link .ico { width: 17px; height: 17px; }
.carrello-link .badge-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--senape); color: var(--inchiostro); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.menu-btn { display: none; flex: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
/* scelta della lingua: pillola con il codice, sotto c'è il menu nativo del browser */
.lingua { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: 999px; font: 700 13px/1 var(--f-testo); letter-spacing: .04em; color: var(--inchiostro); cursor: pointer; transition: border-color .2s; }
.lingua:hover, .lingua:focus-within { border-color: var(--inchiostro); }
.lingua svg { width: 16px; height: 16px; }
.lingua select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
html.traduzione body { visibility: hidden; }
/* invito alla prima visita con il browser in un'altra lingua */
.invito-lingua { position: fixed; z-index: 150; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 8px 8px 8px 18px; border-radius: 14px; background: var(--inchiostro); color: #fff; box-shadow: var(--ombra-l); font: 500 14px/1.3 var(--f-testo); animation: invito-entra .35s ease-out; }
.invito-lingua a { flex: none; padding: 10px 16px; background: var(--senape); color: var(--inchiostro); font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.invito-lingua a:hover { background: var(--oro-scuro); color: #fff; }
.invito-lingua button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .7); font-size: 22px; line-height: 1; cursor: pointer; }
.invito-lingua button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@keyframes invito-entra { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .invito-lingua { animation: none; } }
/* banner dei cookie, come su vivemia.it: informa e registra la scelta */
.banner-cookie { position: fixed; z-index: 160; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 16px 28px; max-width: 1040px; margin: 0 auto; padding: 18px 20px 18px 24px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--ombra-l); animation: invito-entra .35s ease-out; }
.banner-cookie p { flex: 1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--testo); }
.banner-cookie p > * { margin-right: 6px; }
.banner-cookie strong { color: var(--inchiostro); }
.banner-cookie a { color: var(--inchiostro); font-weight: 600; text-underline-offset: 3px; }
.banner-cookie a:hover { color: var(--oro-scuro); }
.banner-cookie .azioni { display: flex; flex: none; gap: 8px; }
.banner-cookie .btn { min-height: 44px; }
@media (max-width: 700px) {
  .banner-cookie { flex-direction: column; align-items: stretch; left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .banner-cookie .azioni .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .banner-cookie { animation: none; } }
.piede .link-cookie { padding: 0; border: 0; background: none; font: 400 15px/1.45 var(--f-testo); color: rgba(255, 255, 255, .84); cursor: pointer; transition: color .18s; }
.piede .link-cookie:hover { color: var(--senape); }
/* pagine legali (privacy e cookie): stessa impostazione dell'informativa di vivemia.it */
.legale-testa { padding: 72px 0 44px; border-bottom: 1px solid var(--linea); }
.legale-testa h1 { max-width: 900px; margin: 0 0 18px; font: 700 clamp(40px, 6vw, 68px)/1.02 var(--f-titolo); letter-spacing: -.05em; color: var(--inchiostro); }
.legale-testa h1 span { color: var(--senape); }
.legale-data { margin: 0; font-size: 14px; color: var(--grigio); }
.legale { padding-top: 44px; padding-bottom: 88px; }
.legale > * { max-width: 940px; }
.legale-intro { max-width: 760px; margin: 0 0 14px; font-size: 18px; line-height: 1.65; color: var(--testo); }
.legale-sez { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 24px; padding: 36px 0; border-top: 1px solid var(--linea); }
.legale-intro + .legale-sez { margin-top: 26px; }
.legale-sez .n { font: 700 15px/1.9 var(--f-testo); color: var(--oro-scuro); }
.legale-sez h2 { margin: 0 0 12px; font: 600 26px/1.2 var(--f-titolo); letter-spacing: -.025em; color: var(--inchiostro); }
.legale-sez p, .legale-sez li { font-size: 16px; line-height: 1.7; color: var(--testo); }
.legale-sez p { margin: 0 0 12px; }
.legale-sez ul { margin: 0 0 12px; padding-left: 20px; }
.legale-sez li { margin-bottom: 8px; }
.legale-sez li strong { color: var(--inchiostro); }
.legale a { color: var(--inchiostro); font-weight: 600; text-underline-offset: 3px; }
.legale a:hover { color: var(--oro-scuro); }
.legale-tabella { width: 100%; min-width: 560px; margin: 4px 0 16px; border-collapse: collapse; font-size: 14.5px; }
.legale-tabella th { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--linea-2); text-align: left; font: 700 12px/1.3 var(--f-testo); letter-spacing: .05em; text-transform: uppercase; color: var(--grigio); }
.legale-tabella td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; color: var(--testo); }
.legale-tabella code { padding: 2px 6px; border-radius: 4px; background: var(--crema-2); font-size: 13px; color: var(--inchiostro); white-space: nowrap; }
.legale-contatti { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; margin-top: 28px; padding: 44px; border-radius: var(--r-l); background: var(--inchiostro); color: rgba(255, 255, 255, .78); }
.legale-contatti h2 { margin: 0 0 18px; font: 700 clamp(30px, 4vw, 40px)/1.08 var(--f-titolo); letter-spacing: -.04em; color: #fff; }
.legale-contatti h2 span { color: var(--senape); }
.legale-contatti a.mail { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--senape); }
.legale-contatti a.mail:hover { color: var(--senape); }
.legale-contatti address { font-style: normal; line-height: 1.7; }
.legale-contatti address strong { color: #fff; }
@media (max-width: 700px) {
  .legale-testa { padding: 48px 0 32px; }
  .legale-sez { grid-template-columns: 1fr; padding: 28px 0; }
  .legale-contatti { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 1180px) { .nav { gap: 20px; } .testata .contenitore { gap: 20px; } }
@media (max-width: 1000px) {
  .menu-btn { display: block; margin-left: 0; margin-right: -10px; }
  .lingua { margin-left: auto; }
  .nav { display: none; position: absolute; top: calc(var(--header-h) + 1px); left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; padding: 12px 16px 18px; border-bottom: 1px solid var(--linea); box-shadow: var(--ombra); }
  .nav.aperto { display: flex; }
  .nav > a:not(.btn) { padding: 12px 14px; font-size: 16px; }
  .nav > a:not(.btn)::after { bottom: 4px; left: 14px; }
  .nav > a:not(.btn):hover::after, .nav > a:not(.btn)[aria-current="page"]::after { width: calc(100% - 28px); }
  .testata .contenitore { gap: 12px; }
}

/* --------------------------------------------------------------- bottoni */
.btn { --bg: transparent; --fg: var(--inchiostro); --bd: rgba(23, 23, 23, .55); display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border-radius: 0; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font: 700 14px/1 var(--f-testo); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; user-select: none; }
.btn:hover { --bg: var(--inchiostro); --fg: #fff; --bd: var(--inchiostro); }
.btn[disabled], .btn.disabilitato { opacity: .45; pointer-events: none; }
.btn-primario, .btn-accento { --bg: var(--senape); --fg: var(--inchiostro); --bd: var(--senape); }
.btn-primario:hover, .btn-accento:hover { --bg: var(--oro-scuro); --fg: #fff; --bd: var(--oro-scuro); }
.btn-scuro { --bg: var(--inchiostro); --fg: #fff; --bd: var(--inchiostro); }
.btn-scuro:hover { --bg: #000; --bd: #000; }
.btn-chiaro { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .72); }
.btn-chiaro:hover { --bg: #fff; --fg: var(--inchiostro); --bd: #fff; }
.btn-testo { --bg: transparent; --bd: transparent; padding: 0 10px; }
.btn-testo:hover { --bg: var(--crema-2); --fg: var(--inchiostro); --bd: transparent; }
.btn-grande { min-height: 56px; padding: 0 23px; }
/* come "Scopri i prodotti" di vivemia.it: freccia che scorre al passaggio del mouse */
.btn-grande.btn-primario::after { content: '→'; margin-left: 13px; font-size: 23px; font-weight: 300; line-height: 1; transition: transform .2s; }
.btn-grande.btn-primario:hover::after { transform: translateX(5px); }
.btn-piccolo { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-blocco { width: 100%; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.btn .ico { width: 18px; height: 18px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- form */
label { font-weight: 600; font-size: 14px; color: var(--inchiostro); }
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo .aiuto { font-size: 12.5px; color: var(--grigio); font-weight: 400; }
.campo .errore-campo { font-size: 12.5px; color: var(--rosso); font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--linea-2); background: var(--bianco); color: var(--inchiostro); font: 400 15px/1.3 var(--f-testo); transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--senape); box-shadow: 0 0 0 4px var(--glow); }
input.invalido, select.invalido { border-color: var(--rosso); box-shadow: 0 0 0 4px rgba(179, 38, 30, .1); }
input.valido { border-color: var(--verde); }
.riga-campi { display: grid; grid-template-columns: repeat(var(--col, 2), minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 640px) { .riga-campi { grid-template-columns: 1fr; } }
.spunta { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--testo); cursor: pointer; padding: 6px 0; }
.spunta input { width: 20px; height: 20px; accent-color: var(--senape); margin: 1px 0 0; flex: none; }
.input-con-azione { display: flex; gap: 8px; }
.input-con-azione input { flex: 1; }

/* ---------------------------------------------------- schede di scelta */
.scelte { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(var(--min, 200px), 1fr)); }
.scelta { position: relative; display: block; cursor: pointer; border: 1.5px solid var(--linea); background: var(--bianco); border-radius: var(--r); padding: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; font-weight: 400; }
.scelta:hover { border-color: var(--linea-2); box-shadow: var(--ombra-s); }
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta:has(input:checked), .scelta.attiva { border-color: var(--senape); background: var(--lilla-2); box-shadow: 0 0 0 3px var(--glow); }
.scelta:has(input:focus-visible) { outline: 3px solid var(--senape); outline-offset: 2px; }
.scelta:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.scelta .titolo-scelta { font: 700 16px/1.25 var(--f-titolo); color: var(--inchiostro); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-right: 28px; }
.scelta .desc { display: block; font-size: 13.5px; color: var(--grigio); margin-top: 4px; line-height: 1.45; }
.scelta .prezzo-scelta { display: block; margin-top: 10px; font-weight: 700; color: var(--inchiostro); font-size: 15px; }
.scelta .spunta-ico { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linea-2); display: grid; place-items: center; background: #fff; }
.scelta:has(input:checked) .spunta-ico, .scelta.attiva .spunta-ico { background: var(--senape); border-color: var(--senape); }
.scelta:has(input:checked) .spunta-ico::after, .scelta.attiva .spunta-ico::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--inchiostro); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--bianco); color: var(--testo); font: 500 14px/1 var(--f-testo); cursor: pointer; transition: all .15s; position: relative; }
.chip:hover { border-color: var(--linea-2); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked), .chip.attivo, .chip[aria-pressed="true"] { background: var(--senape); color: var(--inchiostro); border-color: var(--senape); font-weight: 600; }
.chip:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.chip .n { font-size: 12px; opacity: .65; }
.chip .stella { color: var(--senape); font-size: 12px; }
.chip:has(input:checked) .stella { color: var(--inchiostro); }
.campione-colore { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }

.badge { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--f-testo); letter-spacing: .02em; padding: 5px 8px; border-radius: 6px; background: var(--crema-2); color: var(--testo); white-space: nowrap; }
.badge-viola { background: var(--lilla); color: var(--senape-scuro); }
.badge-senape { background: #F8E7B8; color: #6B4A00; }
.badge-verde { background: var(--verde-sf); color: var(--verde); }
.badge-rosso { background: var(--rosso-sf); color: var(--rosso); }
.badge-giallo { background: var(--giallo-sf); color: var(--giallo); }

.avviso { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 12px; background: #F7F6F2; border: 1px solid var(--linea); font-size: 14px; line-height: 1.5; margin: 12px 0; }
.avviso.verde { background: var(--verde-sf); border-color: #CBE6D4; }
.avviso.giallo { background: var(--giallo-sf); border-color: #F1DCA6; }
.avviso.rosso { background: var(--rosso-sf); border-color: #F3C8C3; }
.avviso .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.avviso p:last-child { margin: 0; }

.card { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 24px; box-shadow: var(--ombra-s); }
.card-piatta { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px; }

/* --------------------------------------------------------------- toast */
.toasts { position: fixed; z-index: 200; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100% - 32px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--inchiostro); color: #fff; padding: 13px 16px; border-radius: 12px; box-shadow: var(--ombra-l); font-size: 14.5px; display: flex; gap: 10px; align-items: center; animation: entra .25s ease-out; }
.toast.errore { background: var(--rosso); }
.toast.ok { background: var(--verde); }
@keyframes entra { from { transform: translateY(12px); opacity: 0; } }

/* --------------------------------------------------------------- modale */
dialog.modale { border: 0; border-radius: var(--r-l); padding: 0; width: min(560px, calc(100% - 32px)); box-shadow: var(--ombra-l); color: var(--testo); background: var(--bianco); }
dialog.modale::backdrop { background: rgba(23, 23, 23, .5); backdrop-filter: blur(3px); }
dialog.modale .testa-modale { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
dialog.modale .corpo-modale { padding: 14px 24px 24px; }
.chiudi { background: none; border: 0; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; color: var(--grigio); }
.chiudi:hover { background: var(--crema-2); }

/* --------------------------------------------------------------- footer */
/* piede come vivemia.it */
.piede { position: relative; overflow: hidden; margin-top: 80px; background: #171717; color: #fff; font-size: 14px; line-height: 1.6; }
.piede::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--senape); }
.piede-interno { max-width: 1380px; margin: 0 auto; padding: 70px 42px 30px; }
.piede-marchio { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 54px; }
.piede-marchio::after { content: ''; position: absolute; right: -220px; top: -210px; width: 420px; height: 420px; border: 1px solid rgba(214, 173, 22, .08); border-radius: 50%; pointer-events: none; }
.piede-logo { display: inline-flex; align-items: center; text-decoration: none; }
.piede-logo img { display: block; height: 50px; width: auto; max-width: 100%; }
.piede-frase { max-width: 330px; margin: 0; padding-bottom: 4px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .68); text-align: right; }
.piede-griglia { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; gap: 50px; align-items: start; }
.piede-colonna { min-width: 0; }
.piede h3 { margin: 0 0 20px; font: 700 15px/1.25 var(--f-testo); letter-spacing: -.01em; color: var(--senape); }
.piede address { margin: 0; font-style: normal; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.piede address strong { color: #fff; font-weight: 700; }
.piede-contatto { display: inline-block; margin-top: 18px; padding-bottom: 2px; border-bottom: 1px solid rgba(214, 173, 22, .65); font-size: 15px; line-height: 1.4; font-weight: 700; color: #fff; text-decoration: none; transition: border-color .2s, color .2s; }
.piede-contatto:hover { border-color: var(--senape); color: var(--senape); }
.piede ul { margin: 0; padding: 0; list-style: none; }
.piede li { margin: 0 0 13px; }
.piede li a { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .84); text-decoration: none; transition: color .18s; }
.piede li a:hover { color: var(--senape); }
.piede-social { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 58px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.piede-social p { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--senape); }
.piede-icone { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.piede-icone a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #fff; opacity: .9; transition: opacity .18s, color .18s, transform .18s; }
.piede-icone a:hover { opacity: 1; color: var(--senape); transform: translateY(-2px); }
.piede-icone svg { display: block; width: 25px; height: 25px; fill: currentColor; }
.piede-legale { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); }
.piede-copyright { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .68); }
.piede-copyright a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(214, 173, 22, .45); transition: color .18s, border-color .18s; }
.piede-copyright a:hover { color: var(--senape); border-color: var(--senape); }
.piede-copyright .sep { opacity: .35; }
.piede-societa { max-width: 1080px; margin: 24px 0 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .5); }
.piede-societa a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.piede-societa a:hover { color: var(--senape); }
.piede li, .piede p, .piede address { overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .piede-interno { padding: 60px 32px 28px; }
  .piede-marchio { margin-bottom: 46px; }
  .piede-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 48px; }
  .piede-griglia .piede-colonna:first-child { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 749px) {
  .piede-interno { padding: 52px 20px 26px; }
  .piede-marchio { display: block; margin-bottom: 42px; }
  .piede-logo { margin-bottom: 18px; }
  .piede-logo img { height: 38px; }
  .piede-frase { max-width: 310px; padding: 0; font-size: 13px; text-align: left; }
  .piede-griglia { grid-template-columns: 1fr; gap: 0; }
  .piede-griglia .piede-colonna:first-child { grid-column: auto; max-width: none; }
  .piede-colonna { padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .piede-colonna:first-child { padding-top: 0; border-top: 0; }
  .piede h3 { margin-bottom: 16px; }
  .piede li { margin-bottom: 11px; }
  .piede li a, .piede address { font-size: 14px; }
  .piede-social { display: block; margin-top: 18px; padding-top: 26px; }
  .piede-social p { margin-bottom: 14px; }
}

/* ------------------------------------------------------------- tabelle */
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font: 600 12px/1.2 var(--f-testo); text-transform: uppercase; letter-spacing: .05em; color: var(--grigio); padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabella td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella tr.evidenza td { background: var(--lilla-2); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================== HOME */
.hero { position: relative; overflow: hidden; background: radial-gradient(1000px 560px at 88% 18%, #FDF1D2 0%, rgba(253,241,210,0) 62%), #FFFFFF; padding: 56px 0 72px; }
.hero .contenitore { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero .occhiello { display: inline-flex; gap: 10px; align-items: center; font: 600 13px/1 var(--f-testo); letter-spacing: .08em; text-transform: uppercase; color: var(--senape-scuro); margin-bottom: 22px; }
.hero h1 .evid { background: linear-gradient(transparent 58%, rgba(214, 173, 22,.55) 58%); padding: 0 .06em; }
.hero .sotto { font-size: 19px; color: var(--grigio); max-width: 34em; margin: 18px 0 28px; }
.hero .azioni { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .numeri { display: flex; gap: 36px; margin-top: 40px; flex-wrap: wrap; }
.hero .numeri strong { display: block; font: 700 30px/1 var(--f-titolo); color: var(--inchiostro); letter-spacing: -.02em; word-spacing: .16em; }
.hero .numeri span { font-size: 13.5px; color: var(--grigio); }
.palco { position: relative; height: 560px; border-radius: 28px; background: radial-gradient(520px 380px at 50% 30%, #FFFFFF 0%, #FBF6EA 55%, #F4ECD8 100%); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
.palco .visore { position: absolute; inset: 0; }
.palco .prova-marchio { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 8px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border-radius: 16px; padding: 8px; box-shadow: var(--ombra); }
.palco .prova-marchio input { border: 0; background: transparent; min-height: 44px; box-shadow: none; font-weight: 600; }
.palco .prova-marchio input:focus { box-shadow: none; }
.palco .commuta { position: absolute; top: 16px; left: 16px; display: flex; gap: 6px; background: rgba(255,255,255,.75); padding: 5px; border-radius: 12px; backdrop-filter: blur(10px); }
.palco .commuta button { border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; font: 600 13px/1 var(--f-testo); color: var(--grigio); cursor: pointer; }
.palco .commuta button[aria-pressed="true"] { background: var(--senape); color: var(--inchiostro); }
@media (max-width: 960px) {
  .hero { padding: 28px 0 48px; }
  .hero .contenitore { grid-template-columns: 1fr; }
  .palco { height: 440px; }
}

.sezione { padding: 88px 0; }
.sezione.stretta { padding: 56px 0; }
.sezione .intro { max-width: 720px; margin-bottom: 44px; }
.sezione .intro p { font-size: 18px; color: var(--grigio); }
.occhiello-sez { font: 700 12.5px/1 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; color: var(--senape-scuro); margin-bottom: 14px; display: block; }
.scuro { background: #F7F6F2; color: var(--testo); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

.passi-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; }
.passi-home li { list-style: none; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 24px; position: relative; }
.passi-home li::before { counter-increment: p; content: '0' counter(p); font: 700 15px/1 var(--f-titolo); color: var(--senape); display: block; margin-bottom: 18px; }
.passi-home p { color: var(--grigio); font-size: 15px; margin: 0; }
@media (max-width: 900px) { .passi-home { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .passi-home { grid-template-columns: 1fr; } }

.vantaggi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vantaggi > div { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-l); padding: 28px; }
.vantaggi .ico-v { width: 46px; height: 46px; border-radius: 12px; background: var(--lilla); color: var(--senape-scuro); display: grid; place-items: center; margin-bottom: 18px; }
.vantaggi p { margin: 0; font-size: 15px; color: var(--grigio); }
@media (max-width: 900px) { .vantaggi { grid-template-columns: 1fr; } }

.griglia-cat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tessera-cat { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 20px; border-radius: var(--r-l); background: var(--bianco); border: 1px solid var(--linea); text-decoration: none; color: var(--inchiostro); transition: transform .2s, box-shadow .2s; }
.tessera-cat:hover { transform: translateY(-3px); box-shadow: var(--ombra); }
.tessera-cat strong { font: 700 18px/1.2 var(--f-titolo); letter-spacing: -.01em; }
.tessera-cat span { font-size: 13.5px; color: var(--grigio); }
.tessera-cat .freccia { align-self: flex-end; width: 34px; height: 34px; border-radius: 50%; background: var(--crema-2); display: grid; place-items: center; }
.tessera-cat.in-evidenza { background: var(--senape); color: var(--inchiostro); border-color: var(--senape); }
.tessera-cat.in-evidenza span { color: rgba(23, 23, 23,.72); }
.tessera-cat.in-evidenza .freccia { background: #fff; }
@media (max-width: 900px) { .griglia-cat { grid-template-columns: 1fr 1fr; } }

.prezzi-home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.prezzo-card { border-radius: var(--r-l); padding: 30px; background: var(--bianco); border: 1px solid var(--linea); display: grid; gap: 6px; }
.prezzo-card .cifra { font: 700 54px/1 var(--f-titolo); letter-spacing: -.04em; color: var(--inchiostro); }
.prezzo-card .cifra small { font-size: 16px; font-weight: 600; color: var(--grigio); letter-spacing: 0; }
.tabella-fasce { margin-top: 26px; }
@media (max-width: 760px) { .prezzi-home { grid-template-columns: 1fr; } }

.faq details { border-bottom: 1px solid var(--linea); padding: 18px 0; }
.faq summary { cursor: pointer; font: 700 18px/1.35 var(--f-titolo); color: var(--inchiostro); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 26px; line-height: .9; color: var(--senape-scuro); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--grigio); max-width: 60em; }

.banda-cta { background: var(--senape); border-radius: 28px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.banda-cta h2 { margin: 0; max-width: 16em; }

.card-divisa { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .card-divisa, .griglia-2 { grid-template-columns: 1fr; } .banda-cta { padding: 32px 24px; } }

.formato-home { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: center; }
.foto-formato { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #F7F6F2; }
.foto-formato img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .formato-home { grid-template-columns: 1fr; } }

/* ============================================================ CATALOGO */
.barra-filtri { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.barra-filtri .cerca { flex: 1 1 280px; position: relative; }
.barra-filtri .cerca input { padding-left: 42px; }
.barra-filtri .cerca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; color: var(--grigio); }
.griglia-prodotti { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 16px; }
.card-prodotto { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .2s, box-shadow .25s, transform .25s; }
.card-prodotto:hover { border-color: var(--linea-2); box-shadow: var(--ombra); transform: translateY(-3px); }
.card-prodotto.scelto { border-color: var(--senape); box-shadow: 0 0 0 3px var(--glow); }
.card-prodotto .foto-p { position: relative; aspect-ratio: 1 / 1; background: #FFFFFF; overflow: hidden; }
.card-prodotto .foto-p img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.card-prodotto:hover .foto-p img { transform: scale(1.045); }
.foto-p.in-carico img { opacity: 0; }
.foto-p.in-carico::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 70%); background-size: 220% 100%; animation: luccica 1.3s linear infinite; }
@keyframes luccica { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.card-prodotto .badges { position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.card-prodotto .badges .badge { box-shadow: 0 1px 2px rgba(23, 23, 23,.08); }
.card-prodotto .corpo-p { display: grid; gap: 5px; padding: 14px 16px 16px; flex: 1; align-content: start; }
.card-prodotto .nome-p { font: 700 16px/1.25 var(--f-titolo); color: var(--inchiostro); letter-spacing: -.01em; }
.card-prodotto .meta-p { font-size: 12.5px; color: var(--grigio); line-height: 1.45; }
.card-prodotto .piede-p { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.card-prodotto .prezzo-p { font: 700 19px/1 var(--f-titolo); color: var(--inchiostro); letter-spacing: -.02em; }
.card-prodotto .prezzo-p small { font: 600 12px/1 var(--f-testo); color: var(--grigio); letter-spacing: 0; }
.card-prodotto .da { display: block; font-size: 11.5px; color: var(--grigio); margin-bottom: 4px; }
.card-prodotto .cta-p { flex: none; font: 700 12.5px/1 var(--f-testo); color: var(--inchiostro); background: var(--senape); border-radius: 999px; padding: 8px 12px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.card-prodotto:hover .cta-p, .card-prodotto:focus-visible .cta-p { opacity: 1; transform: none; }
@media (hover: none) { .card-prodotto .cta-p { opacity: 1; transform: none; } }
.vuoto { text-align: center; padding: 48px 16px; color: var(--grigio); }

/* ======================================================== CONFIGURATORE */
.config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 28px; align-items: start; padding-top: 22px; padding-bottom: 40px; }
.config > .stepper { grid-column: 1 / -1; }
.stepper { display: flex; overflow-x: auto; scrollbar-width: none; padding: 6px 0 4px; margin: 0; }
.stepper::-webkit-scrollbar { display: none; }
.stepper button { flex: 1 1 0; min-width: 104px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 4px; border: 0; background: transparent; cursor: pointer; font: 600 13px/1.2 var(--f-testo); color: var(--grigio-2); text-align: center; }
.stepper button::before { content: ''; position: absolute; top: 16px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; background: var(--linea); border-radius: 2px; }
.stepper button:first-child::before { display: none; }
.stepper button .n { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--linea-2); color: var(--grigio); font-size: 13px; font-weight: 700; transition: all .2s; }
.stepper button.fatto { color: var(--testo); }
.stepper button.fatto::before, .stepper button[aria-current="step"]::before { background: var(--senape); }
.stepper button.fatto .n { background: var(--senape); border-color: var(--senape); color: var(--inchiostro); }
.stepper button[aria-current="step"] { color: var(--inchiostro); }
.stepper button[aria-current="step"] .n { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; box-shadow: 0 0 0 5px var(--glow); }
.stepper button:not(:disabled):hover .n { border-color: var(--senape); }
.stepper button:disabled { cursor: default; opacity: .7; }
@media (max-width: 760px) { .stepper button { min-width: 74px; font-size: 11.5px; } .stepper button .n { width: 30px; height: 30px; } .stepper button::before { top: 14px; } }
.passo { display: none; animation: compare .3s ease-out; }
.passo.attivo { display: block; }
@keyframes compare { from { opacity: 0; transform: translateY(8px); } }
.passo > header { margin-bottom: 18px; }
.passo > header h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 6px; }
.passo > header p { color: var(--grigio); margin: 0; }
.blocco { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 22px; margin-bottom: 16px; }
.blocco > h3 { font-size: 17px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.blocco > .sotto-h { font-size: 14px; color: var(--grigio); margin: 0 0 16px; }
.blocco + .blocco { margin-top: 0; }
.navi-passo { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

.colonna-visore { position: sticky; top: calc(var(--header-h) + 14px); display: grid; gap: 12px; }
.scena { position: relative; height: clamp(320px, calc(100vh - 420px), 520px); border-radius: 22px; overflow: hidden; background: radial-gradient(700px 420px at 50% 24%, #FFFFFF 0%, #FBF7EE 50%, #F3ECDB 100%); box-shadow: inset 0 0 0 1px var(--linea); }
.scena .visore { position: absolute; inset: 0; }
.visore-canvas { width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.visore-canvas:active { cursor: grabbing; }
.visore-errore { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--grigio); }
.scena .strumenti { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.scena .strumenti button { border: 0; background: rgba(255,255,255,.86); backdrop-filter: blur(8px); min-height: 34px; padding: 0 12px; border-radius: 10px; font: 600 12.5px/1 var(--f-testo); color: var(--testo); cursor: pointer; box-shadow: var(--ombra-s); display: inline-flex; align-items: center; gap: 6px; }
.scena .strumenti button:hover { background: #fff; }
.scena .strumenti button[aria-pressed="true"] { background: var(--senape); color: var(--inchiostro); }
.scena .etichetta-scena { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.scena .etichetta-scena .badge { background: rgba(255,255,255,.86); backdrop-filter: blur(8px); }

.riepilogo { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 18px 20px; box-shadow: var(--ombra-s); }
.riepilogo .riga-r { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.riepilogo .riga-r span:first-child { color: var(--grigio); }
.riepilogo .riga-r strong { font-variant-numeric: tabular-nums; }
.riepilogo .totale-r { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--linea-2); margin-top: 10px; padding-top: 12px; }
.riepilogo .totale-r .unit { font: 700 32px/1 var(--f-titolo); letter-spacing: -.03em; color: var(--inchiostro); }
.riepilogo .totale-r small { color: var(--grigio); }
.riepilogo .nome-r { font: 700 16px/1.25 var(--f-titolo); color: var(--inchiostro); margin-bottom: 2px; }
.riepilogo .suggerimento { margin-top: 12px; display: flex; gap: 10px; align-items: center; background: var(--giallo-sf); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; cursor: pointer; border: 0; width: 100%; text-align: left; color: var(--testo); font-family: inherit; }
.riepilogo .suggerimento:hover { background: #F8E9C6; }
.dettaglio-prezzo { font-size: 12.5px; color: var(--grigio); margin-top: 6px; line-height: 1.5; }

.scelta-formato { display: flex; gap: 14px; align-items: center; }

.zona-upload { display: block; position: relative; border: 2px dashed var(--linea-2); border-radius: var(--r); padding: 26px 18px; text-align: center; background: #FCFBF8; transition: border-color .15s, background .15s; cursor: pointer; }
.zona-upload:hover, .zona-upload.sopra { border-color: var(--senape); background: var(--lilla-2); }
.zona-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-upload strong { display: block; font-size: 15px; color: var(--inchiostro); }
.zona-upload span { font-size: 13px; color: var(--grigio); }
.file-caricato { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--linea); border-radius: var(--r); padding: 12px; background: var(--bianco); }
.file-caricato .anteprima { width: 84px; height: 84px; border-radius: 10px; background: var(--crema-2) center/contain no-repeat; border: 1px solid var(--linea); }
.file-caricato .nome-f { font-weight: 600; font-size: 14px; word-break: break-all; }
.esito { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.esito::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.esito.ottimo { color: var(--verde); }
.esito.accettabile, .esito.da_verificare { color: var(--giallo); }
.esito.basso { color: var(--rosso); }
.lista-msg { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--grigio); }

.fasce { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.fascia { border: 1.5px solid var(--linea); border-radius: 12px; padding: 10px 8px; text-align: center; background: var(--bianco); cursor: pointer; font-family: inherit; color: inherit; }
.fascia .q { font-size: 12px; color: var(--grigio); display: block; }
.fascia .p { font: 700 15px/1.2 var(--f-titolo); color: var(--inchiostro); display: block; margin-top: 4px; }
.fascia .s { font-size: 11.5px; color: var(--verde); font-weight: 600; }
.fascia.attiva { border-color: var(--senape); background: var(--lilla-2); box-shadow: 0 0 0 3px var(--glow); }
@media (max-width: 560px) { .fasce { grid-template-columns: repeat(3, 1fr); } }
.quantita-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quantita-box input[type="number"] { width: 150px; font: 700 20px/1 var(--f-titolo); text-align: center; }
.quantita-box input[type="range"] { flex: 1 1 220px; accent-color: var(--senape); }
.passo-q { width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--linea-2); background: #fff; font-size: 20px; cursor: pointer; }

.righe-carrello { display: grid; gap: 12px; }
.riga-carrello { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: start; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 14px; }
.riga-carrello .mini { width: 92px; height: 110px; border-radius: 12px; background: linear-gradient(160deg, #FFFFFF, #F4EDDC) center/contain no-repeat; border: 1px solid var(--linea); }
.riga-carrello .titolo-riga { font: 700 16px/1.25 var(--f-titolo); color: var(--inchiostro); }
.riga-carrello .spec { font-size: 13px; color: var(--grigio); margin-top: 4px; line-height: 1.5; }
.riga-carrello .azioni-riga { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: 10px; }
.riga-carrello .azioni-dx { display: flex; gap: 2px; flex-wrap: wrap; margin-right: -8px; }
.riga-carrello .q-riga { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; color: var(--grigio); }
.riga-carrello .q-riga input { width: 104px; min-height: 38px; padding: 6px 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.riga-carrello .rimuovi:hover { color: var(--rosso); }
.riga-carrello .prezzo-riga { text-align: right; font-variant-numeric: tabular-nums; }
.riga-carrello .prezzo-riga strong { font: 700 18px/1.1 var(--f-titolo); display: block; color: var(--inchiostro); }
@media (max-width: 600px) { .riga-carrello { grid-template-columns: 70px 1fr; } .riga-carrello .mini { width: 70px; height: 86px; } .riga-carrello .prezzo-riga { grid-column: 2; text-align: left; } .riga-carrello .azioni-riga { grid-column: 1 / -1; } }

.barra-mobile { display: none; }
@media (max-width: 1020px) {
  .config { grid-template-columns: 1fr; padding-bottom: 120px; }
  .colonna-visore { position: relative; top: 0; order: -1; }
  .scena { height: 42vh; min-height: 300px; }
  .colonna-visore .riepilogo { display: none; }
  .barra-mobile { display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--linea); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; justify-content: space-between; }
  .barra-mobile .prezzo-m strong { font: 700 22px/1 var(--f-titolo); display: block; color: var(--inchiostro); }
  .barra-mobile .prezzo-m span { font-size: 12px; color: var(--grigio); }
}

/* ------------------------------------------------ configuratore: passo 1 a tutta pagina */
.config.pieno { grid-template-columns: 1fr; }
.config.pieno .colonna-visore { display: none; }
.config.pieno + .barra-azioni { display: none !important; }
.testa-catalogo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }
.testa-catalogo h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 6px; }
.testa-catalogo p { color: var(--grigio); margin: 0; max-width: 46em; }
.percorso { display: flex; gap: 8px; flex-wrap: wrap; }
.percorso span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--testo); background: var(--crema-2); border-radius: 999px; padding: 7px 12px 7px 7px; }
.percorso span b { width: 22px; height: 22px; border-radius: 50%; background: var(--senape); display: grid; place-items: center; font-size: 11.5px; }
.barra-catalogo { position: sticky; top: calc(var(--header-h) + 4px); z-index: 20; background: rgba(255,255,255,.95); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); margin: 14px -24px 8px; padding: 12px 24px 10px; border-bottom: 1px solid var(--linea); }
.riga-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riga-barra .cerca { flex: 1 1 320px; position: relative; }
.riga-barra .cerca input { min-height: 52px; font-size: 16px; border-radius: 14px; padding-left: 46px; background: #FCFBF8; }
.riga-barra .cerca svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; color: var(--grigio); }
.riga-barra select { width: auto; min-height: 52px; border-radius: 14px; }
.segmenti { display: inline-flex; background: var(--crema-2); border-radius: 14px; padding: 4px; gap: 2px; }
.segmenti button { border: 0; background: transparent; min-height: 44px; padding: 0 14px; border-radius: 10px; font: 600 14px/1 var(--f-testo); color: var(--grigio); display: inline-flex; gap: 7px; align-items: center; cursor: pointer; transition: background .15s, color .15s; }
.segmenti button svg { width: 15px; height: 18px; }
.segmenti button[aria-pressed="true"] { background: #fff; color: var(--inchiostro); box-shadow: var(--ombra-s); }
.cat-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 0 2px; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-scroll .chip { flex: none; }
.sezione-cat { margin: 30px 0 8px; }
.sezione-cat > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); padding-bottom: 10px; }
.sezione-cat h3 { font-size: 22px; margin: 0; letter-spacing: -.02em; }
.sezione-cat .sotto { color: var(--grigio); font-size: 14px; margin: 4px 0 0; }
.link-sezione { border: 0; background: none; font: 700 14px/1 var(--f-testo); color: var(--inchiostro); cursor: pointer; padding: 8px 0; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--senape); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.risultati-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--grigio); font-size: 14px; }
.prodotto-scelto { display: flex; gap: 14px; align-items: center; background: var(--lilla-2); border: 1px solid var(--lilla); border-radius: 16px; padding: 10px 14px; margin-bottom: 16px; }
.prodotto-scelto img { width: 54px; height: 63px; border-radius: 10px; object-fit: cover; background: #FFFFFF; }
.prodotto-scelto .nome { font: 700 16px/1.2 var(--f-titolo); color: var(--inchiostro); }
.prodotto-scelto .meta { font-size: 13px; color: var(--grigio); }
.scheda-dettagli summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--grigio); list-style: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; }
.scheda-dettagli summary::-webkit-details-marker { display: none; }
.scheda-dettagli summary::after { content: ''; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.scheda-dettagli[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.scheda-dettagli summary:hover { color: var(--inchiostro); }
.scheda-dettagli dl { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; font-size: 13.5px; margin: 12px 0 0; }
.scheda-dettagli dt { color: var(--grigio); }
.scheda-dettagli dd { margin: 0; }
.miniature-formato { width: 74px; height: 86px; flex: none; border-radius: 12px; background: #FFFFFF; overflow: hidden; display: grid; place-items: center; color: var(--grigio-2); }
.miniature-formato img { width: 100%; height: 100%; object-fit: cover; }
.prezzo-lampo { animation: lampo .6s ease-out; }
@keyframes lampo { 0% { background: rgba(214, 173, 22,.35); } 100% { background: transparent; } }

/* ------------------------------------------------ passo 1: ricerca e categorie */
.ricerca-hero { position: relative; max-width: 760px; margin: 18px 0 26px; }
.ricerca-hero .cerca { display: block; position: relative; }
.ricerca-hero .cerca svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; color: var(--grigio); }
.ricerca-hero input { min-height: 60px; font-size: 17px; border-radius: 16px; padding-left: 50px; background: #fff; box-shadow: var(--ombra-s); }
.suggerimenti { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--ombra-l); padding: 6px; max-height: 420px; overflow-y: auto; }
.sugg { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; border: 0; background: transparent; padding: 10px 12px; border-radius: 11px; text-align: left; font: 400 15px/1.3 var(--f-testo); color: var(--testo); cursor: pointer; }
.sugg:hover, .sugg.attivo { background: var(--lilla-2); }
.sugg strong { color: var(--inchiostro); font-weight: 600; }
.ico-sugg { width: 34px; height: 34px; border-radius: 10px; background: var(--lilla); color: var(--senape-scuro); display: grid; place-items: center; }
.ico-sugg svg { width: 20px; height: 20px; }
.forme-sugg { font-size: 12px; color: var(--grigio); white-space: nowrap; }
.sugg-vuoto { padding: 14px; color: var(--grigio); font-size: 14px; }
.tessere-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tessera { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; text-align: left; border: 1px solid var(--linea); background: #fff; border-radius: 20px; padding: 20px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .25s, transform .25s; min-height: 190px; }
.tessera:hover { border-color: var(--senape); box-shadow: var(--ombra); transform: translateY(-3px); }
.ico-tessera { width: 52px; height: 52px; border-radius: 15px; background: var(--lilla); color: var(--senape-scuro); display: grid; place-items: center; margin-bottom: 8px; transition: background .2s; }
.tessera:hover .ico-tessera { background: var(--senape); color: var(--inchiostro); }
.nome-tessera { font: 700 18px/1.2 var(--f-titolo); color: var(--inchiostro); letter-spacing: -.01em; }
.esempi-tessera { font-size: 13.5px; color: var(--grigio); line-height: 1.45; }
.conta-tessera { font-size: 12.5px; font-weight: 700; color: var(--senape-scuro); letter-spacing: .02em; }
.testa-cat { display: grid; gap: 10px; margin-bottom: 18px; }
.testa-cat .btn { justify-self: start; }
.titolo-cat { display: flex; align-items: center; gap: 14px; }
.titolo-cat h3 { font-size: 26px; margin: 0 0 2px; }
.titolo-cat .ico-tessera { margin: 0; }
.griglia-prodotti.sei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .griglia-prodotti.sei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.altri-box { margin-top: 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #F7F6F2; border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; }
.altri-box label { font-weight: 600; }
.altri-box select { flex: 1 1 300px; max-width: 520px; }
/* passo 2 */
.scelta:has(input:checked) .ico-forma { background: #fff; }
.scelta-formato { display: flex; gap: 14px; align-items: center; }
.data-consegna { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--inchiostro); }
/* riepilogo laterale */
.data-grande { font: 700 22px/1.1 var(--f-titolo); color: var(--inchiostro); letter-spacing: -.02em; text-align: right; }
.nota-quotazione { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; background: var(--lilla-2); border: 1px solid var(--lilla); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
.nota-quotazione svg { width: 20px; height: 20px; flex: none; color: var(--senape-scuro); }
/* passo 7 */
.come-prosegue { list-style: none; counter-reset: cp; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.come-prosegue li { counter-increment: cp; background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 16px; display: grid; gap: 4px; font-size: 14px; color: var(--grigio); }
.come-prosegue li::before { content: counter(cp); width: 28px; height: 28px; border-radius: 50%; background: var(--senape); color: var(--inchiostro); display: grid; place-items: center; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.come-prosegue strong { color: var(--inchiostro); font-size: 15px; }
@media (max-width: 760px) { .come-prosegue { grid-template-columns: 1fr; } }

/* =============================================================== ORDINE */
.timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 10px 0 6px; }
.timeline .fase { position: relative; text-align: center; font-size: 12.5px; color: var(--grigio-2); padding-top: 34px; font-weight: 600; }
.timeline .fase::before { content: ''; position: absolute; top: 9px; left: 50%; width: 20px; height: 20px; border-radius: 50%; transform: translateX(-50%); background: var(--crema-2); border: 2px solid var(--linea-2); z-index: 1; }
.timeline .fase::after { content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: var(--linea); }
.timeline .fase:first-child::after { display: none; }
.timeline .fase.fatta { color: var(--testo); }
.timeline .fase.fatta::before { background: var(--inchiostro); border-color: var(--inchiostro); }
.timeline .fase.fatta::after { background: var(--inchiostro); }
.timeline .fase.corrente { color: var(--inchiostro); }
.timeline .fase.corrente::before { background: var(--senape); border-color: var(--senape); box-shadow: 0 0 0 6px rgba(214, 173, 22,.25); }
@media (max-width: 640px) { .timeline .fase { font-size: 10.5px; } }
.eventi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.eventi li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.eventi li time { color: var(--grigio); font-size: 12.5px; }
.eventi .autore { font-weight: 600; }
.messaggio-admin { background: var(--lilla-2); border-radius: 10px; padding: 8px 10px; }
.griglia-ordine { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
@media (max-width: 960px) { .griglia-ordine { grid-template-columns: 1fr; } }

/* ================================================================= ADMIN */
.admin-layout { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 22px 0 60px; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi > div { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px; }
.kpi span { font-size: 12.5px; color: var(--grigio); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi strong { display: block; font: 700 26px/1.1 var(--f-titolo); color: var(--inchiostro); margin-top: 6px; letter-spacing: -.02em; }
.cassetto { position: fixed; z-index: 120; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--crema); box-shadow: var(--ombra-l); transform: translateX(100%); transition: transform .25s ease-out; overflow-y: auto; }
.cassetto.aperto { transform: none; }
.cassetto .testa-c { position: sticky; top: 0; background: var(--crema); z-index: 2; padding: 16px 22px; border-bottom: 1px solid var(--linea); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.cassetto .corpo-c { padding: 18px 22px 40px; display: grid; gap: 14px; }
.velo { position: fixed; inset: 0; background: rgba(23, 23, 23,.4); z-index: 110; opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.aperto { opacity: 1; pointer-events: auto; }
tr.cliccabile { cursor: pointer; }
tr.cliccabile:hover td { background: var(--lilla-2); }

@media print {
  .testata, .piede, .no-stampa, .toasts { display: none !important; }
  body { background: #fff; }
  .card, .blocco { box-shadow: none; border-color: #ddd; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* rifiniture mobile del configuratore */
.config > .stepper { min-width: 0; }
@media (max-width: 1020px) {
  .config { grid-template-columns: minmax(0, 1fr); }
  .config > .stepper { order: -2; }
}
@media (max-width: 560px) {
  .scena .strumenti { gap: 4px; left: 8px; right: 8px; bottom: 8px; }
  .scena .strumenti button { min-height: 30px; padding: 0 9px; font-size: 11.5px; }
  .scena .strumenti #condividi { display: none; }
  .ricerca-hero input { font-size: 16px; min-height: 54px; }
  .tessere-cat { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tessera { min-height: 0; padding: 14px; }
  .tessera .esempi-tessera { display: none; }
  .ico-tessera { width: 42px; height: 42px; }
  .card-prodotto .corpo-p { padding: 12px; }
  .card-prodotto .nome-p { font-size: 14.5px; }
}

/* ===================================================== configuratore: rifinitura UX */
.pagina-config { background: #F6F4EF; }
.pagina-config main.config { padding-bottom: 130px; }
.pagina-config .passo { counter-reset: sezione; }
.pagina-config .blocco { border: 0; border-radius: 22px; padding: 26px 26px 24px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(23, 23, 23,.04), 0 8px 28px rgba(23, 23, 23,.05); }
.pagina-config .blocco > h3 { gap: 6px 10px; font-size: 18px; flex-wrap: wrap; }
.pagina-config .blocco > h3::before { counter-increment: sezione; content: counter(sezione); width: 26px; height: 26px; border-radius: 50%; background: var(--inchiostro); color: #fff; display: inline-grid; place-items: center; font: 700 12px/1 var(--f-testo); flex: none; }
.pagina-config .blocco > .sotto-h { margin-left: 36px; }
.pagina-config .navi-passo { display: none; }
.pagina-config .passo > header { margin-bottom: 22px; }
.occhiello-passo { display: block; font: 700 12px/1 var(--f-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--senape-scuro); margin-bottom: 10px; }
.pagina-config .scelta { box-shadow: none; }
.pagina-config .scelta:hover { transform: translateY(-1px); box-shadow: var(--ombra-s); }
.pagina-config .scelta:has(input:disabled):hover { transform: none; box-shadow: none; }
.pagina-config .prodotto-scelto { background: #fff; border: 0; box-shadow: 0 1px 2px rgba(23, 23, 23,.04), 0 8px 28px rgba(23, 23, 23,.05); border-radius: 22px; padding: 12px 16px; }
.pagina-config .ricerca-hero input { border-color: transparent; box-shadow: 0 1px 2px rgba(23, 23, 23,.05), 0 10px 30px rgba(23, 23, 23,.07); }
.pagina-config .tessera { border-color: transparent; box-shadow: 0 1px 2px rgba(23, 23, 23,.04), 0 8px 24px rgba(23, 23, 23,.05); }
.pagina-config .tessera:hover { border-color: var(--senape); }
.pagina-config .card-prodotto { border-color: transparent; box-shadow: 0 1px 2px rgba(23, 23, 23,.04), 0 8px 24px rgba(23, 23, 23,.05); }
.pagina-config .card-prodotto:hover { box-shadow: 0 2px 6px rgba(23, 23, 23,.06), 0 18px 40px rgba(23, 23, 23,.10); }
.pagina-config .altri-box { background: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(23, 23, 23,.04), 0 8px 24px rgba(23, 23, 23,.05); }
.piu-cercati { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -10px 0 26px; }
.piu-cercati > span { font-size: 13px; font-weight: 600; color: var(--grigio); margin-right: 2px; }
.piu-cercati .chip { min-height: 34px; font-size: 13px; background: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(23, 23, 23,.06); }
.piu-cercati .chip:hover { border-color: var(--senape); }
/* pannello anteprima: 3D e riepilogo in un'unica scheda */
.pagina-config .colonna-visore { background: #fff; border-radius: 26px; padding: 10px; gap: 0; box-shadow: 0 1px 2px rgba(23, 23, 23,.04), 0 12px 36px rgba(23, 23, 23,.07); }
.pagina-config .colonna-visore .scena { border-radius: 18px; }
.pagina-config .colonna-visore .riepilogo { border: 0; box-shadow: none; background: transparent; padding: 16px 12px 8px; }
.riga-r.modificabile { cursor: pointer; border-radius: 9px; margin: 0 -8px; padding: 6px 8px; transition: background .15s; }
.riga-r.modificabile:hover, .riga-r.modificabile:focus-visible { background: var(--lilla-2); }
.riga-r { align-items: baseline; }
.riga-r strong { text-align: right; margin-left: auto; }
.riga-r .modifica { flex: none; width: 15px; height: 15px; margin-left: 8px; align-self: center; color: var(--grigio-2); opacity: .55; transition: opacity .15s, color .15s; }
.riga-r .modifica svg { width: 15px; height: 15px; }
.riga-r.modificabile:hover .modifica, .riga-r.modificabile:focus-visible .modifica { opacity: 1; color: var(--senape-scuro); }
/* barra azioni fissa: il pulsante principale è sempre a portata */
.barra-azioni { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--linea); box-shadow: 0 -10px 30px rgba(23, 23, 23,.07); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
.barra-azioni .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stato-azioni { display: grid; gap: 5px; min-width: 0; }
.stato-azioni .passo-n { font: 700 11px/1 var(--f-testo); letter-spacing: .1em; text-transform: uppercase; color: var(--senape-scuro); }
.stato-azioni strong { font: 700 17px/1.15 var(--f-titolo); color: var(--inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avanzamento { display: block; width: 240px; max-width: 100%; height: 4px; background: var(--linea); border-radius: 4px; overflow: hidden; }
.avanzamento i { display: block; height: 100%; width: 0; background: var(--senape); border-radius: 4px; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.bottoni-azioni { display: flex; gap: 8px; align-items: center; flex: none; }
.bottoni-azioni .btn-grande { min-width: 220px; }
@media (max-width: 560px) {
  .barra-azioni { padding-top: 10px; }
  .avanzamento { width: 110px; }
  .stato-azioni strong { font-size: 15px; }
  .bottoni-azioni .btn-grande { min-width: 0; min-height: 48px; padding: 0 18px; font-size: 15px; }
  #m-indietro { display: none; }
  .pagina-config .blocco { padding: 20px 16px; border-radius: 18px; }
  .pagina-config .blocco > .sotto-h { margin-left: 0; }
}
/* configuratore su desktop: pannello 3D largo e fermo accanto ai passi, barra azioni che si ferma sopra il piè di pagina */
.pagina-config .barra-azioni { position: sticky; }
.pagina-config main.config { padding-bottom: 28px; }
.pagina-config .piede { margin-top: 0; }
@media (min-width: 1021px) {
  .pagina-config .testata .contenitore, .pagina-config main.config, .pagina-config .barra-azioni .contenitore { max-width: 1400px; }
  .pagina-config main.config { grid-template-columns: minmax(0, 1fr) clamp(440px, 42%, 620px); }
  .pagina-config main.config.pieno { grid-template-columns: minmax(0, 1fr); }
  .pagina-config .config > .stepper { grid-column: 1; }
  .pagina-config .colonna-visore {
    grid-column: 2; grid-row: 1 / span 2;
    /* stessa altezza della posizione di partenza (testata + bordo oro + margine): il pannello non si sposta */
    position: sticky; top: calc(var(--header-h) + 26px);
    height: calc(100vh - var(--header-h) - 26px - 100px); max-height: none; min-height: 460px;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .pagina-config .colonna-visore .scena { flex: 1 1 auto; height: auto; min-height: 240px; }
  .pagina-config .colonna-visore .riepilogo { flex: 0 1 auto; max-height: 46%; overflow-y: auto; scrollbar-width: thin; }
}
}

/* logistica stimata: tre dati in riquadri compatti */
.dati-log { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.dato-log { display: flex; align-items: center; gap: 12px; background: #F7F6F2; border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.dato-log > span { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--lilla); color: var(--senape-scuro); display: grid; place-items: center; }
.dato-log > span .ico { width: 19px; height: 19px; }
.dato-log strong { display: block; font-size: 14.5px; line-height: 1.25; color: var(--inchiostro); }
.dato-log div span { display: block; font-size: 12.5px; color: var(--grigio); line-height: 1.35; }
@media (max-width: 640px) { .dati-log { grid-template-columns: 1fr; } }

.riga-carrello .errore-riga { color: var(--rosso); font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.riga-carrello .errore-riga .btn { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
@media (max-width: 600px) {
  .riga-carrello .azioni-dx { width: 100%; justify-content: space-between; flex-wrap: nowrap; margin: 0 -6px; }
  .riga-carrello .azioni-dx .btn { padding-inline: 6px; }
}

/* ---------- grafica: dove va (etichetta o stampa di tutta la busta) ---------- */
.scelta-supporto { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; }
.ill-supporto { display: grid; place-items: center; width: 52px; height: 60px; border-radius: 12px; background: var(--crema-2); }
.ill-supporto svg { width: 38px; height: 44px; }
.scelta-supporto:has(input:checked) .ill-supporto { background: #fff; box-shadow: var(--ombra-s); }
.fustella-nota { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.fustella-nota .muto { flex: 1; min-width: 220px; }

/* ---------- editor di impaginazione ---------- */
.editor-grafica { display: grid; gap: 12px; margin-top: 4px; }
.eg-testa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eg-facce { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--crema-2); }
.eg-facce[hidden] { display: none; }
.eg-facce button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; border-radius: 999px; padding: 7px 16px; font: 600 13.5px var(--f-testo); color: var(--grigio); cursor: pointer; }
.eg-facce button[aria-selected="true"] { background: var(--bianco); color: var(--inchiostro); box-shadow: var(--ombra-s); }
.eg-pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--linea-2); }
.eg-facce .con-file .eg-pallino { background: var(--verde); }
.eg-guide { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--grigio); cursor: pointer; user-select: none; }
.eg-guide input { width: 16px; height: 16px; accent-color: var(--senape); }
.eg-palco { position: relative; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--r); background: #EFEBE3; outline: none; transition: box-shadow .15s, border-color .15s; }
.eg-palco:focus-visible { box-shadow: 0 0 0 3px var(--glow); border-color: var(--senape); }
.eg-palco.sopra { border-color: var(--senape); box-shadow: 0 0 0 3px var(--glow); }
.eg-canvas { display: block; touch-action: none; }
.eg-palco.modificabile .eg-canvas { cursor: grab; }
.eg-palco.presa .eg-canvas { cursor: grabbing; }
.eg-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.eg-vuoto { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; cursor: pointer; background: rgba(239, 235, 227, .35); transition: background .15s; }
.eg-vuoto-card { display: grid; justify-items: center; gap: 8px; max-width: min(340px, 92%); padding: 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: var(--ombra); }
.eg-vuoto[hidden] { display: none; }
.eg-vuoto:hover, .eg-palco.sopra .eg-vuoto { background: rgba(251, 239, 207, .72); }
.eg-vuoto-card > strong { font: 700 16px/1.3 var(--f-titolo); color: var(--inchiostro); }
.eg-ico-carica { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bianco); color: var(--senape-scuro); box-shadow: var(--ombra-s); }
.eg-ico-carica .ico { width: 24px; height: 24px; }
.eg-formati { font-size: 12.5px; color: var(--grigio); }
.eg-nota-vuoto { max-width: 32em; font-size: 12.5px; color: var(--grigio); }
.eg-nota-vuoto:empty { display: none; }
.eg-attesa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 600; color: var(--inchiostro); }
.eg-attesa[hidden], .eg-avviso-file[hidden], .eg-suggerimento[hidden] { display: none; }
.eg-avviso-file { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 82%; padding: 14px 16px; border-radius: 12px; background: var(--bianco); box-shadow: var(--ombra); font-size: 13.5px; text-align: center; }
.eg-suggerimento { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88); font-size: 11.5px; color: var(--grigio); pointer-events: none; }
.eg-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--grigio); }
.eg-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.eg-legenda span[hidden] { display: none; }
.eg-legenda i { display: inline-block; width: 18px; border-top: 2px solid var(--inchiostro); }
.eg-legenda .l-sicura { border-top: 2px dashed #B07A0E; }
.eg-legenda .l-abb { border-top: 2px dotted #D64541; }
.eg-legenda .l-tec { height: 10px; border: 0; border-radius: 2px; background: repeating-linear-gradient(135deg, rgba(23, 23, 23, .28) 0 1px, rgba(23, 23, 23, .06) 1px 5px); }
.eg-corpo { display: grid; gap: 14px; }
.eg-corpo[hidden], .eg-strumenti[hidden] { display: none; }
.eg-strumenti { display: grid; gap: 12px; }
.eg-gruppo-preset { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.eg-preset { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--bianco); font: inherit; color: var(--testo); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.eg-preset[hidden] { display: none; }
.eg-preset:hover { border-color: var(--senape-2); }
.eg-preset[aria-pressed="true"] { border-color: var(--senape); background: var(--lilla-2); box-shadow: 0 0 0 3px var(--glow); }
.eg-preset > span:first-child { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--crema-2); color: var(--inchiostro); }
.eg-preset[aria-pressed="true"] > span:first-child { background: var(--senape); }
.eg-preset .ico { width: 18px; height: 18px; }
.eg-preset strong { display: block; font-size: 13.5px; color: var(--inchiostro); }
.eg-preset small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--grigio); }
.eg-riga { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.eg-etichetta { min-width: 78px; font-size: 13px; font-weight: 600; color: var(--inchiostro); }
.eg-zoom { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; }
.eg-zoom input[type=range] { flex: 1; min-width: 80px; accent-color: var(--senape); }
.eg-tondo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--linea); border-radius: 50%; background: var(--bianco); font-size: 16px; font-weight: 700; line-height: 1; color: var(--inchiostro); cursor: pointer; }
.eg-tondo:hover { border-color: var(--senape); }
.eg-percento { min-width: 46px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.eg-colori { display: flex; gap: 6px; flex-wrap: wrap; }
.eg-colore { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px 0 5px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--bianco); font: 600 12.5px var(--f-testo); color: var(--testo); cursor: pointer; }
.eg-colore:hover { border-color: var(--senape-2); }
.eg-colore[aria-pressed="true"] { border-color: var(--senape); background: var(--lilla-2); }
.eg-colore i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.eg-colore-libero::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: linear-gradient(var(--colore, transparent), var(--colore, transparent)), conic-gradient(#e5484d, #f5d90a, #46a758, #0090ff, #8e4ec6, #e5484d); }
.eg-colore-libero input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.eg-nota { font-size: 12px; color: var(--grigio); }
.eg-azioni { display: flex; flex-wrap: wrap; gap: 2px; margin-left: -10px; }
.eg-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: #FCFBF8; }
.eg-ico-file { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--lilla); color: var(--senape-scuro); }
.eg-file-testo { display: grid; flex: 1; min-width: 0; }
.eg-nome { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.eg-dett { font-size: 12px; color: var(--grigio); }
.eg-sostituisci { position: relative; overflow: hidden; cursor: pointer; }
.eg-controlli { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.eg-msg { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--testo); }
.eg-msg > span { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; }
.eg-msg.ok > span { background: var(--verde); }
.eg-msg.avviso > span { background: #C98A0B; }
.eg-msg.errore > span { background: var(--rosso); }
.eg-msg.errore { color: var(--rosso); font-weight: 600; }
.eg-msg.info > span { background: var(--grigio-2); font: italic 700 12px Georgia, serif; }
@media (max-width: 600px) {
  .eg-suggerimento { display: none; }
  .eg-etichetta { width: 100%; min-width: 0; }
  .eg-guide { margin-left: 0; }
}

/* ---------- admin: collegamento della casella email ---------- */
.card-email { border: 1px solid var(--linea); border-left: 4px solid var(--senape); border-radius: var(--r); background: var(--bianco); padding: 16px 18px; margin-bottom: 12px; }
.card-email.collegata { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-left-color: var(--verde); background: var(--verde-sf); padding: 10px 14px; }
.card-email.collegata p { margin: 0; font-size: 14px; }
.form-email h3 { margin: 0 0 4px; font-size: 17px; }
.form-email > p { margin: 0 0 12px; }
.griglia-email { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.avanzate-email { margin: 10px 0 4px; }
.avanzate-email summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--grigio); }
.avanzate-email[open] summary { margin-bottom: 10px; }
.azioni-email { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.errore-email { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--rosso-sf); color: var(--rosso); font-size: 13.5px; font-weight: 600; }

/* ---------- home: apertura ---------- */
.apertura { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); background: radial-gradient(900px 560px at 76% 46%, rgba(214, 173, 22, .2), transparent 62%), linear-gradient(180deg, #FFFFFF 0%, #FBF7EC 100%); }
.apertura > .contenitore { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; min-height: min(calc(100svh - 128px), 700px); padding-top: 40px; padding-bottom: 36px; }
.ap-titolo { margin: 0; font: 700 clamp(44px, 5.8vw, 88px)/.96 var(--f-titolo); letter-spacing: -.055em; color: var(--inchiostro); }
.ap-titolo .riga { display: block; overflow: hidden; padding-bottom: .06em; }
.ap-titolo .riga > span { display: inline-block; animation: ap-entra .9s cubic-bezier(.2, .8, .2, 1) both; }
.ap-titolo .riga:nth-child(2) > span { animation-delay: .12s; }
.ap-evid { background: linear-gradient(transparent 64%, rgba(214, 173, 22, .6) 64%, rgba(214, 173, 22, .6) 90%, transparent 90%); padding: 0 .04em; }
.ap-rotante { margin: 26px 0 0; font: 600 clamp(19px, 2vw, 27px)/1.35 var(--f-titolo); letter-spacing: -.01em; color: var(--grigio); animation: ap-sfuma .8s .35s both; }
.ap-frase { position: relative; display: inline-block; font-weight: 700; color: var(--inchiostro); transition: opacity .32s ease, transform .32s ease; }
.ap-frase::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; border-radius: 2px; background: var(--senape); }
.ap-frase.esce { opacity: 0; transform: translateY(-.45em); }
.ap-frase.entra { opacity: 0; transform: translateY(.45em); transition: none; }
.ap-azioni { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; animation: ap-sfuma .8s .5s both; }
.ap-scopri { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--inchiostro); text-decoration: none; }
.ap-scopri:hover { color: var(--senape-scuro); }
.ap-scopri span { display: inline-block; animation: ap-freccia 1.6s ease-in-out infinite; }
.ap-scena { position: relative; height: clamp(380px, 44vw, 580px); }
.ap-alone { position: absolute; left: 50%; top: 52%; width: 82%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(214, 173, 22, .36), rgba(214, 173, 22, 0) 66%); }
.ap-anello { position: absolute; left: 50%; top: 52%; width: 74%; aspect-ratio: 1; border: 1.5px dashed rgba(176, 122, 14, .28); border-radius: 50%; transform: translate(-50%, -50%); animation: ap-gira 80s linear infinite; }
.ap-strato { position: absolute; inset: 0; transition: transform .3s ease-out; will-change: transform; }
.ap-pack { position: absolute; display: block; pointer-events: none; user-select: none; }
.ap-sx, .ap-dx { height: 60%; opacity: .92; filter: drop-shadow(0 24px 30px rgba(23, 23, 23, .14)); transition: opacity .32s ease; }
.ap-sx { left: 0; top: 21%; --r: -9deg; animation: ap-galleggia 7.5s ease-in-out -2s infinite; }
.ap-dx { right: 0; top: 16%; --r: 8deg; animation: ap-galleggia 8.5s ease-in-out -5s infinite; }
.ap-sx.cambio, .ap-dx.cambio, .ap-sx:not([src]), .ap-dx:not([src]) { opacity: 0; }
.ap-centro { position: absolute; left: 20%; top: 2%; width: 60%; height: 96%; animation: ap-galleggia 6s ease-in-out infinite; }
.ap-principale { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(44px) scale(.93); filter: drop-shadow(0 34px 44px rgba(23, 23, 23, .2)); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.ap-principale.attiva { opacity: 1; transform: none; }
.ap-principale.uscita { opacity: 0; transform: translateY(-44px) scale(.93); }
.ap-nastro { position: relative; overflow: hidden; border-top: 1px solid var(--linea); background: var(--bianco); }
.ap-nastro::before, .ap-nastro::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 80px; pointer-events: none; }
.ap-nastro::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.ap-nastro::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.ap-nastro-tr { display: flex; width: max-content; animation: ap-scorri 75s linear infinite; }
.ap-nastro:hover .ap-nastro-tr { animation-play-state: paused; }
.ap-nastro-gruppo { display: flex; }
.ap-nastro-gruppo span { display: inline-flex; align-items: center; gap: 26px; padding: 16px 0 16px 26px; font: 700 15px/1 var(--f-titolo); letter-spacing: -.01em; color: var(--inchiostro); white-space: nowrap; }
.ap-nastro-gruppo span::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--senape); }
#prova { scroll-margin-top: 76px; }
@keyframes ap-entra { from { opacity: 0; transform: translateY(105%); } }
@keyframes ap-sfuma { from { opacity: 0; transform: translateY(14px); } }
@keyframes ap-galleggia { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-16px) rotate(var(--r, 0deg)); } }
@keyframes ap-freccia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes ap-gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ap-scorri { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .apertura > .contenitore { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding-top: 32px; padding-bottom: 20px; }
  .ap-scena { height: 340px; }
  .ap-azioni { margin-top: 26px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-titolo .riga > span, .ap-rotante, .ap-azioni, .ap-scopri span, .ap-anello, .ap-sx, .ap-dx, .ap-centro, .ap-nastro-tr { animation: none; }
  .ap-principale, .ap-frase, .ap-strato { transition: none; }
}

/* =====================================================================
   Allineamento a vivemia.it: sezioni bianche o nere, schede #F7F6F2 senza bordo,
   etichette oro scuro 12px maiuscole, testi grigi #707070, enfasi in oro, campi con sola riga sotto.
   ===================================================================== */
.occhiello-sez, .hero .occhiello, .occhiello-passo { font: 700 12px/1.2 var(--f-testo); letter-spacing: .04em; text-transform: uppercase; color: var(--senape-scuro); }
.hero .occhiello { gap: 0; }
.sezione .intro p, .hero .sotto { color: var(--grigio); line-height: 1.65; }
/* parole in evidenza come "Siamo qui." */
.hero h1 .evid, .ap-evid { background: none; padding: 0; color: var(--senape); }
/* apertura e hero su fondo bianco */
.apertura { background: #FFFFFF; }
.ap-alone { background: radial-gradient(circle, #F7F6F2 0%, #F7F6F2 56%, rgba(247, 246, 242, 0) 70%); }
.hero { background: #FFFFFF; }
.palco { background: #F7F6F2; border-radius: 18px; box-shadow: none; }
/* schede: grigio caldo, niente bordo né ombra */
.passi-home li, .vantaggi > div, .tessera, .tessera-cat, .card-prodotto, .card.formato-home { background: #F7F6F2; border-color: transparent; box-shadow: none; border-radius: 18px; }
.tessera:hover, .tessera-cat:hover, .card-prodotto:hover { background: #F1EFEA; border-color: transparent; box-shadow: none; transform: none; }
.foto-formato { background: #FFFFFF; border-radius: 14px; }
.ico-tessera, .ico-v { background: #FFFFFF; color: var(--senape-scuro); }
.passi-home h3, .vantaggi h3, .card.formato-home h3 { font: 500 22px/1.15 var(--f-titolo); letter-spacing: -.025em; }
.nome-tessera { font: 500 20px/1.2 var(--f-titolo); letter-spacing: -.02em; }
.passi-home p, .vantaggi p, .esempi-tessera, .card.formato-home p { color: #737373; font-size: 14px; line-height: 1.6; }
/* sezione scura come quelle di vivemia.it */
.sezione.scuro { background: #171717; color: #fff; border: 0; }
.sezione.scuro h2, .sezione.scuro h3 { color: #fff; }
.sezione.scuro .occhiello-sez { color: var(--senape); }
.sezione.scuro .intro p { color: rgba(255, 255, 255, .68); }
.sezione.scuro .vantaggi > div { background: #202020; }
.sezione.scuro .vantaggi p { color: rgba(255, 255, 255, .68); }
.sezione.scuro .ico-v { background: rgba(214, 173, 22, .14); color: var(--senape); }
/* domande frequenti */
.faq summary { font: 500 20px/1.35 var(--f-titolo); letter-spacing: -.02em; }
.faq details p { color: var(--grigio); line-height: 1.65; }
/* campi come nel modulo contatti di vivemia.it */
.campo { gap: 4px; margin-bottom: 20px; align-content: start; }
/* campo con pulsante (partita IVA): stessa altezza e stessa riga dei campi accanto */
.input-con-azione { align-items: flex-end; }
.input-con-azione .btn { min-height: 42px; padding: 0 18px; }
.campo > label { font: 700 12px/1.3 var(--f-testo); letter-spacing: .01em; color: #6A6A6A; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="number"], .campo input[type="password"], .campo input[type="search"], .campo select, .campo textarea {
  min-height: 42px; padding: 8px 0 11px; border: 0; border-bottom: 1px solid rgba(23, 23, 23, .34); border-radius: 0; background: transparent; font-size: 16px; }
.campo textarea { min-height: 110px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { box-shadow: none; border-bottom: 2px solid var(--senape); padding-bottom: 10px; }
.campo input.invalido, .campo select.invalido { box-shadow: none; border-bottom-color: var(--rosso); }
/* pillole come "In offerta" */
.badge { border-radius: 999px; font: 700 10.5px/1 var(--f-testo); letter-spacing: .035em; text-transform: uppercase; padding: 5px 10px; }
.badge-senape { background: var(--senape); color: var(--inchiostro); }
/* riquadri e pagine di servizio */
.card { box-shadow: none; }
.banda-cta { border-radius: 18px; }
/* configuratore: fondo grigio caldo, riquadri bianchi piatti */
.pagina-config { background: #F7F6F2; }
.pagina-config .blocco, .pagina-config .prodotto-scelto, .pagina-config .colonna-visore, .pagina-config .altri-box, .pagina-config .ricerca-hero input { box-shadow: none; border-radius: 18px; }
.pagina-config .tessera, .pagina-config .card-prodotto { background: #FFFFFF; }
.pagina-config .tessera:hover, .pagina-config .card-prodotto:hover { background: #FBFAF7; }
.pagina-config .scelta:hover { box-shadow: none; }
.scena { background: #F7F6F2; }

/* opzione di riferimento (es. tempi standard): contorno oro anche quando non è selezionata */
.scelta.scelta-consigliata { border-color: var(--senape); }

.nota-taglie { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--grigio); }

/* brief per il grafico */
.brief-stato { display: grid; gap: 8px; background: #F7F6F2; border-radius: 12px; padding: 12px 14px; }
.brief-stato .testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--inchiostro); }
.brief-stato .testa span, .brief-stato p { font-size: 13px; color: var(--grigio); }
.brief-stato p { margin: 0; }
.brief-barra { height: 6px; border-radius: 999px; background: #E6E1D3; overflow: hidden; }
.brief-barra span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--senape); transition: width .35s ease; }
.brief-parte { border-top: 1px solid var(--linea); margin-top: 20px; padding-top: 18px; }
.brief-parte > h4 { margin: 0 0 14px; font: 700 12px/1.2 var(--f-testo); letter-spacing: .08em; text-transform: uppercase; color: var(--oro-scuro); }
.brief-parte .campo:last-child { margin-bottom: 0; }
.brief-parte .scelte { grid-template-columns: repeat(auto-fit, minmax(var(--min, 200px), 1fr)); }
#upload-logo:not(:empty) { margin-top: 10px; }
.chip[disabled] { cursor: default; }
.chip .aa { font-size: 17px; line-height: 1; }
.campione-palette { width: 26px; height: 16px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .12); flex: none; }
.stili-brief { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.stile-brief { position: relative; display: grid; gap: 7px; justify-items: center; cursor: pointer; font: 600 13px/1.2 var(--f-testo); color: var(--grigio); }
.stile-brief input { position: absolute; opacity: 0; pointer-events: none; }
.stile-brief canvas { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 8px; box-shadow: 0 1px 4px rgba(23, 23, 23, .2); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s, transform .15s; }
.stile-brief:hover canvas { transform: translateY(-2px); }
.stile-brief:has(input:checked) { color: var(--inchiostro); }
.stile-brief:has(input:checked) canvas { outline-color: var(--senape); }
.stile-brief:has(input:focus-visible) canvas { outline-color: var(--inchiostro); }
#desc-stile { margin-top: 6px; }
.colori-brief { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.colore-brief { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; cursor: pointer; }
.colore-brief:hover { border-color: var(--linea-2); }
.colore-brief input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.colore-brief input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.colore-brief input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; }
.colore-brief input[type="color"]::-moz-color-swatch { border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; }
.colore-brief span { display: grid; font: 600 13px/1.25 var(--f-testo); color: var(--inchiostro); }
.colore-brief small { font: 500 11.5px/1.2 var(--f-testo); color: var(--grigio); text-transform: uppercase; }
@media (max-width: 640px) { .stili-brief { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* pagina Chi siamo: contenuti e impaginazione della pagina "Chi siamo" di vivemia.it */
.chi-siamo h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; margin: 0 0 22px; }
.chi-siamo h1 span, .chi-siamo h2 span { display: block; color: var(--senape); }
.chi-siamo p { color: var(--grigio); font-size: 16.5px; line-height: 1.7; margin: 0 0 16px; }
.cs-occhiello { display: block; margin-bottom: 18px; font: 700 13px/1.2 var(--f-testo); color: var(--oro-scuro); }
.cs-occhiello-chiaro { color: var(--senape); }
.cs-hero { position: relative; display: flex; align-items: flex-end; min-height: min(80vh, 780px); overflow: hidden; background: var(--inchiostro); }
.cs-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55)), linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 65%); }
.cs-hero .contenitore { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 60px; }
.cs-hero h1 { max-width: 1060px; margin: 0; color: #fff; font-size: clamp(42px, 6.6vw, 92px); font-weight: 700; letter-spacing: -.06em; line-height: .98; }
.cs-hero h1 span { color: #F3D97C; }
.cs-intro { display: grid; grid-template-columns: 1fr 1.65fr; gap: 40px; padding-top: 140px; padding-bottom: 140px; }
.cs-intro h2, .cs-intro p { max-width: 640px; }
.cs-foto { display: block; width: 100%; height: clamp(320px, 56vw, 860px); object-fit: cover; }
.cs-identita { position: relative; overflow: hidden; padding: 130px 0; background: var(--inchiostro); }
.cs-identita::before { content: ''; position: absolute; top: 60px; right: -120px; width: 380px; height: 380px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.cs-identita h2 { color: #fff; }
.cs-identita .cs-sotto { color: rgba(255, 255, 255, .72); }
.cs-identita-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 70px; }
.cs-identita-griglia img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.cs-manifesto { margin: 0; }
.cs-manifesto p { margin-bottom: 26px; color: #fff; font-size: clamp(19px, 2vw, 27px); font-weight: 400; line-height: 1.45; letter-spacing: -.01em; }
.cs-virgolette { display: block; margin-bottom: 26px; color: var(--oro-scuro); font: 700 64px/.6 Georgia, serif; }
.cs-manifesto footer { color: var(--senape); font-size: 14px; font-weight: 700; }
.cs-vm { display: grid; grid-template-columns: 1fr 1fr; padding-top: 120px; padding-bottom: 120px; }
.cs-vm > div { padding-right: 72px; }
.cs-vm > div + div { padding: 0 0 0 56px; border-left: 1px solid var(--linea); }
.cs-approccio { display: grid; grid-template-columns: 1.2fr 1fr; padding-bottom: 130px; }
.cs-approccio img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.cs-pannello { display: flex; flex-direction: column; justify-content: center; padding: 72px 56px; background: #F5F3EF; }
.cs-valori { padding-bottom: 130px; }
.cs-valori-griglia { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cs-valori-griglia article { padding: 36px 36px 44px; }
.cs-valori-griglia article:first-child { padding-left: 0; }
.cs-valori-griglia article + article { border-left: 1px solid var(--linea); }
.cs-numero { display: block; margin-bottom: 64px; font: 700 12px/1 var(--f-testo); color: var(--oro-scuro); }
.chi-siamo .cs-valori h3 { margin-bottom: 14px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.chi-siamo .cs-valori p { font-size: 15px; }
.cs-casa { display: grid; grid-template-columns: 1.7fr 1fr; background: var(--inchiostro); }
.cs-casa > img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.cs-casa-testo { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 120px 56px; border-top: 4px solid var(--senape); }
.cs-casa-testo::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 220px; height: 220px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.cs-casa h2 { color: #fff; }
.chi-siamo .cs-casa p { color: rgba(255, 255, 255, .75); }
.cs-casa address { display: grid; gap: 6px; margin: 18px 0 30px; font-style: normal; font-size: 15px; color: rgba(255, 255, 255, .8); }
.cs-casa address strong { margin-bottom: 4px; color: #fff; }
.cs-link { align-self: flex-start; padding-bottom: 6px; border-bottom: 1px solid var(--senape); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.cs-link span { margin-left: 8px; color: var(--senape); }
.cs-aziende { padding-top: 130px; }
.cs-aziende-box { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 84px 64px; background: #F5F3EF; }
@media (min-width: 1400px) { .cs-aziende-box { margin: 0 -64px; } }
.cs-aziende ul { margin: 26px 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.cs-aziende li { padding: 14px 0; border-bottom: 1px solid var(--linea); color: var(--testo); font-size: 14.5px; }
.cs-finale { max-width: 760px; padding-top: 130px; padding-bottom: 130px; text-align: center; }
.chi-siamo .cs-finale p { margin: 0 auto 30px; }
.cs-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 900px) {
  .cs-intro, .cs-identita-griglia, .cs-vm, .cs-approccio, .cs-casa, .cs-aziende-box { grid-template-columns: 1fr; }
  .cs-intro { gap: 0; padding-top: 80px; padding-bottom: 80px; }
  .cs-identita, .cs-vm, .cs-finale { padding-top: 80px; padding-bottom: 80px; }
  .cs-approccio, .cs-valori { padding-bottom: 80px; }
  .cs-aziende { padding-top: 80px; }
  .cs-vm > div { padding-right: 0; }
  .cs-vm > div + div { margin-top: 40px; padding: 40px 0 0; border-left: 0; border-top: 1px solid var(--linea); }
  .cs-valori-griglia { grid-template-columns: 1fr; }
  .cs-valori-griglia article, .cs-valori-griglia article:first-child { padding: 28px 0; }
  .cs-valori-griglia article + article { border-left: 0; border-top: 1px solid var(--linea); }
  .cs-numero { margin-bottom: 20px; }
  .cs-pannello, .cs-casa-testo, .cs-aziende-box { padding: 48px 24px; }
  .cs-aziende-box { gap: 8px; }
  .cs-casa > img, .cs-approccio img { min-height: 300px; }
}