/*
Theme Name:   GeneratePress Child
Theme URI:    https://generatepress.com
Description:  Child theme of GeneratePress for the TauMediPlast catalogue site. Add custom styles and template overrides here.
Author:       TauMediPlast
Template:     generatepress
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  generatepress-child
*/

/* ==================================================================
   Design tokens
   ================================================================== */
:root {
	/*
	 * Palette. Primario #0192d5, secondario #f29400; il resto è derivato.
	 *
	 * Attenzione ai contrasti (WCAG AA, 4.5:1 per il testo normale):
	 * - #0192d5 su bianco è 3.46:1, quindi NON va usato come fondo di un
	 *   pulsante con testo bianco né come colore di testo su fondo chiaro.
	 *   Serve per marchio, bordi, focus ring e riempimenti hover.
	 * - --tmp-primary-mid  su bianco: 4.95:1 → fondo dei pulsanti pieni.
	 * - --tmp-primary-deep su fondo chiaro: 7.75:1 → testo e link.
	 * - --tmp-accent con testo bianco è 2.33:1: l'arancio porta testo scuro.
	 */
	--tmp-primary: #0192d5;
	--tmp-primary-mid: #0177ad;
	--tmp-primary-deep: #05587f;
	--tmp-scuro: #04293a;
	--tmp-soft: #e4f2fa;
	--tmp-accent: #f29400;
	--tmp-accent-mid: #d17e00;
	--tmp-inchiostro: #10202a;
	--tmp-grigio: #5c6873;
	--tmp-nebbia: #f3f6f8;
	--tmp-linea: rgba(5, 88, 127, .12);
	--tmp-linea-forte: rgba(5, 88, 127, .2);
	--tmp-ombra: 0 1px 2px rgba(4, 41, 58, .04), 0 12px 32px -12px rgba(4, 41, 58, .14);
	--tmp-ombra-lift: 0 2px 4px rgba(4, 41, 58, .06), 0 24px 48px -18px rgba(4, 41, 58, .28);

	--tmp-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--tmp-font-body: 'Inter', system-ui, sans-serif;
	--tmp-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	--tmp-wrap: 1400px;
	/* Altezza della barra dell'header. È un valore di partenza: a pagina
	   caricata lo script la misura davvero e riscrive la variabile, perché da
	   qui dipendono lo stacco delle ancore, le colonne agganciate e soprattutto
	   la risalita dell'hero dietro all'header. */
	--tmp-header-h: 72px;
	/* Stacco della pillola dal bordo alto della finestra. */
	--tmp-header-gap: 12px;

	/* ------------------------------------------------------------------
	   Asse orizzontale condiviso.

	   `--tmp-shell` è la larghezza massima della pillola dell'header e
	   `--tmp-shell-inset` il suo stacco dai bordi laterali della finestra.
	   Da lì escono i due gutter: `--tmp-gutter` è la colonna in cui comincia
	   il contenuto (il logo nell'header, la sidebar e la griglia
	   nell'archivio categoria) e `--tmp-gutter-end` quella in cui finisce.

	   Sono asimmetrici di 8px perché il bottone di destra dell'header è una
	   pillola piena, che otticamente vuole meno aria di un testo. Le pagine
	   usano `--tmp-gutter` da entrambi i lati: lì non c'è nessuna forma piena
	   a giustificare l'asimmetria.

	   Header e pagine a tutta larghezza leggono le stesse variabili, quindi
	   restano allineati a qualsiasi larghezza di finestra e in tutti e due
	   gli stati dell'header.

	   La pillola è larga quanto `--tmp-wrap`, cioè quanto la riga di
	   contenuto del sito, invece di ripetere il numero: da 1448px in su il
	   logo cade esattamente sull'asse del testo delle sezioni. Se un domani
	   la pillola deve tornare a essere più larga della riga, basta rimettere
	   qui una misura sua. */
	--tmp-shell: var(--tmp-wrap);
	/* Lo stacco si calcola in percentuale e non su `100vw` perché `100vw`
	   comprende la barra di scorrimento mentre `.tmp-wrap` si centra sulla
	   pagina, che non ce l'ha: con una scrollbar classica i due si sarebbero
	   scostati di metà barra, cioè una manciata di pixel, proprio nel punto
	   in cui il logo dovrebbe cadere sull'asse del testo.

	   La percentuale funziona perché le variabili si sostituiscono come
	   testo: il `100%` non viene risolto qui su `:root`, ma sull'elemento che
	   poi usa la variabile, e in tutti i casi in cui la usiamo il blocco
	   contenitore è largo quanto la pagina — il padding della barra si
	   misura su `.tmp-header`, e la pillola, che è assoluta, sul riquadro
	   della barra stessa. */
	--tmp-shell-inset: max(24px, (100% - var(--tmp-shell)) / 2);
	--tmp-header-pad-y: 13px;
	--tmp-header-pad-l: 24px;
	--tmp-header-pad-r: 16px;
	--tmp-gutter: calc(var(--tmp-shell-inset) + var(--tmp-header-pad-l));
	--tmp-gutter-end: calc(var(--tmp-shell-inset) + var(--tmp-header-pad-r));
}

/* Sotto i 560px la pillola si stringe ai bordi: cambiano le variabili, non le
   regole, così il gutter delle pagine segue l'header senza duplicare la soglia. */
@media (max-width: 560px) {
	:root {
		--tmp-shell-inset: 12px;
		--tmp-header-pad-y: 10px;
		--tmp-header-pad-l: 16px;
		--tmp-header-pad-r: 12px;
	}
}

/* ------------------------------------------------------------------
   Archivio categoria: header sempre atterrato.

   Qui la sidebar è una fascia di `--tmp-nebbia` che parte dal bordo della
   finestra e sale fino in cima. Il fondo dell'header atterrato è lo stesso
   colore (`rgba(243, 246, 248, .86)`), quindi le due superfici si saldano e
   il confine sparisce. Con la pillola, invece, tra header e fascia resta una
   striscia bianca e la sidebar sembra staccata a metà.

   Azzerando lo stacco e portando i due padding a 40px, header a tutta
   larghezza e pagina tornano alla geometria di prima, ma continuano a
   leggere la stessa variabile e quindi restano allineati.

   I due gutter vanno riscritti e non basta cambiare i loro ingredienti:
   `--tmp-gutter` è dichiarata su `:root`, e la sostituzione di `var()`
   avviene sull'elemento dove la proprietà è *dichiarata*, non dove viene
   usata. Il valore che scende per ereditarietà è quindi già calcolato con lo
   stacco di `:root`, e ridefinire `--tmp-shell-inset` qui non lo tocca.
   ------------------------------------------------------------------ */
body.tax-product_cat {
	--tmp-shell-inset: 0px;
	--tmp-header-pad-l: 40px;
	--tmp-header-pad-r: 40px;
	--tmp-gutter: 40px;
	--tmp-gutter-end: 40px;
	/* Qui la pillola non galleggia mai, quindi lo stacco dal bordo alto non
	   serve: senza, l'header è alto esattamente quanto la sua barra e la
	   fascia della sidebar gli si attacca sotto senza aria in mezzo. */
	--tmp-header-gap: 0px;
}

/* Su schermo stretto 40px di margine sono troppi: scendono a 20px, che è il
   valore che l'header atterrato usava già qui sotto i 560px. */
@media (max-width: 560px) {
	body.tax-product_cat {
		--tmp-header-pad-l: 20px;
		--tmp-header-pad-r: 20px;
		--tmp-gutter: 20px;
		--tmp-gutter-end: 20px;
	}
}

/* Rete di sicurezza contro la barra di scorrimento orizzontale.

   A calcolare le fasce a tutta larghezza al pixel giusto ci pensa
   `--tmp-scrollbar`, scritta da assets/js/navigation.js. Questa regola copre
   i due casi in cui quella variabile vale zero: JavaScript disattivato e i
   millisecondi prima che lo script parta.

   `clip` e non `hidden`: `hidden` creerebbe un contenitore di scorrimento e
   disattiverebbe il `position: sticky` dell'header — la cosa più preziosa che
   c'è in questo foglio. `clip` no, e l'ho verificato scorrendo davvero.

   Servono tutti e due gli elementi, e nell'ordine conta il perché.
   Sul solo `body` la regola non fa niente: l'overflow del body si propaga
   alla viewport e il body torna a comportarsi come `visible`. Su `html` la
   propagazione non avviene più — perché `html` non è più `visible` — e la
   riga sul body inizia a ritagliare davvero il suo riquadro. Misurato: con
   il solo `html` la pagina non scorre più di lato ma continua a dichiarare
   uno `scrollWidth` più largo della finestra; con tutti e due i conti
   tornano. */
html,
body {
	overflow-x: clip;
}

/* `.tmp-wrap`, `.tmp-btn` e `.tmp-btn--primary` non sono più definiti qui: la
   loro base sta nel foglio del plugin catalog (assets/css/sections.css), che
   si carica PRIMA di questo. Ridefinirli qui, anche identici, li porterebbe
   dopo le regole delle sezioni, e a parità di specificità vincerebbero loro
   (era successo al padding di `.tmp-cta-split__grid`). Se il plugin è
   spento, functions.php carica assets/css/base-fallback.css al loro posto. */
.entry-header {
	display: none;
}

.one-container .site-content {
	padding: 0;
}

/* Pulsante secondario: l'arancio porta testo scuro (con il bianco sarebbe 2.33:1). */
.tmp-btn--accent {
	background: var(--tmp-accent);
	color: var(--tmp-inchiostro);
	box-shadow: 0 8px 20px -8px rgba(242, 148, 0, .6);
	text-decoration: none;
}

.tmp-btn--accent:hover,
.tmp-btn--accent:focus {
	background: var(--tmp-accent-mid);
	color: var(--tmp-inchiostro);
	transform: translateY(-1px);
	text-decoration: none;
}

