/*
Theme Name: Storefront Piastrelle
Template: storefront
Description: Tema child per l'e-commerce piastrelle. Identità visiva "Gresio" (v. docs/mockup/mockup-v2.html): token, font self-hosted, componenti scheda prodotto del plugin core-piastrelle.
Version: 0.3.0
Text Domain: storefront-piastrelle
*/

/* ==========================================================================
   FONT — Inter (Google Fonts), self-hosted per compatibilità GDPR.
   Sorgente: docs/mockup/mockup-v2.html, commento in testa al file:
     Font: system stack. PRODUZIONE: Google Font "Inter" wght 400;500;600;700
     (font-display:swap).
   Scaricati SOLO i subset latin + latin-ext da fonts.googleapis.com/css2
   (le altre lingue — cyrillic, greek, vietnamese... — non servono al sito
   in italiano/inglese e appesantirebbero il caricamento).
   NB: i 4 pesi condividono i medesimi 2 file fisici (Inter è distribuito da
   Google come variable font: stesso woff2, pesi diversi selezionati dal
   browser tramite font-weight nell'@font-face) — verificato via checksum.
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKEN — copiati 1:1 dai valori del :root in docs/mockup/mockup-v2.html.
   Mappa nomi mockup -> nomi tema (namespace --gresio- per non collidere con
   Storefront/WooCommerce):
     --ink        -> --gresio-ink
     --ink-2      -> --gresio-ink-2
     --muted      -> --gresio-muted
     --muted-bg   -> --gresio-muted-bg
     --bg         -> --gresio-bg
     --border     -> --gresio-border
     --accent     -> --gresio-accent       (oro, prezzi + CTA commercio)
     --accent-ink -> --gresio-accent-ink
     --blue       -> --gresio-blue         (blu tecnico, interattivo/nav)
     --blue-dark  -> --gresio-blue-dark
     --blue-tint  -> --gresio-blue-tint
     --ok         -> --gresio-ok
     --maxw       -> --gresio-maxw
   I task 2-4 consumano questi token: NON ridefinirli altrove.
   ========================================================================== */
:root {
    --gresio-ink: #171717;
    --gresio-ink-2: #404040;
    --gresio-muted: #64748B;
    --gresio-muted-bg: #F4F5F7;
    --gresio-bg: #FFFFFF;
    --gresio-border: #E5E5E5;
    --gresio-accent: #A16207;
    --gresio-accent-hover: #8A5406;
    --gresio-accent-ink: #FFFFFF;
    --gresio-blue: #2C5697;
    --gresio-blue-dark: #234478;
    --gresio-blue-tint: #EEF2F8;
    --gresio-ok: #059669;
    --gresio-maxw: 1520px;
    --gresio-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   TIPOGRAFIA DI BASE — scala e font-family del mockup.
   ========================================================================== */

/* Le bande full-bleed della home usano 100vw, che include la scrollbar
   verticale sui desktop con barra classica: senza questo guard la pagina
   guadagna qualche px di scroll orizzontale. */
body,
button,
input,
select,
textarea {
    font-family: var(--gresio-font);
    color: var(--gresio-ink);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(21px, 2.8vw, 28px);
}

table,
.woocommerce table {
    font-variant-numeric: tabular-nums;
}

.price,
.cp-prezzo-mq,
.cp-prezzo-scatola,
.cp-prezzo,
.cp-soglia,
#cp-effettivi,
#cp-totale {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BOTTONI E LINK — primario oro (CTA commercio), secondario/link blu tecnico.
   Sovrascrive solo il necessario sopra i bottoni Storefront/WooCommerce.
   ========================================================================== */
a {
    color: var(--gresio-blue);
}

a:hover {
    color: var(--gresio-blue-dark);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button,
button.button,
input.button {
    background-color: var(--gresio-accent);
    border-color: var(--gresio-accent);
    color: var(--gresio-accent-ink);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 0;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
a.button:hover,
button.button:hover,
input.button:hover {
    background-color: #8a5406;
    border-color: #8a5406;
    color: var(--gresio-accent-ink);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--gresio-ink);
    border-color: var(--gresio-ink);
    color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: #000;
    border-color: #000;
}

/* ==========================================================================
   COMPONENTI SCHEDA PRODOTTO (plugin core-piastrelle)
   Adattamento meccanico dei blocchi CSS del mockup v2 (vista Prodotto:
   .pricebox/.tiers/.calc/.stepper/.total-row) ai selettori reali PHP.
   ========================================================================== */

/* Prezzo al m² in vetrina — mockup: .bigprice */
.cp-prezzo-mq {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--gresio-ink);
}

.cp-prezzo-scatola {
    display: block;
    font-weight: normal;
    color: var(--gresio-muted);
}

/* Acquisto m²/scatole — mockup: .calc + .calc-row + .stepper + .total-row */
#cp-acquisto {
    margin-top: 20px;
    border: 1px solid var(--gresio-border);
    padding: 20px;
    background: var(--gresio-bg);
}

.cp-acquisto-campi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}

@media (max-width: 480px) {
    .cp-acquisto-campi {
        grid-template-columns: 1fr;
    }
}

.cp-acquisto-campi label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gresio-muted);
    margin-bottom: 6px;
}

.cp-acquisto-campi input[type="number"] {
    width: 100%;
    border: 1px solid var(--gresio-border);
    padding: 12px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Stepper −/+ quadrato — mockup: .stepper */
.cp-stepper {
    display: flex;
    border: 1px solid var(--gresio-border);
}

.cp-stepper button {
    width: 44px;
    flex: 0 0 44px;
    border: 0;
    background: var(--gresio-muted-bg);
    font-size: 20px;
    font-weight: 600;
    color: var(--gresio-ink);
    padding: 0;
}

.cp-stepper button:hover {
    background: var(--gresio-border);
}

.cp-stepper input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-left: 1px solid var(--gresio-border);
    border-right: 1px solid var(--gresio-border);
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 4px;
}

#cp-effettivi {
    font-size: 12px;
    color: var(--gresio-muted);
    margin-top: 8px;
    min-height: 18px;
    font-variant-numeric: tabular-nums;
}

#cp-totale {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-top: 1px solid var(--gresio-border);
    margin-top: 16px;
    padding-top: 14px;
}

/* Formati disponibili — mockup: .fmt-row/.fmt (qui: select nativo) */
.cp-formati {
    margin-top: 22px;
}

.cp-formati label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gresio-muted);
    margin-bottom: 8px;
}

.cp-formati select {
    border: 1px solid var(--gresio-border);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--gresio-bg);
    color: var(--gresio-ink);
    min-width: 200px;
}

.cp-formati select:focus-visible {
    outline: 2px solid var(--gresio-blue);
    outline-offset: 2px;
}

/* Tabella sconti a scaglioni orizzontale — mockup: .tiers */
.cp-tabella-sconti.cp-orizzontale {
    width: 100%;
    margin: 20px 0 0;
    font-size: 13px;
    text-align: center;
    border: none;
}

.cp-tabella-sconti.cp-orizzontale td {
    border: 1px solid var(--gresio-border);
    padding: 10px 6px;
    background: var(--gresio-bg);
    vertical-align: top;
}

.cp-tabella-sconti.cp-orizzontale .cp-soglia {
    display: block;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gresio-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.cp-tabella-sconti.cp-orizzontale .cp-prezzo {
    display: block;
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* Scaglione attivo (evidenziato dal JS acquisto-mq): stile raffinato in oro,
   sostituisce l'outline provvisorio del child precedente. */
.cp-tabella-sconti.cp-orizzontale td.cp-scaglione-attivo {
    background: var(--gresio-accent);
    border-color: var(--gresio-accent);
}

.cp-tabella-sconti.cp-orizzontale td.cp-scaglione-attivo .cp-soglia {
    color: var(--gresio-accent-ink);
    opacity: 0.85;
}

.cp-tabella-sconti.cp-orizzontale td.cp-scaglione-attivo .cp-prezzo {
    color: var(--gresio-accent-ink);
}

/* ==========================================================================
   TABELLE GENERICHE — hairline, coerenti con .tech/.rtab/.shiptab del mockup.
   ========================================================================== */
table {
    border-collapse: collapse;
    width: 100%;
}

table th,
table td {
    border: 1px solid var(--gresio-border);
    padding: 10px 14px;
    font-size: 14px;
    text-align: left;
}

table th {
    background: var(--gresio-muted-bg);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gresio-ink-2);
}

/* ==========================================================================
   COSTI DI SPEDIZIONE — mockup: .shiptab
   ========================================================================== */
.cp-costi-spedizione-wrapper {
    margin: 20px 0;
}

.cp-costi-spedizione {
    width: auto;
    min-width: 50%;
    margin: 0.5em 0 1.5em;
}

.cp-zona-paesi {
    color: var(--gresio-muted);
    margin-top: -0.5em;
    margin-bottom: 1em;
}

.cp-costi-nota {
    font-style: italic;
    color: var(--gresio-ink-2);
    opacity: 0.85;
}

/* ==========================================================================
   HEADER / MEGA-MENU — adattamento del blocco header del mockup v2
   (docs/mockup/mockup-v2.html, vista Home: header.site / nav.main / .drop /
   .mnav) ai selettori reali generati da Storefront (wp_nav_menu core, tema
   parent Storefront 4.6.2):
     nav.main               -> nav#site-navigation.main-navigation
     nav.main > ul > li     -> .primary-navigation .menu > .menu-item-has-children
     a.top                  -> .primary-navigation .menu > li > a
     .drop                  -> .primary-navigation .sub-menu
     .drop.two (2 colonne)  -> .primary-navigation li.gresio-sub-2col-parent > .sub-menu
     .mnav / .mnav details  -> .handheld-navigation (accordion nativo di
                                Storefront via navigation.js: bottone
                                .dropdown-toggle iniettato via JS, stato
                                attivo con classe .toggled-on su bottone e
                                .sub-menu — NON reimplementato, solo stilizzato)
   Contrasto: testo su bianco sempre >= AA (--gresio-ink su --gresio-bg,
   --gresio-blue su --gresio-bg/--gresio-blue-tint verificati >= 4.5:1).
   Focus: outline blu visibile su tutti gli elementi interattivi da tastiera.
   ========================================================================== */

/* --- Riga alta dell'header: logo / ricerca / icone (mockup .hrow) --------
   I componenti default di Storefront (site-branding, search widget, cart)
   sono rimossi in functions.php e sostituiti da gresio-logo / gresio-search
   / gresio-hicons dentro lo stesso .col-full. ------------------------------ */

/* TOP-BAR — claim di servizio + link cortesia, striscia sopra l'header. */
.gresio-topbar {
    background: var(--gresio-ink);
    color: #fff;
}

.gresio-topbar-inner {
    max-width: var(--gresio-maxw);
    margin: 0 auto;
    padding: 9px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 13px;
}

.gresio-topbar-claim {
    margin: 0;
    color: #ededed;
    letter-spacing: 0.005em;
}

.gresio-topbar-links {
    display: flex;
    gap: 22px;
    white-space: nowrap;
}

.gresio-topbar-links a {
    color: #c9c9c9;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.gresio-topbar-links a:hover,
.gresio-topbar-links a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .gresio-topbar-inner {
        justify-content: center;
        padding: 8px 16px;
    }
    .gresio-topbar-links {
        display: none;
    }
    .gresio-topbar-claim {
        font-size: 12.5px;
        text-align: center;
    }
}

.site-header {
    background: var(--gresio-bg);
    border-bottom: 1px solid var(--gresio-border);
}

.site-header > .col-full {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 62px;
}

.gresio-logo,
.gresio-logo:hover,
.gresio-logo:visited {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--gresio-ink);
    text-decoration: none;
    white-space: nowrap;
}

