/*
 * base.css — reset, tipografia, layout e componenti condivisi.
 *
 * Tutti i valori vengono da tokens.css. Se qui compare un numero cablato è un
 * errore, tranne dove è annotato il perché.
 *
 * Riferimento: Figma node 2-13 (Homepage).
 */

/* =============================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--tomas-surface);
	color: var(--tomas-ink-body);
	font-family: var(--tomas-font-body);
	font-size: var(--tomas-fs-body);
	line-height: var(--tomas-lh-body);
	font-weight: var(--tomas-weight-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
	margin: 0;
}

/*
 * list-style azzerato solo sugli elenchi di navigazione e di layout, NON su
 * tutta la pagina: dentro .tomas-richtext gli elenchi arrivano dai campi
 * JetEngine e i pallini devono restare (vedi la nota su tomas_rich_text()).
 */
:where(ul[class]),
:where(ol[class]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
svg,
video {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Chi ha chiesto meno movimento non deve subire le transizioni del tema. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
   ACCESSIBILITÀ
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.skip-link:focus {
	z-index: 100000;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 1em 1.5em;
	clip: auto;
	clip-path: none;
	background: var(--tomas-ink);
	color: var(--tomas-ink-invert);
	font-family: var(--tomas-font-ui);
	font-size: var(--tomas-fs-label);
	letter-spacing: var(--tomas-ls-label);
	text-transform: uppercase;
}

/*
 * Il contorno del focus è visibile e non va tolto: senza, chi naviga da
 * tastiera non sa dove si trova. Con :focus-visible compare solo da tastiera,
 * quindi il click col mouse resta pulito.
 */
:focus-visible {
	outline: 2px solid var(--tomas-brand);
	outline-offset: 3px;
}

/*
 * L'header è sticky: senza questo, un'ancora porta il bersaglio sotto la
 * barra e sembra che il link non abbia funzionato.
 */
:target {
	scroll-margin-top: calc(var(--tomas-header-h) + var(--tomas-space-md));
}

html {
	scroll-behavior: smooth;
}

/* =============================================================================
   LAYOUT
   =============================================================================
   Il design è full screen: non c'è un box che limiti la pagina, c'è un
   margine laterale fisso a cui tutte le sezioni si allineano.
   ========================================================================== */

.tomas-wrap {
	padding-left: var(--tomas-gutter);
	padding-right: var(--tomas-gutter);
}

/* Filetto orizzontale largo quanto il contenuto: nel Figma è un SVG, qui è
 * un bordo — una riga da 1px non merita una richiesta HTTP. */
.tomas-rule {
	border: 0;
	border-top: 1px solid var(--tomas-rule);
	margin: 0;
}

.tomas-rule--dark {
	border-top-color: var(--tomas-rule-dark);
}

/* =============================================================================
   TIPOGRAFIA
   ========================================================================== */

.tomas-hero-title {
	font-family: var(--tomas-font-display);
	font-weight: var(--tomas-weight-regular);
	font-size: var(--tomas-fs-hero);
	line-height: var(--tomas-lh-hero);
	letter-spacing: var(--tomas-ls-hero);
	text-transform: uppercase;
}

/* Titolo di sezione e citazione: stesso stile, due usi. */
.tomas-h1,
.tomas-display {
	font-family: var(--tomas-font-display);
	font-weight: var(--tomas-weight-regular);
	font-size: var(--tomas-fs-display);
	line-height: var(--tomas-lh-display);
	letter-spacing: var(--tomas-ls-display);
	color: var(--tomas-ink);
}

/* Nome prodotto, sottotitolo di sezione: un solo stile, due nomi. */
.tomas-h2,
.tomas-h3,
.tomas-title {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-semibold);
	font-size: var(--tomas-fs-title);
	line-height: normal;
	text-transform: uppercase;
	color: var(--tomas-ink);
}

/*
 * Etichetta: lo stile più ripetuto del design — titoletti di sezione,
 * navigazione, intestazioni di colonna del footer, "collection".
 */
.tomas-label {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-label);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-label);
	text-transform: uppercase;
	color: var(--tomas-ink);
}

.tomas-label--brand {
	color: var(--tomas-brand);
}

.tomas-label--invert {
	color: var(--tomas-ink-invert);
}

.tomas-body {
	font-family: var(--tomas-font-body);
	font-size: var(--tomas-fs-body);
	line-height: var(--tomas-lh-body);
	color: var(--tomas-ink-body);
}

.tomas-body--invert {
	color: var(--tomas-ink-invert);
}

.tomas-price {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-semibold);
	font-size: var(--tomas-fs-price);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-price);
	text-transform: uppercase;
	color: var(--tomas-brand);
}

/* =============================================================================
   TESTO REDAZIONALE
   =============================================================================
   Quello che arriva dall'editor o da tomas_rich_text(). Qui i pallini degli
   elenchi tornano, perché il reset li toglie solo agli ul con una classe.
   ========================================================================== */

.tomas-richtext > * + * {
	margin-top: var(--tomas-space-md);
}

.tomas-richtext ul,
.tomas-richtext ol {
	padding-left: 1.25em;
}

.tomas-richtext li + li {
	margin-top: var(--tomas-space-2xs);
}

.tomas-richtext a {
	color: var(--tomas-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================================
   ICONE
   =============================================================================
   tomas_icon() inlina l'SVG dentro questo span. Le icone monocrome usano
   currentColor, quindi il colore lo decide chi le contiene.
   ========================================================================== */

.tomas-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
	flex: none;
}

.tomas-icon svg {
	display: block;
}

/* =============================================================================
   ETICHETTA CHE SCORRE
   =============================================================================
   Due copie dello stesso testo in una finestrella che ritaglia: all'hover
   quella visibile esce dal basso e quella di scorta, che stava sopra il bordo,
   scende al suo posto. Il movimento e' quindi dall'alto verso il basso.
   ========================================================================== */

.tomas-roll {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.tomas-roll__in,
.tomas-roll__out {
	display: block;
	transition: transform 420ms var(--tomas-ease-out);
}

.tomas-roll__out {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	transform: translateY(-100%);
}

a:hover .tomas-roll__in,
a:focus-visible .tomas-roll__in {
	transform: translateY(100%);
}

a:hover .tomas-roll__out,
a:focus-visible .tomas-roll__out {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.tomas-roll__in,
	.tomas-roll__out {
		transition: none;
	}
}

/* =============================================================================
   BOTTONI E CTA
   ========================================================================== */

.tomas-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--tomas-space-xs);
	font-family: var(--tomas-font-ui);
	cursor: pointer;
	transition: color var(--tomas-duration) var(--tomas-ease),
		background-color var(--tomas-duration) var(--tomas-ease),
		border-color var(--tomas-duration) var(--tomas-ease);
}

