/*
Palette e font del brand: vedi le custom property in :root qui sotto —
e' l'unico posto da modificare per cambiare i colori in tutto il sito
(tema + configuratore, che legge le stesse variabili). Estratte dai
prototipi in /diablesse.dfix.it e dalla Cartella Colori del cliente.
Font: Cormorant Garamond (titoli) + Montserrat (testo) via Google Fonts.
*/

:root {
	/*
	 * Palette brand — unica fonte di verita' per i colori del sito.
	 * Per cambiare la palette basta modificare i valori qui sotto (e le
	 * varianti "-rgb" corrispondenti, usate per le trasparenze rgba()):
	 * tutto il resto del CSS del tema e del configuratore legge da qui,
	 * niente colori hardcoded altrove.
	 */
	--color-bg: #1f3b4a;
	--color-bg-rgb: 31, 59, 74;
	--color-bg-deep: #16303d;
	--color-bg-deep-rgb: 22, 48, 61;
	--color-gold: #cdb98a;
	--color-gold-rgb: 205, 185, 138;
	--color-gold-soft: #e3d6b8;
	--color-gold-soft-rgb: 227, 214, 184;
	--color-cream: #f6f1e7;
	--color-cream-rgb: 246, 241, 231;
	--color-error: #7a2b2b;
	--color-error-rgb: 122, 43, 43;

	--font-title: 'Cormorant Garamond', serif;
	--font-body: 'Montserrat', sans-serif;

	--container: 1180px;
}

* {
	box-sizing: border-box;
}

/*
 * Niente "scroll-behavior: smooth" globale qui: interferisce con lo scroll
 * nativo del browser (rotellina, drag scrollbar, ripristino della
 * posizione al reload) — su scroll rapidi/interrotti alcuni browser si
 * fermano qualche pixel prima del target reale invece che esattamente a 0
 * (causa nota del bug "la hero non torna mai a top:0 dopo un reload a meta'
 * pagina"). Lo smooth scroll sui link-ancora (#brand-story, #contatti, ecc.)
 * e' gestito via JS solo al click, vedi assets/js/main.js.
 */

/*
 * Taglia qualunque sforamento orizzontale (es. le animazioni reveal-left/right
 * partono traslate di alcuni px oltre il bordo): niente scroll orizzontale ne'
 * "bordino bianco" a destra su mobile. Si usa "clip" e non "hidden" perche'
 * clip NON crea un contesto di scroll e quindi non rompe gli elementi in
 * position: sticky (es. il pannello anteprima nella pagina ordine).
 */
html {
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-bg-deep);
	background: var(--color-cream);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

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

h1, h2, h3 {
	font-family: var(--font-title);
	font-weight: 500;
	margin: 0;
	line-height: 1.15;
}

p {
	margin: 0 0 1em;
	line-height: 1.7;
}

.section-eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.75rem;
	color: var(--color-bg-deep);
	opacity: 0.65;
	margin-bottom: 0.75rem;
}

.section-eyebrow--gold {
	color: var(--color-gold);
	opacity: 0.9;
}

.btn {
	display: inline-block;
	padding: 0.85em 1.8em;
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid transparent;
	/* color: inherit serve ai <button>: a differenza degli <a> non ereditano
	   il colore del testo dal contenitore, quindi su fondo scuro un
	   .btn--ghost restava nero-su-blu e illeggibile (anche il bordo, che e'
	   currentColor). Le varianti con colore proprio (.btn--gold) sono
	   dichiarate dopo e continuano a vincere. */
	color: inherit;
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--gold {
	background: var(--color-gold);
	color: var(--color-bg-deep);
}

.btn--gold:hover {
	background: var(--color-gold-soft);
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	border-color: currentColor;
}

.btn--ghost:hover {
	transform: translateY(-2px);
}

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(var(--color-bg-rgb), 0.85);
	backdrop-filter: blur(8px);
	color: var(--color-cream);
}

.site-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1rem 1.5rem;
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

.site-logo {
	height: 40px;
	width: auto;
	color: var(--color-gold);
}

/* Voci di menu: Montserrat (font-body) in cassa normale, senza i maiuscoletti
   spaziati "rigidi" di prima. */
.site-header__nav {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	font-family: var(--font-body);
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	text-transform: none;
}

.site-header__nav a:hover {
	color: var(--color-gold);
}

.site-header__cta {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-shrink: 0;
}

/* Anche i pulsanti dell'header perdono il maiuscolo spaziato (coerenti col
   nuovo menu piu' morbido); il resto dei .btn del sito resta invariato. */
.site-header__cta .btn {
	text-transform: none;
	letter-spacing: 0.01em;
	font-weight: 500;
	font-size: 0.9rem;
}

/* Icona "omino" (accesso area riservata) al posto dell'etichetta "Accedi". */
.site-header__user {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-cream);
	transition: color 0.25s ease;
}

.site-header__user:hover {
	color: var(--color-gold);
}

.site-header__user-icon {
	width: 26px;
	height: 26px;
	display: block;
}

.site-header__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
}

.site-header__toggle span {
	width: 22px;
	height: 2px;
	background: var(--color-cream);
	display: block;
}

.site-header__mobile {
	display: none;
	flex-direction: column;
	padding: 1rem 1.5rem 1.5rem;
	gap: 1rem;
	font-family: var(--font-body);
	text-transform: none;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	/* Sfondo pieno del brand: il menu aperto deve restare leggibile a
	   prescindere dal contenuto della pagina sottostante. */
	background: var(--color-bg);
	border-top: 1px solid rgba(var(--color-gold-rgb), 0.25);
}

