/*
Theme Name:   DpiShop — Astra Child
Theme URI:    https://admin.dpishop.it
Description:  Child theme di Astra con il Design System DpiShop v2 (accento blu, neutri freddi, 4 lastre CMYK). Porta token, tipografia, componenti, logo lockup e favicon. Nessun cambio funzionale: carrello, varianti, preventivi e pagamenti restano quelli di WooCommerce.
Author:       DpiShop
Template:     astra
Version:      2.2.4
Text Domain:  dpishop-child
*/

/* Il CSS qui sotto è lo stesso di template/additional-css.css.
   Se un giorno lo si rimette nel Customizer, i due file devono restare allineati:
   questa è la copia autorevole. */

/* == 1 · TOKEN ============================================================= */

:root {
  /* Accento funzionale — due blu (contrasto) */
  --dpi-blue:     #1B44AB;  /* riempimenti: CTA, step attivo, badge (AAA 7,4:1 col bianco) */
  --dpi-blue-800: #143588;  /* hover / pressed */
  --dpi-blue-600: #2557D6;  /* link su bianco, filetti, anello di focus */
  --dpi-blue-050: #EEF3FD;  /* selezione, riga evidenziata */
  --dpi-blue-100: #CFDDF8;  /* bordo elemento selezionato su fondo tinto */

  /* Neutri freddi */
  --dpi-ink:     #131820;  --dpi-body:  #333A45;  --dpi-muted: #6C7480;
  --dpi-line:    #E2E5EA;  --dpi-surface:#FFFFFF; --dpi-canvas:#F7F8FA;
  --dpi-dark:    #0F1622;
  --dpi-disabled:#B9BEC7;

  /* 4 lastre CMYK — SOLO pop decorativi. Mai bottoni, mai link. Max un pop per schermata. */
  --dpi-cyan: #00A9CE;  --dpi-magenta: #E5147E;  --dpi-yellow: #FFC800;  --dpi-k: #131820;

  /* Semantici */
  --dpi-success: #157F3D;  --dpi-warning: #B26A00;
  --dpi-danger:  #C0261C;  --dpi-danger-050: #FDEEEC;

  /* Tipografia */
  --font-display: "Lexend", sans-serif;
  --font-ui:      "DM Sans", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  /* Spazi · raggi · ombre */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:96px;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-1:0 2px 8px rgba(15,22,34,.06);
  --sh-2:0 14px 34px rgba(15,22,34,.14);

  /* PONTE 1 — il configuratore (/preventivo/, shortcode dpicalc2) e' un'app
     var-driven e legge davvero questi nomi: misurato il 2026-09-01 sulla pagina
     live — --dpi-accent 76 usi, --dpi-border 75, --dpi-head 39, --dpi-text 28,
     --dpi-border-2 26, --dpi-panel 21.

     ⚠️ MA DA QUI NON LO SOVRASCRIVI. Il configuratore ridichiara gli stessi nomi
     in un proprio blocco :root che sul documento viene DOPO questo: stessa
     specificita', vince l'ultimo. Finche' quel blocco c'e', questi valori
     servono solo da rete se lui manca. Per allinearlo davvero si tocca il suo
     :root, non questo. Il commento di prima prometteva il contrario.

     I valori sotto sono quelli che il configuratore si da' da solo, non una
     scelta nostra: allinearli evita che le due sorgenti dicano cose diverse. */
  --dpi-accent:   var(--dpi-blue);      /* #1B44AB — combacia */
  --dpi-panel:    var(--dpi-canvas);    /* #F7F8FA — era --dpi-surface (#FFFFFF): sbagliato */
  --dpi-head:     var(--dpi-ink);       /* #131820 — era --dpi-dark (#0F1622): sbagliato */
  --dpi-text:     var(--dpi-body);      /* #333A45 — combacia */
  --dpi-border:   var(--dpi-line);      /* #E2E5EA — combacia */
  --dpi-border-2: #BCC7D3;              /* mancava del tutto, e lui lo usa 26 volte */
  --dpi-accent-h: var(--dpi-blue-800);  /* #143588 vs #133A8F suo: il piu' vicino che abbiamo */
  --dpi-link:     var(--dpi-blue-600);  /* #2557D6 — combacia */
  --dpi-page:     var(--dpi-surface);   /* #FFFFFF — combacia */

  /* PONTE 2 — home.css dichiara i suoi token come var(nome, fallback):
     ridefiniti qui, la home si ricolora anche senza patchare il file. */
  --blue:      var(--dpi-blue);
  --blue-deep: var(--dpi-blue-800);
  --navy:      var(--dpi-dark);
  --sky:       var(--dpi-blue-100);
  --ink:       var(--dpi-ink);
  --bg:        var(--dpi-canvas);
}