/* ==================================================================
   Pillole lingua (solo footer)
   ================================================================== */
.tmp-langs {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tmp-langs li {
	margin: 0;
}

.tmp-langs a {
	display: block;
	font-family: var(--tmp-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	padding: 3px 8px;
	border-radius: 999px;
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	transition: color .2s, background-color .2s;
}

.tmp-langs a:hover,
.tmp-langs a:focus {
	color: #fff;
	background: rgba(255, 255, 255, .1);
}

.tmp-langs .current-lang > a {
	color: var(--tmp-scuro);
	background: #fff;
}

/* ==================================================================
   Header
   ------------------------------------------------------------------
   Due stati. In cima alla pagina è una pillola: barra staccata dai bordi,
   arrotondata, in vetro smerigliato, appoggiata su un header trasparente.
   Appena si scorre (classe `is-expanded`, messa da assets/js/navigation.js)
   la pillola si apre a tutta larghezza e torna una barra normale.

   A cambiare forma è soltanto il fondo, che è uno pseudo-elemento della
   barra: si allarga fino ai bordi e risale a coprire lo stacco in cima. Né
   l'header né la barra cambiano misura, così il contenuto della pagina non
   si sposta e non c'è niente da rilegare mentre l'animazione gira.

   Senza JavaScript resta la pillola, che è uno stato completo e non un
   ripiego. Con il pannello mobile aperto l'header è sempre espanso: una
   pillola con una tendina attaccata sotto non sta in piedi.
   ================================================================== */
.tmp-header {
	position: sticky;
	top: var(--tmp-admin-bar, 0px);
	z-index: 50;
	/* Lo stacco della pillola dal bordo alto. È costante e non viene mai
	   animato: l'header sta nel flusso, quindi ogni pixel di altezza in meno
	   sposta in su tutto quello che viene dopo. Animare questo padding voleva
	   dire far scivolare la pagina di 12px sotto al dito a ogni cambio di
	   stato, e ricalcolare il layout dell'intero documento a ogni frame.
	   Nello stato agganciato è il fondo della barra a risalire fin qui e a
	   coprirlo, senza che l'header cambi misura: vedi
	   `.tmp-header__inner::before`. */
	padding-top: var(--tmp-header-gap);
	/* Fondo e filetto stanno tutti sullo pseudo-elemento della barra: averli
	   anche qui voleva dire due superfici sfocate che si scambiano il posto,
	   una che sfuma in 350ms e l'altra che compariva di colpo. */
	background: transparent;
}

/* Il browser non deve nascondere il target di un'ancora dietro l'header sticky. */
html {
	scroll-padding-top: calc(var(--tmp-header-h) + 12px);
}

/* Scroll morbido verso le ancore (#catalogo, #prodotti…). Escluso per chi ha
   attivo "riduci animazioni". */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* L'altezza della admin bar di WordPress, da scalare a tutto ciò che sta
   agganciato in cima. Una variabile invece di una regola per stato: gli stati
   dell'header sono due e le soglie della admin bar tre. */
:root {
	--tmp-admin-bar: 0px;
}

body.admin-bar {
	--tmp-admin-bar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--tmp-admin-bar: 46px;
	}
}

/* Su mobile la admin bar di WP è position:fixed e coprirebbe l'header. */
@media (max-width: 600px) {
	body.admin-bar {
		--tmp-admin-bar: 0px;
	}
}

/* La barra è larga quanto la pagina e non porta più alcuna veste: fondo,
   raggio, ombra e sfocatura stanno tutti sullo pseudo-elemento qui sotto.
   Quello che resta qui è solo il padding, che porta il contenuto sul gutter
   e non cambia mai. */
.tmp-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* L'elemento porta anche `.tmp-wrap` (per il markup condiviso con il
	   footer): la larghezza qui è quella piena, quindi il max-width da 1400px
	   di quella classe va spento esplicitamente. */
	max-width: none;
	/* Geometria fissa, uguale nei due stati. Prima `margin` e `padding` si
	   animavano in senso opposto per tenere fermo il contenuto: il contenuto
	   in effetti non si spostava di un pixel, ma il browser rifaceva comunque
	   il layout del flex — logo, menu e bottone — a ogni frame, per un
	   risultato visivo nullo. Ora a cambiare forma è solo lo sfondo, che sta
	   in `::before` e non tocca il contenuto. */
	margin: 0;
	padding: var(--tmp-header-pad-y) var(--tmp-gutter-end) var(--tmp-header-pad-y) var(--tmp-gutter);
}

/* La pillola.

   È uno pseudo-elemento in posizione assoluta e non lo sfondo della barra
   perché così l'unica cosa che si anima è un riquadro per conto suo: `inset`
   su un elemento assoluto non rilega né i fratelli né il contenuto della
   barra, mentre `margin`/`padding` sulla barra rilegavano tutto.

   `z-index: -1` lo manda dietro al contenuto ma non più in là: l'header è il
   contesto di impilamento più vicino (è posizionato e ha uno z-index), quindi
   lo pseudo non può sfuggirgli sotto.

   Il filetto è in ombra e non in `border` perché un bordo da 1px starebbe
   *dentro* al riquadro e sposterebbe il fondo di un pixel rispetto al gutter
   delle pagine, che quel pixel non ce l'ha. */
.tmp-header__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 var(--tmp-shell-inset);
	border-radius: 16px;
	background: rgba(243, 246, 248, .86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: var(--tmp-ombra), inset 0 0 0 1px var(--tmp-linea);
	/* Solo tre proprietà, ed è tutto ciò che cambia davvero fra i due stati:
	   fondo e sfocatura sono gli stessi, prima passavano dalla barra
	   all'header e sembravano animarsi solo perché erano due elementi
	   diversi. */
	transition: inset .35s, border-radius .35s, box-shadow .35s;
}

/* Agganciata: la pillola si apre a tutta larghezza e risale a coprire lo
   stacco che l'header tiene in cima, così il fondo arriva al bordo della
   finestra senza che l'header cambi altezza di un pixel. */
.tmp-header.is-expanded .tmp-header__inner::before,
.tmp-header:has(.tmp-mobile[data-open="true"]) .tmp-header__inner::before,
.tax-product_cat .tmp-header__inner::before {
	inset: calc(-1 * var(--tmp-header-gap)) 0 0 0;
	border-radius: 0;
	box-shadow: 0 1px 0 var(--tmp-linea);
}

/* Nessuna regola per il mobile: sotto i 560px cambiano le variabili
   `--tmp-shell-inset` / `--tmp-header-pad-*` in cima al foglio, e la pillola
   (con il gutter delle pagine) si stringe di conseguenza. */

@media (prefers-reduced-motion: reduce) {
	.tmp-header__inner::before {
		transition: none;
	}
}

/* Brand */
.tmp-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--tmp-inchiostro);
}

.tmp-brand__mark {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--tmp-primary);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	box-shadow: 0 6px 16px -6px rgba(1, 146, 213, .55);
}

.tmp-brand__mark svg {
	width: 22px;
	height: 22px;
}

.tmp-brand__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: inherit;
}

.tmp-brand__name {
	font-family: var(--tmp-font-display);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -.03em;
	line-height: 1;
	display: block;
	text-transform: uppercase;
}

.tmp-brand__tagline {
	display: block;
	font-family: var(--tmp-font-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	color: var(--tmp-grigio);
	margin-top: 3px;
	text-transform: uppercase;
}

/* Navigazione desktop */
.tmp-nav ul {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tmp-nav li {
	margin: 0;
}

.tmp-nav a {
	display: block;
	padding: 9px 14px;
	white-space: nowrap;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--tmp-inchiostro);
	text-decoration: none;
	transition: background-color .18s, color .18s;
}

.tmp-nav a:hover,
.tmp-nav a:focus {
	background: var(--tmp-soft);
	color: var(--tmp-primary-deep);
	border-radius: 12px;
}

.tmp-nav .current-menu-item > a,
.tmp-nav .current-menu-ancestor > a,
.tmp-nav .current_page_item > a {
	color: var(--tmp-primary-deep);
	font-weight: 600;
}

/* Sottomenu: il mockup non li prevede, ma un menu WP può averli. */
.tmp-nav ul ul {
	display: none;
	position: absolute;
	flex-direction: column;
	align-items: stretch;
	min-width: 220px;
	padding: 8px;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--tmp-linea);
	border-radius: 14px;
	box-shadow: var(--tmp-ombra);
}

.tmp-nav li {
	position: relative;
}

.tmp-nav li:hover > ul,
.tmp-nav li:focus-within > ul {
	display: flex;
}

.tmp-nav ul ul a {
	border-radius: 9px;
	white-space: nowrap;
}

/* Azioni a destra dell'header: lingua, CTA, burger. */
.tmp-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* ==================================================================
   Selettore di lingua a tendina
   ================================================================== */
.tmp-langdrop {
	position: relative;
}

.tmp-langdrop__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var(--tmp-linea-forte);
	border-radius: 12px;
	font-family: var(--tmp-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--tmp-primary-deep);
	cursor: pointer;
	transition: background-color .18s, border-color .18s;
}

.tmp-langdrop__toggle:hover,
.tmp-langdrop__toggle:focus,
.tmp-langdrop__toggle:active {
	background: var(--tmp-soft);
	border-color: var(--tmp-primary);
	color: var(--tmp-inchiostro);
}

.tmp-langdrop__chevron {
	width: 14px;
	height: 14px;
	transition: transform .2s;
}

.tmp-langdrop__toggle[aria-expanded="true"] .tmp-langdrop__chevron {
	transform: rotate(180deg);
}

/* Bandiera: PNG 16×11 servito da Polylang. Il contorno la stacca dai fondi
   chiari, altrimenti le bandiere con il bianco al bordo sembrano ritagliate. */