/* Velo sul resto della pagina quando il menu mobile e' aperto, cosi' il menu
   ha sempre visibilita' (l'header e' z-index 100, il velo 90: sta sotto
   l'header/menu ma sopra il contenuto). Il click sul velo chiude il menu
   (gestito in main.js). */
.site-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(var(--color-bg-deep-rgb), 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.site-header.is-open ~ .site-nav-backdrop {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 860px) {
	.site-header__nav,
	.site-header__cta {
		display: none;
	}
	.site-header__toggle {
		display: flex;
	}
	.site-header.is-open .site-header__mobile {
		display: flex;
	}
}

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

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	color: var(--color-cream);
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Fallback dietro al video: se per una frazione di secondo il frame
	   non e' pronto (riavvio del loop), si intravede questo colore invece
	   di un flash non a tema. */
	background: var(--color-bg-deep);
}

.hero__bg img,
.hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim scuro sopra il video/foto di sfondo: il clip di prodotto e' su
   fondo chiaro (beige/crema), serve un velo per mantenere leggibile il
   testo crema/oro in primo piano — piu' scuro a sinistra (dove sta il
   testo), piu' leggero verso destra per lasciare intravedere il video. */
.hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		115deg,
		rgba(var(--color-bg-deep-rgb), 0.9) 0%,
		rgba(var(--color-bg-deep-rgb), 0.62) 45%,
		rgba(var(--color-bg-deep-rgb), 0.4) 100%
	);
}

.hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 0 auto;
	padding: 8rem 1.5rem 4rem;
	width: 100%;
}

.hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-size: 0.75rem;
	color: var(--color-gold-soft);
	margin-bottom: 1.25rem;
}

.hero__title {
	font-size: clamp(3.5rem, 9vw, 7rem);
	color: var(--color-cream);
	margin-bottom: 1.25rem;
	line-height: 0;
}

.hero__title-logo {
	width: clamp(260px, 46vw, 620px);
	height: auto;
	color: var(--color-cream);
	display: block;
}

/* Nasconde visivamente il testo di fallback per l'accessibilita'/SEO
   (l'h1 resta con un nome reale) senza toglierlo dal DOM. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hero__claim {
	max-width: 32em;
	font-size: 1.15rem;
	color: var(--color-gold-soft);
}

.hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

/* ---------- Brand story ---------- */

.brand-story {
	scroll-margin-top: 6rem;
	/* Clip di sicurezza anche a livello di sezione (per browser senza
	   overflow:clip): contiene la traslazione delle animazioni reveal-left/right. */
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: var(--container);
	margin: 0 auto;
	padding: 6rem 1.5rem;
	gap: 4rem;
}

.brand-story__media img {
	width: 100%;
	/* La foto dell'atelier e' molto verticale (9:16): la incorniciamo in un
	   ritaglio 4:5 centrato sul soggetto, cosi' resta elegante e non allunga
	   troppo la colonna rispetto al testo accanto. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
	box-shadow: 0 30px 60px -20px rgba(var(--color-bg-deep-rgb), 0.35);
}

.brand-story__text h2 {
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin-bottom: 1.25rem;
}

.brand-story__text p {
	max-width: 34em;
	color: var(--color-bg-deep);
	opacity: 0.85;
}

@media (max-width: 860px) {
	.brand-story {
		grid-template-columns: 1fr;
		padding: 4rem 1.5rem;
		gap: 2.5rem;
	}
}

/* ---------- Collections teaser ---------- */

.collections-teaser {
	background: var(--color-bg);
	color: var(--color-cream);
	padding: 6rem 1.5rem;
}

.collections-teaser__head {
	max-width: var(--container);
	margin: 0 auto 3rem;
	text-align: center;
}

.collections-teaser__head h2 {
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: var(--color-cream);
}

.collections-teaser__head .section-eyebrow {
	color: var(--color-gold-soft);
	opacity: 0.9;
}

.collections-teaser__grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	/* auto-fit: le card riempiono la riga qualunque sia il loro numero (2 o 3),
	   senza lasciare colonne vuote quando una collezione viene disattivata. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2rem;
}

.collection-card {
	background: var(--color-bg-deep);
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
	/* NB: niente will-change/translateZ qui. In passato promuovevano la card a
	   un layer GPU per l'animazione GSAP (ora rimossa); ma un layer GPU forzato
	   in modo permanente su alcuni motori Chromium non veniva ridipinto quando
	   l'immagine finiva di decodificare — la card restava vuota finche' l'hover
	   non forzava un repaint. Rimosso il forcing, l'immagine si dipinge subito. */
}

.collection-card__link-wrap {
	display: block;
	color: inherit;
}

.collection-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* Le foto prodotto hanno sfondo chiaro/neutro: un fondo scuro dietro
	   (ereditato prima da .collection-card) creava un vistoso "flash blu"
	   nel momento in cui la card appare in dissolvenza (l'opacity anima
	   l'intera card, quindi per una frazione di secondo si vede la card
	   scura ancora semi-trasparente prima che la foto chiara "copra" lo
	   sfondo). Un fondo chiaro coerente con le foto rende la dissolvenza
	   impercettibile. */
	background: var(--color-cream);
}

.collection-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.collection-card:hover .collection-card__media img {
	transform: scale(1.08) rotate(-1.5deg);
}

.collection-card__body {
	padding: 1.75rem;
}

.collection-card__body h3 {
	font-size: 1.5rem;
	color: var(--color-cream);
	margin-bottom: 0.5rem;
}

