/**
 * Vimala Shop — home.css
 * Pattern della home: hero, categorie in evidenza, banner, novità, storia, impatto, galleria.
 * Usa le variabili di layout.css (--vimala-header-h) e i preset di theme.json.
 */

/* ------------------------------------------------------------------ */
/* Contenitore della home                                               */
/* ------------------------------------------------------------------ */

/* Nessuno spazio tra header e hero: l'hero sale sotto l'header trasparente. */
.wp-site-blocks > main.vimala-home,
main.vimala-home {
	margin-block-start: 0;
	padding: 0;
}

/* Le sezioni si toccano: il ritmo è dato dal padding interno di ciascuna. */
main.vimala-home > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Titoli di sezione: Fraunces SemiBold in blu notte, mai in maiuscolo (brand 2027) */
.vimala-section-title {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--wp--preset--color--blu-notte);
}

/* Larghezza massima dei contenuti delle sezioni a tutta pagina */
.vimala-categorie > *,
.vimala-novita > *,
.vimala-impatto > *,
.vimala-galleria > * {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */

/* Nel sito unificato la barra in alto è solida (non più trasparente sopra la foto): l'apertura della
   vetrina non serve più a tutto schermo. Circa 60% dello schermo, tra 440 e 640px. */
.wp-block-cover.vimala-hero {
	min-height: clamp(440px, 60svh, 640px) !important;
	margin-block: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	align-items: flex-end;
}

.vimala-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	width: 100%;
	max-width: none;
	color: var(--wp--preset--color--bianco); /* foto scurita: testo bianco */
}

.vimala-hero__intro {
	max-width: 760px;
}

.vimala-hero__intro > * {
	margin-block: 0;
}

.vimala-hero__intro .vimala-eyebrow {
	margin-bottom: var(--wp--preset--spacing--30);
	color: inherit; /* l'occhiello è bordeaux di base: sulla foto scurita serve il bianco */
}

.vimala-hero__title {
	margin: 0;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: inherit;
}

/* Scheda del prodotto in evidenza, in basso a sinistra */
.vimala-hero-card {
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	max-width: 340px;
	padding: var(--wp--preset--spacing--20);
	margin: 0;
	text-align: left;
}

.vimala-hero-card .vimala-hero-card__image {
	flex: 0 0 auto;
	width: 88px;
	margin: 0;
	background-color: var(--wp--preset--color--carta);
}

.vimala-hero-card .vimala-hero-card__image img {
	display: block;
	width: 88px;
	height: 110px;
	object-fit: cover;
}

.vimala-hero-card__body {
	min-width: 0;
	padding-right: var(--wp--preset--spacing--20);
}

.vimala-hero-card__body > * {
	margin-block: 0;
}

.vimala-hero-card__body > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* Nota a mano, come «nuovo nello shop!» nel post ufficiale */
.vimala-hero-card .vimala-hero-card__label {
	font-family: var(--wp--preset--font-family--mano);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--bordeaux);
}

/* Nome del prodotto: Fraunces SemiBold in blu notte */
.vimala-hero-card .vimala-hero-card__name {
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--blu-notte);
	overflow-wrap: anywhere;
}

.vimala-hero-card__price {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.vimala-hero-card__link {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

.vimala-hero-card__body .vimala-hero-card__link {
	margin-block-start: var(--wp--preset--spacing--20);
}

.vimala-hero-card__link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--blu-notte);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.vimala-hero-card__link a:hover,
.vimala-hero-card__link a:focus-visible {
	color: var(--wp--preset--color--bordeaux);
}

@media (min-width: 782px) {
	.wp-block-cover.vimala-hero {
		padding: calc(var(--vimala-header-h, 60px) + 2 * var(--vimala-bordo-h, 16px) + var(--wp--preset--spacing--50)) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}

	/* Titolo in basso a destra, scheda in basso a sinistra */
	.vimala-hero .wp-block-cover__inner-container {
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: space-between;
	}

	.vimala-hero__intro {
		max-width: 620px;
		text-align: right;
	}
}

/* ------------------------------------------------------------------ */
/* Categorie in evidenza                                                */
/* ------------------------------------------------------------------ */

.vimala-categorie__grid.wp-block-columns {
	gap: var(--wp--preset--spacing--30);
	margin-block: 0;
}

.vimala-categoria > * {
	margin-block: 0;
}

.vimala-categoria__image {
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--carta);
}