.tomas-btn--solid {
	background: var(--tomas-ink);
	color: var(--tomas-ink-invert);
	font-weight: var(--tomas-weight-semibold);
	font-size: var(--tomas-fs-label);
	letter-spacing: var(--tomas-ls-label);
	text-transform: uppercase;
	padding: var(--tomas-space-sm) var(--tomas-space-lg);
}

.tomas-btn--solid:hover {
	background: var(--tomas-brand);
}

.tomas-btn--outline {
	border: 1px solid currentColor;
	color: var(--tomas-ink);
	font-weight: var(--tomas-weight-semibold);
	font-size: var(--tomas-fs-label);
	letter-spacing: var(--tomas-ls-label);
	text-transform: uppercase;
	padding: var(--tomas-space-sm) var(--tomas-space-lg);
}

.tomas-btn--outline:hover {
	background: var(--tomas-ink);
	color: var(--tomas-ink-invert);
}

/*
 * CTA testuale: la variante più usata del design — testo color cuoio con un
 * filetto da 40px sotto. Il filetto è uno ::after e non un border perché è
 * più corto del testo, e all'hover si allunga fino a coprirlo.
 */
.tomas-btn--link {
	display: inline-block;
	position: relative;
	font-weight: var(--tomas-weight-bold);
	font-size: var(--tomas-fs-cta);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-cta);
	text-transform: uppercase;
	color: var(--tomas-brand);
	padding-bottom: var(--tomas-cta-rule-gap);
}

.tomas-btn--link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--tomas-cta-rule-w);
	height: 1px;
	background: currentColor;
	transition: width var(--tomas-duration) var(--tomas-ease);
}

.tomas-btn--link:hover::after {
	width: 100%;
}

/* =============================================================================
   SCOPERTURA DELLE IMMAGINI
   =============================================================================
   Lo stesso gesto della tendina laterale — prima corre il fondo, poi
   l'immagine sopra di lui, tutti e due da destra verso sinistra — su un
   contenitore qualunque, quando entra nel viewport.

   Serve un contenitore con `overflow: hidden` e un'immagine dentro che lo
   riempia: le due immagini della sezione Azienda sono già fatte così.
   ========================================================================== */

/*
 * Lo stato coperto lo mette il JS (`is-armed`), NON questo foglio: senza
 * JavaScript queste immagini devono esserci, non restare nascoste per sempre.
 * È la regola del tema — il JS aggiunge, non abilita.
 */
.tomas-reveal.is-armed,
.tomas-reveal.is-armed img {
	clip-path: inset(0 0 0 100%);
}

/*
 * Il fondo su cui l'immagine si scopre. Senza, la prima delle due corse non
 * si vedrebbe: si scoprirebbe il nulla.
 */
.tomas-reveal.is-armed {
	background: var(--tomas-placeholder-bg);
}

.tomas-reveal.is-revealed {
	animation: tomas-reveal var(--tomas-reveal) var(--tomas-ease-out) both;
}

/*
 * L'immagine parte quando il fondo ha finito: il ritardo è esattamente la
 * durata della prima corsa, così i due gesti sono in fila e non si
 * accavallano.
 *
 * Il ritaglio sta sull'IMMAGINE e non solo sul contenitore, come nella
 * tendina: è il fondo che resta scoperto a dare il senso del gesto.
 */
.tomas-reveal.is-revealed img {
	animation: tomas-reveal var(--tomas-reveal) var(--tomas-ease-out)
		var(--tomas-reveal) both;
}

/*
 * inset() è scritto in senso orario — alto, destra, basso, sinistra — quindi
 * è il margine SINISTRO che va da tutto a niente, e il bordo scoperto avanza
 * da destra verso sinistra.
 */
@keyframes tomas-reveal {
	from { clip-path: inset(0 0 0 100%); }
	to   { clip-path: inset(0 0 0 0); }
}

/* Chi ha chiesto meno movimento vede le immagini, e basta. */
@media (prefers-reduced-motion: reduce) {
	.tomas-reveal.is-armed,
	.tomas-reveal.is-armed img,
	.tomas-reveal.is-revealed,
	.tomas-reveal.is-revealed img {
		clip-path: none;
		animation: none;
	}
}

/* =============================================================================
   CARD PRODOTTO — node 40:37, 40:38, 40:55, 40:72
   =============================================================================
   Sta qui e non in home.css perché la stampano due posti: la sezione "In
   evidenza" della home e, dal passo 8, il catalogo di WooCommerce. Il
   markup è uno solo — template-parts/product-card.php — e questo è il
   foglio che lo veste.
   ========================================================================== */

.tomas-product {
	position: relative;
}

/*
 * Contenitore della sola foto. È l'elemento a cui sono ancorati il cuore e il
 * quadratino col +: ancorati alla card intera finirebbero sotto il prezzo e i
 * campioni, che della foto non fanno parte.
 */
.tomas-product__thumb {
	position: relative;
	/*
	 * Proporzione invece di altezza fissa: la larghezza la decide la colonna,
	 * e con un'altezza bloccata a 580 la foto si deformerebbe.
	 */
	aspect-ratio: 435 / 580;
	overflow: hidden;
	/*
	 * Stesso grigio del segnaposto: finché la foto carica, il riquadro non
	 * cambia colore sotto gli occhi.
	 */
	background: var(--tomas-placeholder-bg);
}

.tomas-product__media {
	display: block;
	height: 100%;
}

.tomas-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter var(--tomas-duration-slow) var(--tomas-ease);
}

/*
 * All'hover la foto NON si ingrandisce: diventa in bianco e nero. Uno zoom
 * dentro un riquadro con overflow nascosto taglia il capo, e su una riga di
 * card il movimento faceva ballare la sezione intera.
 */
.tomas-product:hover .tomas-product__media img {
	filter: grayscale(1);
}

