/* Configuratore zerbini: legge le variabili --zs-* del tema (così sembra parte del sito); valori di riserva = colori del configuratore. */
.czb {
	--c-inchiostro: var(--zs-inchiostro, #2b2b2a); --c-gomma: var(--zs-gomma, #1e2022); --c-lime: var(--zs-lime, #dedc00); --c-lime-scuro: var(--zs-lime-scuro, #b8b600);
	--c-pietra: var(--zs-pietra, #f3f3f1); --c-carta: var(--zs-carta, #fff); --c-fibra: var(--zs-fibra, #d9d4c9); --c-fibra-scura: var(--zs-fibra-scura, #a79a85);
	--c-tenue: var(--zs-tenue, #6a6a66); --c-ok: var(--zs-ok, #2f6f45); --c-avviso: var(--zs-avviso, #8a5a00); --c-errore: #9b2c1d;
	--r-controllo: var(--zs-r-controllo, 8px);
	color: var(--c-inchiostro); font-size: 1rem; line-height: 1.5; margin: 0 0 32px; position: relative;
}
.czb *, .czb *::before, .czb *::after { box-sizing: border-box; }
.czb h3 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: inherit; letter-spacing: 0; }
.czb h3 small { font-weight: 500; color: var(--c-tenue); font-size: .875rem; text-align: right; }
.czb button { font: inherit; color: inherit; }
.czb img { max-width: 100%; display: block; }
.czb :focus-visible { outline: 3px solid var(--c-gomma); outline-offset: 2px; box-shadow: 0 0 0 6px var(--c-lime); }
.czb [hidden] { display: none !important; }

.czb-avvio { display: flex; gap: 12px; align-items: center; padding: 48px 20px; background: var(--c-pietra); border-radius: 14px; color: var(--c-tenue); }
.czb-rotella { width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: czb-gira .8s linear infinite; flex: none; }
@keyframes czb-gira { to { transform: rotate(360deg); } }

.czb-griglia { display: grid; gap: 12px; }
@media (min-width: 1000px) { .czb-griglia { grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); align-items: start; gap: 16px; } }

/* anteprima: lo zerbino posato su un pavimento chiaro */
.czb-vista { background: var(--c-carta); border: 1px solid var(--c-fibra); border-radius: 14px; overflow: hidden; }
/* Z3D-T: l'anteprima fissa si ferma sotto le barre fisse del tema (intestazione sticky, barra di WordPress), misurate in JS */
@media (min-width: 1000px) { .czb-vista { position: sticky; top: calc(var(--czb-sopra, 80px) + 16px); } }
.czb-pavimento { position: relative; background-color: #dcd9d2; background-image: linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 25% 33.33%; padding: 18px 18px 40px; }
.czb-tela { position: relative; min-height: 220px; display: grid; place-items: center; }
.czb-tela.czb-vuota { aspect-ratio: 4 / 3; min-height: 0; }
.czb-img { width: 100%; height: auto; display: block; }
.czb-pavimento:has(.czb-img) { background: #e9e7e1; padding: 0 0 36px; }
.czb-pavimento:has(.czb-img) .czb-tela { min-height: 0; }
.czb-sovra { position: absolute; overflow: visible; }
.czb-sovra path { fill: transparent; cursor: pointer; stroke: transparent; stroke-width: 6; vector-effect: non-scaling-stroke; transition: fill .15s; }
.czb-sovra path:hover, .czb-sovra path:focus-visible { fill: rgba(222,220,0,.28); stroke: var(--c-lime); stroke-width: 2; outline: none; box-shadow: none; }
.czb-suggerimento { position: absolute; top: 6px; left: 6px; background: var(--c-carta); font-size: .8125rem; font-weight: 560; padding: 4px 10px; border-radius: 6px; pointer-events: none; }
@media (hover: none) {
	/* sotto lo zerbino ma fuori dalla tela (29 ott 2026): se allunga la tela, le parti toccabili scivolano rispetto al disegno */
	.czb-suggerimento { position: absolute; top: 100%; left: 0; right: 0; display: block; background: transparent; padding: 10px 0 0; text-align: center; color: var(--c-tenue); }
	.czb-pavimento:has(.czb-img) { padding-bottom: 44px; }
	.czb-pavimento:has(.czb-img) .czb-quota { bottom: auto; top: 8px; left: 8px; transform: none; }
}
.czb-quota { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: .8125rem; font-weight: 650; background: rgba(255,255,255,.88); padding: 2px 8px; border-radius: 4px; }
.czb-invito { width: 82%; aspect-ratio: 3 / 2; border-radius: 10px; border: 6px solid var(--c-gomma); background: #2a2c2e; color: #f1f1ec; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; cursor: pointer; box-shadow: 0 18px 30px -16px rgba(0,0,0,.45); }
.czb-invito b { font-size: 1.25rem; }
.czb-invito span { max-width: 30ch; font-size: .9375rem; color: #c9c9c3; }
.czb-invito svg { color: var(--c-lime); }
.czb-tela.czb-sopra .czb-invito { outline: 4px dashed var(--c-lime); outline-offset: 6px; }
.czb-velo { position: absolute; inset: 0; display: flex; gap: 10px; align-items: center; justify-content: center; background: rgba(243,243,241,.72); font-weight: 650; border-radius: 10px; }

.czb-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--c-fibra); font-size: .875rem; }
.czb-legenda:empty { display: none; }
.czb-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.czb-legenda img { width: 24px; height: 24px; border-radius: 5px; }
.czb-stato { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px 14px; font-size: .875rem; border-top: 1px solid var(--c-fibra); }
.czb-stato p { margin: 0; }
.czb-stato ul { margin: 6px 0 0; padding-left: 18px; color: var(--c-tenue); }
.czb-puntino { width: 9px; height: 9px; border-radius: 50%; background: var(--c-lime); box-shadow: 0 0 0 1px var(--c-lime-scuro); flex: none; margin-top: 6px; }
.czb-stato-ok b { color: var(--c-ok); }
.czb-stato-avviso b { color: var(--c-avviso); }
.czb-stato-errore { color: var(--c-errore); }
.czb-stato-errore .czb-puntino { background: var(--c-errore); box-shadow: none; }

/* pannello delle scelte */
.czb-pannello { background: var(--c-carta); border: 1px solid var(--c-fibra); border-radius: 14px; }
.czb-gruppo { padding: 18px 20px; border-bottom: 1px solid var(--c-fibra); }
.czb-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.czb-file small { color: var(--c-tenue); font-size: .875rem; }
.czb-miniatura { width: 44px; height: 44px; border-radius: 6px; background: var(--c-gomma); color: var(--c-lime); display: grid; place-items: center; font-weight: 800; font-size: .75rem; flex: none; }
.czb-nome-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.czb-scelte { display: grid; gap: 8px; }
.czb-scelta, .czb-zona { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: var(--r-controllo); border: 1px solid var(--c-fibra); background: var(--c-carta); text-align: left; cursor: pointer; width: 100%; }
.czb-scelta img, .czb-zona img, .czb-zona .czb-campione { width: 36px; height: 36px; border-radius: 5px; object-fit: cover; }
.czb-scelta b, .czb-zona b { display: block; font-size: 1rem; }
.czb-scelta small, .czb-zona small { color: var(--c-tenue); font-size: .875rem; }
.czb-scelta[aria-pressed="true"] { border: 2px solid var(--c-inchiostro); padding: 10px 11px; box-shadow: inset 4px 0 0 var(--c-lime); }
.czb-scelta:hover, .czb-zona:hover { border-color: var(--c-fibra-scura); }
.czb-colori { display: grid; gap: 8px; }
.czb-misura { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.czb-campo { position: relative; display: block; }
.czb-campo span { display: block; font-size: .875rem; color: var(--c-tenue); margin-bottom: 4px; }
.czb-campo input { width: 100%; height: 48px; border: 1px solid var(--c-fibra-scura); border-radius: var(--r-controllo); padding: 0 40px 0 12px; font: inherit; font-weight: 600; background: var(--c-carta); color: inherit; -moz-appearance: textfield; }
.czb-campo input::-webkit-inner-spin-button { -webkit-appearance: none; }
.czb-campo i { position: absolute; right: 12px; bottom: 13px; font-style: normal; color: var(--c-tenue); font-size: .875rem; }
.czb-per { padding-bottom: 13px; color: var(--c-tenue); }
/* sagoma del logo (29 ott 2026): proporzioni bloccate */
.czb-per-legato { padding-bottom: 12px; color: var(--c-gomma); display: inline-flex; }
.czb-per[hidden], .czb-preset[hidden], .czb-gruppo[hidden] { display: none; }
.czb-dal-logo { font-style: normal; color: var(--c-inchiostro); font-weight: 600; }
.czb-sagoma-nota { margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--c-lime); font-size: .875rem; color: var(--c-inchiostro); }
.czb-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.czb-preset { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.czb-preset button, .czb-forme button { font-size: .875rem; font-weight: 600; min-height: 40px; padding: 0 12px; border-radius: var(--r-controllo); border: 1px solid var(--c-fibra); background: var(--c-carta); cursor: pointer; }
.czb-preset button[aria-pressed="true"], .czb-forme button[aria-pressed="true"] { background: var(--c-gomma); color: #fff; border-color: var(--c-gomma); }
.czb-errore-misura { color: var(--c-errore); font-size: .875rem; margin: 10px 0 0; }
.czb-forme { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.czb-forme button { display: grid; gap: 6px; place-items: center; padding: 10px 4px; min-height: 76px; line-height: 1.2; }
.czb-forme svg { width: 30px; height: 22px; }
.czb input[type="range"] { width: 100%; accent-color: var(--c-gomma); }
.czb-spunte { display: grid; gap: 12px; }
.czb-spunta label, label.czb-spunta { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; cursor: pointer; }
.czb-spunta input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-gomma); }
.czb-spunta small { display: block; color: var(--c-tenue); font-size: .875rem; }
.czb-spunta em { font-style: normal; color: var(--c-tenue); font-size: .875rem; white-space: nowrap; }
.czb-bordo-lati { margin: 8px 0 0 32px; height: 42px; border: 1px solid var(--c-fibra-scura); border-radius: var(--r-controllo); padding: 0 10px; font: inherit; background: var(--c-carta); max-width: calc(100% - 32px); }
.czb-quantita { display: inline-grid; grid-template-columns: 44px 64px 44px; border: 1px solid var(--c-fibra-scura); border-radius: var(--r-controllo); overflow: hidden; }
.czb-quantita button { border: 0; background: var(--c-pietra); font-size: 1.25rem; cursor: pointer; }
.czb-quantita input { border: 0; text-align: center; font: inherit; font-weight: 650; height: 44px; width: 100%; -moz-appearance: textfield; }

/* totale */
.czb-totale { padding: 20px; display: grid; gap: 12px; }
.czb-totale-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.czb-prezzo { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.125rem); font-weight: 780; font-variation-settings: "wdth" 112; text-align: right; }
.czb-prezzo del { font-size: 1rem; font-weight: 500; color: var(--c-tenue); margin-left: 6px; }
.czb-dettaglio { font-size: .875rem; color: var(--c-tenue); margin: 0; }
.czb-voci { font-size: .875rem; }
.czb-voci summary { cursor: pointer; font-weight: 600; }
.czb-voci ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.czb-voci li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--c-fibra); padding-bottom: 6px; }
.czb-voci li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.czb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--r-controllo); font-weight: 650; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.czb-btn:disabled { opacity: .55; cursor: not-allowed; }
.czb-btn-primario { background: var(--c-lime); color: var(--c-gomma); border-color: var(--c-lime); }
.czb-btn-primario:not(:disabled):hover { background: #e9e700; border-color: var(--c-lime-scuro); }
.czb-btn-secondario { background: transparent; color: var(--c-inchiostro); border-color: var(--c-inchiostro); min-height: 40px; padding: 0 14px; margin-left: auto; }
.czb-btn-scuro { background: var(--c-gomma); color: #fff !important; }
.czb-totale .czb-aggiungi { width: 100%; min-height: 54px; font-size: 1.0625rem; }
.czb-esito { font-size: .9375rem; margin: 0; }
.czb-esito:empty { display: none; }
.czb-esito-ok { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--c-pietra); padding: 10px 12px; border-radius: var(--r-controllo); }
.czb-esito-errore { color: var(--c-errore); }
.czb-secondario { margin: 0; font-size: .875rem; }
.czb-link { background: none; border: 0; padding: 0; font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--c-lime-scuro); cursor: pointer; }

