/**
 * Vimala — layout.css
 * Barra annuncio (solo nelle pagine dello shop), header, menu (con sottomenu), menu mobile, footer, template generici.
 *
 * Approccio header (scelta documentata):
 * - Il wrapper del template part "header" (figlio diretto di .wp-site-blocks) è position: sticky; top: 0.
 *   La barra annuncio resta nel flusso normale sopra e scorre via; l'header si "aggancia" in alto
 *   appena la barra è uscita. Nessuna misura in JS, nessun wrapper fisso.
 * - Header sempre solido (avorio), chiuso sopra e sotto dal bordo block print bordeaux.
 *   Tre colonne: logo · menu dell'associazione e dello shop · ricerca, account, carrello e «Dona ora».
 * - Sotto i 1180px il menu passa nell'overlay del blocco Navigation (hamburger).
 * - Niente transform/filter/backdrop-filter sul contenitore: romperebbero l'overlay fixed del menu mobile.
 * - Sticky richiede che nessun antenato abbia overflow hidden/auto (base.css usa overflow-x: clip: ok).
 *
 * Variabili esposte (usarle negli altri CSS, es. colonna sticky del prodotto):
 *   --vimala-header-h       altezza della riga di navigazione (misurata da vimala.js)
 *   --vimala-bordo-h        altezza di ciascuno dei due bordi block print (sopra e sotto la barra)
 *   --vimala-adminbar-h     offset della admin bar (0 se assente)
 *   --vimala-header-offset  = navigazione + due bordi (sopra e sotto) + admin bar
 */

:root {
	--vimala-header-h: 72px;
	--vimala-adminbar-h: 0px;
	--vimala-bordo-h: 16px; /* bordo block print, parte integrante della barra in alto */
	--vimala-header-offset: calc(var(--vimala-header-h) + 2 * var(--vimala-bordo-h) + var(--vimala-adminbar-h));
	--vimala-gutter: var(--wp--preset--spacing--40);
	--vimala-header-transition: 0.3s ease;
}

/* Ricalcolato su body: su :root userebbe la admin bar di :root (0) anche quando body la ridefinisce. */
body {
	--vimala-header-offset: calc(var(--vimala-header-h) + 2 * var(--vimala-bordo-h) + var(--vimala-adminbar-h));
}

body.admin-bar {
	--vimala-adminbar-h: 32px;
}

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

/* Sotto 600px la admin bar non è fissa: l'header si aggancia a top 0. */
@media (max-width: 600px) {
	body.admin-bar {
		--vimala-adminbar-h: 0px;
	}
}

@media (max-width: 781px) {
	:root {
		--vimala-header-h: 56px;
		--vimala-gutter: var(--wp--preset--spacing--30);
	}
}

/* Le parti del sito si toccano: lo spazio verticale lo gestiscono i main con padding. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ */
/* Barra annuncio                                                      */
/* ------------------------------------------------------------------ */

.vimala-announcement {
	padding: 9px var(--vimala-gutter);
	position: relative;
	z-index: 101;
}

.vimala-announcement .vimala-announcement__text {
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bianco);
}

.vimala-announcement a {
	color: inherit;
	text-underline-offset: 3px;
}

.vimala-announcement a:hover,
.vimala-announcement a:focus-visible {
	color: var(--wp--preset--color--bianco);
	text-decoration-color: var(--wp--preset--color--zafferano);
}

/* ------------------------------------------------------------------ */
/* Header: contenitore sticky                                          */
/* ------------------------------------------------------------------ */

.wp-site-blocks > :is(header.wp-block-template-part, .wp-block-template-part:has(> .vimala-header)) {
	position: sticky;
	top: var(--vimala-adminbar-h);
	z-index: 1001; /* sopra il velo di caricamento di WooCommerce (blockUI, z-index 1000) */
	background-color: var(--wp--preset--color--base);
	transition:
		background-color var(--vimala-header-transition),
		color var(--vimala-header-transition);
}

/* Bordo block print: chiude la barra in alto sopra (::before, specchiato) e sotto (::after),
   nel flusso e sullo stesso sfondo, quindi segue lo sticky ed è presente in tutte le pagine. */
