/*
Theme Name: Frost Child
Template: frost
Description: Child theme di Frost per Gioielleria Sessa Mario.
Author: Art Media Studio
Version: 1.0.0
Text Domain: frost-child
*/

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
	line-height: 1;
}

/* Radio/checkbox ovali e rettangolari (es. metodi di pagamento al checkout):
   il tema parent (frost/style.css) applica border + padding:10px 20px a
   TUTTI gli input, radio/checkbox inclusi (il loro "width:auto" non basta
   a escluderli). Quel bordo+padding avvolge il pallino/quadratino nativo
   deformandolo. Qui si azzera bordo/padding e si fissa una dimensione
   piccola, lasciando il rendering nativo (tondo per radio, quadrato per
   checkbox) colorato via accent-color invece di ricostruirlo a mano. */
input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	accent-color: var(--wp--preset--color--contrast);
}

/* Titoli col blu brand (come nel footer) sui titoli senza colore esplicito
   scelto in editor. h1-h6 diretti (non solo .wp-block-heading) per coprire
   anche i titoli prodotto WooCommerce (wp-block-post-title) e simili. Chi ha
   gia' un colore proprio (es. "base" bianco sull'hero, per contrasto sulla
   foto) resta invariato: la classe has-text-color segna un colore scelto a
   mano nel blocco. */
h1:not(.has-text-color),
h2:not(.has-text-color),
h3:not(.has-text-color),
h4:not(.has-text-color),
h5:not(.has-text-color),
h6:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}
/* Pattern "-dark" (sfondo contrast): i titoli qui non hanno un colore proprio
   ma ereditano il bianco dal contenitore scuro. Si ripristina l'eredita'. */
.has-contrast-background-color h1:not(.has-text-color),
.has-contrast-background-color h2:not(.has-text-color),
.has-contrast-background-color h3:not(.has-text-color),
.has-contrast-background-color h4:not(.has-text-color),
.has-contrast-background-color h5:not(.has-text-color),
.has-contrast-background-color h6:not(.has-text-color) {
	color: inherit;
}

/* Homepage, sezione "Nuovi Arrivi": il margin-top impostato in editor sul
   blocco Product Collection (WooCommerce) non viene mai reso in HTML — limite
   del blocco, non un errore di battitura — quindi titolo e griglia restano
   attaccati. Si rifa' qui il distacco, un po' piu' ampio del valore perso. */
.sessa-new-arrivals-grid {
	margin-top: 40px;
}

/* Hero: due colonne affiancate (testo + foto). verticalAlignment sulla
   colonna genera align-self:center, che la fa restringere al contenuto
   e "galleggiare" al centro della riga invece di riempirla — lasciava
   striscie del colore di sfondo pagina sopra/sotto il beige. Qui invece
   la colonna riempie tutta l'altezza (nessun align-self) e centra il
   contenuto al suo interno via flex proprio. */
.sessa-hero-text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 781px) {
	/* Sotto la soglia di stack di wp:columns le colonne diventano blocchi
	   impilati: la colonna-foto, senza contenuto proprio, collasserebbe
	   a 0 di altezza senza questa regola. */
	.sessa-hero-split .wp-block-column:last-child {
		min-height: 280px;
	}
}

/* Riga hero: l'altezza fissa (640px, dagli attributi del blocco) resta 640px
   sotto ~1600px di larghezza (clamp non scende mai sotto quel minimo, stesso
   comportamento di oggi). Oltre, la colonna-foto (58% di viewport sempre piu'
   largo, sfondo cover con foto quadrata) si appiattisce sempre di piu' e il
   crop verticale mangia via via di piu' la fila di gioielli in basso - su un
   monitor 4K arrivava a tagliarla a meta'. Qui l'altezza cresce con la
   larghezza cosi' il rapporto colonna resta vicino a quello gia' verificato
   accettabile (~2.3:1, il caso 2560px), invece di superarlo sempre di piu'. */
.sessa-hero-split .wp-block-columns {
	min-height: clamp(640px, 25vw, 900px) !important;
}

/* Immagine hero (colonna vuota accanto al testo "Dal 1955..."): sfondo via
   classe invece che via style.background nativo del blocco. La colonna non
   ha contenuto interno (serve solo da cornice per l'immagine) e il Site
   Editor, salvando un blocco vuoto con solo lo style di sfondo, ne perde
   ripetutamente l'inline style (className duplicato a "has-background",
   background-image sparito) - successo due volte. Le tile qui sotto usano lo
   stesso stile nativo ma dentro un wp:group con contenuto reale e non hanno
   mai avuto il problema: la classe fissa toglie di mezzo la fragilita'.
*/
.sessa-hero-image-col {
	background-image: url(https://www.gioielleriasessamario.com/wp-content/uploads/2026/08/hero-gioielli.jpg);
	background-position: center;
	background-size: cover;
}

/* Collection tiles: zoom image on hover, caption on gradient scrim.
   aspect-ratio in CSS: il blocco Group supporta solo dimensions.minHeight,
   quindi aspectRatio negli attributi verrebbe ignorato. */
.sessa-collection-tile {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4/3;
	border: 1px solid var(--wp--preset--color--outline-variant);
}
.sessa-collection-tile img {
	transition: transform 0.7s ease;
}
.sessa-collection-tile:hover img {
	transform: scale(1.05);
}
.sessa-collection-tile .sessa-collection-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2rem;
	background: linear-gradient(to top, var(--wp--preset--color--scrim), transparent);
}

/* Product cards: border shifts to brand blue on hover */
.sessa-product-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--outline-variant);
	transition: border-color 0.5s ease;
}
.sessa-product-card:hover {
	border-color: var(--wp--preset--color--primary-container);
}
.sessa-product-card img {
	transition: transform 0.7s ease;
}
.sessa-product-card:hover img {
	transform: scale(1.1);
}

/* Newsletter form (visual placeholder, not wired to a mailing list yet) */
.sessa-newsletter-form {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--outline);
	margin-top: 1rem;
}
.sessa-newsletter-form input {
	flex: 1;
	background: transparent;
	border: none;
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--primary);
}
.sessa-newsletter-form input:focus {
	outline: none;
}
.sessa-newsletter-form button {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	display: flex;
}

/* Visible keyboard focus indicator (WCAG 2.1 AA - 2.4.7) on every interactive
   element, including the custom card/tile links which have no native browser
   affordance since they carry no background/border of their own by default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-element-button:focus-visible,
.sessa-collection-tile:focus-visible,
.sessa-product-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Whole-card links: keep the card's own hover/focus visuals, remove the
   underline/color a browser would otherwise put on the wrapping anchor. */
.sessa-collection-tile,
.sessa-product-card {
	color: inherit;
	text-decoration: none;
	display: block;
}
.sessa-collection-tile:hover,
.sessa-product-card:hover {
	color: inherit;
}

/* "Stretched link" pattern: a single real, focusable anchor covers the
   whole card so the entire tile/card is clickable and keyboard-operable,
   while the visible caption/title stays plain text (no duplicate link). */
.sessa-card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ---------- Header (mockup Screenshot-desktop/mobile) ---------- */

/* Barra superiore (localita' + selettore lingua): visibile a tutte le larghezze,
   e' l'unico punto dove scegliere la lingua anche su desktop. */
.sessa-topbar {
	display: block;
}
.sessa-topbar p {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.sessa-topbar .sessa-topbar-account {
	margin-right: 1.5em;
}
.sessa-topbar .sessa-account-link {
	text-decoration: none;
	transition: color 150ms ease;
}
.sessa-topbar .sessa-account-link:hover,
.sessa-topbar .sessa-account-link:focus-visible {
	text-decoration: underline;
	color: var(--wp--preset--color--primary);
}

/* Icone header: blu navy di brand, dimensione uniforme */
.sessa-header-row .sessa-header-icons {
	color: var(--wp--preset--color--primary);
	gap: 1rem;
}
/* Area cliccabile min. 44px (icone 32px): padding invisibile compensato da
   margine negativo, cosi' lo spazio visivo tra le icone resta invariato. */
.sessa-header-icons a,
.sessa-header-icons button {
	padding: 6px;
	margin: -6px;
}

/* Logo alternativo "solo scritta" (footer, senza coccarde): usato al posto
   di quello con le coccarde solo sotto i 1000px (vedi media query sotto),
   nascosto di default qui perche' altrimenti comparirebbe anche a piena
   dimensione naturale (1600x570) sopra quella soglia. */
.sessa-logo-mobile {
	display: none;
}

/* Topbar clonata nel menu (vedi frost_child_topbar_in_mobile_menu_script):
   il JS la inserisce sempre nel DOM del blocco Navigazione, che sopra i
   1000px e' il menu inline sempre visibile (non un dialog nascosto) - senza
   nasconderla qui esplicitamente comparirebbe una seconda volta, senza
   stile, sotto la testata desktop. */
.sessa-topbar-in-menu {
	display: none;
}

/* Riga logo: ricerca a sinistra, logo al centro, icone a destra. Grid a 3
   colonne (invece di flex space-between) cosi' il logo resta centrato anche
   se ricerca e icone hanno larghezze diverse. */
@media (min-width: 1001px) {
	.sessa-header-row {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.sessa-header-row .sessa-search-toggle {
		justify-self: start;
	}
	.sessa-header-row .wp-block-site-logo {
		justify-self: center;
	}
	.sessa-header-row .sessa-header-icons {
		justify-self: end;
	}
	/* Nav (ex riga a parte) ora e' il 4° figlio della griglia: si estende su
	   tutte e 3 le colonne e va in riga 2, esattamente come prima. */
	.sessa-header-row .sessa-header-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 16px;
	}
}

/* Ricerca YITH: collassata mostra solo la lente; il click (script in
   functions.php) aggiunge is-open e il campo si espande. Icona e campo non
   convivono aperti insieme per non duplicare la lente (quella di submit e'
   gia' dentro il campo YITH). */
.sessa-search-toggle {
	position: relative;
	display: flex;
	align-items: center;
}
.sessa-search-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 6px;
	margin: -6px;
	margin-top: -8px;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}
