/* Deckart Core — scheda prodotto, calcolatore, box campioni. */
:root {
	--dkc-nero: #111;
	--dkc-testo: #3a3a3a;
	--dkc-tenue: #6f6f6f;
	--dkc-bordo: #e2e2e2;
	--dkc-fondo: #f6f4f1;
	--dkc-prezzo: #85633f;
	--dkc-ok: #2e7d4f;
	--dkc-avviso: #8a5a00;
	--dkc-raggio: 6px;
}

/* ---------- prezzo ---------- */
.dkc-prezzo { margin: 4px 0 14px; }
.dkc-prezzo p { margin: 0; line-height: 1.25; }
.dkc-prezzo-unita { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dkc-prezzo-valore { font-size: 30px; font-weight: 700; color: var(--dkc-nero); font-variant-numeric: tabular-nums; }
.dkc-prezzo-unita del { color: var(--dkc-tenue); font-size: 18px; }
.dkc-prezzo-per { font-size: 16px; color: var(--dkc-tenue); font-weight: 600; }
.dkc-prezzo-confezione { margin-top: 4px !important; font-size: 15px; color: var(--dkc-tenue); }
.dkc-prezzo-confezione strong { color: var(--dkc-testo); font-weight: 600; }

/* ---------- calcolatore ---------- */
.dkc-calc { width: 100%; flex: 0 0 100%; border: 1.5px solid var(--dkc-nero); border-radius: 8px; padding: 14px; margin: 0 0 14px; display: grid; gap: 12px; box-sizing: border-box; background: #fff; }
.dkc-calc [hidden] { display: none !important; }
.dkc-calc-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dkc-calc-domanda { font-weight: 700; font-size: 15px; color: var(--dkc-nero); }
.dkc-modi { display: inline-flex; border: 1px solid var(--dkc-bordo); border-radius: 999px; padding: 2px; background: var(--dkc-fondo); }
.dkc-modi button { border: 0; background: transparent; color: var(--dkc-tenue); padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; min-height: 0; text-transform: none; letter-spacing: 0; }
.dkc-modi button[aria-pressed="true"] { background: var(--dkc-nero); color: #fff; }
.dkc-campo-unita { display: flex; align-items: center; gap: 8px; }
.dkc-campo-unita input { width: 140px !important; max-width: 60%; font-size: 18px !important; padding: 8px 10px !important; height: auto !important; border: 1px solid #cfcfcf !important; border-radius: var(--dkc-raggio) !important; background: #fff !important; }
.dkc-campo-unita span { font-weight: 600; color: var(--dkc-testo); }
.dkc-stanze { display: grid; gap: 8px; }
.dkc-stanza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto 32px; align-items: center; gap: 6px; }
.dkc-stanza-n { font-size: 13px; color: var(--dkc-tenue); min-width: 58px; }
.dkc-stanza input { width: 100% !important; font-size: 16px !important; padding: 7px 8px !important; height: auto !important; border: 1px solid #cfcfcf !important; border-radius: var(--dkc-raggio) !important; background: #fff !important; }
.dkc-togli { border: 1px solid var(--dkc-bordo); background: #fff; color: var(--dkc-tenue); border-radius: var(--dkc-raggio); height: 34px; padding: 0; cursor: pointer; font-size: 16px; line-height: 1; min-height: 0; }
.dkc-togli:disabled { opacity: .35; cursor: default; }
.dkc-link { justify-self: start; border: 0; background: none; padding: 2px 0; color: var(--dkc-nero); text-decoration: underline; text-underline-offset: 2px; font: inherit; font-size: 14px; cursor: pointer; min-height: 0; text-transform: none; letter-spacing: 0; }
.dkc-posa { display: grid; gap: 4px; font-size: 14px; color: var(--dkc-testo); margin: 0; }
.dkc-posa select { width: 100%; font-size: 16px; padding: 7px 8px; border: 1px solid #cfcfcf; border-radius: var(--dkc-raggio); background-color: #fff; color: var(--dkc-nero); height: auto; }
.dkc-risultato { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dkc-risultato div { background: var(--dkc-fondo); border-radius: var(--dkc-raggio); padding: 8px 6px; text-align: center; font-size: 12.5px; color: var(--dkc-tenue); line-height: 1.25; }
.dkc-risultato strong { display: block; font-size: 19px; color: var(--dkc-nero); font-variant-numeric: tabular-nums; margin-top: 2px; }
.dkc-risultato strong .woocommerce-Price-amount { color: inherit; }
.dkc-nota { margin: 0 !important; font-size: 13.5px; color: var(--dkc-tenue); line-height: 1.4; }
.dkc-nota--avviso { color: var(--dkc-avviso); }
.dkc-etichetta-quantita { align-self: center; font-size: 14px; color: var(--dkc-testo); margin-right: 8px; }

/* ---------- «?» al tocco, mini guide, aiuto ---------- */
.dkc-calc-domanda { display: inline-flex; align-items: center; gap: 6px; }
.dkc-info { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 1px solid #cfcfcf; border-radius: 50%; background: #fff; color: var(--dkc-nero); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; min-height: 0; text-transform: none; letter-spacing: 0; vertical-align: middle; }
/* il cerchio resta piccolo, il dito ha 40 px */
.dkc-info { position: relative; }
.dkc-info::after { content: ""; position: absolute; inset: -8px; }
.dkc-info:hover, .dkc-info:focus-visible { border-color: var(--dkc-nero); background: var(--dkc-nero); color: #fff; }
.dkc-pop { width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 18px 18px 16px; border: 0; border-radius: 12px; background: #fff; color: var(--dkc-testo); box-shadow: 0 18px 50px rgba(0, 0, 0, .25); font-size: 14.5px; font-weight: 400; line-height: 1.5; text-align: left; overflow: auto; }
.dkc-pop::backdrop { background: rgba(17, 17, 17, .3); }
.dkc-pop p { margin: 0 0 10px !important; }
.dkc-pop b { color: var(--dkc-nero); }
.dkc-pop .dkc-pop-titolo { font-size: 16px; font-weight: 700; color: var(--dkc-nero); margin-bottom: 8px !important; }
.dkc-pop-disegno { display: block; width: 100%; height: auto; margin: 2px 0 12px; }
.dkc-pop-chiudi { width: 100%; margin-top: 4px; border: 0; border-radius: var(--dkc-raggio); background: var(--dkc-nero); color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; padding: 10px; cursor: pointer; min-height: 0; text-transform: none; letter-spacing: 0; }
/* senza popover nel browser (iOS 16) li apre la classe di calcolatore.js */
@supports not selector(:popover-open) {
	.dkc-pop { display: none; position: fixed; inset: 0; z-index: 100000; height: fit-content; }
	.dkc-pop.is-aperto { display: block; }
}
.dkc-posa-testa { display: flex; align-items: center; gap: 6px; }
.dkc-posa-testa label { margin: 0; font: inherit; color: inherit; }
.dkc-link-stanze { display: inline-block; margin-top: 8px; font-size: 13.5px; }
.dkc-nota-stanze { margin-bottom: 8px !important; }
.dkc-vuoto { margin: 0 !important; padding: 12px; border: 1px dashed #cfcfcf; border-radius: var(--dkc-raggio); background: var(--dkc-fondo); font-size: 14px; line-height: 1.4; color: var(--dkc-testo); text-align: center; }
.dkc-aiuto { display: flex; align-items: flex-start; gap: 9px; padding-top: 10px; border-top: 1px solid var(--dkc-bordo); color: var(--dkc-testo); font-size: 13.5px; line-height: 1.4; text-decoration: none; }
.dkc-aiuto svg { flex: 0 0 auto; margin-top: 1px; color: #1f8f4e; }
.dkc-aiuto b { color: var(--dkc-nero); }
.dkc-aiuto:hover span { text-decoration: underline; text-underline-offset: 2px; }


/* il modulo del tema mette quantità e pulsante in riga: il calcolatore va a capo */
form.cart:has(.dkc-calc), .woocommerce-variation-add-to-cart:has(.dkc-calc) { flex-wrap: wrap; }
/* nomi di variante lunghi («Battiscopa stondato PVC solido mod. ATACAMA 2400x70x10mm»): il menu resta nello schermo */
form.variations_form:has(.dkc-calc) table.variations { width: 100%; table-layout: fixed; }
form.variations_form:has(.dkc-calc) table.variations select { max-width: 100%; width: 100%; text-overflow: ellipsis; }
/* sui prodotti a varianti il prezzo della variante lo mostra già il blocco prezzo in alto */
form.variations_form:has(.dkc-calc) .woocommerce-variation-price { display: none; }
.dkc-porte { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 8px; font-size: 14px; color: var(--dkc-testo); margin: 4px 0 0; }
.dkc-porte input { font-size: 16px !important; padding: 6px 8px !important; height: auto !important; border: 1px solid #cfcfcf !important; border-radius: var(--dkc-raggio) !important; background: #fff !important; }

/* ---------- kit di posa ---------- */
.dkc-kit { width: 100%; flex: 0 0 100%; order: 10; border: 1px solid var(--dkc-bordo); border-radius: 8px; padding: 12px 14px; margin: 14px 0 4px; display: grid; gap: 10px; background: #fff; box-sizing: border-box; }
.dkc-kit[hidden] { display: none !important; }
.dkc-kit-testa b { display: block; font-size: 15px; color: var(--dkc-nero); }
.dkc-kit-testa span { font-size: 13px; color: var(--dkc-tenue); }
.dkc-kit-misure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dkc-kit-misure label { display: grid; gap: 3px; font-size: 13px; color: var(--dkc-testo); margin: 0; }
.dkc-kit-misure input { font-size: 16px !important; padding: 6px 8px !important; height: auto !important; border: 1px solid #cfcfcf !important; border-radius: var(--dkc-raggio) !important; background: #fff !important; width: 100% !important; }
.dkc-kit-righe { display: grid; border: 1px solid var(--dkc-bordo); border-radius: var(--dkc-raggio); }
.dkc-kit-riga { display: grid; grid-template-columns: 20px minmax(0, 1fr) 64px 84px; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--dkc-bordo); }
.dkc-kit-riga:last-child { border-bottom: 0; }
.dkc-kit-riga input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--dkc-nero); }
.dkc-kit-nome { font-size: 14px; color: var(--dkc-nero); line-height: 1.3; margin: 0; cursor: pointer; }
.dkc-kit-perche { display: block; font-size: 12.5px; color: var(--dkc-tenue); margin-top: 2px; }
.dkc-kit-q { width: 64px !important; font-size: 15px !important; padding: 5px 6px !important; height: auto !important; border: 1px solid #cfcfcf !important; border-radius: var(--dkc-raggio) !important; text-align: center; background: #fff !important; }
.dkc-kit-prezzo { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; color: var(--dkc-nero); }
.dkc-kit-riga.is-spento .dkc-kit-nome, .dkc-kit-riga.is-spento .dkc-kit-prezzo { opacity: .45; }
.dkc-kit-totale { display: flex; justify-content: space-between; margin: 0 !important; font-size: 14px; color: var(--dkc-testo); }
.dkc-kit-totale b { font-variant-numeric: tabular-nums; color: var(--dkc-nero); }

.dkc-kit [hidden] { display: none !important; }
.dkc-kit-corpo { display: grid; gap: 10px; }
.dkc-kit-misure-box { border: 0; margin: 0; padding: 0; }
.dkc-kit-misure-box summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; cursor: pointer; list-style: none; font-size: 13.5px; color: var(--dkc-testo); }
.dkc-kit-misure-box summary::-webkit-details-marker { display: none; }
.dkc-kit-cambia { color: var(--dkc-nero); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dkc-kit-misure-box[open] summary { margin-bottom: 8px; }
.dkc-kit-misure-box[open] .dkc-nota { margin-top: 6px !important; }
.dkc-kit-cosa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.dkc-kit-cosa .dkc-kit-perche { flex: 1 0 100%; margin-top: 0; }
.dkc-kit-tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: var(--dkc-fondo); color: var(--dkc-tenue); line-height: 1.4; white-space: nowrap; }
.dkc-kit-tag.is-consigliato { background: #e8f3ec; color: var(--dkc-ok); }
.dkc-kit-personalizza { border: 0; background: none; padding: 4px 2px; margin: 0; min-height: 28px; font: inherit; font-size: 13px; font-weight: 600; color: var(--dkc-nero); text-decoration: underline; text-underline-offset: 2px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.dkc-kit-colore { flex: 1 0 100%; display: grid; gap: 3px; margin-top: 4px; font-size: 13px; color: var(--dkc-testo); }
.dkc-kit-colore label { margin: 0; font-size: 13px; }
.dkc-kit-colore select { width: 100% !important; max-width: 360px; font-family: inherit !important; font-size: 16px !important; padding: 6px 8px !important; height: auto !important; border: 1px solid #cfcfcf !important; border-radius: var(--dkc-raggio) !important; background-color: #fff !important; }


.dkc-kit-carrello { border: 1px solid var(--dkc-bordo); border-radius: 8px; padding: 14px 16px; margin: 18px 0; background: #fff; }
.dkc-kit-carrello h3 { font-size: 18px; margin: 0 0 4px; text-transform: none; }
.dkc-kit-carrello li::before, .dkc-kit-carrello li::marker { content: none; }
.dkc-kit-carrello .dkc-kit-nome { cursor: default; }
.dkc-kit-carrello ul { list-style: none; margin: 10px 0 !important; padding: 0 !important; display: grid; }
.dkc-kit-carrello li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--dkc-bordo); margin: 0 !important; }
.dkc-kit-carrello li:last-child { border-bottom: 0; }
.dkc-kit-carrello .dkc-kit-aggiungi { white-space: nowrap; text-transform: none !important; }
.dkc-kit-carrello .dkc-kit-tutto { text-transform: none !important; }
@media (max-width: 600px) {
	.dkc-kit-riga { grid-template-columns: 20px minmax(0, 1fr) 56px; }
	.dkc-kit-riga .dkc-kit-prezzo { grid-column: 2 / -1; text-align: left; font-weight: 400; color: var(--dkc-tenue); }
	.dkc-kit-q { width: 56px !important; }
	.dkc-kit-personalizza { min-height: 40px; } /* sul telefono va a capo da solo: c'è posto per un dito */
	.dkc-kit-carrello li { grid-template-columns: minmax(0, 1fr) auto; }
	.dkc-kit-carrello .dkc-kit-aggiungi { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- liste ---------- */
.dkc-calcola.button { white-space: nowrap; }

/* ---------- box campioni ---------- */
.dkc-box-prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.dkc-box-prezzo .dkc-prezzo-valore { font-size: 30px; }
.dkc-gratis { background: var(--dkc-ok); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 4px; }
.dkc-box-etichetta { background: var(--dkc-fondo); border-left: 4px solid var(--dkc-ok); padding: 10px 12px; margin: 6px 0 14px; color: var(--dkc-nero); font-weight: 600; }
.dkc-passi { list-style: none; margin: 0 0 16px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: dkc; }
.dkc-passi li { border: 1px solid var(--dkc-bordo); border-radius: var(--dkc-raggio); padding: 10px; font-size: 13.5px; line-height: 1.35; counter-increment: dkc; margin: 0 !important; }
.dkc-passi li::before { content: counter(dkc); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--dkc-nero); color: #fff; font-size: 11px; margin-bottom: 4px; }
.dkc-passi b { display: block; color: var(--dkc-nero); }
.dkc-box-vai { display: inline-flex; }

.dkc-selettore [hidden] { display: none !important; }
.dkc-selettore { clear: both; margin: 10px 0 34px; scroll-margin-top: 90px; }
.dkc-selettore h2 { font-size: 24px; margin: 0 0 4px; }
.dkc-sel-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.dkc-contatore { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--dkc-fondo); color: var(--dkc-nero); }
.dkc-contatore.is-pieno { background: var(--dkc-nero); color: #fff; }
.dkc-filtri { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dkc-filtri button { border: 1px solid var(--dkc-bordo); background: #fff; color: var(--dkc-testo); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; min-height: 0; text-transform: none; letter-spacing: 0; }
.dkc-filtri button[aria-pressed="true"] { background: var(--dkc-nero); border-color: var(--dkc-nero); color: #fff; }
.dkc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.dkc-camp { position: relative; display: block; border: 2px solid transparent; outline: 1px solid var(--dkc-bordo); border-radius: var(--dkc-raggio); background: #fff; cursor: pointer; margin: 0; }
.dkc-camp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dkc-camp img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px 4px 0 0; margin: 0; }
.dkc-camp span { display: block; font-size: 12px; line-height: 1.25; padding: 5px 6px 7px; color: var(--dkc-nero); min-height: 34px; }
.dkc-camp:has(input:checked) { border-color: var(--dkc-ok); outline-color: var(--dkc-ok); }
.dkc-camp:has(input:checked)::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--dkc-ok); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.dkc-camp:has(input:disabled:not(:checked)) { opacity: .4; cursor: not-allowed; }
.dkc-camp:has(input:focus-visible) { outline: 2px solid var(--dkc-nero); outline-offset: 2px; }
.dkc-scelti { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; min-height: 26px; font-size: 13px; color: var(--dkc-tenue); }
.dkc-scelto { display: inline-flex; align-items: center; gap: 6px; background: var(--dkc-fondo); color: var(--dkc-nero); border-radius: 999px; padding: 3px 4px 3px 10px; }
.dkc-scelto button { border: 0; background: #ddd; color: var(--dkc-nero); border-radius: 50%; width: 18px; height: 18px; line-height: 18px; padding: 0; font-size: 11px; cursor: pointer; min-height: 0; }
.dkc-avviso { font-size: 13.5px; padding: 8px 10px; border-radius: var(--dkc-raggio); background: #fff4e5; color: var(--dkc-avviso); margin: 0 0 10px; }
/* scelta non salvata: resta in vista con Riprova finché il server non la conferma */
.dkc-errore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; background: #fdecea; color: #8a1f17; }
.dkc-errore[hidden] { display: none; }
.dkc-riprova { border: 1px solid currentColor; background: #fff; color: inherit; font: inherit; font-weight: 700; font-size: 13.5px; border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.dkc-cta { width: 100%; justify-content: center; }
/* la griglia è lunga: il pulsante resta a portata finché si sceglie */
.dkc-selettore .dkc-cta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
@media (max-width: 992px) { .dkc-selettore .dkc-cta { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
.dkc-cta, .dkc-cta small, .dkc-box-vai, .dkc-calcola { text-transform: none !important; }
.dkc-cta small { font-weight: 400; opacity: .85; margin-left: 6px; }

/* ---------- campione dalla scheda pavimento ---------- */
.dkc-campione { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border: 1px dashed var(--dkc-ok); background: #f1f8f4; border-radius: 8px; padding: 12px 14px; margin: 4px 0 16px; }
.dkc-campione p { margin: 0 !important; flex: 1 1 220px; font-size: 14px; line-height: 1.4; color: var(--dkc-testo); }
.dkc-campione p b { color: var(--dkc-nero); }
.dkc-campione-btn { border: 0; background: var(--dkc-ok); color: #fff; font: inherit; font-weight: 700; font-size: 14px; border-radius: var(--dkc-raggio); padding: 9px 13px; cursor: pointer; white-space: nowrap; min-height: 0; text-transform: none; letter-spacing: 0; }
.dkc-campione-btn[aria-pressed="true"] { background: #fff; color: var(--dkc-ok); box-shadow: inset 0 0 0 1.5px var(--dkc-ok); }
.dkc-campione-btn:disabled { opacity: .5; cursor: not-allowed; }
.dkc-campione-stato { flex: 1 0 100%; font-size: 13px; color: var(--dkc-tenue); }
.dkc-campione-stato a { color: var(--dkc-nero); font-weight: 700; }

/* ---------- carrello ---------- */
.dkc-cart-vuoto a { font-weight: 700; }

@media (max-width: 600px) {
	/* bersagli da dito: interruttore m²/stanze, «Non sai i m²?», filtri del box */
	.dkc-modi button { padding: 9px 13px; }
	.dkc-link-stanze { padding: 9px 0; margin-top: 2px; }
	.dkc-filtri button { padding: 8px 13px; }
	.dkc-passi { grid-template-columns: 1fr; }
	.dkc-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dkc-stanza { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto 32px; }
	.dkc-stanza-n { grid-column: 1 / -1; }
	.dkc-prezzo-valore { font-size: 26px; }
}