/* Gresio — prodotto. Vestito della fase restyling; i token sono in style.css (:root). */

/* Riferimento: design_handoff_gresio_restyling/Pagina Prodotto.dc.html
   (desktop) e il frame "Mobile Prodotto" di Versioni Mobile.dc.html.
   Qui c'è SOLO la veste: struttura e calcoli restano dove sono sempre stati
   (inc/prodotto-gresio.php per il tema, plugin core-piastrelle per formati,
   caselle-fascia e calcolatore).

   Nota sul bianco: le card del mockup sono su fondo bianco puro, che oggi non
   è un token della palette. Si usa var(--gresio-superficie, var(--gresio-superficie)): se il token
   verrà aggiunto in style.css le card lo prendono da sole, senza toccare
   questo file (v. richieste_integrazione del report). */

/* --------------------------------------------------------------------------
   1. Impianto della pagina
   -------------------------------------------------------------------------- */

.gresio-prodotto .woocommerce-breadcrumb {
    font-size: 13.5px;
    margin: 20px 0 8px;
}

/* Mockup: galleria elastica + colonna acquisto fissa a 520px. */
.gresio-prodotto div.product {
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 0 56px;
    padding-bottom: 56px;
}

/* Badge "−38%": fondo salvia, testo sabbia (mai un badge di disponibilità). */
.gresio-prodotto div.product > .onsale {
    top: 18px;
    left: 18px;
    padding: 6px 13px;
    background: var(--gresio-ink);
    color: var(--gresio-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: none;
}

/* Striscia note e banner stanno nella colonna della galleria. */
.gresio-prodotto div.product .gresio-p-note,
.gresio-prodotto div.product .gresio-p-banners {
    grid-column: 1;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Galleria
   -------------------------------------------------------------------------- */

/* Miniature a cinque colonne come nel mockup. La foto grande NON viene
   ritagliata a 4:3: è la foto del materiale, tagliarla è un danno. */
.gresio-prodotto .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.gresio-prodotto .flex-control-thumbs li {
    margin: 0;
    width: 100%;
    float: none;
}

.gresio-prodotto .flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    opacity: 1;
    cursor: pointer;
}

.gresio-prodotto .flex-control-thumbs img.flex-active,
.gresio-prodotto .flex-control-thumbs img:hover {
    outline: 2px solid var(--gresio-ink);
    outline-offset: -2px;
}

.gresio-p-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 24px;
    padding: 18px 24px;
    background: var(--gresio-muted-bg);
    font-size: 13.5px;
    color: var(--gresio-ink-2);
}

.gresio-p-note span::before {
    content: '\2713';
    margin-right: 8px;
    color: var(--gresio-ink);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   3. Banner campione e miglior prezzo garantito
   -------------------------------------------------------------------------- */

.gresio-p-banners {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.gresio-p-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--gresio-blue-tint);
}

.gresio-p-banner p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gresio-ink-2);
}

.gresio-p-banner strong {
    color: var(--gresio-ink);
}

.gresio-p-banner a {
    color: var(--gresio-blue);
    font-weight: 700;
    white-space: nowrap;
}

.gresio-p-banner-icona {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--gresio-ink);
    color: var(--gresio-accent);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gresio-p-banner-mpg .gresio-p-banner-icona {
    background: var(--gresio-blue-dark);
    color: var(--gresio-scuro-testo);
}

/* --------------------------------------------------------------------------
   4. Colonna acquisto — testa
   -------------------------------------------------------------------------- */

.gresio-prodotto .entry-summary .gresio-kicker {
    display: block;
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gresio-muted);
}

.gresio-kicker a {
    color: var(--gresio-blue);
    font-weight: 700;
}

.gresio-prodotto .entry-summary .product_title {
    font-size: clamp(21px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.gresio-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.gresio-chip {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid var(--gresio-input-border);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gresio-ink-2);
    text-decoration: none;
}

a.gresio-chip:hover {
    border-color: var(--gresio-ink);
    color: var(--gresio-ink);
}

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

.gresio-voto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gresio-muted);
}