/* 26px: un po' piu' grande dell'originale ma sotto ai 32px delle altre icone
   header; la lente (unica forma asimmetrica del gruppo, con la "coda" in
   basso a destra) appare otticamente piu' bassa a parita' di bounding box. */
.sessa-search-open svg {
	width: 26px;
	height: 26px;
}
/* position:absolute: la larghezza anima fuori dal flusso, cosi' il resize
   non sposta logo/icone accanto (niente reflow a catena sul resto della riga). */
.sessa-search-field {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 20;
	transform: translateY(-50%);
	width: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transition: width 200ms ease, opacity 150ms ease;
}
.sessa-search-toggle.is-open .sessa-search-open {
	display: none;
}
/* vw, non %: .sessa-search-field e' position:absolute dentro un genitore
   (.sessa-search-toggle) che si stringe al contenuto dell'icona (~44px, il
   campo assoluto non contribuisce alla sua larghezza). Con % il campo si
   sarebbe aperto solo fino al 100% di quei 44px, restando invisibile. */
.sessa-search-toggle.is-open .sessa-search-field {
	width: min(280px, 90vw);
	opacity: 1;
	pointer-events: auto;
}
.sessa-header-icons svg {
	width: 32px;
	height: 32px;
}
.sessa-wishlist-link {
	display: inline-flex;
	align-items: center;
	color: inherit;
}

/* Badge carrello: cerchietto oro come da mockup */
.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--secondary-container) !important;
	color: var(--wp--preset--color--on-secondary-container) !important;
	font-weight: 600;
}

/* Voce di menu: sottolineatura blu solo al passaggio del mouse o quando la
   voce corrisponde alla pagina corrente (stati core .current-menu-item /
   aria-current). Il bordo trasparente di base evita salti di layout.
   Solo desktop: sotto i 1000px il menu orizzontale non esiste (hamburger). */
@media (min-width: 1001px) {
	/* Voci troppo vicine tra loro: il gap del blocco Navigation eredita il
	   blockGap globale (30px) che qui risulta stretto. Ai lati c'e' spazio
	   libero (nav centrata, larghezza wide), quindi si allarga il respiro
	   tra le voci di primo livello invece di limitarsi al default tema. */
	.sessa-header-nav .wp-block-navigation__container {
		gap: 3rem !important;
	}
	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		border-bottom: 2px solid transparent;
		padding-bottom: 4px;
	}
	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
		border-bottom-color: var(--wp--preset--color--primary);
		text-decoration: none;
	}


	/* "Catalogo": mega menu a griglia (4 colonne) invece del flyout annidato
	   standard. submenuVisibility:"always" del blocco Navigation e' globale a
	   tutta la nav (non si puo' applicare al solo Catalogo), quindi il secondo
	   livello viene forzato sempre visibile via CSS solo dentro .sessa-catalogo-mega. */
	.sessa-catalogo-mega > .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
		flex-direction: row !important;
		gap: 2rem !important;
		width: min(90vw, 900px) !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
		/* Il riquadro (area cliccabile/hover) parte comunque a filo della voce
		   "Catalogo" (top:100% del core, zero gap: e' questo che tiene vivo il
		   mouseover). Il padding-top extra copre solo la distanza fino al bordo
		   inferiore reale della testata (misurata: ~51px) + il respiro interno
		   normale (2rem): resta dentro l'area hoverable dell'elemento, quindi
		   niente "buco" morto sotto al mouse. background-clip:content-box fa si'
		   che lo sfondo nero non venga dipinto in quel padding-top (che li' e'
		   ancora sopra la testata bianca) e parta visivamente solo a filo del
		   bordo della testata: effetto "si sovrappone" pulito, senza margin-top. */
		padding: 2rem 2rem 2rem 2rem !important;
		padding-top: calc(19px + 2rem) !important;
		background-clip: content-box !important;
	}
	.sessa-catalogo-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.sessa-catalogo-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block !important;
		flex: 0 0 auto !important; /* il core da' flex-grow:1 a questo elemento: senza
		   azzerarlo, il titolo colonna "gonfia" fino a riempire tutta l'altezza
		   della colonna (che si stira per pareggiare quella piu' lunga, Gioielli),
		   invece di restare alto solo quanto il proprio testo. */
		font-weight: 700;
		min-height: 2.8em;
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	}
	/* Le colonne con sottocategorie (Gioielli, Orologi Da Polso, Accessori):
	   secondo livello sempre aperto e statico, niente flyout/click. */
	.sessa-catalogo-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}
	.sessa-catalogo-mega .wp-block-navigation-submenu__toggle {
		display: none;
	}
}

/* Hamburger esteso fino a 1000px: il breakpoint core del blocco navigazione e'
   600px, ma questa nav (5 voci + logo + icone) non ci sta sotto i ~1000px e
   andava in overflow. Si annullano le regole core (min-width: 600px) che
   mostrano il menu orizzontale, mantenendo l'overlay a tutto schermo quando
   aperto. */
@media (min-width: 600px) and (max-width: 1000px) {
	.sessa-header-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important; /* il container chiuso non deve mai coprire il pulsante */
	}
	.sessa-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important; /* l'hamburger resta sempre visibile e cliccabile */
	}
}

