/**
 * IL CATALOGO E LA SCHEDA ENTRANO NEL SITO
 * ========================================
 *
 * Stesso lavoro fatto su carrello e cassa, e per lo stesso motivo: le pagine
 * dove si guarda la merce parlavano una lingua diversa da quelle dove si
 * racconta chi siamo. Bianco invece di carta, colonne che non coincidono con
 * quelle dell'intestazione, nomi tagliati a meta'.
 *
 * COSA E' STATO MISURATO
 * ----------------------
 * - Il catalogo sta su una colonna che parte da **64 px**, mentre
 *   l'intestazione, il piede e ogni altra pagina partono da 24. Quaranta pixel
 *   di scarto che si notano scorrendo, senza sapere da dove vengono.
 * - Il fondo delle due pagine e' bianco. La home, la scheda «chi siamo», il
 *   carrello e la cassa sono carta calda. Su bianco le schede bianche dei
 *   prodotti non si staccano da niente.
 * - Ogni titolo del catalogo e' tagliato a due righe con i puntini. I nomi
 *   qui sono frasi lunghe — «Tenda a Vetro Filtrante Day and Night con
 *   Cassonetto senza rinunciare alla privacy…» — e tagliati a due righe
 *   diventano **tutti uguali fino al punto in cui si interrompono**. Il
 *   catalogo sembra una fila dello stesso prodotto.
 * - Sulla scheda prodotto la stessa promessa compare **tre volte** nella
 *   stessa schermata: nell'elenco sotto il titolo, nel blocco a due colonne
 *   accanto, e in una fascia a tutta larghezza sotto la galleria.
 * - E accanto alla descrizione c'e' una colonna larga 306 px **vuota**: e' il
 *   posto dove stava il riquadro d'aiuto tolto perche' era un doppione. E'
 *   stato tolto il contenuto e lasciata la colonna.
 *
 * Come per `acquisto.css`, questo foglio si carica per ultimo e solo dove
 * serve: cosi' non deve rincorrere nessuno con `!important`, e chi cerca
 * «come sono fatte le pagine della merce» ha un posto solo dove guardare.
 */

/* ======================================================================
 * 1. LA CARTA
 * ==================================================================== */