.gresio-logo b {
    color: var(--gresio-accent);
}

.gresio-search {
    flex: 0 1 720px;
    max-width: 720px;
    display: flex;
    border: 1px solid var(--gresio-border);
    /* margini auto: la ricerca si centra assorbendo lo spazio tra logo e icone,
       invece di lasciare un vuoto morto a destra. */
    margin: 0 auto;
}

.gresio-search input[type='search'] {
    flex: 1;
    border: 0;
    background: var(--gresio-bg);
    padding: 9px 12px;
    font-size: 14px;
    min-width: 0;
    box-shadow: none;
}

.gresio-search input[type='search']:focus {
    outline: 2px solid var(--gresio-blue);
    outline-offset: -2px;
}

.gresio-search button {
    border: 0;
    border-radius: 0;
    background: var(--gresio-ink);
    color: #fff;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.gresio-search button:hover {
    background: #000;
    color: #fff;
}

.gresio-hicons {
    margin-left: auto;
    display: flex;
    gap: 18px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.gresio-hicons a,
.gresio-hicons a:visited {
    color: var(--gresio-ink);
    text-decoration: none;
}

.gresio-hicons a:hover {
    color: var(--gresio-blue);
}

.gresio-cart-dot {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    background: var(--gresio-accent);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    border-radius: 8px;
    vertical-align: top;
}

/* Mobile (mockup @max-940/480): ricerca a tutta larghezza sotto la riga */
@media (max-width: 940px) {
    .site-header > .col-full {
        flex-wrap: wrap;
        padding-top: 10px;
    }

    .gresio-search {
        order: 3;
        max-width: none;
        flex-basis: 100%;
        margin-bottom: 10px;
    }

    .gresio-hicons {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .site-header > .col-full {
        gap: 12px;
    }

    .gresio-logo {
        font-size: 17px;
    }

    .gresio-hicons {
        gap: 12px;
        font-size: 12px;
    }

    .gresio-hicons a:first-child {
        display: none;
    }
}

/* --- Desktop (>= 768px): barra orizzontale con dropdown su hover/focus --- */
@media (min-width: 768px) {
    .main-navigation {
        border-top: 1px solid var(--gresio-border);
    }

    /* Storefront nasconde di default .handheld-navigation via media query
       propria sopra i 768px: nessuna regola extra necessaria qui, ma il
       toggle hamburger va nascosto esplicitamente per coerenza col mockup. */
    .main-navigation .menu-toggle {
        display: none;
    }

    .primary-navigation .menu {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .primary-navigation .menu > li {
        position: relative;
    }

    .primary-navigation .menu > li > a {
        display: block;
        padding: 0 14px;
        line-height: 46px;
        font-size: 13px;
        font-weight: 600;
        color: var(--gresio-ink);
        border-bottom: 2px solid transparent;
        text-decoration: none;
    }

    .primary-navigation .menu > li > a:hover,
    .primary-navigation .menu > li:hover > a,
    .primary-navigation .menu > li.focus > a,
    .primary-navigation .menu > li:focus-within > a {
        color: var(--gresio-blue);
        border-bottom-color: var(--gresio-blue);
    }

    /* Voce "Offerte" in oro, come nel mockup (a.top.gold) */
    .primary-navigation .menu > li.gresio-menu-oro > a {
        color: var(--gresio-accent);
    }

    /* Pannello dropdown: nascosto di default, mostrato su hover/focus.
       Sovrascrive il posizionamento off-canvas (left:-9999px) di Storefront. */
    .primary-navigation .sub-menu {
        position: absolute;
        left: -9999px;
        top: 100%;
        display: block;
        min-width: 236px;
        margin: 0;
        padding: 8px 0;
        list-style: none;
        background: var(--gresio-bg);
        border: 1px solid var(--gresio-border);
        border-top: 2px solid var(--gresio-blue);
        box-shadow: 0 10px 26px rgba(23, 23, 23, 0.1);
        z-index: 75;
    }

    .primary-navigation .menu > li:hover > .sub-menu,
    .primary-navigation .menu > li.focus > .sub-menu,
    .primary-navigation .menu > li:focus-within > .sub-menu {
        left: 0;
    }

    /* Sotto-voci con molte marche: layout a 2 colonne (mockup: .drop.two).
       Classe "gresio-sub-2col-parent" assegnata via postmeta _menu_item_classes
       sulla voce di primo livello "Marche" (wp menu item non espone --classes
       da CLI, quindi impostata con wp eval su update_post_meta). */
    .primary-navigation li.gresio-sub-2col-parent > .sub-menu {
        min-width: 400px;
        column-count: 2;
        column-gap: 0;
        padding: 8px 0 12px;
    }

    .primary-navigation li.gresio-sub-2col-parent > .sub-menu > li {
        break-inside: avoid;
    }

    .primary-navigation .sub-menu li a {
        display: block;
        padding: 8px 18px;
        font-size: 13.5px;
        color: var(--gresio-ink-2);
        text-decoration: none;
    }

    .primary-navigation .sub-menu li a:hover,
    .primary-navigation .sub-menu li a:focus {
        background: var(--gresio-blue-tint);
        color: var(--gresio-blue);
    }

    /* Ultima voce di ogni dropdown ("Tutte le marche →" ecc.): evidenziata,
       separata da un filo come nel mockup (.drop a.all) */
    .primary-navigation .sub-menu li:last-child a {
        border-top: 1px solid var(--gresio-border);
        margin-top: 6px;
        padding-top: 11px;
        color: var(--gresio-blue);
        font-weight: 600;
    }

    .primary-navigation li.gresio-sub-2col-parent > .sub-menu > li:last-child a {
        column-span: all;
    }

    /* ===== MEGA-MENU (Interni / Esterni) =====
       Il pannello dropdown diventa largo, con i gruppi affiancati in colonne;
       ogni gruppo ha un'intestazione e le sue voci sempre visibili (non una
       tendina annidata). */
    .primary-navigation li.gresio-mega > .sub-menu {
        display: flex;
        gap: 44px;
        width: max-content;
        max-width: 90vw;
        min-width: 0;
        padding: 24px 30px 28px;
    }

    /* Ogni gruppo = colonna statica dentro il pannello. */
    .primary-navigation li.gresio-mega > .sub-menu > li.gresio-mega-col {
        position: static;
        min-width: 150px;
    }

    /* Intestazione di colonna (la voce "head", non cliccabile). */
    .primary-navigation li.gresio-mega-col > a {
        display: block;
        padding: 0 0 9px;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--gresio-muted);
        border-bottom: 1px solid var(--gresio-border);
        pointer-events: none;
        cursor: default;
    }

    /* Le voci del gruppo: colonna statica sempre visibile, non un dropdown. */
    .primary-navigation li.gresio-mega-col > .sub-menu {
        position: static;
        left: auto;
        top: auto;
        display: block;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        z-index: auto;
    }

    .primary-navigation li.gresio-mega-col > .sub-menu li a {
        padding: 6px 0;
        font-size: 14px;
        color: var(--gresio-ink-2);
        white-space: nowrap;
    }

    .primary-navigation li.gresio-mega-col > .sub-menu li a:hover,
    .primary-navigation li.gresio-mega-col > .sub-menu li a:focus {
        background: transparent;
        color: var(--gresio-blue);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* Annulla l'evidenziazione "ultima voce" (bordino/grassetto) dentro le
       colonne mega: lì tutte le voci sono pari. */
    .primary-navigation li.gresio-mega-col > .sub-menu li:last-child a {
        border-top: 0;
        margin-top: 0;
        padding-top: 6px;
        font-weight: 400;
        color: var(--gresio-ink-2);
    }

    /* Il caret "ha figli" di Storefront usa il glyph di un font icona non
       caricato (appare come ☐): lo sostituiamo con una freccina CSS pulita.
       L'ancora diventa inline-flex così testo e freccina restano affiancati e
       centrati (con display:block la freccina andava a capo, finendo sopra). */
    /* Un CSS esterno (Font Awesome, non caricato) inietta un ::after su TUTTI i
       link del menu: appare come glyph rotto (☐), a volte a capo sotto la voce.
       Lo azzeriamo su tutto il menu, poi teniamo SOLO la nostra freccina CSS
       sulle voci di primo livello con tendina. */
    .primary-navigation a::after,
    .primary-navigation a::before {
        content: none !important;
        display: none !important;
    }

    .primary-navigation .menu > li.menu-item-has-children > a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .primary-navigation .menu > li.menu-item-has-children > a::after {
        content: "" !important;
        display: inline-block !important;
        flex: 0 0 auto;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        opacity: 0.5;
    }

    /* Il pulsante .dropdown-toggle (tap su mobile) su desktop non serve. */
    .primary-navigation .dropdown-toggle {
        display: none !important;
    }
}

/* --- Focus visibile ovunque nel menu, desktop e mobile (AA) --- */
.main-navigation a:focus-visible,
.main-navigation button:focus-visible {
    outline: 2px solid var(--gresio-blue);
    outline-offset: -2px;
}

/* --- Mobile (<= 767.98px): Storefront mostra .handheld-navigation e nasconde
   .primary-navigation via sua media query nativa; qui si stilizza solo
   l'accordion nativo (bottone .dropdown-toggle + classe .toggled-on) --- */
@media (max-width: 767.98px) {
    .handheld-navigation {
        border-top: 1px solid var(--gresio-border);
        background: var(--gresio-bg);
    }

    .handheld-navigation .menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .handheld-navigation .menu-item {
        border-bottom: 1px solid var(--gresio-border);
    }

    .handheld-navigation .menu > li > a {
        display: block;
        padding: 13px 24px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gresio-ink);
        text-decoration: none;
    }

    .handheld-navigation .menu > li.gresio-menu-oro > a {
        color: var(--gresio-accent);
    }

    /* Bottone accordion iniettato da navigation.js su ogni voce con figli */
    .handheld-navigation .dropdown-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 46px;
        height: 46px;
        border: 0;
        background: transparent;
        color: var(--gresio-blue);
        font-size: 19px;
        line-height: 46px;
    }

    .handheld-navigation .dropdown-toggle::after {
        content: "+";
    }

    .handheld-navigation .dropdown-toggle.toggled-on::after {
        content: "\2013"; /* – */
    }

    .handheld-navigation .menu-item-has-children {
        position: relative;
    }

    .handheld-navigation .menu-item-has-children.toggled-on > a,
    .handheld-navigation .dropdown-toggle.toggled-on {
        color: var(--gresio-blue);
    }

    /* Sotto-menu: nascosto finché navigation.js non aggiunge .toggled-on
       (transizione max-height/opacity nativa di Storefront, qui solo
       rifinita nei colori/tipografia) */
    .handheld-navigation .sub-menu {
        list-style: none;
        margin: 0;
        padding: 2px 0 10px;
    }

    .handheld-navigation .sub-menu li a {
        display: block;
        padding: 8px 24px 8px 38px;
        font-size: 14px;
        color: var(--gresio-ink-2);
        text-decoration: none;
    }

    .handheld-navigation .sub-menu li a:hover,
    .handheld-navigation .sub-menu li a:active {
        color: var(--gresio-blue);
    }
}

/* ==========================================================================
   HOME A CATALOGO — front-page.php (adattamento meccanico del blocco
   HOME del mockup v2, docs/mockup/mockup-v2.html r.533-711, ai selettori
   reali stampati dalle funzioni gresio_home_*).
   Storefront racchiude #content in .col-full (max-width + padding): le
   bande a piena larghezza (offerte, campioni) escono dal contenitore con
   la tecnica margin 50%/-50vw, poi ripropongono .wrap per il testo.
   ========================================================================== */

.gresio-home .wrap {
    max-width: var(--gresio-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.gresio-home section,
.gresio-home > .wrap {
    padding: 48px 0;
}

/* Storefront limita il contenuto a .col-full ~1064px, troppo stretto sugli
   schermi larghi: lo allarghiamo al container Gresio così blocchi e foto
   riempiono la pagina. Header e footer ovunque (coerenza), contenuto solo sulla
   home per ora — archivi e pagina prodotto si allargano nel Blocco 2, dopo
   verifica. Specificità > della regola di Storefront: vince senza !important. */
.site-header .col-full,
.site-footer .col-full,
body.home .site-content .col-full {
    max-width: var(--gresio-maxw);
}

/* L'hero apre subito sotto l'header. Storefront lascia ~68px di margine sotto
   l'header + 40px di padding nell'hero + il padding del content: sulla home si
   comprime tutto per far partire l'hero appena sotto il menu (~30px di respiro). */
body.home .site-header {
    /* Storefront impone ~68px di margine sotto l'header via CSS del Customizer
       (inline, alta priorità): serve !important per comprimerlo sulla home. */
    margin-bottom: 18px !important;
}

.home .site-content {
    padding-top: 8px;
}

.gresio-home > .wrap:first-child {
    padding-top: 0;
}

.gresio-home .hband {
    padding-top: 10px;
}

.gresio-home section + section {
    border-top: 1px solid var(--gresio-border);
}

.gresio-home .sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.gresio-home .sec-head h2 {
    margin: 0;
}

.gresio-home .sec-head a {
    font-size: 13px;
    font-weight: 600;
    color: var(--gresio-blue);
    white-space: nowrap;
    text-decoration: none;
}

.gresio-home .sec-head a:hover {
    text-decoration: underline;
}

.gresio-home .grid {
    display: grid;
    gap: 16px;
}

/* ── materie (gradienti placeholder = foto in produzione) ──
   Sorgente: mockup v2 r.129-146 (.ph-*), rinominate .gresio-materia-<slug>
   per corrispondere agli slug reali dei termini pa_effetto/pa_ambiente. */
.ph {
    position: relative;
    overflow: hidden;
    background: #dedad2;
}

.ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .06));
}

