/* =========================================================================
   SARTORI TRADE — Scheda prodotto

   Impianto da scheda tecnica: galleria a sinistra, dati a destra, e sotto le
   sezioni lunghe. Per i prodotti raggruppati il pezzo forte e' la tabella
   delle misure: e' li' che si sceglie e si ordina.
   ========================================================================= */

/* -------------------------------------------------------------------------
   IMPIANTO A DUE COLONNE
   ------------------------------------------------------------------------- */

.single-product div.product {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-s5);
    margin: 0;
}
@media (min-width: 900px) {
    .single-product div.product {
        grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
        gap: var(--sa-s6);
        align-items: start;
    }
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .images {
    grid-column: 1;
    margin: 0;
    float: none;
    width: auto;
    position: sticky;
    top: var(--sa-s4);
}
.single-product div.product .summary,
.single-product div.product .entry-summary {
    grid-column: 1;
    margin: 0;
    float: none;
    width: auto;
}
@media (min-width: 900px) {
    .single-product div.product .summary,
    .single-product div.product .entry-summary { grid-column: 2; }
}

/* Le sezioni lunghe prendono tutta la larghezza, sotto le due colonne.
   Fra queste c'e' anche la tabella delle misure: inc/scheda.php la sposta
   qui fuori dal riepilogo proprio perche' le serve tutta la pagina. */
.single-product div.product > .sa-sezione,
.single-product div.product > form.cart,
.single-product div.product > .sa-misure-form,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .woocommerce-tabs {
    grid-column: 1 / -1;
}

/* -------------------------------------------------------------------------
   GALLERIA
   ------------------------------------------------------------------------- */

.woocommerce-product-gallery {
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio-lg);
    padding: var(--sa-s4);
}
.woocommerce-product-gallery__wrapper { margin: 0; }

/* La lente per ingrandire e' un bersaglio da 2em, cioe' 32px: sotto la misura
   di un dito. Si porta a 44 senza spostarla. Il selettore e' lungo quanto
   quello di Storefront (.single-product div.product .woocommerce-product-gallery
   .woocommerce-product-gallery__trigger), altrimenti perde per peso. */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sa-tocco);
    height: var(--sa-tocco);
    top: var(--sa-s3);
    inset-inline-end: var(--sa-s3);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    color: var(--sa-inchiostro);
    text-decoration: none;
}
.woocommerce-product-gallery__trigger:active { transform: scale(.94); }
.woocommerce-product-gallery__image {
    display: block;
    border-radius: var(--sa-raggio);
    overflow: hidden;
    background: var(--sa-superficie-2);
}
.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-s2);
    margin: var(--sa-s3) 0 0;
    padding: 0;
    list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li {
    width: 72px;
    margin: 0;
    float: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    opacity: 1;
    cursor: pointer;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
    border-color: var(--sa-blu);
    box-shadow: 0 0 0 1px var(--sa-blu);
}

/* Prodotto senza fotografia: il segnaposto occupa il riquadro intero. */
.woocommerce-product-gallery .sa-segnaposto {
    aspect-ratio: 1 / 1;
    border-radius: var(--sa-raggio);
}
.woocommerce-product-gallery .sa-segnaposto .sa-icona { width: 48px; height: 48px; }
.woocommerce-product-gallery .sa-segnaposto__codice { font-size: var(--sa-t-sm); }

/* -------------------------------------------------------------------------
   RIEPILOGO
   ------------------------------------------------------------------------- */