.wp-site-blocks > :is(header.wp-block-template-part, .wp-block-template-part:has(> .vimala-header))::before,
.wp-site-blocks > :is(header.wp-block-template-part, .wp-block-template-part:has(> .vimala-header))::after {
	content: "";
	display: block;
	height: var(--vimala-bordo-h);
	background: url("../images/brand/bordo-block-print-bordeaux.svg") repeat-x left bottom / auto var(--vimala-bordo-h);
	pointer-events: none;
}

.wp-site-blocks > :is(header.wp-block-template-part, .wp-block-template-part:has(> .vimala-header))::before {
	transform: scaleY(-1); /* archetti verso il basso, puntini verso l'alto: speculare a quello sotto */
}

.vimala-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--vimala-header-h);
	padding: 0 var(--vimala-gutter);
	color: var(--wp--preset--color--ink);
	transition: color var(--vimala-header-transition);
}

.vimala-header > *,
.vimala-header > * > * {
	margin-block: 0 !important;
}

.vimala-header__left {
	justify-self: start;
	min-width: 0;
}

.vimala-header__center {
	justify-self: center;
}

.vimala-header__right {
	justify-self: end;
	gap: var(--wp--preset--spacing--20);
}

.vimala-header a,
.vimala-header button,
.vimala-header .wp-block-navigation-item__content {
	color: inherit;
}

/* Logo */
.vimala-header .wp-block-site-logo {
	line-height: 0;
}

/* Logo orizzontale 2027 (~4:1). Il manuale fissa il minimo a 140px di larghezza: mai sotto. */
.vimala-header .wp-block-site-logo img {
	width: 170px;
	max-width: none;
	height: auto;
}

/* Tablet orizzontale: tre voci di menu + logo + tre icone devono entrare da 782px in su. */
@media (min-width: 782px) and (max-width: 1023px) {
	.vimala-header .wp-block-site-logo img {
		width: 150px;
	}

	/* specificità più alta: la regola generale della navigazione viene dopo */
	.vimala-header .vimala-nav.wp-block-navigation,
	.vimala-header .vimala-nav .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 781px) {
	.vimala-header .wp-block-site-logo img {
		width: 140px;
	}
}

/* Navigazione desktop: etichette piccole maiuscole, inchiostro, hover bordeaux */
.vimala-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	gap: var(--wp--preset--spacing--40);
}

.vimala-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.vimala-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.vimala-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--bordeaux);
}

.vimala-header .wp-block-navigation__responsive-container:not(.is-menu-open) .vimala-nav-mobile-only {
	display: none;
}

/* Icone a destra: tap target ≥ 44px, nessuno sfondo */
.vimala-header__right .wp-block-search__button,
.vimala-header__right :is(.wp-block-woocommerce-customer-account, .vimala-header__account) a,
.vimala-header__right .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 !important;
	margin: 0;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
}

.vimala-header__right svg {
	fill: currentColor;
	width: 22px;
	height: 22px;
}

.vimala-header__right .wc-block-mini-cart__button:hover,
.vimala-header__right :is(.wp-block-woocommerce-customer-account, .vimala-header__account) a:hover,
.vimala-header__right .wp-block-search__button:hover {
	color: var(--wp--preset--color--bordeaux) !important;
}

.vimala-header__right .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--bordeaux);
	color: var(--wp--preset--color--bianco);
	border: 0;
	font-size: 10px;
	font-weight: 600;
}

/* Il prezzo accanto al carrello non serve nell'header sobrio */
.vimala-header__right .wc-block-mini-cart__amount {
	display: none;
}

/* Ricerca espandibile */
.vimala-header__search {
	margin: 0;
}

.vimala-header__search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	background: transparent;
}

.vimala-header__search .wp-block-search__input {
	min-height: 40px;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 2px;
	background: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	.vimala-header__search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) {
		position: absolute;
		left: var(--vimala-gutter);
		right: var(--vimala-gutter);
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--ink);
	}

	.vimala-header__search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		width: 100% !important;
		max-width: none !important;
	}

	.vimala-header__search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		flex: 1;
	}
}

/* Su schermi molto stretti l'account è nel menu (voce "Il mio account").
   A 375px: 16px + 44 (menu) + 8 + 140 (logo) + 8 + 88 (ricerca + carrello) + 16px = 320px: entra. */
