/** Homepage e archivi. */

/* La hero vive in `home.css`.
   Le regole che stavano qui — `.st-hero { display: grid }` con due colonne —
   descrivevano il markup precedente, dove `.st-hero` era il contenitore
   interno. Nel markup nuovo `.st-hero` e' la sezione a tutta larghezza: quelle
   regole la trasformavano in una griglia a due colonne e schiacciavano tutto
   il contenuto nella prima, larga 674 px invece di 1240. Il titolo si spezzava
   a meta' parola. Tolte, non sovrascritte: due definizioni della stessa cosa
   in due file si contraddicono di nuovo alla prima modifica. */

.st-grid { display: grid; gap: var(--st-space-4); }
.st-grid--3 { grid-template-columns: repeat(3, 1fr); }
.st-grid--4 { grid-template-columns: repeat(4, 1fr); }

.st-card {
    display: flex; flex-direction: column;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
    text-decoration: none;
    
}
.st-card:hover { border-color: var(--st-copper); box-shadow: var(--st-shadow); }
.st-card__media { aspect-ratio: 4 / 3; background: var(--st-sand);  }
.st-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Il corpo si allunga fino in fondo alla scheda, cosi' il prezzo puo'
   appoggiarsi al bordo inferiore invece di seguire il titolo. */
.st-card__body {
    padding: var(--st-space-3) var(--st-space-4) var(--st-space-4);
    display: flex; flex-direction: column; flex: 1;
}
/* I titoli dei prodotti sono lunghi e diseguali: «Tenda a Vetro Filtrante per
   Porte finestre senza rinunciare alla privacy e alla protezione solare».
   Su tre di seguito andavano a capo un numero diverso di volte, e i prezzi
   finivano a tre altezze diverse — la griglia sembrava storta. Il titolo si
   ferma a tre righe e il prezzo scende in fondo, sempre allineato. */
.st-card__title {
    margin: 0 0 6px;
    font-size: var(--st-fs-body); line-height: 1.35;
    color: var(--st-charcoal);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.st-card__meta { font-size: .85rem; color: var(--st-muted); }
.st-card__price {
    margin-top: auto;                 /* spinge il prezzo in fondo */
    padding-top: var(--st-space-2);
    font-weight: 600; color: var(--st-charcoal);
    font-variant-numeric: tabular-nums;
}

.st-feature { text-align: center; padding: var(--st-space-4); }
.st-feature__icon {
    width: 46px; height: 46px; margin: 0 auto var(--st-space-3);
    display: grid; place-items: center;
    border-radius: 50%; background: var(--st-sand); color: var(--st-copper);
}
/* `font-size` serviva quando qui dentro c'era un carattere. Adesso c'e' un
   disegno, e la sua misura la porta con se'. */
.st-feature__title { margin: 0 0 6px; font-size: 1rem; }
.st-feature__text { margin: 0; font-size: .88rem; color: var(--st-muted); }

.st-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--st-space-6); align-items: center;
}
.st-split__media {
    aspect-ratio: 3 / 2; border-radius: var(--st-radius);
    background: var(--st-sand); overflow: hidden;
}

.st-newsletter {
    display: flex; flex-wrap: wrap; gap: var(--st-space-3);
    max-width: 520px; margin-top: var(--st-space-4);
}
.st-newsletter input[type="email"] {
    flex: 1 1 240px; min-height: 48px;
    padding: 12px 16px;
    border: 1.5px solid var(--st-border-strong); border-radius: var(--st-radius-sm);
    font: inherit; font-size: 1rem;
}

.st-quote {
    padding: var(--st-space-4);
    background: var(--st-white);
    border-radius: var(--st-radius);
    border: 1px solid var(--st-border);
}
.st-quote__text { margin: 0 0 var(--st-space-3); font-size: .95rem; line-height: 1.7; }
.st-quote__author { font-size: .82rem; color: var(--st-muted); }

/* Badge dei prodotti su preventivo, anche nelle schede del catalogo. */
.st-badge--quote {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--st-sand, #E7E2DA);
    color: var(--st-charcoal, #2F3236);
    font-size: var(--st-fs-micro);
    font-weight: 600;
}

/* Le schede delle categorie hanno meno da dire di quelle dei prodotti: due
   righe di testo. L'immagine e' piu' bassa, cosi' la scheda non diventa una
   colonna con dentro poche parole. */
.st-card--categoria .st-card__media { aspect-ratio: 16 / 10; }
.st-card--categoria .st-card__body { flex: 0 0 auto; }
.st-card--categoria .st-card__title { -webkit-line-clamp: 2; }

/* ==========================================================================
   La testata di categoria — tavola 3
   ========================================================================== */

.st-catalogo__testa {
    position: relative;
    isolation: isolate;
    padding: var(--st-space-6) 0 var(--st-space-7);
    background: var(--st-ivory);
    margin-bottom: var(--st-space-6);
}

/*
 * CENTOVENTIQUATTRO PIXEL DI NIENTE
 *
 * Fra il fondo della fascia di categoria e la prima scheda c'erano 124 px
 * vuoti, e nessuno li aveva scelti: sono i 64 di margine di questa fascia
 * sommati ai 60 di riempimento che il tema padre mette in cima al proprio
 * contenitore, pensati per pagine che cominciano direttamente col testo.
 *
 * Due spazi giusti, sommati, fanno uno spazio sbagliato — ed e' un difetto
 * che non si vede leggendo il foglio di stile, perche' i due valori stanno in
 * due fogli diversi. Si vede solo misurando la pagina viva.
 *
 * Si toglie quello del tema padre, non il nostro: il nostro e' l'unico dei due
 * a sapere che sopra c'e' una fascia colorata.
 */
.archive .site-main > .ct-container,
.post-type-archive-product .site-main > .ct-container,
.search-results .site-main > .ct-container {
    padding-top: 0;
}

/* La fotografia della categoria, sotto al testo.
   Stesso trattamento della hero della home, che nel frattempo e' cambiata: velo
   **scuro** e laterale, testo bianco.
   Il velo chiaro di prima nasceva da una misura vera — bianco su una fotografia
   di catalogo faceva 1,28:1 — ma la misura riguardava il testo *senza* velo. Un
   velo scuro che parte da 0,86 e si spegne prima del soggetto risolve lo stesso
   problema dalla parte opposta, ed e' quello che fa la home: due fasce che si
   assomigliano nella struttura e si contraddicono nel colore erano il modo piu'
   rumoroso di essere coerenti. */
.st-catalogo__sfondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.st-catalogo__sfondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.st-catalogo__sfondo::after {
    content: '';
    position: absolute;
    inset: 0;
    /* UN PANNELLO CHIARO A SINISTRA, LA FOTOGRAFIA INTATTA A DESTRA
       Le quattro testate condividono una regola sola, e la piu' scura —
       l'oscurante, con il suo pixel a (50, 34, 19) — chiedeva un velo avorio
       uniforme al 46% per reggere il titolo inchiostro. Al 46% le altre tre
       si spengono.
       Il testo pero' occupa solo il terzo sinistro. Quindi il velo li' e'
       quasi pieno — e' il pannello crema della tavola — e si spegne prima
       della meta', dove la fotografia riprende per intero. */
    background:
        linear-gradient(94deg,
            rgba(247, 244, 239, .96) 0%,
            rgba(247, 244, 239, .94) 24%,
            rgba(247, 244, 239, .72) 38%,
            rgba(247, 244, 239, .24) 52%,
            rgba(247, 244, 239, 0) 68%);
}

/* Il testo sulla fotografia: bianco, con l'ombra larghissima che la home usa
   per lo stesso motivo — tiene il bianco staccato dove il velo si assottiglia. */
.st-catalogo__testa--foto .st-pagina__titolo,
.st-catalogo__testa--foto .st-catalogo__intro p {
    color: var(--st-p-inchiostro);
}

.st-catalogo__testa--foto .st-breadcrumb,
.st-catalogo__testa--foto .st-breadcrumb a {
    color: var(--st-muted);
}

.st-catalogo__testa--foto .st-breadcrumb a:hover { color: var(--st-p-inchiostro); }

.st-catalogo__intro {
    max-width: 62ch;
}

.st-catalogo__intro .st-pagina__titolo {
    margin: 0 0 var(--st-space-3);
}

/* Le altre categorie, come pastiglie sopra la griglia */
.st-catalogo__categorie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-space-2);
    margin: 0 0 var(--st-space-5);
}

.st-chip-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--st-border);
    border-radius: 999px;
    background: #fff;
    color: var(--st-charcoal);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--st-transition), background-color var(--st-transition);
}