@media (max-width: 1000px) {
	/* Topbar (Milano - Dal 1955 / Registrati-Accedi / IT-EN) tolta dalla
	   testata mobile per lasciare spazio a un logo piu' grande - il suo
	   contenuto viene rimesso in fondo al menu ad apertura (vedi
	   frost_child_topbar_in_mobile_menu_script in functions.php). */
	.sessa-topbar {
		display: none;
	}
	.sessa-header {
		padding-top: 22px !important;
		padding-bottom: 22px !important;
	}
	/* Riga 1: hamburger a sinistra, logo al centro, carrello a destra (stesso
	   contenitore flex della versione desktop, solo riordinato). Riga 2:
	   campo di ricerca a tutta larghezza, sempre visibile sotto al logo
	   (niente piu' icona-lente da aprire: su mobile lo spazio c'e'). */
	.sessa-header-row {
		flex-wrap: wrap !important;
		justify-content: space-between;
		align-items: center;
		row-gap: 12px;
	}
	.sessa-header-row .sessa-header-nav {
		order: 1;
		flex: 0 0 auto;
		margin-top: 0;
	}
	/* Logo con coccarde (Bottega Storica / Negozio Storico) nascosto su
	   mobile: le coccarde ai lati riducono la scritta effettiva a una
	   frazione della larghezza disponibile. Si usa al suo posto lo stesso
	   file del footer (solo scritta, senza coccarde), che a parita' di
	   larghezza risulta molto piu' leggibile. */
	.sessa-header-row .sessa-logo-desktop {
		display: none;
	}
	.sessa-header-row .sessa-logo-mobile {
		display: block;
		order: 2;
	}
	.sessa-header-row .sessa-header-icons {
		order: 3;
		flex: 0 0 auto;
	}
	.sessa-header-row .sessa-search-toggle {
		order: 4;
		flex: 1 0 100%; /* forza a capo: riga propria, tutta larghezza */
	}
	.sessa-header-row .sessa-search-open {
		display: none; /* niente toggle: il campo sotto e' gia' visibile */
	}
	.sessa-header-row .sessa-search-field {
		position: static;
		width: 100%;
		opacity: 1;
		overflow: visible;
		pointer-events: auto;
		transform: none;
	}
	/* Logo molto piu' grande - la topbar sopra e' sparita, c'e' spazio.
	   Rapporto largh/altezza del file footer (~2.8:1) simile all'originale,
	   quindi a parita' di larghezza l'altezza cresce di conseguenza. */
	.sessa-logo-mobile img {
		width: 320px;
		height: auto;
	}
	/* Resta solo il carrello */
	.sessa-header-icons .wp-block-woocommerce-customer-account,
	.sessa-header-icons .sessa-wishlist-link {
		display: none;
	}

	/* Il core, nell'overlay mobile, forza TUTTI i sottomenu sempre aperti e
	   nasconde le frecce (pensato per menu semplici a 1 livello): con Catalogo
	   a 4 gruppi e fino a 7 sottocategorie ciascuno la lista diventa lunghissima.
	   Si ripristina qui il comportamento ad accordion (frecce visibili, sottomenu
	   chiuso finche' non lo apri) gia' nativo del blocco, solo disattivato dal
	   core in questo contesto specifico. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		display: inline-flex !important;
		/* La freccia e' un'icona di ~7px senza alcun padding: area di tocco
		   reale minuscola. Stesso trucco delle icone header (padding + margine
		   negativo) per portarla a ~44px di tocco senza spostare il layout. */
		padding: 14px !important;
		margin: -14px !important;
		align-items: center;
		justify-content: center;
		flex-shrink: 0; /* altrimenti il flex della riga schiaccia l'icona a 0px */
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}
	/* L'area di tocco allargata della freccia (sopra) e' piu' alta della riga
	   di testo: senza spazio tra le voci sconfina in quella accanto, e il tap
	   finisce sul link della voce sbagliata invece che sul sottomenu. Gap reale
	   tra le voci di primo livello. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		row-gap: 18px !important;
	}
	/* Freccia troppo vicina al testo della voce madre: il link e' sopra e il
	   toggle sotto (li in column, non in riga), quindi il margine negativo che
	   allarga l'area di tocco lo tira su a ridosso del testo. Margine-top meno
	   negativo per staccarlo visivamente, mantenendo l'area di tocco sugli
	   altri lati. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		margin: 6px -14px -14px !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
		visibility: hidden !important;
		opacity: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
	}
	/* Il focus-trap del dialog overlay, all'apertura, marca (bug del core)
	   tutti i sottomenu come "focused": aria-expanded resta bloccato su
	   "true" per tutti e non risponde piu' al click nativo. Accordion quindi
	   gestito con classe propria (.sessa-submenu-open, JS in functions.php,
	   frost_child_mobile_submenu_accordion_script), ignorando lo stato del
	   core sia per mostrare il sottomenu che per ruotare la freccia. */
	.wp-block-navigation__responsive-container.is-menu-open .has-child.sessa-submenu-open > .wp-block-navigation__submenu-container {
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		overflow: visible !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		transform: none !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .has-child.sessa-submenu-open > .wp-block-navigation-submenu__toggle svg {
		transform: rotate(180deg) !important;
	}
}

@media (max-width: 600px) {
	.sessa-logo-mobile img {
		width: 260px;
	}
}

/* Contenuto della topbar rimesso in cima al menu mobile ad apertura, via JS
   (frost_child_topbar_in_mobile_menu_script). Divisore sotto per staccarlo
   dalla lista voci, stile piu' leggero (label size) coerente con l'originale. */
@media (max-width: 1000px) {
	.sessa-topbar-in-menu {
		order: -1; /* il JS lo aggiunge come ultimo figlio (vedi nota in
		   functions.php), qui lo si riporta in cima solo visivamente */
		margin-bottom: 24px;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--wp--preset--color--outline-variant);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}
	.sessa-topbar-in-menu p {
		margin: 0;
	}
	.sessa-topbar-in-menu .sessa-topbar-account-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		flex-wrap: wrap;
	}
}

/* Footer: le 4 colonne (Mario Sessa / Servizi / Supporto / Iscriviti) hanno
   blockGap solo sull'asse orizzontale (gutter). Impilate su mobile (breakpoint
   core 781px) restano quindi senza spazio verticale tra loro, "appiccicate". */
@media (max-width: 781px) {
	footer.wp-block-group .wp-block-columns {
		row-gap: 2.5rem;
	}
}

/* Titolo di categoria (Gioielli, Orologi, ...): stesso fregio (linea-giglio-
   linea) del lockup dell'header, per coerenza con il logo. Immagine invece di
   CSS puro: il giglio disegnato a mano in SVG rischiava di essere una
   approssimazione poco fedele all'originale. */
/* Fregio giglio (linea-giglio-linea) del lockup dell'header. Riutilizzabile
   in due modi:
   1) automatico dopo il titolo categoria e dopo "Nuovi Arrivi" (::after);
   2) manuale altrove: dal Site Editor aggiungere ad un blocco qualsiasi
      (es. Gruppo o Spacer, va bene anche vuoto) la classe CSS aggiuntiva
      "sessa-fleur-divider" in Avanzate > Classi CSS aggiuntive. */
body.tax-product_cat .wp-block-query-title::after,
.sessa-nuovi-arrivi-title::after,
.sessa-correlati-title::after,
.sessa-fleur-divider {
	content: "";
	display: block;
	width: 180px;
	aspect-ratio: 367 / 48;
	margin: 0.75rem auto 0;
	background-image: url("https://www.gioielleriasessamario.com/wp-content/uploads/2026/08/divider-fleur.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ---------- Pagina categoria: filtri per attributo ---------- */

/* Il filo di separazione dai risultati sta sul contenitore, non sul form:
   deve restare visibile anche a pannello chiuso. */
.apc-category-filters-wrap {
	margin-top: 2rem; /* la descrizione categoria sopra finiva incollata,
	   0px di distanza: il blockGap del tema non arriva a un blocco Shortcode */
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}

/* Il blocco shortcode nasce "constrained" (~750px) dentro .site-content, mentre
   la griglia prodotti sotto e' "wide": per tenere tutti i campi su una riga
   sola (e allineare i filtri ai bordi della griglia) il wrap prende la
   larghezza wide. I margini auto del layout constrained restano e lo centrano. */
.site-content > .apc-category-filters-wrap {
	max-width: var(--wp--style--global--wide-size);
}

.apc-filters-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* Toggle in stile terziario: solo icona + testo maiuscolo, nessun box.
   Padding laterale a zero per allineare l'icona al margine del contenuto. */
.apc-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
}
.apc-filters-toggle:hover,
.apc-filters-toggle[aria-expanded="true"] {
	background: transparent;
	color: var(--wp--preset--color--primary-container);
}

/* Filtri attivi: chip rimovibile singolarmente + reset, visibili anche a
   pannello chiuso cosi' un filtro applicato non resta "invisibile". */
.apc-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.apc-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 999px;
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}
.apc-active-filters__chip:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.apc-active-filters__chip svg {
	flex-shrink: 0;
}
.apc-active-filters__reset {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--on-surface-variant);
	text-decoration: underline;
}
.apc-active-filters__reset:hover {
	color: var(--wp--preset--color--primary);
}

/* Fisarmonica: una griglia a riga singola che passa da 0fr a 1fr. E' l'unico
   modo di animare fino all'altezza reale del contenuto senza calcolarla in JS.
   La visibility toglie i select dall'ordine di tabulazione a pannello chiuso
   (l'overflow da solo non basta: restano raggiungibili da tastiera). */
.apc-filters-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms ease;
}
/* Contenitore interno senza padding proprio: e' lui a collassare a zero. Il
   padding del form, se stesse qui, resterebbe visibile anche a pannello chiuso,
   perche' min-height:0 azzera l'altezza del contenuto ma non il padding. */
.apc-filters-panel > .apc-filters-panel__inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s 300ms;
}
.apc-category-filters-wrap.is-open .apc-filters-panel {
	grid-template-rows: 1fr;
}
.apc-category-filters-wrap.is-open .apc-filters-panel > .apc-filters-panel__inner {
	visibility: visible;
	transition: visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.apc-filters-panel {
		transition: none;
	}
}

/* Form su riga singola: ogni campo occupa una frazione uguale della larghezza.
   flex-wrap resta come rete di sicurezza per categorie con molti attributi
   (oltre ~8 campi la riga va a capo invece di schiacciarsi). */
.apc-category-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.5rem;
	margin-top: 1rem;
	padding: 1rem 0 0;
	background: transparent;
}
.apc-category-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 0;
	min-width: 130px;
}
.apc-category-filters__field label {
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--on-surface-variant);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Select "minimalist underline" (da DESIGN.md): solo sottolineatura 1px,
   niente box. appearance:none rimuove il fondo di sistema; la freccia custom
   (stesso tratto dei chevron dei sottomenu header) sostituisce quella nativa,
   che varia per OS. overflow/ellipsis: le opzioni lunghe non rompono la riga. */