.vimala-categoria__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.vimala-categoria .vimala-categoria__label {
	margin-block-start: var(--wp--preset--spacing--30);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.vimala-categoria__label a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--blu-notte);
	text-decoration: none;
}

.vimala-categoria__label a:hover,
.vimala-categoria__label a:focus-visible {
	color: var(--wp--preset--color--bordeaux);
	text-decoration: underline;
}

/* Mobile: scorrimento orizzontale dei riquadri */
@media (max-width: 781px) {
	.vimala-categorie__grid.wp-block-columns {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: var(--wp--preset--spacing--10);
	}

	.vimala-categorie__grid.wp-block-columns::-webkit-scrollbar {
		display: none;
	}

	.vimala-categorie__grid > .wp-block-column.vimala-categoria {
		flex: 0 0 72% !important;
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------------ */
/* Banner collezione                                                    */
/* ------------------------------------------------------------------ */

.wp-block-cover.vimala-banner {
	min-height: 70vh;
	min-height: 70svh !important;
	margin-block: 0;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.vimala-banner .wp-block-cover__inner-container {
	max-width: 760px;
	margin-inline: auto;
	color: var(--wp--preset--color--bianco); /* foto scurita: testo bianco */
}

.vimala-banner .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.vimala-banner .vimala-eyebrow {
	margin-bottom: var(--wp--preset--spacing--30);
	color: inherit;
}

.vimala-banner__title {
	font-weight: 600;
	line-height: 1.05;
	color: inherit;
}

.vimala-banner .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.vimala-banner .wp-block-button.is-style-vimala-link .wp-block-button__link {
	color: var(--wp--preset--color--bianco);
	font-weight: 700;
	letter-spacing: 0.16em;
}

.vimala-banner .wp-block-button.is-style-vimala-link .wp-block-button__link:hover,
.vimala-banner .wp-block-button.is-style-vimala-link .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--linea);
}

/* ------------------------------------------------------------------ */
/* Novità                                                               */
/* ------------------------------------------------------------------ */

.vimala-novita__head {
	margin-bottom: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--30);
}

.vimala-novita__head .vimala-section-title {
	margin: 0;
}

.vimala-novita__all {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.vimala-novita__all a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--blu-notte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.vimala-novita__all a:hover,
.vimala-novita__all a:focus-visible {
	color: var(--wp--preset--color--bordeaux);
}

.vimala-novita__collection {
	margin-block: 0;
}

.vimala-novita__empty {
	margin: 0;
	text-align: center;
}

/* Mobile: le card scorrono in orizzontale invece di andare a capo */
@media (max-width: 781px) {
	/* Specificità più alta di shop.css (caricato dopo), che a 781px imposta 2 colonne */
	.vimala-novita ul.wc-block-product-template.vimala-product-card,
	.vimala-novita ul.wp-block-post-template.vimala-product-card {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 68%;
		grid-template-columns: none;
		column-gap: var(--wp--preset--spacing--30);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: var(--wp--preset--spacing--10);
	}

	.vimala-novita ul.wc-block-product-template.vimala-product-card::-webkit-scrollbar {
		display: none;
	}

	.vimala-novita ul.vimala-product-card > li {
		min-width: 0;
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------------ */
/* Storia                                                               */
/* ------------------------------------------------------------------ */

/* Sfondo carta e foto in cornice polaroid: il «diario di viaggio» del manuale 2027 */
.wp-block-columns.vimala-storia {
	gap: 0;
	margin-block: 0;
	align-items: stretch !important;
	background-color: var(--wp--preset--color--carta);
	overflow-x: clip; /* la cornice ruotata non deve mai generare scorrimento orizzontale */
}

.vimala-storia__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vimala-storia__text > * {
	max-width: 520px;
	margin-block: 0;
}

.vimala-storia__text .vimala-eyebrow {
	margin-bottom: var(--wp--preset--spacing--40);
}

.vimala-storia__title {
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--blu-notte);
}

.vimala-storia__text .vimala-storia__lead {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink);
	line-height: 1.7;
}

.vimala-storia__text .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Pulsante a contorno blu notte, come «Scopri lo shop» nella newsletter */
.vimala-storia .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 14px 28px;
	background: transparent;
	border: 2px solid var(--wp--preset--color--blu-notte);
	border-radius: 2px;
	color: var(--wp--preset--color--blu-notte);
	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;
}