/* == 2 · BASE + TIPOGRAFIA ================================================= */

body, .dpi-home, .dpi-page, .dpi-mm2, .woocommerce, .wc-block-components-form {
  font-family: var(--font-ui);
  color: var(--dpi-body);
}
body { background: var(--dpi-canvas); }

h1, h2, h3, h4, h5,
.dpi-home h1, .dpi-home h2, .dpi-home h3,
.woocommerce div.product .product_title,
.wc-block-components-title {
  font-family: var(--font-display);
  color: var(--dpi-ink);
  text-wrap: balance;
}
h1 { font-weight: 700; letter-spacing: -.03em;  line-height: 1.03; }
h2 { font-weight: 600; letter-spacing: -.02em;  line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
p, li { line-height: 1.6; text-wrap: pretty; }

a       { color: var(--dpi-blue-600); text-decoration: none; }
a:hover { color: var(--dpi-blue-800); text-decoration: underline; }

/* Cifre incolonnate */
.price, .woocommerce-Price-amount, .amount, .quantity input,
.dpi-per-pz, .order-total, .wc-block-components-formatted-money-amount {
  font-variant-numeric: tabular-nums;
}
.sku, .dpi-code { font-family: var(--font-mono); }
/* Cifra incolonnata. Sta nel contratto classi del design system (.dpi-num) e la
   pagina prezzi del calcolatore la usera': fino al 2026-09-01 era DICHIARATA e
   non esisteva. Aggiunta quando me ne sono accorto scrivendo il contratto. */
.dpi-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* == 3 · FOCUS VISIBILE ==================================================== */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--dpi-blue-600); outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* == 4 · BOTTONI =========================================================== */

.ast-button, .button, input[type="submit"],
.wp-element-button, .wc-block-components-button,
button.single_add_to_cart_button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  font-family: var(--font-ui);
  font-weight: 700; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--dpi-blue);
  border: 1px solid var(--dpi-blue);
  color: #fff;
  border-radius: var(--r-sm) !important;
  padding: 15px 26px;
  min-height: 48px; line-height: 1.1;
  white-space: nowrap;   /* "SFOGLIA IL / CATALOGO" andava a capo a meta' frase */
  transition: background .15s ease, border-color .15s ease;
}
.ast-button:hover, .button:hover, .wp-element-button:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--dpi-blue-800); border-color: var(--dpi-blue-800); color: #fff;
}

/* Disabled: prima era un accento a opacita' ridotta e sembrava rotto */
.single_add_to_cart_button:disabled, .button.disabled,
button:disabled, .wc-block-components-button:disabled {
  opacity: .4 !important; cursor: not-allowed !important;
  background: var(--dpi-blue) !important; border-color: var(--dpi-blue) !important;
}

/* == 5 · CAMPI E FORM ====================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], select, textarea,
.wc-block-components-text-input input {
  font-family: var(--font-ui); font-size: 15px;
  color: var(--dpi-ink); background: var(--dpi-surface);
  border: 1px solid var(--dpi-line); border-radius: var(--r-sm);
  padding: 13px 14px; min-height: 48px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--dpi-blue-600); outline: 3px solid var(--dpi-blue-050);
}
::placeholder { color: var(--dpi-muted); opacity: 1; }

.woocommerce-error, .wc-block-components-validation-error {
  background: var(--dpi-danger-050); border: 1px solid var(--dpi-danger);
  border-radius: var(--r-sm); color: var(--dpi-danger);
}
.woocommerce-message, .woocommerce-info {
  background: var(--dpi-blue-050); border: 1px solid var(--dpi-blue-100);
  border-radius: var(--r-sm); color: var(--dpi-ink);
}

/* == 6 · HEADER / FOOTER =================================================== */