.tmp-flag {
	display: block;
	width: 16px;
	height: 11px;
	border-radius: 2px;
	flex-shrink: 0;
	box-shadow: 0 0 0 1px rgba(4, 41, 58, .12);
}

.tmp-langdrop__list {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 10;
	min-width: 180px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--tmp-linea);
	border-radius: 14px;
	box-shadow: var(--tmp-ombra);
}

.tmp-langdrop__list[data-open="true"] {
	display: block;
}

.tmp-langdrop__list li {
	margin: 0;
}

.tmp-langdrop__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tmp-inchiostro);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s, color .16s;
}

.tmp-langdrop__list a:hover,
.tmp-langdrop__list a:focus {
	background: var(--tmp-soft);
	color: var(--tmp-primary-deep);
}

.tmp-langdrop__list a[aria-current="true"] {
	color: var(--tmp-primary-deep);
	font-weight: 600;
}

/* Burger: nascosto su desktop, mostrato sotto il breakpoint. */
.tmp-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--tmp-linea-forte);
	border-radius: 12px;
	color: var(--tmp-primary-deep);
	cursor: pointer;
	transition: background-color .18s, border-color .18s;
}

.tmp-burger:hover {
	background: var(--tmp-soft);
	border-color: var(--tmp-primary);
}

.tmp-burger__bars,
.tmp-burger__bars::before,
.tmp-burger__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .22s, opacity .18s;
}

.tmp-burger__bars {
	position: relative;
}

.tmp-burger__bars::before,
.tmp-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.tmp-burger__bars::before {
	top: -6px;
}

.tmp-burger__bars::after {
	top: 6px;
}

.tmp-burger[aria-expanded="true"] .tmp-burger__bars {
	background: transparent;
}

.tmp-burger[aria-expanded="true"] .tmp-burger__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.tmp-burger[aria-expanded="true"] .tmp-burger__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==================================================================
   Pannello mobile
   ================================================================== */
.tmp-mobile {
	display: none;
	border-top: 1px solid var(--tmp-linea);
	background: var(--tmp-nebbia);
}

.tmp-mobile[data-open="true"] {
	display: block;
}

/* Il pannello si apre attaccato sotto la barra, che in quel momento è sempre
   nello stato espanso: le voci vanno incolonnate con il logo che hanno sopra,
   non centrate sul .tmp-wrap da 1400px. */
.tmp-mobile .tmp-wrap {
	max-width: none;
	margin: 0;
	padding: 16px var(--tmp-gutter-end) 24px var(--tmp-gutter);
}

.tmp-mobile ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.tmp-mobile li {
	margin: 0;
}

.tmp-mobile a {
	display: block;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	color: var(--tmp-inchiostro);
	text-decoration: none;
}

.tmp-mobile a:hover,
.tmp-mobile a:focus {
	background: var(--tmp-soft);
	color: var(--tmp-primary-deep);
}

.tmp-mobile ul ul a {
	padding-left: 30px;
	font-size: 14.5px;
	color: var(--tmp-grigio);
}

.tmp-mobile .tmp-btn {
	width: 100%;
	justify-content: center;
}

/* ==================================================================
   Footer
   ================================================================== */
.tmp-footer {
	background: var(--tmp-scuro);
	color: rgba(255, 255, 255, .66);
	padding: 64px 0 28px;
	font-family: var(--tmp-font-body);
	font-size: 14px;
}

.tmp-footer a {
	color: inherit;
	text-decoration: none;
}

.tmp-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.tmp-footer .tmp-brand {
	color: #fff;
}

.tmp-footer .tmp-brand__name {
	color: #fff;
}

.tmp-footer .tmp-brand__tagline {
	color: rgba(255, 255, 255, .5);
}

.tmp-footer__about {
	margin-top: 18px;
	max-width: 34ch;
	line-height: 1.6;
}

.tmp-footer__contact {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 2;
	color: rgba(255, 255, 255, .72);
	font-style: normal;
}

.tmp-footer__contact a:hover,
.tmp-footer__contact a:focus {
	color: var(--tmp-accent);
}

.tmp-footer__col h2 {
	color: #fff;
	font-size: 13px;
	font-family: var(--tmp-font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 16px;
	font-weight: 600;
}

.tmp-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tmp-footer__col a {
	display: block;
	padding: 5px 0;
	transition: color .18s;
}

.tmp-footer__col a:hover,
.tmp-footer__col a:focus {
	color: var(--tmp-accent);
}

.tmp-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .45);
}

.tmp-footer__bottom p {
	margin: 0;
}

.tmp-footer__bottom .tmp-langs a {
	color: rgba(255, 255, 255, .5);
}

.tmp-header__cta {
	text-decoration: none;
}

/* ==================================================================
   Responsive
   ================================================================== */
@media (max-width: 920px) {
	.tmp-nav,
	.tmp-header__cta {
		display: none;
	}

	.tmp-burger {
		display: inline-flex;
	}

	.tmp-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.tmp-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmp-btn,
	.tmp-nav a,
	.tmp-langdrop__toggle,
	.tmp-langdrop__chevron,
	.tmp-langdrop__list a,
	.tmp-burger__bars,
	.tmp-burger__bars::before,
	.tmp-burger__bars::after {
		transition: none;
	}
}

/* L'outline di default sparisce sotto la sticky bar: lo rendiamo esplicito. */
.tmp-header :focus-visible,
.tmp-footer :focus-visible,
.tmp-mobile :focus-visible {
	outline: 2.5px solid var(--tmp-primary);
	outline-offset: 2px;
	border-radius: 6px;
}

.tmp-footer :focus-visible {
	outline-color: var(--tmp-accent);
}

/* Solo per screen reader (stessa tecnica di GeneratePress). */
.tmp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ==================================================================
   Elenco categorie WooCommerce — shortcode [product_categories]
   ------------------------------------------------------------------
   Si aggancia al markup nativo dello shortcode:

       <div class="woocommerce columns-N">
         <ul class="products columns-N">
           <li class="product-category product">…</li>

   Nessun wrapper da aggiungere a mano: `:has(li.product-category)`
   intercetta solo le liste di CATEGORIE, così i loop di prodotti
   (ul.products con li.product) restano col layout WooCommerce.

   Non è una griglia di card ma un elenco: due colonne di righe divise da
   filetti, ogni riga con miniatura 48px, nome, descrizione e freccia. Con
   una dozzina di categorie si legge in verticale come un indice, e il
   fondo azzurro dell'hover è una fascia arrotondata che sborda un po' ai
   lati della riga.
   ================================================================== */

.woocommerce ul.products:has(li.product-category) {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce classico chiude la lista con un clearfix a `::before/::after`
   che nella grid diventerebbe una cella fantasma. */
.woocommerce ul.products:has(li.product-category)::before,
.woocommerce ul.products:has(li.product-category)::after {
	content: none;
}

/* Reset di width/float/margin: solo dentro la grid, così se un browser non
   supporta `:has()` non spacca il layout a float di WooCommerce. */
.woocommerce ul.products:has(li.product-category) > li.product-category {
	width: auto;
	margin: 0;
	float: none;
}

/* La riga. I filetti: uno sotto a ognuna, più quello sopra alla prima di ogni
   colonna, così l'elenco è chiuso in cima e in fondo. */
.woocommerce li.product-category {
	position: relative;
	isolation: isolate;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--tmp-linea);
	border-radius: 0;
	text-align: left;
}

.woocommerce li.product-category:first-child {
	border-top: 1px solid var(--tmp-linea);
}

/* Fascia dell'hover: sborda di 16px ai lati della riga, in dissolvenza. Copre
   tutta la voce, quindi cresce insieme al pannello che si apre. */
.woocommerce li.product-category::before {
	content: "";
	position: absolute;
	inset: 0 -16px;
	z-index: -1;
	border-radius: 14px;
	background: linear-gradient(100deg, var(--tmp-soft), rgba(228, 242, 250, .4));
	opacity: 0;
	transition: opacity .22s;
}

.woocommerce li.product-category:hover::before,
.woocommerce li.product-category:focus-within::before {
	opacity: 1;
}

/* Il link occupa la riga: miniatura | titolo | freccia (in assoluto a destra,
   il padding le lascia lo spazio). */
.woocommerce li.product-category > a {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	padding: 18px 44px 18px 0;
	color: var(--tmp-inchiostro);
	text-decoration: none;
}

/* Stato temporaneo impostato da navigation.js: la riga conserva il suo
   aspetto, ma non mostra più la freccia che suggerirebbe una navigazione. */
.woocommerce li.product-category > a[aria-disabled="true"] {
	padding-right: 0;
	cursor: default;
}

.woocommerce li.product-category > a[aria-disabled="true"]::after {
	display: none;
}

/* Miniatura piccola: 48px, contenuta (non ritagliata) su un fondo tenue, così
   anche le immagini con sfondo bianco restano leggibili. */
.woocommerce li.product-category .tmp-cat-thumb {
	grid-column: 1;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	object-fit: contain;
	background: var(--tmp-nebbia);
	border: 1px solid var(--tmp-linea);
	padding: 4px;
	transition: border-color .22s, transform .22s;
}

.woocommerce li.product-category:hover .tmp-cat-thumb {
	border-color: rgba(1, 146, 213, .45);
	transform: scale(1.04);
}

/* Segnaposto per le categorie senza immagine: stessa sagoma, vuota. */
.woocommerce li.product-category .tmp-cat-thumb--empty {
	display: block;
	background: var(--tmp-nebbia);
}

/* Titolo. */
.woocommerce li.product-category .woocommerce-loop-category__title {
	grid-column: 2;
	margin: 0;
	padding: 0;
	font-family: var(--tmp-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--tmp-inchiostro);
	transition: color .22s;
}