/*
 * Lo stesso da tastiera, ma in una regola SEPARATA e con :focus-visible.
 *
 * Separata perché un browser che non conosce :has() butterebbe via tutta la
 * regola in cui si trova, e con essa l'hover.
 *
 * :focus-visible e non :focus-within perché dopo un click col mouse il
 * bottone del cuore resta a fuoco: la foto restava in bianco e nero anche a
 * puntatore andato via, fino all'hover successivo. :focus-visible su un
 * bottone il browser non lo accende per un click, solo per la tastiera.
 */
.tomas-product:has(:focus-visible) .tomas-product__media img {
	filter: grayscale(1);
}

/* --- Cuore dei preferiti, in alto a destra sulla foto ----------------------
 * All'hover NON si muove, di proposito: questo cuore reagisce al click, e
 * due reazioni sullo stesso comando si disturbano a vicenda.
 */

.tomas-product__wish {
	position: absolute;
	z-index: 2;
	top: 22px;
	right: var(--tomas-card-wish-inset);
	width: var(--tomas-card-wish);
	color: var(--tomas-ink-invert);
}

/*
 * I due cuori sono tutti e due in pagina e se ne vede uno. Lo stato è
 * `aria-pressed`: una classe in più sarebbe un secondo stato da tenere
 * allineato, e questo si legge anche con uno screen reader.
 */
.tomas-product__wish-on,
.tomas-product__wish[aria-pressed="true"] .tomas-product__wish-off {
	display: none;
}

.tomas-product__wish[aria-pressed="true"] .tomas-product__wish-on {
	display: inline-flex;
}

/*
 * Il battito all'aggiunta: il cuore salta, rientra sotto misura e si assesta.
 * Non torna mai indietro oltre il punto di partenza — un'inversione di
 * direzione si legge come uno scatto, non come allegria.
 *
 * Il JS toglie e rimette la classe forzando un ricalcolo in mezzo:
 * un'animazione CSS rilanciata sullo stesso elemento non riparte da sola.
 */
@keyframes tomas-wish-beat {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.35); }
	55%  { transform: scale(0.92); }
	80%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}

@keyframes tomas-wish-ring {
	0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.5); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

.tomas-product__wish.is-beating .tomas-icon {
	animation: tomas-wish-beat 520ms var(--tomas-ease);
}

/*
 * L'anello che si allarga dietro al cuore. È invisibile quando fermo, ma
 * resta in pagina: `pointer-events: none` perché un cerchio da 34px sopra la
 * foto intercetterebbe i click destinati a lei.
 */
.tomas-product__wish::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	border: 2px solid var(--tomas-ink-invert);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.5);
}

.tomas-product__wish.is-beating::after {
	animation: tomas-wish-ring 520ms var(--tomas-ease-out);
}

/*
 * Quadratino dell'aggiungi-al-carrello: angolo in basso a destra DELLA FOTO,
 * a filo dei suoi due bordi.
 */
.tomas-product__add {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tomas-card-action);
	height: var(--tomas-card-action);
	background: var(--tomas-brand);
	color: var(--tomas-ink-invert);
	transition: background-color var(--tomas-duration) var(--tomas-ease);
}

.tomas-product__add:hover {
	background: var(--tomas-ink);
}

/*
 * Il + ruota di un quarto di giro all'hover. La curva supera i 90° e rientra:
 * è una sovraelongazione, non un rimbalzo che torna indietro — un movimento
 * che si inverte si legge come uno scatto, non come elasticità.
 *
 * Il + ha quattro assi di simmetria, quindi a fine rotazione è identico a
 * come era partito: quello che si vede è il giro, non un simbolo nuovo. È
 * voluto — per una × servirebbero 45°.
 *
 * translateZ(0) tiene fermo il livello di composizione: senza, il browser lo
 * crea quando l'animazione parte e per un fotogramma il tratto dell'icona
 * cambia spessore.
 */
.tomas-product__add-icon {
	transform: translateZ(0) rotate(0deg);
	transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tomas-product__add:hover .tomas-product__add-icon,
.tomas-product__add:focus-visible .tomas-product__add-icon {
	transform: translateZ(0) rotate(90deg);
}

/*
 * Dopo il click lo sfondo si scurisce. `loading` e `added` le mette il JS di
 * WooCommerce — la prima mentre la richiesta è in volo, la seconda quando è
 * andata a buon fine: lo stato arriva da chi sa com'è finita, non da un
 * nostro ottimismo. Per questo non c'è una riga di JS nostro qui dietro.
 */
.tomas-product__add.loading {
	background: var(--tomas-brand-dark);
	opacity: 0.7;
}

.tomas-product__add.added {
	background: var(--tomas-brand-dark);
}

/*
 * Il JS di Woo appende un link "Visualizza carrello" dopo ogni comando di
 * aggiunta. Nel design non esiste e sulla foto non ci sta: si nasconde, non
 * si rimuove — rimuoverlo vorrebbe dire sostituire quel JS.
 */
.tomas-product__thumb .added_to_cart {
	display: none;
}

.tomas-product__title {
	margin-top: 21px; /* foto 2517 → titolo 2538 */
}

.tomas-product__price {
	margin-top: var(--tomas-space-2xs);
}

/*
 * Il prezzo lo compone Woo, e per un prodotto variabile con prezzi diversi è
 * un range: due importi col trattino in mezzo. Colore e peso li porta
 * .tomas-price; questi due elementi sono l'eventuale prezzo in offerta — il
 * vecchio barrato, il nuovo che per default è sottolineato.
 */
.tomas-product__price del {
	opacity: 0.5;
}

.tomas-product__price ins {
	text-decoration: none;
}

/* --- Campioni di colore ----------------------------------------------------
 * Cornice da 19px con il colore dentro a 13px: 3px di aria tutto intorno.
 * Il colore NON è un token: arriva dal colorpicker sul termine dell'attributo
 * (tomas_color_hex) e cambia a ogni collezione.
 */

.tomas-swatches {
	display: flex;
	align-items: center;
	gap: var(--tomas-swatch-gap);
	margin-top: 10px; /* prezzo chiude a 2585, campioni a 2595 */
}

.tomas-swatch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tomas-swatch);
	height: var(--tomas-swatch);
	border: 1px solid var(--tomas-border-swatch);
	background: var(--tomas-surface);
	transition: border-color var(--tomas-duration) var(--tomas-ease);
}

.tomas-swatch::before {
	content: "";
	width: var(--tomas-swatch-fill);
	height: var(--tomas-swatch-fill);
	background: var(--tomas-swatch-color, transparent);
}