.gresio-voto strong {
    color: var(--gresio-ink);
}

.gresio-voto .star-rating {
    color: var(--gresio-blue-dark);
    float: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. Prezzo
   -------------------------------------------------------------------------- */

.gresio-prezzo {
    margin-bottom: 22px;
}

.gresio-prezzo-riga {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

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

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

.gresio-prezzo-unita {
    font-size: 16px;
    color: var(--gresio-muted);
}

.gresio-prodotto .gresio-oldprice {
    font-size: 16px;
    color: var(--gresio-barrato);
    font-variant-numeric: tabular-nums;
}

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

/* --------------------------------------------------------------------------
   6. Colore della collezione e versione interno/esterno
   -------------------------------------------------------------------------- */

.gresio-opzione {
    margin-bottom: 22px;
}

.gresio-opzione-label {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gresio-ink);
}

.gresio-opzione-label span {
    font-weight: 600;
    color: var(--gresio-muted);
}

.gresio-swatch-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gresio-swatch {
    display: block;
    line-height: 0;
}

.gresio-swatch img {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.gresio-swatch-on {
    outline: 2px solid var(--gresio-ink);
    outline-offset: 2px;
}

.gresio-swatch:hover {
    outline: 2px solid var(--gresio-blue-dark);
    outline-offset: 2px;
}

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

.gresio-versione {
    display: block;
    padding: 11px 19px;
    border: 1px solid var(--gresio-input-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--gresio-ink);
    text-decoration: none;
}

.gresio-versione span {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gresio-muted);
    font-variant-numeric: tabular-nums;
}

.gresio-versione-on {
    padding: 10px 18px;
    border: 2px solid var(--gresio-ink);
}

a.gresio-versione:hover {
    border-color: var(--gresio-ink);
}

/* --------------------------------------------------------------------------
   7. Caselle-fascia (scaglioni reali della marca) e calcolatore
   -------------------------------------------------------------------------- */

.gresio-fasce {
    margin-bottom: 14px;
    padding: 20px 22px;
    border: 1px solid var(--gresio-input-border);
    background: var(--gresio-superficie, var(--gresio-superficie));
}

.gresio-fasce-titolo {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gresio-ink);
}

/* Le caselle sono le celle della tabella sconti del plugin: stessi numeri
   della marca del prodotto, solo vestiti a riquadri affiancati. */
.gresio-fasce .cp-tabella-sconti.cp-orizzontale,
.gresio-fasce .cp-tabella-sconti.cp-orizzontale tbody {
    display: block;
    width: 100%;
    margin: 0;
}

.gresio-fasce .cp-tabella-sconti.cp-orizzontale tr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gresio-fasce .cp-tabella-sconti.cp-orizzontale td {
    flex: 1 1 92px;
    min-width: 0;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--gresio-input-border);
    text-align: left;
}

.gresio-fasce .cp-tabella-sconti.cp-orizzontale .cp-soglia {
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.gresio-fasce .cp-tabella-sconti.cp-orizzontale .cp-prezzo {
    font-size: 15px;
    font-weight: 800;
    color: var(--gresio-ink);
}

.gresio-fasce .cp-tabella-sconti.cp-orizzontale td.cp-scaglione-attivo {
    padding: 9px 11px;
    border: 2px solid var(--gresio-ink);
    background: var(--gresio-blue-tint);
    box-shadow: none;
}

.gresio-fasce-nota {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gresio-muted);
}

.gresio-fasce-nota[hidden] {
    display: none;
}

/* Il form di acquisto è la seconda card: calcolatore + azioni. */
.gresio-prodotto form.cart {
    margin-top: 0;
    padding: 20px 22px;
    border: 1px solid var(--gresio-input-border);
    background: var(--gresio-superficie, var(--gresio-superficie));
}

.cp-acquisto-titolo {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gresio-ink);
}

.gresio-prodotto .cp-totale-row {
    align-items: center;
    margin-top: 14px;
    padding: 14px 16px;
    border-top: 0;
    background: var(--gresio-muted-bg);
    min-height: 0;
}

.gresio-prodotto #cp-totale {
    font-size: 22px;
    font-weight: 800;
}