body.post-type-archive-product .site-main,
body.tax-product_cat .site-main,
body.tax-product_tag .site-main,
body.search-results .site-main,
body.single-product .site-main,
body.single-product main.st-product {
    background: var(--st-p-avorio, #F7F4EF);
}

/* ======================================================================
 * 2. LA COLONNA DEL CATALOGO E' QUELLA DEL SITO
 *
 * Misurato: 64 px di margine contro i 24 dell'intestazione. La formula e'
 * la stessa di `.st-container`, scritta con gli stessi token invece che con
 * un numero — due numeri per la stessa colonna divergono al primo ritocco.
 * ==================================================================== */

body.post-type-archive-product .site-main > .ct-container,
body.tax-product_cat .site-main > .ct-container,
body.tax-product_tag .site-main > .ct-container,
body.search-results .site-main > .ct-container {
    width: min(100% - 2 * var(--st-container-margine, 24px), var(--st-container, 1336px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* ======================================================================
 * 3. LE SCHEDE SI STACCANO DALLA CARTA
 *
 * Su fondo bianco una scheda bianca ha bisogno di un filetto per esistere.
 * Su carta no: basta il bianco. Il filetto se ne va e resta un'ombra bassa,
 * che dice «questo si puo' prendere» senza disegnare una cornice.
 * ==================================================================== */

body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.search-results ul.products li.product,
body.single-product ul.products li.product {
    border: 0;
    box-shadow: 0 1px 2px rgba(35, 32, 29, .05);
    transition: box-shadow .18s ease, transform .18s ease;
}

body.post-type-archive-product ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover,
body.tax-product_tag ul.products li.product:hover,
body.search-results ul.products li.product:hover,
body.single-product ul.products li.product:hover {
    box-shadow: 0 10px 26px -18px rgba(35, 32, 29, .5);
    transform: translateY(-2px);
}

/* ======================================================================
 * 4. I NOMI NON SI TAGLIANO
 *
 * Erano bloccati a due righe con i puntini. Qui i nomi non sono nomi: sono
 * frasi di quindici parole, e a due righe diventano tutte la stessa frase.
 * Tre righe bastano quasi sempre, e la coda si sfuma invece di finire con
 * tre puntini — che sembrano un errore di caricamento.
 *
 * Serif, come ogni nome di prodotto sul sito: regge le righe lunghe meglio
 * del corpo, che qui e' un carattere da interfaccia.
 * ==================================================================== */

body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.products li.product .woocommerce-loop-product__title,
body.search-results ul.products li.product .woocommerce-loop-product__title,
body.single-product ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    /* Tre righe piene a questa misura: le schede restano allineate anche
       quando un nome e' corto e un altro lungo. */
    min-height: calc(3 * 1.35em);
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -.005em;
}

/* La categoria ripetuta sotto ogni nome — «TENDE A RULLO FILTRANTI» su tutte
   e sedici le schede — non distingue niente in una pagina che elenca proprio
   quella categoria: e' rumore uguale su ogni riquadro. Resta nella ricerca e
   nelle schede correlate, dove i prodotti vengono da categorie diverse e
   sapere da quale arriva ognuno serve davvero. */
body.post-type-archive-product ul.products li.product .entry-meta,
body.tax-product_cat ul.products li.product .entry-meta {
    display: none;
}

/* ======================================================================
 * 5. LA SCHEDA PRODOTTO
 * ==================================================================== */

/* (a) LA TERZA COPIA DELLA STESSA PROMESSA
   «Su misura al centimetro» compariva nell'elenco sotto il titolo, nel
   blocco dei servizi accanto, e in questa fascia a tutta larghezza sotto la
   galleria. Tre volte nella stessa schermata: la terza non rassicura, fa
   sospettare che il sito non sappia cosa ha gia' detto. */
body.single-product .st-servizi {
    display: none;
}

/* (b) LA COLONNA VUOTA ACCANTO ALLA DESCRIZIONE
   La riga delle schede informative e' una griglia a due colonne: 901 px di
   testo e 306 px di niente. Il riquadro d'aiuto che stava li' e' stato tolto
   perche' ripeteva quello della scheda d'acquisto — giusto toglierlo, ma la
   colonna era rimasta, e mezza pagina restava bianca senza motivo. */
body.single-product .st-tabs-riga {
    display: block;
}

/* Il testo non si allarga fino a 1232 px: una riga lunga cosi' si perde
   tornando a capo. Sessantacinque battute e' la misura di lettura che il
   resto del sito usa gia' nelle pagine di testo. */
body.single-product .st-tabs .st-tabs__panel,
body.single-product .st-tabs .woocommerce-Tabs-panel {
    max-width: 68ch;
}

/* ======================================================================
 * 6. LE GARANZIE IN FONDO: UNA RIGA, NON UNA FASCIA BORDATA
 *
 * Stessa decisione presa su carrello e cassa, e per coerenza va presa anche
 * qui: sono cinque promesse da sfiorare, non cinque cose da leggere. La
 * versione a due colonne dentro la scheda d'acquisto resta com'e' — li' sono
 * poche e hanno lo spazio per dire anche il perche'.
 * ==================================================================== */

body.post-type-archive-product ul.st-garanzie--piatta,
body.tax-product_cat ul.st-garanzie--piatta,
body.tax-product_tag ul.st-garanzie--piatta,
body.search-results ul.st-garanzie--piatta,
body.single-product ul.st-garanzie--piatta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px clamp(20px, 3vw, 44px);
    padding: clamp(22px, 2.6vw, 32px) 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: 0;
}

body.post-type-archive-product ul.st-garanzie--piatta > li,
body.tax-product_cat ul.st-garanzie--piatta > li,
body.tax-product_tag ul.st-garanzie--piatta > li,
body.search-results ul.st-garanzie--piatta > li,
body.single-product ul.st-garanzie--piatta > li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: .82rem;
    color: var(--st-p-debole, #6F6B66);
}

/* QUI LA NOTA RESTA, SUL CARRELLO NO
   Sembra un'incoerenza e non lo e'. Sul carrello quella riga sta in mezzo a
   una pagina fitta, dove ogni parola in piu' e' una parola che allontana dal
   pulsante; qui e' la fascia che chiude il catalogo, ha una riga tutta per se'
   e cinque voci con due parole di spiegazione si leggono in un colpo d'occhio.
   Titolo sopra, nota sotto, senza cornice. */
body.post-type-archive-product ul.st-garanzie--piatta .st-garanzia__testo,
body.tax-product_cat ul.st-garanzie--piatta .st-garanzia__testo,
body.tax-product_tag ul.st-garanzie--piatta .st-garanzia__testo,
body.search-results ul.st-garanzie--piatta .st-garanzia__testo,
body.single-product ul.st-garanzie--piatta .st-garanzia__testo {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: var(--st-p-inchiostro, #15181B);
}