.tomas-swatch:hover,
.tomas-swatch:focus-visible,
.tomas-swatch.is-selected {
	border-color: var(--tomas-ink);
}

/* --- Tooltip col nome del colore -------------------------------------------
 * «NON DAL FIGMA»: il frame non lo disegna.
 *
 * Sta SOPRA il campione: sotto uscirebbe dal fondo della card, e la riga
 * delle card ha l'overflow nascosto perché scorre — un tooltip in basso
 * verrebbe tagliato.
 *
 * E per la stessa ragione si apre a DESTRA invece che centrato: centrato sul
 * campione sporgeva a sinistra del contenitore che scorre, che lo tagliava —
 * sul primo campione della prima card si leggeva "ancio" invece di "Arancio".
 * Allineandolo al bordo sinistro del campione cresce verso l'interno della
 * card, dove lo spazio c'è sempre.
 *
 * pointer-events: none perché un tooltip che si frappone al puntatore fa
 * sfarfallare l'hover che lo ha aperto.
 */

.tomas-swatch__name {
	position: absolute;
	bottom: calc(100% + 8px);
	/*
	 * -1px e non 0: left si misura dal box INTERNO al bordo del campione, che
	 * di bordo ne ha uno. Senza questo pixel il tooltip, e con lui la
	 * freccetta, sarebbero spostati di uno a destra rispetto al campione.
	 */
	left: -1px;
	z-index: 3;
	padding: 3px 7px;
	background: var(--tomas-ink);
	color: var(--tomas-ink-invert);
	font-family: var(--tomas-font-ui);
	font-size: var(--tomas-fs-badge);
	line-height: 1.5;
	letter-spacing: 0.4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	/*
	 * Entra salendo: parte sei pixel più in basso e arriva in posizione
	 * mentre compare. La curva è quella in uscita rapida del tema, quindi il
	 * movimento è quasi tutto all'inizio e si ferma morbido — un tooltip che
	 * sale a velocità costante sembra trascinato.
	 */
	transform: translateY(6px);
	transition: opacity 180ms var(--tomas-ease-out),
		transform 220ms var(--tomas-ease-out);
}

/*
 * La freccetta. Punta al centro del campione e non al centro del tooltip,
 * perché il tooltip è allineato al bordo sinistro del campione: sono due
 * centri diversi appena il nome del colore è più lungo di 19px.
 *
 * È un bordo, non un quadrato ruotato: un triangolo fatto coi bordi non ha
 * lati da nascondere dietro al riquadro e resta nitido a qualunque zoom.
 */
.tomas-swatch__name::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(var(--tomas-swatch) / 2);
	margin-left: -5px;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: var(--tomas-ink);
}

.tomas-swatch:hover .tomas-swatch__name,
.tomas-swatch:focus-visible .tomas-swatch__name {
	opacity: 1;
	transform: translateY(0);
}

/* --- La card in attesa — node 83:609 ---------------------------------------
 * Il posto che una card occuperà mentre sta arrivando, durante lo
 * scorrimento infinito del catalogo. Non è una card vuota: è la sua sagoma —
 * il riquadro della foto nella sua proporzione, due barre dove andranno nome
 * e prezzo.
 *
 * Il grigio è lo stesso dei segnaposto: quando la foto vera arriva, il
 * riquadro non cambia colore sotto gli occhi.
 *
 * Niente campioni e niente comandi: sotto non c'è ancora nessun prodotto, e
 * un cuore o un + finti sarebbero cliccabili a vuoto. Il markup è un
 * <template> in template-parts/archive/griglia.php — lo clona il JS.
 */

.tomas-product__barra {
	height: 20px;
	background: var(--tomas-placeholder-bg);
}

.tomas-product__barra--titolo {
	width: 250px;
	max-width: 100%;
	margin-top: 22px; /* foto chiude a 2515, barra a 2537 */
}

.tomas-product__barra--prezzo {
	width: 90px;
	max-width: 100%;
	margin-top: 6px;
}

/* =============================================================================
   PROMO BAR
   ========================================================================== */

.tomas-promo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--tomas-promo-h);
	background: var(--tomas-brand);
	color: var(--tomas-ink-invert);
	text-align: center;
}

.tomas-promo__text {
	font-family: var(--tomas-font-body);
	font-size: var(--tomas-fs-small);
	line-height: var(--tomas-lh-ui);
}

/* =============================================================================
   HEADER
   =============================================================================
   Sticky sotto la promo bar. Due fasce: la prima con marchio, lingua e icone,
   la seconda con la navigazione, separate da un filetto.
   ========================================================================== */

.tomas-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--tomas-surface);
	border-bottom: 1px solid var(--tomas-border);
}

.tomas-header__inner {
	position: relative;
	/* Il bordo inferiore sta DENTRO i 105px del Figma, non si somma. */
	height: calc(var(--tomas-header-h) - 1px);
	padding: 0 var(--tomas-gutter);
}

/* --- Fascia alta: 63px, cioè fino al filetto del Figma (top 93 - 30) ------ */

.tomas-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 63px;
	border-bottom: 1px solid var(--tomas-border);
}

.tomas-header__start,
.tomas-header__end {
	display: flex;
	align-items: center;
	gap: var(--tomas-space-lg);
	/*
	 * I due lati hanno la stessa base così il marchio al centro resta
	 * centrato anche quando a destra ci sono più icone che a sinistra.
	 */
	flex: 1 1 0;
}

.tomas-header__end {
	justify-content: flex-end;
}

.tomas-header__logo {
	display: block;
	flex: none;
	color: var(--tomas-ink);
}

/*
 * Solo la larghezza: l'altezza la ricava il browser dalle proporzioni
 * dell'SVG. Fissarle entrambe deformerebbe il marchio appena il responsive
 * cambia la larghezza.
 */
.tomas-header__logo .tomas-icon svg {
	width: var(--tomas-logo-w);
	height: auto;
}

/* Ripiego quando l'icona del marchio non c'è: il nome del sito come testo. */
.tomas-header__logo-text {
	font-family: var(--tomas-font-display);
	font-size: 24px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--tomas-ink);
}

.tomas-header__action {
	display: inline-flex;
	align-items: center;
	color: var(--tomas-ink);
	transition: color var(--tomas-duration) var(--tomas-ease);
}

.tomas-header__action:hover {
	color: var(--tomas-brand);
}

