/*
 * shop.css — pagine WooCommerce.
 *
 * Accodato da inc/woocommerce.php SOLO sulle pagine del negozio, dopo
 * responsive.css.
 *
 * Qui dentro c'è il CATALOGO: archivio di categoria, di linea e di dress code
 * (Figma node 77-305), che sono la stessa pagina con filtri diversi. La card
 * prodotto NON è qui: sta in base.css, perché la stampa anche la home.
 *
 * Scheda prodotto, carrello, checkout e area account arrivano ai passi 8-9.
 *
 * Nota: woocommerce-layout.css e woocommerce-smallscreen.css sono stati
 * rimossi (vedi inc/woocommerce.php), quindi la griglia e il responsive del
 * negozio li scrive questo foglio. woocommerce.css invece è ancora attivo e
 * copre notices, rating e stati dei campi: non va combattuto a colpi di
 * !important, va sovrascritto dove il design lo richiede.
 *
 * -----------------------------------------------------------------------------
 * LE QUOTE DEL FIGMA
 * -----------------------------------------------------------------------------
 * Il frame parte a 135px (promo 30 + header 105), come la home: le Y assolute
 * del disegno si confrontano dirette con quelle della pagina. Le distanze del
 * Figma sono fra i TOP dei box, quindi ogni margine qui sotto è già la
 * differenza meno l'altezza del box che sta sopra.
 */

/* =============================================================================
   IMPIANTO A DUE COLONNE
   =============================================================================
   Intestazione e corpo hanno la stessa griglia, e non sono un contenitore
   solo: nell'intestazione le due colonne partono a quote diverse — le briciole
   a 194, l'occhiello a 171 — e il filetto di chiusura copre la sola colonna
   di destra.
   ========================================================================== */

.tomas-catalogo__head,
.tomas-catalogo__body {
	display: grid;
	grid-template-columns: var(--tomas-aside-w) minmax(0, 1fr);
	column-gap: var(--tomas-aside-gap);
	padding-left: var(--tomas-gutter);
	padding-right: var(--tomas-gutter);
}

/* Occhiello a 171: 135 di promo bar e header, più 36. */
.tomas-catalogo__head {
	padding-top: 36px;
}

/* Filetto a 422 (+1 di bordo) → colonna dei filtri e griglia a 460. */
.tomas-catalogo__body {
	margin-top: 37px;
}

/* --- Briciole di pane — node 77:386 ---------------------------------------
 * Le compone WooCommerce: l'ultima voce non è un link, ed è l'unica scura.
 * Il colore si aggancia a quello, non a una classe che Woo non mette.
 */

.tomas-crumbs {
	padding-top: 23px; /* occhiello a 171, briciole a 194 */
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-tiny);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-tiny);
	text-transform: uppercase;
	color: var(--tomas-ink);
}

.tomas-crumbs a,
.tomas-crumbs__sep {
	color: var(--tomas-ink-crumb);
	transition: color var(--tomas-duration) var(--tomas-ease);
}

.tomas-crumbs a:hover {
	color: var(--tomas-ink);
}

/* --- Intestazione della colonna di destra ---------------------------------- */

/*
 * L'occhiello è FUORI DAL FLUSSO di proposito. Carolina è un corsivo con
 * ascendenti lunghissime: la sua riga "normale" è alta 1.58em, cioè 76px a
 * 48, e nel Figma infatti il suo box scavalca quello del titolo. Lasciandolo
 * nel flusso il titolo andrebbe tirato su con un margine negativo tarato
 * sulle metriche del font — un numero che si rompe al primo cambio di
 * famiglia. Tolto dal flusso, i due box si sovrappongono come nel disegno e
 * la riga di base cade dove deve senza interlinee inventate.
 *
 * Vale perché l'occhiello è per definizione una riga corta: è il nome al
 * singolare di una tassonomia.
 */
.tomas-catalogo__intro {
	position: relative;
	padding-top: 59px; /* occhiello a 171 → titolo a 230 */
}

.tomas-catalogo__occhiello {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--tomas-font-script);
	font-size: var(--tomas-fs-display);
	/* normal, cioè le metriche del font: le stesse su cui misura il Figma. */
	line-height: normal;
	letter-spacing: 4.8px;
	color: var(--tomas-brand);
}

/* Titolo a 230, alto 104 → la descrizione attacca a 335. */
.tomas-catalogo__titolo {
	margin-bottom: 1px;
}

/*
 * 839px è la misura del box nel Figma, non una colonna della griglia: è una
 * misura di leggibilità, e su due righe da 14px è il punto in cui la riga
 * smette di essere comoda.
 */
.tomas-catalogo__testo {
	max-width: 839px;
}

/* Descrizione a 335, due righe da 22 → "ordina per" a 387. */
.tomas-catalogo__rule {
	margin-top: 11px; /* "ordina per" chiude a 411, filetto a 422 */
}