.woocommerce li.product-category:hover .woocommerce-loop-category__title {
	color: var(--tmp-primary-deep);
}

/* Il conteggio "(N)" non serve nell'elenco. */
.woocommerce li.product-category .woocommerce-loop-category__title .count {
	display: none;
}

/* ------------------------------------------------------------------
   Il pannello che si apre in hover, a fisarmonica
   ------------------------------------------------------------------
   Descrizione della categoria e due prodotti (inc/category-preview.php).
   Sta nel flusso dentro al <li>: aprendosi spinge in giù le righe che
   seguono, invece di scendere sopra di loro. Essendo dentro al <li>,
   passandoci sopra il :hover della riga resta valido.

   L'altezza si anima con il passaggio `grid-template-rows: 0fr → 1fr`,
   l'unico modo di andare "verso l'altezza del contenuto" con una
   transizione CSS: `height: auto` non è interpolabile. Il contenitore
   interno porta `min-height: 0` e `overflow: hidden`, senza i quali il
   contenuto sborderebbe invece di essere tagliato; per lo stesso motivo lo
   spazio interno lo danno i figli, non lui — il suo padding resterebbe
   visibile anche da chiuso. Dove il passaggio non è animabile (browser
   vecchi) il pannello si apre di scatto, che va benissimo.

   Si apre anche con `:focus-within`, cioè arrivandoci in tab: senza,
   i due link dei prodotti sarebbero raggiungibili ma invisibili.
   ------------------------------------------------------------------ */
.tmp-cat-more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s cubic-bezier(.22, .61, .36, 1);
}

.woocommerce li.product-category:hover > .tmp-cat-more,
.woocommerce li.product-category:focus-within > .tmp-cat-more {
	grid-template-rows: 1fr;
}

.tmp-cat-more__inner {
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity .24s;
}

.woocommerce li.product-category:hover .tmp-cat-more__inner,
.woocommerce li.product-category:focus-within .tmp-cat-more__inner {
	opacity: 1;
}

/* Lo spazio sotto lo dà il margine dell'ultimo figlio: un padding sul
   contenitore che si chiude resterebbe lì a fare una riga vuota. */
.tmp-cat-more__inner > :last-child {
	margin-bottom: 18px;
}

.tmp-cat-more .tmp-cat-desc {
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tmp-grigio);
}

/* Freccia: `mask` così si ricolora con i token (grigio a riposo, primario in
   hover). */
.woocommerce li.product-category > a::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background-color: var(--tmp-linea-forte);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color .22s, transform .22s;
}

.woocommerce li.product-category:hover > a::after {
	background-color: var(--tmp-primary);
	transform: translateX(3px);
}

/* La riga è tutta cliccabile: il focus da tastiera si vede sulla fascia, non
   solo sul testo del link. */
.woocommerce li.product-category > a:focus-visible {
	outline: none;
}

.woocommerce li.product-category:has(> a:focus-visible)::before {
	opacity: 1;
	outline: 2px solid var(--tmp-primary);
	outline-offset: 0;
}

/* Su touch il puntatore non c'è: il pannello non si aprirebbe mai e la
   descrizione sarebbe irraggiungibile. Sotto gli 820px resta quindi sempre
   aperto. */
@media (max-width: 820px) {
	.tmp-cat-more {
		grid-template-rows: 1fr;
	}

	.tmp-cat-more__inner {
		opacity: 1;
	}

	.tmp-cat-more__inner > :last-child {
		margin-bottom: 14px;
	}

	.woocommerce li.product-category > a {
		padding-bottom: 10px;
	}
}

@media (max-width: 480px) {
	.woocommerce li.product-category > a {
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 12px;
		padding-right: 32px;
	}

	.woocommerce li.product-category .tmp-cat-thumb {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.tmp-cat-more .tmp-cat-desc {
		padding-left: 52px;
		padding-right: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce li.product-category::before,
	.woocommerce li.product-category .tmp-cat-thumb,
	.woocommerce li.product-category .woocommerce-loop-category__title,
	.woocommerce li.product-category > a::after,
	.tmp-cat-more,
	.tmp-cat-more__inner {
		transition: none;
	}
}

/* ==================================================================
   Archivio categoria — cornice a tutta larghezza
   ------------------------------------------------------------------
   Impaginazione di taxonomy-product_cat.php. `.tmp-catpage` è la cornice
   a tutta larghezza: il container da 1200px di GeneratePress è sganciato
   dal template con la classe body `full-width-content`, e qui non c'è
   nessun `max-width` a rimetterlo. `.tmp-catpage__inner` porta solo il
   margine laterale del sito, così il contenuto non tocca i bordi.

   Le fasce che devono arrivare davvero a filo bordo (testata di
   categoria, CTA a fondo colorato) vanno messe come figlie dirette di
   `.tmp-catpage`, fuori da `__inner`: niente `calc(50% - 50vw)` come
   nelle sezioni della home.
   ================================================================== */
.tmp-catpage {
	/* In GeneratePress `#content` è display:flex: senza flex-grow la
	   cornice si stringerebbe sul contenuto invece di occupare la riga.
	   min-width: 0 evita che la griglia prodotti la faccia sbordare. */
	flex: 1 1 auto;
	min-width: 0;
}

.tmp-catpage__inner {
	/*padding: 0 24px;*/
}

/* ==================================================================
   Archivio categoria prodotto — griglia card
   ------------------------------------------------------------------
   Le card sono le stesse di [tmp_products] (.tmp-prod): le renderizza il
   plugin nell'override woocommerce/content-product.php. Qui trasformiamo la
   ul.products di WooCommerce in una grid coerente, azzerando float, larghezze
   percentuali e il clearfix del layout di default. Scoped all'archivio
   product_cat per non toccare le griglie di tile categoria.
   ================================================================== */
/* Colonne automatiche invece di 4 fisse: la colonna dei prodotti cambia
   larghezza con la sidebar (affiancata, a dashboard, sopra) e con 4 fisse
   le card, che hanno un minimo (il pulsante non va a capo), sbordavano.
   Con 220px di minimo: 4 colonne sui 1440px, 2-3 in mezzo, 1 sul telefono.
   Il `max()` le ferma a 4 anche sugli schermi grandi (un quarto della riga
   meno i gap): a 1920px sarebbero diventate 6 card strette. */
.tax-product_cat ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(220px, (100% - 3 * 24px) / 4), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Neutralizza il clearfix ::before/::after: nel grid diventerebbe 2 celle vuote. */
.tax-product_cat ul.products::before,
.tax-product_cat ul.products::after {
	content: none;
}

.tax-product_cat ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	display: flex;
}

.tax-product_cat ul.products li.product::before {
	content: none;
}

/* La card riempie l'altezza della cella → card di pari altezza per riga. */
.tax-product_cat ul.products li.product > .tmp-prod,
.tax-product_cat ul.products li.product > .tmp-related__card {
	width: 100%;
}

/* Le card dei correlati (content-product.php) dentro il loop di WooCommerce:
   `li.product a img` e `li.product h3` di woocommerce.css sono più specifiche
   delle regole della card e riporterebbero la foto alla sua altezza naturale
   (con margine sotto) e il nome a 1em. Qui si rimettono i valori della card. */
.tax-product_cat ul.products li.product .tmp-related__img {
	height: 100%;
	margin: 0;
}

.tax-product_cat ul.products li.product .tmp-related__name {
	padding: 0;
	font-size: clamp(18px, 1.5vw, 22px);
}

/* Sotto i 768px WooCommerce (woocommerce-smallscreen.css) dà alle celle
   `width: 48%; float: left` con `.woocommerce ul.products[class*="columns-"]
   li.product`, che è più specifica della regola qui sopra: le card restavano
   a metà larghezza, incolonnate a sinistra con il vuoto di fianco. Il body
   porta sia `tax-product_cat` sia `woocommerce`, e le due classi insieme
   bastano a vincere. */
.tax-product_cat.woocommerce ul.products[class*="columns-"] li.product,
.tax-product_cat.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}


/* ==================================================================
   Archivio categoria — sidebar categorie a sinistra + main
   ------------------------------------------------------------------
   taxonomy-product_cat.php apre .tmp-archive (sidebar + main) prima del titolo
   dell'archivio: la sidebar parte dall'alto e occupa la colonna sinistra per
   tutta la pagina, a destra vanno titolo, toolbar e griglia prodotti. La
   sidebar elenca le macro-categorie; quelle con figlie sono <details>
   (accordion nativo, niente JS), con il ramo della categoria corrente aperto
   lato server.
   ================================================================== */

.woocommerce-archive-wrapper .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	margin: 60px 0 20px 0;
	font-family: var(--tmp-font-display);
	font-size: 14px;
	background: var(--tmp-nebbia);
	padding: 12px;
	width: max-content;
	border-radius: 12px;
	display: none;
}

.woocommerce-archive-wrapper .woocommerce-breadcrumb a {
	text-decoration: none;
}

.woocommerce-archive-wrapper {
	padding: 0;
}
 
.woocommerce-products-header {
	padding: 60px 0 0 0;
}

.woocommerce-products-header__title.page-title {
	font-family: var(--tmp-font-display);
	font-weight: 700;
	margin: 60px 0;
	padding: 0 0 15px 0;
	border-bottom: 3px solid var(--tmp-primary);
	width: max-content;
}

/* Nell'archivio di categoria il titolo è la prima cella della colonna di
   destra: lo stacco dall'header lo dà .tmp-archive (margin-top), altrimenti i
   60px del titolo lo farebbero partire più in basso della sidebar. */
.tax-product_cat .woocommerce-products-header__title.page-title {
	margin: 0 0 32px;
	/* Il `width: max-content` qui sopra, in una colonna più stretta della
	   pagina, farebbe sbordare i nomi di categoria lunghi. */
	max-width: 100%;
}