/* --- Pallini del carrello e dei preferiti ---------------------------------
 * Lo stesso componente in due posti, quindi una regola sola.
 *
 * Il numero NON si stampa da PHP: l'header sta su pagine cacheate e
 * resterebbe appeso a quello del primo visitatore. Quello del carrello lo
 * riempiono i frammenti AJAX di Woo, quello dei preferiti il JS — e i
 * preferiti stanno nel localStorage, dove PHP non arriva comunque. Finché è
 * vuoto, il pallino non si vede.
 */
.tomas-header__cart,
.tomas-header__wish {
	position: relative;
}

.tomas-header__cart-count,
.tomas-header__wish-count {
	position: absolute;
	top: -8px;
	right: -9px;
	display: none;
	align-items: center;
	justify-content: center;
	min-width: var(--tomas-badge);
	height: var(--tomas-badge);
	padding: 0 4px;
	border-radius: 50%;
	background: var(--tomas-brand);
	color: var(--tomas-ink-invert);
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-bold);
	font-size: var(--tomas-fs-badge);
	line-height: 1;
}

.tomas-header__cart-count:not(:empty),
.tomas-header__wish-count:not(:empty) {
	display: inline-flex;
}

/* --- Selettore di lingua --------------------------------------------------
 * Posto previsto per WPML, che non è ancora installato. Vuoto non occupa
 * spazio, così l'header non ha un buco in attesa.
 */
.tomas-header__lang:empty {
	display: none;
}

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

/* --- Fascia bassa: navigazione centrata ---------------------------------- */

.tomas-header__bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px; /* 105 - 63 */
}

.tomas-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tomas-nav-gap);
}

.tomas-nav__list a,
.tomas-nav__list > li > a {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-label);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-label);
	text-transform: uppercase;
	color: var(--tomas-ink);
	transition: color var(--tomas-duration) var(--tomas-ease);
}

/*
 * All'hover la voce non cambia colore: scorre e basta. Il colore resta al
 * segnaposto della pagina corrente, che e' uno stato e non un movimento.
 */
.tomas-nav__list .current-menu-item > a {
	color: var(--tomas-brand);
}

/* --- Hamburger ------------------------------------------------------------
 * Nel Figma c'e' SEMPRE, anche su desktop: non e' un menu mobile, e' il
 * comando che apre la tendina laterale.
 *
 * Il marchio e' asimmetrico: la riga di mezzo e' lunga 60, le altre due 40 e
 * tutte e tre allineate a destra. All'hover le lunghezze si ridistribuiscono
 * — 100%, 20%, 40% — e il segno si scompone in una scaletta. Niente cambio di
 * colore.
 */
.tomas-header__toggle {
	display: inline-flex;
	align-items: center;
	/* Staccato dalle icone accanto. */
	margin-left: var(--tomas-space-md);
	color: var(--tomas-ink);
}

/*
 * Le righe restano agganciate a destra, dove sono gia' allineate tutte e tre:
 * cambia solo quanto sporgono verso sinistra.
 */
.tomas-header__toggle svg line {
	transform-box: fill-box;
	transform-origin: right center;
	transition: transform 440ms var(--tomas-ease-out);
}

/*
 * All'hover le tre righe prendono tre lunghezze diverse — 100%, 20%, 40% —
 * sulla larghezza piena di 60px. I fattori sono il rapporto fra quello che
 * devono diventare e quello che sono:
 *
 *   prima     40px → 60px   1.5
 *   centrale  60px → 12px   0.2
 *   terza     40px → 24px   0.6
 */
.tomas-header__toggle:hover svg line:nth-of-type(1) {
	transform: scaleX(1.5);
}

.tomas-header__toggle:hover svg line:nth-of-type(2) {
	transform: scaleX(0.2);
}

.tomas-header__toggle:hover svg line:nth-of-type(3) {
	transform: scaleX(0.6);
}

/* A cascata, dall'alto in basso. */
.tomas-header__toggle svg line:nth-of-type(2) {
	transition-delay: 60ms;
}

.tomas-header__toggle svg line:nth-of-type(3) {
	transition-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
	.tomas-header__toggle svg line {
		transition: none;
	}
}

/* =============================================================================
   TENDINA LATERALE — node 117:176
   =============================================================================
   Pannello da 550px ancorato a destra, con il velo dietro. E' in pagina gia'
   chiusa e non la costruisce il JS: cosi' il contenuto sta nel documento per i
   motori di ricerca.
   ========================================================================== */

.tomas-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
}

/*
 * [hidden] di suo vale display:none, ma qui serve che l'elemento resti nel
 * flusso durante la chiusura per farla vedere: lo toglie il JS all'apertura e
 * lo rimette a animazione finita.
 */
.tomas-drawer[hidden] {
	display: none;
}

.tomas-drawer__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity var(--tomas-drawer-speed) var(--tomas-ease);
	cursor: pointer;
}

.tomas-drawer.is-open .tomas-drawer__scrim {
	opacity: 1;
}

.tomas-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--tomas-drawer-w);
	max-width: 100%;
	height: 100%;
	background: var(--tomas-surface);
	/*
	 * Niente scorrimento: il contenuto si adatta all'altezza della finestra.
	 * Quello che assorbe lo scarto e' l'immagine — vedi __media — perche' e'
	 * l'unico elemento che puo' cambiare altezza senza che si noti.
	 */
	overflow: hidden;
	transform: translateX(100%);
	transition: transform var(--tomas-drawer-speed) var(--tomas-ease-out);
	/*
	 * will-change mentre la tendina e' in pagina: dice al browser di preparare
	 * il livello di composizione PRIMA che il movimento cominci. Senza, il
	 * livello nasce nello stesso fotogramma in cui parte lo scorrimento — e
	 * disegnare 550px di pannello, testo da 60px e una foto tutto insieme
	 * costa il primo fotogramma, che e' lo scatto che si vede.
	 *
	 * Sta sotto :not([hidden]) e non sempre: su una tendina chiusa sarebbe
	 * memoria tenuta occupata per niente.
	 */
	will-change: auto;
}

.tomas-drawer:not([hidden]) .tomas-drawer__panel {
	will-change: transform;
}

.tomas-drawer:not([hidden]) .tomas-drawer__scrim {
	will-change: opacity;
}

.tomas-drawer.is-open .tomas-drawer__panel {
	transform: translateX(0);
}