.apc-category-filters__field select {
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 1.5rem 0 0;
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23073f7e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.25rem center;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 0;
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.apc-category-filters__field select:hover {
	border-bottom-color: var(--wp--preset--color--primary);
}
/* Al focus la linea si ispessisce via box-shadow (non via border-width, che
   sposterebbe il layout di 1px): stato visibile anche senza percepire il colore. */
.apc-category-filters__field select:focus-visible {
	outline: none;
	border-bottom-color: var(--wp--preset--color--primary);
	box-shadow: 0 1px 0 var(--wp--preset--color--primary);
}
.apc-category-filters__actions {
	display: flex;
}
/* Pulsante secondario (da DESIGN.md): trasparente con bordo 1px blu royal.
   Specificita' doppia classe per vincere su .wp-element-button del core, che
   impone sfondo/colore pieni con la stessa specificita' di classe singola. */
.apc-category-filters .apc-category-filters__submit {
	height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 1.25rem;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.apc-category-filters .apc-category-filters__submit:hover {
	background-color: var(--wp--preset--color--surface-container-low);
}

/* Dropdown custom dei filtri (Marchio e affini), da 601px in su: sostituisce
   lo <select> nativo (in apc_filters_toggle_script(), plugin Attributi per
   Categoria) il cui popup non e' stilizzabile e varia per browser/OS. Lo
   <select> resta nel form ma nascosto (.apc-select__native): invio dati
   invariato. Il pannello e' in position:fixed e appeso a <body> in JS, cosi'
   non viene tagliato dall'overflow:hidden dell'accordion filtri. */
.apc-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.apc-select__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 0;
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: left;
	cursor: pointer;
}
.apc-select__trigger:hover,
.apc-select__trigger[aria-expanded="true"] {
	border-bottom-color: var(--wp--preset--color--primary);
}
.apc-select__trigger:focus-visible {
	outline: none;
	box-shadow: 0 1px 0 var(--wp--preset--color--primary);
}
.apc-select__value {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.apc-select__trigger svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
	transition: transform 150ms ease;
}
.apc-select__trigger[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
/* min-width impostato in JS = larghezza del trigger + 20px ("leggermente
   piu' largo del campo"); max-width tiene a bada i marchi con nome lungo. */
.apc-select__panel {
	position: fixed;
	display: flex;
	flex-direction: column;
	max-width: 340px;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(28, 27, 27, 0.12);
	z-index: 1000;
}
/* "display:flex" sopra vince, per specificita' d'autore, sulla regola
   user-agent "[hidden]{display:none}": senza questa riga il pannello
   chiuso (e le opzioni filtrate dalla ricerca, stesso problema sotto)
   resterebbero visibili. */
.apc-select__panel[hidden] {
	display: none;
}
.apc-select__search {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.apc-select__search input {
	width: 100%;
	padding: 0.3rem 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
}
.apc-select__search input:focus {
	outline: none;
}
.apc-select__search input::placeholder {
	color: var(--wp--preset--color--outline);
}
.apc-select__list {
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
	max-height: 280px;
	overflow-y: auto;
}
/* Hover "sabbia" (Surface Warm, gia' usato per l'header) al posto
   dell'evidenziazione blu di sistema dello <select> nativo. */
.apc-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.9rem;
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--x-small);
	cursor: pointer;
}
.apc-select__option:hover,
.apc-select__option.is-active {
	background-color: var(--wp--preset--color--surface-warm);
}
.apc-select__option[hidden] {
	display: none;
}
.apc-select__option.is-selected {
	font-weight: 700;
}
.apc-select__check {
	flex-shrink: 0;
	opacity: 0;
	color: var(--wp--preset--color--primary);
}
.apc-select__option.is-selected .apc-select__check {
	opacity: 1;
}
.apc-select__list--empty::after {
	content: "Nessun risultato";
	display: block;
	padding: 0.6rem 0.9rem;
	color: var(--wp--preset--color--outline);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Mobile: un campo per riga, pulsante a tutta larghezza sotto. */
@media (max-width: 600px) {
	.apc-category-filters__field {
		flex-basis: 100%;
	}
	.apc-category-filters__actions {
		flex-basis: 100%;
	}
	.apc-category-filters .apc-category-filters__submit {
		justify-content: center;
		width: 100%;
	}
}

/* Intestazione del pannello filtri: serve solo dentro il bottom sheet mobile
   (la X per chiuderlo), su desktop il pannello resta l'accordion inline di
   sempre e questa riga non ha senso li'. */
.apc-filters-panel__header {
	display: none;
}

/* "Ordina per": bottone gemello di ".apc-filters-toggle", costruito via JS
   (frost_child_mobile_toolbar_script) leggendo le option della select nativa
   di WooCommerce. Esiste nel markup solo su mobile: la select resta l'origine
   di verita' e su desktop e' lei visibile, non questo bottone. */
.sessa-sort-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
}

/* Sotto i 600px: Filtri + Ordina per diventano un'unica pillola con divisore,
   il pannello filtri diventa un bottom sheet (stesso linguaggio del menu
   mobile), i chip dei filtri attivi vanno a riga piena sotto la pillola. */
@media (max-width: 600px) {
	.apc-filters-bar {
		flex-wrap: nowrap;
		gap: 0;
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: 4px; /* radius bottoni da DESIGN.md, non 999px: quello e' riservato ai soli chip filtro rimovibili */
		overflow: hidden;
	}
	.apc-filters-toggle,
	.sessa-sort-toggle {
		display: inline-flex;
		flex: 1 1 0;
		min-width: 0;
		padding: 0.85rem 0.5rem;
	}
	.sessa-sort-toggle {
		border-left: 1px solid var(--wp--preset--color--outline-variant);
	}
	.apc-active-filters {
		flex-basis: 100%;
		margin-top: 0.75rem;
	}

	.apc-filters-panel__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	}
	.apc-filters-panel__title {
		font-family: var(--wp--preset--font-family--primary);
		font-size: var(--wp--preset--font-size--label);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	.apc-filters-panel__close {
		display: flex;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--on-surface-variant);
		padding: 0.25rem;
		cursor: pointer;
	}

	/* L'accordion desktop (grid-template-rows 0fr/1fr + inner collassato)
	   lascia il posto a un pannello ancorato in basso: stessa classe
	   ".is-open", comportamento CSS completamente diverso. */
	.apc-filters-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: block;
		max-height: 80vh;
		overflow-y: auto;
		background-color: var(--wp--preset--color--surface);
		border-radius: 0; /* DESIGN.md: radius 0 di default sulle superfici, il
		   999px pieno resta riservato ai soli chip filtro rimovibili */
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
		padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform 300ms ease;
	}
	.apc-filters-panel > .apc-filters-panel__inner {
		min-height: auto;
		overflow: visible;
		visibility: visible;
		transition: none;
	}
	.apc-category-filters-wrap.is-open .apc-filters-panel {
		transform: translateY(0);
	}
	.apc-category-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
	}
	@media (prefers-reduced-motion: reduce) {
		.apc-filters-panel {
			transition: none;
		}
	}
}

/* ---------- Bottom sheet generico (filtri mobile + ordina per) ---------- */
/* Componente riutilizzabile: un unico backdrop condiviso, creato via JS in
   frost_child_mobile_toolbar_script. Non e' racchiuso in una media query
   perche' i soli trigger che lo aprono (.sessa-sort-toggle, il toggle Filtri
   in modalita' sheet) sono gia' loro stessi mobile-only. */