/* Grid e non flex: la sidebar deve occupare la colonna sinistra su entrambe le
   righe (titolo + prodotti), cosa che con un flex a due colonne non si può
   fare tenendo il titolo dentro la colonna di destra. `minmax(0, 1fr)` invece
   di `1fr` perché la griglia prodotti altrimenti allarga la colonna.

   La colonna sinistra è scritta come `--tmp-gutter + 330px` invece che come
   370px fissi: i 330px sono l'elenco (305px) più il suo padding destro
   (25px), e il gutter è il margine da cui comincia il contenuto — lo stesso
   da cui parte il logo nell'header. Con il gutter a 40px, che è quello che
   questa pagina imposta in cima al foglio, il conto torna esattamente a
   370px; se un domani il margine di pagina cambia, sidebar e header si
   spostano insieme e l'elenco tiene comunque i suoi 305px. */
.tax-product_cat .tmp-archive {
	display: grid;
	grid-template-columns: calc(var(--tmp-gutter) + 330px) minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
	/*margin-top: 60px;*/
}

.tax-product_cat .tmp-catnav {
	grid-column: 1;
	grid-row: 1;
	background: var(--tmp-nebbia);
	padding: 25px 25px 25px var(--tmp-gutter);
}

.tax-product_cat .tmp-archive__main {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	padding: 0 var(--tmp-gutter) 60px 0;
}

/* La sidebar segue lo scroll finché la sua colonna è in vista: `align-items:
   start` sul contenitore le lascia l'altezza del contenuto, condizione perché
   lo sticky abbia effetto. */
.tmp-catnav {
	position: sticky;
	/* Incollata all'header, senza stacco. La fascia e il fondo dell'header
	   atterrato sono lo stesso colore (`--tmp-nebbia` contro
	   `rgba(243, 246, 248, .86)`): a contatto le due superfici si saldano e il
	   confine sparisce, mentre bastano pochi pixel di stacco perché in mezzo
	   compaia una striscia bianca. Sticky si aggancia appena la posizione
	   naturale supera `top`, quindi lo stacco si vedeva già a pagina ferma,
	   non solo scorrendo.

	   La admin bar entra nel conto perché l'header ci si appoggia sotto
	   (`top: var(--tmp-admin-bar)`): senza, da loggati la sidebar si sarebbe
	   agganciata troppo in alto e sarebbe passata sotto alla barra.

	   Il pixel in meno è per la stessa ragione per cui il JS arrotonda
	   `--tmp-header-h` per eccesso: la barra è alta un numero frazionario, e
	   fra la misura arrotondata e l'altezza vera resterebbe mezzo pixel di
	   bianco. Meglio far salire la fascia di un pixel sotto all'header — che
	   sta comunque sopra, avendo z-index — che rischiare la riga chiara.

	   `--tmp-header-h` è la sola barra: il JS misura `.tmp-header__inner`. Lo
	   stacco in cima va quindi sommato a parte, anche se su questa pagina è
	   zero, se no la formula smetterebbe di valere appena qualcuno lo cambia. */
	top: calc(var(--tmp-admin-bar) + var(--tmp-header-gap) + var(--tmp-header-h) - 1px);
}

.tmp-catnav__title {
	font-family: var(--tmp-font-mono);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tmp-grigio);
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--tmp-linea);
}

.tmp-catnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tmp-catnav__item {
	margin: 0;
}

/* Riga macro-categoria: link diretto o <summary> del <details>. */
.tmp-catnav__summary,
.tmp-catnav__link--top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tmp-inchiostro);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

/* Via il triangolino nativo del <summary> (WebKit + Firefox). */
.tmp-catnav__summary::-webkit-details-marker {
	display: none;
}

.tmp-catnav__summary:hover,
.tmp-catnav__link--top:hover {
	background: var(--tmp-soft);
	color: var(--tmp-primary-deep);
}

.tmp-catnav__name {
	flex: 1;
}

/* Thumbnail della categoria (o segnaposto) prima del nome. */
.tmp-catnav__thumb {
	width: 45px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 8px;
	object-fit: cover;
	background: var(--tmp-soft);
	border: 1px solid var(--tmp-linea);
}

.tmp-catnav__thumb--empty {
	display: inline-block;
}

.tmp-catnav__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--tmp-grigio);
	transition: transform .2s;
}

.tmp-catnav__group[open] .tmp-catnav__chevron {
	transform: rotate(180deg);
}

/* Elenco sottocategorie. */
.tmp-catnav__sub {
	list-style: none;
	margin: 2px 0 6px;
	padding: 0 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	border-left: 1px solid var(--tmp-linea);
}

.tmp-catnav__sub .tmp-catnav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--tmp-grigio);
	text-decoration: none;
}

.tmp-catnav__sub .tmp-catnav__link:hover {
	background: var(--tmp-soft);
	color: var(--tmp-primary-deep);
}

.tmp-catnav__link--all {
	font-weight: 600;
	color: var(--tmp-primary-deep);
}

/* Stato attivo (categoria corrente). */
.tmp-catnav__link.is-active,
.tmp-catnav__summary.is-active {
	background: var(--tmp-soft);
	color: var(--tmp-primary-deep);
}

.tmp-catnav__link:focus-visible,
.tmp-catnav__summary:focus-visible {
	outline: 2px solid var(--tmp-primary);
	outline-offset: -2px;
}

/* Sotto i 900px una sola colonna: l'ordine è quello del DOM, cioè titolo,
   elenco categorie, prodotti. */
@media (max-width: 900px) {
	.tax-product_cat .tmp-archive {
		grid-template-columns: minmax(0, 1fr);
	}

	.tax-product_cat .tmp-catnav,
	.tax-product_cat .tmp-archive__main {
		grid-column: 1;
		grid-row: auto;
	}

	/* In colonna unica il gutter serve da tutti e due i lati: prima titolo e
	   prodotti prendevano solo il padding destro e partivano a filo bordo. */
	.tax-product_cat .tmp-archive__main {
		padding-left: var(--tmp-gutter);
	}

	.tax-product_cat .tmp-catnav {
		padding-right: var(--tmp-gutter);
	}

	.tmp-catnav {
		width: 100%;
		position: static;
		margin-bottom: 32px;
	}
}

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

/* ==================================================================
   Archivio categoria — layout a dashboard (schermo largo)
   ------------------------------------------------------------------
   La sidebar diventa la colonna di navigazione della pagina: parte dal
   bordo alto della finestra, è alta quanto lo schermo e resta ferma mentre
   si scorre, col titolo "Categorie" su una riga alta quanto l'header.
   L'header si ritira sopra la sola colonna dei contenuti: bianco come la
   pagina, logo e voci a sinistra, azioni a destra.

   Solo da 1360px: logo, voci, lingua e pulsante chiedono circa 1030px
   accanto ai 300px della sidebar (misurati: 1345px di finestra con la
   scrollbar). La soglia tiene dentro i portatili da 1366px; sotto resta il
   layout normale, con l'header a tutta larghezza.

   Meccanica. L'header resta nel flusso, spostato a destra della larghezza
   della sidebar; `.tmp-archive` risale della sua altezza con un margine
   negativo, così la sidebar arriva in cima alla finestra accanto all'header,
   e la colonna dei contenuti riprende quell'altezza col padding. Il fondo
   grigio della colonna è anche su `.tmp-archive`: quando la sidebar arriva
   in fondo alla sua cella e smette di seguire lo scroll, la fascia non si
   interrompe.
   ================================================================== */