/*
 * X di chiusura. Anche questa e' asimmetrica: le due diagonali non si
 * incrociano al centro ma spostate, e i bracci lunghi cadono a sinistra.
 * All'hover ciascuna linea SCIVOLA lungo il proprio asse e i bracci lunghi
 * passano a destra: l'asimmetria si ribalta. Niente rotazione, niente colore.
 */
.tomas-drawer__close {
	position: absolute;
	top: 44px;
	right: var(--tomas-drawer-pad);
	color: var(--tomas-ink);
}

.tomas-drawer__close svg {
	width: 34px;
	height: auto;
	overflow: visible;
}

.tomas-drawer__close svg line {
	transform-box: fill-box;
	transition: transform 440ms var(--tomas-ease-out);
}

/*
 * Ogni linea si muove lungo la PROPRIA direzione — in diagonale, non in
 * orizzontale — quindi la retta su cui giace non cambia: cambiano solo i due
 * bracci che sporgono dall'incrocio, che si scambiano di lato.
 */
.tomas-drawer__close:hover svg line:nth-of-type(1) {
	transform: translate(7px, -7px); /* la diagonale che sale, verso l'alto a destra */
}

.tomas-drawer__close:hover svg line:nth-of-type(2) {
	transform: translate(7px, 7px);  /* quella che scende, verso il basso a destra */
	transition-delay: 80ms;
}

@media (prefers-reduced-motion: reduce) {
	.tomas-drawer__close svg line {
		transition: none;
	}
}

/*
 * Il padding verticale e' sul corpo e non sul pannello: l'immagine deve poter
 * sbordare fino al bordo sinistro, e con un padding sul pannello non potrebbe.
 *
 * Lo spazio sopra e' 145px nel Figma, disegnato su una finestra alta. Qui si
 * stringe quando la finestra e' bassa, o su uno schermo corto il contenuto non
 * ci starebbe: clamp lo tiene fra 72 e 145.
 */
.tomas-drawer__body {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: clamp(72px, 16vh, 145px);
	padding-bottom: clamp(24px, 5vh, 60px);
}

/* Le due navigazioni e il filetto non si comprimono: sono testo. */
.tomas-drawer__primary,
.tomas-drawer__secondary,
.tomas-drawer__rule {
	flex: none;
}

/* --- Voci grandi ---------------------------------------------------------- */

.tomas-drawer__primary-list a,
.tomas-drawer__primary-list > li > a {
	position: relative;
	display: inline-block;
	margin: 0 var(--tomas-drawer-pad);
	font-family: var(--tomas-font-display);
	font-weight: var(--tomas-weight-regular);
	font-size: 60px;
	line-height: 60px;
	letter-spacing: -1.2px;
	text-transform: uppercase;
	color: var(--tomas-ink);
	transition: color 420ms var(--tomas-ease-out);
	/*
	 * Questo translateZ non muove niente: tiene l'elemento su un livello di
	 * composizione suo, sempre.
	 *
	 * Senza, il livello nasce solo quando il filetto comincia ad animarsi: il
	 * testo viene ri-disegnato in quel momento, con un'altra resa dei bordi, e
	 * il salto si legge come un alone comparso all'improvviso. Tenendo il
	 * livello fisso la resa e' la stessa a riposo e in hover, e non cambia
	 * niente sotto gli occhi.
	 */
	transform: translateZ(0);
}

/*
 * All'hover la voce prende il colore di marchio, filetto compreso.
 */
.tomas-drawer__primary-list a:hover,
.tomas-drawer__primary-list a:focus-visible {
	color: var(--tomas-brand);
}

/*
 * Filetto sotto, come le altre CTA del sito, ma solo all'hover: cresce da
 * sinistra. Al rilascio non torna indietro da dove e' venuto — sparisce a
 * destra, perche' l'ancoraggio della trasformazione cambia lato.
 *
 * Il cambio di ancoraggio non si vede: avviene mentre il filetto e' largo
 * tutto, e spostare l'ancoraggio di un elemento a scala 1 non lo muove di un
 * pixel.
 *
 * Il colore e' quello di marchio e non currentColor: cosi' il filetto e' gia'
 * giusto nel fotogramma in cui compare, invece di inseguire la transizione
 * del testo.
 */
.tomas-drawer__primary-list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/*
	 * 4px: il box della voce e' alto 60 e sotto la linea di base dei
	 * maiuscoli resta lo spazio dei discendenti, che qui nessuna lettera usa.
	 * A -2px il filetto finiva quasi addosso alla voce sotto.
	 */
	bottom: 4px;
	height: 1px;
	background: var(--tomas-brand);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 420ms var(--tomas-ease-out);
}

.tomas-drawer__primary-list a:hover::after,
.tomas-drawer__primary-list a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
	.tomas-drawer__primary-list a::after {
		transition: none;
	}
}

/* Filetto da 70px: "azienda" chiude a 267, il filetto e' a 290. */
.tomas-drawer__rule {
	width: 70px;
	margin: 23px var(--tomas-drawer-pad) 0;
	border: 0;
	border-top: 1px solid var(--tomas-rule);
}

/* --- Voci piccole --------------------------------------------------------- */

.tomas-drawer__secondary {
	margin-top: 24px; /* filetto a 290 → voci a 314 */
}

/* Stesso scorrimento delle voci dell'header, e come quelle nessun colore. */
.tomas-drawer__secondary-list a,
.tomas-drawer__secondary-list > li > a {
	display: inline-block;
	margin: 0 var(--tomas-drawer-pad);
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-label);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-label);
	text-transform: uppercase;
	color: var(--tomas-ink-drawer);
}

/* --- Blocco redazionale --------------------------------------------------- */

/*
 * Il blocco redazionale prende tutto lo spazio che resta, e dentro di esso e'
 * l'immagine a cedere: i testi hanno l'altezza che hanno.
 */
.tomas-drawer__story {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: clamp(24px, 6vh, 61px); /* voci chiudono a 386 → immagine a 447 */
}

/*
 * L'immagine sborda a sinistra fino al bordo del pannello e si ferma 40px
 * prima del bordo destro: nel Figma parte da 0 ed e' larga 510 su 550.
 */
