/* ============================================================
   Catalogo: negozio, categorie, tag, risultati.

   Misure prese dalla pagina vera (ortofiorito.it/shop/) a 1512px
   di finestra. Dove un numero sembra arbitrario — 38,035%,
   31,934%, 20vw — è perché è quello del sito: quel layout è un
   post Elementor e le sue larghezze stanno nei suoi meta.
   ============================================================ */

/* Il contenitore è quello dell'intestazione: 1470 con 30px di respiro, cioè
   1410 di contenuto, allineato al logo. */
/* Le misure stanno in base.css, in `--of-contenitore-*`: sono le stesse
   dell'intestazione e di ogni altra pagina, così tutto cade sulla verticale
   del logo. Qui si usa, non si ridichiara. */
.of-catalogo__contenitore{
  width:100%;
  max-width:var(--of-contenitore-max);
  margin-inline:auto;
  padding-inline:var(--of-contenitore-lato);
}

/* ------------------------------------------------------------
   Testata: briciole, titolo e descrizione a sinistra (38,035%),
   carosello delle categorie a destra.
   ------------------------------------------------------------ */
.of-catalogo__testata-riga{
  display:flex;
  padding-block:35px 30px;
}
.of-catalogo__intestazione{width:38.035%;padding-inline-end:30px}
.of-catalogo__categorie{width:61.965%;min-width:0}

@media(max-width:767px){
  /* Sul telefono le categorie cominciano subito sotto «Mostra di più». */
  .of-catalogo__testata-riga{flex-direction:column;gap:0}
  .of-catalogo__intestazione,
  .of-catalogo__categorie{width:100%}
}

/* Le briciole stanno in base.css: le usa anche la scheda prodotto. */

/* 35px: è il corpo che il foglio del template forza sull'H1, non la scala
   dei titoli del tema (che qui darebbe 36-40px). */
.of-catalogo__titolo{
  margin:0;
  font-size:35px;
  font-weight:600;
  line-height:1.21;
  letter-spacing:-0.034em;
  color:var(--wp--preset--color--dark);
}

/* La descrizione si ferma a tre righe, con una sfumatura in coda e un
   «Mostra di più». Senza JavaScript il pulsante non compare e il testo si
   legge tutto: meglio del contrario. */
.of-catalogo__descrizione{margin-block-start:10px}
.of-catalogo__descrizione-testo{
  position:relative;
  color:var(--wp--preset--color--text);
}
.of-catalogo__descrizione-testo p{margin:0}
.of-catalogo__descrizione-testo p + p{margin-block-start:1em}

.of-catalogo__descrizione--piegata .of-catalogo__descrizione-testo{
  /* 3 righe sul sito; Negozio → Intestazione → «Righe della descrizione». */
  max-height:calc(var(--of-righe,3) * 1.714em);
  overflow:hidden;
}
/* La sfumatura copre l'ultima riga: è quel taglio morbido a dire che il testo
   continua, insieme al pulsante. */
.of-catalogo__descrizione--piegata .of-catalogo__descrizione-testo::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  height:61px;
  background:linear-gradient(to bottom,rgb(255 255 255 / 0),var(--wp--preset--color--background));
  pointer-events:none;
}

.of-catalogo__piu{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-block-start:20px;
  padding:0 0 3px;
  border:0;
  border-block-end:1px solid currentColor;
  background:none;
  color:var(--wp--preset--color--dark);
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.024em;
  cursor:pointer;
}
.of-catalogo__piu[hidden]{display:none}

/* ------------------------------------------------------------
   Il carosello delle categorie.

   Sul sito è Swiper, sei per volta. Qui è una fila che scorre di
   lato con lo scatto (scroll-snap): stesso aspetto, stesso uso,
   senza una libreria da scaricare.
   ------------------------------------------------------------ */
/* La fila e il suo contenitore: le frecce si appoggiano ai lati, quindi il
   contenitore e' il riferimento. */
.of-catalogo__categorie{position:relative}