.sa-scheda-prodotto__occhiello {
    margin: 0 0 var(--sa-s2);
    max-width: none;
    font-size: var(--sa-t-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sa-scheda-prodotto__occhiello a {
    color: var(--sa-blu);
    text-decoration: none;
}
.sa-scheda-prodotto__occhiello a:hover { text-decoration: underline; }

.single-product div.product .product_title {
    margin: 0 0 var(--sa-s4);
    font-size: var(--sa-t-xl);
    line-height: var(--sa-riga-stretta);
}
@media (min-width: 900px) {
    .single-product div.product .product_title { font-size: var(--sa-t-2xl); }
}

/* --- Codice articolo: e' l'identificativo, sta in evidenza --- */

.sa-codice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sa-s2) var(--sa-s5);
    padding: var(--sa-s3) var(--sa-s4);
    margin-bottom: var(--sa-s4);
    background: var(--sa-blu-tenue);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
}
.sa-codice__voce {
    display: flex;
    align-items: center;
    gap: var(--sa-s2);
    flex-wrap: wrap;
}
.sa-codice__etichetta {
    font-size: var(--sa-t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sa-inchiostro-2);   /* 6,81:1 sul fondo tenue */
}
.sa-codice__valore {
    font-size: var(--sa-t-md);
    font-weight: 700;
    color: var(--sa-inchiostro);     /* 15,59:1 sul fondo tenue */
    letter-spacing: .02em;
}
.sa-codice__voce--minore .sa-codice__valore {
    font-size: var(--sa-t-sm);
    font-weight: 600;
    color: var(--sa-inchiostro-2);
}
.sa-codice__copia {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s1);
    min-height: var(--sa-tocco);
    min-width: var(--sa-tocco);
    padding-inline: var(--sa-s2);
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    color: var(--sa-blu);
    font-size: var(--sa-t-xs);
    font-weight: 600;
    cursor: pointer;
}
.sa-codice__copia:hover { background: var(--sa-blu); color: var(--sa-superficie); border-color: var(--sa-blu); }
.sa-codice__copia:active { transform: scale(.95); }
.sa-codice__copia.e-fatto { color: var(--sa-ok); border-color: var(--sa-ok); background: var(--sa-ok-tenue); }
.sa-codice__copia.e-fatto:hover { background: var(--sa-ok-tenue); color: var(--sa-ok); }

/* --- Prezzo --- */

.single-product div.product .price.sa-prezzo {
    margin: 0 0 var(--sa-s3);
    color: var(--sa-inchiostro);
    font-size: var(--sa-t-base);
}
.sa-prezzo__netto {
    margin: 0;
    max-width: none;
    font-size: var(--sa-t-2xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--sa-inchiostro);
}
.sa-prezzo__netto .sa-iva {
    font-size: var(--sa-t-sm);
    font-weight: 600;
    color: var(--sa-inchiostro-2);
    vertical-align: middle;
    margin-inline-start: var(--sa-s2);
}
.sa-prezzo__netto del {
    font-size: var(--sa-t-lg);
    font-weight: 400;
    color: var(--sa-inchiostro-2);
    margin-inline-end: var(--sa-s2);
}
.sa-prezzo__netto ins { text-decoration: none; background: transparent; }
.sa-prezzo__lordo,
.sa-prezzo__nota {
    margin: var(--sa-s1) 0 0;
    max-width: none;
    font-size: var(--sa-t-sm);
    color: var(--sa-inchiostro-2);
}
.sa-prezzo__lordo-cifra { font-weight: 700; color: var(--sa-inchiostro); }

.sa-scheda-prodotto__stato { margin-bottom: var(--sa-s4); }
.sa-scheda-prodotto__stato .sa-stato { font-size: var(--sa-t-sm); padding: var(--sa-s1) var(--sa-s3); }

/* --- Descrizione breve --- */

.single-product div.product .woocommerce-product-details__short-description {
    margin-bottom: var(--sa-s4);
    color: var(--sa-inchiostro-2);
    font-size: var(--sa-t-sm);
    line-height: var(--sa-riga);
}
.single-product div.product .woocommerce-product-details__short-description p { margin: 0 0 var(--sa-s2); }

/* --- Aggiungi al carrello (prodotto semplice) --- */

.single-product div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sa-s3);
    margin-bottom: var(--sa-s4);
}
.single-product div.product form.cart .quantity { float: none; margin: 0; }
/* Il pulsante d'acquisto porta l'arancione del marchio: e' il colore
   dell'azione, non una decorazione. Va sempre come FONDO con --sa-su-azione
   sopra (8,85:1 in chiaro, 9,83:1 in scuro): come colore di testo su fondo
   chiaro starebbe a 2,1:1 e non si leggerebbe. */
.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 220px;
    min-height: 52px;
    justify-content: center;
    font-size: var(--sa-t-base);
    font-weight: 700;
    background: var(--sa-azione);
    color: var(--sa-su-azione);
    border: 1px solid transparent;
    border-radius: var(--sa-raggio);
}
.single-product div.product form.cart .single_add_to_cart_button:hover {
    background: var(--sa-azione-scuro);
    color: var(--sa-su-azione);
}

/* Il modulo del raggruppato non e' una riga di controlli: e' una tabella. */
.single-product div.product form.cart.sa-misure-form { display: block; }

/* --- Categorie in coda al riepilogo --- */