.sessa-sheet-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 0s 300ms;
}
.sessa-sheet-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 300ms ease;
}
.sessa-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	max-height: 80vh;
	overflow-y: auto;
	background-color: var(--wp--preset--color--surface);
	border-radius: 0; /* DESIGN.md: radius 0 di default sulle superfici */
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
	padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
	transform: translateY(100%);
	transition: transform 300ms ease;
}
.sessa-sheet.is-open {
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.sessa-sheet-backdrop,
	.sessa-sheet {
		transition: none;
	}
}
.sessa-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.sessa-sheet__title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.sessa-sheet__close {
	display: flex;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--on-surface-variant);
	padding: 0.25rem;
	cursor: pointer;
}
.sessa-sheet__option {
	display: block;
	width: 100%;
	padding: 0.85rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: left;
	cursor: pointer;
}
.sessa-sheet__option:last-child {
	border-bottom: 0;
}
.sessa-sheet__option.is-selected {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ---------- Pagina categoria: barra risultati + ordinamento ---------- */

/* Il conteggio risultati e il select ordinamento vanno a capo sotto ~600px
   (il blocco core di WooCommerce li forza altrimenti su una riga sola,
   flexWrap:nowrap, che li schiaccia/sovrappone su mobile). */
.sessa-cat-toolbar {
	row-gap: 0.75rem;
}
/* Sotto i 600px l'ordinamento si fa dalla pillola "Ordina per" (bottom
   sheet): questa riga (conteggio risultati + select nativa) resterebbe solo
   un doppione, la select nativa comunque continua a esistere e a funzionare,
   e' solo nascosta alla vista. */
@media (max-width: 600px) {
	/* "body" nel selettore per vincere su "body .is-layout-flex" (core, senza
	   media query): stessa origine, una classe contro elemento+classe, a
	   parita' di tutto il resto vince chi ha piu' specificita'. */
	body .sessa-cat-toolbar {
		display: none;
	}
}

/* Conteggio risultati e select ordinamento in dimensione "label" (12px):
   sono testo di servizio, stesso trattamento dei toggle Filtri/Ordina per
   sopra di loro (che restano il riferimento visivo della pagina). Il conteg-
   gio resta in sentence case colore on-surface-variant come gli altri testi
   meta (topbar, footer); la select prende anche maiuscolo e letter-spacing
   come la pillola "Ordina per" che la rimpiazza su mobile. */
.sessa-cat-toolbar .wc-block-product-results-count {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--on-surface-variant);
}
.sessa-cat-toolbar .wc-block-catalog-sorting select.orderby {
	height: 36px;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Select "ordinamento": stesso trattamento "minimalist underline" dei
   select filtro, per non avere due stili di select nella stessa vista
   (il browser di default lo renderizza con bordo pieno nativo). */
.wc-block-catalog-sorting select.orderby {
	height: 44px;
	padding: 0 1.5rem 0 0;
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23073f7e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.25rem center;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 0;
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--primary);
	cursor: pointer;
}
.wc-block-catalog-sorting select.orderby:hover {
	border-bottom-color: var(--wp--preset--color--primary);
}
.wc-block-catalog-sorting select.orderby:focus-visible {
	outline: none;
	border-bottom-color: var(--wp--preset--color--primary);
	box-shadow: 0 1px 0 var(--wp--preset--color--primary);
}

/* ---------- Scheda prodotto: form aggiungi al carrello ---------- */

/* Il testo "X disponibili" generato di default da WooCommerce non e' nel
   mockup: nascosto via CSS, nessun hook PHP da mantenere/disattivare. */
.wp-block-woocommerce-add-to-cart-form p.stock {
	display: none;
}

/* ---------- Scheda prodotto: accordion Descrizione/Dettagli ---------- */

/* Ogni voce ha solo una linea superiore (l'ultima chiude anche in basso):
   effetto "lista con separatori" come da mockup, senza bordi doppi. */
.sessa-product-accordion .wp-block-woocommerce-accordion-item {
	border-top: 1px solid var(--wp--preset--color--outline-variant);
}

.sessa-product-accordion .accordion-item__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	border: none;
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
}

/* L'icona "+" nativa del blocco diventa una chevron in CSS (nessuna nuova
   icona/asset), ruotata a "^" quando il pannello e' aperto. */
.sessa-product-accordion .accordion-item__toggle-icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.sessa-product-accordion .accordion-item__toggle-icon svg {
	display: none;
}
.sessa-product-accordion .accordion-item__toggle-icon::before {
	content: "";
	display: block;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -0.3em;
}
.sessa-product-accordion [aria-expanded="true"] .accordion-item__toggle-icon {
	transform: rotate(180deg);
}

.sessa-product-accordion .accordion-content__wrapper {
	padding-bottom: 1.25rem;
	color: var(--wp--preset--color--on-surface-variant);
}

/* Tabella attributi (blocco Product Specifications = tab "Dettagli"):
   etichetta a sinistra, valore a destra, una riga per attributo impostato
   (gli attributi senza valore non vengono proprio generati da WooCommerce). */
.sessa-product-accordion .wp-block-product-specifications-item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	padding: 0.4rem 0;
}
.sessa-product-accordion .wp-block-product-specifications-item:first-child {
	border-top: none;
}
.sessa-product-accordion .wp-block-product-specifications-item__label,
.sessa-product-accordion .wp-block-product-specifications-item__value {
	font-weight: 400;
	color: var(--wp--preset--color--on-surface);
	border: none;
}
.sessa-product-accordion figure.wp-block-table {
	margin: 0;
}
.sessa-product-accordion .wp-block-product-specifications-item__value p {
	margin: 0;
}
.sessa-product-accordion table,
.sessa-product-accordion tbody {
	display: block;
	width: 100%;
}

/* Pietre multiple: la caratteristica n-esima e' stampata subito sotto la
   pietra n-esima (abbinamento posizionale, vedi frost_child_pair_stone_specs).
   La coppia si legge come un blocco unico: nessuna riga di separazione tra le
   due, etichetta della caratteristica rientrata e in colore secondario. */
.sessa-product-accordion .sessa-spec-pair__caratteristica {
	border-top: none;
	padding-top: 0;
}
.sessa-product-accordion .sessa-spec-pair__caratteristica .wp-block-product-specifications-item__label {
	padding-left: 1rem;
	color: var(--wp--preset--color--on-surface-variant);
}
/* Su mobile la tabella e' larga quanto lo schermo: il rientro di 1rem non si
   legge come gerarchia ma come riga storta rispetto a "Pietra Preziosa".
   Resta il colore secondario a distinguere la caratteristica dalla pietra.
   0.5em (non 0) e' il padding che ".wp-block-table td, th" da' a tutte le
   altre celle: azzerarlo sposterebbe "Caratteristiche" 7px piu' a sinistra
   delle altre etichette, cioe' di nuovo fuori asse. */
@media (max-width: 781px) {
	.sessa-product-accordion .sessa-spec-pair__caratteristica .wp-block-product-specifications-item__label {
		padding-left: 0.5em;
	}
}

/* ---------------------------------------------------------------------------
   Mega menu di catalogo (menu "Menu Sessa", post wp_navigation)

   Tre voci con sottomenu:
      .sessa-mega--sottocategorie  Gioielli   -> sottocategorie, 2 colonne
      .sessa-mega--marche          Orologi    -> marchi, 4-6 colonne (auto-fit)
     .sessa-mega--compatto        Neos Clock -> marchi, colonna singola
                                                (un solo marchio in catalogo)

   Le classi arrivano dall'attributo className dei blocchi navigation-submenu:
   sono generate da build-menu.php, non scritte a mano nel menu.
   --------------------------------------------------------------------------- */

@media (min-width: 1001px) {

	/* Pannello: centrato sotto la voce, a filo del bordo inferiore della
	   testata (24px = padding-bottom di .sessa-header). Il core lo posiziona a
	   top:100%, cioe' a meta' di quel padding: spostandolo in basso si aprirebbe
	   un varco in cui il mouse "esce" dalla voce e il pannello si chiude, quindi
	   il varco viene ricoperto da un ::before trasparente che fa da ponte. */
	.sessa-mega > .wp-block-navigation__submenu-container {
		top: calc(100% + 24px) !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
		z-index: 30;
		padding: 1.75rem 2rem !important;
		background-color: #efe6dd !important;
		color: var(--wp--preset--color--primary) !important;
		font-size: var(--wp--preset--font-size--small);
		border: 1px solid var(--wp--preset--color--outline-variant) !important;
		border-radius: 0;
		box-shadow: 0 14px 34px rgba(28, 27, 27, 0.14);
	}
	.sessa-mega > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -24px;
		height: 24px;
	}

	/* La sottolineatura della voce resta accesa anche mentre il mouse e' dentro
	   al pannello (li' non sta piu' sopra il link, quindi :hover sull'ancora da
	   solo non basta). */
	.sessa-mega:hover > .wp-block-navigation-item__content,
	.sessa-mega:focus-within > .wp-block-navigation-item__content {
		border-bottom-color: var(--wp--preset--color--primary);
	}

	/* Griglie */
	/* Marchi: auto-fit con minimo 170px per cella - 6 colonne sui desktop
	   larghi (~1300px di pannello), 4-5 sui laptop piu' stretti, senza mai
	   sforare (un repeat(6, ...) fisso richiederebbe ~1200px minimi).
	   Il pannello, piu' largo della voce che lo apre, non puo' restare
	   ancorato al <li> (su schermi ~1440px sporgerebbe dal viewport): li
	   static (serve !important: gli stili del blocco Navigation sono
	   stampati inline dal core DOPO questo file, a parita' di specificita'
	   vincerebbero loro) e il containing block diventa il container UL del
	   nav, centrato nella testata - il top del pannello resta identico
	   (calc(100% + 24px) della regola generica, a filo del bordo) e il
	   ponte ::before copre ancora il varco per l'hover. */
	.wp-block-navigation-item.sessa-mega--marche {
		position: static !important;
	}
	.sessa-mega--marche > .wp-block-navigation__submenu-container {
		left: 50% !important;
		transform: translateX(-50%);
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
		gap: 0.15rem 2.5rem !important;
		width: min(92vw, 1300px) !important;
	}
	.sessa-mega--sottocategorie > .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
		gap: 0.15rem 3.5rem !important;
		width: max-content !important;
	}
	/* Un solo marchio: la griglia a colonne lascerebbe il pannello mezzo vuoto. */
	.sessa-mega--compatto > .wp-block-navigation__submenu-container {
		display: block !important;
		width: max-content !important;
		max-width: min(92vw, 420px) !important;
	}

	/* Voci del pannello: il core le impagina come righe di un dropdown
	   (padding 0.5em 1em, larghezza piena); qui sono celle di una griglia. */
	.sessa-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block !important;
		width: 100%;
		padding: 0.4rem 0 !important;
		border-bottom: 1px solid transparent;
		text-transform: none;
		letter-spacing: 0;
		color: inherit;
	}
	.sessa-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.sessa-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--primary);
		border-bottom-color: var(--wp--preset--color--primary);
	}

	/* Sottomenu senza layout a griglia (es. Azienda, Aiuto): stesso trattamento
	   testuale dei sottomenu mega, altrimenti ereditano il maiuscolo del menu
	   principale e stonano rispetto agli altri dropdown. */
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		text-transform: none;
		letter-spacing: 0;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Nell'overlay mobile i 21 marchi degli Orologi diventerebbero una colonna
   lunghissima: due colonne dimezzano lo scroll. Il sottomenu resta chiuso
   finche' non si tocca la freccia (accordion gia' impostato piu' sopra). */