@media (max-width: 480px) {
	.vimala-header__account,
	.vimala-header__right .wp-block-woocommerce-customer-account {
		display: none !important;
	}

	.vimala-header {
		gap: var(--wp--preset--spacing--20);
	}

	.vimala-header__right {
		gap: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Header del sito unificato: logo a sinistra, menu al centro, azioni a destra */
/* ------------------------------------------------------------------ */

.vimala-header__center {
	justify-self: stretch;
	min-width: 0;
}

/* Voci di primo livello: maiuscolo piccolo come nello shop, ma meno spaziato per farne stare sei */
.vimala-header .vimala-nav.wp-block-navigation {
	gap: clamp(14px, 1.6vw, 28px);
	letter-spacing: 0.12em;
}

.vimala-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.vimala-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bordeaux);
}

/* Sottomenu: riquadro bianco con filetto bordeaux in alto, voci in tondo */
.vimala-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 250px !important;
	padding: 10px !important;
	border: 0 !important;
	border-top: 3px solid var(--wp--preset--color--bordeaux) !important;
	border-radius: 0 0 6px 6px;
	background: var(--wp--preset--color--bianco) !important;
	box-shadow: 0 14px 32px color-mix(in srgb, var(--wp--preset--color--blu-notte) 16%, transparent);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.vimala-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 0;
	padding: 9px 12px !important;
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.vimala-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.vimala-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--carta);
	color: var(--wp--preset--color--blu-notte);
}

.vimala-header .wp-block-navigation-submenu__toggle {
	color: inherit;
}

/* «Dona ora»: pulsante bordeaux, unica nota di colore pieno nella barra */
.vimala-header__dona {
	margin: 0 0 0 var(--wp--preset--spacing--20) !important;
}

.vimala-header__dona .wp-block-button__link {
	padding: 12px 18px !important;
	background: var(--wp--preset--color--bordeaux) !important;
	color: var(--wp--preset--color--bianco) !important;
	font-size: var(--wp--preset--font-size--x-small);
	white-space: nowrap;
}

.vimala-header__dona .wp-block-button__link:hover,
.vimala-header__dona .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--bordeaux) 82%, var(--wp--preset--color--ink)) !important;
}

/* Sotto i 1180px: menu nell'overlay, hamburger a destra accanto alle icone */
@media (max-width: 1179px) {
	.vimala-header__center {
		justify-self: end;
		order: 3;
	}

	.vimala-header {
		grid-template-columns: auto 1fr auto;
	}

	.vimala-header__right {
		justify-self: end;
	}
}

@media (max-width: 600px) {
	/* Sui telefoni «Dona ora» è nel menu (voce Come aiutarci) e nel riquadro in fondo a ogni pagina */
	.vimala-header .vimala-header__dona.wp-block-buttons {
		display: none !important;
	}
}

/* Overlay mobile: sottomenu sempre aperti e rientrati, voci di secondo livello in tondo */
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 6px 0 0 14px !important;
	border: 0 !important;
	box-shadow: none;
	background: transparent !important;
	gap: 2px;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	padding: 10px 0 !important; /* voci alte almeno 40px: si toccano bene con il pollice */
	color: var(--wp--preset--color--ink) !important;
	background: transparent;
}

/* ------------------------------------------------------------------ */
/* Menu mobile (overlay del blocco Navigation)                          */
/* Il blocco core mostra l'hamburger sotto 600px: lo estendiamo a 781px */
/* ------------------------------------------------------------------ */

.vimala-header .wp-block-navigation__responsive-container-open,
.vimala-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	color: inherit;
}

@media (min-width: 600px) and (max-width: 1179px) {
	.vimala-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vimala-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: var(--wp--preset--spacing--40) var(--vimala-gutter);
	text-shadow: none;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
	align-items: flex-start;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
	color: var(--wp--preset--color--blu-notte) !important;
	text-shadow: none;
	opacity: 1;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--bordeaux) !important;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .vimala-nav-mobile-only {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linea);
	width: 100%;
}

.vimala-header .wp-block-navigation__responsive-container.is-menu-open .vimala-nav-mobile-only .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink) !important;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

/* Footer blu notte (come la newsletter 2027): testo bianco, logo negativo a colori,
   bordo block print zafferano in alto come «chiusura» della pagina. */