.collection-card__body p {
	color: var(--color-gold-soft);
	opacity: 0.85;
	font-size: 0.95rem;
}

.collection-card__link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-gold);
	border-bottom: 1px solid var(--color-gold);
	padding-bottom: 2px;
}

@media (max-width: 860px) {
	.collections-teaser__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- B2B CTA ---------- */

.b2b-cta {
	padding: 6rem 1.5rem;
}

.b2b-cta__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.b2b-cta__inner h2 {
	font-size: clamp(2rem, 4vw, 2.6rem);
	margin-bottom: 1.25rem;
}

.b2b-cta__inner p {
	color: var(--color-bg-deep);
	opacity: 0.8;
}

.b2b-cta__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.b2b-cta .btn--ghost {
	border-color: var(--color-bg-deep);
}

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

.site-footer {
	background: var(--color-bg-deep);
	color: var(--color-gold-soft);
}

.site-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 4rem 1.5rem 2rem;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2.5rem;
}

.site-footer__brand .site-logo--footer {
	height: 34px;
	width: auto;
	color: var(--color-gold);
	margin-bottom: 1rem;
}

.site-footer__claim {
	max-width: 22em;
	opacity: 0.75;
	font-size: 0.9rem;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 0.9rem;
}

.site-footer__col h3 {
	font-family: var(--font-body);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--color-cream);
	margin-bottom: 0.4rem;
}

.site-footer__col a:hover {
	color: var(--color-gold);
}

.site-footer__legal {
	max-width: var(--container);
	margin: 0 auto;
	padding: 1.5rem 1.5rem 2rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.78rem;
	opacity: 0.6;
	border-top: 1px solid rgba(var(--color-cream-rgb), 0.1);
}

.site-footer__legal-links {
	display: flex;
	gap: 1rem;
}

/* Credit sviluppatore: volutamente discreto (piu' piccolo e tenue del resto
   della riga legale, che e' gia' a opacita' 0.6). */
.site-footer__credits {
	font-size: 0.68rem;
	opacity: 0.75;
}

.site-footer__credits a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--color-cream-rgb), 0.25);
}

.site-footer__credits a:hover {
	color: var(--color-gold);
	border-bottom-color: currentColor;
}

@media (max-width: 600px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* ---------- Instagram feed (home) ---------- */

.instagram-feed {
	position: relative;
	background: var(--color-bg-deep);
	color: var(--color-cream);
	padding: 6rem 1.5rem;
	text-align: center;
	overflow: hidden;
}

/* Griglia di foto animata, non invasiva: sfondo desaturato/sfocato dietro
   il contenuto della sezione Instagram (vedi front-page.php per il markup
   e le note sulla selezione delle foto). */
.instagram-bg-grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	gap: 6px;
	padding: 0 6px;
	opacity: 0.5;
	filter: grayscale(0.85) contrast(1.1) brightness(0.95);
}

.instagram-bg-grid__col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	will-change: transform;
}

.instagram-bg-grid__col img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 2px;
}

.instagram-bg-grid__col--up {
	animation: diablesse-scroll-up 48s linear infinite;
}

.instagram-bg-grid__col--down {
	animation: diablesse-scroll-down 48s linear infinite;
}

@keyframes diablesse-scroll-up {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

@keyframes diablesse-scroll-down {
	from { transform: translateY(-50%); }
	to { transform: translateY(0); }
}

/* Overlay uniforme (non un gradiente che chiude a opaco ai bordi, altrimenti
   la griglia risulta visibile solo in un piccolo cerchio al centro e il
   resto sembra sfondo pieno): stessa trasparenza ovunque, cosi' le foto
   restano leggermente visibili su tutta la sezione ma il testo resta
   leggibile. Per rendere la griglia piu'/meno visibile agire su questo
   valore (alpha) e sull'opacity di .instagram-bg-grid qui sopra. */
.instagram-feed::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(var(--color-bg-deep-rgb), 0.5);
}

.instagram-feed__head,
.instagram-feed__body {
	position: relative;
	z-index: 2;
}

.instagram-feed__head {
	max-width: var(--container);
	margin: 0 auto 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.instagram-bg-grid__col {
		animation: none;
	}
}

@media (max-width: 700px) {
	.instagram-bg-grid {
		opacity: 0.4;
	}
}

.instagram-feed__head h2 {
	font-size: clamp(2rem, 4vw, 2.6rem);
	color: var(--color-gold-soft);
}

.instagram-feed__head .section-eyebrow {
	color: var(--color-gold-soft);
	opacity: 0.9;
}

.instagram-feed__body {
	max-width: var(--container);
	margin: 0 auto;
}

.instagram-feed__widget {
	overflow: hidden;
}

.instagram-feed__fallback p {
	max-width: 32em;
	margin: 0 auto 1.5rem;
	color: var(--color-gold-soft);
	opacity: 0.85;
}

/* ---------- Contatti (home) ---------- */

.home-contatti {
	scroll-margin-top: 6rem;
	padding: 6rem 1.5rem;
}

.home-contatti__head {
	max-width: var(--container);
	margin: 0 auto 2.5rem;
	text-align: center;
}

.home-contatti__head h2 {
	font-size: clamp(2rem, 4vw, 2.6rem);
}

.home-contatti__body {
	max-width: 640px;
	margin: 0 auto;
}

.home-contatti__form input,
.home-contatti__form textarea,
.home-contatti__form select {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.95rem;
	padding: 0.75em 1em;
	margin-bottom: 1rem;
	border: 1px solid rgba(var(--color-bg-deep-rgb), 0.25);
	border-radius: 2px;
	background: #fff;
}

