/**
 * L'allineamento delle schede: prodotto, collezione, archivio.
 *
 * ===========================================================================
 * DA DOVE VIENE
 * ===========================================================================
 *
 * Queste regole stavano dentro `fsc_cl_css()` (inc/fs-collezioni.php), in un
 * heredoc stampato con `wp_add_inline_style()`: quasi quattro KB di CSS dentro
 * l'HTML di OGNI pagina del sito. L'11 set 2026 sono diventate questo file.
 *
 * Il contenuto non e' cambiato di una virgola — sono le stesse regole, nello
 * stesso ordine. Cambia solo dove vivono: il tema tiene il suo CSS in un
 * foglio, le pagine restano pagine.
 *
 * Inline resta la sola parte che inline deve stare: le due icone dei
 * preferiti, che sono indirizzi scelti in Theme Options e cambiano da
 * installazione a installazione. Quattro righe, non quattro KB.
 *
 * ===========================================================================
 * PERCHE' TANTI `!important`
 * ===========================================================================
 *
 * Non e' pigrizia: queste regole devono battere il CSS del tema comprato, che
 * stampa le sue con specificita' alta e piu' tardi in coda. E' la stessa
 * ragione per cui in `assets/sezioni.css` le classi sono ripetute due o tre
 * volte. Togliendoli, le schede tornano come erano prima.
 *
 * @package Faustosari
 */

/* Card prodotto: foto sopra / titolo sx / preferiti dx */
.saren--single--product .saren--product--wrap:not(.product--box--wrap){flex-direction:column !important;}
.saren--single--product .saren--product--meta{flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;gap:12px;}
.saren--single--product .saren--product--meta .saren--product--main{flex:1 1 auto !important;width:auto !important;min-width:0 !important;}
.saren--single--product .saren--product--meta .saren--product--actions{position:static !important;inset:auto !important;width:auto !important;flex:0 0 auto;margin:0 !important;}
.saren--single--product .saren--product--meta .saren--product--actions>div{transform:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transition-delay:0s !important;}
.saren--single--product .saren--product--meta .saren--product--extras:not(:has(*)){display:none;}
/* Card collezione: foto sopra / titolo sx / freccia dx, tutte uguali */
.fs-collezioni-grid .fs-collezione-card.fs-h{grid-column:span 2;grid-row:span 2;grid-template-rows:1fr auto !important;}
.fs-collezione-card.fs-h .fs-collezione-img{aspect-ratio:auto !important;height:100% !important;min-height:0;}
@media(max-width:1024px){.fs-collezioni-grid .fs-collezione-card.fs-h{grid-column:auto;grid-row:auto;grid-template-rows:auto !important;}.fs-collezione-card.fs-h .fs-collezione-img{aspect-ratio:356/480 !important;height:auto !important;}}
/* align-content:start — la foto deve stare in cima alla scheda, sempre.
   Senza, una scheda con il titolo su due righe alza tutta la riglia della
   griglia, le altre schede della riga si stirano per pareggiare e il loro
   contenuto (foto compresa) resta centrato nello spazio avanzato: la foto
   scivolava giu' di 6-7px rispetto alle vicine. Lo spazio in piu' ora finisce
   tutto sotto, dove non si vede. */
.fs-collezione-card{display:grid !important;grid-template-columns:1fr auto !important;grid-template-areas:"img img" "title view" !important;align-items:center;align-content:start !important;overflow:visible !important;}
.fs-collezione-card.fs-hide{display:none !important;}
.fs-collezione-img{grid-area:img;width:100%;aspect-ratio:356/480 !important;height:auto !important;}
/* Il titolo tiene il posto di DUE righe anche quando ne usa una.
   E' quello che allinea la scheda grande (fs-h) con le vicine: lei occupa due
   righe della griglia e la sua foto prende tutta l'altezza che il titolo non
   usa, quindi se i titoli sono alti in modo diverso la sua foto finisce piu'
   in basso di quelle accanto. Con i titoli tutti uguali le righe diventano
   tutte uguali e non resta niente fuori posto.
   `.8em` e' la somma delle due imbottiture qui sotto (.7 sopra + .1 sotto):
   `lh` e' l'altezza di una riga di questo testo, quindi la misura segue il
   corpo del carattere anche dove il tema lo cambia. La prima delle due righe
   e' la scorta per i browser che `lh` non lo conoscono. */
.fs-collezione-title{position:static !important;inset:auto !important;grid-area:title;min-width:0;padding:.7em 4px .1em 2px;min-height:calc(2 * 1.45em + .8em);min-height:calc(2lh + .8em);}
.fs-view{position:static !important;inset:auto !important;grid-area:view;opacity:1 !important;transform:none !important;width:auto !important;height:auto !important;min-width:0 !important;background:none !important;}
/* Archivio prodotti (collezioni-abiti-da-sposa e pari livello): griglia uniforme come /collezioni-sposa/ */
.archive-products-section .saren--single--product.product--highlighted{grid-column:auto !important;grid-row:auto !important;}
.archive-products-section.archive--grid .saren--products-grid{gap:15px !important;}
.archive-products-section .filters--sorting,.archive-products-section .products--sorting{display:none !important;}