/* barra fissa su telefono */
.czb-barra { position: sticky; bottom: 0; z-index: 15; background: var(--c-carta); border-top: 1px solid var(--c-fibra); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; margin: 12px -16px 0; }
.czb-barra div { line-height: 1.2; min-width: 0; }
.czb-barra strong { font-size: 1.25rem; font-weight: 780; display: block; }
.czb-barra span { font-size: .75rem; color: var(--c-tenue); }
.czb-barra .czb-btn { margin-left: auto; padding: 0 14px; }
@media (min-width: 1000px) { .czb-barra { display: none; } }
.wp-admin .czb-barra, .wp-admin .czb-secondario { display: none; }
.wp-admin .czb h3 { padding: 0; }

/* tavolozza e richiesta */
.czb dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); color: var(--c-inchiostro); background: var(--c-carta); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.czb dialog::backdrop { background: rgba(30,32,34,.55); }
.czb-tav-testa { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--c-fibra); position: sticky; top: 0; background: var(--c-carta); z-index: 1; }
.czb-tav-testa h3 { margin: 0; }
.czb-chiudi { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-pietra); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.czb-tav-mini img { max-height: 140px; width: auto; margin: 12px auto 0; }
.czb-tav-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 16px 18px 20px; }
.czb-tav-griglia button { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 6px; border: 1px solid transparent; border-radius: var(--r-controllo); background: none; cursor: pointer; font-size: .8125rem; line-height: 1.25; }
.czb-tav-griglia img, .czb-tav-griglia .czb-campione { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; }
.czb-tav-griglia small { color: var(--c-tenue); }
.czb-tav-griglia button:hover { border-color: var(--c-fibra-scura); }
.czb-tav-griglia button[aria-pressed="true"] { border: 2px solid var(--c-inchiostro); box-shadow: inset 0 -4px 0 var(--c-lime); }
.czb-campione { display: block; }
.czb-richiesta > p { margin: 14px 18px 0; }
.czb-modulo { display: grid; gap: 12px; padding: 16px 18px 20px; }
.czb-modulo label { display: grid; gap: 4px; font-size: .875rem; font-weight: 600; }
.czb-modulo input, .czb-modulo select, .czb-modulo textarea { font: inherit; font-weight: 400; border: 1px solid var(--c-fibra-scura); border-radius: var(--r-controllo); padding: 10px 12px; background: var(--c-carta); color: inherit; }
.czb-ripiego { background: var(--c-pietra); border-radius: 14px; padding: 24px 20px; }
.czb-ripiego h3 { font-size: 1.25rem; }
.czb-ripiego .czb-modulo { padding: 8px 0 0; max-width: 560px; }