.home-contatti__form input[type="submit"] {
	width: auto;
	background: var(--color-gold);
	color: var(--color-bg-deep);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	border: none;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.home-contatti__form input[type="submit"]:hover {
	background: var(--color-gold-soft);
	transform: translateY(-2px);
}

.home-contatti__fallback {
	text-align: center;
}

.home-contatti__fallback p {
	opacity: 0.8;
}

/* ---------- Pagina Collezioni (overview) ---------- */

.collezioni-hero {
	background: var(--color-bg);
	color: var(--color-cream);
	padding: 10rem 1.5rem 5rem;
	text-align: center;
}

.collezioni-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.collezioni-hero h1 {
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	color: var(--color-cream);
	margin: 0.5rem 0 1.25rem;
}

.collezioni-hero__claim {
	color: var(--color-gold-soft);
	opacity: 0.9;
	max-width: 36em;
	margin: 0 auto;
}

.collezioni-grid {
	max-width: var(--container);
	margin: 0 auto;
	padding: 5rem 1.5rem;
	display: grid;
	/* auto-fit: si adatta al numero di collezioni attive (2 o 3). */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2rem;
}

.collezione-card {
	background: var(--color-bg-deep);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.collezione-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
}

.collezione-card__link {
	display: block;
	color: var(--color-cream);
}

.collezione-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.collezione-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collezione-card__body {
	padding: 1.75rem;
}

.collezione-card__body h2 {
	font-size: 1.5rem;
	color: var(--color-cream);
	margin-bottom: 0.5rem;
}

.collezione-card__body p {
	color: var(--color-gold-soft);
	opacity: 0.85;
	font-size: 0.95rem;
}

.collezione-card__cta {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-gold);
	border-bottom: 1px solid var(--color-gold);
	padding-bottom: 2px;
}

@media (max-width: 860px) {
	.collezioni-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Singola Collezione ---------- */

.collezione-hero {
	overflow: hidden; /* contiene le animazioni reveal-left/right, no scroll orizzontale */
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: var(--container);
	margin: 0 auto;
	padding: 9rem 1.5rem 4rem;
	gap: 4rem;
}

.collezione-hero__media img {
	border-radius: 4px;
	box-shadow: 0 30px 60px -20px rgba(var(--color-bg-deep-rgb), 0.35);
}

.collezione-hero__text h1 {
	font-size: clamp(2.2rem, 4.5vw, 3rem);
	margin: 0.5rem 0 1rem;
}

.collezione-hero__sottotitolo {
	color: var(--color-bg-deep);
	opacity: 0.75;
	font-size: 1.05rem;
}

.collezione-hero__content {
	color: var(--color-bg-deep);
	opacity: 0.85;
	max-width: 34em;
}

.collezione-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

@media (max-width: 860px) {
	.collezione-hero {
		grid-template-columns: 1fr;
		padding: 7rem 1.5rem 3rem;
		gap: 2.5rem;
	}
}

.collezione-catalogo {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
}

.collezione-catalogo__box {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
	background: rgba(var(--color-gold-rgb), 0.1);
	border: 1px solid rgba(var(--color-gold-rgb), 0.4);
	border-radius: 6px;
	padding: 2rem 2.25rem;
}

.collezione-catalogo__icon {
	flex: none;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-bg-deep);
}

.collezione-catalogo__icon svg {
	width: 100%;
	height: 100%;
}

.collezione-catalogo__text {
	flex: 1 1 260px;
}

.collezione-catalogo__eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.7rem;
	color: var(--color-bg-deep);
	opacity: 0.6;
	margin: 0 0 0.35rem;
}

.collezione-catalogo__text h2 {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
}

.collezione-catalogo__meta {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-bg-deep);
	opacity: 0.6;
}

.collezione-catalogo__cta {
	flex: none;
}

@media (max-width: 640px) {
	.collezione-catalogo__box {
		padding: 1.5rem;
	}

	.collezione-catalogo__cta {
		width: 100%;
		text-align: center;
	}
}

.collezione-modelli {
	scroll-margin-top: 6rem;
	background: var(--color-bg);
	padding: 5rem 1.5rem;
}

.collezione-modelli p {
	color: var(--color-gold-soft);
	opacity: 0.85;
}

.collezione-modelli__grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.75rem;
}

.modello-card {
	background: var(--color-bg-deep);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modello-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.45);
}

.modello-card__link {
	display: block;
	color: var(--color-cream);
}

.modello-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* Fondo chiaro: le foto prodotto sono su bianco/neutro, quindi con
	   object-fit: contain lo spazio attorno alla scarpa si fonde invece di
	   mostrare bande petrolio. */
	background: var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
}

.modello-card__media img {
	width: 100%;
	height: 100%;
	/* contain (non cover): mostra la scarpa INTERA senza ritagliarla. */
	object-fit: contain;
	padding: 0.6rem;
}

.modello-card__body {
	padding: 1.25rem;
}

.modello-card__body h3 {
	font-size: 1.1rem;
	color: var(--color-cream);
}

.modello-card__sku {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--color-gold-soft);
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------- Pagine Autenticazione (Login / Registrazione) ---------- */

.auth-hero {
	background: var(--color-bg);
	color: var(--color-cream);
	padding: 10rem 1.5rem 4rem;
	text-align: center;
}