.vimala-storia .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.vimala-storia .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--blu-notte);
	border-color: var(--wp--preset--color--blu-notte);
	color: var(--wp--preset--color--bianco);
}

.vimala-storia__media.wp-block-column {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* Cornice polaroid: bordo bianco più alto in basso, rotazione leggera, ombra morbida */
.vimala-storia__media > .vimala-storia__image {
	flex: 0 1 auto;
	width: 100%;
	max-width: 440px;
	margin: 0;
	padding: 14px 14px 52px;
	background-color: var(--wp--preset--color--bianco);
	box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent);
	transform: rotate(2.5deg);
}

.vimala-storia__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 782px) {
	.vimala-storia__media.wp-block-column {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}

	.vimala-storia__media > .vimala-storia__image {
		padding: 18px 18px 68px;
	}
}

@media (max-width: 781px) {
	/* Mobile: immagine sopra, testo sotto */
	.wp-block-columns.vimala-storia {
		flex-direction: column-reverse;
	}

	.vimala-storia__media > .vimala-storia__image {
		max-width: 320px;
	}

	.vimala-storia__text.wp-block-column {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) !important;
	}
}

/* ------------------------------------------------------------------ */
/* Impatto                                                              */
/* ------------------------------------------------------------------ */

.vimala-impatto__head {
	max-width: 760px !important;
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Unico divisore ad arco della home, sopra il titolo della sezione */
.vimala-impatto__head::before {
	content: "";
	display: block;
	width: 120px;
	height: 12px;
	margin: 0 auto var(--wp--preset--spacing--40);
	background: url("../images/brand/divisore-arco-bordeaux.svg") center / contain no-repeat;
}

.vimala-impatto__head > * {
	margin-block: 0;
}

/* Introduzione in Fraunces corsivo: accento, non titolo */
.vimala-impatto__intro {
	margin-block-start: var(--wp--preset--spacing--30) !important;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.vimala-impatto__grid.wp-block-columns {
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
}

.vimala-impatto__item {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linea);
}

.vimala-impatto__item > * {
	margin-block: 0;
}

/* Icona lineare del brand sopra il titolo (decorativa) */
.vimala-impatto__item .vimala-impatto__icon {
	margin-block-end: var(--wp--preset--spacing--30);
}

.vimala-impatto__icon img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.vimala-impatto__title {
	font-weight: 600;
	line-height: 1.2;
}

.vimala-impatto__item .vimala-impatto__text {
	margin-block-start: var(--wp--preset--spacing--30);
	line-height: 1.7;
}

@media (min-width: 600px) and (max-width: 781px) {
	/* Tablet stretto: 2 colonne invece di 4 impilate */
	.vimala-impatto__grid.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* Galleria                                                             */
/* ------------------------------------------------------------------ */

.vimala-galleria {
	background-color: var(--wp--preset--color--carta);
}

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

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

.vimala-galleria__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.vimala-galleria .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.vimala-galleria__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}
}