.ast-header, .site-header, .ast-primary-header-bar,
.site-footer, .ast-small-footer { background: var(--dpi-dark) !important; }
.ast-header a, .site-header a, .site-footer a { color: #DFE3EA; }
.ast-header a:hover, .site-header a:hover, .site-footer a:hover { color: #fff; }

/* Logo: SVG unico a larghezza fissa. Titolo sito disattivato nel Customizer. */
.site-branding, .ast-site-identity { flex: none; }
.site-logo-img img, .custom-logo-link img {
  width: 190px !important; max-width: 190px !important; height: auto;
}
.site-title, .site-description { display: none !important; }
.main-header-menu > li > a, .ast-search-menu-icon .search-field { white-space: nowrap; }

/* Carrello in header: e' un'ICONA dentro .cart-container, non un <a> con padding */
.ast-site-header-cart .cart-container {
  background: var(--dpi-blue);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.ast-site-header-cart .cart-container:hover { background: var(--dpi-blue-800); }
.ast-site-header-cart .cart-container i.astra-icon,
.ast-site-header-cart .cart-container i.astra-icon::after { color: #fff !important; }
.ast-site-header-cart .cart-container .count,
.ast-site-header-cart .cart-container i.astra-icon::after {
  background: #fff !important; color: var(--dpi-blue) !important;
  border-color: #fff !important;
  border-radius: 999px; font-weight: 700; font-size: 11px;
}

/* == 7 · CATALOGO + FILTRI ================================================= */
/* Card bianche: il fondo rosa tingeva le foto e faceva sembrare tutto in promozione */

.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category,
.dpi-card, .dpi-cat-tile {
  background: var(--dpi-surface);
  border: 1px solid var(--dpi-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover { box-shadow: var(--sh-1); }
.woocommerce ul.products li.product a img { background: var(--dpi-canvas); margin-bottom: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--dpi-ink); padding: 0 16px;
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  color: var(--dpi-ink); padding: 0 16px;
}
.woocommerce ul.products li.product .price del { color: var(--dpi-muted); font-weight: 400; }
.woocommerce ul.products li.product .button { display: block; margin: 14px 16px 18px; text-align: center; }

/* Suffisso «/pz» iniettato dal plugin: e' meta, non prezzo */
.dpi-per-pz {
  font-family: var(--font-ui); font-weight: 400; font-size: 12px;
  color: var(--dpi-muted); letter-spacing: 0;
}

/* Anteprima colori sulla card */
.dpi-card-colors { display: flex; align-items: center; gap: 5px; padding: 0 16px; margin-top: 8px; }
.dpi-cc-dot {
  width: 14px; height: 14px; border-radius: 999px;
  border: 1px solid rgba(15,22,34,.15); display: block; flex: none;
}
.dpi-cc-more { font-size: 11px; color: var(--dpi-muted); }

span.onsale {
  background: var(--dpi-blue) !important; color: #fff !important;
  border-radius: var(--r-xs) !important;
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Sidebar filtri */
.dpi-filter {
  background: var(--dpi-surface); border: 1px solid var(--dpi-line);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.dpi-filter-row { padding-bottom: var(--sp-5); }
.dpi-filter-row + .dpi-filter-row { border-top: 1px solid var(--dpi-line); padding-top: var(--sp-5); }
.dpi-filter-lab {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dpi-muted);
  display: block; margin-bottom: var(--sp-3);
}
.dpi-filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dpi-filter-col {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 8px;
  border: 1.5px solid var(--dpi-line); border-radius: 999px;
  background: var(--dpi-surface); font-size: 14px; color: var(--dpi-ink); cursor: pointer;
}
.dpi-filter-col:hover { border-color: var(--dpi-ink); }
.dpi-filter-col.on { border-color: var(--dpi-blue-600); background: var(--dpi-blue-050); }
.dpi-filter-size {
  min-width: 44px; text-align: center; padding: 9px 8px;
  border: 1px solid var(--dpi-line); border-radius: var(--r-sm);
  font-weight: 500; font-size: 14px; color: var(--dpi-ink);
  background: var(--dpi-surface); cursor: pointer;
}
.dpi-filter-size:hover { border-color: var(--dpi-ink); }
.dpi-filter-size.on {
  border: 1.5px solid var(--dpi-blue-600); background: var(--dpi-blue-050);
  color: var(--dpi-blue); font-weight: 700;
}
.dpi-filter-reset {
  background: none; border: 0; padding: var(--sp-2) 0;
  font-family: var(--font-ui); font-weight: 500; font-size: 13px;
  color: var(--dpi-blue-600); text-decoration: underline; text-underline-offset: 3px;
  text-transform: none; letter-spacing: 0; min-height: 0;
}

/* == 8 · PRODOTTO ========================================================== */

.woocommerce div.product .product_title { font-size: 40px; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--font-display); font-weight: 700; font-size: 34px;
  letter-spacing: -.025em; color: var(--dpi-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--dpi-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--dpi-blue-600);
}

/* Chip colore — classe reale .dpi-sw (nome + pastiglia, 207 nomi live) */
.dpi-sw, .dpi-color-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  border: 1.5px solid var(--dpi-line); border-radius: 999px;
  background: var(--dpi-surface);
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--dpi-ink);
  cursor: pointer;
}
.dpi-sw:hover { border-color: var(--dpi-ink); }
.dpi-sw.on { border-color: var(--dpi-blue-600); background: var(--dpi-blue-050); }
.dpi-sw .dot {
  width: 20px; height: 20px; border-radius: 999px;
  border: 1px solid rgba(15,22,34,.15); flex: none; display: block;
}
.dpi-sw .nm { font-weight: 500; }
.dpi-sw.is-out, .dpi-sw[disabled] { opacity: .45; }
.dpi-sw.is-out .nm { text-decoration: line-through; }

/* Box taglia — classi reali .dpi-sizes / .dpi-size / .dpi-size.on */
.dpi-sizes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dpi-size, .dpi-size-box {
  min-width: 54px; text-align: center; padding: 13px 12px;
  border: 1px solid var(--dpi-line); border-radius: var(--r-sm);
  font-family: var(--font-ui); font-weight: 500; font-size: 15px;
  color: var(--dpi-ink); background: var(--dpi-surface); cursor: pointer;
  min-height: 48px;
}
.dpi-size:hover { border-color: var(--dpi-ink); }
.dpi-size.on {
  border: 1.5px solid var(--dpi-blue-600); background: var(--dpi-blue-050);
  color: var(--dpi-blue); font-weight: 700;
}
/* In arrivo / ultimi pezzi: ambra, NON barrata, ancora cliccabile.
   Il semaforo ha quattro stati e tre significati d'uso diversi: barrare una
   taglia che si puo' ancora ordinare la fa sembrare persa. L'ambra vince sul
   blu della selezione perche' e' un'informazione sulla merce, non uno stato
   dell'interazione. */
.dpi-size.is-soon,
.dpi-size.is-soon.on {
  border: 1.5px solid var(--dpi-warning);
  color: var(--dpi-warning);
  background: #FDF6EA;
  font-weight: 700;
}
.dpi-size.is-soon:hover { border-color: #8A5200; }

/* Esaurita: barrata e non cliccabile — mai nascosta, cosi' la griglia non balla */
.dpi-size.is-out, .dpi-size[disabled] {
  color: var(--dpi-disabled); background: var(--dpi-canvas);
  text-decoration: line-through; cursor: not-allowed;
}
.dpi-size-cur { font-family: var(--font-ui); font-size: 13px; color: var(--dpi-muted); }

/* GERARCHIA CTA (polish 4): una primaria piena, due secondarie outline.
   .dpicalc2-personalizza porta uno style="" inline -> serve !important. */
button.dpicalc2-personalizza,
button.dpicalc2-personalizza:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dpi-blue-600) !important;
  border: 1.5px solid var(--dpi-blue-600) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-ui) !important; font-weight: 700 !important;
  font-size: 14px !important; letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 14.5px 24px !important; min-height: 48px !important;
  box-shadow: none !important;
}
button.dpicalc2-personalizza:hover { background: var(--dpi-blue-050) !important; }

.dpi-quote-open, .btnschedatecnica2 {
  background: transparent !important;
  color: var(--dpi-ink) !important;
  border: 1.5px solid var(--dpi-line) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  padding: 14.5px 24px; min-height: 48px;
}
.dpi-quote-open:hover, .btnschedatecnica2:hover { border-color: var(--dpi-ink) !important; }


/* == 8b · COMPONENTI MANCANTI (v2.2) =======================================
 * Aggiunti dopo il collaudo su "DpiShop Interfaccia.dc.html": erano usati dal
 * design ma nella v2.1 non avevano nessuna regola, quindi rendevano nudi.
 * Il caso peggiore era .dpi-btn-neutral, che ereditando da .button diventava
 * blu pieno identico al primario: le due CTA dell'hero erano indistinguibili
 * — cioe' esattamente il difetto che il polish #4 doveva chiudere. */

/* Varianti bottone. Ereditano forma e metrica da §4, cambiano solo la pelle. */
.dpi-btn-outline,
.dpi-btn-outline:hover {
  background: transparent !important;
  color: var(--dpi-blue-600) !important;
  border: 1.5px solid var(--dpi-blue-600) !important;
}
.dpi-btn-outline:hover { background: var(--dpi-blue-050) !important; }

.dpi-btn-neutral,
.dpi-btn-neutral:hover {
  background: transparent !important;
  color: var(--dpi-ink) !important;
  border: 1.5px solid var(--dpi-line) !important;
}
.dpi-btn-neutral:hover { border-color: var(--dpi-ink) !important; }

/* Ghost: azione distruttiva leggera (rimuovi riga, svuota). Non e' un bottone
   con un bordo piu' chiaro: e' un link, e deve sembrarlo. */
.dpi-btn-ghost,
.dpi-btn-ghost:hover {
  background: none !important;
  border: 0 !important;
  color: var(--dpi-danger) !important;
  font-family: var(--font-ui);
  font-weight: 500 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0 !important;
  min-height: 0 !important;
}

/* Righe di bottoni: §4 mette white-space:nowrap su ogni .button, quindi due CTA
   affiancate non possono stringersi. Se la riga non va a capo, la seconda esce
   dalla colonna — succedeva nell'hero della home sotto i ~1060px. Qualunque
   contenitore flex con dentro dei bottoni deve poter mandare a capo. */
.cta-row,
.dpi-home .hero .cta-row,
.woocommerce div.product form.cart,
.dpi-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Label di campo. §2 la definiva solo per i selettori Woo: serve anche come
   classe a se', altrimenti meta' delle etichette del sito sono 16px normali
   e l'altra meta' 12px maiuscoletto (succedeva fra prodotto e sidebar filtri). */
.dpi-label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dpi-muted);
}