@media (prefers-reduced-motion: reduce) { .czb *, .czb *::before, .czb *::after { animation: none !important; transition: none !important; } }
.czb-miniatura-carrello, img.czb-miniatura { border-radius: 6px; }

/* Risoluzione del logo alla misura scelta e «Migliora l'immagine» nel browser (28 ott 2026) */
.czb-qualita:empty { display: none; }
.czb-qualita-box { margin-top: 14px; padding: 12px 14px 14px; background: var(--c-pietra); border: 1px solid var(--c-fibra); border-left: 4px solid var(--c-lime); border-radius: var(--r-controllo); font-size: .9375rem; }
.czb-qualita-box p { margin: 0 0 8px; }
.czb-qualita-titolo { color: var(--c-gomma); }
.czb-qualita-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.czb-qualita-azioni .czb-btn { margin: 0; }
.czb-qualita-azioni small { flex: 1 1 180px; color: var(--c-tenue); font-size: .8125rem; }
.czb-segno { flex: none; }
.czb-btn-scuro .czb-segno { color: var(--c-lime); }
.czb-qualita-fatto { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: .875rem; color: var(--c-tenue); }
.czb-qualita-fatto b { color: var(--c-ok); }
.czb-qualita-fatto .czb-segno { color: var(--c-ok); margin-top: 1px; }
.czb-qualita-fatto .czb-link { font-size: inherit; }
/* la finestra prima/dopo del modulo (fuori da .czb, nel body): colori del configuratore sulle variabili --aiq-* */
.aiq-finestra {
	--aiq-accento: var(--zs-marchio, #3c3c3b); --aiq-accento-scuro: var(--zs-gomma, #1e2022); --aiq-accento-tenue: #f2f1a6;
	--aiq-inchiostro: var(--zs-gomma, #1e2022); --aiq-testo: var(--zs-inchiostro, #2b2b2a); --aiq-tenue: var(--zs-tenue, #6a6a66);
	--aiq-linea: var(--zs-fibra, #d9d4c9); --aiq-fondo: var(--zs-pietra, #f3f3f1); --aiq-fondo-hover: #ebebe7; --aiq-bianco: var(--zs-carta, #fff);
	--aiq-avviso: var(--zs-avviso, #8a5a00); --aiq-avviso-fondo: #fbf6dd; --aiq-raggio: var(--zs-r-zerbino, 14px); --aiq-raggio-campo: var(--zs-r-controllo, 8px);
	--aiq-carattere: inherit;
}
.aiq-finestra .aiq-primario { background: var(--zs-lime, #dedc00); border-color: var(--zs-lime, #dedc00); color: var(--zs-gomma, #1e2022); }
.aiq-finestra .aiq-primario:hover { background: #e9e700; border-color: var(--zs-lime-scuro, #b8b600); }
.aiq-finestra .aiq-segno { color: var(--zs-marchio, #3c3c3b); }
.czb-stato .czb-vai-qualita { display: inline; text-align: left; color: var(--c-avviso); }
/* dettagli sotto il minimo di taglio cerchiati sull'anteprima; rilettura come logo (28 ott 2026) */
.czb-sovra .czb-cerchio { fill: rgba(222,220,0,.18); stroke: #c2410c; stroke-width: 2.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.czb-stato .czb-zone-nota { margin: 8px 0 0; color: var(--c-inchiostro); }
.czb-stato .czb-zone-nota .czb-link { display: inline; text-align: left; }
/* Colore della zona o di «solo questo pezzo», come lo studio Cuttalo (28 ott 2026) */
.czb-sovra rect.czb-parte-base { fill: transparent; stroke: transparent; cursor: pointer; vector-effect: non-scaling-stroke; }
.czb-sovra rect.czb-parte-base:focus-visible { stroke: #fff; stroke-width: 3; stroke-dasharray: 8 6; outline: none; box-shadow: none; filter: drop-shadow(0 0 1.5px rgba(30,32,34,.9)); }
.czb-sovra path.czb-parte-zona { fill: rgba(255,255,255,.28); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 1.5px rgba(30,32,34,.9)); }
.czb-sovra path.czb-parte-pezzo { fill: rgba(255,255,255,.34); stroke: #fff; stroke-width: 3; stroke-dasharray: 7 5; filter: drop-shadow(0 0 1.5px rgba(30,32,34,.9)); }
.czb-sovra path.czb-parte-fuori { fill: rgba(106,106,102,.58); }
.czb-tav-quadro { position: relative; width: fit-content; max-width: 100%; margin: 12px auto 0; }
.czb-tav-quadro img { display: block; max-height: 140px; width: auto; margin: 0; }
.czb-tav-quadro .czb-sovra { pointer-events: none; }
.czb-tav-quadro .czb-sovra path { stroke-width: 2; cursor: default; }
.czb-ambito { border: 0; margin: 12px 18px 0; padding: 0; min-width: 0; }
.czb-ambito legend { font-weight: 700; font-size: .875rem; margin-bottom: 6px; padding: 0; }
.czb-ambito [role="radiogroup"] { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--c-fibra-scura); border-radius: var(--r-controllo); overflow: hidden; }
.czb-ambito button { min-height: 44px; padding: 8px 10px; border: 0; background: var(--c-carta); font-weight: 600; font-size: .875rem; cursor: pointer; }
.czb-ambito button + button { border-left: 1px solid var(--c-fibra-scura); }
.czb-ambito button[aria-checked="true"] { background: var(--c-gomma); color: #fff; box-shadow: inset 0 -4px 0 var(--c-lime); }
.czb-ambito small { display: block; margin-top: 6px; color: var(--c-tenue); font-size: .8125rem; }
.czb-legenda .czb-voce { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px 4px 4px; border: 1px solid var(--c-fibra); border-radius: 999px; background: var(--c-carta); cursor: pointer; font-size: .875rem; }
.czb-legenda .czb-voce:hover { border-color: var(--c-fibra-scura); }
/* Etichette dei colori <-> disegno (29 ott 2026, come lo studio Cuttalo): le aree del colore restano piene con un filo chiaro, il resto si attenua */
.czb-sovra path { transition: fill .18s ease, stroke .18s ease; }
.czb-sovra path.czb-parte-colore { fill: transparent; stroke: var(--c-carta); stroke-width: 1.75; filter: drop-shadow(0 0 1px color-mix(in srgb, var(--c-gomma) 85%, transparent)); }
.czb-sovra path.czb-parte-attenua { fill: color-mix(in srgb, var(--c-tenue) 55%, transparent); }
.czb-legenda .czb-voce { -webkit-touch-callout: none; user-select: none; touch-action: manipulation; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.czb-legenda .czb-voce.czb-voce-evid { border-color: var(--c-gomma); background: var(--c-pietra); box-shadow: inset 0 -3px 0 var(--c-lime), 0 2px 8px -4px color-mix(in srgb, var(--c-gomma) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .czb-sovra path, .czb-legenda .czb-voce { transition: none; } }

/* Schede dell'anteprima (Z3D, 29 ott 2026, sera): Disegno · 3D · Ambienti. Il modulo comune sta sopra la tela, con le
   sue misure (posizione da JS): l'anteprima resta una, la colonna destra non si muove. Token --s3-* dai colori del marchio. */
.czb-schede { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--c-fibra); }
.czb-schede button { min-height: 44px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: none; font-weight: 600; color: var(--c-tenue); cursor: pointer; }
.czb-schede button[aria-selected="true"] { color: var(--c-inchiostro); border-bottom-color: var(--c-lime); }
.czb-schede button:disabled { opacity: .45; cursor: default; }
.czb-scena {
	--s3-testo: var(--c-inchiostro); --s3-tenue: var(--c-tenue); --s3-linea: var(--c-fibra); --s3-carta: var(--c-carta); --s3-tinta: var(--c-pietra);
	--s3-acc: var(--c-gomma); --s3-acc-tenue: var(--c-pietra); --s3-acc-scuro: var(--c-gomma); --s3-su-acc: var(--c-carta);
	--s3-palco: var(--c-pietra); --s3-pav: var(--c-fibra); --s3-maniglia: var(--c-carta); --s3-campo: var(--c-fibra-scura);
	--s3-ombra: color-mix(in srgb, var(--c-gomma) 45%, transparent); --s3-ombra-tenue: color-mix(in srgb, var(--c-gomma) 14%, transparent);
	position: absolute; z-index: 3;
}
/* nelle schede 3D e Ambienti l'invito «tocca una parte» del disegno non serve: resta al suo posto, invisibile */
.czb-pavimento:has(.czb-scena:not([hidden])) .czb-suggerimento { visibility: hidden; }
.czb-scena .s3-voce[aria-pressed="true"], .czb-scena .s3-variante[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--c-lime); }
/* «.czb button { color: inherit }» vale più dei pulsanti del modulo: qui si rimettono i loro colori */
.czb .czb-scena .s3-voce, .czb .czb-scena .s3-variante, .czb .czb-scena .s3-btn-sec { color: var(--s3-testo); }
.czb .czb-scena .s3-btn:not(.s3-btn-sec), .czb .czb-scena .s3-voce[aria-pressed="true"], .czb .czb-scena .s3-variante[aria-pressed="true"] { color: var(--s3-su-acc); }
/* RP1 rimuovi una parte (29 ott 2026): azione nel menu della parte e conteggio sotto la legenda */
.czb-rimuovi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--c-fibra); }
.czb-rimuovi-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1.5px solid var(--c-errore); border-radius: var(--r-controllo); background: var(--c-carta); color: var(--c-errore); font: inherit; font-weight: 650; cursor: pointer; }
.czb-rimuovi-btn:hover { background: color-mix(in srgb, var(--c-errore) 8%, var(--c-carta)); }
.czb-rimuovi small { color: var(--c-tenue); font-size: .8125rem; }
.czb-rimuovi-nota { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--c-tenue); }
.czb-rimosse { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; font-size: .875rem; }
.czb-rimosse > span { font-weight: 700; margin-right: auto; }
.czb-rimosse .czb-link { min-height: 44px; }
.czb-rimuovi[hidden], .czb-rimosse[hidden] { display: none; }
/* esito del controllo compatto: una riga per punto, numeri in evidenza; cerchi spenti di partenza (29 ott 2026) */
.czb-stato ul { display: grid; gap: 4px; margin: 6px 0 0; }
.czb-stato li { line-height: 1.45; }
.czb-stato li b { color: var(--c-inchiostro); font-variant-numeric: tabular-nums; }
.czb-stato li .czb-link { display: inline; text-align: left; white-space: nowrap; }
/* disegni del bordo anti inciampo e della copia in negativo (29 ott 2026): tessuto e gomma coi colori veri, il resto dai token */
.czb-disegno { margin: 10px 0 2px 32px; display: grid; gap: 8px; }
.czb-disegno-svg { max-width: 380px; padding: 8px 10px; border: 1px solid var(--c-fibra); border-radius: var(--r-controllo); background: var(--c-pietra); }
.czb-disegno-svg svg { display: block; width: 100%; height: auto; }
.czb-disegno figcaption { font-size: .8125rem; line-height: 1.45; color: var(--c-tenue); max-width: 60ch; }
.czb-disegno .zd-titolo { font-size: 13px; font-weight: 600; fill: var(--c-inchiostro); }
.czb-disegno .zd-nota { font-size: 13px; font-weight: 500; fill: var(--c-tenue); }
.czb-disegno .zd-pavimento { stroke: var(--c-tenue); stroke-width: 1.5; fill: none; }
.czb-disegno .zd-quota { stroke: var(--c-tenue); stroke-width: 1; fill: none; }
.czb-disegno .zd-divisore { stroke: var(--c-fibra); stroke-width: 1; fill: none; }
.czb-disegno .zd-tessuto { stroke: color-mix(in srgb, var(--c-inchiostro) 25%, transparent); stroke-width: .75; }
.czb-disegno .zd-fibra { stroke: color-mix(in srgb, var(--c-inchiostro) 22%, transparent); stroke-width: 1; }
.czb-disegno .zd-freccia { stroke: var(--c-inchiostro); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.czb-disegno .zd-scalino { fill: none; stroke: var(--c-errore); stroke-width: 1.5; stroke-dasharray: 3 2; }
.czb-disegno .zd-rampa { fill: none; stroke: var(--c-ok); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.czb-solo-negativo[hidden], .czb-solo-bordo[hidden] { display: none; }
@media (max-width: 600px) { .czb-disegno { margin-left: 0; } }
/* logo d'esempio all'apertura (29 ott 2026): invito sulla tela, ben visibile ma che non copre lo zerbino */
.czb .czb-esempio-invito { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--c-gomma); color: var(--c-carta); font: inherit; font-size: .9375rem; line-height: 1.2; cursor: pointer; box-shadow: 0 0 0 3px var(--c-lime); z-index: 2; }
.czb .czb-esempio-invito svg { color: var(--c-lime); flex: none; }
.czb .czb-esempio-invito .czb-esempio-cosa { color: var(--c-carta); font-weight: 500; }
.czb .czb-esempio-invito b { color: var(--c-lime); font-weight: 700; }
.czb .czb-esempio-invito:hover { background: var(--c-inchiostro); }
@media (max-width: 600px) { .czb .czb-esempio-invito { top: 6px; left: 6px; min-height: 40px; font-size: .875rem; padding: 0 12px; } .czb .czb-esempio-invito .czb-esempio-cosa { display: none; } }
.czb-nome-file small { display: block; color: var(--c-tenue); font-size: .8125rem; font-weight: 400; }
.czb-nome-file:has(small) { white-space: normal; }

/* Z3D-F (29 ott 2026): riquadro dell'anteprima sempre della stessa misura, lo zerbino centrato con le sue proporzioni;
   durante il ricalcolo resta l'ultimo disegno, sfocato appena, sotto il velo con la rotella */
.czb-tela.czb-vuota { aspect-ratio: 1600 / 1141; }
.czb-tela.czb-fissa { aspect-ratio: 1600 / 1141; min-height: 0; container-type: size; }
.czb-tela.czb-fissa > .czb-quadro { position: relative; width: min(100cqw, calc(100cqh * var(--czb-ar, 1.4))); line-height: 0; }
.czb-tela.czb-fissa > .czb-quadro > .czb-img { width: 100%; height: auto; }
.czb-velo { z-index: 4; background: color-mix(in srgb, var(--c-pietra) 55%, transparent); -webkit-backdrop-filter: blur(3px) saturate(.85); backdrop-filter: blur(3px) saturate(.85); color: var(--c-inchiostro); font-size: .9375rem; }

/* Zoom dell'anteprima (ZO1/ZO2, 29 ott 2026): colori del modulo comune (assets/zoom-onesto/v1/) dalle variabili del tema. */
.czb .zo-vista { --zo-fondo: var(--c-carta); --zo-testo: var(--c-inchiostro); --zo-tenue: var(--c-tenue); --zo-linea: var(--c-fibra); --zo-acc: var(--c-inchiostro);
	--zo-hover: var(--c-pietra); --zo-inchiostro: var(--c-inchiostro); }
.czb .czb-pavimento.zo-zoom .czb-suggerimento { visibility: hidden; } /* il suggerimento sta nella tela: ingrandito coprirebbe il disegno */
.czb .zo-ui button { border: 0; box-shadow: none; text-transform: none; letter-spacing: normal; }
.czb .zo-ui button:focus:not(:focus-visible) { outline: none; }

/* UM2: scelta «Metrico · Pollici» accanto alla misura (stesso aspetto delle misure rapide) */
.czb-unita { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: .875rem; color: var(--c-tenue); }
.czb-unita button { font-size: .875rem; font-weight: 600; min-height: 40px; padding: 0 12px; border-radius: var(--r-controllo); border: 1px solid var(--c-fibra); background: var(--c-carta); color: var(--c-inchiostro); cursor: pointer; }
.czb-unita button[aria-pressed="true"] { background: var(--c-gomma); color: var(--c-carta); border-color: var(--c-gomma); }
.czb-unita button:focus-visible { outline: 2px solid var(--c-lime-scuro); outline-offset: 2px; }
@media (hover: none) { .czb-unita button { min-height: 44px; } }

/* ZP4 (3 nov 2026): minimo di taglio del materiale e «Passa a …» nello stato del progetto */
.czb-stato li .czb-zp4 { color: var(--c-inchiostro); }
.czb-stato li .czb-passa { display: inline-flex; align-items: center; min-height: 40px; margin: 6px 0 2px; padding: 8px 14px; border: 2px solid var(--c-inchiostro); border-radius: 999px; background: var(--c-carta, #fff); color: var(--c-inchiostro); font: inherit; font-weight: 650; cursor: pointer; }
.czb-stato li .czb-passa:hover, .czb-stato li .czb-passa:focus-visible { background: var(--c-inchiostro); color: var(--c-carta, #fff); }