/* =============================================================================
   ORDINA PER — node 81:573, 80:572, 85:21
   =============================================================================
   Il menu vero è un <select> trasparente steso sopra tutto il comando: la
   voce che si legge è lo <span> accanto. Serve perché un <select> si veste
   fino a un certo punto — la famiglia, la crenatura e l'allineamento a destra
   del testo chiuso non sono governabili in modo uguale su tutti i browser, e
   qui il design li chiede precisi.

   Il prezzo di questa scelta: lo <span> va tenuto in pari col <select>. Lo fa
   il JS al cambio; senza JS la pagina si ricarica e lo stampa già giusto il
   PHP. Due stati, ma nessuno dei due può restare indietro senza che si veda.
   ========================================================================== */

.tomas-ordina {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 17px;
	margin-top: 8px; /* descrizione chiude a 379, etichetta a 387 */
}

.tomas-ordina__valore {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-regular);
	font-size: var(--tomas-fs-small);
	line-height: var(--tomas-lh-ui);
	color: var(--tomas-ink-muted);
	transition: color var(--tomas-duration) var(--tomas-ease);
}

.tomas-ordina__frecce {
	display: flex;
	align-items: center;
	gap: 4px; /* 1832 → 1847, frecce larghe 11 */
	color: var(--tomas-icon-muted);
}

/*
 * La stessa freccia stampata due volte, la prima capovolta: nel Figma è un
 * export solo usato in due versi, non due disegni diversi.
 */
.tomas-ordina__su {
	transform: rotate(180deg);
}

/*
 * Il select copre tutto il comando ed è invisibile: il click lo apre ovunque
 * si prema, comprese le frecce. opacity e non visibility, perché un elemento
 * invisibile non riceve il puntatore.
 */
.tomas-ordina__select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	/* Senza, Safari gli disegna comunque il suo rilievo e sfonda di qualche px. */
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
}

.tomas-ordina__select:hover + .tomas-ordina__valore,
.tomas-ordina:focus-within .tomas-ordina__valore {
	color: var(--tomas-ink);
}

/*
 * Il select è trasparente, quindi il contorno del fuoco da tastiera non si
 * vedrebbe: si mostra sul comando intero.
 */
.tomas-ordina__select:focus-visible {
	outline: 0;
}

.tomas-ordina:has(.tomas-ordina__select:focus-visible) {
	outline: 2px solid var(--tomas-ink);
	outline-offset: 4px;
}

/* =============================================================================
   COLONNA DEI FILTRI
   =============================================================================
   È un form GET: nessuno stato vive nel JavaScript, sta tutto nella barra
   degli indirizzi.
   ========================================================================== */

/*
 * Colonna flex e non blocco: fra il campo di ricerca e il primo gruppo ci
 * sono 9 + 29 px, e in flusso normale quei due margini verticali si
 * fonderebbero in uno da 29 — il primo gruppo salirebbe di nove pixel.
 */
.tomas-filtri {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* --- Campo di ricerca — node 102:58, 102:60 -------------------------------- */

/*
 * Il filetto NON e' piu' un border-bottom: sono due righe sovrapposte, il
 * binario grigio e sopra quella color cuoio che si colora al passaggio del
 * puntatore. Con un bordo solo non ci sarebbe niente da animare — il colore
 * di un bordo cambia tutto insieme, non da un capo all'altro.
 *
 * La spaziatura passa da 12+1 di bordo a 13 di sola spaziatura: il totale
 * resta 37 e il filetto resta dov'era, un pixel sopra il fondo della scatola.
 */
.tomas-filtri__cerca {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px; /* icona chiude a 76, testo a 88 */
	padding-bottom: 13px;
	margin-bottom: 9px; /* filetto a 496+1, titolo del gruppo a 535 */
}

.tomas-filtri__cerca::before,
.tomas-filtri__cerca::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
}

/* Il binario: e' il filetto del Figma, e c'e' sempre. */
.tomas-filtri__cerca::before {
	background: var(--tomas-rule);
}

/*
 * La riga che si colora. A riposo e' schiacciata contro il bordo DESTRO:
 * cosi' l'uscita se ne va dalla parte opposta a quella da cui e' entrata —
 * l'origine si sposta all'istante, e a muoversi e' solo la scala.
 *
 * translateZ(0) non serve al movimento: tiene fisso il livello di
 * composizione. Senza, il browser lo crea al primo hover e in quel momento
 * ridisegna il testo del campo, che per un fotogramma si vede sgranare.
 */
.tomas-filtri__cerca::after {
	background: var(--tomas-brand);
	transform: scaleX(0) translateZ(0);
	transform-origin: right center;
	transition: transform var(--tomas-cerca-out) var(--tomas-ease);
}