/*
 * Variante con foto reale di sfondo (solo pagina Registrazione, per ora —
 * vedi page-registrazione.php): stesso pattern del video hero in home
 * (.hero__bg/.hero__bg::after), un velo scuro sopra la foto per mantenere
 * leggibile il testo crema/oro. La foto (collage prodotto) e' chiara, quindi
 * il velo qui e' piu' coprente e uniforme (non a gradiente direzionale come
 * in home) dato che il testo e' centrato, non allineato a sinistra.
 */
.auth-hero--collage {
	position: relative;
	overflow: hidden;
}

.auth-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--color-bg-deep);
}

.auth-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

.auth-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(var(--color-bg-deep-rgb), 0.82);
}

.auth-hero--collage .auth-hero__inner {
	position: relative;
	z-index: 1;
}

.auth-hero__inner {
	max-width: 640px;
	margin: 0 auto;
}

.auth-hero h1 {
	font-size: clamp(2.2rem, 4.5vw, 3rem);
	color: var(--color-cream);
	margin: 0.5rem 0 1.25rem;
}

.auth-hero__claim {
	color: var(--color-gold-soft);
	opacity: 0.9;
	max-width: 36em;
	margin: 0 auto;
}

.auth-body {
	padding: 4rem 1.5rem 6rem;
}

.auth-card {
	max-width: 480px;
	margin: -4rem auto 0;
	background: #fff;
	border-radius: 6px;
	padding: 2.5rem 2rem;
	box-shadow: 0 30px 60px -20px rgba(var(--color-bg-deep-rgb), 0.25);
	position: relative;
}

.diablesse-form label {
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-bg-deep);
	opacity: 0.7;
	margin-bottom: 0.4rem;
}

.diablesse-form input[type="text"],
.diablesse-form input[type="email"],
.diablesse-form input[type="tel"],
.diablesse-form input[type="password"],
.diablesse-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.95rem;
	padding: 0.75em 1em;
	border: 1px solid rgba(var(--color-bg-deep-rgb), 0.25);
	border-radius: 2px;
	background: #fff;
}

.diablesse-form input:focus,
.diablesse-form textarea:focus {
	outline: none;
	border-color: var(--color-gold);
}

.diablesse-form p {
	margin-bottom: 1.1rem;
}

.diablesse-form-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	font-size: 0.9rem;
	opacity: 1;
}

.diablesse-form-remember input {
	width: auto;
}

.diablesse-form button[type="submit"] {
	display: block;
	width: 100%;
	padding: 0.85em 1.8em;
	border: none;
	border-radius: 2px;
	background: var(--color-gold);
	color: var(--color-bg-deep);
	font-family: var(--font-body);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.diablesse-form button[type="submit"]:hover {
	background: var(--color-gold-soft);
	transform: translateY(-2px);
}

.diablesse-form-success {
	color: var(--color-bg-deep);
	background: var(--color-gold-soft);
	padding: 1em 1.2em;
	border-radius: 3px;
	font-size: 0.95rem;
}

.diablesse-form-error {
	color: var(--color-error);
	background: rgba(var(--color-error-rgb), 0.08);
	padding: 1em 1.2em;
	border-radius: 3px;
	font-size: 0.9rem;
}

.auth-forgot {
	text-align: center;
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
}

.auth-forgot a {
	color: var(--color-bg-deep);
	opacity: 0.75;
	border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.7);
	transition: opacity 0.2s ease;
}

.auth-forgot a:hover {
	opacity: 1;
}

.diablesse-form .diablesse-form-hint {
	font-size: 0.82rem;
	color: var(--color-bg-deep);
	opacity: 0.7;
	margin-top: -0.4rem;
}

.auth-switch {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 0.9rem;
	opacity: 0.8;
}

.auth-switch a {
	color: var(--color-bg-deep);
	border-bottom: 1px solid var(--color-gold);
	font-weight: 600;
}

@media (max-width: 600px) {
	.auth-hero {
		padding: 8rem 1.25rem 3rem;
	}
	.auth-card {
		margin-top: -3rem;
		padding: 2rem 1.5rem;
	}
}

/* ---------- CTA registrazione (pagina Collezioni, per chi non ha accesso) ---------- */

.collezioni-cta-banner {
	background: rgba(var(--color-gold-rgb), 0.12);
	border-top: 1px solid rgba(var(--color-gold-rgb), 0.3);
	border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.3);
	padding: 2.5rem 1.5rem;
}

.collezioni-cta-banner__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.collezioni-cta-banner__text {
	max-width: 42em;
	margin: 0;
	color: var(--color-bg-deep);
	opacity: 0.85;
}

@media (max-width: 700px) {
	.collezioni-cta-banner__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Singolo Modello ---------- */

.modello-hero {
	background: var(--color-bg);
	color: var(--color-cream);
	padding: 9rem 1.5rem 3rem;
	text-align: center;
}

.modello-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.modello-hero h1 {
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	color: var(--color-cream);
	margin: 0.4rem 0 0.5rem;
}

.modello-hero .section-eyebrow--gold a:hover {
	color: var(--color-gold-soft);
}

.modello-sku {
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-gold-soft);
	opacity: 0.8;
	margin: 0;
}

.modello-hero__back {
	display: inline-block;
	margin-top: 1.5rem;
}

/* Azioni dell'hero Modello: CTA verso il form d'ordine + ritorno alla
   collezione. Sostituiscono il vecchio .modello-hero__back da solo. */