/* Tag tecnica di stampa: l'unico posto, con i numeri di step, dove il CMYK
   compare. Il valore non deve spezzarsi ("10 × 10" a capo da "cm"). */
.dpi-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dpi-ink);
  background: var(--dpi-surface);
  border: 1px solid var(--dpi-line);
  border-radius: var(--r-xs);
  padding: 6px 9px;
  white-space: nowrap;
}
.dpi-tech-tag .dot { width: 8px; height: 8px; display: block; flex: none; }
.dpi-tech-tag.is-dtf    .dot { background: var(--dpi-cyan); }
.dpi-tech-tag.is-serig  .dot { background: var(--dpi-magenta); }
.dpi-tech-tag.is-ricamo .dot { background: var(--dpi-yellow); }

/* "Crea nuovo set": il "+" e' l'unico pop magenta del configuratore */
.dpi-new-set .plus { color: var(--dpi-magenta); font-style: normal; }

/* Placeholder foto dichiarato: un buco progettato pesa meno di un'icona rotta */
.dpi-nophoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--dpi-canvas);
  color: #99A0AA;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.dpi-nophoto i {
  width: 34px; height: 34px;
  border: 1.5px dashed var(--dpi-disabled);
  border-radius: var(--r-sm);
  display: block;
}

/* Spedizione gratuita e altri esiti positivi */
.dpi-free, .dpi-ok { color: var(--dpi-success); font-weight: 500; }