/*
 * All'andata l'origine e' a SINISTRA e la curva supera il 100% prima di
 * assestarsi: e' la molla. Lo scatto sporge di 22px — misurato — nello
 * stacco da 40 verso la griglia, e per questo qui non c'e' nessun overflow
 * nascosto: contenuta, la molla non si vedrebbe affatto.
 *
 * Il fuoco da tastiera accende la stessa riga: e' lo stesso segnale, e due
 * trattamenti diversi per «questo campo e' attivo» sarebbero due cose da
 * tenere allineate.
 */
.tomas-filtri__cerca:hover::after,
.tomas-filtri__cerca:focus-within::after {
	transform: scaleX(1) translateZ(0);
	transform-origin: left center;
	transition-duration: var(--tomas-cerca-in);
	transition-timing-function: var(--tomas-ease-elastic-line);
}

.tomas-filtri__cerca-icona {
	color: var(--tomas-border-check);
}

.tomas-filtri__cerca-campo {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-tiny);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-tiny);
	text-transform: uppercase;
	color: var(--tomas-ink);
}

.tomas-filtri__cerca-campo::placeholder {
	color: var(--tomas-ink-body);
	/* Firefox smorza i testi-guida di suo: senza questo sono due grigi diversi. */
	opacity: 1;
}

.tomas-filtri__cerca-campo:focus {
	outline: 0;
}

/* --- Gruppi di filtri — node 91:19, 91:21 ---------------------------------- */

.tomas-filtro {
	margin-top: 29px;
}

.tomas-filtro__titolo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 11px; /* titolo a 535, filetto a 570 */
	border-bottom: 1px solid var(--tomas-rule);
	cursor: pointer;
	/* Il triangolino di <details> non è nel design: via, in tutte e due le forme. */
	list-style: none;
}

.tomas-filtro__titolo::-webkit-details-marker {
	display: none;
}

/*
 * Più o meno, non tutti e due: lo stato lo porta l'attributo `open` di
 * <details>, che è anche quello che il browser comunica agli screen reader.
 * Una classe in più sarebbe un secondo stato da tenere allineato al primo.
 */
.tomas-filtro__segno {
	display: flex;
	align-items: center;
	color: var(--tomas-brand);
}

.tomas-filtro__meno,
.tomas-filtro[open] .tomas-filtro__piu {
	display: none;
}

.tomas-filtro[open] .tomas-filtro__meno {
	display: flex;
}

/*
 * Mentre il pannello rientra il segno è già «più»: l'attributo `open` non può
 * cambiare prima che l'animazione finisca, o il contenuto sparirebbe di
 * colpo, quindi lo stato intermedio lo porta una classe. Sta dopo le regole
 * di [open] e ha la stessa specificità: vince perché viene dopo.
 */
.tomas-filtro.is-chiudendo .tomas-filtro__meno {
	display: none;
}

.tomas-filtro.is-chiudendo .tomas-filtro__piu {
	display: flex;
}

.tomas-filtro__voci {
	/* 17 sotto il filetto, 5 in fondo: il gruppo dopo attacca 29px più giù. */
	padding: 17px 0 5px;
}

.tomas-filtro__voci li + li {
	margin-top: 5px; /* voci alte 24: un passo di 29, come nel Figma */
}

/* --- Quadratino di spunta — node 97:32, 97:38, 99:53 ----------------------- */

.tomas-check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px; /* quadratino chiude a 74, etichetta a 87 */
	cursor: pointer;
}

/*
 * Il vero <input> resta nel documento — invisibile, non rimosso: è lui a
 * portare nome, valore e stato che il form manda, ed è lui che la tastiera
 * raggiunge. Un quadratino disegnato senza input sotto è un disegno.
 */
.tomas-check__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tomas-check__box {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border: 1px solid var(--tomas-border-check);
	background: var(--tomas-surface);
	color: var(--tomas-ink-invert);
	transition: background-color var(--tomas-duration) var(--tomas-ease),
		border-color var(--tomas-duration) var(--tomas-ease);
}

/* La spunta c'è sempre e si vede solo da spuntato: niente da creare al click. */
.tomas-check__box .tomas-icon {
	opacity: 0;
	transition: opacity var(--tomas-duration) var(--tomas-ease);
}

.tomas-check__input:checked + .tomas-check__box {
	background: var(--tomas-brand);
	border-color: var(--tomas-brand);
}

.tomas-check__input:checked + .tomas-check__box .tomas-icon {
	opacity: 1;
}

.tomas-check:hover .tomas-check__box {
	border-color: var(--tomas-ink);
}

/*
 * L'input è invisibile, quindi il contorno del fuoco va messo sul quadratino
 * disegnato: senza, chi naviga da tastiera non vede dove si trova.
 */
.tomas-check__input:focus-visible + .tomas-check__box {
	outline: 2px solid var(--tomas-ink);
	outline-offset: 2px;
}