.modello-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.modello-body {
	max-width: var(--container);
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

.modello-stage-wrap {
	margin-bottom: 2.5rem;
}

.modello-stage-slot {
	display: none;
}

.modello-stage-slot.is-active {
	display: block;
}

.modello-immagine {
	/*
	 * Prima l'immagine occupava sempre tutta la larghezza dello stage
	 * (width:100%) e l'altezza seguiva la proporzione reale della foto —
	 * per una foto molto verticale (es. inquadratura ravvicinata) lo stage
	 * diventava altissimo, costringendo a scrollare per vederlo tutto.
	 * Un limite di altezza (min tra il 68% del viewport e 640px, cosi' resta
	 * ragionevole anche su monitor molto grandi) + centraggio flex risolve
	 * senza deformare le foto orizzontali (che restano piu' basse del cap).
	 */
	max-height: min(68vh, 640px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	overflow: hidden;
	background: var(--color-bg-deep);
}

.modello-immagine img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(68vh, 640px);
	object-fit: contain;
	cursor: zoom-in;
}

/* ---------- Lightbox foto Modello ---------- */

.modello-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(var(--color-bg-deep-rgb), 0.94);
	touch-action: none;
}

.modello-lightbox.is-open {
	display: flex;
}

.modello-lightbox__stage {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: zoom-in;
}

.modello-lightbox.is-zoomed .modello-lightbox__stage {
	cursor: zoom-out;
}

.modello-lightbox__img {
	max-width: 88vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
	transform: scale(1);
	transform-origin: 50% 50%;
	transition: transform 0.18s ease-out;
	will-change: transform;
	-webkit-user-select: none;
	user-select: none;
}

.modello-lightbox.is-zoomed .modello-lightbox__img {
	transition: none;
}

.modello-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--color-bg-deep-rgb), 0.7);
	border: 1px solid rgba(var(--color-gold-rgb), 0.45);
	border-radius: 50%;
	color: var(--color-cream);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	transition: background .2s ease, border-color .2s ease;
}

.modello-lightbox__close:hover {
	background: rgba(var(--color-bg-deep-rgb), 0.9);
	border-color: var(--color-gold);
}

.modello-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--color-bg-deep-rgb), 0.55);
	border: 1px solid rgba(var(--color-gold-rgb), 0.4);
	border-radius: 50%;
	color: var(--color-cream);
	cursor: pointer;
	z-index: 3;
	transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

.modello-lightbox__nav:hover {
	background: rgba(var(--color-bg-deep-rgb), 0.85);
	border-color: var(--color-gold);
}

.modello-lightbox__nav--prev {
	left: 16px;
}

.modello-lightbox__nav--next {
	right: 16px;
}

.modello-lightbox__counter {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--color-cream);
	background: rgba(var(--color-bg-deep-rgb), 0.6);
	border: 1px solid rgba(var(--color-gold-rgb), 0.3);
	border-radius: 999px;
	padding: 4px 14px;
	z-index: 3;
}

.modello-lightbox__hint {
	position: absolute;
	bottom: 24px;
	right: 22px;
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: rgba(var(--color-cream-rgb, 245, 240, 230), 0.7);
	z-index: 3;
	pointer-events: none;
}

.modello-lightbox.is-zoomed .modello-lightbox__hint,
.modello-lightbox.is-zoomed .modello-lightbox__nav,
.modello-lightbox.is-zoomed .modello-lightbox__counter {
	opacity: 0;
	pointer-events: none;
}

body.modello-lightbox-lock {
	overflow: hidden;
}

@media (max-width: 640px) {
	.modello-lightbox__nav {
		width: 44px;
		height: 44px;
	}

	.modello-lightbox__nav--prev {
		left: 8px;
	}

	.modello-lightbox__nav--next {
		right: 8px;
	}

	.modello-lightbox__hint {
		display: none;
	}

	.modello-lightbox__img {
		max-width: 94vw;
		max-height: 82vh;
	}
}

@media (max-width: 640px) {
	.modello-immagine,
	.modello-immagine img {
		max-height: 56vh;
	}
}

.modello-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.modello-gallery__thumb {
	position: relative;
	width: 68px;
	height: 68px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: var(--color-bg-deep);
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.modello-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.modello-gallery__thumb:hover {
	opacity: 0.85;
}

.modello-gallery__thumb.is-active {
	opacity: 1;
	border-color: var(--color-gold);
}

.modello-gallery__badge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0.55rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 2px 0;
	background: rgba(var(--color-bg-deep-rgb), 0.75);
	color: var(--color-gold-soft);
}

.modello-content {
	max-width: 42em;
	color: var(--color-bg-deep);
	opacity: 0.85;
	margin-bottom: 2.5rem;
}

.modello-tacchi h3 {
	font-size: 1.4rem;
	margin-bottom: 1.25rem;
}

.tacchi-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
}

.tacchi-list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: #fff;
	border: 1px solid rgba(var(--color-bg-deep-rgb), 0.12);
	border-radius: 4px;
	padding: 0.5rem 0.9rem 0.5rem 0.5rem;
	font-size: 0.9rem;
}

.tacchi-list img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 3px;
}

@media (max-width: 600px) {
	.modello-hero {
		padding: 7rem 1.5rem 2.5rem;
	}
}

/* ---------- GSAP reveal helpers ---------- */

[data-anim] {
	opacity: 0;
}

.hero__title,
.hero__eyebrow,
.hero__claim,
.hero__actions {
	will-change: transform, opacity;
}

/* ============================================================
   Richiesta d'acquisto B2B — punto d'ingresso in header e
   contenitore della pagina "Il mio ordine".
   Il resto dello stile del flusso ordine vive nel plugin
   (diablesse-core/assets/css/ordine.css), che legge le stesse
   variabili di palette definite in :root qui sopra.
   ============================================================ */