@media (max-width: 1000px) {
	.wp-block-navigation__responsive-container.is-menu-open .sessa-mega--marche .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1.5rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		text-transform: none;
		letter-spacing: 0;
	}
	/* Il margine negativo che allarga l'area di tocco della freccia (sopra) la
	   fa sconfinare anche nella prima voce del sottomenu appena aperto sotto:
	   distacco reale. Testo centrato: senza, e' "start" e un nome lungo che va
	   a capo (es. i marchi) resta sbandierato a sinistra invece che centrato
	   come il resto del menu. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		margin-top: 10px;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		text-align: center;
	}
}

/* Pulsante lente della ricerca header: stesso trattamento delle altre icone
   (navy, nessun bordo/sfondo), non il bottone squadrato di default del core. */
.sessa-header-row .wp-block-search__button {
	/* Il core da' al bottone line-height:0 e all'icona vertical-align:text-bottom:
	   la lente restava 8px piu' in alto delle altre icone dell'header. */
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0 8px;
	color: var(--wp--preset--color--primary);
}
.sessa-header-row .wp-block-search__button svg {
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
}
.sessa-header-row .wp-block-search__input {
	background: #fff;
}

/* Icona del carrello: il CSS del blocco mini-cart la dimensiona per conto suo
   (era 30px mentre le altre erano 22px), quindi non basta la regola generale
   .sessa-header-icons svg per allinearla alle altre. */
.sessa-header-icons .wc-block-mini-cart__icon {
	width: 32px;
	height: 32px;
}

/* ---------- Homepage: righe "Nuovi Arrivi" per categoria (blocco Product Collection) ----------
   Il className del blocco Product Template finisce sul <ul> che avvolge la
   lista, non sui singoli prodotti (quelli restano ".wc-block-product" fisso):
   lo stile della card va quindi applicato via discendenza, non sul blocco stesso. */

/* Intestazioni di riga "Gioielli"/"Orologi" + link "Vedi tutto": un'unica
   voce tipografica (Manrope maiuscolo tracciato, il linguaggio dell'UI
   funzionale) invece del serif editoriale accanto al caps sans — le due
   scritte condividono la riga e il contrasto serif/sans leggero (w300)
   leggeva come un errore di font, specie su mobile dove vanno a capo.
   Il serif resta sui titoli editoriali veri ("Nuovi Arrivi", card). */
.sessa-arrivals-row-header .wp-block-heading {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small) !important; /* la classe
	   generata da WP .has-label-font-size mette gia' !important, va superata */
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sessa-arrivals-row-header p {
	font-size: var(--wp--preset--font-size--small) !important;
}
.sessa-arrivals-row-header a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none; /* la riga sotto arriva gia' dal border-bottom del
	   paragrafo (vedi markup): l'underline di default del link ne disegnava
	   una seconda, leggermente sfalsata, subito sotto. */
}

.sessa-new-arrivals-row .wc-block-product {
	background-color: var(--wp--preset--color--surface);
	padding-bottom: 24px;
}
.sessa-new-arrivals-row .wc-block-product .wp-block-post-title {
	margin: 24px 1rem 8px;
}
/* Troncamento a 3 righe: va sul link interno (unico figlio del titolo),
   non sull'h4 — con un solo figlio-blocco che contiene tutto il testo,
   -webkit-line-clamp sull'h4 non taglia nulla (verificato in browser: il
   clamp funziona solo se applicato all'elemento che contiene direttamente
   il testo). */
.sessa-new-arrivals-row .wc-block-product .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sessa-new-arrivals-row .wc-block-product .wc-block-components-product-price {
	margin: 0 1rem;
}

/* Carosello nativo WooCommerce (displayLayout:"carousel" sul blocco Product
   Collection): la classe core .is-product-collection-layout-carousel gestisce
   scroll-snap/overflow ma non imposta display:flex sull'<ul> (probabilmente
   un buco del core, verificato leggendo il CSS compilato di WC 11.0.1) —
   senza flex le card resterebbero impilate in verticale invece che in riga. */
.sessa-new-arrivals-row.is-product-collection-layout-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25em;
}
.sessa-new-arrivals-row.is-product-collection-layout-carousel::-webkit-scrollbar {
	display: none;
}
/* 5 card piene invece di 4 + un pezzo della 5a: il core WooCommerce usa
   min-width:18% dai 1280px di container in su (~5.5 card), qui si forza
   il calcolo esatto per 5. Specificita' a 3 classi per vincere sulla regola
   core (2 classi) nello stesso @container. */
@container carousel (min-width: 960px) {
	.sessa-new-arrivals-row.is-product-collection-layout-carousel .wc-block-product {
		min-width: calc((100% - 4 * 1.25em) / 5);
	}
}

/* Frecce avanti/indietro: blocco nativo woocommerce/product-gallery-large-image-next-previous
   (riusato da WooCommerce anche per il carosello Product Collection), qui
   ridisegnato nello stile a contorno gia' usato per bottoni/filtri del tema
   invece del quadrato bianco pieno di default. */
.sessa-new-arrivals-grid .wc-block-next-previous-buttons {
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 16px;
}
/* Il className del blocco (Advanced > CSS Class) finisce sui due bottoni
   ".wc-block-next-previous-buttons__button", non sul loro contenitore: il
   blocco dichiara __experimentalSelector su quell'elemento (vedi block.json
   di woocommerce/product-gallery-large-image-next-previous). */
.sessa-carousel-nav {
	background: transparent;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--primary);
	transition: border-color 150ms ease, background-color 150ms ease;
}
.sessa-carousel-nav:hover:not([aria-disabled="true"]):not(:disabled) {
	background-color: var(--wp--preset--color--surface-container-low);
	border-color: var(--wp--preset--color--primary);
}
.sessa-carousel-nav[aria-disabled="true"],
.sessa-carousel-nav:disabled {
	border-color: var(--wp--preset--color--outline-variant);
	opacity: 0.4;
	cursor: default;
}

/* Cifre allineate in colonna nelle griglie prodotto (home + categoria):
   senza tabular-nums le cifre proporzionali di Manrope non si allineano
   tra un prezzo e l'altro nella stessa riga/griglia. */
.wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Badge "Sconto"/"Prodotto in offerta": di default bianco con bordo grigio
   scuro (#43454b), fuori palette. Stesso trattamento "pieno" gia' usato per
   la pagina corrente in paginazione (Royal Blue pieno, testo bianco). */
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--primary);
	border: none;
	border-radius: 4px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.05em;
	padding: 0.3em 0.75em;
}

/* Badge "Venduto" (Product Stock Indicator, nascosto di default se il
   prodotto e' disponibile - lo mostra solo WooCommerce stesso). In basso al
   centro dell'immagine: gli altri due angoli alti sono gia' occupati (cuore
   wishlist a sinistra, badge Sconto a destra) e il centro basso e' l'unico
   punto libero su tutte le griglie. Box Royal Blue del tema con testo oro
   (secondary-container), la coppia di colori richiesta dal cliente. */
/* Le varianti in-stock/low-stock mostrano di default il numero di
   disponibilita' ("X disponibili") come overlay centrato sull'immagine
   (WooCommerce posiziona i figli del blocco Product Image cosi' quando non
   hanno un align esplicito). Non richiesto dal mockup: nascoste. Il badge
   "Venduto" (--out-of-stock) resta, e' l'unico stile voluto. */
.wc-block-components-product-stock-indicator--in-stock,
.wc-block-components-product-stock-indicator--low-stock {
	display: none;
}

/* .flex-viewport (la foto grande, creata da FlexSlider) non e' posizionata:
   senza questo il badge spostato li' dentro si ancorerebbe al contenitore
   galleria, cioe' sotto la riga delle miniature. */