/* ------------------------------------------------------------------ */
/* Movimento ridotto                                                    */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.vimala-categoria__image img {
		transition: none;
	}

}

/* ------------------------------------------------------------------ */
/* Dettagli d'ispirazione indiana (ornamenti originali, colori 2027)    */
/* File in assets/images/ornamenti/. Aggiunte al brand kit: da far       */
/* approvare al referente del brand (docs/BRAND-2027.md).                */
/* ------------------------------------------------------------------ */

/* Rosetta block print tra due filetti sopra i titoli di sezione centrati
   (non nell'impatto, che ha già il divisore ad arco). */
.vimala-section-title.has-text-align-center:not(.vimala-impatto *)::before {
	content: "";
	display: block;
	width: 168px;
	height: 24px;
	margin: 0 auto var(--wp--preset--spacing--30);
	background:
		url("../images/ornamenti/rosetta-bordeaux.svg") center / 24px 24px no-repeat,
		linear-gradient(var(--wp--preset--color--bordeaux), var(--wp--preset--color--bordeaux)) left center / 60px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--bordeaux), var(--wp--preset--color--bordeaux)) right center / 60px 1px no-repeat;
}

/* Foto delle categorie: rettangolo semplice.
   Il link in blocco evita la fascia vuota sotto la foto (spazio della riga di testo). */
.vimala-categoria__image a {
	display: block;
}

/* Motivo block print leggerissimo sulle sezioni color carta */
.wp-block-columns.vimala-storia,
.vimala-galleria {
	background-image: url("../images/ornamenti/motivo-block-print.svg");
	background-size: 64px 64px;
	background-repeat: repeat;
}

/* ------------------------------------------------------------------ */
/* Dettagli d'ispirazione indiana – 2                                   */
/* Seconda serie di ornamenti della home (file in assets/images/         */
/* ornamenti/, solo colori della palette). Tutto decorativo: nessun      */
/* testo, nessun simbolo religioso. Si toglie cancellando questa sezione.*/
/* Gli ornamenti in bianco usano la maschera SVG + colore preset: il     */
/* disegno resta lo stesso, il colore viene da theme.json.               */
/* ------------------------------------------------------------------ */

/* 1. Hero — scheda «In evidenza» come un piccolo cartiglio: doppio filetto bordeaux
   all'interno del bordo (come le cornici dei tessuti block print) e una rosetta-sigillo
   al centro del lato superiore. Tutto dentro la scheda, niente che sporga sulla foto. */
.wp-block-cover.vimala-hero {
	overflow: clip; /* l'header sticky è fuori da main: nessun antenato sticky qui */
}

.vimala-hero-card {
	position: relative;
	padding: 14px;
	gap: var(--wp--preset--spacing--30);
}

.vimala-hero-card::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--bordeaux) 55%, transparent);
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--bordeaux) 25%, transparent);
	outline-offset: 2px;
	pointer-events: none;
}

.vimala-hero-card::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	width: 26px;
	height: 26px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		url("../images/ornamenti/rosetta-bordeaux.svg") center / 18px 18px no-repeat,
		var(--wp--preset--color--bianco);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--bordeaux) 55%, transparent);
	pointer-events: none;
}

/* La foto riempie tutto il riquadro (niente fascia carta sotto) */
.vimala-hero-card .vimala-hero-card__image a {
	display: block;
}

.vimala-hero-card .vimala-hero-card__image {
	position: relative;
	z-index: 1;
	background-color: transparent;
}

.vimala-hero-card__body {
	position: relative;
	z-index: 1;
}

/* 3. Banner — reticolo jaali bianco solo sui bordi laterali della foto
   (il testo è in basso al centro: la fascia centrale resta libera) e
   divisore ornamentale bianco sotto il titolo. */