/*
 * L'immagine sborda a sinistra fino al bordo del pannello e si ferma 40px
 * prima del bordo destro: nel Figma parte da 0 ed e' larga 510 su 550.
 *
 * E' lei ad assorbire lo scarto di altezza: flex-shrink la fa cedere e
 * object-fit: cover ritaglia invece di deformare. min-height evita che su una
 * finestra molto bassa si riduca a una striscia.
 *
 * Lo sfondo grigio non e' un ripiego: e' il fondo su cui l'immagine si
 * scopre, e si vede mentre il pannello sta ancora entrando.
 */
.tomas-drawer__media {
	margin-right: var(--tomas-drawer-pad);
	flex: 1 1 auto;
	min-height: 80px;
	max-height: 287px;
	overflow: hidden;
	background: var(--tomas-placeholder-bg);
	/* A tendina chiusa non c'e' nemmeno il fondo: si scopre anche lui. */
	clip-path: inset(0 0 0 100%);
}

/*
 * Scopertura in due tempi: prima corre il fondo grigio, poi l'immagine sopra
 * di lui. Sono due gesti nella stessa direzione, uno dietro l'altro, e il
 * secondo parte quando il primo ha finito — il ritardo dell'immagine e'
 * esattamente l'apertura del pannello PIU' la corsa del fondo.
 */
.tomas-drawer.is-open .tomas-drawer__media {
	animation: tomas-reveal var(--tomas-drawer-reveal) var(--tomas-ease-out)
		var(--tomas-drawer-speed) both;
}

/*
 * L'immagine si scopre da destra verso sinistra, e comincia quando il
 * pannello ha finito di entrare: il ritardo e' esattamente la durata
 * dell'apertura, quindi le due cose non si accavallano.
 *
 * Il ritaglio sta sull'IMMAGINE e non sul contenitore: cosi' il fondo grigio
 * resta visibile per tutta la scopertura, ed e' quello che da' il senso del
 * gesto. Con il ritaglio sul contenitore si scoprirebbe anche lo sfondo, e
 * non si vedrebbe niente.
 *
 * inset() e' scritto in senso orario — alto, destra, basso, sinistra — quindi
 * e' il margine SINISTRO che va da tutto a niente, e il bordo scoperto
 * avanza da destra verso sinistra.
 */
.tomas-drawer__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A tendina chiusa l'immagine e' coperta: resta il fondo grigio. */
	clip-path: inset(0 0 0 100%);
}

/*
 * Un'ANIMAZIONE e non una transizione, ed e' una scelta obbligata.
 *
 * Una transizione con ritardo non sopravvive al passaggio da display:none:
 * nasce, resta appesa nella fase di attesa e viene annullata prima di
 * cominciare — si vede solo transitionrun, mai transitionstart. Succede
 * perche' la tendina viene nascosta e rimostrata, e ogni volta il valore di
 * partenza cambia sotto i piedi della transizione.
 *
 * Un'animazione invece non dipende da un valore di partenza: e' dichiarata
 * per intero nei fotogrammi, riparte da capo ogni volta che la classe
 * compare, e con fill-mode both tiene fermo il primo fotogramma per tutta
 * l'attesa.
 */
.tomas-drawer.is-open .tomas-drawer__media img {
	animation: tomas-reveal var(--tomas-drawer-reveal) var(--tomas-ease-out)
		calc(var(--tomas-drawer-speed) + var(--tomas-drawer-reveal)) both;
}

.tomas-drawer__story-title,
.tomas-drawer__story-text,
.tomas-drawer__story-cta {
	flex: none;
}

.tomas-drawer__story-title {
	margin: clamp(16px, 4vh, 36px) var(--tomas-drawer-pad) 0; /* immagine chiude a 734 → 770 */
}

.tomas-drawer__story-text {
	margin: 14px var(--tomas-drawer-pad) 0; /* titoletto chiude a 789 → 803 */
}

/*
 * align-self: senza, la CTA e' un figlio di un contenitore a colonna e si
 * stira per tutta la larghezza. Il suo filetto all'hover arriva a 100% di
 * QUELLA larghezza, non del testo, e sfonda il blocco.
 */
.tomas-drawer__story-cta {
	align-self: flex-start;
	margin: clamp(18px, 4vh, 41px) var(--tomas-drawer-pad) 0; /* testo chiude a 891 → 932 */
}

/* Niente scorrimento della pagina dietro mentre la tendina e' aperta. */
body.is-drawer-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.tomas-drawer__panel,
	.tomas-drawer__scrim,
	.tomas-drawer__close {
		transition: none;
	}

	/* Niente scopertura: fondo e immagine ci sono e basta. */
	.tomas-drawer__media,
	.tomas-drawer__media img,
	.tomas-drawer.is-open .tomas-drawer__media,
	.tomas-drawer.is-open .tomas-drawer__media img {
		clip-path: none;
		animation: none;
	}
}

/* =============================================================================
   FOOTER
   ========================================================================== */

.tomas-footer {
	background: var(--tomas-surface-dark);
	color: var(--tomas-ink-on-dark);
	padding: 79px var(--tomas-gutter) 0; /* logo a 4221, fascia da 4142 */
}

.tomas-footer__inner {
	display: grid;
	grid-template-columns: 435px repeat(4, 1fr);
	column-gap: var(--tomas-space-2xl);
}

/*
 * Le colonne di link non partono alla quota del marchio: nel Figma il marchio
 * e' a 4221 e le intestazioni a 4254.
 */
.tomas-footer__col {
	padding-top: 33px;
}

/* --- Colonna del marchio -------------------------------------------------- */

.tomas-footer__brand {
	grid-column: 1;
}

/*
 * display:block e non inline-block: da elemento in linea l'ancora prende lo
 * spazio sotto la linea di base e il marchio risulta alto 36px invece di 25,
 * spostando in giu' tutto quello che segue.
 */
.tomas-footer__logo {
	display: block;
	width: var(--tomas-logo-footer-w);
	color: var(--tomas-ink-invert);
}

.tomas-footer__logo .tomas-icon {
	display: block;
}

.tomas-footer__logo .tomas-icon svg {
	width: var(--tomas-logo-footer-w);
	height: auto;
}

.tomas-footer__claim {
	margin-top: 25px; /* marchio chiude a 4246 → testo a 4271 */
	max-width: 435px;
	font-size: var(--tomas-fs-body);
	line-height: var(--tomas-lh-body);
	color: var(--tomas-ink-on-dark);
}

/* --- Recapiti -------------------------------------------------------------
 * Griglia a due colonne invece di un flex per riga: le icone restano
 * incolonnate anche se un recapito va a capo.
 */