.woocommerce-product-gallery .flex-viewport {
	position: relative;
}

/* Stesso badge sulla galleria della scheda prodotto (.sessa-sold-badge,
   iniettato da functions.php): identico a quello delle griglie, cambia solo
   chi lo stampa. */
.wc-block-components-product-stock-indicator--out-of-stock,
.sessa-sold-badge {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary-container);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: normal;
	padding: 0.3em 0.75em;
}

/* Badge "In offerta!" della scheda prodotto (markup classico WooCommerce,
   .onsale): di default un cerchio verde oliva (#958e09) con angolo negativo,
   estraneo alla palette. Stesso trattamento pieno del badge sopra. */
/* ".woocommerce span.onsale" (woocommerce-blocktheme.css) e' piu' specifica
   di ".onsale" da sola: senza uguagliare il selettore, background/radius
   restano quelli di default anche con le proprieta' sotto dichiarate. */
.woocommerce span.onsale,
.onsale {
	min-height: auto !important;
	min-width: auto !important;
	height: auto;
	width: auto;
	position: absolute;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	margin: 0 !important;
	border-radius: 4px !important;
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: normal;
	padding: 0.3em 0.75em;
}

/* ---------- Pagina categoria: griglia prodotti (.sessa-cat-row) ---------- */

/* Titolo max 3 righe, ellissi oltre: sul link interno del titolo, non
   sull'h2 che lo contiene — con un solo figlio-blocco che avvolge tutto
   il testo, -webkit-line-clamp sul contenitore esterno non taglia nulla
   (stesso comportamento verificato per il carosello Nuovi Arrivi). */
.sessa-cat-row .wc-block-product .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Scheda prodotto ---------- */

/* Prodotti correlati su mobile/tablet: due per riga (immagini ~166px) come
   la griglia categoria, invece di un prodotto per riga a piena larghezza.
   La collection "correlati" non ha le classi responsive di WooCommerce
   (shrinkColumns:false nel template) e resta flex a colonna singola; si
   replica qui la grid a 2 colonne che WC applica alla griglia categoria
   sotto i 784px. minmax(0,1fr) evita overflow con titoli lunghi. */
@media (max-width: 784px) {
	.single-product .wp-block-woocommerce-product-collection .is-flex-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* WooCommerce da 600px in su fissa "width: calc(20% - 1em)" sui li
	   (selettore a 4 classi): dentro la grid quel 20% si risolve sulla
	   colonna e li collassa a ~45px. Serve !important per sovrastarlo -
	   stessa pratica gia' usata altrove in questo file. */
	.single-product .wp-block-woocommerce-product-collection .is-flex-container > li {
		width: 100% !important;
	}
	/* Numero di correlati dispari (es. 5): l'ultimo resta da solo in riga
	   con meta' griglia vuota a fianco. Occupa entrambe le colonne e si
	   centra alla larghezza di una singola card, invece di restare
	   ancorato a sinistra col buco a destra. max-width vince comunque
	   sul width:100% qui sopra (regola del box model, non di cascata). */
	.single-product .wp-block-woocommerce-product-collection .is-flex-container > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 50%;
		margin: 0 auto;
	}
}

/* Box "Nota" sotto le fotografie (shortcode [sessa_product_note], vuoto =
   niente nel markup, non serve nascondere nulla via CSS). Bordo sottile
   uniforme, nessun accento laterale: e' un'informazione di servizio del
   negozio, non un CTA - la label maiuscola Royal Blue sotto basta a
   distinguerlo dal testo circostante senza bisogno di un bordo colorato. */
/* Selettore raddoppiato: il box e' ultimo figlio di un contenitore flow e i
   global styles del core azzerano i margini con ":root :where(.is-layout-flow)
   > :last-child" (specificita' 0,2,0), che batterebbe la classe singola. */
.sessa-product-note.sessa-product-note {
	margin-top: 16px;
	/* Su mobile le due colonne si impilano e il titolo del prodotto finisce
	   subito sotto il box: senza questo margine i due blocchi si toccano. */
	margin-bottom: 24px;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 4px;
	background: var(--wp--preset--color--surface-container-low);
}
.sessa-product-note__label {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.sessa-product-note__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--on-surface-variant);
}

/* "Aggiungi al carrello": stesso trattamento outline leggero di "Aggiungi ai
   preferiti"/"Applica filtro" invece del pieno che il bottone globale del
   tema (elements.button) applicherebbe di default. */
.sessa-add-to-cart-outline .single_add_to_cart_button {
	/* !important solo su display: ".woocommerce div.product form.cart
	   button.single_add_to_cart_button" (woocommerce-blocktheme.css) ha
	   specificita' piu' alta (4 classi + 3 elementi) e forza inline-block,
	   altrimenti align-items/justify-content/gap sotto non hanno effetto. */
	display: inline-flex !important;
	height: 44px;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0 1.25rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	color: var(--wp--preset--color--primary);
	transition: background-color 150ms ease;
}
.sessa-add-to-cart-outline .single_add_to_cart_button::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073f7e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.sessa-add-to-cart-outline .single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--surface-container-low);
	color: var(--wp--preset--color--primary);
}

/* Colonna info prodotto (titolo/prezzo/riga carrello/accordion): il
   blockGap di default sulla colonna e' 0 (il gap impostato sul wp:columns
   padre controlla solo il gutter orizzontale tra le due colonne, non si
   propaga come margine verticale ai figli), quindi gli elementi restavano
   incollati. Respiro esplicito invece dell'ereditarieta' che qui non arriva. */
.sessa-product-info > * + * {
	margin-top: var(--wp--preset--spacing--x-small);
}

/* Riga "Aggiungi al carrello" + cuoricino preferiti: stesso allineamento
   verticale (44px) del bottone outline accanto. */
.sessa-add-to-cart-row {
	align-items: center;
	gap: 0.75rem;
}
/* Il form ha margini default WooCommerce (12px sopra, 40px sotto) che
   allargano la sua colonna a 96px: il cuoricino (44px), centrato in quello
   spazio piu' grande dal align-items sopra, finisce 14px piu' in basso del
   bottone. Azzerando i margini la colonna si riduce a 44px = altezza del
   cuoricino, i due si allineano naturalmente senza offset arbitrari. */
.sessa-add-to-cart-row .wc-block-add-to-cart-form form.cart {
	margin: 0 !important; /* una regola WooCommerce piu' specifica sul solo
	   margin-bottom (40px) sopravviveva al margin shorthand sopra */
}

/* ---------- Cuore preferiti YITH (rimpiazza l'icona statica rimossa) ----------
   Render "php-templates" (server-side) impostato da WP-CLI: il default
   "react-components" lascia i blocchi vuoti perche' l'endpoint REST delle
   liste risponde 401 agli ospiti senza sessione.
   In tutti gli stati (add / added / exists) il bottone deve restare SOLO
   icona: i testi di feedback ("Articolo aggiunto!", "Vedi la lista") si
   annullano con font-size:0 sui link (gli SVG hanno dimensione esplicita),
   lo span.feedback aggiuntivo si nasconde del tutto.
   !important su fondo/bordo/radius: lo stile "button_custom" di YITH dipinge
   il bottone #333 radius 16 con selettori piu' specifici (stesso rimedio
   gia' usato per .onsale contro woocommerce-blocktheme.css). */

/* Scheda prodotto: YITH appende .yith-wcwl-add-to-wishlist subito dopo il
   blocco add-to-cart-form, dentro la flex row — eredita il posto e lo stile
   44px outline dell'ex icona statica. */
.sessa-add-to-cart-row .yith-wcwl-add-to-wishlist {
	flex-shrink: 0;
}
.sessa-add-to-cart-row .yith-wcwl-add-to-wishlist a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--primary) !important;
	border-radius: 4px !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	font-size: 0;
	line-height: 1;
	transition: background-color 150ms ease;
}
.sessa-add-to-cart-row .yith-wcwl-add-to-wishlist a:hover {
	background-color: var(--wp--preset--color--surface-container-low) !important;
}
.sessa-add-to-cart-row .yith-wcwl-add-to-wishlist a svg {
	display: block; /* vedi nota chip griglia: elimina il residuo di linea */
	width: 20px;
	height: 20px;
	margin: 0 auto;
	flex-shrink: 0;
	/* fill="currentColor" dell'svg (cuore pieno quando gia' in wishlist) non
	   eredita il blu dell'<a>: un CSS di base di YITH gli assegna color:#000
	   con specificita' maggiore. Qui si sovrascrive esplicitamente. */
	color: var(--wp--preset--color--primary) !important;
}
/* YITH qui non stampa ne' svg ne' img (lo <span> resta vuoto: icon set non
   configurato lato plugin), il bottone risultava un rettangolo senza cuore.
   Stesso disegno del cuore statico in header, ridipinto via mask cosi' segue
   il colore primary come le altre icone. */