.wp-block-cover.vimala-banner {
	overflow: clip;
}

.wp-block-cover.vimala-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1; /* sopra la foto; velatura e testo vengono dopo nel DOM */
	background: url("../images/ornamenti/jaali-bianco.svg") center / 48px 48px repeat;
	-webkit-mask-image: linear-gradient(to right, var(--wp--preset--color--ink) 0, transparent 22%, transparent 78%, var(--wp--preset--color--ink) 100%);
	mask-image: linear-gradient(to right, var(--wp--preset--color--ink) 0, transparent 22%, transparent 78%, var(--wp--preset--color--ink) 100%);
	opacity: 0.45;
	pointer-events: none;
}

.vimala-banner .vimala-banner__title::after {
	content: "";
	display: block;
	width: 200px;
	height: 20px;
	margin: var(--wp--preset--spacing--30) auto 0;
	background-color: var(--wp--preset--color--bianco);
	-webkit-mask: url("../images/ornamenti/divisore-ornamentale-bordeaux.svg") center / contain no-repeat;
	mask: url("../images/ornamenti/divisore-ornamentale-bordeaux.svg") center / contain no-repeat;
	pointer-events: none;
}

/* 4. Novità — toran (ghirlanda di calendule e foglie di mango) appeso al
   bordo alto della sezione, subito sotto la foto del banner.
   Sta nel padding superiore (96px): non tocca titolo né link. */
.vimala-novita {
	position: relative;
}

.vimala-novita::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 48px;
	background: url("../images/ornamenti/toran.svg") center top / 90px 48px repeat-x;
	pointer-events: none;
}

/* 5. Storia — angoli mehndi bordeaux attorno alla polaroid (ruotano con lei)
   e una piccola rosetta come «timbro» nella fascia bianca in basso. */
.vimala-storia__media > .vimala-storia__image {
	position: relative;
	background:
		url("../images/ornamenti/rosetta-bordeaux.svg") center bottom 15px / 22px 22px no-repeat,
		var(--wp--preset--color--bianco);
}

.vimala-storia__media > .vimala-storia__image::before,
.vimala-storia__media > .vimala-storia__image::after {
	content: "";
	position: absolute;
	width: 64px;
	height: 64px;
	background: url("../images/ornamenti/angolo-mehndi-bordeaux.svg") center / contain no-repeat;
	pointer-events: none;
}

.vimala-storia__media > .vimala-storia__image::before {
	top: -18px;
	left: -18px;
}

.vimala-storia__media > .vimala-storia__image::after {
	right: -18px;
	bottom: -18px;
	transform: scale(-1, -1);
}

@media (min-width: 782px) {
	.vimala-storia__media > .vimala-storia__image {
		background-position: center bottom 22px, 0 0;
		background-size: 26px 26px, auto;
	}

	.vimala-storia__media > .vimala-storia__image::before,
	.vimala-storia__media > .vimala-storia__image::after {
		width: 88px;
		height: 88px;
	}

	.vimala-storia__media > .vimala-storia__image::before {
		top: -26px;
		left: -26px;
	}

	.vimala-storia__media > .vimala-storia__image::after {
		right: -26px;
		bottom: -26px;
	}
}

/* 6. Impatto — grande mandala in filigrana (bordeaux al 6%) dietro il
   titolo, e le icone dentro piccole nicchie ad arco color carta. */
.vimala-impatto {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.vimala-impatto::before {
	content: "";
	position: absolute;
	top: -120px;
	left: 50%;
	z-index: -1;
	width: min(680px, 140vw);
	aspect-ratio: 1;
	background: url("../images/ornamenti/mandala-bordeaux.svg") center / contain no-repeat;
	opacity: 0.06;
	transform: translateX(-50%);
	pointer-events: none;
}

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

@keyframes vimala-mandala-giro {
	from { transform: translateX(-50%) rotate(0deg); }
	to { transform: translateX(-50%) rotate(360deg); }
}

/* Nicchia ad arco: fondo carta pieno, icona in basso */
.vimala-impatto__item .vimala-impatto__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	width: 80px;
	height: 96px;
	padding-bottom: 14px;
	background: var(--wp--preset--color--carta);
	-webkit-mask: url("../images/ornamenti/arco-moghul.svg") center / 100% 100% no-repeat;
	mask: url("../images/ornamenti/arco-moghul.svg") center / 100% 100% no-repeat;
}