.gresio-materia-legno {
    background: repeating-linear-gradient(90deg, #b4a48d 0 22%, #a89876 22% 41%, #bcae97 41% 63%, #a1906f 63% 82%, #b7a78e 82% 100%);
}

.gresio-materia-marmo {
    background: radial-gradient(120% 90% at 20% 10%, #f3f1ec 0%, #e2ded6 45%, #cfc9bd 78%, #e8e5de 100%);
}

.gresio-materia-pietra {
    background: linear-gradient(145deg, #9b9891 0%, #84817a 42%, #a5a29b 75%, #8d8a83 100%);
}

.gresio-materia-cemento {
    background: linear-gradient(160deg, #c9c9c6 0%, #b3b3b0 48%, #c1c1be 100%);
}

.gresio-materia-cotto {
    background: linear-gradient(150deg, #c07a58 0%, #a55f41 45%, #c98a68 100%);
}

.gresio-materia-metallo {
    background: linear-gradient(120deg, #b9bec3 0%, #878d93 32%, #a9aeb4 55%, #7d838a 80%, #b3b8bd 100%);
}

.gresio-materia-terrazzo {
    background-color: #e6e0d4;
    background-image:
        radial-gradient(circle at 22% 28%, #b7a99a 0 4px, transparent 5px),
        radial-gradient(circle at 68% 62%, #8d8478 0 5px, transparent 6px),
        radial-gradient(circle at 44% 82%, #c9b8a4 0 3px, transparent 4px),
        radial-gradient(circle at 86% 18%, #a29684 0 4px, transparent 5px);
    background-size: 84px 84px;
}

.gresio-materia-salvia,
.gresio-materia-tinta-unita {
    background: linear-gradient(160deg, #8fa08e 0%, #75886f 60%, #97a893 100%);
}

.gresio-materia-scuro {
    background: linear-gradient(150deg, #4c4a45 0%, #37352f 55%, #524f48 100%);
}

.gresio-materia-sabbia {
    background: linear-gradient(140deg, #ddd2bd 0%, #cbbfa6 50%, #e0d6c2 100%);
}

.gresio-materia-blu {
    background: linear-gradient(155deg, #8fa0a8 0%, #75868f 55%, #9aabb2 100%);
}

/* ── bottoni home (mockup .btn/.btn-solid/.btn-line/.btn-acc) — angolo vivo
   dell'identità, ma con reazioni più decise, maiuscolo coerente col resto
   del sito e transizione morbida. ── */
.gresio-home .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.gresio-home .btn:hover {
    text-decoration: none;
}

.gresio-home .btn:active {
    transform: translateY(1px);
}

.gresio-home .btn-solid {
    background: var(--gresio-ink);
    color: #fff;
}

.gresio-home .btn-solid:hover {
    background: #000;
}

/* Secondario: riempimento pieno all'hover (prima solo un grigio debole) */
.gresio-home .btn-line {
    background: transparent;
    color: var(--gresio-ink);
    border-color: var(--gresio-ink);
}

.gresio-home .btn-line:hover {
    background: var(--gresio-ink);
    color: #fff;
}

.gresio-home .btn-acc {
    background: var(--gresio-accent);
    border-color: var(--gresio-accent);
    color: var(--gresio-accent-ink);
}

.gresio-home .btn-acc:hover {
    background: var(--gresio-accent-hover);
    border-color: var(--gresio-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
    .gresio-home .btn {
        transition: none;
    }

    .gresio-home .btn:active {
        transform: none;
    }
}

/* Contorno di focus da tastiera su tutti gli interattivi (accessibilità) */
a:focus-visible,
button:focus-visible,
.gresio-home .btn:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--gresio-blue);
    outline-offset: 2px;
}

/* ── Foto reali nei riquadri della home (hero, effetti, ambienti, offerte).
   Riempiono il riquadro; l'etichetta resta leggibile sopra. Se una foto
   manca, resta il gradiente materico del riquadro come ripiego. ── */
.gresio-tile-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

.htiles .ph,
.effbox,
.axis,
.pcard .ph,
.bcard .ph {
    position: relative;
    overflow: hidden;
}

/* Etichette sopra la foto e sopra l'eventuale velatura .ph::after */
.effbox .plate,
.axis span {
    z-index: 2;
}

/* Zoom lieve della foto al passaggio del mouse: dà vita ai riquadri */
.effbox .gresio-tile-foto,
.axis .gresio-tile-foto,
.htiles .gresio-tile-foto {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.effbox:hover .gresio-tile-foto,
.axis:hover .gresio-tile-foto {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .effbox .gresio-tile-foto,
    .axis .gresio-tile-foto,
    .htiles .gresio-tile-foto {
        transition: none;
    }

    .effbox:hover .gresio-tile-foto,
    .axis:hover .gresio-tile-foto {
        transform: none;
    }
}

/* ── hero compatto (mockup .hband) ── */
.hband {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 40px 0 48px;
}

.hband h1 {
    font-size: clamp(22px, 2.9vw, 32px);
    max-width: 26ch;
    margin: 10px 0 0;
}

.hband p.sub {
    color: var(--gresio-ink-2);
    font-size: 15px;
    max-width: 58ch;
    margin-top: 10px;
}

.hband .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.hband .badge {
    border: 1px solid var(--gresio-border);
    padding: 5px 10px;
    font-size: 12px;
    color: var(--gresio-ink-2);
}

.hband .cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.hband .geo {
    font-size: 13.5px;
    color: var(--gresio-ink-2);
    border-top: 1px solid var(--gresio-border);
    padding-top: 14px;
    margin-top: 18px;
    max-width: 58ch;
}

.htiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    min-height: 380px;
}

.htiles .ph {
    min-height: 0;
}

.htiles .ph:first-child {
    grid-row: 1 / 3;
}

@media (max-width: 940px) {
    .hband {
        grid-template-columns: 1fr;
    }

    .htiles {
        min-height: 170px;
    }
}

/* ── box effetto (mockup .effbox) ── */
.grid.effetti {
    grid-template-columns: repeat(4, 1fr);
}

.effbox {
    position: relative;
    display: block;
    aspect-ratio: 5 / 4;
    border: 1px solid var(--gresio-border);
    text-decoration: none;
}

.effbox .plate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .94);
    padding: 10px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--gresio-ink);
}

.effbox .plate b {
    font-size: 14px;
}

.effbox .plate span {
    font-size: 12px;
    color: var(--gresio-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.effbox:hover {
    text-decoration: none;
    border-color: var(--gresio-blue);
}

.effbox:hover .plate b {
    color: var(--gresio-blue);
}

@media (max-width: 940px) {
    .grid.effetti {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── chip marche (mockup .brand) ── */
.grid.brands {
    grid-template-columns: repeat(6, 1fr);
}

.brand {
    border: 1px solid var(--gresio-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gresio-ink-2);
    text-decoration: none;
}

.brand:hover {
    border-color: var(--gresio-blue);
    color: var(--gresio-blue);
    text-decoration: none;
}

@media (max-width: 940px) {
    .grid.brands {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .grid.brands {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── box ambienti (mockup .axis) ── */
.grid.axes {
    grid-template-columns: repeat(4, 1fr);
}

.axis {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    text-decoration: none;
}

.axis span {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(23, 23, 23, .82);
    color: #fff;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
}

.axis:hover {
    text-decoration: none;
}

.axis:hover span {
    background: var(--gresio-blue);
}

@media (max-width: 940px) {
    .grid.axes {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── banda offerte a piena larghezza, sfondo scuro (mockup .offband) ── */
.offband {
    background: var(--gresio-ink);
    color: #fff;
    padding: 48px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.offband .sec-head h2 {
    color: #fff;
}

.offband .sec-head a {
    color: #d4b26a;
}

.grid.offgrid {
    grid-template-columns: repeat(4, 1fr);
}

.pcard {
    border: 1px solid var(--gresio-border);
    display: block;
    background: #fff;
    color: var(--gresio-ink);
    text-decoration: none;
}

.pcard:hover {
    text-decoration: none;
    border-color: var(--gresio-ink);
}

.pcard .ph {
    aspect-ratio: 4 / 3;
}

.pcard .cbody {
    padding: 12px 14px 14px;
}

.pcard .cbody .klabel {
    display: block;
    margin-bottom: 3px;
}

.pcard h3 {
    font-size: 15px;
    margin: 0 0 6px;
}

.price-da {
    font-size: 13.5px;
    color: var(--gresio-ink-2);
    font-variant-numeric: tabular-nums;
}

.price-da b,
.price-da bdi {
    font-size: 16px;
    color: var(--gresio-accent);
}

.price-da s {
    color: var(--gresio-muted);
    margin-right: 6px;
}

.tagrow {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid var(--gresio-border);
    padding: 2px 7px;
    color: var(--gresio-muted);
}

.tag.stock {
    border-color: var(--gresio-ok);
    color: var(--gresio-ok);
}

.tag.off {
    background: var(--gresio-accent);
    border-color: var(--gresio-accent);
    color: #fff;
}

@media (max-width: 940px) {
    .grid.offgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── banda campioni a piena larghezza, tinta blu (mockup .sampband) ── */
.sampband {
    background: var(--gresio-blue-tint);
    border-top: 1px solid var(--gresio-border);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.sampband .split {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 32px;
    align-items: center;
}

.sampband .ph {
    aspect-ratio: 16 / 9;
}

.steps {
    list-style: none;
    counter-reset: s;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.steps li {
    counter-increment: s;
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--gresio-ink-2);
    align-items: baseline;
}

.steps li::before {
    content: counter(s);
    flex: 0 0 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: var(--gresio-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    align-self: center;
}

@media (max-width: 940px) {
    .sampband .split {
        grid-template-columns: 1fr;
    }
}

/* ── teaser blog (mockup .blog3/.bcard) ── */
.grid.blog3 {
    grid-template-columns: repeat(3, 1fr);
}

.bcard {
    border: 1px solid var(--gresio-border);
    display: block;
    text-decoration: none;
    color: var(--gresio-ink);
}

.bcard:hover {
    text-decoration: none;
    border-color: var(--gresio-blue);
}

.bcard .ph {
    aspect-ratio: 16 / 9;
}

.bcard .bbody {
    padding: 14px 16px 16px;
}

.bcard h3 {
    font-size: 15.5px;
    margin: 6px 0 6px;
}

.bcard p {
    font-size: 13.5px;
    color: var(--gresio-muted);
    margin: 0;
}

.bcard time {
    display: block;
    font-size: 12px;
    color: var(--gresio-muted);
    margin-top: 8px;
}

@media (max-width: 940px) {
    .grid.blog3 {
        grid-template-columns: 1fr;
    }
}

/* ── blocco testo SEO a due colonne (mockup .seo2) ── */
.seo2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.seo2 h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.seo2 p {
    font-size: 14px;
    color: var(--gresio-ink-2);
    max-width: 65ch;
    margin-bottom: 12px;
}

@media (max-width: 940px) {
    .seo2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ARCHIVI PRODOTTO (categorie/tassonomie WooCommerce: pa_effetto, cp_marca,
   product_cat...) — adattamento meccanico del blocco CATEGORIA del mockup v2
   (docs/mockup/mockup-v2.html r.263-296 e r.715-836) ai selettori REALI
   generati dal template di archivio WooCommerce/Storefront (verificato via
   curl sull'ambiente wp-env, non con markup di fantasia):
     .crumbs                         -> .storefront-breadcrumb / .woocommerce-breadcrumb (già stile Storefront, non riscritto qui)
     h1 + .cat-intro                 -> .woocommerce-products-header__title + .term-description (testo ALTA, sopra la griglia)
     .cat-grid                       -> ul.products (loop nativo WooCommerce)
     .pcard                          -> li.product (nessun wrapper <a> unico: img/h2/prezzo/add-to-cart sono fratelli dentro <li>)
     .pcard h3 / .klabel             -> .woocommerce-loop-product__title
     .price-da / prezzo oro          -> .price (già in oro via .cp-prezzo-mq, v. blocco "COMPONENTI SCHEDA PRODOTTO")
     .tag / badge formato             -> nessun badge nativo WooCommerce in loop: predisposto .gresio-badge-formato
                                         per uso futuro (short description / hook dedicato)
   Il testo editoriale BASSA (dopo <!--more-->, hook woocommerce_after_shop_loop
   in functions.php) è stampato in .gresio-testo-categoria-coda, sotto la griglia.
   ========================================================================== */

/* Titolo archivio + testo ALTA (sopra la griglia) */
.woocommerce-products-header__title.page-title {
    font-size: clamp(24px, 3vw, 34px);
}

.term-description {
    max-width: 72ch;
    color: var(--gresio-ink-2);
    font-size: 15px;
    margin: 8px 0 4px;
}

.term-description p:last-child {
    margin-bottom: 0;
}

/* Griglia prodotti — mockup .cat-grid (3 colonne desktop, hairline sulle card) */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

ul.products li.product {
    border: 1px solid var(--gresio-border);
    background: var(--gresio-bg);
    padding: 0 0 14px;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

ul.products li.product:hover {
    border-color: var(--gresio-ink);
}

/* Foto placeholder — quadrata (1:1), coerente col resto del catalogo */
ul.products li.product a.woocommerce-loop-product__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

ul.products li.product a.woocommerce-loop-product__link:hover {
    text-decoration: none;
}

ul.products li.product img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: auto;
}

/* Corpo card: nome prodotto + prezzo €/m² in oro (già .cp-prezzo-mq) */
ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: 700;
    margin: 12px 14px 6px;
    padding: 0;
    color: var(--gresio-ink);
}

ul.products li.product .price {
    display: block;
    margin: 0 14px;
    font-size: 13.5px;
    color: var(--gresio-ink-2);
    font-variant-numeric: tabular-nums;
}

ul.products li.product .button {
    margin: 12px 14px 0;
    align-self: flex-start;
}

/* Badge formato/caratteristiche — predisposto per uso futuro nel loop
   (mockup .tagrow/.tag), non ancora popolato da WooCommerce di default. */
.gresio-badge-formato {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 14px 0;
}

.gresio-badge-formato span {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--gresio-border);
    padding: 2px 7px;
    color: var(--gresio-muted);
}

@media (max-width: 1060px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 460px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    ul.products li.product .woocommerce-loop-product__title {
        font-size: 13.5px;
    }
}

/* Testo editoriale BASSA — coda della description dopo <!--more-->, stampata
   da functions.php via hook woocommerce_after_shop_loop sotto la griglia
   (mockup: blocco "Guida al gres effetto legno", r.838-855). */
.gresio-testo-categoria-coda {
    max-width: 72ch;
    color: var(--gresio-ink-2);
    font-size: 15px;
    margin: 24px 0;
    padding-top: 24px;
    border-top: 1px solid var(--gresio-border);
}

.gresio-testo-categoria-coda p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   BLOG — indice (mockup vista Blog, r.1031-1095) e articolo singolo
   (mockup vista Articolo, r.1098-1204). Il tema non ha ancora template
   index.php/single.php dedicati (fuori scope Task 4: solo functions.php +
   style.css): queste classi replicano 1:1 quelle del mockup e sono pronte
   per essere stampate da un futuro template del blog, e nel frattempo
   utilizzabili come classi HTML dentro il contenuto degli articoli
   (Gutenberg: blocco HTML personalizzato / classe extra sul blocco).
   ========================================================================== */

/* Filtri categoria a "chip" (mockup .chips/.chip) */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    border: 1px solid var(--gresio-border);
    padding: 8px 15px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    color: var(--gresio-ink);
}

.chip:hover {
    border-color: var(--gresio-blue);
    color: var(--gresio-blue);
    text-decoration: none;
}

.chip.on {
    background: var(--gresio-blue);
    border-color: var(--gresio-blue);
    color: #fff;
}

@media (max-width: 600px) {
    .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .chip {
        flex: 0 0 auto;
    }
}

/* Articolo in evidenza (mockup .featured) */
.featured {
    display: grid;
    grid-template-columns: 7fr 5fr;
    border: 1px solid var(--gresio-border);
    margin: 26px 0 32px;
    text-decoration: none;
    color: var(--gresio-ink);
}

.featured:hover {
    text-decoration: none;
    border-color: var(--gresio-blue);
}

.featured .ph {
    min-height: 240px;
}

.featured .fbody {
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.featured h3 {
    font-size: clamp(19px, 2.4vw, 25px);
    margin: 0;
}

.featured p {
    font-size: 14.5px;
    color: var(--gresio-ink-2);
    max-width: 60ch;
    margin: 0;
}

.featured .meta {
    font-size: 12.5px;
    color: var(--gresio-muted);
}

@media (max-width: 940px) {
    .featured {
        grid-template-columns: 1fr;
    }

    .featured .ph {
        min-height: 180px;
    }
}

/* ── ARTICOLO (single post) — mockup .art ── */
.art {
    max-width: 760px;
    margin: 0 auto;
}

.art h1 {
    font-size: clamp(24px, 3.4vw, 36px);
    margin: 6px 0 14px;
}

.art .meta {
    font-size: 13px;
    color: var(--gresio-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    border-bottom: 1px solid var(--gresio-border);
    padding-bottom: 16px;
    margin-bottom: 22px;
}

.art h2 {
    font-size: clamp(19px, 2.4vw, 24px);
    margin: 34px 0 12px;
}

.art .prose {
    max-width: 65ch;
}

.art .prose ul {
    padding-left: 20px;
    margin-bottom: 14px;
}

.art .prose li {
    margin-bottom: 6px;
}

/* Risposta diretta in evidenza (snippet-ready per i motori/AI) — mockup .answer.
   Delineata da fondo blu-tint + bordo pieno nella stessa famiglia (blu = dato
   tecnico), non da un bordo laterale. */
.answer {
    background: var(--gresio-blue-tint);
    border: 1px solid color-mix(in srgb, var(--gresio-blue) 22%, transparent);
    padding: 18px 20px;
    margin-bottom: 26px;
}

.answer p {
    font-size: 15.5px;
    color: var(--gresio-ink);
    max-width: 65ch;
    margin: 0;
}

.answer .klabel {
    display: block;
    margin-bottom: 8px;
}

/* Box definizione tecnica — mockup .defbox, rinominato .gresio-box-definizione
   per uso diretto nel contenuto editoriale (namespace --gresio- del tema). */
.gresio-box-definizione {
    background: color-mix(in srgb, var(--gresio-accent) 6%, var(--gresio-bg));
    border: 1px solid color-mix(in srgb, var(--gresio-accent) 24%, transparent);
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 14px;
    color: var(--gresio-ink-2);
    max-width: 65ch;
}

.gresio-box-definizione b:first-child {
    color: var(--gresio-ink);
}

/* Tabella comparativa dell'articolo — mockup .rtab */
.rtab-wrap {
    overflow-x: auto;
    margin: 18px 0;
}

.rtab th,
.rtab td {
    border: 1px solid var(--gresio-border);
    padding: 10px 14px;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
}

.rtab th {
    background: var(--gresio-muted-bg);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gresio-ink-2);
}

.rtab tr.hl td {
    background: var(--gresio-blue-tint);
}

/* CTA editoriale verso il catalogo — mockup .artcta */
.artcta {
    border: 1px solid var(--gresio-border);
    background: var(--gresio-muted-bg);
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 30px 0;
}

.artcta p {
    font-size: 14.5px;
    max-width: 48ch;
    margin: 0;
}

/* Fonti e note editoriali a fondo articolo — mockup .fonte */
.fonte {
    border-top: 1px solid var(--gresio-border);
    margin-top: 34px;
    padding-top: 16px;
    font-size: 13px;
    color: var(--gresio-muted);
    max-width: 65ch;
}

/* Sommario dell'articolo — mockup .toc */
.toc {
    border: 1px solid var(--gresio-border);
    padding: 14px 18px;
    margin-bottom: 26px;
    font-size: 14px;
}

.toc b {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gresio-muted);
    margin-bottom: 8px;
}

.toc a {
    display: inline-block;
    color: var(--gresio-blue);
    font-weight: 500;
    margin: 2px 14px 2px 0;
    text-decoration: none;
}

.toc a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   COSTI DI SPEDIZIONE — rifinitura pagina (mockup vista Spedizione,
   r.1207-1268). La tabella tariffe reale è generata dal plugin
   (.cp-costi-spedizione, già stilizzata sopra); qui si aggiungono gli
   elementi editoriali di contorno del mockup: nota risalto (.notebox) e
   tabella generica a righe alternate (mockup .shiptab, riusabile anche
   fuori dal plugin per altre tabelle editoriali della pagina).
   ========================================================================== */
.shiptab-wrap {
    overflow-x: auto;
    margin: 20px 0;
}

.shiptab th,
.shiptab td {
    border: 1px solid var(--gresio-border);
    padding: 11px 14px;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
}

.shiptab th {
    background: var(--gresio-muted-bg);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gresio-ink-2);
}

.shiptab td.gratis {
    color: var(--gresio-ok);
    font-weight: 600;
}

.shiptab tbody tr:nth-child(even) td {
    background: #fafafa;
}

/* Nota a risalto (consegna gratuita, avvisi) — mockup .notebox */
.notebox {
    background: var(--gresio-blue-tint);
    border: 1px solid color-mix(in srgb, var(--gresio-blue) 22%, transparent);
    padding: 16px 18px;
    margin: 22px 0;
    font-size: 14.5px;
    color: var(--gresio-ink);
    max-width: 70ch;
}

/* Tabella reale generata dal plugin (.cp-costi-spedizione): righe alternate
   coerenti con .shiptab, senza duplicare i selettori strutturali già
   definiti nel blocco "COSTI DI SPEDIZIONE" sopra. */
.cp-costi-spedizione tbody tr:nth-child(even) td {
    background: #fafafa;
}

/* ==========================================================================
   PAGINA PRODOTTO GRESIO — vista PRODOTTO del mockup v2 (r.880-1028, CSS
   r.298-377) sui selettori WooCommerce/Storefront. Struttura: griglia 6/5
   (galleria+badge | colonna acquisto), sezioni full-width sotto.
   ========================================================================== */

/* Breadcrumb (mockup .crumbs) */
.gresio-prodotto .woocommerce-breadcrumb {
    font-size: 13px;
    color: var(--gresio-muted);
    margin: 18px 0 22px;
}

.gresio-prodotto .woocommerce-breadcrumb a {
    color: var(--gresio-muted);
    text-decoration: none;
}

.gresio-prodotto .woocommerce-breadcrumb a:hover {
    color: var(--gresio-blue);
}

/* Griglia principale (mockup .pgrid 6fr/5fr, gap 40) */
.gresio-prodotto div.product {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 0 40px;
    padding-bottom: 48px;
}

.gresio-prodotto div.product .woocommerce-product-gallery,
.gresio-prodotto div.product .gresio-pbadges {
    grid-column: 1;
    float: none;
    width: 100%;
    margin-bottom: 0;
}

.gresio-prodotto div.product .entry-summary {
    grid-column: 2;
    grid-row: 1 / span 6;
    float: none;
    width: 100%;
    margin: 0;
}

.gresio-prodotto div.product > section,
.gresio-prodotto div.product > .gresio-sezione-prodotto {
    grid-column: 1 / -1;
}

@media (max-width: 940px) {
    .gresio-prodotto div.product {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .gresio-prodotto div.product .entry-summary,
    .gresio-prodotto div.product .woocommerce-product-gallery,
    .gresio-prodotto div.product .gresio-pbadges {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Badge sotto la galleria (mockup .pbadges) */
.gresio-pbadges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.gresio-pbadges .badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid var(--gresio-border);
    padding: 5px 10px;
    background: var(--gresio-muted-bg);
}

/* Colonna acquisto (mockup .buy) */
.gresio-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gresio-accent);
}

.gresio-prodotto .entry-summary .product_title {
    font-size: clamp(22px, 2.6vw, 29px);
    margin: 6px 0 4px;
}

.gresio-brandline {
    font-size: 14px;
    color: var(--gresio-muted);
    margin-bottom: 0;
}

.gresio-brandline a {
    color: var(--gresio-blue);
    font-weight: 600;
    text-decoration: none;
}

/* Formati a schede (mockup .fmt-row/.fmt) */
.cp-formati {
    margin-top: 22px;
}

.cp-formati-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gresio-muted);
    margin-bottom: 0;
}

.cp-formati-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.cp-fmt {
    display: block;
    border: 1px solid var(--gresio-border);
    padding: 10px 14px;
    background: var(--gresio-bg);
    text-align: left;
    min-width: 104px;
    text-decoration: none;
    color: var(--gresio-ink);
}

.cp-fmt:hover {
    border-color: var(--gresio-ink);
    text-decoration: none;
    color: var(--gresio-ink);
}

.cp-fmt-f1 {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.cp-fmt-f2 {
    display: block;
    font-size: 12px;
    color: var(--gresio-muted);
    font-variant-numeric: tabular-nums;
}

.cp-fmt-on {
    border-color: var(--gresio-ink);
    box-shadow: inset 0 0 0 1px var(--gresio-ink);
}

.cp-fmt-on .cp-fmt-f2 {
    color: var(--gresio-accent);
    font-weight: 600;
}

@media (max-width: 940px) {
    .cp-formati-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .cp-fmt {
        flex: 0 0 auto;
    }
}

/* Box prezzo (mockup .pricebox/.iva/.bigprice/.boxprice) */
.gresio-pricebox {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--gresio-border);
    background: var(--gresio-muted-bg);
}

.gresio-iva {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gresio-ok);
}

.gresio-bigprice {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--gresio-ink);
}

.gresio-bigprice .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.gresio-bigprice small {
    font-size: 16px;
    font-weight: 600;
    color: var(--gresio-ink-2);
    letter-spacing: 0;
}

.gresio-boxprice {
    font-size: 14px;
    color: var(--gresio-ink-2);
    margin: 8px 0 0;
    font-variant-numeric: tabular-nums;
}

/* La tabella scaglioni del plugin cade dentro il pricebox: celle bianche,
   cella attiva nera con etichetta "attivo" oro (mockup .tiers td.on). */
.gresio-pricebox .cp-tabella-sconti.cp-orizzontale td.cp-scaglione-attivo {
    background: var(--gresio-ink);
    border-color: var(--gresio-ink);
}

.gresio-pricebox .cp-tabella-sconti.cp-orizzontale td.cp-scaglione-attivo .cp-prezzo::after {
    content: 'attivo';
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d19a2f;
}

/* Form acquisto = blocco .calc del mockup */
.gresio-prodotto form.cart {
    margin-top: 20px;
    border: 1px solid var(--gresio-border);
    padding: 20px;
    background: var(--gresio-bg);
}

.gresio-prodotto form.cart .quantity,
.gresio-prodotto form.cart input.qty {
    /* La quantità la governa il calcolatore (campo Scatole, sincronizzato). */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0;
}

#cp-acquisto {
    margin-top: 0;
    border: 0;
    padding: 0;
}

.cp-acquisto-titolo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gresio-muted);
    margin: 0 0 14px;
}

.cp-acquisto-campi {
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
}

.cp-eq {
    font-size: 18px;
    color: var(--gresio-muted);
    padding-bottom: 14px;
}

@media (max-width: 480px) {
    .cp-acquisto-campi {
        grid-template-columns: 1fr;
    }

    .cp-eq {
        display: none;
    }
}

.cp-totale-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--gresio-border);
    margin-top: 16px;
    padding-top: 14px;
    min-height: 56px;
}

.cp-totale-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gresio-muted);
}

#cp-totale {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

#cp-totale small {
    font-size: 13px;
    font-weight: 500;
    color: var(--gresio-muted);
}

/* CTA doppia (mockup .cta2) */
.gresio-prodotto form.cart .single_add_to_cart_button,
.gresio-preventivo {
    width: 100%;
    text-align: center;
    padding: 13px 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gresio-prodotto form.cart {
    display: block;
}

.gresio-cta2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.gresio-prodotto form.cart .single_add_to_cart_button {
    background: var(--gresio-accent);
    border: 1px solid var(--gresio-accent);
    color: var(--gresio-accent-ink);
}

.gresio-prodotto form.cart .single_add_to_cart_button:hover {
    background: #8a5406;
}

.gresio-btn-line,
.gresio-btn-line:visited {
    background: transparent !important;
    border: 1px solid var(--gresio-ink) !important;
    color: var(--gresio-ink) !important;
}

.gresio-btn-line:hover {
    background: var(--gresio-muted-bg) !important;
}

@media (max-width: 520px) {
    .gresio-cta2 {
        grid-template-columns: 1fr;
    }
}

/* Consegna, campione, tono */
.gresio-shipline {
    font-size: 13px;
    color: var(--gresio-ink-2);
    margin: 14px 0 0;
}

.gresio-shipline a {
    color: var(--gresio-blue);
    font-weight: 600;
    text-decoration: none;
}

.gresio-sample {
    margin-top: 14px;
    border: 1px dashed var(--gresio-border);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}

.gresio-sample .button {
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.gresio-tono {
    margin-top: 14px;
    font-size: 13px;
    color: var(--gresio-ink-2);
    background: color-mix(in srgb, var(--gresio-accent) 6%, var(--gresio-bg));
    border: 1px solid color-mix(in srgb, var(--gresio-accent) 24%, transparent);
    padding: 12px 14px;
}

/* Sezioni full-width (scheda tecnica, altri colori, FAQ) */
.gresio-sezione-prodotto {
    padding: 40px 0 12px;
    border-top: 1px solid var(--gresio-border);
    margin-top: 40px;
}

.gresio-sezione-prodotto h2 {
    margin-bottom: 20px;
}

.gresio-tech-wrap {
    overflow-x: auto;
}

.gresio-tech th {
    width: 38%;
}

.gresio-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.gresio-sec-head a {
    font-size: 13px;
    font-weight: 600;
    color: var(--gresio-blue);
    white-space: nowrap;
    text-decoration: none;
}

.gresio-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.gresio-swatch {
    display: block;
    text-decoration: none;
    color: var(--gresio-ink);
}

.gresio-swatch img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    display: block;
}

.gresio-swatch p {
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 0;
}

.gresio-swatch span {
    font-size: 12px;
    color: var(--gresio-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .gresio-swatches {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* FAQ (mockup details.faq) */
.gresio-faq details.faq {
    border: 1px solid var(--gresio-border);
    border-bottom: 0;
}

.gresio-faq details.faq:last-of-type {
    border-bottom: 1px solid var(--gresio-border);
}

.gresio-faq details.faq summary {
    cursor: pointer;
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 600;
    list-style: none;
    position: relative;
}

.gresio-faq details.faq summary::-webkit-details-marker {
    display: none;
}

.gresio-faq details.faq summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 20px;
    color: var(--gresio-blue);
}

.gresio-faq details.faq[open] summary::after {
    content: '–';
}

.gresio-faq details.faq p {
    padding: 0 18px 16px;
    font-size: 14px;
    color: var(--gresio-ink-2);
    max-width: 75ch;
}

/* CTA sticky mobile (mockup .sticky-cta) */
.gresio-sticky-cta {
    display: none;
}

@media (max-width: 940px) {
    .gresio-sticky-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        background: #fff;
        border-top: 1px solid var(--gresio-border);
        padding: 10px 16px;
        gap: 12px;
        align-items: center;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }

    .gresio-sticky-cta .st {
        flex: 1;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }

    .gresio-sticky-cta .st b {
        font-size: 18px;
    }

    .gresio-sticky-cta .st span {
        display: block;
        font-size: 11px;
        color: var(--gresio-muted);
    }

    .gresio-sticky-cta .button {
        padding: 12px 18px;
        font-size: 12px;
        background: var(--gresio-accent);
        border-color: var(--gresio-accent);
        color: var(--gresio-accent-ink);
    }

    .gresio-prodotto .site-content {
        padding-bottom: 84px;
    }
}

/* --- Rifiniture pagina prodotto (post-verifica browser) ------------------- */

/* Galleria e colonna acquisto a tutta cella: Storefront (con
   .storefront-full-width-content) impone width 39%/56% + float con
   specificità più alta dei selettori base — servono selettori più forti. */
body.gresio-prodotto.single-product div.product .woocommerce-product-gallery,
body.gresio-prodotto.single-product div.product .woocommerce-product-gallery__wrapper,
body.gresio-prodotto.single-product div.product .woocommerce-product-gallery__image {
    width: 100%;
    float: none;
    margin-bottom: 0;
}

body.gresio-prodotto.single-product div.product .entry-summary {
    width: 100%;
    float: none;
    margin: 0;
}

.gresio-prodotto .woocommerce-product-gallery img {
    width: 100%;
    height: auto;
}

/* Componenti Storefront assenti nel mockup: paginazione prodotto laterale,
   barra sticky di Storefront (ne abbiamo una nostra), footer bar mobile. */
.storefront-product-pagination,
.storefront-sticky-add-to-cart,
.storefront-handheld-footer-bar {
    display: none !important;
}

body.storefront-handheld-footer-bar-active .site-footer,
body.footer-bar-active {
    padding-bottom: 0;
}

/* Bottoni CTA: a colonna stretta vanno a capo alla parola, mai a metà. */
.gresio-cta2 .button {
    padding-left: 10px;
    padding-right: 10px;
    overflow-wrap: normal;
    word-break: keep-all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-totale-label {
    white-space: nowrap;
}

/* Breadcrumb come nel mockup: separatore "/" e niente icona casa. */
.gresio-prodotto .woocommerce-breadcrumb a::before,
.gresio-prodotto .woocommerce-breadcrumb i {
    display: none !important;
}

/* ==========================================================================
   FOOTER GRESIO — mockup v2 r.251-261 / r.1270-1297.
   ========================================================================== */
.site-footer {
    background: var(--gresio-ink);
    color: #d4d4d4;
    margin-top: 56px;
    padding: 48px 0 32px;
    font-size: 14px;
}

.gresio-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}

.gresio-footer-grid > div {
    min-width: 0;
}

.gresio-logo-footer {
    color: #fff;
    margin: 0;
}

.gresio-footer-claim {
    margin-top: 12px;
    max-width: 36ch;
    font-size: 13px;
    color: #cfcfcf;
}

.gresio-newsl {
    display: flex;
    margin-top: 12px;
    max-width: 320px;
}

.gresio-newsl input[type='email'] {
    flex: 1;
    width: 0;
    min-width: 0;
    border: 1px solid #444;
    background: #222;
    color: #fff;
    padding: 9px 12px;
    font-size: 13px;
    box-shadow: none;
}

.gresio-newsl button {
    border: 0;
    border-radius: 0;
    background: var(--gresio-accent);
    color: #fff;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
}

.site-footer h4 {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.gresio-footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gresio-footer-grid li {
    margin-bottom: 8px;
}

/* Selettore allineato a quello di Storefront (:not(.button)...) così il child
   vince nella cascata: senza questo i link footer restano #333 (illeggibili
   sul fondo scuro). */
.site-footer a,
.site-footer a:visited,
.site-footer a:not(.button):not(.components-button),
.site-footer .gresio-footer-grid a {
    color: #e0e0e0;
    text-decoration: none;
}

.site-footer a:not(.button):not(.components-button):hover,
.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.gresio-footer-legal {
    border-top: 1px solid #3a3a3a;
    margin-top: 36px;
    padding-top: 20px;
    font-size: 12px;
    color: #c8c8c8;
}

@media (max-width: 940px) {
    .gresio-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   ARCHIVI GRESIO — layout vista CATEGORIA (mockup r.263-296): filtri a
   sinistra (280px) + contenuto; riga strumenti; paginazione.
   Nel markup Storefront la sidebar (hook storefront_sidebar) segue #primary:
   la griglia CSS la riporta a sinistra.
   ========================================================================== */
.gresio-archivio .site-content .col-full {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 36px;
    align-items: start;
}

.gresio-archivio .site-content .col-full > #primary {
    grid-column: 2;
    grid-row: 1;
    float: none;
    width: 100%;
    margin: 0;
}

.gresio-cat-side {
    grid-column: 1;
    grid-row: 1;
    border: 1px solid var(--gresio-border);
    padding: 18px 20px 8px;
    position: sticky;
    top: 20px;
}

.gresio-cat-side-titolo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.gresio-fgroup {
    border-top: 1px solid var(--gresio-border);
    padding: 14px 0;
    margin-top: 12px;
}

.gresio-fgroup:first-of-type {
    border-top: 0;
    margin-top: 0;
}

.gresio-fgroup h3 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gresio-muted);
    margin: 0 0 10px;
}

.gresio-fitem {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--gresio-ink-2);
    text-decoration: none;
}

.gresio-fitem:hover {
    color: var(--gresio-blue);
    text-decoration: none;
}

.gresio-fbox {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border: 1px solid var(--gresio-border);
    background: var(--gresio-bg);
}

.gresio-fitem-on {
    color: var(--gresio-ink);
    font-weight: 600;
}

.gresio-fitem-on .gresio-fbox {
    background: var(--gresio-blue);
    border-color: var(--gresio-blue);
}

.gresio-fcount {
    color: var(--gresio-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Riga strumenti (mockup .cat-tools): conteggio + ordinamento */
.gresio-archivio .woocommerce-result-count {
    font-size: 13.5px;
    color: var(--gresio-muted);
    font-variant-numeric: tabular-nums;
    float: left;
    margin: 6px 0 16px;
}

.gresio-archivio .woocommerce-ordering {
    float: right;
    margin: 0 0 16px;
}

.gresio-archivio .woocommerce-ordering select {
    border: 1px solid var(--gresio-border);
    padding: 8px 10px;
    font-size: 13px;
    background: var(--gresio-bg);
}

/* Paginazione (mockup .pager) */
.gresio-archivio .woocommerce-pagination {
    text-align: center;
    margin-top: 32px;
}

.gresio-archivio .woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    gap: 6px;
    border: 0;
    margin: 0;
}

.gresio-archivio .woocommerce-pagination ul.page-numbers li {
    border: 0;
}

.gresio-archivio .woocommerce-pagination .page-numbers li .page-numbers {
    min-width: 38px;
    line-height: 36px;
    padding: 0 6px;
    display: block;
    text-align: center;
    border: 1px solid var(--gresio-border);
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gresio-ink);
    background: var(--gresio-bg);
}

.gresio-archivio .woocommerce-pagination .page-numbers li .page-numbers.current {
    background: var(--gresio-blue);
    border-color: var(--gresio-blue);
    color: #fff;
}

.gresio-archivio .woocommerce-pagination .page-numbers li a.page-numbers:hover {
    border-color: var(--gresio-blue);
    color: var(--gresio-blue);
    text-decoration: none;
}

@media (max-width: 940px) {
    .gresio-archivio .site-content .col-full {
        grid-template-columns: 1fr;
    }

    .gresio-archivio .site-content .col-full > #primary,
    .gresio-cat-side {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }
}

/* Le card riempiono la cella: Storefront impone width ~30% + float sulle
   li.product (griglia rotta senza questi override). */
.gresio-archivio ul.products li.product,
.gresio-archivio ul.products li.product.first,
.gresio-archivio ul.products li.product.last {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Nel mockup la paginazione sta solo in fondo: via quella sopra la griglia
   (primo blocco sorting), resta quella nel blocco in fondo. */
.gresio-archivio .storefront-sorting:first-of-type .woocommerce-pagination {
    display: none;
}

/* Il clearfix ::before/::after di WooCommerce diventerebbe una cella vuota
   nella griglia: eliminato. */
.gresio-archivio ul.products::before,
.gresio-archivio ul.products::after {
    content: none;
    display: none;
}

/* ==========================================================================
   ARTICOLO SINGOLO — colonna centrale 760px come il mockup (vista ARTICOLO).
   ========================================================================== */
.gresio-articolo #primary {
    float: none;
    width: 100%;
    margin: 0;
}

.gresio-articolo article.post {
    max-width: 760px;
    margin: 0 auto;
}

.gresio-articolo .entry-title {
    font-size: clamp(24px, 3.4vw, 36px);
    margin: 6px 0 10px;
}

.gresio-art-meta {
    font-size: 13px;
    color: var(--gresio-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    border-bottom: 1px solid var(--gresio-border);
    padding-bottom: 16px;
    margin-bottom: 22px;
}

.gresio-art-meta a {
    color: var(--gresio-blue);
    font-weight: 600;
    text-decoration: none;
}

/* Immagine in evidenza: piena colonna, proporzione orizzontale */
.gresio-articolo article.post .post-thumbnail img,
.gresio-articolo article.post img.wp-post-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    margin-bottom: 22px;
}

/* Corpo articolo */
.gresio-articolo .entry-content h2 {
    font-size: clamp(19px, 2.4vw, 24px);
    margin: 34px 0 12px;
}

.gresio-articolo .entry-content p,
.gresio-articolo .entry-content li {
    max-width: 65ch;
    color: var(--gresio-ink-2);
    font-size: 15.5px;
}

.gresio-articolo .entry-content ul,
.gresio-articolo .entry-content ol {
    padding-left: 20px;
    margin-bottom: 14px;
}

.gresio-articolo .entry-content li {
    margin-bottom: 6px;
}

.gresio-articolo .entry-content a {
    color: var(--gresio-blue);
    font-weight: 600;
}

/* Infografiche SVG inline */
.gresio-infografica {
    margin: 22px 0;
    border: 1px solid var(--gresio-border);
    padding: 18px;
    background: var(--gresio-bg);
}

.gresio-infografica svg {
    display: block;
    width: 100%;
    height: auto;
}

.gresio-infografica figcaption {
    font-size: 12.5px;
    color: var(--gresio-muted);
    margin-top: 10px;
}

/* Meta/nav di Storefront non previsti dal mockup */
.gresio-articolo .entry-taxonomy,
.gresio-articolo .post-navigation,
.gresio-articolo .storefront-post-nav,
.gresio-articolo #comments {
    display: none;
}

/* Indice blog: griglia card (mockup .blog3/.bcard sui selettori nativi) */
.gresio-blog-indice #primary {
    float: none;
    width: 100%;
    margin: 0;
}

.gresio-blog-indice .site-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.gresio-blog-indice .site-main > *:not(article) {
    grid-column: 1 / -1;
}

.gresio-blog-indice article.post {
    border: 1px solid var(--gresio-border);
    padding: 0 0 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.gresio-blog-indice article.post:hover {
    border-color: var(--gresio-blue);
}

.gresio-blog-indice article.post img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 0 4px;
}

.gresio-blog-indice article.post .entry-title {
    font-size: 15.5px;
    margin: 10px 16px 6px;
}

.gresio-blog-indice article.post .entry-title a {
    color: var(--gresio-ink);
    text-decoration: none;
}

.gresio-blog-indice article.post .entry-content,
.gresio-blog-indice article.post .entry-summary {
    font-size: 13.5px;
    color: var(--gresio-muted);
    margin: 0 16px;
}

.gresio-blog-indice article.post .entry-content p,
.gresio-blog-indice article.post .entry-summary p {
    margin-bottom: 8px;
}

.gresio-blog-indice article.post .posted-on,
.gresio-blog-indice article.post .entry-meta,
.gresio-blog-indice article.post .author,
.gresio-blog-indice article.post .post-date {
    font-size: 12px;
    color: var(--gresio-muted);
    margin: 0 16px;
}

.gresio-blog-indice article.post .more-link {
    margin: 8px 16px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--gresio-blue);
    text-decoration: none;
}

@media (max-width: 940px) {
    .gresio-blog-indice .site-main {
        grid-template-columns: 1fr;
    }
}

/* La riga meta nativa di Storefront duplica la nostra (gresio-art-meta) */
.gresio-articolo .entry-meta,
.gresio-articolo .posted-on,
.gresio-articolo .post-author,
.gresio-articolo .post-comments,
.gresio-articolo .byline,
.gresio-blog-indice .posted-on,
.gresio-blog-indice .post-author,
.gresio-blog-indice .entry-meta,
.gresio-blog-indice .post-comments,
.gresio-blog-indice .byline {
    display: none;
}

/* Chips categorie sopra la griglia blog */
.gresio-blog-chips {
    margin: 4px 0 20px;
}

.chip.on {
    background: var(--gresio-blue);
    border-color: var(--gresio-blue);
    color: #fff;
}

/* Le card dell'indice: titolo pagina blog nascosto se ridondante, hero compatta */
.gresio-blog-indice .page-header {
    grid-column: 1 / -1;
}

/* Scheda tecnica: valore del prodotto in evidenza, spiegazione secondaria sotto
   (così è chiaro che il primo dato — es. "9 mm" — è quello del prodotto). */
.gresio-tech-valore {
    display: block;
    font-weight: 600;
    color: var(--gresio-ink);
}

.gresio-spiega {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--gresio-muted);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--gresio-border);
    max-width: 62ch;
}

.gresio-spiega a {
    color: var(--gresio-blue);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Badge-link: stesso aspetto dei badge, con feedback hover/focus */
a.badge,
a.badge:visited {
    color: var(--gresio-ink);
    text-decoration: none;
}

a.badge:hover,
a.badge:focus-visible {
    border-color: var(--gresio-blue);
    color: var(--gresio-blue);
    text-decoration: none;
}

/* ==========================================================================
   PAGINA 404 GRESIO — sostituisce il dump di widget del 404 di Storefront.
   ========================================================================== */
.gresio-404 {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 0 64px;
    text-align: center;
}

.gresio-404-titolo {
    font-size: clamp(26px, 4vw, 40px);
    margin: 0 0 10px;
}

.gresio-404-sub {
    color: var(--gresio-ink-2);
    font-size: 16px;
    max-width: 52ch;
    margin: 0 auto 28px;
}

.gresio-404-search {
    display: flex;
    max-width: 460px;
    margin: 0 auto 28px;
    border: 1px solid var(--gresio-border);
}

.gresio-404-search input[type='search'] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: var(--gresio-bg);
    padding: 11px 14px;
    font-size: 14px;
    box-shadow: none;
}

.gresio-404-search input[type='search']:focus {
    outline: 2px solid var(--gresio-blue);
    outline-offset: -2px;
}

.gresio-404-search button {
    border: 0;
    border-radius: 0;
    background: var(--gresio-ink);
    color: #fff;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.gresio-404-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
}

.gresio-404-link a {
    font-size: 14px;
    font-weight: 600;
    color: var(--gresio-blue);
    text-decoration: none;
}

.gresio-404-link a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   BANNER COOKIE — self-hosted (js/gresio-cookie.js). Barra in basso + pannello
   preferenze come dialog centrale con velo.
   ========================================================================== */
.gresio-cookie[hidden] {
    display: none;
}

.gresio-cookie {
    position: fixed;
    z-index: 200;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gresio-bg);
    border-top: 3px solid var(--gresio-ink);
    box-shadow: 0 -8px 30px rgba(23, 23, 23, 0.12);
}

.gresio-cookie-inner {
    max-width: var(--gresio-maxw);
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.gresio-cookie-text {
    margin: 0;
    flex: 1 1 320px;
    font-size: 14px;
    color: var(--gresio-ink-2);
    line-height: 1.5;
}

.gresio-cookie-text a {
    color: var(--gresio-blue);
    font-weight: 600;
}

.gresio-cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gr-ck-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    cursor: pointer;
    border: 1px solid var(--gresio-ink);
    background: transparent;
    color: var(--gresio-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease;
}

.gr-ck-btn-line:hover {
    background: var(--gresio-muted-bg);
}

.gr-ck-btn-solid {
    background: var(--gresio-ink);
    color: #fff;
}

.gr-ck-btn-solid:hover {
    background: #000;
}

.gr-ck-btn:focus-visible {
    outline: 2px solid var(--gresio-blue);
    outline-offset: 2px;
}

/* Pannello preferenze: dialog centrale su velo scuro. */
.gresio-cookie-panel {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(23, 23, 23, 0.45);
    border-top: 0;
}

.gresio-cookie-panel .gresio-cookie-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 520px;
    padding: 28px;
    background: var(--gresio-bg);
    border: 1px solid var(--gresio-border);
    box-shadow: 0 20px 60px rgba(23, 23, 23, 0.3);
}

.gresio-cookie-title {
    margin: 0;
    font-size: 20px;
}

.gresio-cookie-cats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gresio-cookie-cats li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--gresio-border);
}

.gr-ck-cat strong {
    display: block;
    font-size: 14px;
}

.gr-ck-cat span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--gresio-muted);
}