.tomas-footer__contacts {
	display: grid;
	grid-template-columns: 28px 1fr; /* icona a 60, testo a 88 */
	row-gap: 8px;    /* righe a 4345, 4374, 4404: 29-30px di passo */
	align-items: start;
	margin-top: 30px; /* claim chiude a 4315 → recapiti a 4345 */
	font-style: normal;
	color: var(--tomas-ink-on-dark-mute);
}

.tomas-footer__contacts .tomas-icon {
	margin-top: 4px;
	color: var(--tomas-ink-on-dark-mute);
}

.tomas-footer__contacts a {
	transition: color var(--tomas-duration) var(--tomas-ease);
}

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

/* --- Colonne di link ------------------------------------------------------ */

.tomas-footer__col-title {
	margin-bottom: 18px; /* intestazione chiude a 4278 → voci a 4296 */
	color: var(--tomas-ink-invert);
}

.tomas-footer__menu a,
.tomas-footer__legal-menu a {
	display: inline-block;
	font-family: var(--tomas-font-body);
	font-size: var(--tomas-fs-body);
	line-height: var(--tomas-lh-ui);
	text-transform: uppercase;
	color: var(--tomas-ink-on-dark-mute);
	transition: color var(--tomas-duration) var(--tomas-ease);
}

.tomas-footer__menu a:hover,
.tomas-footer__legal-menu a:hover {
	color: var(--tomas-ink-invert);
}

/* --- Riga di chiusura ----------------------------------------------------- */

.tomas-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tomas-space-lg);
	margin-top: 49px;  /* recapiti chiudono a 4427 → filetto a 4476 */
	padding: 19px 0 39px; /* filetto → copyright 4495; fascia chiude a 4556 */
	border-top: 1px solid var(--tomas-rule-dark);
}

.tomas-footer__copyright {
	font-size: var(--tomas-fs-body);
	line-height: var(--tomas-lh-body);
	color: var(--tomas-ink-on-dark-mute);
}

.tomas-footer__copyright a {
	color: var(--tomas-ink-on-dark-strong);
}

.tomas-footer__pay {
	display: flex;
	align-items: center;
	gap: var(--tomas-space-lg);
}

/*
 * I marchi dei circuiti NON usano currentColor: sono loghi di terzi e vanno
 * resi con i loro colori.
 */
.tomas-footer__pay .tomas-icon {
	opacity: 0.85;
}

/* =============================================================================
   SEZIONE MISSION — node 77:392, 85:19, 83:627, 119:232
   =============================================================================
   Fascia a tutta larghezza con foto, etichetta, frase e CTA. Sta in base.css
   e non in shop.css perché non è una pagina del negozio: la chiudono gli
   archivi del catalogo e la rivorranno le pagine interne, e i suoi campi sono
   nella options page "Sezioni globali", cioè quelli che compaiono ovunque.
   ========================================================================== */

/*
 * min-height e non height: il contenuto nel Figma ne occupa 460 dei 600 e lo
 * spazio sotto è quello che resta, ma una frase più lunga di due righe non
 * deve farsi tagliare. Con l'altezza bloccata, il terzo rigo finirebbe fuori.
 */
.tomas-mission {
	position: relative;
	display: flex;
	justify-content: center;
	min-height: var(--tomas-mission-h);
	padding: 0 var(--tomas-gutter);
	/*
	 * Il fondo scuro c'è anche senza foto. Campo immagine vuoto = nessun
	 * segnaposto (§7.2): resta una fascia scura, e che manchi una foto si
	 * vede. Una foto del tema al suo posto farebbe credere che il campo
	 * funzioni anche quando non è stato compilato.
	 */
	background: var(--tomas-surface-dark);
	color: var(--tomas-ink-invert);
	overflow: hidden;
	margin-top: var(--tomas-space-3xl);
}

.tomas-mission__foto,
.tomas-mission__velo {
	position: absolute;
	inset: 0;
}

.tomas-mission__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * La velatura è un elemento suo e non uno ::before: foto e velo sono due
 * elementi posizionati e si impilano nell'ordine del documento, senza bisogno
 * di z-index. Al corpo invece lo z-index serve, perché è in flusso: senza,
 * finirebbe SOTTO i due posizionati che lo precedono.
 */
.tomas-mission__velo {
	background: var(--tomas-mission-scrim);
}

.tomas-mission__corpo {
	position: relative;
	z-index: 1;
	/* La frase nel Figma è larga 742 e centrata. */
	width: 742px;
	max-width: 100%;
	padding-top: 251px;
	text-align: center;
}

.tomas-mission__occhiello {
	margin-bottom: 22px;
	color: var(--tomas-ink-on-photo);
}

.tomas-mission__titolo {
	margin-bottom: 28px;
	color: var(--tomas-ink-invert);
}

/* =============================================================================
   STRISCIA SCORREVOLE
   =============================================================================
   Il nastro con i claim sopra il footer. Il testo è duplicato e scorre di
   metà larghezza: così il ciclo si chiude senza salti.
   ========================================================================== */

.tomas-marquee {
	overflow: hidden;
	height: var(--tomas-marquee-h);
	background: var(--tomas-brand);
	color: var(--tomas-ink-invert);
	display: flex;
	align-items: center;
	/*
	 * Il nastro esce dal flusso del testo: per chi legge con uno screen
	 * reader è decorazione ripetuta, non contenuto.
	 */
	user-select: none;
}

.tomas-marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--tomas-space-xl);
	padding-right: var(--tomas-space-xl);
	white-space: nowrap;
	animation: tomas-marquee 40s linear infinite;
}

.tomas-marquee__item {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-semibold);
	font-size: var(--tomas-fs-title);
	text-transform: uppercase;
}

.tomas-marquee__sep {
	opacity: 0.6;
}

@keyframes tomas-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/*
 * Fermo quando il movimento non è gradito: un nastro che scorre senza sosta
 * è esattamente il tipo di animazione che la preferenza vuole spegnere.
 */
@media (prefers-reduced-motion: reduce) {
	.tomas-marquee__track {
		animation: none;
	}
}

/* =============================================================================
   PAGINE INTERNE
   ========================================================================== */

.tomas-page {
	padding: var(--tomas-space-3xl) var(--tomas-gutter);
}

.tomas-page__header {
	margin-bottom: var(--tomas-space-xl);
}

.tomas-page__content {
	max-width: 760px;
}