@media (min-width: 1360px) {
	body.tax-product_cat {
		--tmp-side-w: 300px;
	}

	/* --- Header sopra la sola colonna dei contenuti --- */
	.tax-product_cat .tmp-header {
		margin-left: var(--tmp-side-w);
	}

	/* Logo sul margine sinistro dei contenuti (stesso gutter di titolo e
	   griglia), voci subito dopo, azioni in fondo a destra. */
	.tax-product_cat .tmp-header__inner {
		justify-content: flex-start;
		gap: 20px;
	}

	/* Voci un filo più strette che altrove: è quello che fa stare la barra
	   intera a 1360px. */
	.tax-product_cat .tmp-nav a {
		padding-inline: 10px;
	}

	.tax-product_cat .tmp-header__actions {
		margin-left: auto;
	}

	/* Bianco come la pagina, solo il filetto sotto. */
	.tax-product_cat .tmp-header__inner::before {
		background: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* --- Colonne --- */
	.tax-product_cat .tmp-archive {
		grid-template-columns: var(--tmp-side-w) minmax(0, 1fr);
		column-gap: 0;
		margin-top: calc(-1 * (var(--tmp-header-h) + var(--tmp-header-gap)));
		background: linear-gradient(to right, var(--tmp-nebbia) var(--tmp-side-w), transparent var(--tmp-side-w));
	}

	.tax-product_cat .tmp-archive__main {
		padding: calc(var(--tmp-header-h) + var(--tmp-header-gap)) var(--tmp-gutter) 60px;
	}

	/* --- Sidebar a tutta altezza --- */
	.tax-product_cat .tmp-catnav {
		top: var(--tmp-admin-bar);
		height: calc(100vh - var(--tmp-admin-bar));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px 24px 24px;
		border-right: 1px solid var(--tmp-linea);
		/* Scorre ancora (rotella, trackpad, tastiera), ma senza la barra di
		   scorrimento a vista. */
		scrollbar-width: none;
	}

	.tax-product_cat .tmp-catnav::-webkit-scrollbar {
		display: none;
	}

	/* Il titolo occupa una riga alta quanto l'header, con lo stesso filetto
	   sotto (che qui va a tutta larghezza della colonna): le due barre si
	   leggono come una sola testata. Resta fermo in cima mentre l'elenco
	   scorre. */
	.tax-product_cat .tmp-catnav__title {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		height: calc(var(--tmp-header-h) + var(--tmp-header-gap));
		margin: 0 -20px 16px -24px;
		padding: 0 20px 0 24px;
		border-bottom: 0;
		background: var(--tmp-nebbia);
		box-shadow: 0 1px 0 var(--tmp-linea);
	}
}

/* ==================================================================
   Archivio categoria — toolbar: menu di ordinamento WooCommerce
   ------------------------------------------------------------------
   Avendo azzerato il clearfix di ul.products, neutralizziamo i float di
   default del conteggio e del form ordinamento (altrimenti sborderebbero
   sulla griglia) e diamo alla <select> l'aspetto del design system.
   ================================================================== */
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering {
	float: none;
	margin: 0 0 16px;
}

.tax-product_cat .woocommerce-result-count {
	color: var(--tmp-grigio);
	font-size: 14px;
}

.tax-product_cat .woocommerce-ordering {
	text-align: right;
}

.tax-product_cat .woocommerce-ordering .orderby {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	max-width: 100%;
	font-family: var(--tmp-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--tmp-inchiostro);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	border: 1px solid var(--tmp-linea-forte);
	border-radius: 10px;
	padding: 10px 40px 10px 14px;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

/* Via la freccia nativa su vecchio Edge/IE. */
.tax-product_cat .woocommerce-ordering .orderby::-ms-expand {
	display: none;
}

.tax-product_cat .woocommerce-ordering .orderby:hover {
	border-color: var(--tmp-primary);
}

.tax-product_cat .woocommerce-ordering .orderby:focus {
	outline: none;
	border-color: var(--tmp-primary);
	box-shadow: 0 0 0 3px rgba(1, 146, 213, .18);
}

/* ==================================================================
   Occhiello riutilizzabile (eyebrow)
   ------------------------------------------------------------------
   Etichetta mono in maiuscoletto con trattino, usata dalle testate di
   sezione (es. [tmp_products]) e dall'hero.
   ================================================================== */
.tmp-eyebrow {
	font-family: var(--tmp-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tmp-primary-deep);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px;
	border-radius: 6px;
	background: var(--tmp-nebbia);
  	border: 1px solid var(--tmp-linea);
}

.tmp-eyebrow::before {
	content: "";
	width: 22px;
	height: 1.5px;
	background: var(--tmp-primary);
	display: inline-block;
}

/* ==================================================================
   Scheda prodotto — woocommerce/content-single-product.php
   ------------------------------------------------------------------
   Testata col titolo a tutta larghezza, poi due colonne: galleria a
   sinistra (sticky, segue lo scroll della colonna lunga) e
   informazioni a destra. Sotto, sempre a tutta larghezza, l'area
   download, la descrizione estesa e i correlati — questi ultimi
   riusano le card .tmp-prod dell'override content-product.php.
   ================================================================== */
.tmp-single {
	padding: 40px 0 120px;
}

/* --- Testata --- */
.tmp-single__head {
	margin-bottom: 36px;
}

/* Il filetto sotto la testata sta dentro al padding del .tmp-wrap, così parte
   e finisce sull'asse del testo invece di correre fino ai bordi della pagina
   come faceva il `border-bottom` sul contenitore. */
   
/*.tmp-single__head::after {
	content: "";
	display: block;
	margin-top: 28px;
	border-bottom: 1px solid var(--tmp-linea);
}*/

.tmp-single__cat {
	text-decoration: none;
}

.tmp-single__cat:hover,
.tmp-single__cat:focus {
	color: var(--tmp-primary-mid);
}

/* Con l'immagine della categoria il trattino dell'eyebrow sparisce: l'icona
   fa già da segno d'apertura. */
.tmp-single__cat--icon::before {
	display: none;
}

.tmp-single__cat-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 6px;
	flex: none;
}

.tmp-single__title {
	font-family: var(--tmp-font-display);
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.03;
	color: var(--tmp-inchiostro);
	margin: 14px 0 0;
	max-width: 22ch;
}

.woocommerce .tmp-wrap.tmp-single__grid .summary.entry-summary.tmp-single__summary {
	width: 100% !important;
}

.tmp-wrap.tmp-single__head .tmp-single__title {
	max-width: unset;
}

.tmp-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* --- Colonna galleria --- */
.tmp-single__media {
	position: sticky;
	top: calc(var(--tmp-header-h) + 24px);
}

.tmp-single__media .woocommerce-product-gallery {
	float: none;
	width: 100% !important;
	margin: 0;
}

.tmp-single__media .woocommerce-product-gallery__wrapper {
	border: 1px solid var(--tmp-linea);
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(150deg, var(--tmp-soft), #fff);
}

.tmp-single__media .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Il pulsante lente di WooCommerce, ridisegnato come chip. */
.tmp-single__media .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	background: #fff;
	border: 1px solid var(--tmp-linea);
	border-radius: 999px;
	box-shadow: var(--tmp-ombra);
	color: var(--tmp-primary-deep);
	text-indent: 0;
	line-height: 34px;
	width: 34px;
	height: 34px;
	text-align: center;
	font-size: 15px;
}

/* Miniature: griglia fissa, senza le larghezze percentuali di WooCommerce. */
.tmp-single__media .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.tmp-single__media .flex-control-thumbs li {
	width: auto;
	margin: 0;
	float: none;
	list-style: none;
}

.tmp-single__media .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--tmp-linea);
	border-radius: 10px;
	opacity: .6;
	transition: opacity .2s, border-color .2s;
}

.tmp-single__media .flex-control-thumbs img:hover,
.tmp-single__media .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--tmp-primary);
}

/* --- Colonna informazioni --- */
.tmp-single__summary {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --- Specifiche --- */
/* Prima riga della colonna: nessun margine in cima, così la tabella parte
   allineata al bordo alto della galleria. */
.tmp-single__specs {
	margin: 0;
	padding: 0;
	/*border-top: 1px solid var(--tmp-linea);*/
}

/* I codici di registrazione stanno staccati dai dati commerciali: lo spazio
   lo dà il `gap` della colonna, la struttura della tabella resta la stessa.
   Il padding laterale li allinea alle righe del riquadro qui sopra. */
.tmp-single__specs--codes {
	padding: 0 24px;
}

/* I dati commerciali stanno in un riquadro: è la prima cosa che si legge
   dopo il testo di attacco. */
.tmp-single__specs--main {
	background: var(--tmp-nebbia);
	border: 1px solid var(--tmp-linea);
	padding: 8px 24px;
	border-radius: 18px;
}

/* Righe divise da un filetto, tranne l'ultima: nel riquadro il bordo chiude
   già la lista, e fuori dal riquadro un filetto in coda resterebbe a
   mezz'aria. */
.tmp-single__spec {
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: 16px;
	padding: 12px 0;
}

.tmp-single__spec:not(:last-child) {
	border-bottom: 1px solid var(--tmp-linea);
}

.tmp-single__spec dt {
	font-family: var(--tmp-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tmp-grigio);
	margin: 0;
	align-self: center;
}

.tmp-single__spec dd {
	font-size: 15px;
	font-weight: 600;
	color: var(--tmp-inchiostro);
	margin: 0;
}

/* Disponibilità: il pallino accompagna l'etichetta, non la sostituisce — il
   colore da solo non è un'informazione accessibile. */
.tmp-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tmp-stock__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentcolor;
	flex: 0 0 auto;
}

.tmp-stock--in {
	color: #1a7f4b;
}

.tmp-stock--order {
	color: var(--tmp-accent-mid);
}

.tmp-stock--out {
	color: var(--tmp-grigio);
}

/* --- Area download (markup del plugin: render_downloads) --- */
/* Solo i pulsanti, senza titolo né riquadro: il nome della sezione resta
   per gli screen reader come aria-label. */
.tmp-downloads {
	margin-top: 80px;
}

.tmp-downloads__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

/* Il singolo pulsante di download. */
.tmp-dl {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--tmp-linea);
	border-radius: 16px;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.tmp-dl:hover,
.tmp-dl:focus {
	transform: translateY(-3px);
	box-shadow: var(--tmp-ombra-lift);
	border-color: var(--tmp-primary);
}

.tmp-dl__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--tmp-soft);
	color: var(--tmp-primary-deep);
}

.tmp-dl__icon svg {
	width: 22px;
	height: 22px;
}

.tmp-dl__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.tmp-dl__label {
	font-family: var(--tmp-font-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tmp-inchiostro);
}

.tmp-dl__meta {
	font-family: var(--tmp-font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--tmp-grigio);
}

.tmp-dl__arrow {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--tmp-primary);
}

/* --- Pannelli a scomparsa (descrizione, contenuto kit, misure, ...) --- */
/* Fascia scura a tutta larghezza dietro i pannelli. Stessa tecnica di
   .tmp-company: i margini negativi in vw portano il fondo oltre il
   contenitore, mentre il .tmp-wrap interno tiene il testo in colonna. */