/* I nomi colore reali sono lunghi ("Giallo alta visibilita'"): la pastiglia
   si allarga, non manda il nome a capo dentro se stessa. */
.dpi-sw, .dpi-filter-col { white-space: nowrap; }

/* == 8c · HEADER FRA 782 E 1280 ============================================
 * Logo, nav, ricerca e carrello erano tutti flex:none: sotto i 1280 il
 * contenuto sbordava invece di stringersi, e fino a 782px non c'era nulla. */

@media (max-width: 1280px) {
  .ast-primary-header-bar .search-field { width: 140px; }
  .main-header-menu > li > a,
  .dpi-mm2-btn { padding-left: 8px !important; padding-right: 8px !important; font-size: 14px; }
}
@media (max-width: 1080px) {
  /* !important: nel markup il form porta uno style="display:flex" inline */
  .ast-primary-header-bar .search-form { display: none !important; }
}
@media (max-width: 960px) {
  /* Sparisce la PAROLA "Carrello", non l'icona: senza il simbolo resterebbe
     una pastiglia blu con dentro una cifra sola, che non dice cos'e'. */
  .ast-site-header-cart .cart-container .cart-label { display: none; }
  .ast-site-header-cart .cart-container { padding: 10px 12px; }
}

/* == 9 · MEGAMENU (classi reali .dpi-mm2-*) ================================ */