.sa-scheda-prodotto__famiglie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sa-s2);
    padding-top: var(--sa-s4);
    border-top: 1px solid var(--sa-bordo);
}
.sa-scheda-prodotto__famiglie-eti {
    font-size: var(--sa-t-xs);
    font-weight: 600;
    color: var(--sa-inchiostro-2);
}
.sa-scheda-prodotto__famiglie-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* -------------------------------------------------------------------------
   CAMPO QUANTITA'
   ------------------------------------------------------------------------- */

.quantity.sa-qta {
    display: inline-flex;
    align-items: stretch;
    background: var(--sa-superficie);
    border: 1px solid var(--sa-inchiostro-3);   /* bordo visibile: 4,74:1 */
    border-radius: var(--sa-raggio);
    overflow: hidden;
}
.quantity.sa-qta:focus-within {
    border-color: var(--sa-blu);
    box-shadow: 0 0 0 2px var(--sa-blu-tenue);
}
.quantity.sa-qta .sa-qta__campo,
.single-product div.product .quantity.sa-qta .qty {
    width: 56px;
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s1);
    border: 0;
    background: transparent;
    color: var(--sa-inchiostro);
    font-family: var(--sa-font);
    font-size: var(--sa-t-base);
    font-weight: 600;
    text-align: center;
    /* Le frecce native sono alte otto pixel: al loro posto ci sono i due
       pulsanti, che di pixel ne hanno quarantaquattro. */
    -moz-appearance: textfield;
}
.quantity.sa-qta .sa-qta__campo::-webkit-outer-spin-button,
.quantity.sa-qta .sa-qta__campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity.sa-qta .sa-qta__campo:focus { outline: none; }

.sa-qta__passo {
    display: none;   /* li accende interfaccia.js: senza JS non farebbero nulla */
    align-items: center;
    justify-content: center;
    width: var(--sa-tocco);
    min-width: var(--sa-tocco);
    min-height: var(--sa-tocco);
    padding: 0;
    background: var(--sa-superficie-2);
    border: 0;
    color: var(--sa-inchiostro);
    font-size: var(--sa-t-md);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.e-con-js .sa-qta__passo { display: inline-flex; }
.sa-qta__passo:hover { background: var(--sa-blu-tenue); color: var(--sa-blu); }
.sa-qta__passo:active { transform: scale(.92); }

/* -------------------------------------------------------------------------
   SEZIONI SOTTO IL RIEPILOGO
   ------------------------------------------------------------------------- */

.sa-sezione {
    margin-top: var(--sa-s6);
    padding-top: var(--sa-s5);
    border-top: 1px solid var(--sa-bordo);
}
.sa-sezione__titolo {
    margin: 0 0 var(--sa-s4);
    font-size: var(--sa-t-lg);
}
.sa-sezione__corpo { color: var(--sa-inchiostro-2); }
.sa-sezione__corpo p { margin: 0 0 var(--sa-s3); line-height: var(--sa-riga); }
.sa-vuoto { color: var(--sa-inchiostro-2); font-size: var(--sa-t-sm); margin: 0; }

/* --- Tabella delle caratteristiche --- */

.sa-scheda-tecnica {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sa-t-sm);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
}
.sa-scheda-tecnica__riga:nth-child(odd) { background: var(--sa-superficie-2); }
.sa-scheda-tecnica__riga:nth-child(even) { background: var(--sa-superficie); }
.sa-scheda-tecnica__eti,
.sa-scheda-tecnica__val {
    padding: var(--sa-s3) var(--sa-s4);
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--sa-bordo);
}
.sa-scheda-tecnica__riga:last-child .sa-scheda-tecnica__eti,
.sa-scheda-tecnica__riga:last-child .sa-scheda-tecnica__val { border-bottom: 0; }
.sa-scheda-tecnica__eti {
    width: 40%;
    font-weight: 600;
    color: var(--sa-inchiostro-2);
    font-style: normal;
}
.sa-scheda-tecnica__val { color: var(--sa-inchiostro); font-weight: 600; }
.sa-scheda-tecnica__val a { color: var(--sa-blu); }

/* -------------------------------------------------------------------------
   TABELLA DELLE MISURE (prodotti raggruppati)
   La vista piu' importante del sito.
   ------------------------------------------------------------------------- */

.sa-misure-testata {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sa-s2) var(--sa-s4);
    margin-bottom: var(--sa-s3);
}
.sa-misure-titolo {
    margin: 0;
    font-size: var(--sa-t-md);
    font-weight: 650;
}
.sa-misure-aiuto {
    display: flex;
    align-items: center;
    gap: var(--sa-s2);
    margin: 0;
    max-width: none;
    font-size: var(--sa-t-xs);
    color: var(--sa-inchiostro-2);
}
.sa-misure-aiuto .sa-icona { flex: none; }