.vimala-footer {
	position: relative;
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--bianco);
}

.vimala-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 16px;
	background-image: url("../images/brand/bordo-block-print-zafferano.svg");
	background-repeat: repeat-x;
	background-position: left top;
	background-size: auto 16px;
	transform: scaleY(-1); /* specchiato: archetti in alto, puntini più piccoli verso l'interno del footer */
	pointer-events: none;
}

.vimala-footer__top {
	gap: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	margin-bottom: 0;
}

/* I titoli del tema sono blu notte: sul footer blu tornano bianchi. */
.vimala-footer :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--bianco);
}

.vimala-footer__contact h2 {
	margin-top: 0;
	line-height: 1.1;
}

.vimala-footer__contact p {
	max-width: 36ch;
}

.vimala-footer .vimala-footer__intro {
	color: color-mix(in srgb, var(--wp--preset--color--bianco) 85%, var(--wp--preset--color--blu-notte));
}

.vimala-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.vimala-footer__cols > * {
	margin-block: 0 !important;
}

.vimala-footer .vimala-footer__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bianco);
}

.vimala-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.vimala-footer__links li {
	margin: 0;
}

.vimala-footer a {
	color: var(--wp--preset--color--bianco);
	text-decoration: none;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.vimala-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* I link restano bianchi: al passaggio compare la sottolineatura zafferano (piccolo accento su blu). */
.vimala-footer a:hover,
.vimala-footer a:focus-visible {
	color: var(--wp--preset--color--bianco);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--zafferano);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.vimala-footer :focus-visible {
	outline-color: var(--wp--preset--color--zafferano);
}

/* «Scrivici per ricevere le novità»: bianco, sottolineato; hover gestito in base.css (zafferano). */
.vimala-footer .is-style-vimala-link .wp-block-button__link {
	color: var(--wp--preset--color--bianco);
	text-decoration: underline;
}

.vimala-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--bianco) 22%, transparent);
	padding-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-top: 0 !important;
}

.vimala-footer__bottom > * {
	margin: 0 !important;
}

.vimala-footer__bottom p {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--bianco) 85%, var(--wp--preset--color--blu-notte));
}

/* Link in fondo al footer: area di tocco di almeno 40px in altezza sui telefoni */
.vimala-footer__legal a,
.vimala-footer__copy a {
	display: inline-block;
	padding-block: 12px;
}

.vimala-footer__legal a + a {
	margin-left: var(--wp--preset--spacing--40);
}

/* Logo negativo a colori (pattern vimala/footer-logo). Minimo 140px dal manuale. */
.vimala-footer .vimala-footer__logo {
	margin: 0;
	line-height: 0;
}

.vimala-footer .vimala-footer__logo a {
	display: inline-block;
}

.vimala-footer .vimala-footer__logo img {
	width: 180px;
	max-width: none;
	height: auto;
}

@media (max-width: 559px) {
	.vimala-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.vimala-footer {
		padding-top: var(--wp--preset--spacing--60);
	}

	.vimala-footer__top {
		gap: var(--wp--preset--spacing--50);
	}

	/* Su tablet le tre colonne di link restano affiancate (le liste sono corte) */
	.vimala-footer__cols {
		row-gap: var(--wp--preset--spacing--50);
	}

	.vimala-footer__links a {
		min-height: 44px;
	}

	.vimala-footer__bottom {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

/* ------------------------------------------------------------------ */
/* Template generici (index, page, single, archive, search, 404)        */
/* ------------------------------------------------------------------ */

.vimala-main .wp-block-post-title,
.vimala-main .wp-block-query-title,
.vimala-main > h1 {
	margin-top: 0;
	line-height: 1.05;
	font-weight: 600;
}

/* Stile dell'occhiello in base.css (Inter 700, 0.16em, bordeaux): qui solo lo spazio. */
.vimala-main .vimala-eyebrow {
	margin-bottom: var(--wp--preset--spacing--20);
}

.vimala-post-list .wp-block-post-template {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
}

.vimala-post-item {
	padding: var(--wp--preset--spacing--50) 0;
	border-top: 1px solid var(--wp--preset--color--linea);
}

.vimala-post-item .wp-block-post-title {
	margin: var(--wp--preset--spacing--10) 0 var(--wp--preset--spacing--30);
}

.vimala-post-item .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.vimala-post-item .wp-block-post-title a:hover {
	color: var(--wp--preset--color--bordeaux);
}

.vimala-post-item .wp-block-post-excerpt__more-link {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-underline-offset: 6px;
}

.vimala-pagination {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--30);
}

.vimala-pagination a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.vimala-pagination .current {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 6px;
}

.vimala-post-nav {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linea);
	font-size: var(--wp--preset--font-size--small);
}