.st-chip-cat span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--st-muted);
    font-variant-numeric: tabular-nums;
}

.st-chip-cat:hover,
.st-chip-cat:focus-visible {
    border-color: var(--st-copper);
    background: var(--st-copper-soft);
}

.st-chip-cat.is-on {
    background: var(--st-copper);
    border-color: var(--st-copper);
    color: #fff;
}

.st-chip-cat.is-on span {
    color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   LA STRISCIA DELLE GARANZIE
   ==========================================================================
   Qui c'era **solo** `--piatta`, cioe' il modificatore. La base viveva nel
   foglio della home, la home e' stata rifatta e la base e' sparita con lei:
   da quel giorno la striscia in fondo al catalogo usciva come un elenco
   puntato: cinque righe col pallino nero, icone a meta' della prima parola,
   riquadro incollato al piede di pagina.

   Un modificatore orfano non si vede leggendo il CSS — il selettore c'e' ed e'
   scritto bene — e si vede benissimo guardando la pagina. Quando si cancella
   un componente da un foglio, si cercano i suoi modificatori.

   La base sta qui e non in `componenti.css` perche' questa striscia esiste in
   fondo al catalogo e basta: la home e il configuratore hanno la loro, con la
   loro cornice. Il disegno e' lo stesso — pastiglia tonda rame chiaro, titolo,
   nota — cosi' chi passa dalla home al catalogo riconosce lo stesso oggetto. */

.st-garanzie {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 20px 10px;
    list-style: none;
}

.st-garanzia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    padding: 4px 14px;
}

/* Un filo fra una voce e l'altra: cinque coppie icona+testo affiancate senza
   separatore si leggono come un'unica riga lunga. */