.gresio-prodotto .cp-totale-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--gresio-ink-2);
}

/* Riga verde: compare solo quando lo sconto quantità è davvero scattato
   (la riempie lo script del calcolatore coi valori che ha già calcolato). */
.gresio-risparmio {
    margin: 10px 0 0;
    padding: 10px 14px;
    background: var(--gresio-ok-bg);
    color: var(--gresio-ok);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.gresio-risparmio[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   8. Azioni: carrello (unica primaria), preventivo, pagamenti, contatti
   -------------------------------------------------------------------------- */

.gresio-cta2 {
    gap: 12px;
    margin-top: 18px;
}

.gresio-prodotto form.cart .single_add_to_cart_button {
    padding: 17px 24px;
    background: var(--gresio-ink);
    border: 1px solid var(--gresio-ink);
    color: var(--gresio-accent);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.gresio-prodotto form.cart .single_add_to_cart_button:hover,
.gresio-prodotto form.cart .single_add_to_cart_button:focus {
    background: var(--gresio-footer);
    border-color: var(--gresio-footer);
    color: var(--gresio-accent);
}

/* Preventivo: azione secondaria, bordo sabbia (skin base nel plugin). */
.gresio-prodotto .cp-pv-add {
    padding: 14px 24px;
    border: 1.5px solid var(--gresio-blue-dark);
    color: var(--gresio-blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.gresio-prodotto .cp-pv-add:hover {
    background: var(--gresio-blue-tint);
    color: var(--gresio-blue);
}

.gresio-cta-nota {
    margin: 0;
    font-size: 12.5px;
    color: var(--gresio-muted);
    text-align: center;
}

.gresio-paghi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 16px;
}

.gresio-paghi-label {
    margin-right: 4px;
    font-size: 12px;
    color: var(--gresio-muted);
}

.gresio-paghi .gresio-chip {
    border-color: var(--gresio-border);
}

.gresio-contatto {
    padding: 16px 18px;
    border: 1px solid var(--gresio-border);
    margin-bottom: 18px;
}

.gresio-contatto-titolo {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
}

.gresio-contatto-azioni {
    display: flex;
    gap: 10px;
}

.gresio-contatto-azioni a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--gresio-input-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--gresio-ink);
    text-decoration: none;
}

.gresio-contatto-azioni a:hover {
    border-color: var(--gresio-ink);
}

.gresio-pallino {
    width: 9px;
    height: 9px;
    background: var(--gresio-ok);
    border-radius: 50%;
}

.gresio-contatto-nota {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--gresio-muted);
    text-align: center;
}

.gresio-promesse {
    margin: 0;
    padding: 18px 0 0;
    list-style: none;
    border-top: 1px solid var(--gresio-border);
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gresio-ink-2);
}

.gresio-promesse li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gresio-promesse strong {
    color: var(--gresio-ink);
}

.gresio-promesse a {
    color: var(--gresio-blue);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Sotto: descrizione, scheda tecnica, FAQ
   -------------------------------------------------------------------------- */

.gresio-sezione-prodotto {
    margin-top: 0;
    margin-bottom: 0;
    padding: 44px 0 0;
    border-top: 1px solid var(--gresio-border);
}

.gresio-sezione-prodotto h2 {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

.gresio-scheda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

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

.gresio-descrizione h2 {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gresio-ink);
}

.gresio-descrizione p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--gresio-ink-2);
}

/* Il riquadro tono/calibro tiene la sua veste sabbia da style.css: qui si
   allineano solo misure e posizione dentro la colonna Descrizione. */
.gresio-descrizione .gresio-tono {
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.55;
}

.gresio-sec-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--gresio-ink);
}

.gresio-sec-head a {
    font-size: 14px;
    font-weight: 700;
    color: var(--gresio-blue);
}

/* Scheda tecnica: etichetta a sinistra, valore (e spiegazione della sigla) a
   destra. Le spiegazioni restano: sono il motivo per cui il cliente sceglie
   noi invece di un marketplace. */
.gresio-tech {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    margin: 0;
    font-size: 14.5px;
}