.gr-ck-always {
    font-size: 12px;
    color: var(--gresio-muted);
    white-space: nowrap;
}

/* Toggle switch */
.gr-ck-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
}

.gr-ck-switch input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.gr-ck-slider {
    position: absolute;
    inset: 0;
    background: #cfcfcf;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.gr-ck-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.gr-ck-switch input:checked + .gr-ck-slider {
    background: var(--gresio-blue);
}

.gr-ck-switch input:checked + .gr-ck-slider::before {
    transform: translateX(20px);
}

.gr-ck-switch input:focus-visible + .gr-ck-slider {
    outline: 2px solid var(--gresio-blue);
    outline-offset: 2px;
}

/* Link "Preferenze cookie" nel footer legale */
.gresio-cookie-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: #c8c8c8;
    text-decoration: underline;
    cursor: pointer;
}

.gresio-cookie-link:hover {
    color: #fff;
}

@media (max-width: 600px) {
    .gresio-cookie-inner {
        padding: 14px 16px;
        gap: 12px;
    }
    .gresio-cookie-actions {
        width: 100%;
    }
    .gr-ck-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ==========================================================================
   RECENSIONI PRODOTTO — sezione WooCommerce reintegrata nel template custom.
   Contenitore allineato alla larghezza Gresio; il form nativo resta funzionale.
   ========================================================================== */
.gresio-recensioni {
    padding: 44px 0;
    border-top: 1px solid var(--gresio-border);
}

.gresio-recensioni .wrap {
    max-width: var(--gresio-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.gresio-recensioni #reviews {
    max-width: 760px;
}

.gresio-recensioni .woocommerce-Reviews-title,
.gresio-recensioni h2 {
    font-size: clamp(21px, 2.8vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 18px;
}

.gresio-recensioni .comment-form-rating label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.gresio-recensioni .comment-form input[type="text"],
.gresio-recensioni .comment-form input[type="email"],
.gresio-recensioni .comment-form textarea {
    border: 1px solid var(--gresio-border);
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    width: 100%;
    max-width: 520px;
    box-shadow: none;
}

.gresio-recensioni .comment-form .submit,
.gresio-recensioni #respond .form-submit input {
    background: var(--gresio-accent);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.gresio-recensioni .comment-form .submit:hover,
.gresio-recensioni #respond .form-submit input:hover {
    background: var(--gresio-accent-hover);
}

/* ==========================================================================
   RECENSIONI DEL NEGOZIO — stelle, card in home, selettore voto nel form.
   ========================================================================== */
.gresio-stelle {
    display: inline-flex;
    gap: 1px;
    color: #d4d4d4;
    font-size: 15px;
    line-height: 1;
}

.gresio-stella.on {
    color: var(--gresio-accent);
}

/* Sezione home "Cosa dicono i clienti" */
.gresio-home-recensioni .gresio-rec-media {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--gresio-ink-2);
}

.gresio-home-recensioni .gresio-rec-media strong {
    font-size: 16px;
}

.gresio-rec-grid {
    grid-template-columns: repeat(3, 1fr);
}

.gresio-rec-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--gresio-border);
}

.gresio-rec-card blockquote {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--gresio-ink);
}

.gresio-rec-card figcaption {
    font-size: 13px;
    font-weight: 600;
    color: var(--gresio-muted);
}

@media (max-width: 780px) {
    .gresio-rec-grid {
        grid-template-columns: 1fr;
    }
}

/* Selettore voto nel form (stelle cliccabili). Ordine markup 5→1 + row-reverse:
   così :checked ~ label colora le stelle fino a quella scelta. */
.gresio-voto-input {
    margin-bottom: 6px;
}

.gresio-voto-input > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.gresio-stelle-scelta {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}

.gresio-stelle-scelta input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.gresio-stelle-scelta label {
    font-size: 28px;
    line-height: 1;
    color: #d4d4d4;
    cursor: pointer;
    transition: color 0.12s ease;
}

.gresio-stelle-scelta label:hover,
.gresio-stelle-scelta label:hover ~ label,
.gresio-stelle-scelta input:checked ~ label {
    color: var(--gresio-accent);
}

.gresio-stelle-scelta input:focus-visible + label {
    outline: 2px solid var(--gresio-blue);
    outline-offset: 2px;
}