.vimala-post-terms {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vimala-search-form {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

@media (prefers-reduced-motion: reduce) {
	.vimala-header,
	.vimala-header .wp-block-site-logo img,
	.wp-site-blocks > :is(header.wp-block-template-part, .wp-block-template-part:has(> .vimala-header)) {
		transition: none;
	}
}

/* Dettaglio d'ispirazione indiana: grande paisley in filigrana nell'angolo del footer blu notte */
.vimala-footer {
	overflow: hidden;
}

.vimala-footer::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 300px;
	height: 410px;
	background: url("../images/ornamenti/paisley-bianco.svg") center / contain no-repeat;
	opacity: .07;
	transform: rotate(-18deg);
	pointer-events: none;
}

.vimala-footer > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 781px) {
	.vimala-footer::after {
		width: 200px;
		height: 274px;
		right: -50px;
		bottom: -40px;
	}
}

/* ================================================================== */
/* Dettagli d'ispirazione indiana – 2                                  */
/* Ornamenti originali in assets/images/ornamenti/ (colori 2027).      */
/* Solo CSS: si tolgono cancellando questa sezione.                    */
/* ================================================================== */

/* --- Barra annuncio: trama jaali (grata moghul) bianca, leggerissima,
       e due piccole rosette zafferano ai lati del testo. --- */
.vimala-announcement::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/ornamenti/jaali-bianco.svg") center / 32px 32px repeat;
	opacity: .65; /* il tile è già al 12%: effettivo ~8% dietro al testo */
	pointer-events: none;
}

.vimala-announcement .vimala-announcement__text::before,
.vimala-announcement .vimala-announcement__text::after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 0.9em;
	vertical-align: -1px;
	background-color: var(--wp--preset--color--zafferano);
	-webkit-mask: url("../images/ornamenti/rosetta-bordeaux.svg") center / contain no-repeat;
	mask: url("../images/ornamenti/rosetta-bordeaux.svg") center / contain no-repeat;
	pointer-events: none;
}

/* Sotto i 782px la frase (≈68 caratteri maiuscoli spaziati, ~640px + rosette)
   va a capo: una rosetta resterebbe isolata a inizio o fine riga, quindi si nascondono. */
@media (max-width: 781px) {
	.vimala-announcement .vimala-announcement__text::before,
	.vimala-announcement .vimala-announcement__text::after {
		display: none;
	}
}

/* --- Footer: mandala bianco in filigrana in alto a sinistra, dietro «Resta in contatto»
       (il paisley resta in basso a destra: due angoli opposti, mai sovrapposti). --- */
.vimala-footer__top::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--wp--preset--spacing--70) - 110px);
	left: -150px;
	width: 380px;
	height: 380px;
	background: url("../images/ornamenti/mandala-bianco.svg") center / contain no-repeat;
	opacity: .06;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.vimala-footer__top::before {
		animation: vimala-mandala-giro 240s linear infinite;
	}
}

@keyframes vimala-mandala-giro {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 781px) {
	.vimala-footer__top::before {
		width: 240px;
		height: 240px;
		top: calc(-1 * var(--wp--preset--spacing--60) - 70px);
		left: -90px;
	}
}

/* --- Footer: piccole rosette zafferano come segni d'elenco dei link. --- */
.vimala-footer__links li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vimala-footer__links li::before {
	content: "";
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	background-color: var(--wp--preset--color--zafferano);
	opacity: .85;
	-webkit-mask: url("../images/ornamenti/rosetta-bordeaux.svg") center / contain no-repeat;
	mask: url("../images/ornamenti/rosetta-bordeaux.svg") center / contain no-repeat;
	transition: opacity 0.2s ease, transform 0.4s ease;
	pointer-events: none;
}