.dpi-mm2-btn {
  background: transparent; border: 0; color: #DFE3EA;
  font-family: var(--font-ui); font-weight: 500; font-size: 15px;
  text-transform: none; letter-spacing: 0;
  border-radius: 0; min-height: 0;
  border-bottom: 2px solid transparent;
}
.dpi-mm2-btn:hover, .dpi-mm2-btn[aria-expanded="true"] {
  background: transparent; color: #fff; border-bottom-color: var(--dpi-blue-600);
}
.dpi-mm2-panel {
  background: var(--dpi-surface);
  border-top: 1px solid var(--dpi-line);
  box-shadow: var(--sh-2);
  color: var(--dpi-body);
}
.dpi-mm2-macros { border-bottom: 1px solid var(--dpi-line); }
.dpi-mm2-macro {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dpi-muted); background: transparent; border: 0;
  border-bottom: 2px solid transparent;
}
.dpi-mm2-macro:hover, .dpi-mm2-macro.on {
  color: var(--dpi-ink); border-bottom-color: var(--dpi-blue-600); background: transparent;
}
.dpi-mm2-tile {
  background: var(--dpi-surface); border: 1px solid var(--dpi-line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dpi-mm2-tile:hover { border-color: var(--dpi-blue-600); box-shadow: var(--sh-1); }
.dpi-mm2-name {
  font-family: var(--font-ui); font-weight: 500; font-size: 15px; color: var(--dpi-ink);
}
.dpi-mm2-tile:hover .dpi-mm2-name { color: var(--dpi-blue-600); }
.dpi-mm2-close {
  background: rgba(255,255,255,.12) !important; border: 0 !important;
  color: #fff !important; border-radius: var(--r-sm) !important;
  min-width: 44px; min-height: 44px; padding: 0 !important;
}

/* == 10 · CONFIGURATORE ==================================================== */
/* App server var-driven: le variabili sono gia' mappate nel PONTE 1 (§1).
   Qui solo cio' che le variabili non coprono. */

.dpi-panel {
  background: var(--dpi-surface); border: 1px solid var(--dpi-line);
  border-radius: var(--r-md); color: var(--dpi-ink);
}
/* Stepper del configuratore (fuori da .dpi-home, che ha il suo) */
:not(.dpi-home) > .dpi-step, .dpi-steps .dpi-step {
  background: var(--dpi-surface); border: 1px solid var(--dpi-line); color: var(--dpi-muted);
  border-radius: var(--r-sm);
}
.dpi-step.on, .dpi-step.is-active {
  background: var(--dpi-blue); border-color: var(--dpi-blue); color: #fff;
}
.dpi-step.done, .dpi-step.is-done {
  background: var(--dpi-success); border-color: var(--dpi-success); color: #fff;
}
/* Pannello totali CHIARO: il blocco scuro spaccava la colonna */
.dpi-totals, .dpi-panel--totals {
  background: var(--dpi-surface); border: 1px solid var(--dpi-line); color: var(--dpi-ink);
}
.dpi-totals__grand, .dpi-total-row--grand {
  background: var(--dpi-canvas); border-top: 1px solid var(--dpi-line);
}
.dpi-totals__grand .amount, .dpi-total-row--grand .amount {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  letter-spacing: -.02em; color: var(--dpi-ink);
}
/* Stato, non allarme: bordo continuo al posto del tratteggio giallo */
.dpi-needs-custom {
  background: var(--dpi-blue-050); border: 1px solid var(--dpi-blue-100);
  border-radius: var(--r-md);
}
.dpi-needs-custom .label { color: var(--dpi-blue); font-weight: 700; }

/* == 11 · CARRELLO / CHECKOUT ============================================= */

.wc-proceed-to-checkout .checkout-button,
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  background: var(--dpi-blue) !important; border-color: var(--dpi-blue) !important;
  color: #fff !important; border-radius: var(--r-sm) !important;
}
.cart_totals, .wc-block-components-totals-wrapper {
  background: var(--dpi-surface); border: 1px solid var(--dpi-line);
  border-radius: var(--r-md); color: var(--dpi-ink);
}
.cart_totals .order-total, .wc-block-components-totals-footer-item {
  background: var(--dpi-canvas); border-top: 1px solid var(--dpi-line);
}
.cart_totals .order-total .amount {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  letter-spacing: -.02em; color: var(--dpi-ink);
}
.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--dpi-blue-600) !important; background: var(--dpi-blue-050) !important;
}

/* == 12 · HOME (classi reali) ============================================= */

.dpi-home .kick {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dpi-muted);
}
.dpi-home .kick::before {
  content: ""; width: 20px; height: 2px; background: var(--dpi-blue-600); display: block;
}
/* «Come funziona»: l'unico posto della home dove compare il CMYK */
.dpi-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.dpi-home .dpi-step {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: transparent; border: 0; padding: 0;
}
.dpi-stepn {
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  color: #fff; flex: none;
}
.dpi-stepn-c { background: var(--dpi-cyan); }
.dpi-stepn-m { background: var(--dpi-magenta); }
.dpi-stepn-y { background: var(--dpi-yellow); color: var(--dpi-ink); }
/* Cornermark: un pop, piccolo */
.dpi-home i.mark { color: var(--dpi-magenta); font-style: normal; }

/* == 13 · POLISH (dai rilievi sul live) =================================== */

/* 13.1 — Il bottone «CERCA» era l'ultimo rosso rimasto */
.search-submit, .search-form .search-submit {
  background: var(--dpi-blue) !important; border-color: var(--dpi-blue) !important;
  color: #fff !important; border-radius: var(--r-sm) !important;
}
.search-submit:hover { background: var(--dpi-blue-800) !important; }

/* 13.2 — Hero home: .shot e' vuoto e si riempiva di blu, un muro pieno.
   Palliativo: neutro + altezza ridotta finche' non c'e' la foto.
   Il fix vero e' strutturale (home.css / markup): vedi NOTA in fondo. */
.dpi-home .hero .shot {
  background: var(--dpi-line) !important;
  min-height: 420px;
}
.dpi-home .hero .shot:empty::after {
  content: "";
  display: block; height: 100%;
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 14px,
      rgba(15,22,34,.045) 14px 28px);
}