.sessa-add-to-cart-row .yith-wcwl-add-to-wishlist a.add_to_wishlist::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.sessa-add-to-cart-row .yith-wcwl-add-to-wishlist .feedback {
	display: none;
}

/* Griglie catalogo + Nuovi Arrivi: cuore in overlay sull'immagine, angolo
   alto-SINISTRA (il badge sconto occupa l'alto-destra). Il <li> diventa
   riferimento di posizionamento, il chip segue il linguaggio delle frecce
   carosello (.sessa-carousel-nav): cerchio, bordo Outline Variant, icona
   Royal Blue, hover con superficie tenue + bordo primario. */
.wc-block-product {
	position: relative;
}
.wc-block-product > .yith-wcwl-add-to-wishlist {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
}
.wc-block-product > .yith-wcwl-add-to-wishlist a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50% !important;
	border: 1px solid var(--wp--preset--color--outline-variant) !important;
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--primary) !important;
	font-size: 0;
	line-height: 1;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.wc-block-product > .yith-wcwl-add-to-wishlist a:hover {
	background-color: var(--wp--preset--color--surface-container-low) !important;
	border-color: var(--wp--preset--color--primary) !important;
}
.wc-block-product > .yith-wcwl-add-to-wishlist a svg {
	display: block; /* il default YITH inline + vertical-align:bottom */
	width: 15px;    /* trascina un residuo di linea sotto l'icona  */
	height: 15px;   /* spostando il cuore di ~2px dal centro       */
	margin: 0 !important; /* YITH imposta margin-right:5px con un selettore
	   piu' specifico del nostro "margin:0 auto": l'auto a sinistra assorbiva
	   tutto lo spazio libero e il cuore restava spostato a destra. Con
	   margin:0 il centraggio lo fa il flex del bottone (justify-content). */
	flex-shrink: 0;
	/* fill="currentColor" del cuore pieno (gia' in wishlist) non eredita il
	   blu dell'<a>: un CSS di base di YITH gli assegna color:#000 con
	   specificita' maggiore. Qui si sovrascrive esplicitamente. */
	color: var(--wp--preset--color--primary) !important;
}
/* Nel blocco "Prodotti Correlati" (single-product) il refresh AJAX dei
   fragment di YITH non sempre arriva a sostituire lo <span> vuoto con
   l'svg (nella griglia categoria invece arriva quasi sempre): risultato,
   cerchio vuoto senza cuore. :has() lo rileva e disegna lo stesso cuore
   via mask solo quando l'svg manca davvero, cosi' non raddoppia quando
   YITH lo inietta correttamente. */
.wc-block-product > .yith-wcwl-add-to-wishlist a.add_to_wishlist:not(:has(svg))::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.wc-block-product > .yith-wcwl-add-to-wishlist .feedback {
	display: none;
}
/* Loader AJAX di YITH dentro il chip: non farlo esplodere oltre il cerchio. */
.wc-block-product > .yith-wcwl-add-to-wishlist .blockUI,
.wc-block-product > .yith-wcwl-add-to-wishlist img.blockUI {
	max-width: 100%;
	max-height: 100%;
}

/* Thumbnails galleria immagini: la lista generata da FlexSlider
   (.flex-control-thumbs) di default e' priva di gap/radius/hover, sembra
   incollata sotto l'immagine principale. */
.woocommerce-product-gallery {
	margin-bottom: 0;
}
/* Carosello 4 alla volta invece di griglia che va a capo: scroll orizzontale
   con scroll-snap, ogni <li> larga esattamente 1/4 dello strip (calc toglie
   i 3 gap da 8px tra i 4 elementi visibili). Le frecce (JS in functions.php,
   frost_child_gallery_carousel_script) scrollano di una pagina alla volta;
   se le immagini sono 4 o meno lo script le nasconde, niente overflow. */
.sessa-gallery-thumbs-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex !important;
	flex: 1;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: 8px;
	margin-top: 0;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}
.woocommerce-product-gallery .flex-control-thumbs li {
	display: block;
	flex: 0 0 calc(25% - 6px);
	min-width: 0;
	scroll-snap-align: start;
}
.woocommerce-product-gallery .flex-control-thumbs img {
	/* Il tema imposta width/height="100" via attributo HTML (e un onload
	   inline li aggiorna al naturalWidth/Height): un attributo presentazionale
	   dovrebbe perdere contro qualunque regola CSS, ma qui la larghezza
	   restava quella del contenuto invece di riempire la colonna della
	   griglia. min-width:0 sulla li (sopra) piu' width qui vincono. */
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--outline-variant);
	opacity: 1 !important; /* WooCommerce core (woocommerce.css) mette le miniature
	   non attive a opacity:0.5 con un selettore piu' specifico (.woocommerce
	   div.product div.images .flex-control-thumbs li img) che altrimenti vince */
	cursor: pointer;
	transition: border-color 150ms ease;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--primary);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--wp--preset--color--primary);
	border-width: 2px;
}

/* ---------- Pagina categoria: paginazione ---------- */

.sessa-cat-pagination {
	gap: 0.5rem;
	margin-top: 3rem;
}
.sessa-cat-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.5rem;
	border-radius: 4px;
	color: var(--wp--preset--color--on-surface-variant);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}
.sessa-cat-pagination .page-numbers.dots {
	color: var(--wp--preset--color--outline);
}
.sessa-cat-pagination a.page-numbers:hover {
	background-color: var(--wp--preset--color--surface-container-low);
	color: var(--wp--preset--color--primary);
}
.sessa-cat-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base, #fff);
	font-weight: 700;
}
.sessa-cat-pagination .wp-block-query-pagination-previous,
.sessa-cat-pagination .wp-block-query-pagination-next {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}
.sessa-cat-pagination .wp-block-query-pagination-previous:hover,
.sessa-cat-pagination .wp-block-query-pagination-next:hover {
	text-decoration: underline;
}

/* ---------- Footer: link elenco ---------- */

/* Sottolineatura solo su hover/focus, mai di riposo: stessa convenzione
   della nav header e dei link "Vedi tutto" (il default del blocco Lista
   li lasciava sottolineati sempre, unico punto del sito a farlo). */
footer .wp-block-list a {
	text-decoration: none;
	transition: color 150ms ease;
}
footer .wp-block-list a:hover,
footer .wp-block-list a:focus-visible {
	text-decoration: underline;
	color: var(--wp--preset--color--primary);
}

/* Icone social: cerchio a contorno sottile invece dei loghi pieni di
   default del blocco core, stesso tratto (stroke 1.5-1.6, round) gia'
   usato per le icone dell'header (ricerca, wishlist, account). */
.sessa-footer-social {
	display: flex;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}
.sessa-footer-social__dot {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 1.4px solid var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary);
	transition: background-color 150ms ease, color 150ms ease;
}
.sessa-footer-social__dot svg {
	width: 13px;
	height: 13px;
}
.sessa-footer-social__dot:hover,
.sessa-footer-social__dot:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* Logo footer: sotto la soglia di stack di wp:columns (mobile) sostituisce
   il file con la versione "grande" richiesta dal cliente. width/height
   dell'attributo HTML restano quelli del file originale (logo_sessa.png):
   senza il reset qui sotto il nuovo file, con proporzioni diverse, viene
   schiacciato in quelle misure. */
@media (max-width: 781px) {
	footer .wp-image-19415 {
		content: url("https://www.gioielleriasessamario.com/wp-content/uploads/2026/08/Logo_Sessa_Grande.png.webp");
		width: auto;
		height: auto;
		max-width: 100%;
	}
}

/* Paginatore dell' elenco categoria prodotti */
.wp-block-query-pagination-next{

	margin-left: 9px;
}

/* Scheda prodotto: la sezione "Dettagli" (tabella specifiche/attributi) non
   ha senso per gli orologi (attributi diversi, gia' visibili altrove) -
   nascosta via classe stabile sul blocco + classe categoria che WooCommerce
   aggiunge al body dei prodotti "Orologi" (comprende anche Lorenz Outlet,
   che ha sempre anche quella categoria). */
body.product_cat-orologi .sessa-accordion-dettagli {
	display: none;
}
/* Carrello e "Ordine ricevuto": i template a blocchi di WooCommerce hanno il
   <main> senza padding, il contenuto toccava header e footer. Il pagamento no:
   ha l'header ridotto di WooCommerce, gia' distanziato. */
body.woocommerce-cart main.wp-block-group,
body.woocommerce-order-received main.wp-block-group {
	padding-top: var(--wp--preset--spacing--medium);
	padding-bottom: var(--wp--preset--spacing--large);
}

/* "Ordine ricevuto": il riquadro della nota cliente chiude i totali ed era
   attaccato ai titoli degli indirizzi. */
.wc-block-order-confirmation-address-wrapper {
	margin-top: var(--wp--preset--spacing--medium);
}