.site-header__ordine-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.site-header__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--color-gold);
	color: var(--color-bg-deep);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.ordine-body {
	max-width: var(--container);
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

/* ---------- Pagina generica (Privacy/Cookie policy, ecc.) ---------- */

.page-hero {
	background: var(--color-bg);
	color: var(--color-cream);
	/* Il padding-top ampio compensa l'header fisso (stesso criterio di
	   .auth-hero/.collezione-hero): le prime righe non finiscono piu' sotto. */
	padding: 10rem 1.5rem 3rem;
	text-align: center;
}

.page-hero__inner {
	max-width: var(--container);
	margin: 0 auto;
}

.page-hero h1 {
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	color: var(--color-cream);
	margin: 0;
}

.page-body {
	padding: 3.5rem 1.5rem 5rem;
}

/* Contenuto "boxato" in una colonna leggibile su una card chiara. */
.page-body__card {
	max-width: 780px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid rgba(var(--color-bg-deep-rgb), 0.08);
	border-radius: 8px;
	box-shadow: 0 20px 50px -30px rgba(var(--color-bg-deep-rgb), 0.4);
	padding: clamp(1.75rem, 4vw, 3rem);
}

.page-content {
	color: var(--color-bg-deep);
	line-height: 1.7;
}

.page-content h2 {
	font-family: var(--font-title);
	font-size: 1.55rem;
	color: var(--color-bg-deep);
	margin: 2.4rem 0 0.8rem;
}

.page-content h2:first-child {
	margin-top: 0;
}

.page-content h3 {
	font-size: 1.15rem;
	color: var(--color-bg-deep);
	margin: 1.7rem 0 0.5rem;
}

.page-content p {
	margin: 0 0 1rem;
}

.page-content ul {
	margin: 0 0 1.2rem;
	padding-left: 1.3rem;
}

.page-content li {
	margin-bottom: 0.45rem;
}

.page-content a {
	color: var(--color-gold);
	text-decoration: underline;
}

.page-content a:hover {
	color: var(--color-bg-deep);
}

.page-content em {
	color: rgba(var(--color-bg-deep-rgb), 0.7);
}

/* ============================================================
   Modifiche revisione post-presentazione (2026-09)
   ============================================================ */

/* ---------- Hero: logo in basso a sinistra ---------- */

.hero__content--bottom-left {
	padding-top: 0;
	padding-bottom: clamp(3rem, 8vh, 6rem);
	text-align: left;
}

.hero__content--bottom-left .hero__title-logo {
	width: clamp(220px, 40vw, 520px);
}

.hero__content--bottom-left .hero__claim {
	margin: 0;
	max-width: 24em;
	font-size: clamp(1.05rem, 2.2vw, 1.5rem);
	letter-spacing: 0.02em;
}

/* ---------- Show/hide password (occhietto) ---------- */

.diablesse-pw-field {
	position: relative;
	display: block;
}

.diablesse-form .diablesse-pw-field input {
	padding-right: 2.8rem;
}

.diablesse-pw-toggle {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-bg-deep);
	opacity: 0.55;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.diablesse-pw-toggle:hover,
.diablesse-pw-toggle:focus-visible {
	opacity: 1;
	color: var(--color-gold);
	outline: none;
}

.diablesse-pw-icon {
	width: 20px;
	height: 20px;
	display: block;
}

/* Rispetta l'attributo hidden (il display:block qui sopra lo vinceva, quindi
   si vedevano entrambe le icone): solo una icona alla volta, l'altra nascosta.
   Il toggle occhio/occhio-barrato al clic e' gestito in main.js. */
.diablesse-pw-icon[hidden] {
	display: none;
}

/* ---------- Brand story: video click-to-play (predisposizione) ---------- */

.brand-story__play {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(var(--color-bg-deep-rgb), 0.35);
}

.brand-story__play img {
	width: 100%;
	display: block;
}

.brand-story__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--color-bg-deep-rgb), 0.55);
	border: 1px solid rgba(var(--color-gold-rgb), 0.6);
	border-radius: 50%;
	color: var(--color-cream);
	transition: background 0.25s ease, transform 0.25s ease;
}

.brand-story__play:hover .brand-story__play-icon,
.brand-story__play:focus-visible .brand-story__play-icon {
	background: rgba(var(--color-bg-deep-rgb), 0.78);
	transform: translate(-50%, -50%) scale(1.06);
}

.brand-story__play-icon svg {
	width: 30px;
	height: 30px;
	margin-left: 3px;
}

.brand-story__video {
	width: 100%;
	display: block;
	border-radius: 4px;
	box-shadow: 0 30px 60px -20px rgba(var(--color-bg-deep-rgb), 0.35);
}

/* ---------- Pagina "Crea il tuo modello" (bespoke Maison) ---------- */

.bespoke-hero {
	background: var(--color-bg);
	color: var(--color-cream);
	padding: 10rem 1.5rem 4rem;
	text-align: center;
}

.bespoke-hero__inner {
	max-width: 760px;
	margin: 0 auto;
}

.bespoke-hero h1 {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	color: var(--color-cream);
	margin: 0.5rem 0 1.25rem;
}

.bespoke-hero__claim {
	color: var(--color-gold-soft);
	opacity: 0.92;
	max-width: 40em;
	margin: 0 auto;
	font-size: 1.1rem;
}

.bespoke {
	max-width: var(--container);
	margin: 0 auto;
	padding: 5rem 1.5rem 6rem;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 4rem;
}