.vimala-impatto__item .vimala-impatto__icon img {
	width: 46px;
	height: 46px;
}

/* 7. «Dalla nostra comunità» — fascia di bute (paisley) blu notte al bordo
   alto della sezione carta, come l'orlo di un tessuto. Sta nel padding
   superiore, sopra la rosetta del titolo e lontano da essa. */
.vimala-galleria {
	position: relative;
}

.vimala-galleria::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--30);
	left: 0;
	right: 0;
	height: 16px;
	background: url("../images/ornamenti/fascia-bute-blu.svg") center / 43px 16px repeat-x;
	opacity: 0.85;
	pointer-events: none;
}

/* Telefono: ornamenti più piccoli */
@media (max-width: 781px) {
	.vimala-novita::before {
		height: 36px;
		background-size: 68px 36px;
	}

	.vimala-impatto::before {
		top: -60px;
		width: 520px;
	}

	/* Su telefono il testo occupa quasi tutta la larghezza: bande laterali
	   più strette, che restano nel margine fuori dal testo. */
	.wp-block-cover.vimala-banner::before {
		background-size: 36px 36px;
		-webkit-mask-image: linear-gradient(to right, var(--wp--preset--color--ink) 0, transparent 9%, transparent 91%, var(--wp--preset--color--ink) 100%);
		mask-image: linear-gradient(to right, var(--wp--preset--color--ink) 0, transparent 9%, transparent 91%, var(--wp--preset--color--ink) 100%);
	}
}

/* Categorie al passaggio: come le schede prodotto dello shop (shop.css), la cornice «si gonfia»
   e compare il doppio filetto bordeaux della scheda «In evidenza», senza la rosetta. */
.vimala-categoria__image {
	position: relative;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.vimala-categoria__image::after {
	content: "";
	position: absolute;
	inset: 9px;
	z-index: 1;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--bianco) 85%, transparent);
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--bordeaux) 55%, transparent);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--bordeaux) 30%, transparent);
	opacity: 0;
	transform: scale(.96);
	transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
	pointer-events: none;
}
.vimala-categoria:is(:hover, :focus-within) .vimala-categoria__image {
	z-index: 2; /* ingrandita sta sopra le vicine */
	transform: scale(1.035);
	box-shadow: 0 16px 34px color-mix(in srgb, var(--wp--preset--color--blu-notte) 16%, transparent);
}
.vimala-categoria:is(:hover, :focus-within) .vimala-categoria__image::after {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vimala-categoria__image,
	.vimala-categoria__image::after {
		transition: none;
	}
	.vimala-categoria:is(:hover, :focus-within) .vimala-categoria__image {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Ritocchi per tablet (controllo mobile del 4 novembre 2026)            */
/* Tra 600 e 781px i caroselli mostrano due schede e mezza, non una.     */
/* ------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 781px) {
	.vimala-categorie__grid > .wp-block-column.vimala-categoria {
		flex: 0 0 42% !important;
	}

	.vimala-novita ul.wc-block-product-template.vimala-product-card,
	.vimala-novita ul.wp-block-post-template.vimala-product-card {
		grid-auto-columns: 40%;
	}
}

/* Apertura della vetrina: velo più scuro dietro il titolo, leggibile anche sopra lo scialle chiaro */
.wp-block-cover.vimala-hero .wp-block-cover__inner-container {
	text-shadow: 0 2px 18px color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}