.gresio-tech dt {
    padding: 12px 4px;
    border-bottom: 1px solid var(--gresio-border);
    color: var(--gresio-muted);
}

.gresio-tech dd {
    margin: 0;
    padding: 12px 4px;
    border-bottom: 1px solid var(--gresio-border);
}

.gresio-tech-valore {
    display: block;
    font-weight: 700;
    color: var(--gresio-ink);
    font-variant-numeric: tabular-nums;
}

.gresio-tech .gresio-spiega {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--gresio-muted);
}

.gresio-tech .gresio-spiega a {
    color: var(--gresio-blue);
    font-weight: 700;
    white-space: nowrap;
}

.gresio-faq h2 {
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--gresio-ink);
}

/* --------------------------------------------------------------------------
   10. Recensioni verificate
   -------------------------------------------------------------------------- */

/* La sezione recensioni non è più a tutta pagina come prima: sta dentro la
   griglia del prodotto, quindi cadono il contenitore centrato e il limite di
   760px che serviva alla vecchia impaginazione a una colonna. */
.gresio-recensioni .wrap {
    max-width: none;
    padding: 0;
}

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

/* Il form "scrivi una recensione" resta a misura di lettura. */
.gresio-recensioni #review_form_wrapper {
    max-width: 760px;
}

.gresio-recensioni .gresio-sec-head {
    margin-bottom: 24px;
}

.gresio-recensioni .gresio-voto {
    font-size: 15px;
    font-weight: 700;
    color: var(--gresio-ink-2);
}

.gresio-recensioni .woocommerce-Reviews-title {
    /* Il titolo lo mette la nostra intestazione: quello nativo ripeterebbe. */
    display: none;
}

.gresio-recensioni .commentlist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.gresio-recensioni .commentlist li,
.gresio-recensioni .commentlist li .comment_container {
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
}

.gresio-recensioni .commentlist > li {
    padding: 26px;
    background: var(--gresio-superficie, var(--gresio-superficie));
    border: 1px solid var(--gresio-border);
}

.gresio-recensioni .commentlist img.avatar {
    display: none;
}

.gresio-recensioni .comment-text {
    margin: 0;
    padding: 0;
    border: 0;
}

.gresio-recensioni .comment-text p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gresio-ink-2);
}

.gresio-recensioni .comment-text .meta {
    font-size: 13px;
    color: var(--gresio-muted);
}

.gresio-recensioni .comment-text .meta strong {
    color: var(--gresio-ink);
}

.gresio-recensione-nascosta {
    display: none;
}

.gresio-mostra-recensioni {
    display: inline-block;
    margin-bottom: 24px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--gresio-blue);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.gresio-mostra-recensioni:hover {
    opacity: 0.82;
}

/* --------------------------------------------------------------------------
   11. Della stessa collezione
   -------------------------------------------------------------------------- */

.gresio-collezione {
    padding: 48px 0 8px;
    border-top: 1px solid var(--gresio-border);
}

.gresio-collezione .gresio-sec-head {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 24px;
}