.vimala-footer__links li:hover::before,
.vimala-footer__links li:focus-within::before {
	opacity: 1;
	transform: rotate(45deg);
}

/* --- Footer: divisore ornamentale (diamante zafferano tra due paisley) sul filetto
       che apre la riga in basso (logo, copyright, note legali).
       Si mostra solo il centro del disegno, su un tassello blu notte largo quanto il centro:
       il filetto del bordo resta continuo fino all'ornamento (i filetti del disegno, sfalsati
       di mezzo pixel, lo facevano sembrare spezzato). --- */
.vimala-footer__bottom::before {
	content: "";
	position: absolute;
	top: -10px; /* centrato sul bordo superiore di 1px */
	left: 50%;
	width: 64px;
	height: 20px;
	transform: translateX(-50%);
	background:
		url("../images/ornamenti/divisore-ornamentale-bianco.svg") center / 200px 20px no-repeat,
		var(--wp--preset--color--blu-notte);
	pointer-events: none;
}

/* --- Menu mobile aperto: mandala bordeaux in filigrana in basso a destra.
       Sfondo, non pseudo-elemento: il pannello scorre (overflow auto) e un elemento
       sporgente creerebbe uno scorrimento in più. Il velo avorio al 93% lascia il 7%. --- */
.vimala-header .wp-block-navigation__responsive-container.is-menu-open {
	background-image:
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--base) 93%, transparent), color-mix(in srgb, var(--wp--preset--color--base) 93%, transparent)),
		url("../images/ornamenti/mandala-bordeaux.svg");
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, 340px 340px;
	background-position: center, right -110px bottom -110px;
}

/* --- Titoli delle pagine generiche (pagina, articolo, archivio, ricerca, 404):
       piccola rosetta bordeaux seguita da un filetto, sotto il titolo allineato a sinistra.
       Esclusi i titoli .vimala-archive-title (shop, carrello, cassa) curati in shop.css. --- */
.vimala-main > :is(.wp-block-post-title, .wp-block-query-title, h1):not(.vimala-archive-title)::after {
	content: "";
	display: block;
	width: 96px;
	height: 18px;
	margin-top: var(--wp--preset--spacing--30);
	background:
		url("../images/ornamenti/rosetta-bordeaux.svg") left center / 18px 18px no-repeat,
		linear-gradient(var(--wp--preset--color--bordeaux), var(--wp--preset--color--bordeaux)) 26px center / 70px 1px no-repeat;
	pointer-events: none;
}

/* --- Pagina 404: grande mandala bordeaux in filigrana a destra del titolo. --- */
body.error404 .vimala-main {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

body.error404 .vimala-main::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--wp--preset--spacing--50);
	right: max(-120px, calc((100% - var(--wp--style--global--content-size, 720px)) / 2 - 260px));
	width: 440px;
	height: 440px;
	background: url("../images/ornamenti/mandala-bordeaux.svg") center / contain no-repeat;
	opacity: .06;
	pointer-events: none;
}

@media (max-width: 781px) {
	body.error404 .vimala-main::before {
		width: 260px;
		height: 260px;
		top: var(--wp--preset--spacing--30);
		right: -90px;
	}
}

/* Menu sul telefono: «Come aiutarci · Dona ora» come pulsante bordeaux a tutta larghezza,
   le linee di separazione arrivano fino al bordo */
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .vimala-nav-mobile-only {
	align-self: stretch;
}
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .vimala-nav-dona {
	border-top: 0;
	padding-top: 0;
}
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .vimala-nav-dona .wp-block-navigation-item__content {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 14px 20px !important;
	background: var(--wp--preset--color--bordeaux);
	color: var(--wp--preset--color--bianco) !important;
	font-size: var(--wp--preset--font-size--small);
}
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .vimala-nav-dona .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--wp--preset--color--bordeaux) 82%, var(--wp--preset--color--ink));
	color: var(--wp--preset--color--bianco) !important;
}
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .vimala-nav-mobile-only:not(.vimala-nav-dona) .wp-block-navigation-item__content {
	min-height: 44px;
}

/* Menu sul telefono: la colonna delle voci usa tutta la larghezza (il pulsante «Dona ora» arriva al margine) */
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.vimala-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
}