.tmp-panels-band {
	width: auto;
	margin: 80px calc(50% - 50vw + var(--tmp-scrollbar, 0px) / 2) 0;
	padding: 64px 0;
	/* Lo stesso fondo dell'hero di [tmp_hero]: il blu del brand in
	   diagonale, con la lavatura di luce dall'angolo in alto a destra. Se
	   cambia lì va cambiato anche qui. */
	background:
		radial-gradient(120% 90% at 88% -10%,rgba(255,255,255,.25),transparent 55%),linear-gradient(150deg,#01679c 0%,var(--tmp-primary) 55%,#4fc0f2 100%);
}

/* ---- I pannelli sul fondo blu ----
   Colori ribaltati: le linee e i testi del tema sono tarati sul bianco e
   sul blu sparirebbero. Tutto bianco, come nell'hero: l'azzurro chiaro che
   si usava sullo scuro qui non staccherebbe dal fondo. */
.tmp-panels-band .tmp-panel {
	border-bottom-color: rgba(255, 255, 255, .22);
}

.tmp-panels-band .tmp-panel__label {
	color: #fff;
}

.tmp-panels-band .tmp-panel__head:hover .tmp-panel__label,
.tmp-panels-band .tmp-panel[open] .tmp-panel__label {
	color: #fff;
}

.tmp-panels-band .tmp-panel__sign {
	color: #fff;
}

.tmp-panels-band .tmp-panel__head:focus-visible {
	outline-color: #fff;
}

/* Più coprente che sullo scuro: sul blu primario il 78% non reggeva. */
.tmp-panels-band .tmp-single__prose {
	color: rgba(255, 255, 255, .92);
}

.tmp-panels-band .tmp-single__prose h2,
.tmp-panels-band .tmp-single__prose h3,
.tmp-panels-band .tmp-single__prose h4,
.tmp-panels-band .tmp-single__prose strong {
	color: #fff;
}

/* I link restano bianchi e si distinguono per la sottolineatura. */
.tmp-panels-band .tmp-single__prose a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tmp-panel {
	border-bottom: 1px solid var(--tmp-linea);
}

.tmp-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 4px;
	cursor: pointer;
	list-style: none;
	transition: color .2s;
}

/* La freccia di default del browser: la sostituiamo col nostro segno +/−. */
.tmp-panel__head::-webkit-details-marker {
	display: none;
}

.tmp-panel__head:hover .tmp-panel__label,
.tmp-panel[open] .tmp-panel__label {
	color: white;
}

.tmp-panel__head:focus-visible {
	outline: 2px solid var(--tmp-primary);
	outline-offset: -2px;
	border-radius: 8px;
}

.tmp-panel__label {
	font-family: var(--tmp-font-display);
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tmp-inchiostro);
	transition: color .2s;
}

.tmp-panel__sign {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--tmp-primary);
	transition: transform .25s;
}

/* Aperto: il + ruota e la sua asta verticale sparisce, resta il −. */
.tmp-panel[open] .tmp-panel__sign {
	transform: rotate(180deg);
}

.tmp-panel__sign-v {
	transform-origin: center;
	transition: opacity .25s, transform .25s;
}

.tmp-panel[open] .tmp-panel__sign-v {
	opacity: 0;
	transform: scaleY(0);
}

.tmp-panel__body {
	padding: 0 4px 32px;
}

.tmp-panel__body > :first-child {
	margin-top: 0;
}

.tmp-panel__body > :last-child {
	margin-bottom: 0;
}

.tmp-single__prose {
	width: 100%;
	color: var(--tmp-grigio);
	font-size: 16.5px;
	line-height: 1.7;
}

.tmp-single__prose h2,
.tmp-single__prose h3,
.tmp-single__prose h4 {
	font-family: var(--tmp-font-display);
	color: var(--tmp-inchiostro);
}

.tmp-single__prose a {
	color: var(--tmp-primary-deep);
}

.tmp-single__prose img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.woocommerce div.product div.summary,
.woocommerce div.product div.images {
	margin-bottom: 0;
}

/* --- Correlati e upsell --- */
.tmp-single__after .related,
.tmp-single__after .upsells {
	margin-top: 80px;
}

/* Correlati: card quadrate sul modello di [tmp_products_gallery] (override
   single-product/related.php), con classi proprie perché stanno sul fondo
   chiaro della pagina e non sulla fascia blu della galleria: niente sfondo
   di sezione, testi scuri, link nel blu profondo. Il titolo è quello degli
   altri blocchi in coda alla scheda ("Richiedi un preventivo"). */
.tmp-related__title {
	font-family: var(--tmp-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tmp-inchiostro);
	margin: 0 0 24px;
}

.tmp-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Rete di sicurezza contro i clearfix di WooCommerce (`.products ul::before`
   e simili): in una griglia uno pseudo-elemento è una cella in più. */
.tmp-related__grid::before,
.tmp-related__grid::after {
	content: none;
}

.tmp-related__grid > li {
	min-width: 0;
	margin: 0;
}

/* La card vera e propria: riquadro bianco col filetto del tema e l'ombra
   delle card, con un respiro interno di 12px. Foto e pulsante stanno dentro,
   con i raggi ridotti di quel tanto (20 − 12 ≈ 12) perché gli angoli
   restino concentrici. */
.tmp-related__card {
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--tmp-linea);
	border-radius: 20px;
	box-shadow: var(--tmp-ombra);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.tmp-related__card:hover,
.tmp-related__card:focus-within {
	transform: translateY(-5px);
	border-color: rgba(1, 146, 213, .4);
	box-shadow: var(--tmp-ombra-lift);
}

/* Riquadro 4:3 con la foto a riempire (`cover`): il 4:3 è vicino al
   formato più comune delle foto prodotto (quasi tutte orizzontali), così il
   taglio resta minimo; le poche verticali perdono un po' sopra e sotto. Il
   fondo neutro si vede solo senza foto. Bordo e ombra li ha la card. */
.tmp-related__shot {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: var(--tmp-nebbia);
}

/* `.tmp-related` davanti all'img: `.woocommerce img { height: auto }` di
   WooCommerce è più specifica di una classe sola e lascerebbe la foto alla
   sua altezza naturale, allineata in alto e tagliata dal riquadro. */
.tmp-related .tmp-related__img,
.tmp-related__placeholder {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.tmp-related__img {
	object-fit: cover;
}

.tmp-related__placeholder {
	display: grid;
	place-items: center;
	color: var(--tmp-primary);
}

.tmp-related__placeholder svg {
	width: 38%;
	height: 38%;
}

.tmp-related__card:hover .tmp-related__img,
.tmp-related__card:focus-within .tmp-related__img {
	transform: scale(1.055) rotate(-.8deg);
}

.tmp-related__tag {
	position: absolute;
	z-index: 2;
	left: 14px;
	top: 14px;
	max-width: calc(100% - 28px);
	overflow: hidden;
	padding: 6px 9px;
	border: 1px solid rgba(5, 88, 127, .12);
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	color: var(--tmp-primary-deep);
	font-family: var(--tmp-font-mono);
	font-size: 9px;
	font-weight: 650;
	letter-spacing: .08em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tmp-related__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px 4px 0;
}

.tmp-related__name {
	margin: 0;
	font-family: var(--tmp-font-display);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.tmp-related__name a {
	color: var(--tmp-inchiostro);
	text-decoration: none;
}

.tmp-related__card:hover .tmp-related__name a,
.tmp-related__name a:hover,
.tmp-related__name a:focus {
	color: var(--tmp-primary-deep);
	text-decoration: none;
}

/* Il margine negativo annulla i 4px laterali di .tmp-related__body: il
   pulsante va a filo della foto, da bordo a bordo della card. */
.tmp-related__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: auto -4px 0;
	padding-top: 14px;
}

/* Pulsante pieno come .tmp-btn--primary ("Richiedi un preventivo"), in
   taglia ridotta per stare nella card, largo quanto la card e col testo al
   centro. Si scurisce anche al passaggio sulla card intera, non solo sul
   pulsante. */
.tmp-related__detail {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 16px;
	border-radius: 12px;
	background: var(--tmp-primary-mid);
	color: #fff;
	font-family: var(--tmp-font-body);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s, box-shadow .2s;
}

.tmp-related__detail svg {
	width: 16px;
	height: 16px;
	color: currentColor;
	transition: transform .2s ease;
}

.tmp-related__card:hover .tmp-related__detail,
.tmp-related__detail:hover,
.tmp-related__detail:focus {
	background: var(--tmp-primary-deep);
	color: #fff;
	box-shadow: 0 12px 26px -8px rgba(1, 146, 213, .65);
	text-decoration: none;
}

.tmp-related__card:hover .tmp-related__detail svg,
.tmp-related__detail:focus svg {
	transform: translateX(4px);
}

.tmp-related a:focus-visible {
	outline: 2px solid var(--tmp-primary);
	outline-offset: 3px;
	border-radius: 5px;
}

@media (max-width: 1040px) {
	.tmp-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}
}

/* Su telefono la griglia diventa una rail orizzontale con scroll snap, come
   nella galleria: quattro card impilate sarebbero quattro schermate. Il
   margine negativo a destra porta la rail fino al bordo della finestra
   (compensa il padding del .tmp-wrap che la contiene). */
@media (max-width: 620px) {
	.tmp-related__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(240px, 76vw);
		gap: 14px;
		overflow-x: auto;
		margin-right: -24px;
		padding: 4px 24px 18px 0;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}

	.tmp-related__grid > li {
		scroll-snap-align: start;
	}

	.tmp-related__card {
		border-radius: 18px;
	}

	.tmp-related__shot {
		border-radius: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmp-related__card,
	.tmp-related__shot,
	.tmp-related__img,
	.tmp-related__detail svg {
		transition: none;
	}
}

/* Stessa griglia dell'archivio: le celle contengono le card .tmp-prod. */
.tmp-single__after ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmp-single__after ul.products::before,
.tmp-single__after ul.products::after {
	content: none;
}

.tmp-single__after ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	display: flex;
}

.tmp-single__after ul.products li.product::before {
	content: none;
}

.tmp-single__after ul.products li.product > .tmp-prod {
	width: 100%;
}

/* Come nell'archivio: sotto i 768px WooCommerce dà alle celle `width: 48%`
   con una regola più specifica, e le card dei correlati restavano strette a
   sinistra. Il body della scheda prodotto porta la classe `woocommerce`. */