.of-catalogo__categorie-fila{
  display:flex;
  gap:30px;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.of-catalogo__categorie-fila::-webkit-scrollbar{display:none}
/* `--of-slide` serve in due posti: la larghezza dell'elemento e l'altezza
   della foto, da cui si ricava dove centrare le frecce. Definirla una volta
   per fascia evita che i due numeri prendano strade diverse. */
.of-catalogo__categorie{
  --of-slide:calc((100% - 5 * 30px) / 6);
}
.of-catalogo__categorie-fila > li{
  flex:0 0 var(--of-slide);
  scroll-snap-align:start;
}
.of-catalogo__categorie-fila a{
  display:block;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
/* Riquadro alto il 128% della larghezza, come sul sito. */
.of-catalogo__categoria-foto{
  display:block;
  aspect-ratio:100 / 128;
  border-radius:var(--of-radius-md);
  overflow:hidden;
  background:var(--wp--preset--color--surface);
}
.of-catalogo__categoria-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Come sul sito: 14px/400 con interlinea 18, a 10,2 dal riquadro (15 del
   titolo meno 4,8 dello span dentro), a capo quando serve e senza tagli. */
.of-catalogo__categoria-nome{
  display:block;
  margin-block-start:10.2px;
  font-size:14px;
  font-weight:400;
  line-height:18px;
  text-align:center;
}

/* --- le frecce della giostra ---
   Le aggiunge lo script, e si nascondono da sole quando non c'e' niente da
   scorrere in quella direzione: una freccia che non porta da nessuna parte
   non aiuta. */
/* Le frecce della giostra sono un componente condiviso: stanno in base.css,
   perche' le usano anche la galleria della finestra rapida e la scheda
   prodotto. Qui serve solo il riferimento, che arriva da [data-of-giostra]. */

@media(max-width:1024px){
  .of-catalogo__categorie{--of-slide:calc((100% - 2 * 30px) / 3)}
}
@media(max-width:767px){
  .of-catalogo__categorie{--of-slide:calc((100% - 15px) / 2)}
  .of-catalogo__categorie-fila{gap:15px}
}

/* La banda che stacca la testata dal catalogo: dieci pixel di grigio
   chiarissimo, non un filo. */
.of-catalogo__divisore{
  height:10px;
  margin-block:2px 62px;
  background:#f2f2f2;
}

/* ------------------------------------------------------------
   La riga: filtri a sinistra, catalogo a destra.

   20vw e calc(100% - 20vw) sono le larghezze del sito. Sembrano
   strane e sono giuste: sommate al gap di 60px sforano il
   contenitore, e il flex le restringe in proporzione — è così che
   a 1512px vengono 289,5 e 1060,5.
   ------------------------------------------------------------ */
.of-catalogo__riga{
  display:flex;
  gap:60px;
}
.of-catalogo__lato{
  width:20vw;
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.of-catalogo__contenuto{
  width:calc(100% - 20vw);
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* La testata del pannello e il pulsante di chiusura servono solo quando i
   filtri diventano un pannello, su schermo stretto. */
.of-catalogo__lato-testata{display:none}

/* ------------------------------------------------------------
   Barra strumenti: conteggio, ordinamento, viste.
   Le tre larghezze sono quelle del sito.
   ------------------------------------------------------------ */
.of-catalogo__barra{
  display:flex;
  align-items:center;
}
.of-catalogo__barra-conteggio{width:31.934%;min-width:0}
.of-catalogo__barra-ordine{width:50%;min-width:0}
.of-catalogo__barra-vista{width:18.066%;display:flex;justify-content:flex-end}

.of-catalogo__conteggio{
  font-size:16px;
  line-height:1.714;
  color:var(--wp--preset--color--text);
}

/* --- ordinamento ---
   Un <details>: si apre col clic, si raggiunge da tastiera, si chiude con Esc
   e funziona anche senza JavaScript. Sul sito è un div mosso dallo script. */
.of-catalogo__ordine{position:relative}
.of-catalogo__ordine-scelta{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:16px;
  line-height:1.714;
  color:var(--wp--preset--color--text);
  cursor:pointer;
  list-style:none;
}
.of-catalogo__ordine-scelta::-webkit-details-marker{display:none}
.of-catalogo__ordine-valore{
  color:var(--wp--preset--color--dark);
  font-weight:500;
}
.of-catalogo__ordine-freccia{
  display:inline-flex;
  align-items:center;
  transition:transform var(--of-transizione);
}
.of-catalogo__ordine-freccia svg{width:10px;height:5.83px}
.of-catalogo__ordine-breve{display:none}
.of-catalogo__ordine[open] .of-catalogo__ordine-freccia{transform:rotate(180deg)}

.of-catalogo__ordine-lista{
  position:absolute;
  inset-block-start:100%;
  inset-inline-end:0;
  z-index:3;
  width:296px;
  margin:0;
  padding:20px 25px;
  list-style:none;
  background:var(--wp--preset--color--background);
  border-radius:var(--of-radius-sm);
  box-shadow:5px 0 30px rgb(0 0 0 / .08);
}
.of-catalogo__ordine-voce{
  display:block;
  padding-block:4px;
  font-size:16px;
  line-height:1.714;
  color:var(--wp--preset--color--text);
  text-decoration:none;
}
.of-catalogo__ordine-voce:hover,
.of-catalogo__ordine-voce:focus-visible,
.of-catalogo__ordine-voce--scelta{color:var(--wp--preset--color--dark)}

/* --- viste --- */
.of-catalogo__viste{display:flex;align-items:center;gap:15px}
.of-catalogo__vista{
  display:inline-flex;
  align-items:center;
  /* #cbcbcb e 0,4s: i valori del sito per le viste non scelte. */
  color:#cbcbcb;
  transition:all .4s;
}
.of-catalogo__vista:hover,
.of-catalogo__vista--scelta{color:var(--wp--preset--color--dark)}
/* Sul sito le due icone a pallini piccoli sono larghe 16, non 15 come dice
   l'attributo del loro SVG: il gruppo e' allineato a destra, e due pixel in
   meno spostavano tutta la fila. */
.of-catalogo__vista svg{height:14px}
.of-catalogo__vista--due svg,
.of-catalogo__vista--tre svg{width:16px}
.of-catalogo__vista--quattro svg,
.of-catalogo__vista--elenco svg{width:20px}

/* Il pulsante dei filtri compare solo dove la colonna diventa un pannello. */
.of-catalogo__filtri-apri{
  display:none;
  align-items:center;
  gap:5px;
  padding:7px 11px;
  border:1px solid var(--wp--preset--color--dark);
  border-radius:3px;
  background:var(--wp--preset--color--dark);
  color:#fff;
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:-0.024em;
  cursor:pointer;
}
/* Senza questo, in una barra stretta l'SVG si schiaccia a zero e il pulsante
   perde l'imbuto restando solo testo. */
.of-catalogo__filtri-apri svg{flex:none}

/* ------------------------------------------------------------
   Griglia
   ------------------------------------------------------------ */
/*
 * I selettori nominano `ul.products` e `li.card.product` perche' devono
 * battere due cose: `.woocommerce ul.products{margin:0 0 1em}` di
 * woocommerce.css, che annullerebbe il margine negativo, e la rete di
 * sicurezza in base.css. Il margine negativo di 15px e il padding di 15px per
 * cella sono la gronda del sito: le card restano allineate al contenitore
 * senza che la prima e l'ultima colonna rientrino.
 */
.of-catalogo ul.of-prodotti.products{
  display:flex;
  flex-wrap:wrap;
  margin:0 -15px;
  padding:0;
  list-style:none;
}
.of-catalogo ul.of-prodotti.products > li.of-card{
  width:25%;
  padding:0 15px;
  margin:0 0 30px;
}

/* La scelta fatta con i comandi della barra vale solo dove c'è spazio: sotto
   i 1200px il numero di colonne lo decide la larghezza, come sul sito. */
@media(min-width:1200px){
  .of-catalogo--colonne-2 ul.of-prodotti.products > li.of-card{width:50%}
  .of-catalogo--colonne-3 ul.of-prodotti.products > li.of-card{width:33.3333%}
  .of-catalogo--colonne-4 ul.of-prodotti.products > li.of-card{width:25%}
}
@media(max-width:1199px){
  .of-catalogo ul.of-prodotti.products > li.of-card{width:33.3333%}
}
@media(max-width:767px){
  .of-catalogo ul.of-prodotti.products{margin:0 -7.5px}
  .of-catalogo ul.of-prodotti.products > li.of-card{width:50%;padding:0 7.5px}
}

/* La vista a elenco: una per riga, foto a sinistra. */
.of-catalogo--elenco ul.of-prodotti.products > li.of-card{width:100%}
@media(min-width:768px){
  .of-catalogo--elenco .of-card__inner{display:flex;gap:30px;align-items:flex-start}
  .of-catalogo--elenco .of-card__media{flex:0 0 200px}
  .of-catalogo--elenco .of-card__corpo{flex:1 1 auto;margin-block-start:0}
  .of-catalogo--elenco .of-card__bottone{width:auto;padding-inline:40px}
}

/* La card del prodotto sta in base.css: la stampa content-product.php, che
   compare anche nei correlati e nei suggerimenti del carrello, dove questo
   foglio non e' caricato. */

/* ------------------------------------------------------------
   Filtri
   ------------------------------------------------------------ */
.of-filtri{display:flex;flex-direction:column}
/* Il riquadro dei filtri del sito ha 20px sotto: con i 20 della colonna,
   «Prodotti in evidenza» parte 41px sotto l'etichetta del prezzo. */
.of-filtri--automatica{padding-block-end:20px}

.of-filtro__titolo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:0 0 20px;
  border:0;
  background:none;
  color:var(--wp--preset--color--dark);
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  line-height:1.21;
  text-align:start;
  cursor:pointer;
}
/* Il segno a destra: una barra orizzontale da 12x1 quando il gruppo è
   aperto, una croce quando è chiuso. Sono i 12x1 del sito. */
.of-filtro__titolo::after{
  content:'';
  width:12px;
  height:1px;
  background:currentColor;
  box-shadow:0 0 0 0 currentColor;
}
.of-filtro__titolo[aria-expanded="false"]::after{
  box-shadow:inset 0 0 0 0 currentColor;
  background:
    linear-gradient(currentColor,currentColor) center/12px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 12px no-repeat;
  height:12px;
}
.of-filtro__titolo[aria-expanded="false"] + .of-filtro__corpo{display:none}

.of-filtro + .of-filtro{margin-block-start:24px}

.of-filtro__lista,
.of-filtro__figli{margin:0;padding:0;list-style:none}
/* Come sul sito (glozin `products-filter__option`): 9 sopra e sotto, niente
   sopra la prima voce e sotto l'ultima, interlinea 14 — una voce ogni 32px.
   Prima qui c'era un'interlinea 1,4 scelta per aria: era un'altra pagina. */
.of-filtro__voce{position:relative;padding:9px 0}
.of-filtro__lista > .of-filtro__voce:first-child{padding-top:0}
/* 8 sotto l'elenco, prima del blocco successivo: «Prezzo» del sito sta 46px
   sotto l'ultima voce, non 38. */
.of-filtro__corpo > .of-filtro__lista{padding-block-end:8px}
.of-filtro__lista > .of-filtro__voce:first-child > .of-filtro__apri{inset-block-start:0}
.of-filtro__lista > .of-filtro__voce:last-child,
.of-filtro__figli > .of-filtro__voce:last-child{padding-bottom:0}
.of-filtro__nome{flex:0 1 auto;min-width:0}
.of-filtro__etichetta{
  display:flex;
  align-items:flex-start;
  gap:0;
  font-size:16px;
  line-height:14px;
  color:var(--wp--preset--color--text);
  cursor:pointer;
  transition:all .4s;
}
/* La casella non si vede, come sul sito: è la voce scelta a diventare scura.
   L'input però c'è davvero, quindi la tastiera lo raggiunge e il form
   funziona anche senza JavaScript. */
.of-filtro__etichetta input{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.of-filtro__etichetta:hover .of-filtro__nome{color:var(--wp--preset--color--dark)}
/* La voce scelta (anche la categoria in cui si sta) e' del colore primario,
   nome e conteggio, senza grassetto: come sul sito. */
.of-filtro__etichetta input:checked ~ .of-filtro__nome,
.of-filtro__etichetta input:checked ~ .of-filtro__conta{
  color:var(--wp--preset--color--primary);
}
.of-filtro__etichetta input:focus-visible ~ .of-filtro__nome{
  outline:2px solid var(--wp--preset--color--primary);
  outline-offset:2px;
}
.of-filtro__conta{margin-inline-start:5px;color:var(--wp--preset--color--text)}
.of-filtro__conta::before{content:"("}
.of-filtro__conta::after{content:")"}

/* La freccia che apre le sottocategorie. */
.of-filtro__apri{
  position:absolute;
  inset-block-start:9px;
  inset-inline-end:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  width:24px;
  height:14px;
  padding:0;
  border:0;
  background:none;
  color:var(--wp--preset--color--text-muted);
  cursor:pointer;
  transition:transform var(--of-transizione);
}
.of-filtro__apri svg{width:10px;height:5.83px}
.of-filtro__apri[aria-expanded="true"]{transform:rotate(180deg)}
.of-filtro__figli{
  display:none;
  margin-block-start:8px;
  padding-inline-start:20px;
}
.of-filtro__voce--aperta > .of-filtro__figli{display:block}

/* --- prezzo --- */
.of-filtro__campi{display:flex;align-items:center;gap:10px}
.of-filtro__campo{
  flex:1 1 0;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  height:39px;
  padding-inline:14px;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--of-radius-sm);
}
.of-filtro__valuta{color:var(--wp--preset--color--text-muted);font-size:14px}
.of-filtro__campo input{
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  font-size:14px;
  color:var(--wp--preset--color--dark);
}
/* Le frecciette che i browser mettono nei campi numerici qui non servono:
   c'è il cursore. */
.of-filtro__campo input::-webkit-outer-spin-button,
.of-filtro__campo input::-webkit-inner-spin-button{appearance:none;margin:0}
.of-filtro__campo input[type=number]{appearance:textfield;-moz-appearance:textfield}
.of-filtro__tratto{color:var(--wp--preset--color--text)}

/* Il cursore a due maniglie: due <input type="range"> nativi sovrapposti.
   Si trascinano col dito e si spostano con le frecce della tastiera. Sul sito
   è jQuery UI Slider. */
.of-filtro__cursore{
  position:relative;
  height:19px;
  margin-block-start:15px;
}
.of-filtro__pista,
.of-filtro__tratta{
  position:absolute;
  inset-block-start:7px;
  height:5px;
  border-radius:10px;
}
.of-filtro__pista{inset-inline:0;background:#dfdfdf}
/* Senza script la banda copre tutto l'intervallo: e' il disegno giusto per
   due campi numerici vuoti. Con lo script diventa il tratto fra le maniglie. */
.of-filtro__tratta{
  inset-inline-start:0;
  width:100%;
  background:var(--wp--preset--color--dark);
}
.of-filtro__maniglia{
  position:absolute;
  inset-inline:0;
  inset-block-start:0;
  width:100%;
  height:19px;
  margin:0;
  padding:0;
  background:none;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  /* La pista non deve prendere il clic: sotto ci sono due input sovrapposti,
     e solo le maniglie devono rispondere. */
  pointer-events:none;
}
.of-filtro__maniglia:focus{outline:0}
.of-filtro__maniglia::-webkit-slider-thumb{
  pointer-events:auto;
  appearance:none;
  -webkit-appearance:none;
  width:19px;height:19px;
  box-sizing:border-box;
  border:5px solid var(--wp--preset--color--dark);
  border-radius:50%;
  background:var(--wp--preset--color--background);
  cursor:pointer;
}
.of-filtro__maniglia::-moz-range-thumb{
  pointer-events:auto;
  width:19px;height:19px;
  box-sizing:border-box;
  border:5px solid var(--wp--preset--color--dark);
  border-radius:50%;
  background:var(--wp--preset--color--background);
  cursor:pointer;
}
.of-filtro__maniglia:focus-visible::-webkit-slider-thumb{outline:2px solid var(--wp--preset--color--primary);outline-offset:2px}
.of-filtro__maniglia:focus-visible::-moz-range-thumb{outline:2px solid var(--wp--preset--color--primary);outline-offset:2px}

.of-filtro__riepilogo{
  /* 18 sotto le maniglie: sul sito la riga e' dentro un blocco alto 27,8
     con 11 di margine, 7 sotto la fine del cursore. */
  margin:18px 0 0;
  font-size:16px;
  line-height:1.05;
  color:var(--wp--preset--color--text);
}

.of-filtri__azioni{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:15px;
  margin-block-start:24px;
}
/* Con JavaScript i filtri si applicano da soli e il pulsante non serve.
   La classe la mette lo script: senza script il pulsante resta. */
.of-filtri--automatica .of-filtri__applica{display:none}
/* Con lo script si toglie da sopra i prodotti (le etichette e «Pulisci
   Filtri»): qui sotto il cursore il sito non ha niente. */
.of-filtri--automatica .of-filtri__azioni{display:none}
.of-filtri__pulisci{
  font-size:15px;
  color:var(--wp--preset--color--text);
  text-decoration:underline;
}

/* ------------------------------------------------------------
   Prodotti in evidenza
   ------------------------------------------------------------ */
.of-catalogo__evidenza-titolo{
  margin:0 0 20px;
  font-size:16px;
  font-weight:600;
  line-height:1.21;
  color:var(--wp--preset--color--dark);
}
.of-evidenza{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.of-evidenza__voce{
  display:flex;
  align-items:center;
  gap:15px;
  padding-block-end:20px;
  border-block-end:1px solid var(--wp--preset--color--border);
}
.of-evidenza__voce:last-child{padding-block-end:0;border-block-end:0}
.of-evidenza__foto{flex:0 0 80px}
.of-evidenza__foto img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:var(--of-radius-card);
}
.of-evidenza__testo{display:flex;flex-direction:column;gap:10.35px;min-width:0}
.of-evidenza__nome{
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  color:var(--wp--preset--color--dark);
  text-decoration:none;
}
.of-evidenza__nome:hover,
.of-evidenza__nome:focus-visible{color:var(--wp--preset--color--primary)}
.of-evidenza__stelle{
  position:relative;
  display:inline-flex;
  gap:1px;
  width:max-content;
  height:10px;
  color:#c4c4c4;
}
.of-evidenza__stelle svg{width:10px;height:10px;fill:currentColor;flex:none}
/* Le stelle del voto medio, arrotondato, nel colore delle stelle di glozin. */
.of-evidenza__stelle .of-evidenza__stella-piena{color:#ff9c05}
.of-evidenza__prezzo{
  font-size:16px;
  font-weight:600;
  line-height:1.05;
  color:var(--wp--preset--color--dark);
}

/* ------------------------------------------------------------
   Paginazione numerata.

   Non scorrimento infinito: le 136 pagine di /shop/page/N/ sono
   indirizzi già pubblici e devono restare raggiungibili.
   I selettori sono lunghi perché devono battere quelli del
   foglio di WooCommerce, che è caricato.
   ------------------------------------------------------------ */
.of-catalogo .woocommerce-pagination{margin-block-start:15px}
/* Nella colonna dei prodotti (flex con 22 di stacco, per la barra) i 22 si
   sommerebbero ai 15: sul sito fra l'ultima fila e i numeri ce ne sono 15. */
.of-catalogo__contenuto > .woocommerce-pagination{margin-block-start:-7px}
.of-catalogo .woocommerce-pagination ul.page-numbers{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:0;
  border:0;
  list-style:none;
}
.of-catalogo .woocommerce-pagination ul.page-numbers li{
  margin:0;
  border:0;
  overflow:visible;
}
.of-catalogo .woocommerce-pagination ul.page-numbers li .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--wp--preset--color--border);
  border-radius:var(--of-radius-bottone);
  background:none;
  color:var(--wp--preset--color--text);
  font-size:15px;
  font-weight:400;
  line-height:1;
  text-decoration:none;
  transition:border-color var(--of-transizione),color var(--of-transizione);
}
.of-catalogo .woocommerce-pagination ul.page-numbers li a.page-numbers:hover{
  border-color:var(--wp--preset--color--dark);
  color:var(--wp--preset--color--dark);
}
.of-catalogo .woocommerce-pagination ul.page-numbers li span.current{
  background:var(--wp--preset--color--dark);
  border-color:var(--wp--preset--color--dark);
  color:#fff;
}
.of-catalogo .woocommerce-pagination ul.page-numbers li span.dots{border-color:transparent}
.of-catalogo .woocommerce-pagination .next svg{transform:rotate(-90deg)}
.of-catalogo .woocommerce-pagination .prev svg{transform:rotate(90deg)}

.of-catalogo__vuoto{padding-block:40px}

/* ------------------------------------------------------------
   Schermo stretto: i filtri diventano un pannello
   ------------------------------------------------------------ */
@media(max-width:1024px){
  .of-catalogo__riga{display:block;margin-block-end:60px}
  .of-catalogo__contenuto{width:100%}

  .of-catalogo__lato{
    position:fixed;
    inset-block:0;
    inset-inline-end:0;
    z-index:60;
    width:375px;
    max-width:88vw;
    padding:0 20px 30px;
    background:var(--wp--preset--color--background);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .4s ease;
  }
  .of-catalogo__lato[data-of-aperto]{transform:none}

  .of-catalogo__lato-testata{
    position:sticky;
    inset-block-start:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-inline:-20px;
    padding:18px 20px;
    background:var(--wp--preset--color--surface);
    border-block-end:1px solid var(--wp--preset--color--border);
    margin-block-end:20px;
  }
  .of-catalogo__lato-titolo{font-size:16px;font-weight:600;color:var(--wp--preset--color--dark)}
  .of-catalogo__lato-chiudi{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
    color:var(--wp--preset--color--dark);
  }

  .of-catalogo__filtri-apri{display:inline-flex}
  /* Nel pannello il pulsante serve: applicare a ogni tocco ricaricherebbe
     la pagina sotto le dita. */
  .of-filtri--automatica .of-filtri__applica{display:inline-flex}

  /* Su tablet il conteggio sparisce, come sul sito. */
  .of-catalogo__barra-conteggio{display:none}
  .of-catalogo__barra-ordine{
    width:auto;flex:1 1 auto;
    display:flex;align-items:center;gap:15px;
  }
  .of-catalogo__barra-vista{width:auto;flex:0 0 auto}
  /* A 768 il gruppo delle viste sul sito e' largo 133,3 e non 117: i passi
     sono di 20, non di 15. */
  .of-catalogo__viste{gap:20px}
  .of-catalogo__ordine-lista{width:280px}
}

@media(max-width:767px){
  .of-catalogo__lato{width:100%;max-width:none}

  /* Tre comandi in 345px: la barra puo' andare a capo invece di schiacciarli.
     E' anche il riferimento del menù dell'ordinamento — vedi sotto. */
  .of-catalogo__barra{position:relative;flex-wrap:wrap;gap:10px}
  .of-catalogo__barra-ordine{flex:0 0 auto}
  .of-catalogo__barra-vista{flex:1 1 auto}

  /* «Ordina per» in un riquadro da 31, filo nero, raggio 3, a destra del
     «Filtro»; le viste sul telefono non ci sono (come sul sito). */
  .of-catalogo__ordine-valore,
  .of-catalogo__ordine-breve{display:none}
  .of-catalogo__barra-ordine{flex:1 1 auto;justify-content:space-between}
  .of-catalogo__barra-vista{display:none}
  .of-catalogo__ordine-scelta{
    gap:8px;white-space:nowrap;
    height:31px;padding:7px 11px;
    border:1px solid var(--wp--preset--color--dark);border-radius:3px;
    font-size:15px;font-weight:500;line-height:15px;letter-spacing:-0.024em;
    color:var(--wp--preset--color--dark);
  }
  .of-catalogo__ordine-etichetta{display:inline;font:inherit;color:inherit}
  .of-catalogo__ordine-freccia svg{width:10px;height:10px}

  /*
   * Il menù si appende alla barra, non al comando: il comando e' largo 66px e
   * sta a un terzo dello schermo, e un pannello da 320 allineato al suo bordo
   * destro finiva a x=-150, fuori dallo schermo a sinistra.
   */
  .of-catalogo__ordine{position:static}
  .of-catalogo__ordine-lista{
    inset-block-start:calc(100% + 10px);
    inset-inline:0;
    width:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .of-catalogo__lato{transition:none}
}

/* Mentre arriva la pagina nuova: l'elenco si smorza e non si può cliccare,
   ma resta al suo posto. Non un velo e non uno scheletro — la pagina cambia
   in poche decine di millesimi e un velo farebbe solo lampeggiare. */
.of-catalogo[data-of-attesa] .of-prodotti{
  opacity:.45;
  pointer-events:none;
  transition:opacity .15s;
}
.of-catalogo[data-of-attesa] .woocommerce-pagination{pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .of-catalogo[data-of-attesa] .of-prodotti{transition:none}
}

/* ============================================================
   Le varianti del pannello Negozio
   ============================================================ */

/* Categorie in evidenza: colonne scelte nel pannello. */
.of-catalogo__categorie--colonne{--of-slide:calc((100% - (var(--of-categorie-computer,6) - 1) * 30px) / var(--of-categorie-computer,6))}
@media(max-width:1199px){
  .of-catalogo__categorie--colonne{--of-slide:calc((100% - (var(--of-categorie-tablet,3) - 1) * 30px) / var(--of-categorie-tablet,3))}
}
@media(max-width:767px){
  .of-catalogo__categorie--colonne{--of-slide:calc((100% - (var(--of-categorie-telefono,2) - 1) * 15px) / var(--of-categorie-telefono,2))}
}

/* Filtri a destra. */
@media(min-width:1025px){
  .of-catalogo--filtri-destra .of-catalogo__lato{order:2}
}

/* Nessun filtro: i prodotti prendono tutta la riga. */
.of-catalogo--senza-filtri .of-catalogo__contenuto{width:100%}
.of-catalogo--senza-filtri .of-catalogo__filtri-apri{display:none}

/* Filtri in un pannello, a ogni larghezza: come su tablet. */
.of-catalogo--filtri-pannello .of-catalogo__contenuto{width:100%}
.of-catalogo--filtri-pannello .of-catalogo__filtri-apri{display:inline-flex}
@media(min-width:1025px){
  .of-catalogo--filtri-pannello .of-catalogo__riga{display:block}
  .of-catalogo--filtri-pannello .of-catalogo__lato{
    position:fixed;inset-block:0;inset-inline-start:0;z-index:60;
    width:375px;max-width:88vw;padding:0 20px 30px;
    background:var(--wp--preset--color--background);
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .4s ease;
  }
  .of-catalogo--filtri-pannello .of-catalogo__lato[data-of-aperto]{transform:none}
  .of-catalogo--filtri-pannello .of-catalogo__lato-testata{
    position:sticky;inset-block-start:0;z-index:1;
    display:flex;align-items:center;justify-content:space-between;
    margin-inline:-20px;margin-block-end:20px;padding:18px 20px;
    background:var(--wp--preset--color--surface);
    border-block-end:1px solid var(--wp--preset--color--border);
  }
}

/* Filtri in riga sopra i prodotti: ogni gruppo e' una tendina. */
@media(min-width:1025px){
  .of-catalogo--filtri-sopra .of-catalogo__riga{flex-direction:column;gap:30px}
  .of-catalogo--filtri-sopra .of-catalogo__lato,
  .of-catalogo--filtri-sopra .of-catalogo__contenuto{width:100%}
  .of-catalogo--filtri-sopra .of-catalogo__lato{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .of-catalogo--filtri-sopra .of-filtri{display:flex;flex-wrap:wrap;gap:15px 30px;width:100%}
  .of-catalogo--filtri-sopra .of-filtro{position:relative;min-width:200px;margin:0;padding:0;border:0}
  .of-catalogo--filtri-sopra .of-filtro__corpo{
    position:absolute;inset-block-start:calc(100% + 8px);inset-inline-start:0;z-index:20;
    min-width:260px;max-height:360px;overflow:auto;padding:15px 20px;
    background:var(--wp--preset--color--background);
    border:1px solid var(--wp--preset--color--border);border-radius:var(--of-radius-sm);
    box-shadow:0 10px 30px rgb(0 0 0 / .08);
  }
  .of-catalogo--filtri-sopra .in-evidenza,
  .of-catalogo--filtri-sopra .of-evidenza{display:none}
}

/* Il banner nella griglia. */
.of-card--banner{display:flex}
.of-card__banner{display:block;width:100%;overflow:hidden;border-radius:var(--of-radius-card)}
.of-card__banner img{display:block;width:100%;height:100%;object-fit:cover}

/* La descrizione della categoria sotto i prodotti. */
.of-catalogo__descrizione-sotto{margin-block-start:40px}
.of-catalogo__descrizione-sotto--center{text-align:center}
.of-catalogo__descrizione-sotto--right{text-align:end}

.of-catalogo__barra--solo-filtri{justify-content:flex-start}

/* ------------------------------------------------------------
   I filtri attivi sopra i prodotti (template-parts/catalogo/
   filtri-attivi.php): etichette alte 39, raggio 5, 15px, a 10 di
   distanza; «Pulisci Filtri» nero. 22 sopra (lo stacco della
   colonna) e 30 sotto, fino alla griglia.
   ------------------------------------------------------------ */
.of-filtri-attivi[hidden]{display:none}
.of-filtri-attivi{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-block-end:8px;
}
.of-filtri-attivi__voce{
  display:flex;
  align-items:center;
  height:39px;
  padding:11px 45px 11px 20px;
  border:1px solid #f5f5f5;
  border-radius:5px;
  background:#f5f5f5;
  font-size:15px;
  font-weight:400;
  line-height:15px;
  color:var(--wp--preset--color--text);
  text-decoration:none;
  transition:.25s;
}
.of-filtri-attivi__voce:hover{border-color:var(--wp--preset--color--dark)}
.of-filtri-attivi__voce--tutti{
  padding-inline-end:20px;
  border-color:#111;
  background:#111;
  color:#fff;
}
.of-filtri-attivi__voce--tutti:hover{background:var(--wp--preset--color--primary);border-color:var(--wp--preset--color--primary)}


/* I pallini delle categorie sul telefono: 20 sotto la fila come sul sito, piu'
   i 18 che la fila di glozin lascia sotto i nomi. */
@media(max-width:767px){
  .of-catalogo__categorie .of-punti{margin-block-start:38px}
}

/* Sul telefono, sotto la paginazione, solo i 50 di .of-main fino al pie'
   (il margine sopra la paginazione e' lo stesso del computer). */
@media(max-width:767px){
  .of-catalogo__riga{margin-block-end:0}
}