.tomas-check__label {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-tiny);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-tiny);
	text-transform: uppercase;
	color: var(--tomas-ink);
	transition: color var(--tomas-duration) var(--tomas-ease);
}

.tomas-check__input:checked ~ .tomas-check__label {
	color: var(--tomas-brand);
}

/*
 * Voce spenta: con le scelte già fatte non trova nessun prodotto.
 *
 * «NON DAL FIGMA» — il frame non disegna questo stato. Si SPEGNE e non
 * sparisce: tolta dall'elenco, chi guarda non saprebbe che esiste e
 * tornerebbe a cercarla; spenta, dice che c'è ma non in questa combinazione.
 *
 * Il conto lo fa il PHP (`tomas_catalogo_voce_attiva`) e viaggia col
 * frammento della griglia: dopo un filtro in AJAX il JavaScript riaccende e
 * rispegne le caselle leggendo quello, invece di rifare la colonna.
 */
.tomas-check.is-vuoto {
	opacity: 0.35;
	cursor: not-allowed;
}

.tomas-check.is-vuoto:hover .tomas-check__box {
	border-color: var(--tomas-border-check);
}

/*
 * Esiste solo senza JavaScript: dentro <noscript> il browser non lo
 * costruisce nemmeno quando gli script girano. Nel Figma non c'è perché il
 * disegno dà per scontato il filtro immediato.
 */
.tomas-filtri__applica {
	margin-top: 29px;
	align-self: flex-start;
}

/* =============================================================================
   GRIGLIA DEI PRODOTTI
   ========================================================================== */

/*
 * Colonne in frazioni, non in pixel: a 1920 il conto torna esatto — (1345 -
 * 40) / 3 = 435, la stessa card della home — ma su uno schermo con la barra
 * di scorrimento tre colonne fisse sommerebbero più dello spazio disponibile
 * e si mangerebbero il margine destro.
 */
.tomas-catalogo__griglia {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--tomas-gap);
	row-gap: var(--tomas-catalogo-row-gap);
	/* Le card partono dall'alto: una riga con meno campioni non si stira. */
	align-items: start;
}

/*
 * Mentre i filtri nuovi sono in volo la griglia resta dov'è e si smorza: via
 * di colpo lascerebbe un buco alto quanto la pagina, e tutto quello che sta
 * sotto — la mission — salterebbe su e poi giù.
 */
.tomas-catalogo__risultati {
	transition: opacity var(--tomas-duration) var(--tomas-ease);
}

.tomas-catalogo__risultati.is-loading {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Carica altri --------------------------------------------------------
 * «NON DAL FIGMA»: il frame mostra lo scorrimento infinito già in corso, non
 * il comando che lo avvia. Qui è un LINK vero alla pagina successiva, così
 * senza JavaScript il catalogo si sfoglia lo stesso e i motori di ricerca
 * arrivano in fondo seguendolo.
 */

.tomas-catalogo__oltre {
	display: flex;
	justify-content: center;
	margin-top: var(--tomas-catalogo-row-gap);
}

/* Mentre le card nuove sono in volo il comando resta, ma non si ripreme. */
.tomas-catalogo__oltre.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

/*
 * Finito il catalogo il comando sparisce, ma lo spazio che occupava no: senza
 * questo la mission salterebbe su di colpo sotto l'ultima riga.
 */
.tomas-catalogo__oltre[hidden] {
	display: block;
	visibility: hidden;
}

/* --- Catalogo vuoto -------------------------------------------------------
 * «NON DAL FIGMA». Un filtro che non trova niente è il caso più facile da
 * incontrare, e senza una via d'uscita la pagina diventa un vicolo cieco.
 */

.tomas-catalogo__vuoto {
	display: flex;
	flex-direction: column;
	/*
	 * Centrato e alto nella colonna: il messaggio sta al posto delle card, e
	 * allineato a sinistra in fondo a uno spazio vuoto sembrava una nota a
	 * piè di pagina invece della risposta alla domanda appena fatta.
	 */
	align-items: center;
	text-align: center;
	gap: var(--tomas-space-md);
	padding: var(--tomas-space-lg) 0 var(--tomas-space-3xl);
}

/*
 * Più chiaro del testo corrente: non è contenuto, è l'assenza di contenuto, e
 * non deve pesare quanto una descrizione.
 */
.tomas-catalogo__vuoto .tomas-body {
	color: var(--tomas-ink-muted);
}

/* =============================================================================
   MISSION, NEL CATALOGO
   =============================================================================
   Il componente sta in base.css, perché lo rivorranno le pagine interne. Qui
   c'è solo la sua distanza dall'ultima riga di card: 2612 → 2746 nel Figma.
   ========================================================================== */

.tomas-catalogo + .tomas-mission {
	margin-top: 134px;
}