.woocommerce .tmp-single__after ul.products[class*="columns-"] li.product,
.woocommerce .tmp-single__after ul.products[class*="columns-"] li.product:nth-child(2n) {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

/* ------------------------------------------------------------------
   Il form Contact Form 7 che chiude la pagina prodotto.

   Il markup lo genera CF7 e non è modificabile da qui: ogni campo è un
   `<p>` con dentro `<label> Nome <br> <span.wpcf7-form-control-wrap>`.
   Niente classi per singolo campo, quindi la griglia a due colonne si
   regge su `:has()` per far scavallare messaggio e invio. Dove `:has()`
   manca, i campi restano in colonna: leggibile lo stesso.
   ------------------------------------------------------------------ */
/* Fascia grigia a tutta larghezza, come .tmp-panels-band. Chiude la
   pagina: il padding in fondo a .tmp-single lo tolgo, se no resterebbe
   una striscia bianca tra la fascia e il footer. */
.tmp-contact-band {
	margin: 80px calc(50% - 50vw + var(--tmp-scrollbar, 0px) / 2) 0;
	padding: 72px 0 96px;
	background: var(--tmp-nebbia);
}

.tmp-single:has(> .tmp-contact-band:last-child) {
	padding-bottom: 0;
}

/* Stessa voce dei titoli di sezione dei correlati, poco più sopra. */
.tmp-single__contact-title {
	font-family: var(--tmp-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tmp-inchiostro);
	margin: 0 0 24px;
}

.tmp-single__contact .wpcf7 {
	width: 100%;
	background: #fff;
	border: 1px solid var(--tmp-linea);
	border-radius: 20px;
	box-shadow: var(--tmp-ombra);
	padding: 36px;
}

.tmp-single__contact .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.tmp-single__contact .wpcf7-form > p {
	margin: 0;
}

/* A tutta riga: il testo lungo, il pulsante e l'azienda — quest'ultima
   perché le ragioni sociali sono lunghe e in mezza colonna si troncano a
   vista. I campi si agganciano per `name`, l'unico appiglio che CF7 dà
   sul singolo campo (i `<p>` non hanno classi proprie). */
.tmp-single__contact .wpcf7-form > p:has(textarea),
.tmp-single__contact .wpcf7-form > p:has(.wpcf7-submit),
.tmp-single__contact .wpcf7-form > p:has([name="your-company"]) {
	grid-column: 1 / -1;
}

/* I campi nascosti di CF7 non devono occupare una cella della griglia. */
.tmp-single__contact .hidden-fields-container {
	display: none;
}

/* Etichette come le intestazioni della tabella specifiche: stessa voce.
   Solo quelle di primo livello: i consensi hanno la loro etichetta annidata,
   che è testo corrente e non va maiuscoletta. */
.tmp-single__contact .wpcf7-form > p > label {
	display: block;
	font-family: var(--tmp-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tmp-grigio);
}

.tmp-single__contact .wpcf7-form-control-wrap {
	display: block;
	margin-top: 7px;
}

.tmp-single__contact .wpcf7-form input[type="text"],
.tmp-single__contact .wpcf7-form input[type="tel"],
.tmp-single__contact .wpcf7-form input[type="email"],
.tmp-single__contact .wpcf7-form select,
.tmp-single__contact .wpcf7-form textarea {
	width: 100%;
	font-family: var(--tmp-font-body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--tmp-inchiostro);
	background: var(--tmp-nebbia);
	border: 1px solid var(--tmp-linea-forte);
	border-radius: 12px;
	padding: 11px 14px;
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.tmp-single__contact .wpcf7-form textarea {
	min-height: 150px;
	resize: vertical;
}

/* La freccia della select disegnata qui: `appearance: none` toglie quella
   di sistema, che ogni browser rende a modo suo. */
.tmp-single__contact .wpcf7-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6873' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding-right: 40px;
}

.tmp-single__contact .wpcf7-form input:focus,
.tmp-single__contact .wpcf7-form select:focus,
.tmp-single__contact .wpcf7-form textarea:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--tmp-primary);
	box-shadow: 0 0 0 3px rgba(1, 146, 213, .18);
}

/* ---- Consensi privacy ----------------------------------------------
   Tre blocchi `wpcf7-acceptance`, tutti a tutta riga: sono testi lunghi,
   in mezza colonna diventerebbero una colonna di parole.
   Il primo ha anche un'etichetta esterna con il paragrafo introduttivo,
   che va riportata a testo corrente (la regola sopra la renderebbe
   maiuscoletta come i nomi dei campi).
   -------------------------------------------------------------------- */
.tmp-single__contact .wpcf7-form > p:has(.wpcf7-acceptance) {
	grid-column: 1 / -1;
}

.tmp-single__contact .wpcf7-form > p:has(.wpcf7-acceptance) > label {
	font-family: var(--tmp-font-body);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tmp-grigio);
}

/* Consensi consecutivi: si stringono fra loro, restano un blocco solo. */
.tmp-single__contact .wpcf7-form > p:has(.wpcf7-acceptance) + p:has(.wpcf7-acceptance) {
	margin-top: -8px;
}

.tmp-single__contact .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

/* La casella e il suo testo su una riga sola, con il testo che va a capo
   allineato: da qui il flex invece del solo `display: block`. */
.tmp-single__contact .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--tmp-font-body);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tmp-inchiostro);
	cursor: pointer;
}

/* La casella disegnata da zero: `appearance: none` toglie quella di sistema.
   Serve perché `accent-color` da solo tinge e basta — forma, bordo e raggio
   restano quelli del browser. La spunta è un SVG di sfondo su `:checked`. */
.tmp-single__contact .wpcf7-acceptance input[type="checkbox"] {
	appearance: none;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	flex: none;
	background: var(--tmp-nebbia);
	border: 1px solid var(--tmp-linea-forte);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.tmp-single__contact .wpcf7-acceptance input[type="checkbox"]:hover {
	border-color: var(--tmp-primary);
}

.tmp-single__contact .wpcf7-acceptance input[type="checkbox"]:checked {
	background-color: var(--tmp-primary-mid);
	border-color: var(--tmp-primary-mid);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
}

/* Senza l'aspetto di sistema sparisce anche il contorno di focus del
   browser: il focus da tastiera va ridisegnato, o la casella diventa
   irraggiungibile a vista per chi naviga con il Tab. */
.tmp-single__contact .wpcf7-acceptance input[type="checkbox"]:focus-visible {
	outline: none;
	border-color: var(--tmp-primary);
	box-shadow: 0 0 0 3px rgba(1, 146, 213, .18);
}

.tmp-single__contact .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	font-family: var(--tmp-font-body);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.2;
	padding: 13px 28px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--tmp-primary-mid);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s, transform .2s, box-shadow .2s;
}

.tmp-single__contact .wpcf7-submit:hover,
.tmp-single__contact .wpcf7-submit:focus {
	background: var(--tmp-primary-deep);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -8px rgba(1, 146, 213, .65);
}

/* Finché i consensi obbligatori non sono spuntati CF7 tiene il pulsante
   `disabled`: va detto anche a vista, altrimenti sembra rotto. */
.tmp-single__contact .wpcf7-submit:disabled {
	background: var(--tmp-linea-forte);
	color: var(--tmp-grigio);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Errori ed esito. Il rosso non basta da solo: CF7 marca i campi non validi
   anche con `aria-invalid` e il messaggio di errore sotto al campo. */
.tmp-single__contact .wpcf7-not-valid {
	border-color: #c0392b;
}

.tmp-single__contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: #c0392b;
}

/* Prima dell'invio il box è vuoto e marcato `aria-hidden`: senza questo
   resterebbe a video come riquadro bordato senza testo. */
.tmp-single__contact .wpcf7-response-output[aria-hidden="true"] {
	display: none;
}

.tmp-single__contact .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--tmp-linea-forte);
	font-size: 14px;
	line-height: 1.5;
	color: var(--tmp-inchiostro);
	background: #fff;
}

.tmp-single__contact .wpcf7 form.sent .wpcf7-response-output {
	border-color: #2e7d32;
	color: #1e5c22;
}

.tmp-single__contact .wpcf7 form.invalid .wpcf7-response-output,
.tmp-single__contact .wpcf7 form.failed .wpcf7-response-output,
.tmp-single__contact .wpcf7 form.aborted .wpcf7-response-output {
	border-color: #c0392b;
	color: #a5281b;
}

@media (max-width: 1100px) {
	.tmp-single__grid {
		gap: 36px;
	}

	/* Due file da due: i pulsanti restano leggibili, senza etichette a capo. */
	.tmp-downloads__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tmp-single__after ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	/* Una colonna: la galleria sticky non ha più senso, scorre col resto. */
	.tmp-single__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tmp-single__media {
		position: static;
	}

	.tmp-single {
		padding: 24px 0 80px;
	}

	.tmp-single__head {
		margin-bottom: 28px;
		padding-bottom: 20px;
	}

	.tmp-single__title {
		max-width: none;
	}

	.tmp-downloads,
	.tmp-panels-band,
	.tmp-single__after .related,
	.tmp-single__after .upsells,
	.tmp-contact-band {
		margin-top: 56px;
	}

	.tmp-contact-band {
		padding: 48px 0 64px;
	}

	.tmp-panels-band {
		padding: 40px 0;
	}

	/* Due colonne su schermo stretto stringono troppo i campi. */
	.tmp-single__contact .wpcf7-form {
		grid-template-columns: 1fr;
	}

	.tmp-single__contact .wpcf7 {
		padding: 24px;
	}

	.tmp-panel__head {
		padding: 20px 0;
	}

	.tmp-panel__body {
		padding: 0 0 26px;
	}
}

@media (max-width: 560px) {
	.tmp-downloads__grid,
	.tmp-single__after ul.products {
		grid-template-columns: 1fr;
	}

	.tmp-single__spec {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.tmp-single__specs--main {
		padding: 6px 18px;
	}

	.tmp-single__specs--codes {
		padding: 0 18px;
	}

}