.bespoke__text h2 {
	font-size: clamp(1.8rem, 3.5vw, 2.5rem);
	margin-bottom: 1.25rem;
}

.bespoke__text p {
	color: var(--color-bg-deep);
	opacity: 0.88;
	max-width: 34em;
}

.bespoke__steps {
	list-style: none;
	margin: 1.75rem 0 2.25rem;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.bespoke__steps li {
	position: relative;
	padding-left: 1.9rem;
	color: var(--color-bg-deep);
	opacity: 0.9;
	font-size: 0.98rem;
}

.bespoke__steps li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-gold);
}

.bespoke__cta {
	margin-top: 0.5rem;
}

/* Bottone WhatsApp: verde WhatsApp riconoscibile, resta on-brand nel raggio
   e nella tipografia del resto dei .btn del sito. */
.btn--whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: #25d366;
	color: #0b2e13;
	font-weight: 600;
}

.btn--whatsapp:hover {
	background: #1fbf5b;
	transform: translateY(-2px);
}

.btn--whatsapp svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.bespoke__media {
	position: relative;
}

.bespoke__sketch img {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 30px 60px -20px rgba(var(--color-bg-deep-rgb), 0.35);
}

/* Segnaposto "bozzetto in arrivo" finche' il cliente non carica la foto. */
.bespoke__sketch-placeholder {
	aspect-ratio: 4 / 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-align: center;
	padding: 2rem;
	border: 1px dashed rgba(var(--color-gold-rgb), 0.5);
	border-radius: 6px;
	background: rgba(var(--color-gold-rgb), 0.06);
	color: var(--color-bg-deep);
}

.bespoke__sketch-placeholder svg {
	width: 44px;
	height: 44px;
	opacity: 0.5;
}

.bespoke__sketch-placeholder span {
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.bespoke__sketch-caption {
	margin: 0.9rem 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: var(--color-bg-deep);
	opacity: 0.65;
}

@media (max-width: 860px) {
	.bespoke {
		grid-template-columns: 1fr;
		padding: 3.5rem 1.5rem 4.5rem;
		gap: 2.5rem;
	}
	.bespoke__media {
		order: -1;
	}
}

/* ---------- Home: CTA servizio "Crea il tuo modello" (bespoke) ---------- */

.home-bespoke {
	padding: 6rem 1.5rem;
	/* Sfondo: pattern di bozzetti (a tema col servizio su misura) con sopra un
	   velo crema semi-trasparente, cosi' il pattern resta un accenno leggero e
	   il testo/pulsante restano perfettamente leggibili. Per rendere il pattern
	   piu'/meno presente, alzare/abbassare l'alpha del velo qui sotto. */
	background-color: var(--color-cream);
	background-image:
		linear-gradient( rgba(var(--color-cream-rgb), 0.74), rgba(var(--color-cream-rgb), 0.74) ),
		url('../images/bespoke-pattern.webp?v=1');
	background-repeat: no-repeat, repeat;
	background-size: auto, 620px auto;
	background-position: center, center;
	border-top: 1px solid rgba(var(--color-gold-rgb), 0.3);
	border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.3);
	text-align: center;
}

.home-bespoke__inner {
	max-width: 680px;
	margin: 0 auto;
}

.home-bespoke__inner h2 {
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin-bottom: 1rem;
}

.home-bespoke__inner p {
	color: var(--color-bg-deep);
	opacity: 0.85;
	max-width: 34em;
	margin: 0 auto 1.75rem;
}

/* ---------- Pagina "Crea il tuo modello": video nel riquadro laterale ----------
   Il clip e' gia' ritagliato (crop 632x470, watermark "AI" rimosso a monte con
   ffmpeg), quindi qui basta mostrarlo al suo ratio nel riquadro accanto al
   testo, stesso linguaggio visivo del bozzetto. */

.bespoke__video {
	border-radius: 6px;
	overflow: hidden;
	background: var(--color-bg-deep);
	box-shadow: 0 30px 60px -20px rgba(var(--color-bg-deep-rgb), 0.35);
}

.bespoke__video video {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Pagina 404 ---------- */

.error-404__hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* compensa l'header fisso come .page-hero */
	padding: 8rem 1.5rem 5rem;
	background: var(--color-bg-deep);
	color: var(--color-cream);
	text-align: center;
	overflow: hidden;
}

.error-404__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.16;
	filter: grayscale(0.6);
}

.error-404__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(var(--color-bg-deep-rgb), 0.35) 0%, rgba(var(--color-bg-deep-rgb), 0.92) 75%);
}

.error-404__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.error-404__code {
	font-family: var(--font-title);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(7rem, 22vw, 13rem);
	line-height: 0.9;
	margin: 0 0 1.5rem;
	color: transparent;
	-webkit-text-stroke: 1px var(--color-gold);
	letter-spacing: 0.02em;
	animation: error404-in 1.2s ease both;
}

.error-404__title {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	color: var(--color-cream);
	margin-bottom: 1rem;
	animation: error404-in 1.2s 0.15s ease both;
}

.error-404__text {
	color: rgba(var(--color-cream-rgb), 0.8);
	margin: 0 auto 2.25rem;
	max-width: 30em;
	animation: error404-in 1.2s 0.3s ease both;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	animation: error404-in 1.2s 0.45s ease both;
}

.error-404__links {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(var(--color-cream-rgb), 0.6);
}

.error-404__links a:hover {
	color: var(--color-gold);
}

@keyframes error404-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.error-404__code,
	.error-404__title,
	.error-404__text,
	.error-404__actions {
		animation: none;
	}
}