.sa-misure-guscio {
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
    overflow: hidden;
    background: var(--sa-superficie);
}

.sa-misure {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sa-t-sm);
    margin: 0;
}

/* --- Intestazioni: sono pulsanti di ordinamento --- */

.sa-misure__th {
    background: var(--sa-superficie-3);
    border-bottom: 1px solid var(--sa-bordo-forte);
    padding: 0;
    text-align: start;
    font-size: var(--sa-t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sa-inchiostro);      /* 15,71:1 sull'intestazione */
    white-space: nowrap;
}
.sa-misure__th--quantita { padding: var(--sa-s3) var(--sa-s4); }

.sa-misure__ordina {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sa-s2);
    width: 100%;
    min-height: var(--sa-tocco);
    padding: var(--sa-s2) var(--sa-s4);
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.sa-misure__ordina:hover { background: var(--sa-blu-tenue); color: var(--sa-blu); }
.sa-misure__ordina:active { transform: scale(.98); }
.sa-misure__ordina-segno { display: inline-flex; color: var(--sa-inchiostro-2); }
.sa-misure__ordina:hover .sa-misure__ordina-segno { color: var(--sa-blu); }

/* La colonna su cui si sta ordinando: colore E freccia piena, mai solo il
   colore. Il verso e' scritto anche in aria-sort, per chi ascolta. */
.sa-misure__th[aria-sort="ascending"],
.sa-misure__th[aria-sort="descending"] {
    background: var(--sa-blu-tenue);
    color: var(--sa-blu);
}
.sa-misure__th[aria-sort="ascending"] .sa-misure__ordina-segno::after,
.sa-misure__th[aria-sort="descending"] .sa-misure__ordina-segno::after {
    content: "";
    width: 0;
    height: 0;
    margin-inline-start: 2px;
    border-inline: 4px solid transparent;
}
.sa-misure__th[aria-sort="ascending"] .sa-misure__ordina-segno::after {
    border-bottom: 5px solid currentColor;
}
.sa-misure__th[aria-sort="descending"] .sa-misure__ordina-segno::after {
    border-top: 5px solid currentColor;
}
.sa-misure__th[aria-sort="ascending"] .sa-misure__ordina-segno .sa-icona,
.sa-misure__th[aria-sort="descending"] .sa-misure__ordina-segno .sa-icona { display: none; }

/* --- Righe --- */

.sa-misure__riga:nth-child(even) { background: var(--sa-superficie-2); }
.sa-misure__riga:hover { background: var(--sa-blu-tenue); }

.sa-misure__cella {
    padding: var(--sa-s3) var(--sa-s4);
    border-bottom: 1px solid var(--sa-bordo);
    vertical-align: middle;
    text-align: start;
    font-weight: 400;
}
.sa-misure__riga:last-child .sa-misure__cella { border-bottom: 0; }

.sa-misure__codice {
    font-weight: 700;
    color: var(--sa-blu);
    letter-spacing: .02em;
    white-space: nowrap;
}
.sa-misure__vuoto { color: var(--sa-inchiostro-2); }

.sa-misure__link {
    color: var(--sa-inchiostro);
    font-weight: 600;
    text-decoration: none;
}
.sa-misure__link:hover { color: var(--sa-blu); text-decoration: underline; }

.sa-misure__cella--prezzo { white-space: nowrap; }
.sa-misure__netto {
    display: block;
    font-size: var(--sa-t-base);
    font-weight: 700;
    color: var(--sa-inchiostro);
}
.sa-misure__netto .sa-iva { font-size: var(--sa-t-xs); font-weight: 600; }
.sa-misure__lordo {
    display: block;
    font-size: var(--sa-t-xs);
    color: var(--sa-inchiostro-2);
}

.sa-misure__cella--quantita { width: 1%; }
.sa-misure__singolo {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-s2);
    min-height: var(--sa-tocco);
}
.sa-misure__singolo input[type="checkbox"] { width: 20px; height: 20px; }
.sa-misure__cella--quantita .button {
    display: inline-flex;
    min-height: var(--sa-tocco);
    padding-inline: var(--sa-s3);
    font-size: var(--sa-t-xs);
    font-weight: 600;
    background: var(--sa-superficie);
    color: var(--sa-blu);
    border: 1px solid var(--sa-bordo-forte);
    border-radius: var(--sa-raggio);
    white-space: nowrap;
}
.sa-misure__cella--quantita .button:hover { background: var(--sa-blu); color: var(--sa-superficie); }