.st-garanzia + .st-garanzia {
    border-left: 1px solid var(--st-p-riga, #EAE4DC);
}

.st-garanzia__icona {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--st-p-rame-tenue, #FBF1E8);
    color: var(--st-p-rame-testo, #AE4C0B);
}

.st-garanzia__testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.st-garanzia__testo strong {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--st-p-inchiostro, #23201D);
}

.st-garanzia__testo > span {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--st-p-debole, #726C64);
}

/* La striscia in fondo al catalogo e' appoggiata alla pagina, non sospesa
   sopra una fotografia come quella della home: bordo invece di ombra.
   Il margine sotto la stacca dal piede di pagina, contro cui prima sbatteva. */
.st-garanzie--piatta {
    position: static;
    transform: none;
    margin: var(--st-xxl) 0 var(--st-space-6);
    box-shadow: none;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-grande, 12px);
    background: var(--st-p-crema, #FAF6F1);
}

/* Sotto i 1080 px cinque colonne diventano cinque colonne strette in cui il
   testo va a capo a ogni parola: si passa a due file da tre e i fili verticali
   spariscono, perche' un filo fra due voci che stanno su righe diverse non
   separa niente — attraversa. */
@media (max-width: 1080px) {
    .st-garanzie {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 0;
        padding: 22px 14px;
    }

    .st-garanzia { justify-content: flex-start; }
    .st-garanzia + .st-garanzia { border-left: 0; }
}

@media (max-width: 720px) {
    .st-garanzie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .st-garanzie {
        grid-template-columns: 1fr;
        gap: 14px 0;
        padding: 18px 16px;
    }

    .st-garanzia { padding: 0; gap: 12px; }
    .st-garanzia__icona { width: 40px; height: 40px; }
}

@media (max-width: 782px) {
    .st-catalogo__testa {
        padding: var(--st-space-6) 0 var(--st-space-5);
    }

    .st-catalogo__categorie {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        /* Il bordo della pastiglia non deve essere tagliato dal contenitore */
        padding-bottom: 4px;
    }

    .st-catalogo__categorie::-webkit-scrollbar {
        display: none;
    }

    .st-chip-cat {
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   LA SCHEDA NELLA VETRINA
   ==========================================================================
   Tre difetti che venivano dai valori predefiniti del tema padre e che insieme
   rendevano la vetrina illeggibile.

   I selettori NON chiedono l'antenato `.woocommerce`: quella classe sta sul
   `body` delle pagine di WooCommerce, e la ricerca generica — quella che
   arriva da un segnalibro o da un motore, senza `post_type=product` — non ce
   l'ha. La stessa scheda si vestiva in un modo o nell'altro a seconda di come
   ci si era arrivati: 16 px da una parte, 34 dall'altra. `ul.products
   li.product` esiste solo dove c'e' un elenco di prodotti, quindi non serve
   altro per circoscriverlo. */

/* 1. LA FOTOGRAFIA NON RIEMPIVA IL SUO POSTO.
   Il riquadro nacque 300x400 — verticale — mentre le fotografie del catalogo
   sono orizzontali o quadrate: `cover` tagliava via meta' immagine, e della
   prima tapparella restava un frammento grigio con mezza scritta gialla. Si
   passo' a 4:3 con `contain`, che smise di tagliare e comincio' a lasciare
   **due bande di fondo** a destra e a sinistra di ogni scheda, perche' le
   fotografie sono quadrate (500x500) e il riquadro no.

   Il riquadro ora e' quadrato come le fotografie: `cover` lo riempie senza
   tagliare niente, perche' le proporzioni coincidono. Chi carichera' in futuro
   un'immagine non quadrata la vedra' ritagliata al centro — meglio un ritaglio
   simmetrico di una banda vuota su ogni scheda. */
ul.products li.product .ct-media-container,
ul.products li.product figure > a {
    display: block;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
    background: var(--st-p-sabbia, #F4F0EB);
}

ul.products li.product figure { margin: 0; }

ul.products li.product .ct-media-container img,
ul.products li.product figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}

/* 2. IL TITOLO ERA UN TITOLO DI SEZIONE, POI E' DIVENTATO UN TITOLO SERIF.
   Prima 34 px in grassetto: su una scheda larga 300 occupava duecento pixel su
   quattro righe. Rimpicciolito, restava scritto con il carattere dei titoli —
   Il serif dei titoli e' fatto per la parola grossa in cima alla pagina, dove le
   grazie sottili si vedono. A 14 px su due righe strette quelle stesse grazie
   diventano sporcizia, e i nomi lunghi del catalogo si leggono a fatica.
   Nel corpo del catalogo si usa il carattere del corpo. */
ul.products li.product .woocommerce-loop-product__title {
    margin: 12px 0 6px;
    font-family: var(--st-font-body, inherit);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

ul.products li.product .woocommerce-loop-product__title a {
    color: var(--st-p-inchiostro, #23201D);
    text-decoration: none;
}

ul.products li.product:hover .woocommerce-loop-product__title a {
    color: var(--st-copper-text);
}

/* 3. IL PREZZO ERA BLU.
   `rgb(58, 79, 102)` e' un colore del tema padre che non sta in questa palette
   e non e' mai stato scelto da nessuno.

   La cifra non porta piu' una misura propria: la eredita dalla riga del
   prezzo, cosi' chi cambia il corpo del prezzo cambia davvero il corpo del
   prezzo invece di cambiarne meta'. */
ul.products li.product .price {
    color: var(--st-p-inchiostro, #23201D);
    font-size: 1rem;
    font-weight: 600;
}

ul.products li.product .price .amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

ul.products li.product .st-price--onrequest {
    color: var(--st-muted);
    font-weight: 600;
}

/* La griglia delle schede, definita qui e non ereditata.
   Il tema padre la aggancia a classi che stanno sul `body` delle pagine di
   WooCommerce: la ricerca generica non le ha, e le schede uscivano una sotto
   l'altra larghe 1.392 px. Una regola sola, valida dovunque ci sia un elenco
   di prodotti, toglie la dipendenza da come ci si e' arrivati. */
ul.products {
    display: grid;
    /* Da 240 a 280 di larghezza minima: con 240 la colonna dei filtri lasciava
       spazio a cinque schede, e a cinque il nome del prodotto — che qui e' una
       frase, non una parola — si troncava a meta' con i puntini. Il catalogo
       diventava una fila di «Tenda a Vetro Filtrante con Cassonetto…», tutte
       uguali fino al punto in cui si interrompono. Con quattro il nome ci sta,
       e la fotografia e' piu' grande. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--st-space-4, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.products::before,
ul.products::after {
    display: none;   /* i clearfix del tema padre diventano celle vuote */
}

ul.products li.product {
    width: auto;      /* WooCommerce assegna percentuali fisse: in griglia sono d'intralcio */
    margin: 0;
    float: none;
    display: flex;
    flex-direction: column;
}

/* Il pulsante si appoggia in fondo, cosi' le schede di una riga finiscono
   tutte alla stessa altezza anche con nomi di lunghezza diversa. */
ul.products li.product .button {
    margin-top: auto;
}

/* ==================================================================== *
 * LA PAGINA DI CATEGORIA — colonna filtri + griglia a cinque
 *
 * I filtri erano una barra orizzontale da 965 px sopra la griglia, in mezzo
 * alle pastiglie che saltano da una categoria all'altra: due cose diverse —
 * «restringi questa lista» e «vai in un'altra lista» — messe una accanto
 * all'altra, con i numeri appiccicati, e nessun modo di capire quale facesse
 * cosa. Da fuori si legge come un mucchio.
 *
 * Ora sono una colonna a sinistra, larga 240, ferma mentre la griglia scorre.
 * La griglia prende i 1074 che restano e li divide in cinque.
 *
 * `display: contents` sull'involucro di Blocksy: conteggio, ordinamento e
 * filtri sono suoi figli ma appartengono a tre posti diversi della pagina.
 * Dissolvendolo diventano figli della griglia e si collocano uno per uno,
 * senza toccare i template del tema padre.
 * ==================================================================== */

/*
 * La soglia e' 901, non 1081.
 *
 * Fra 901 e 1080 la griglia a due colonne non si applicava e tutto tornava al
 * flusso: i filtri diventavano larghi settecento pixel e il conteggio dei
 * risultati finiva **sotto** di loro, in mezzo alla pagina. Non era una
 * sovrapposizione: era il layout che spariva, e con lui l'ordine degli
 * elementi.
 *
 * A 901 px restano 240 di filtri e 640 di griglia: tre schede per riga, che e'
 * il minimo perche' una griglia sembri una griglia.
 */
@media (min-width: 901px) {
  .archive .ct-container > section,
  .post-type-archive-product .ct-container > section {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "filtri barra"
      "filtri griglia"
      "filtri pagine";
    align-items: start;
    gap: 18px var(--st-l, 22px);
  }

  .archive .woo-listing-top,
  .post-type-archive-product .woo-listing-top { display: contents; }

  /*
   * DUE COLONNE CHE SCORRONO PER CONTO LORO
   *
   * Questa colonna era gia' `sticky`, e non lo era davvero: i filtri sono alti
   * 1638 px dentro una finestra da 900, e un elemento appiccicato piu' alto
   * della finestra si comporta come se non lo fosse — scorre via insieme alla
   * pagina. Le ultime voci si raggiungevano solo scendendo in fondo al
   * catalogo: chi cercava un tessuto in fondo all'elenco doveva prima passare
   * tutti i prodotti.
   *
   * Adesso la colonna ha un'altezza massima e uno scorrimento suo. Puntatore
   * sui prodotti: scorre la pagina. Puntatore sui filtri: scorrono i filtri.
   *
   * `overscroll-behavior: contain` e' la riga che fa la differenza e l'unica
   * che non si indovina: senza, arrivati in fondo ai filtri la rotella
   * **prosegue** sulla pagina — il salto piu' fastidioso che ci sia, perche'
   * succede proprio mentre si sta leggendo l'ultima voce.
   *
   * I 24 px tolti sono aria in fondo: una colonna che finisce esattamente al
   * bordo della finestra sembra tagliata anche quando e' finita.
   */
  .archive .st-filters,
  .post-type-archive-product .st-filters {
    grid-area: filtri;
    position: sticky;
    top: 96px;
    display: block;
    width: auto;
    margin: 0;
    max-height: calc(100vh - 96px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Lo spazio della barra si riserva sempre: se comparisse solo al passaggio
       del mouse, ogni etichetta si sposterebbe mentre la si sta leggendo. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--st-p-riga, #EAE4DC) transparent;
  }

  .archive .st-filters::-webkit-scrollbar,
  .post-type-archive-product .st-filters::-webkit-scrollbar { width: 8px; }

  .archive .st-filters::-webkit-scrollbar-thumb,
  .post-type-archive-product .st-filters::-webkit-scrollbar-thumb {
    background: var(--st-p-riga, #EAE4DC);
    border-radius: 999px;
  }

  .archive .st-filters::-webkit-scrollbar-thumb:hover,
  .post-type-archive-product .st-filters::-webkit-scrollbar-thumb:hover {
    background: var(--st-p-debole, #A9A29A);
  }

  .archive .st-filters::-webkit-scrollbar-track,
  .post-type-archive-product .st-filters::-webkit-scrollbar-track { background: transparent; }

  /* Conteggio e ordinamento condividono la riga in cima alla griglia: uno a
     sinistra, uno a destra. Stessa cella, estremi opposti — non si toccano. */
  .archive .woocommerce-result-count,
  .post-type-archive-product .woocommerce-result-count {
    grid-area: barra;
    justify-self: start;
    align-self: center;
    margin: 0;
  }

  .archive .woocommerce-ordering,
  .post-type-archive-product .woocommerce-ordering {
    grid-area: barra;
    justify-self: end;
    align-self: center;
    margin: 0;
  }

  .archive ul.products,
  .post-type-archive-product ul.products { grid-area: griglia; }

  .archive .woocommerce-pagination,
  .post-type-archive-product .woocommerce-pagination { grid-area: pagine; }

  /* La navigazione fra categorie resta sopra tutto, a tutta larghezza: e' un
     salto altrove, non un filtro di questa pagina, e mescolarla ai filtri era
     meta' del problema. */
  .archive .st-catalogo__categorie,
  .post-type-archive-product .st-catalogo__categorie {
    grid-column: 1 / -1;
    margin: 0 0 4px;
  }
}

/* --- la griglia ------------------------------------------------------- */

.archive ul.products,
.post-type-archive-product ul.products {
  display: grid;
  /* 190 dava cinque colonne accanto ai filtri, e a cinque il nome del prodotto
     — che qui e' una frase intera, «Tenda a Vetro Filtrante con Cassonetto
     senza rinunciare alla protezione solare» — si troncava dopo due righe. La
     pagina diventava una fila di titoli tutti uguali fino al punto in cui si
     interrompono, cioe' un catalogo in cui non si distingue niente.
     Con 280 le colonne sono quattro, il nome ci sta e la fotografia cresce. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce dichiara larghezze e margini in percentuale sulle schede: dentro
   una griglia diventano schede storte con vuoti irregolari. */
.archive ul.products > li,
.post-type-archive-product ul.products > li {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

@media (max-width: 1080px) {
  .archive .st-filters,
  .post-type-archive-product .st-filters { position: static; }
}

/* --- la scheda di catalogo ------------------------------------------- *
 *
 * RIFATTA. Cosa c'era prima, e perche' non andava.
 *
 * La scheda vecchia aveva tre difetti che si sommavano, e il piu' visibile —
 * il pulsante — era il meno grave.
 *
 * **La fotografia non riempiva il suo posto.** Il riquadro era 4:3 e le
 * fotografie del catalogo sono quadrate (500x500). Con `object-fit: contain`
 * e dieci pixel di margine, ogni immagine stava dentro un rettangolo piu'
 * largo di lei: due bande di fondo sabbia a destra e a sinistra, sempre, su
 * ogni scheda. Su una vetrina di sedici prodotti erano trentadue bande vuote.
 * Il riquadro ora e' **quadrato come le fotografie**: `cover` lo riempie senza
 * tagliare niente, perche' le proporzioni coincidono. Chi carichera' in futuro
 * un'immagine non quadrata la vedra' ritagliata al centro — che e' il
 * compromesso giusto: meglio un ritaglio simmetrico di una banda vuota.
 *
 * **Il titolo era scritto con il carattere dei titoli.** Il serif dei titoli e'
 * un carattere da display: e' fatto per la parola grossa in cima alla pagina,
 * dove le grazie sottili si vedono. A 13 px, su due righe strette, quelle
 * stesse grazie diventano sporcizia e i nomi lunghi del catalogo — «Tenda a
 * Rullo in Pvc per Esterno, Ingombro 80 mm...» — si leggono a fatica. Nel
 * corpo del catalogo si usa il carattere del corpo. Il serif resta dov'e'
 * giusto: il titolo della categoria, sopra la griglia.
 *
 * **Il pulsante non sembrava un pulsante.** Era testo rame, maiuscolo, 12,5
 * px, allineato a sinistra: un piede di scheda senza contorno, senza fondo,
 * indistinguibile da una nota. Nasceva da una preoccupazione giusta — cinque
 * rettangoli rame pieni in fila fanno una parete — risolta togliendo tutto
 * invece che togliendo il pieno. Ora e' un pulsante **con il contorno**: la
 * forma c'e' tutta, il rame c'e' solo sul filo e sul testo, e il pieno arriva
 * al passaggio del mouse, dove il rame vale come segnale invece che come
 * decorazione. E' la stessa regola scritta nei token: il rame non sta mai su
 * un'area grande **a riposo**.
 *
 * L'ALTEZZA UGUALE RESTA
 * ----------------------
 * Il piede si aggancia in fondo (`margin-top: auto` sul contenitore delle
 * azioni), cosi' i pulsanti di una riga stanno tutti alla stessa altezza
 * anche quando i titoli occupano una riga o due. Cinque schede con i pulsanti
 * scalinati si leggono come cinque schede storte.
 */

.archive ul.products > li.product,
.post-type-archive-product ul.products > li.product {
  display: flex;
  flex-direction: column;
  background: #fff;
  /* Niente filetto intorno. Su una pagina di catalogo le schede sono
     venticinque, e venticinque rettangoli bordati sono una tabella: l'occhio
     legge la griglia invece delle tende. Un'ombra bassa le stacca dalla carta
     senza disegnarne il perimetro, e al passaggio del mouse si alza. */
  border: 0;
  border-radius: var(--st-r-grande, 28px);
  overflow: hidden;
  box-shadow: var(--st-ombra-scheda);
  transition: box-shadow .2s ease, transform .2s ease;
}

.archive ul.products > li.product:hover,
.post-type-archive-product ul.products > li.product:hover {
  box-shadow: var(--st-ombra-lastra);
  transform: translateY(-4px);
}

/* --- la fotografia ---------------------------------------------------- *
 *
 * Il riquadro e' quadrato e il ritaglio e' `cover`: le fotografie del catalogo
 * sono quadrate, quindi in pratica non si ritaglia niente e non avanza niente.
 * Il fondo sabbia resta per il momento in cui l'immagine non c'e' ancora —
 * `loading="lazy"` la fa arrivare dopo — cosi' la griglia non lampeggia di
 * bianco mentre si scorre.
 */
.archive ul.products > li.product figure,
.post-type-archive-product ul.products > li.product figure {
  margin: 0;
  aspect-ratio: auto;
}

.archive ul.products > li.product .ct-media-container,
.post-type-archive-product ul.products > li.product .ct-media-container,
.archive ul.products > li.product figure > a,
.post-type-archive-product ul.products > li.product figure > a {
  display: block;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  background: var(--st-p-sabbia, #F4F0EB);
}

.archive ul.products > li.product figure img,
.post-type-archive-product ul.products > li.product figure img,
.archive ul.products .attachment-woocommerce_thumbnail,
.post-type-archive-product ul.products .attachment-woocommerce_thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* Un avvicinamento appena percettibile: dice che la scheda risponde, senza
   trasformare una griglia di sedici prodotti in una giostra. */
.archive ul.products > li.product:hover figure img,
.post-type-archive-product ul.products > li.product:hover figure img {
  transform: scale(1.045);
}

/* --- il nome del prodotto --------------------------------------------- */

.archive ul.products .woocommerce-loop-product__title,
.post-type-archive-product ul.products .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  margin: 0;
  padding: 14px 14px 0;
  font-family: var(--st-font-body, inherit);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--st-p-inchiostro, #23201D);
}

.archive ul.products .woocommerce-loop-product__title a,
.post-type-archive-product ul.products .woocommerce-loop-product__title a {
  color: inherit;
  text-decoration: none;
}

.archive ul.products > li.product:hover .woocommerce-loop-product__title a,
.post-type-archive-product ul.products > li.product:hover .woocommerce-loop-product__title a {
  color: var(--st-p-rame-testo, #AE4C0B);
}

/* Il bollo «su preventivo» sta fra il nome e il prezzo, e ha bisogno del
   margine laterale della scheda: senza, tocca il bordo. */
.archive ul.products > li.product .st-badge--quote,
.post-type-archive-product ul.products > li.product .st-badge--quote {
  align-self: flex-start;
  margin: 8px 14px 0;
}

/* --- il prezzo -------------------------------------------------------- *
 *
 * «a partire da» va **sopra** la cifra, non davanti.
 *
 * Sulla stessa riga occupava meta' larghezza, con il risultato che la cosa
 * che conta — il numero — arrivava a fine riga in mezzo a schede diverse a
 * posizioni diverse. Su due righe la cifra comincia sempre allo stesso punto,
 * e su cinque schede affiancate si confrontano cinque numeri incolonnati
 * invece di cinque frasi.
 *
 * Si aggancia in fondo (`margin: auto 0 0`) perche' e' l'unica riga che deve
 * stare alla stessa altezza su tutte le schede della riga.
 */
.archive ul.products .price,
.post-type-archive-product ul.products .price {
  margin: auto 0 0;
  padding: 12px 14px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  color: var(--st-p-inchiostro, #23201D);
}

.archive ul.products .price .st-price__prefix,
.post-type-archive-product ul.products .price .st-price__prefix {
  /* Era «A PARTIRE DA» maiuscolo su una riga tutta sua, e il numero — la sola
     cosa che si cerca scorrendo una griglia — finiva secondo. Adesso il
     markup dice «da» e questa regola lo tiene accanto alla cifra, minuscolo e
     piccolo: la stessa informazione senza rubare la riga. */
  display: inline;
  margin-bottom: 0;
  /* Il «da» e' descritto due volte in questo stesso foglio, qui e piu' sotto
     accanto al prezzo: questa vince, e diceva .78rem mentre l'altra diceva
     13. Adesso dicono lo stesso gradino. */
  font-size: var(--st-fs-micro);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--st-muted, #7B766D);
}

.archive ul.products .st-price--onrequest,
.post-type-archive-product ul.products .st-price--onrequest {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--st-p-debole, #726C64);
}

/* --- il pulsante ------------------------------------------------------ *
 *
 * Il contenitore delle azioni e' di Blocksy ed e' un flex con allineamento
 * «equal»: lasciato com'e', il pulsante diventava un elemento flessibile
 * largo quanto la parola dentro, appoggiato a sinistra. Qui torna un blocco,
 * e il pulsante prende tutta la larghezza della scheda meno il margine.
 */
.archive ul.products > li.product .ct-woo-card-actions,
.post-type-archive-product ul.products > li.product .ct-woo-card-actions {
  display: block;
  margin: 0;
  padding: 12px 14px 14px;
}

.archive ul.products .button,
.post-type-archive-product ul.products .button,
.archive ul.products .add_to_cart_button,
.post-type-archive-product ul.products .add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--st-p-rame, #B45A17);
  border-radius: var(--st-r-campo, 8px);
  background: #fff;
  color: var(--st-p-rame-testo, #AE4C0B);
  font-family: var(--st-font-body, inherit);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/*
 * La punta di freccia e' disegnata con due bordi, non scritta con un
 * carattere: «›» e «→» cambiano forma, peso e allineamento verticale da un
 * sistema all'altro, e in un pulsante finiscono mezzo pixel sopra o sotto la
 * parola. Due bordi ruotati sono la stessa forma ovunque.
 */
.archive ul.products .button::after,
.post-type-archive-product ul.products .button::after {
  /* Erano due bordi ruotati di 45 gradi: un chevron. La tavola ha una freccia
     intera — asta piu' punta — e un chevron accanto a «Scopri di piu'» sembra
     un accordion che si apre, non un link che porta altrove. */
  content: '';
  flex: none;
  width: 16px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h19M14.5 1L20 6l-5.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h19M14.5 1L20 6l-5.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .18s ease;
}

/*
 * LO STATO AL PASSAGGIO DEL MOUSE VA SCRITTO INTERO
 *
 * Qui una volta c'era solo `background`, e il colore del testo restava quello
 * che il tema sotto assegna ai propri pulsanti al passaggio del mouse —
 * bianco, perche' i suoi pulsanti hanno il fondo pieno. Il nostro allora non
 * ce l'aveva: il risultato era «CONFIGURA» bianco su crema, cioe' l'invito ad
 * agire che sparisce nel momento esatto in cui qualcuno lo sta puntando.
 *
 * La lezione vale oltre questa riga: quando si cambia uno stato di un elemento
 * che arriva da un tema, si dichiarano **tutte** le proprieta' che quello
 * stato tocca. Cambiarne una e fidarsi delle altre significa ereditare
 * decisioni prese per un elemento diverso.
 *
 * Ora il pieno arriva davvero, e con lui il testo bianco: e' scritto qui, non
 * ereditato.
 */
.archive ul.products .button:hover,
.post-type-archive-product ul.products .button:hover,
.archive ul.products .add_to_cart_button:hover,
.post-type-archive-product ul.products .add_to_cart_button:hover,
.archive ul.products > li.product:hover .button,
.post-type-archive-product ul.products > li.product:hover .button {
  /* Il richiamo non e' piu' un pulsante pieno ma una riga di testo: riempirlo
     di rame al passaggio disegnerebbe una pastiglia che a riposo non esiste. */
  background: none;
  border-color: transparent;
  color: var(--st-copper, #B65532);
}

.archive ul.products .button:hover::after,
.post-type-archive-product ul.products .button:hover::after,
.archive ul.products > li.product:hover .button::after,
.post-type-archive-product ul.products > li.product:hover .button::after {
  transform: translateX(3px);
}

/* Premuto: il fondo si scurisce di un passo. Senza, fra il puntare e il
   premere non succede niente e il clic sembra non essere arrivato. */
.archive ul.products .button:active,
.post-type-archive-product ul.products .button:active,
.archive ul.products .add_to_cart_button:active,
.post-type-archive-product ul.products .add_to_cart_button:active {
  background: var(--st-p-rame-scuro, #8F3D08);
  border-color: var(--st-p-rame-scuro, #8F3D08);
  color: #fff;
}

.archive ul.products .button:focus-visible,
.post-type-archive-product ul.products .button:focus-visible,
.archive ul.products .add_to_cart_button:focus-visible,
.post-type-archive-product ul.products .add_to_cart_button:focus-visible {
  background: var(--st-p-rame, #B45A17);
  border-color: var(--st-p-rame, #B45A17);
  color: #fff;
  outline: 2px solid var(--st-p-rame-scuro, #8F3D08);
  outline-offset: 2px;
}

/* Il cuore resta dentro la scheda, in alto a destra sull'immagine. */
.archive ul.products .st-wish,
.post-type-archive-product ul.products .st-wish {
  top: 10px;
  right: 10px;
}

/* Chi ha chiesto di non vedere movimento non vede ne' il sollevamento della
   scheda ne' l'avvicinamento della fotografia. Il cambio di colore resta:
   non e' movimento, ed e' l'unico segnale che dice «questo si preme». */
@media (prefers-reduced-motion: reduce) {
  .archive ul.products > li.product,
  .post-type-archive-product ul.products > li.product,
  .archive ul.products > li.product figure img,
  .post-type-archive-product ul.products > li.product figure img,
  .archive ul.products .button,
  .post-type-archive-product ul.products .button {
    transition: none;
  }

  .archive ul.products > li.product:hover,
  .post-type-archive-product ul.products > li.product:hover {
    transform: none;
  }

  .archive ul.products > li.product:hover figure img,
  .post-type-archive-product ul.products > li.product:hover figure img {
    transform: none;
  }
}

/* ==================================================================== *
 * CATEGORIA SU TELEFONO: DUE COLONNE
 *
 * A 390 px la griglia passava a una colonna e la pagina diventava lunga
 * **9 673 pixel** — undici schermate e mezzo per sedici prodotti, contro 2 857
 * su desktop. Nessuno arriva in fondo a una pagina cosi', e chi non arriva in
 * fondo non vede meta' del catalogo. Due colonne dimezzano la pagina.
 *
 * IL PULSANTE ORA C'E' ANCHE QUI, E PRIMA NO
 *
 * Era nascosto sotto i 780 px, con questa motivazione: «la scheda intera e'
 * gia' un collegamento, ripeterlo dentro e' peso senza funzione». La prima
 * meta' non era vera — cliccabili sono la fotografia e il nome, non la scheda
 * — e la seconda dipendeva da com'era fatto il pulsante: un rettangolo rame
 * pieno alto quaranta pixel su una scheda larga centosettanta era davvero
 * troppo.
 *
 * Su un catalogo su misura quel pulsante non e' una scorciatoia: e' la parola
 * che dice cosa succede dopo. Senza, la scheda su telefono e' una fotografia
 * e un prezzo, e il prezzo — «a partire da» — sembra il prezzo di un prodotto
 * finito. Costa una quarantina di pixel per scheda, che su otto righe sono un
 * terzo di schermata: si paga volentieri.
 *
 * Nella descrizione invece si resta della stessa idea: a 170 px sono tre
 * parole e i puntini.
 * ==================================================================== */

@media (max-width: 780px) {
  .archive ul.products,
  .post-type-archive-product ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .archive ul.products .woocommerce-loop-product__title,
  .post-type-archive-product ul.products .woocommerce-loop-product__title {
    padding: 10px 10px 0;
    font-size: .8125rem;
    min-height: 2.6em;
  }

  .archive ul.products .price,
  .post-type-archive-product ul.products .price {
    padding: 10px 10px 0;
    font-size: .9375rem;
  }

  .archive ul.products > li.product .st-badge--quote,
  .post-type-archive-product ul.products > li.product .st-badge--quote {
    margin: 6px 10px 0;
  }

  .archive ul.products > li.product .ct-woo-card-actions,
  .post-type-archive-product ul.products > li.product .ct-woo-card-actions {
    padding: 10px 10px 10px;
  }

  .archive ul.products .button,
  .post-type-archive-product ul.products .button {
    /* Quarantaquattro e non trentotto: e' il richiamo all'azione principale
       della scheda, ed era l'unico comando del sito rimasto sotto la misura
       del dito. Sei pixel per scheda su due colonne sono niente. */
    min-height: 44px;
    padding: 9px 10px;
    font-size: .75rem;
    gap: 6px;
  }

  /* La descrizione a questa larghezza non e' una descrizione: sono tre parole
     e i puntini. */
  .archive ul.products .st-card__desc,
  .post-type-archive-product ul.products .st-card__desc { display: none; }
}
/* --- le pastiglie del filtro colore ------------------------------------ */

.st-chip--tinta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.st-chip__tinta {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  /* Il bordo serve alle tinte chiare: senza, «Bianco» su fondo bianco e'
     un cerchio invisibile e la pastiglia sembra rotta. */
  box-shadow: inset 0 0 0 1px rgba(35, 32, 29, .18);
}

/* Sulla pastiglia scelta il pallino si stacca dal fondo rame. */
.st-chip.is-on .st-chip__tinta {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 255, 255, .5);
}

/* --- i gruppi di filtro come tendine ----------------------------------- */

.st-filters__group {
  border: 0;
  padding: 0;
  margin: 0;
}

.st-filters__group + .st-filters__group {
  border-top: 1px solid var(--st-p-riga, #EAE4DC);
  margin-top: 14px;
  padding-top: 14px;
}

.st-filters__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  font: 500 12px/1 var(--st-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-p-grigio, #6F6A64);
}

.st-filters__legend::-webkit-details-marker { display: none; }

/* La freccia la disegniamo noi: quella del browser cambia da un sistema
   all'altro e su Safari e' un triangolo pieno che stona con tutto il resto. */
.st-filters__legend::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

.st-filters__group[open] > .st-filters__legend::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.st-filters__group[open] > .st-filters__legend { color: var(--st-p-inchiostro, #23201D); }

/* Quanti filtri sono attivi in quel gruppo: si vede a tendina chiusa, ed e'
   l'unica cosa che deve sopravvivere alla chiusura. */
.st-filters__attivi {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--st-p-rame, #B45A17);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.st-filters__values { padding-top: 12px; }

.st-filters__legend:focus-visible {
  outline: 2px solid var(--st-p-rame, #B45A17);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==================================================================== *
 * LE CATEGORIE VANNO NELLA COLONNA, NON SOPRA LA GRIGLIA
 *
 * Erano una fila di pastiglie fra il titolo e i prodotti: «Tutte, Tapparelle
 * 10, Tende da interno 46, Tende da Sole 11, Zanzariere 20». Occupavano la
 * riga in cui devono stare il conteggio dei risultati e l'ordinamento, e a
 * certe larghezze finivano sopra di loro.
 *
 * Ma il problema non era la posizione: erano nel posto sbagliato **di
 * concetto**. Quelle pastiglie non filtrano questa lista — portano a
 * un'altra lista. Messe sopra la griglia, accanto ai filtri, chiedevano al
 * cliente di capire da solo che due file di pastiglie identiche facevano cose
 * opposte.
 *
 * Nella colonna, in cima e con la loro intestazione, tornano a essere quello
 * che sono: la navigazione fra le sezioni del catalogo.
 * ==================================================================== */

@media (min-width: 901px) {
  .archive .st-catalogo__categorie,
  .post-type-archive-product .st-catalogo__categorie {
    grid-area: filtri;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
  }

  /* La colonna tiene due cose impilate: prima dove vai, poi cosa restringi. */
  .archive .ct-container > section,
  .post-type-archive-product .ct-container > section {
    grid-template-areas:
      "filtri barra"
      "filtri griglia"
      "filtri pagine";
  }

  .archive .st-filters,
  .post-type-archive-product .st-filters { grid-area: filtri; margin-top: 0; }
}

/*
 * Le voci diventano un elenco, non pastiglie: una pastiglia dice «premimi per
 * filtrare», una riga dice «vai qui». Sono due gesti diversi e devono
 * sembrarlo.
 */
.st-catalogo__categorie .st-chip-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--st-r-campo, 8px);
  background: none;
  font-size: .8125rem;
  color: var(--st-p-grigio, #6F6A64);
  text-decoration: none;
}

.st-catalogo__categorie .st-chip-cat:hover { background: var(--st-p-crema, #FAF6F1); }

.st-catalogo__categorie .st-chip-cat.is-on {
  background: var(--st-p-rame-tenue, #FBF1E8);
  color: var(--st-p-rame-testo, #AE4C0B);
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--st-p-rame, #B45A17);
}

.st-catalogo__categorie .st-chip-cat span {
  font-size: .75rem;
  color: var(--st-p-debole, #726C64);
  font-variant-numeric: tabular-nums;
}

.st-catalogo__categorie-titolo {
  margin: 0 0 8px;
  padding: 0 10px;
  font: 500 12px/1 var(--st-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-p-grigio, #6F6A64);
}

/* ====================================================================
 * I FILTRI, RIFATTI
 *
 * Cosa c'era: tre tendine di pastiglie in una colonna a sinistra, e su
 * telefono la stessa colonna schiacciata sopra la griglia dietro un pulsante
 * «Filtra». Funzionava, e mancavano le due cose che su un catalogo su misura
 * contano di piu':
 *
 *   **la misura.** Il colore di una tenda che non si puo' fare della misura
 *   giusta non interessa a nessuno. Colore e tipo restringono una lista; la
 *   misura decide se la lista ha senso. Adesso e' il primo filtro, in cima a
 *   tutti;
 *
 *   **sapere cosa e' attivo.** Le scelte erano sparse in tre tendine, due
 *   delle quali potevano essere chiuse: per sapere cosa si stava filtrando
 *   bisognava aprirle una per una, e per togliere un filtro solo bisognava
 *   ritrovare la voce da spuntare di nuovo.
 *
 * Su telefono il pannello adesso copre lo schermo, con la sua testata e un
 * piede che dice quanti prodotti restano. La colonna schiacciata sopra la
 * griglia costringeva a scorrere fra i filtri e i risultati per capire
 * l'effetto di ogni spunta.
 * ==================================================================== */

/* --- il filtro per misura --------------------------------------------- */

.st-filters__misure {
  padding: 0 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

.st-filters__legend--fisso {
  display: block;
  margin: 0 0 4px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-p-inchiostro, #23201D);
}

.st-filters__aiuto {
  margin: 0 0 12px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--st-p-debole, #726C64);
}

.st-filters__aiuto--minuto { margin: 10px 0 0; font-size: var(--st-fs-micro); }

.st-misurefiltro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.st-misurefiltro__campo { display: block; min-width: 0; }

.st-misurefiltro__campo label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--st-fs-micro);
  font-weight: 600;
  color: var(--st-p-grigio, #6F6A64);
}

/*
 * L'UNITA' STA DENTRO IL RIQUADRO, NON ACCANTO AL NUMERO
 *
 * E' la stessa forma gia' usata nel configuratore, ed e' la stessa ragione:
 * «120» e «120 cm» sono due cose diverse da leggere, e l'unita' scritta fuori
 * dal campo si stacca dal numero appena la colonna si stringe.
 *
 * Il riquadro e' il contenitore; il campo dentro non ha bordo. Cosi' il fuoco
 * illumina tutto il gruppo invece del solo rettangolo del numero.
 */
.st-misurefiltro__num {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 12px;
  background: #fff;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: var(--st-r-campo, 8px);
}

.st-misurefiltro__num:focus-within {
  border-color: var(--st-p-rame, #B45A17);
  box-shadow: 0 0 0 3px var(--st-p-rame-tenue, #FBF1E8);
}

.st-misurefiltro__num input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  /*
   * 16 px PIENI, NON 15
   *
   * Safari su iPhone ingrandisce la pagina da solo quando prende il fuoco un
   * campo con testo sotto i 16 px. Qui erano 15: toccare «larghezza» faceva
   * saltare la scala della pagina, e per tornare a vedere il catalogo bisogna
   * pizzicare indietro a mano — su un filtro che serve proprio a scorrere il
   * catalogo. Il quarto di pixel risparmiato non valeva quel prezzo.
   *
   * Lo stesso valore del campo misure nella home, che fa la stessa domanda.
   */
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-p-inchiostro, #23201D);
}

.st-misurefiltro__num input:focus { outline: none; }

/* Le frecce del campo numerico rubano venti pixel a una colonna che ne ha
   centoventi, e nessuno le usa per scrivere una misura. */
.st-misurefiltro__num input::-webkit-outer-spin-button,
.st-misurefiltro__num input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.st-misurefiltro__num input[type="number"] { -moz-appearance: textfield; }

.st-misurefiltro__num span {
  flex: none;
  font-size: .8125rem;
  color: var(--st-p-debole, #726C64);
}

.st-misurefiltro__vai {
  grid-column: 1 / -1;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--st-p-rame, #B45A17);
  border-radius: var(--st-r-campo, 8px);
  background: var(--st-p-rame, #B45A17);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease;
}

.st-misurefiltro__vai:hover { background: var(--st-p-rame-scuro, #8F3D08); }

/* --- le pastiglie dei filtri attivi ----------------------------------- */

.st-filtriattivi {
  padding: 14px 0;
  border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

.st-filtriattivi__eti {
  display: block;
  margin-bottom: 8px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-p-debole, #726C64);
}

.st-filtriattivi__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-filtriattivi__voce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  background: var(--st-p-rame-tenue, #FBF1E8);
  color: var(--st-p-rame-testo, #AE4C0B);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease;
}

.st-filtriattivi__voce:hover { background: #F6E5D6; }

/* La croce e' disegnata con due tratti: un carattere «×» cambia forma e
   allineamento da un sistema all'altro, e dentro una pastiglia si vede. */
.st-filtriattivi__x {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.st-filtriattivi__x::before,
.st-filtriattivi__x::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1.6px;
  border-radius: 1px;
  background: currentColor;
}

.st-filtriattivi__x::before { transform: rotate(45deg); }
.st-filtriattivi__x::after { transform: rotate(-45deg); }

/* Testata e piede del pannello: su schermo largo non servono, perche' il
   pannello e' una colonna che sta li' e non si apre. */
.st-filters__testa,
.st-filters__piede,
.st-filters__velo { display: none; }

/* ====================================================================
 * SU TELEFONO IL PANNELLO COPRE LO SCHERMO
 *
 * La colonna schiacciata sopra la griglia costringeva a scorrere avanti e
 * indietro fra i filtri e i risultati per capire l'effetto di ogni spunta. Un
 * pannello a tutto schermo con il conto dei prodotti in fondo risponde alla
 * domanda senza farlo chiudere.
 * ==================================================================== */

@media (max-width: 900px) {
  .st-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-campo, 8px);
    background: #fff;
    font-size: .875rem;
    font-weight: 600;
    color: var(--st-p-inchiostro, #23201D);
    cursor: pointer;
  }

  .st-filters__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--st-p-rame, #B45A17);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
  }

  .st-filters__velo {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(35, 32, 29, .38);
  }

  .st-filters__body {
    position: fixed;
    inset: 0;
    z-index: 999;
    /* `stretch` dichiarato, non dato per scontato.
       In colonna il valore predefinito allarga i figli, ma qui l'allineamento
       arriva ereditato da una regola piu' su e valeva `flex-start`: la
       testata, il piede e il filo di separazione erano larghi quanto il loro
       contenuto — duecentoquarantacinque pixel su trecentonovanta — e il
       pulsante «Mostra N prodotti» sembrava messo li' per sbaglio. */
    align-items: stretch;
    /* Il margine va azzerato esplicitamente.
       `position: fixed` con `top: 0` **non** annulla un margine ereditato: il
       riquadro si ancora al bordo dello schermo e poi il margine lo sposta di
       nuovo. Dodici pixel in cima significavano dodici pixel di piede fuori
       dallo schermo, cioe' il pulsante «Mostra N prodotti» tagliato proprio
       mentre serve. Il computed diceva `top: 0` e il riquadro stava a 12: si
       vede solo misurando il rettangolo, non le proprieta'. */
    margin: 0;
    display: flex;
    flex-direction: column;
    /* `100dvh` e non `100vh`: su telefono la barra del browser compare e
       sparisce, e con `vh` il piede del pannello finisce sotto di lei —
       cioe' il pulsante «Mostra N prodotti» diventa irraggiungibile proprio
       mentre serve. */
    height: 100dvh;
    padding: 0;
    background: #fff;
    /* Chiuso non e' `display: none`: cosi' l'animazione ha da dove partire e
       il contenuto resta nel documento per chi legge con la voce. */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.2, .7, .3, 1), visibility 0s .26s;
  }

  .st-filters[data-open] .st-filters__body {
    transform: translateY(0);
    visibility: visible;
    transition: transform .26s cubic-bezier(.2, .7, .3, 1);
  }

  .st-filters__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
  }

  .st-filters__titolo {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--st-p-inchiostro, #23201D);
  }

  .st-filters__chiudi {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    background: none;
    color: var(--st-p-inchiostro, #23201D);
    cursor: pointer;
  }

  /* Il corpo scorre, la testata e il piede no: e' quello che rende un
     pannello un pannello invece di una pagina dentro una pagina. */
  .st-filters__misure,
  .st-filtriattivi,
  .st-filters__group,
  .st-filters__clear {
    flex: none;
    margin-inline: 16px;
  }

  .st-filters__body {
    overflow: hidden;
  }

  .st-filters__body > :not(.st-filters__testa):not(.st-filters__piede) {
    flex: 0 0 auto;
  }

  .st-filters__piede {
    display: block;
    flex: none;
    margin-top: auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
  }

  /* Il selettore porta l'antenato: `.st-btn` viene ridichiarato in fogli che
     si caricano dopo questo, e una classe sola contro una classe sola la
     vince l'ultima che passa. Quarta volta in questo progetto, stessa
     lezione — l'eccezione va scritta piu' precisa della regola. */
  .st-filters .st-filters__mostra {
    /* `display: flex` e non solo `width: 100%`: `.st-btn` e' un
       `inline-flex`, e su un elemento in linea la larghezza al cento per
       cento si misura sul contenuto invece che sulla riga. Il pulsante
       restava largo quanto la sua frase, in mezzo a un piede vuoto. */
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .st-misurefiltro { grid-template-columns: 1fr 1fr; }
}

/* Su schermo largo il pulsante «Filtra» non serve: la colonna e' gia' li'. */
@media (min-width: 901px) {
  .st-filters__toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-filters__body { transition: none; }
}

/* Il menu di ordinamento sul telefono.
   Il collaudo l'ha misurato alto 34 px: e' un comando che si preme col dito,
   e trentaquattro pixel sono meno di un polpastrello. Quarantaquattro e' la
   misura che il resto del sito usa gia' per tutto cio' che si preme, e qui
   non c'e' ragione di fare eccezione — accanto non ha niente da cui debba
   distinguersi per dimensione. */
.woocommerce-ordering select,
select.orderby {
    min-height: 44px;
    padding-block: 0;
    border-radius: var(--st-r-campo, 12px);
}

/* =======================================================================
 * LA COLONNA DEI FILTRI, RIFATTA SULLA TAVOLA
 *
 * Erano pastiglie dentro una scheda crema. La tavola li vuole come un
 * elenco di caselle: intestazione maiuscoletta con il chevron, una voce per
 * riga con il conteggio in coda, e un filetto fra un gruppo e l'altro.
 *
 * Le caselle sono disegnate, non `<input type=checkbox>`: i valori sono
 * link — servono a essere condivisi e indicizzati, e un checkbox non ha un
 * indirizzo. `aria-pressed` dice lo stato a chi ascolta, il quadratino lo
 * dice a chi guarda.
 * ===================================================================== */

.st-catalogo__lato .st-filters,
.st-filters {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* «Filtra per» in cima alla colonna. Non c'era: la colonna cominciava con il
   riquadro delle misure e nessuno diceva che quella e' la zona dei filtri.

   Da 901 px in su, come la regola dello sfondo qui sopra e per la stessa
   ragione: sotto, lo stesso elemento e' un pannello che ha gia' la sua
   intestazione «Filtra» con la crocetta. Le due si sovrapponevano, e la
   scritta della colonna spuntava tagliata sopra il bordo del pannello. */
@media (min-width: 901px) {
.st-filters__body::before {
    content: "Filtra per";
    display: block;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-p-inchiostro, #15181B);
}
}

.st-filters__group { border: 0; padding: 0; }
.st-filters__group + .st-filters__group {
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid var(--st-border, #E4DDD2);
}
.st-filters__group:not(:last-child) { padding-bottom: 16px; }

.st-filters__legend {
    padding: 0;
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--st-p-inchiostro, #15181B);
}

.st-filters__values { display: grid; gap: 9px; padding-top: 13px; }

/* La voce: quadratino, nome, conteggio. Il conteggio sta accanto al nome e
   non a destra della riga — a destra sembrava una colonna di numeri slegata
   dalle parole. */
.st-filters__values .st-chip {
    /* Flex e non griglia: con `grid-template-columns` il conteggio finiva in
       una terza cella larga quanto una cifra, e «(14)» si impilava in
       verticale una cifra per riga. */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--st-text, #15181B);
    text-decoration: none;
    line-height: 1.4;
}
.st-filters__values .st-chip::before {
    content: "";
    flex: 0 0 auto;
    width: 15px; height: 15px;
    border: 1.5px solid var(--st-border-strong, #CBBFAE);
    border-radius: 4px;
    background: #fff;
    transition: background .15s, border-color .15s;
}
.st-filters__values .st-chip:hover::before { border-color: var(--st-copper, #B65532); }
.st-filters__values .st-chip.is-on::before {
    background: var(--st-copper, #B65532);
    border-color: var(--st-copper, #B65532);
    /* La spunta e' disegnata nel fondo invece che con uno pseudo-elemento in
       piu': `::before` e' gia' occupato dal quadratino e `::after` serve al
       chevron del gruppo. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.st-filters__values .st-chip.is-on { font-weight: 500; }
.st-filters__values .st-chip__count {
    display: inline;
    margin-left: 5px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--st-muted, #7B766D);
}
.st-filters__values .st-chip__count::before { content: "("; }
.st-filters__values .st-chip__count::after { content: ")"; }

/* IL COLORE E' UNA FILA DI PALLINI, NON UN ELENCO
   Undici righe con un quadratino e il nome del colore sono undici righe da
   leggere per scegliere una cosa che si riconosce a vista. */
.st-filters__group:has(.st-chip--tinta) .st-filters__values {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.st-filters__values .st-chip--tinta {
    display: block;
    width: 26px; height: 26px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    /* Lo zero e' voluto e non va «sistemato» da chi misura i corpi: qui il
       filtro e' un pallino di colore, e il nome («Grigio 37») resta nel
       documento perche' e' il nome accessibile del comando — chi naviga a
       voce lo sente, chi guarda vede il colore. */
    font-size: 0;
    box-shadow: 0 0 0 1px var(--st-border, #E4DDD2);
}
.st-filters__values .st-chip--tinta::before { display: none; }
.st-filters__values .st-chip--tinta .st-chip__tinta {
    display: block; width: 100%; height: 100%; margin: 0; border-radius: 0;
}
.st-filters__values .st-chip--tinta .st-chip__count { display: none; }
.st-filters__values .st-chip--tinta.is-on {
    box-shadow: 0 0 0 2px var(--st-copper, #B65532), 0 0 0 4px var(--st-p-carta, #F7F4EF);
}

/* =======================================================================
 * LA SCHEDA IN GRIGLIA, RIFATTA SULLA TAVOLA
 *
 * Aveva il titolo in sans, il prezzo con «A PARTIRE DA» su una riga sua e un
 * pulsante contornato largo quanto la scheda. La tavola la vuole piu' quieta:
 * titolo serif, la categoria come riga grigia sotto, e in fondo una sola riga
 * con il prezzo a sinistra e «Scopri di piu'» a destra.
 *
 * Il pulsante resta nel documento e resta un link vero — cambia solo che
 * smette di gridare. Toglierlo avrebbe tolto anche il bersaglio grande, che
 * su un telefono e' quello che si tocca.
 * ===================================================================== */

ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--st-font-display, Georgia, serif);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--st-p-inchiostro, #15181B);
    /* Due righe e poi i puntini: i nomi di catalogo arrivano a dodici parole,
       e una scheda alta il doppio delle sue vicine rompe la griglia. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* La categoria diventa la riga di descrizione della tavola. Il dato c'e' gia'
   ed e' vero: non serve inventare un sottotitolo. */
ul.products li.product .entry-meta {
    display: block;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--st-muted, #7B766D);
}
ul.products li.product .entry-meta .meta-categories { display: inline; }
ul.products li.product .entry-meta a { color: inherit; text-decoration: none; }

/* Il prezzo: «da € 89» su una riga sola, con il numero in evidenza. */
ul.products li.product .price { margin-top: 12px; }
ul.products li.product .st-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--st-font-display, Georgia, serif);
    font-size: var(--st-fs-lead);
    font-weight: 600;
    color: var(--st-p-inchiostro, #15181B);
}
ul.products li.product .st-price__prefix {
    /* Diceva «a partire da» in maiuscoletto su una riga sua. Qui e' un «da»
       minuscolo accanto al numero: la stessa informazione in due caratteri,
       e il numero smette di essere il secondo elemento della riga. */
    font-family: var(--st-font-body, inherit);
    font-size: var(--st-fs-micro);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--st-muted, #7B766D);
}

/* Il richiamo: da pulsante contornato a riga di testo con la freccia. */
ul.products li.product .button.add_to_cart_button,
ul.products li.product a.button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    /* IL BERSAGLIO RESTA GRANDE ANCHE SE IL PULSANTE NON SI VEDE PIU'
       Togliendo il fondo e la cornice il comando era alto 14px: la misura del
       testo. Il collaudo lo ha preso su ventiquattro controlli, e ha ragione —
       sotto i 44px un dito lo manca. La spaziatura verticale ridà l'area
       toccabile senza ridisegnare la pastiglia: si vede una riga di testo, si
       tocca un rettangolo. */
    padding-block: 13px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--st-copper-text, #B45431);
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
ul.products li.product a.button::after {
    content: "";
    width: 16px; height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h19M14.5 1L20 6l-5.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h19M14.5 1L20 6l-5.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform .2s;
}
ul.products li.product a.button:hover { background: none; color: var(--st-copper, #B65532); }
ul.products li.product a.button:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    ul.products li.product a.button::after { transition: none; }
    ul.products li.product a.button:hover::after { transform: none; }
}

/* La colonna non e' una scheda. Era un riquadro crema con raggio e ombra, e
   dentro ci stavano sia le misure sia i gruppi: due cose diverse chiuse nello
   stesso contenitore. La tavola le tiene sullo sfondo della pagina, separate
   da filetti.

   SOLO DA 901 PX IN SU, E IL PERCHE' VALE LA PENA LEGGERLO
   Questa regola era senza media query, e lo stesso elemento sotto i 900 px
   non e' una colonna: e' un pannello `position: fixed` a tutto schermo, con
   `z-index: 999`, che si apre sopra il catalogo. Togliergli lo sfondo lo
   rendeva **trasparente**: si leggevano insieme la testata, la fotografia
   dell'intestazione, le schede dei prodotti con i cuoricini e, sopra, le
   caselle del filtro. Due interfacce sovrapposte, illeggibili.

   E' l'errore piu' facile da fare quando un elemento ha due vite: si scrive
   la regola pensando a quella che si sta guardando. */
@media (min-width: 901px) {
    .st-filters__body {
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }
}
/* Il riquadro delle misure resta un riquadro — e' un modulo con un pulsante,
   non un elenco — ma diventa piu' quieto e si stacca dai gruppi con un
   filetto invece che con un'ombra. */
.st-filters__misure {
    background: var(--st-p-crema, #FAF6F1);
    border: 1px solid var(--st-border, #E4DDD2);
    border-radius: var(--st-r-campo, 12px);
    box-shadow: none;
    padding: 16px;
    margin-bottom: 20px;
}


/* =======================================================================
 * L'ORDINE DENTRO LA SCHEDA
 *
 * Era: titolo, prezzo, categoria, richiamo. La categoria — che qui fa da riga
 * di descrizione — finiva sotto il prezzo, cioe' fra la cifra e il comando:
 * un dato di contesto infilato dentro la sequenza della decisione.
 *
 * Ora: titolo, categoria, prezzo, richiamo. Si legge cos'e', di che famiglia
 * e', quanto costa, e cosa si puo' fare.
 * ===================================================================== */

ul.products li.product {
    display: flex;
    flex-direction: column;
}
ul.products li.product > figure,
ul.products li.product .ct-media-container { order: 0; }
ul.products li.product .woocommerce-loop-product__title { order: 1; }
ul.products li.product .entry-meta { order: 2; }
ul.products li.product .price { order: 3; }
/* Il richiamo sta dentro un contenitore del tema genitore, non e' figlio
   diretto della scheda: ordinare `.button` non lo spostava, e il blocco
   restava dove il tema lo mette — subito sotto la fotografia, prima ancora
   del nome del prodotto. Si ordina il contenitore. */
ul.products li.product .ct-woo-card-actions { order: 4; margin-top: 4px; }

/* UN SOLO ALLINEAMENTO PER TUTTA LA SCHEDA
   Il titolo era centrato, categoria e prezzo a sinistra, il richiamo centrato:
   quattro elementi nella stessa colonna con due allineamenti diversi, ed e'
   questo che si vede come «storto» prima ancora di capire perche'. */
ul.products li.product,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .entry-meta,
ul.products li.product .price,
ul.products li.product .ct-woo-card-actions { text-align: left; }
ul.products li.product .ct-woo-card-actions { align-items: flex-start; justify-content: flex-start; }
ul.products li.product a.button { align-self: flex-start; margin-right: auto; }


/* =======================================================================
 * L'ALLINEAMENTO, MISURATO
 *
 * Titolo, prezzo e richiamo hanno 14px di spaziatura laterale; `.entry-meta`
 * — la riga della categoria — ne aveva zero. Quattro righe nella stessa
 * colonna, tre rientrate di 14 e una no: e' questo che si vede come «storto»
 * prima ancora di riuscire a dire cosa non va.
 *
 * E il richiamo era largo quanto la scheda con il testo centrato dentro: da
 * fuori sembra un elemento centrato in mezzo a elementi allineati a sinistra.
 * Ora e' largo quanto le sue parole e comincia dove cominciano le altre.
 * ===================================================================== */

ul.products li.product .entry-meta { padding-inline: 14px; }

ul.products li.product a.button {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    padding-inline: 0;
    /* Niente margine: il contenitore che lo avvolge ha gia' i suoi 14px, e
       sommandoci i miei il richiamo finiva quattordici pixel piu' a destra di
       titolo, categoria e prezzo. */
    margin-inline: 0;
}

/* La numerazione delle pagine del catalogo la disegna Blocksy, e la sua
   `pagination.min.css` mette «Prec / Succ» a 12 px: e' l'ultimo corpo fuori
   scala rimasto nel catalogo, ed e' su un comando, cioe' su una cosa da
   premere. Va portato al pavimento come tutto il resto. */
body [data-pagination="simple"] .prev,
body [data-pagination="simple"] .next,
body [data-pagination="simple"] .page-numbers {
    /* Il `body` non e' decorativo: la regola di Blocksy ha la stessa
       precisione di questa e il suo foglio viene servito dopo il nostro, per
       cui a parita' vinceva lei. Un elemento in piu' e la questione e' chiusa
       senza `!important`. */
    font-size: var(--st-fs-micro);
}

/* ======================================================================
 * IL PANNELLO DEI FILTRI SU TELEFONO
 *
 * Sotto i 900 px la colonna dei filtri diventa un pannello ancorato a tutto
 * schermo. Gli mancavano due cose, e sono le due che rendono un pannello un
 * pannello: uno sfondo che copra, e la possibilita' di scorrere il proprio
 * contenuto. Senza la prima si vedeva il catalogo attraverso i filtri;
 * misurato: `background: rgba(0, 0, 0, 0)`.
 *
 * E i bersagli: trentadue sotto i 44 px, su una schermata che esiste solo per
 * essere toccata. Le voci del filtro erano 40, le intestazioni dei gruppi 32.
 * ==================================================================== */

@media (max-width: 900px) {
    .st-filters__body {
        background: var(--st-p-avorio, #F7F4EF);
        box-shadow: 0 -8px 40px rgba(35, 32, 29, .18);
    }

    /* Le voci del filtro: quaranta pixel sono l'altezza di un'unghia, non di
       un pollice, e qui ogni tocco toglie o rimette dei prodotti. */
    .st-filters__values a,
    .st-filters__values label,
    .st-filters__group label {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* L'intestazione di un gruppo apre e chiude: e' un comando, non un
       titolo. Trentadue px. */
    .st-filters__legend {
        min-height: 44px;
    }

    /* Il pallino del colore resta un pallino: cresce il bersaglio attorno,
       non il disegno. */
    .st-filters__values .st-chip--tinta {
        margin: 4px;
    }
}