.gresio-collezione-griglia {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.gresio-card {
    display: block;
    background: var(--gresio-superficie, var(--gresio-superficie));
    box-shadow: var(--gresio-ombra-card);
    text-decoration: none;
    color: var(--gresio-ink);
}

.gresio-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.gresio-card-corpo {
    padding: 16px 18px 20px;
}

.gresio-card-nome {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.gresio-card-prezzo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.gresio-card-prezzo strong {
    font-size: 21px;
    font-weight: 800;
}

.gresio-card-prezzo span {
    font-size: 13px;
    color: var(--gresio-muted);
}

/* --------------------------------------------------------------------------
   12. Mobile (frame "Mobile Prodotto" del pacchetto design)
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .gresio-prodotto div.product {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 0 32px;
    }
}

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

    /* Su telefono il prezzo deve venire prima dei banner: la colonna acquisto
       resta al suo posto (order 0) e i banner scendono sotto. */
    .gresio-prodotto div.product .gresio-p-banners {
        order: 1;
        margin-top: 0;
    }

    .gresio-prodotto div.product > section,
    .gresio-prodotto div.product > .gresio-sezione-prodotto {
        order: 2;
    }

    .gresio-prodotto .flex-control-thumbs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
    }

    .gresio-prodotto .flex-control-thumbs li {
        flex: 0 0 auto;
        width: 60px;
    }

    .gresio-scheda {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .gresio-recensioni .commentlist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gresio-collezione-griglia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .gresio-prodotto div.product > .onsale {
        top: 12px;
        left: 12px;
        padding: 5px 10px;
        font-size: 11px;
    }

    .gresio-p-note {
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        margin-top: 16px;
        font-size: 12.5px;
    }

    .gresio-p-banner {
        padding: 14px 16px;
    }

    .gresio-p-banner p {
        font-size: 12.5px;
    }

    .gresio-p-banner-icona {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .gresio-bigprice {
        font-size: 31px;
    }

    .gresio-prezzo-unita,
    .gresio-prodotto .gresio-oldprice {
        font-size: 13.5px;
    }

    .gresio-swatch img {
        width: 48px;
        height: 48px;
    }

    .gresio-versioni {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gresio-fasce,
    .gresio-prodotto form.cart {
        padding: 16px;
    }

    .gresio-fasce .cp-tabella-sconti.cp-orizzontale td {
        flex: 1 1 30%;
        padding: 8px 10px;
    }

    .gresio-fasce .cp-tabella-sconti.cp-orizzontale td.cp-scaglione-attivo {
        padding: 7px 9px;
    }

    .gresio-prodotto form.cart .single_add_to_cart_button {
        padding: 16px 18px;
        font-size: 15px;
    }

    .gresio-recensioni .commentlist {
        grid-template-columns: minmax(0, 1fr);
    }

    .gresio-collezione-griglia {
        gap: 14px;
    }

    .gresio-card-corpo {
        padding: 12px 14px 16px;
    }

    .gresio-card-prezzo strong {
        font-size: 18px;
    }

    /* La barra sticky copre il fondo pagina: spazio per non nascondere l'ultima riga. */
    .gresio-prodotto .site-content {
        padding-bottom: 96px;
    }
}

/* --- Fase 2: il prezzo dentro le card Versione andava a capo ("25,00 / € /
   /m²"): riga unica, prezzo leggibile. */
.gresio-versioni .gresio-versione {
    min-width: 128px;
}

.gresio-versioni .gresio-versione > span {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gresio-versioni .gresio-versione .woocommerce-Price-amount {
    display: inline;
}


/* --- Fase 2: il form "Aggiungi una recensione" usciva grezzo (campi grigi
   su pannello grigio, larghezze sballate). Card bianca, campi in palette. */
.gresio-recensioni #review_form_wrapper {
    /* contenitore esterno: nessuna doppia cornice */
    max-width: none;
    background: transparent;
    border: 0;
    padding: 0;
}

.gresio-recensioni .comment-respond {
    max-width: 720px;
    background: var(--gresio-superficie);
    border: 1px solid var(--gresio-border);
    padding: 26px 28px;
    margin-top: 6px;
}

.gresio-recensioni .comment-respond .comment-reply-title {
    display: block;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
}

.gresio-recensioni .comment-respond input[type='text'],
.gresio-recensioni .comment-respond input[type='email'],
.gresio-recensioni .comment-respond textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--gresio-bg);
    border: 1px solid var(--gresio-input-border);
    padding: 11px 13px;
    font-size: 14.5px;
    box-shadow: none;
}

.gresio-recensioni .comment-respond .comment-form-rating .stars {
    font-size: 22px;
    margin: 6px 0 0;
}

.gresio-recensioni .comment-respond .comment-form-author,
.gresio-recensioni .comment-respond .comment-form-email {
    width: 48%;
    float: none;
    display: inline-block;
    margin-right: 2%;
}

.gresio-recensioni .comment-respond .form-submit input {
    background: var(--gresio-ink);
    color: var(--gresio-accent);
    border: 0;
    border-radius: 0;
    font-weight: 800;
    padding: 13px 26px;
}