/* 13.3 — Gallery prodotto: la stessa immagine ripetuta nelle thumb.
   Se il prodotto ha una sola foto la riga thumb non serve. */
.woocommerce div.product .flex-control-thumbs:has(li:only-child) { display: none; }

/* == 14 · MOBILE ========================================================== */

@media (max-width: 921px) {
  .site-logo-img img, .custom-logo-link img {
    width: 148px !important; max-width: 148px !important;
  }
}

@media (max-width: 782px) {
  h1, .woocommerce div.product .product_title { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 28px; }

  .ast-button, .button, input[type="submit"],
  .wp-element-button, .wc-block-components-button,
  button.dpicalc2-personalizza, .dpi-quote-open, .btnschedatecnica2 {
    min-height: 44px; padding: 13px 20px;
  }
  .dpi-size, .dpi-filter-size { min-width: 44px; min-height: 44px; padding: 12px 8px; }
  .dpi-sw { padding: 9px 14px 9px 8px; }

  /* Prodotto: la CTA primaria diventa barra fissa a fondo schermo */
  .woocommerce div.product form.cart {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; gap: 10px; align-items: center;
    background: var(--dpi-surface); border-top: 1px solid var(--dpi-line);
    padding: 12px 16px 16px; margin: 0 -16px;
  }
  .woocommerce div.product form.cart .quantity { flex: none; }
  .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; }

  /* Chip colore a scorrimento orizzontale invece di andare a capo */
  .dpi-sw-wrap, .dpi-swatches {
    display: flex; gap: var(--sp-2); overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .dpi-sw-wrap::-webkit-scrollbar { display: none; }
  .dpi-sw { flex: none; white-space: nowrap; }

  /* Configuratore: la sidebar non sta accanto */
  .dpi-config-grid { grid-template-columns: 1fr !important; }
  .dpi-totals { position: sticky; bottom: 0; }

  /* Megamenu: drawer verticale */
  .dpi-mm2-grid, .dpi-mm2-grids { grid-template-columns: 1fr !important; }
  .dpi-how { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* == 15 · RECUPERATE DALL'ADDITIVE CSS (v2.2.3) =============================
 * Queste regole vivevano SOLO nell'Additional CSS del Customizer — cioe' in una
 * riga del database — e il pacchetto del tema non le ha mai avute.
 *
 * Se ne e' accorto il passaggio ad Astra Child sul live il 2026-09-01: il custom
 * CSS e' legato al TEMA (theme_mods -> custom_css_post_id), quindi cambiando tema
 * ha smesso di applicarsi di colpo. Non e' stato cancellato: e' rimasto agganciato
 * ad astra. Ma con esso sono usciti di scena 16 selettori, e NON erano cosmetici:
 * c'era dentro tutto l'impianto a griglia della pagina categoria (sidebar 248px +
 * prodotti a 3 colonne), la sidebar filtri sticky, e l'aggancio del megamenu alla
 * barra di navigazione.
 *
 * E' esattamente il rischio che il README del tema descrive — «l'Additional CSS
 * vive in un'option, non e' versionabile» — verificato nel verso opposto a quello
 * che ci aspettavamo: non il tema aveva roba in piu', l'option aveva roba che il
 * tema non ha mai avuto.
 * ========================================================================== */

/* ============================================================================
 * DUE COSE CHE DA QUI NON SI POSSONO FARE
 *
 * 1. COOKIE BANNER — e' un'app React di SureCookie con classi dinamiche: nessun
 *    selettore CSS aggancia in modo affidabile, e il verde #377A00 e' comunque
 *    un'IMPOSTAZIONE del plugin. Cambiarlo li':
 *      SureCookie -> Colori -> primario #377A00 -> #1B44AB
 *      (secondario outline neutro, «Preferenze» come link)
 *
 * 2. HERO HOME — .shot e' un contenitore vuoto: nessuna regola di colore lo
 *    riempie di contenuto. Il §13.2 lo rende neutro e ne riduce l'altezza, ma
 *    il fix vero e' uno dei due:
 *      a) mettere la foto (feed payperwear o uno scatto in cantiere), oppure
 *      b) togliere la colonna e portare l'hero a una colonna piena
 *    Entrambi toccano home.css / il markup dello shortcode, non i token.
 * ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
 * LIVE-DELTA — fix VERIFICATI sul live NON coperti dalla v2.1. Tenere in coda.
 * (Tutto il resto della v2.1 già copre: CTA prodotto §8, onsale/gallery §13,
 *  /pz e card-colors §7, disabled §4, megamenu §9. L'hero home è un blocco
 *  custom .dpi-hero2 self-contained → immune al blanket bottoni §4.)
 * ════════════════════════════════════════════════════════════════════════ */

/* Δ1 · Bottone «CERCA»: il vero bottone sta in .dpi-searchbar (barra custom del
   plugin, con <style> inline proprio), NON in .search-submit (icona nascosta
   Astra su cui punta §13.1). Serve agganciare il selettore reale. */
.dpi-searchbar button[type="submit"], .dpi-searchbar__form button {
  background: var(--dpi-blue) !important; border-color: var(--dpi-blue) !important;
  color: #fff !important; border-radius: var(--r-sm) !important;
  font-family: var(--font-ui); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 10px 18px; cursor: pointer;
}
.dpi-searchbar button[type="submit"]:hover, .dpi-searchbar__form button:hover {
  background: var(--dpi-blue-800) !important; border-color: var(--dpi-blue-800) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
 * Δ4 · HEADER — megamenu «Catalogo ▾» integrato nella nav (mockup §01)
 * La striscia nera è sparita (patch plugin: widget ora è la 1ª voce nav primaria).
 * (Sostituisce il vecchio Δ2 interim blu.) .dpi-mm2-btn diventa una voce-nav e il
 * panel si riancora a tutta larghezza sotto l'header. Panel-anchor solo ≥783px:
 * sotto quella soglia il <style> inline del plugin lo rende static (drawer mobile).
 * ════════════════════════════════════════════════════════════════════════ */
.menu-item-dpi-mm2 { position: static; list-style: none; display: flex; align-items: center; }
.menu-item-dpi-mm2 > .dpi-mm2 { position: static; }
.dpi-mm2-caret { font-size: 11px; opacity: .85; }
.ast-primary-header-bar, .main-header-bar { position: relative; }
.archive .ast-woocommerce-container {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    column-gap: 32px; align-items: start;
  }
.archive .ast-woocommerce-container > .woocommerce-breadcrumb,
  .archive .ast-woocommerce-container > .woocommerce-products-header { grid-column: 1 / -1; }
.archive .ast-woocommerce-container > .dpi-filter {
    grid-column: 1; grid-row: 3 / span 999;
    position: sticky; top: 96px; align-self: start;
  }
.archive .ast-woocommerce-container > .woocommerce-notices-wrapper,
  .archive .ast-woocommerce-container > .woocommerce-result-count,
  .archive .ast-woocommerce-container > .woocommerce-ordering,
  .archive .ast-woocommerce-container > ul.products,
  .archive .ast-woocommerce-container > nav.woocommerce-pagination { grid-column: 2; }
/* griglia prodotti 3-up nella colonna dx (come il mockup).
     Astra tiene il suo columns-N (flex + width li) → serve !important + target classe. */
  .archive .ast-woocommerce-container > ul.products,
  .archive .ast-woocommerce-container ul.products.columns-2,
  .archive .ast-woocommerce-container ul.products.columns-3,
  .archive .ast-woocommerce-container ul.products.columns-4,
  .archive .ast-woocommerce-container ul.products.columns-5,
  .archive .ast-woocommerce-container ul.products.columns-6 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important; margin: 0 !important;
  }
.archive .ast-woocommerce-container ul.products > li.product {
    width: auto !important; max-width: none !important; margin: 0 !important;
    float: none !important; clear: none !important;
  }
.archive .ast-woocommerce-container > ul.products::before,
  .archive .ast-woocommerce-container > ul.products::after { content: none !important; }
/* COLORE = lista verticale con scroll se troppi (il mockup ne mostra pochi) */
.dpi-filter-chips:has(.dpi-filter-col) { flex-direction: column; gap: 2px;
  max-height: 300px; overflow-y: auto; }
.dpi-filter-reset:hover { text-decoration: underline; }
.dpi-filter-chips:has(.dpi-filter-col) { flex-direction: row; max-height: none; overflow: visible; }

/* ============================================================================
 * DUE COSE CHE DA QUI NON SI POSSONO FARE
 *
 * 1. COOKIE BANNER — e' un'app React di SureCookie con classi dinamiche: nessun
 *    selettore CSS aggancia in modo affidabile, e il verde #377A00 e' comunque
 *    un'IMPOSTAZIONE del plugin. Cambiarlo li':
 *      SureCookie -> Colori -> primario #377A00 -> #1B44AB
 *      (secondario outline neutro, «Preferenze» come link)
 *
 * 2. HERO HOME — .shot e' un contenitore vuoto: nessuna regola di colore lo
 *    riempie di contenuto. Il §13.2 lo rende neutro e ne riduce l'altezza, ma
 *    il fix vero e' uno dei due:
 *      a) mettere la foto (feed payperwear o uno scatto in cantiere), oppure
 *      b) togliere la colonna e portare l'hero a una colonna piena
 *    Entrambi toccano home.css / il markup dello shortcode, non i token.
 * ========================================================================== */