.sa-misure-piede {
    margin-top: var(--sa-s4);
    display: flex;
    justify-content: flex-end;
}
/* Stesso arancione del pulsante d'acquisto: e' la stessa azione. */
.single-product div.product form.cart .sa-misure-invio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-s2);
    min-height: 52px;
    padding-inline: var(--sa-s5);
    background: var(--sa-azione);
    color: var(--sa-su-azione);
    border: 1px solid transparent;
    border-radius: var(--sa-raggio);
    font-size: var(--sa-t-base);
    font-weight: 700;
    cursor: pointer;
}
.single-product div.product form.cart .sa-misure-invio:hover {
    background: var(--sa-azione-scuro);
    color: var(--sa-su-azione);
}
.sa-misure-invio:active { transform: scale(.98); }

/* --- Sotto i 768px: niente scorrimento laterale, ogni riga e' un blocco.
       Le intestazioni restano visibili come pastiglie di ordinamento, cosi'
       la tabella si puo' riordinare anche sul telefono. --- */

@media (max-width: 767px) {
    .sa-misure,
    .sa-misure thead,
    .sa-misure tbody,
    .sa-misure tr,
    .sa-misure th,
    .sa-misure td { display: block; }

    .sa-misure thead tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sa-s1);
        padding: var(--sa-s2);
        background: var(--sa-superficie-3);
        border-bottom: 1px solid var(--sa-bordo-forte);
    }
    .sa-misure__th {
        flex: 0 0 auto;
        border: 1px solid var(--sa-bordo-forte);
        border-radius: var(--sa-raggio);
        background: var(--sa-superficie);
        white-space: nowrap;
    }
    /* Non si ordina per quantita': la pastiglia non serve.
       Il selettore ripete l'elemento perche' la regola generica qui sopra
       (.sa-misure th) pesa di piu' della sola classe e vincerebbe lei. */
    .sa-misure th.sa-misure__th--quantita { display: none; }
    .sa-misure__ordina { padding: var(--sa-s2) var(--sa-s3); }

    .sa-misure__riga {
        padding: var(--sa-s3) var(--sa-s4);
        border-bottom: 1px solid var(--sa-bordo);
    }
    .sa-misure__cella {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sa-s3);
        padding: var(--sa-s1) 0;
        border: 0;
    }
    /* L'intestazione della colonna torna accanto al dato: senza, un elenco di
       numeri sciolti non si capisce. */
    .sa-misure__cella::before {
        content: attr(data-etichetta);
        flex: 0 0 auto;
        /* Senza questo l'etichetta va a capo lettera per lettera quando il
           comando accanto si prende tutta la riga: "Q U A N T I T A'". */
        white-space: nowrap;
        font-size: var(--sa-t-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--sa-inchiostro-2);
    }
    .sa-misure__cella--codice { padding-top: 0; }
    .sa-misure__cella--codice .sa-misure__codice { font-size: var(--sa-t-base); }
    .sa-misure__cella--quantita {
        align-items: center;
        padding-top: var(--sa-s2);
    }
    .sa-misure__cella--prezzo { text-align: end; }
    .sa-misure__netto,
    .sa-misure__lordo { text-align: end; }
    .sa-misure-piede { justify-content: stretch; }
    .single-product div.product form.cart .sa-misure-invio { width: 100%; }
}

/* -------------------------------------------------------------------------
   PRODOTTI CORRELATI
   ------------------------------------------------------------------------- */

.related.products,
.up-sells.products {
    margin-top: var(--sa-s7);
    padding-top: var(--sa-s5);
    border-top: 1px solid var(--sa-bordo);
}
.related.products > h2,
.up-sells.products > h2 {
    margin: 0 0 var(--sa-s4);
    font-size: var(--sa-t-lg);
}
.related.products ul.products,
.up-sells.products ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sa-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 900px) {
    .related.products ul.products,
    .up-sells.products ul.products { grid-template-columns: repeat(4, 1fr); }
}
.related.products ul.products li.product,
.up-sells.products ul.products li.product,
.site-main .related.products ul.products li.product {
    width: auto;
    float: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--sa-superficie);
    border: 1px solid var(--sa-bordo);
    border-radius: var(--sa-raggio);
    overflow: hidden;
    text-align: start;
}

/* -------------------------------------------------------------------------
   VOCI CHE NON SERVONO SU QUESTO NEGOZIO
   ------------------------------------------------------------------------- */

.single-product .woocommerce-product-rating,
.single-product .woocommerce-tabs .reviews_tab { display: none; }
