/**
 * Foggy Mug — stili del tema.
 *
 * Tutti i valori di colore, font, dimensioni e spaziature vengono dalle variabili
 * generate da theme.json (--wp--preset--*, --wp--custom--*).
 * Gli stati delle animazioni sono pilotati da assets/js/theme.js
 * (.fm-js sull'<html>, .is-shown, .is-on, .is-flipped, .is-scrolled, .is-visible).
 */

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

::selection {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white);
}

img {
	max-width: 100%;
	height: auto;
}

.wp-site-blocks > * {
	margin-block: 0;
}

/* Le sezioni della home gestiscono da sole i margini dei figli. */
:where(.fm-nav, .fm-hero, .fm-favola, .fm-miscele, .fm-origini, .fm-tostatura, .fm-ferrara, .fm-merch, .fm-social, .fm-footer) :is(p, h1, h2, h3, figure) {
	margin: 0;
}

:where(.fm-nav, .fm-hero, .fm-favola, .fm-miscele, .fm-origini, .fm-tostatura, .fm-ferrara, .fm-merch, .fm-social, .fm-footer) .wp-block-image img {
	display: block;
}

/* Il contenuto scorre sopra al footer sticky (z 0). */
.fm-main {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--black);
}

/* Evidenziazione inline (<mark class="has-inline-color fm-hl">). */
mark.fm-hl {
	background: transparent;
	color: var(--blend-hl, var(--wp--preset--color--coral));
}

/* ------------------------------------------------------------------ *
 * Elementi di brand riusabili (stili dei blocchi)
 * ------------------------------------------------------------------ */

/* Etichetta tracciata "01 // titolo". */
.is-style-fm-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--fog-400);
}

/* Doppia linea: 3px bold + 1.5px thin, separate da 3px. */
.wp-block-separator.is-style-fm-double-rule {
	width: 180px;
	max-width: 100%;
	height: calc(var(--wp--custom--stroke--bold) * 2 + var(--wp--custom--stroke--thin));
	border: 0;
	opacity: 1;
	background: linear-gradient(
		to bottom,
		var(--rule-1, var(--wp--preset--color--coral)) 0 var(--wp--custom--stroke--bold),
		transparent var(--wp--custom--stroke--bold) calc(var(--wp--custom--stroke--bold) * 2),
		var(--rule-2, var(--wp--preset--color--castle-2)) calc(var(--wp--custom--stroke--bold) * 2) 100%
	);
}

/* Doppia linea a tutta larghezza in testa a una sezione. */
.fm-blend::before,
.fm-ferrara::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--wp--custom--stroke--bold) * 2 + var(--wp--custom--stroke--thin));
	background: linear-gradient(
		to bottom,
		var(--rule-1) 0 var(--wp--custom--stroke--bold),
		transparent var(--wp--custom--stroke--bold) calc(var(--wp--custom--stroke--bold) * 2),
		var(--rule-2) calc(var(--wp--custom--stroke--bold) * 2) 100%
	);
}

/* Foto cerchio in bianco e nero, con velatura coral al passaggio. */
.wp-block-image.is-style-fm-circle {
	position: relative;
	width: min(100%, 300px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
}

.wp-block-image.is-style-fm-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1);
}

.wp-block-image.is-style-fm-circle::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--coral);
	mix-blend-mode: multiply;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.6s var(--wp--custom--motion--ease);
}

.wp-block-image.is-style-fm-circle:hover::after {
	opacity: 1;
}

/* Pulsante "ticket": bordo 3px + bordo interno 1.5px bianco, distanziati di 5px. */
.wp-block-button__link {
	--ticket: var(--wp--preset--color--coral);
	--ticket-ink: var(--wp--preset--color--white);
	display: block;
	padding: calc(18px + 5px + var(--wp--custom--stroke--thin)) calc(32px + 5px + var(--wp--custom--stroke--thin));
	border: var(--wp--custom--stroke--bold) solid var(--ticket);
	border-radius: 0;
	outline: var(--wp--custom--stroke--thin) solid var(--wp--preset--color--white);
	outline-offset: calc(-1 * (var(--wp--custom--stroke--bold) + 5px + var(--wp--custom--stroke--thin)));
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease), color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.is-style-pink .wp-block-button__link {
	--ticket: var(--wp--preset--color--castle-2);
	--ticket-ink: var(--wp--preset--color--ink);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var(--ticket);
	color: var(--ticket-ink);
}

.wp-block-button__link:focus-visible {
	box-shadow: 0 0 0 3px var(--wp--preset--color--black), 0 0 0 5px var(--ticket);
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Capolettera di brand (::first-letter: niente markup extra, resiste all'editor). */
.fm-dropcap::first-letter {
	float: left;
	margin: 0.06em 0.12em 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 92px;
	font-weight: 400;
	line-height: 0.76;
	color: var(--blend-1, var(--wp--preset--color--coral));
}

/* Pillole di nebbia: posizioni passate come custom property inline. */
.fm-fog,
.fm-hero__fog,
.fm-social__fog {
	position: absolute;
	pointer-events: none;
}

.fm-fog i,
.fm-hero__fog i,
.fm-social__fog i {
	position: absolute;
	top: var(--t);
	width: var(--w);
	height: var(--h, 9%);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--fog-color, var(--wp--preset--color--fog-800));
}

.fm-fog i.is-l,
.fm-hero__fog i.is-l {
	left: var(--x, var(--fog-x));
}

.fm-fog i.is-r,
.fm-hero__fog i.is-r {
	right: var(--x, var(--fog-x));
}

/* ------------------------------------------------------------------ *
 * Navigazione
 * ------------------------------------------------------------------ */

.fm-nav {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px var(--wp--custom--layout--gutter-nav);
	pointer-events: none;
	background: rgba(0, 0, 0, 0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	transition: background 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease, padding 0.5s ease;
}

.fm-nav.is-scrolled {
	padding-block: 30px;
	background: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.fm-nav > * {
	pointer-events: auto;
}

.fm-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fm-brand img {
	display: block;
	width: auto;
	height: 26px;
}

.fm-brand span {
	font: 700 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--logo);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
}

.fm-nav__menu,
.fm-nav__menu .wp-block-navigation__container {
	gap: 12px clamp(12px, 2vw, 28px);
}

.fm-nav__menu .wp-block-navigation-item__content {
	padding: 0;
	font: 500 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--nav);
	text-transform: uppercase;
	color: var(--wp--preset--color--fog-400);
	transition: color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.fm-nav__menu .wp-block-navigation-item__content:hover,
.fm-nav__menu .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Menu hamburger (overlay del blocco Navigazione) ------------------- */

/*
 * Il blocco passa all'hamburger sotto i 600px; il menu completo sta su
 * una riga solo da ~1010px, quindi estendiamo l'hamburger fino a 1023px.
 */
@media (min-width: 600px) and (max-width: 1023px) {
	.fm-nav__menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* Icona: tre pillole di nebbia sfalsate al posto delle linee standard. */
.fm-nav__menu .wp-block-navigation__responsive-container-open,
.fm-nav__menu .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	color: var(--wp--preset--color--white);
}

.fm-nav__menu .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.fm-nav__menu .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 30px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='4' rx='2' fill='white'/%3E%3Crect x='6' y='8' width='24' height='4' rx='2' fill='white'/%3E%3Crect x='12' y='16' width='18' height='4' rx='2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fm-nav__menu .wp-block-navigation__responsive-container-open:hover::before,
.fm-nav__menu .wp-block-navigation__responsive-container-open:focus-visible::before {
	filter: brightness(0.75);
}

/*
 * L'overlay è dentro .fm-nav: un backdrop-filter sull'antenato lo
 * confinerebbe alla barra, quindi a menu aperto lo togliamo.
 */
.fm-nav:has(.is-menu-open),
.has-modal-open .fm-nav {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Il logo resta visibile sopra l'overlay. */
.fm-nav:has(.is-menu-open) .fm-brand,
.has-modal-open .fm-nav .fm-brand {
	position: relative;
	z-index: 100001;
}

.has-modal-open .fm-totop {
	display: none;
}

/* Specificità 0,6,0: il core imposta sfondo bianco e testo nero con 0,5,0. */
.fm-nav .fm-nav__menu.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 26px var(--wp--custom--layout--gutter-nav) 40px;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	margin: 0;
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	gap: 0;
	padding-top: 88px;
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--fog-600);
	counter-reset: fm-nav;
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--fog-600);
	counter-increment: fm-nav;
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: baseline;
	gap: 18px;
	width: 100%;
	padding: 18px 0;
	font: 400 clamp(30px, 8vw, 56px)/0.9 var(--wp--preset--font-family--display);
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--white);
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	content: counter(fm-nav, decimal-leading-zero) " //";
	flex: none;
	min-width: 4.4em;
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--preset--color--coral);
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--coral);
}

.fm-nav .fm-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::after {
	content: "The special mood of Ferrara";
	margin-top: 40px;
	font: 400 var(--wp--preset--font-size--footer-tagline)/1.1 var(--wp--preset--font-family--script);
	color: var(--wp--preset--color--coral);
}

/* Torna su */
.fm-totop {
	position: fixed;
	right: var(--wp--custom--layout--gutter-nav);
	bottom: 4vh;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--wp--preset--color--white);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.fm-totop.is-visible {
	opacity: 0.45;
	pointer-events: auto;
}

.fm-totop.is-visible:hover,
.fm-totop.is-visible:focus-visible {
	opacity: 1;
	color: var(--wp--preset--color--white);
}

.fm-totop__label {
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.fm-totop__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
}

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

.fm-hero {
	position: relative;
	z-index: 1;
	height: 240vh;
	background: var(--wp--preset--color--black);
}

.fm-hero__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.fm-hero__giant {
	position: absolute;
	top: 15vh;
	left: 0;
	right: 0;
	z-index: 1;
	font: 400 var(--wp--preset--font-size--hero)/0.85 var(--wp--preset--font-family--display);
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--preset--color--fog-800);
}

.fm-hero__eyebrow {
	position: absolute;
	top: 13vh;
	left: 0;
	right: 0;
	z-index: 8;
	font: 700 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--castle-2);
}

.fm-hero__fog {
	left: 0;
	right: 0;
}

.fm-hero__fog--back {
	--fog-x: -6%;
	--fog-color: var(--wp--preset--color--fog-night);
	top: 20vh;
	height: 90vh;
	z-index: 2;
	opacity: 0.9;
}

.fm-hero__fog--mid {
	--fog-x: -8%;
	--fog-color: var(--wp--preset--color--fog-dusk);
	top: 100vh;
	height: 90vh;
	z-index: 4;
	opacity: 0.55;
	transform: translateY(-12vh);
}

.fm-hero__fog--front {
	--fog-x: -10%;
	--fog-color: var(--wp--preset--color--charcoal);
	top: 100vh;
	height: 100vh;
	z-index: 6;
	opacity: 0.72;
	transform: translateY(-4vh);
}

/* Posizioni di riposo (senza JS o con movimento ridotto); il JS le sovrascrive inline. */
.fm-hero__bag {
	position: absolute;
	left: 50%;
	bottom: 18vh;
	z-index: 3;
	height: min(58vh, 96vw);
	aspect-ratio: 712 / 1500;
	transform-origin: 50% 100%;
	will-change: transform;
}

.fm-hero__bag img {
	display: block;
	width: 100%;
	height: 100%;
}

.fm-hero__bag--castle {
	z-index: 5;
	transform: translateX(-50%) translateY(4vh) scale(0.94);
}

.fm-hero__bag--orlando,
.fm-hero__bag--bike {
	filter: brightness(0.62);
}

.fm-hero__bag--orlando {
	transform: translateX(-118%) translateY(-3vh) scale(0.8);
}

.fm-hero__bag--bike {
	transform: translateX(18%) translateY(-3vh) scale(0.8);
}

.fm-hero__cue,
.fm-hero__blends {
	position: absolute;
	bottom: 5vh;
	z-index: 8;
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--fog-400);
}

.fm-hero__cue {
	left: var(--wp--custom--layout--gutter-nav);
	display: flex;
	align-items: center;
	gap: 14px;
}

.fm-hero__cue span {
	display: block;
	width: 48px;
	height: 1px;
	background: currentColor;
}

.fm-hero__blends {
	right: var(--wp--custom--layout--gutter-nav);
}

/* Home mobile: scritta gigante più piccola, eyebrow su due righe se serve, nomi centrati sopra "Scorri". */
@media (max-width: 600px) {
	.fm-hero__giant {
		font-size: clamp(52px, 19vw, 340px);
	}

	.fm-hero__eyebrow {
		font-size: var(--wp--preset--font-size--xxs);
		line-height: 1.6;
		letter-spacing: 0.24em;
	}

	.fm-hero__blends {
		left: 0;
		right: 0;
		bottom: 11vh;
		font-size: 9px;
		letter-spacing: 0.28em;
		text-align: center;
	}
}

/* ------------------------------------------------------------------ *
 * Testate di sezione ("Le tre miscele" + "02 // LE MISCELE")
 * ------------------------------------------------------------------ */

.fm-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.fm-section-title {
	margin: 0;
	font: 400 var(--wp--preset--font-size--section-title)/var(--wp--custom--line-height--display) var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--white);
}

/* Parole lunghe ("l'ispirazione") più larghe dello schermo a 52px. */
@media (max-width: 600px) {
	.fm-section-title {
		font-size: min(var(--wp--preset--font-size--section-title), 11vw);
	}
}

.fm-section-meta {
	font: 700 var(--wp--preset--font-size--xxs)/2 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-align: right;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog-400);
}

/* Indicazione per il touch, solo su mobile. */
.fm-section-meta__hint {
	display: none;
}

@media (max-width: 600px) {
	.fm-section-meta {
		text-align: left;
	}

	.fm-section-meta__hint {
		display: inline;
	}
}

/* ------------------------------------------------------------------ *
 * 02 La favola
 * ------------------------------------------------------------------ */

.fm-favola {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	padding: var(--wp--custom--layout--section-y) var(--wp--custom--layout--gutter) 24vh;
	background: var(--wp--preset--color--black);
}

.fm-favola__inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 880px);
}

.fm-favola__tagline {
	margin: -8vh 0 14vh !important;
	font: 400 var(--wp--preset--font-size--tagline)/1.1 var(--wp--preset--font-family--script);
	text-align: center;
	color: var(--wp--preset--color--coral);
}

.fm-favola__mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	margin-bottom: 9vh !important;
}

.fm-favola__steam img {
	width: auto;
	height: 44px;
}

.fm-favola__mark .wp-block-separator {
	margin: 0;
}

.fm-favola__story {
	font: 400 var(--wp--preset--font-size--story)/1.42 var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--white);
	text-wrap: pretty;
}

/* Capolettera gigante con "fantasma" a contorno rosa sfalsato (text-shadow ad anello). */
.fm-dropcap--ghost::first-letter {
	margin: 0.08em 0.18em 0 0;
	font-size: clamp(150px, 17vw, 250px);
	line-height: 0.74;
	color: var(--wp--preset--color--coral);
	text-shadow:
		0.06em 0.06em 0 var(--wp--preset--color--black),
		calc(0.06em + 1px) 0.06em 0 var(--wp--preset--color--castle-2),
		calc(0.06em - 1px) 0.06em 0 var(--wp--preset--color--castle-2),
		0.06em calc(0.06em + 1px) 0 var(--wp--preset--color--castle-2),
		0.06em calc(0.06em - 1px) 0 var(--wp--preset--color--castle-2),
		calc(0.06em + 0.7px) calc(0.06em + 0.7px) 0 var(--wp--preset--color--castle-2),
		calc(0.06em - 0.7px) calc(0.06em - 0.7px) 0 var(--wp--preset--color--castle-2),
		calc(0.06em + 0.7px) calc(0.06em - 0.7px) 0 var(--wp--preset--color--castle-2),
		calc(0.06em - 0.7px) calc(0.06em + 0.7px) 0 var(--wp--preset--color--castle-2);
}

/* ------------------------------------------------------------------ *
 * 03 Le miscele
 * ------------------------------------------------------------------ */

.fm-miscele {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--black);
}

.fm-miscele > .fm-section-head {
	padding: 0 var(--wp--custom--layout--gutter) 10vh;
}

.is-blend-castle {
	--blend-1: var(--wp--preset--color--castle-1);
	--blend-2: var(--wp--preset--color--castle-2);
	--blend-accent: var(--wp--preset--color--castle-1);
	--blend-hl: var(--wp--preset--color--coral);
}

.is-blend-orlando {
	--blend-1: var(--wp--preset--color--orlando-1);
	--blend-2: var(--wp--preset--color--orlando-2);
	--blend-accent: var(--wp--preset--color--orlando-2);
	--blend-hl: var(--wp--preset--color--orlando-2);
}

.is-blend-bike {
	--blend-1: var(--wp--preset--color--bike-1);
	--blend-2: var(--wp--preset--color--bike-2);
	--blend-accent: var(--wp--preset--color--bike-2);
	--blend-hl: var(--wp--preset--color--bike-2);
}

.fm-blend {
	--rule-1: var(--blend-1);
	--rule-2: var(--blend-2);
	position: relative;
	overflow: hidden;
	padding: 16vh var(--wp--custom--layout--gutter);
	background: var(--wp--preset--color--charcoal);
}

.fm-blend + .fm-blend {
	border-top: 8px solid var(--wp--preset--color--black);
}

.fm-blend__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	align-items: center;
	gap: 7vw;
}

.fm-blend__art {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6vh;
}

.fm-blend__art > .fm-fog {
	inset: 0;
}

.fm-blend__illustration,
.fm-blend__label {
	position: relative;
}

.fm-blend__illustration img,
.fm-blend__label img {
	width: 100%;
}

.is-blend-castle .fm-blend__illustration {
	width: 100%;
	max-width: 620px;
}

.is-blend-orlando .fm-blend__illustration {
	width: 78%;
	max-width: 480px;
}

.is-blend-bike .fm-blend__illustration {
	width: 86%;
	max-width: 540px;
}

.fm-blend__label {
	width: 240px;
	transition: transform 1.2s var(--wp--custom--motion--ease);
}

/* La confezione appare sopra l'illustrazione quando la scheda entra in vista. */
.fm-blend__bag {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	height: min(57vh, 108%);
	opacity: 0;
	transform: translate(-50%, -44%) scale(0.94);
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
	pointer-events: none;
	transition: opacity 1.2s var(--wp--custom--motion--ease), transform 1.2s var(--wp--custom--motion--ease);
}

.fm-blend__bag img {
	width: auto;
	height: 100%;
	max-width: none;
}

.fm-blend__bag.is-on {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/*
 * Colonne impilate (sotto ~1037px la griglia 2×420px + 7vw non ci sta più):
 * la confezione copre solo l'illustrazione, così l'etichetta non scende
 * sopra al testo della miscela.
 */
@media (max-width: 1037px) {
	.fm-blend__bag {
		top: 0;
		height: calc(100% - 6vh - 60px);
		transform: translate(-50%, 6%) scale(0.94);
	}

	.fm-blend__bag.is-on {
		transform: translate(-50%, 0) scale(1);
	}
}

.fm-blend__text {
	display: flex;
	flex-direction: column;
	gap: 34px;
	max-width: 560px;
}

.fm-blend__eyebrow {
	font: 700 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--blend);
	text-transform: uppercase;
	color: var(--blend-accent);
}

.fm-blend__title {
	font: 400 var(--wp--preset--font-size--blend-title)/var(--wp--custom--line-height--display) var(--wp--preset--font-family--display);
	color: var(--blend-2);
}

.fm-blend__story {
	font: 400 var(--wp--preset--font-size--lg)/var(--wp--custom--line-height--story) var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--mist);
	text-wrap: pretty;
}

.fm-specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px 28px;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--fog-600);
}

.fm-specs__label {
	font: 700 var(--wp--preset--font-size--xxs)/1.7 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--xwide);
	text-transform: uppercase;
	color: var(--blend-accent);
}

.fm-specs__value {
	font: 400 15px/1.6 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------ *
 * 04 Singola origine
 * ------------------------------------------------------------------ */

/*
 * z-index 2: a metà rotazione le card sbordano in prospettiva; senza, lo sbordo
 * dell'ultima riga finirebbe sotto la sezione successiva. overflow-x: clip evita
 * lo scroll orizzontale quando ruota una card sul bordo dello schermo.
 */
.fm-origini {
	position: relative;
	z-index: 2;
	overflow-x: clip;
	padding: var(--wp--custom--layout--section-y) 0 0;
	background: var(--wp--preset--color--black);
}

.fm-origini > .fm-section-head {
	padding: 0 var(--wp--custom--layout--gutter) 8vh;
}

.fm-origini__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, 30%)), 1fr));
	gap: 0;
}

.is-origin-cuba      { --o-bg: var(--wp--preset--color--origin-cuba);      --o-fg: var(--wp--preset--color--origin-cuba-dark);      --art-h: 17vh; --art-mini: 84px; }
.is-origin-ethiopia  { --o-bg: var(--wp--preset--color--origin-ethiopia);  --o-fg: var(--wp--preset--color--origin-ethiopia-dark);  --art-h: 26vh; --art-mini: 129px; }
.is-origin-india     { --o-bg: var(--wp--preset--color--origin-india);     --o-fg: var(--wp--preset--color--origin-india-dark);     --art-h: 18.3vh; --art-mini: 91px; }
.is-origin-brasil    { --o-bg: var(--wp--preset--color--origin-brasil);    --o-fg: var(--wp--preset--color--origin-brasil-dark);    --art-h: 19.1vh; --art-mini: 95px; }
.is-origin-costarica { --o-bg: var(--wp--preset--color--origin-costarica); --o-fg: var(--wp--preset--color--origin-costarica-dark); --art-h: 23.3vh; --art-mini: 116px; }
.is-origin-colombia  { --o-bg: var(--wp--preset--color--origin-colombia);  --o-fg: var(--wp--preset--color--origin-colombia-dark);  --art-h: 25.5vh; --art-mini: 127px; }
.is-origin-guatemala { --o-bg: var(--wp--preset--color--origin-guatemala); --o-fg: var(--wp--preset--color--origin-guatemala-dark); --art-h: 22vh; --art-mini: 109px; }

/* La card che ruota passa sopra alle vicine; torna giù solo a rotazione finita (0.9s). */
.fm-origin {
	position: relative;
	z-index: 0;
	height: max(64vh, 520px);
	perspective: 1600px;
	cursor: pointer;
	transition: z-index 0s 0.9s;
}

.fm-origin.is-flipped {
	z-index: 1;
	transition-delay: 0s;
}

.fm-origin:focus-visible,
.fm-origin:has(.fm-origin__link:focus-visible),
.fm-origin:has(.fm-origin__title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: -6px;
	z-index: 1;
}

.fm-origin__flip {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.9s var(--wp--custom--motion--ease);
}

.fm-origin.is-flipped .fm-origin__flip {
	transform: rotateY(180deg);
}

.fm-origin__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	overflow: hidden;
	padding: 4vh 2.4vw;
	background: var(--o-bg);
	color: var(--o-fg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.fm-origin__face--back {
	transform: rotateY(180deg);
}

.fm-origin__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.fm-origin__art,
.fm-origin__bag {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1vh 1vw;
}

.fm-origin__art img {
	width: auto;
	max-width: 88%;
	height: var(--art-h);
	object-fit: contain;
}

.fm-origin__bag img {
	width: auto;
	max-width: none;
	height: 100%;
	max-height: 40vh;
	transform: translateX(15%);
}

.fm-origin__name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	margin-bottom: -4vh !important;
	padding: 3.2vh 0;
	border-top: 1px solid color-mix(in srgb, currentColor 50%, transparent);
	text-align: center;
}

.fm-origin__title {
	margin: 0 0 -8px !important;
	font: 400 var(--wp--preset--font-size--origin-title)/0.82 var(--wp--preset--font-family--display);
	text-transform: uppercase;
	text-wrap: balance;
	color: inherit;
}

/* Il nome porta alla scheda: stesso aspetto del testo, focus sulla card. */
.fm-origin__link,
.fm-origin__link:hover,
.fm-origin__title a,
.fm-origin__title a:hover {
	color: inherit;
}

.fm-origin__link:focus-visible,
.fm-origin__title a:focus-visible {
	outline: none;
}

.fm-origin__variety {
	font: italic 600 18px/1.15 var(--wp--preset--font-family--slab);
}

/* ------------------------------------------------------------------ *
 * 05 Come tostiamo
 * ------------------------------------------------------------------ */

.fm-tostatura {
	position: relative;
	z-index: 1;
	padding: 24vh var(--wp--custom--layout--gutter) var(--wp--custom--layout--section-y);
	background: var(--wp--preset--color--black);
}

.fm-tostatura > .fm-section-head,
.fm-ferrara > .fm-section-head {
	margin-bottom: 12vh;
}

.fm-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 4vw;
}

.fm-step {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-top: 26px;
	border-top: var(--wp--custom--stroke--bold) solid var(--wp--preset--color--coral);
}

.fm-step__num {
	font: 400 96px/0.8 var(--wp--preset--font-family--display);
	color: transparent;
	-webkit-text-stroke: var(--wp--custom--stroke--thin) var(--wp--preset--color--coral);
}

.fm-step__text {
	font: 400 26px/1.3 var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--white);
}

.fm-step__text strong {
	font-weight: 700;
	color: var(--wp--preset--color--castle-2);
}

/* ------------------------------------------------------------------ *
 * 06 Ferrara
 * ------------------------------------------------------------------ */

.fm-ferrara {
	--rule-1: var(--wp--preset--color--coral);
	--rule-2: var(--wp--preset--color--castle-2);
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: var(--wp--custom--layout--section-y) var(--wp--custom--layout--gutter);
	background: var(--wp--preset--color--charcoal);
}

.fm-ferrara__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 5vw;
}

.fm-ferrara__item {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.fm-ferrara__label {
	font: 700 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--blend);
	text-transform: uppercase;
	color: var(--wp--preset--color--coral);
}

.fm-ferrara__text {
	font: 400 var(--wp--preset--font-size--md)/1.7 var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--fog-200);
	text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
 * 07 Motivation cup
 * ------------------------------------------------------------------ */

.fm-merch {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: var(--wp--custom--layout--section-y) 0 18vh;
	background: var(--wp--preset--color--black);
}

.fm-marquee {
	display: flex;
	align-items: center;
	gap: 5vw;
	font: 400 var(--wp--preset--font-size--marquee)/1 var(--wp--preset--font-family--display);
	text-transform: uppercase;
	white-space: nowrap;
	will-change: transform;
}

.fm-marquee .is-coral { --c: var(--wp--preset--color--coral); }
.fm-marquee .is-pink  { --c: var(--wp--preset--color--castle-2); }
.fm-marquee .is-sky   { --c: var(--wp--preset--color--bike-2); }
.fm-marquee .is-amber { --c: var(--wp--preset--color--orlando-2); }
.fm-marquee .is-green { --c: var(--wp--preset--color--bike-1); }

.fm-marquee__coral {
	color: var(--wp--preset--color--coral);
}

.fm-marquee__purple {
	color: var(--wp--preset--color--orlando-1);
}

.fm-marquee__outline {
	color: transparent;
	-webkit-text-stroke: var(--wp--custom--stroke--thin) var(--c);
}

.fm-marquee__star {
	font-size: 0.4em;
	color: var(--c);
}

.fm-marquee__script {
	font-family: var(--wp--preset--font-family--script);
	text-transform: none;
	color: var(--c);
	-webkit-text-stroke: 0;
}

.fm-merch__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 12px;
	padding: 12vh var(--wp--custom--layout--gutter) 0;
}

.fm-merch__mockup img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.fm-merch__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	padding: 6vh var(--wp--custom--layout--gutter) 0;
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--fog-400);
}

/* ------------------------------------------------------------------ *
 * 08 Follow your mug
 * ------------------------------------------------------------------ */

.fm-social {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6vh;
	padding: 16vh var(--wp--custom--layout--gutter) 24vh;
	overflow-x: clip;
	text-align: center;
	background: var(--wp--preset--color--black);
}

.fm-social > .is-style-fm-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
}

.fm-social__title {
	font: 400 var(--wp--preset--font-size--social-title)/var(--wp--custom--line-height--display) var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--white);
}

.fm-social .wp-block-buttons {
	justify-content: center;
}

/* Nebbia nera che sfuma la sezione dentro al footer. */
.fm-social__fog {
	inset: 0;
	--fog-color: var(--wp--preset--color--black);
}

.fm-social__fog i {
	top: calc(100% + var(--t));
	left: var(--l, auto);
	right: var(--r, auto);
}

/* ------------------------------------------------------------------ *
 * Footer (sticky: si rivela sotto al contenuto)
 * ------------------------------------------------------------------ */

.wp-site-blocks > footer.wp-block-template-part {
	position: sticky;
	bottom: 0;
	z-index: 0;
}

.fm-footer {
	overflow: hidden;
	padding: 16vh var(--wp--custom--layout--gutter) 5vh;
	background: var(--wp--preset--color--charcoal);
}

.fm-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.5vh;
	margin-bottom: 8vh !important;
}

.fm-footer__logo {
	width: min(420px, 80vw, 48vh);
}

.fm-footer__logo img {
	width: 100%;
}

.fm-footer__tagline {
	font: 400 var(--wp--preset--font-size--footer-tagline)/1.1 var(--wp--preset--font-family--script);
	color: var(--wp--preset--color--coral);
}

.fm-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 4vh 40px;
	padding-top: 4vh;
	border-top: 1px solid var(--wp--preset--color--fog-600);
}

.fm-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font: 400 14px/1.7 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--fog-200);
}

.fm-footer__label {
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--coral);
}

.fm-footer__monogram {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.fm-footer__monogram img {
	width: auto;
	height: 84px;
}

/* ------------------------------------------------------------------ *
 * Home — mobile (tavola "Home — Mobile", 390px)
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.fm-favola__tagline {
		margin-bottom: 10vh !important;
	}

	.fm-favola__story {
		font-size: clamp(22px, 5.6vw, 26px);
	}

	.fm-dropcap--ghost::first-letter {
		font-size: clamp(104px, 28vw, 150px);
	}

	.fm-blend {
		padding-block: 12vh;
	}

	.fm-blend__grid {
		gap: 8vh;
	}

	.fm-blend__story {
		font-size: 18px;
	}

	.fm-blend__story.fm-dropcap::first-letter {
		font-size: 72px;
	}

	.fm-step__text {
		font-size: 22px;
	}

	.fm-social .wp-block-button__link {
		padding-inline: calc(18px + 5px + var(--wp--custom--stroke--thin));
		font-size: var(--wp--preset--font-size--xxs);
		letter-spacing: 0.24em;
	}

	.fm-totop__label {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Pagine interne (page, single, index, 404)
 * ------------------------------------------------------------------ */

.fm-page {
	min-height: 70vh;
	padding: 20vh var(--wp--custom--layout--gutter) 16vh;
}

.fm-page > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.fm-page__title {
	font: 400 var(--wp--preset--font-size--section-title)/var(--wp--custom--line-height--display) var(--wp--preset--font-family--display);
}

.fm-page .wp-block-separator.is-style-fm-double-rule {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
}

.fm-404 {
	padding-block: calc(20vh + 40px) 200px;
}

/* Articolo: immagine in evidenza in bianco e nero. */
.fm-page__media img {
	display: block;
	width: 100%;
	filter: grayscale(1) contrast(1.1);
}

.fm-page__lead {
	font: 400 var(--wp--preset--font-size--xl)/1.4 var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--mist);
}

.fm-prose {
	font: 400 var(--wp--preset--font-size--lg)/var(--wp--custom--line-height--story) var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--mist);
}

.fm-prose > * + * {
	margin-block-start: 1.2em;
}

.fm-prose > :is(h2, h3, h4) {
	margin-block-start: 1.6em;
	color: var(--wp--preset--color--white);
}

.fm-prose a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fm-prose :is(ul, ol) {
	padding-left: 1.2em;
}

.fm-prose li + li {
	margin-top: 0.4em;
}

.fm-prose .wp-block-quote {
	line-height: 1.4;
	color: var(--wp--preset--color--white);
}

/* Articolo precedente / successivo. */
.fm-page > .fm-page__postnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 40px;
	margin-block-start: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--fog-600);
}

.fm-page__nav,
.fm-page__nav a {
	font: 700 var(--wp--preset--font-size--xxs)/1.6 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.fm-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--stroke--bold) solid var(--wp--preset--color--coral);
}

.fm-card__title {
	font: 400 var(--wp--preset--font-size--xl)/1 var(--wp--preset--font-family--display);
}

.fm-card__title a {
	color: var(--wp--preset--color--white);
}

.fm-card__excerpt {
	font: 400 var(--wp--preset--font-size--md)/1.7 var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--fog-200);
}

.fm-page > .fm-posts {
	margin-block-start: var(--wp--preset--spacing--80);
}

.fm-posts .wp-block-post-template {
	gap: var(--wp--preset--spacing--80) 4vw;
}

.fm-pagination .current {
	color: var(--wp--preset--color--white);
}

.fm-pagination {
	margin-top: var(--wp--preset--spacing--80);
	gap: var(--wp--preset--spacing--50);
	font: 700 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Scheda singola origine (CPT fm_origine, single-fm_origine.html)
 * --o-bg / --o-fg arrivano da .is-origin-{slug} sul body (inc/origins.php).
 * ------------------------------------------------------------------ */

:where(.fm-origine) :is(p, h1, h2, h3, figure) {
	margin: 0;
}

/* Banda nera sotto la barra fissa, come nel design. */
.fm-origine {
	padding-top: 78px;
}

.fm-origine .fm-section-head {
	gap: 24px 40px;
	margin-bottom: 72px;
}

.fm-origine__title {
	font: 400 var(--wp--preset--font-size--origin-section)/var(--wp--custom--line-height--display) var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--white);
}

/* Testata colorata ---------------------------------------------------- */

.fm-oh {
	position: relative;
	overflow: hidden;
	padding: 56px var(--wp--custom--layout--gutter) 96px;
	background: var(--o-bg);
	color: var(--wp--preset--color--charcoal);
}

.fm-oh a {
	color: var(--wp--preset--color--charcoal);
}

.fm-oh__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 56px;
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.fm-oh__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	align-items: center;
	gap: 6vw;
}

.fm-oh__text {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 620px;
}

.fm-oh__title {
	/* Il blocco Titolo spezza le parole: qui il nome resta intero, come nel design. */
	word-break: normal;
	overflow-wrap: normal;
	font: 400 var(--wp--preset--font-size--origin-hero)/0.82 var(--wp--preset--font-family--display);
	/* Nomi lunghi: la parola più lunga (--chars, da inc/origins.php) entra nella colonna. */
	font-size: min(var(--wp--preset--font-size--origin-hero), calc(100cqi / (var(--chars, 6) * 0.72)));
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--o-fg);
}

.fm-oh__variety {
	margin-top: -8px !important;
	font: italic 600 var(--wp--preset--font-size--origin-variety)/1.1 var(--wp--preset--font-family--slab);
}

.fm-oh .wp-block-separator.fm-oh__rule {
	--rule-1: var(--o-fg);
	--rule-2: var(--wp--preset--color--charcoal);
	margin: 0;
}

.fm-oh__intro p {
	max-width: 520px;
	margin: 0;
	font: 400 22px/1.5 var(--wp--preset--font-family--slab);
}

.fm-oh__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
}

.fm-ticket-ink .wp-block-button__link {
	--ticket: var(--wp--preset--color--charcoal);
	--ticket-ink: var(--o-bg);
	color: var(--wp--preset--color--charcoal);
	outline-color: var(--wp--preset--color--charcoal);
}

.fm-ticket-ink .wp-block-button__link:hover,
.fm-ticket-ink .wp-block-button__link:focus-visible {
	color: var(--ticket-ink);
	outline-color: var(--o-bg);
}

.fm-oh__more a {
	display: block;
	padding: 18px 8px;
	border-bottom: var(--wp--custom--stroke--thin) solid var(--wp--preset--color--charcoal);
	font: 700 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.fm-oh__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 560px;
}

.fm-oh__fog {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.fm-oh__fog i {
	position: absolute;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--o-bg), var(--o-fg) 20%);
}

.fm-oh__fog i:nth-child(1) { left: -10%; top: 10%; width: 62%; }
.fm-oh__fog i:nth-child(2) { right: -14%; top: 28%; width: 58%; }
.fm-oh__fog i:nth-child(3) { left: -6%; top: 58%; width: 48%; }
.fm-oh__fog i:nth-child(4) { right: -10%; top: 78%; width: 64%; }

.fm-oh__art {
	position: absolute;
	top: 4%;
	left: 0;
	width: 54%;
	max-width: 340px;
}

.fm-oh__art img {
	display: block;
	width: 100%;
}

.fm-oh__bag {
	position: relative;
}

.fm-oh__bag img {
	display: block;
	width: auto;
	max-width: 100%;
	height: min(560px, 120vw);
	transform: translateX(18%);
	filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent));
}

/* Scheda tecnica e Come gustarlo (fondo charcoal, doppia linea in testa) */

.fm-scheda,
.fm-gustarlo {
	position: relative;
	padding: 120px var(--wp--custom--layout--gutter);
	background: var(--wp--preset--color--charcoal);
}

.fm-scheda {
	--rule-1: var(--o-fg);
	--rule-2: var(--o-bg);
	padding-top: 112px;
}

.fm-gustarlo {
	--rule-1: var(--wp--preset--color--coral);
	--rule-2: var(--wp--preset--color--castle-2);
}

.fm-scheda::before,
.fm-gustarlo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--wp--custom--stroke--bold) * 2 + var(--wp--custom--stroke--thin));
	background: linear-gradient(
		to bottom,
		var(--rule-1) 0 var(--wp--custom--stroke--bold),
		transparent var(--wp--custom--stroke--bold) calc(var(--wp--custom--stroke--bold) * 2),
		var(--rule-2) calc(var(--wp--custom--stroke--bold) * 2) 100%
	);
}

.fm-specs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	border-top: 1px solid var(--wp--preset--color--fog-600);
}

.fm-spec {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px 28px 0;
	border-bottom: 1px solid var(--wp--preset--color--fog-600);
}

.fm-spec__label {
	font: 700 var(--wp--preset--font-size--xxs)/1.7 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--xwide);
	text-transform: uppercase;
	color: var(--o-bg);
}

.fm-spec__value {
	font: 400 18px/1.5 var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--white);
}

.fm-meters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 48px 6vw;
	margin-top: 72px;
}

.fm-meter {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fm-meter .fm-spec__label {
	line-height: 1;
}

/* Tostatura: il chicco attivo dipende da .fm-roast-{chiaro|medio|scuro} sul body. */
.fm-roastmeter {
	--bean-light: var(--wp--custom--roast--light);
	--bean-medium: var(--wp--custom--roast--medium);
	--bean-dark: var(--wp--custom--roast--dark);
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.fm-bean {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font: 700 var(--wp--preset--font-size--xxs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fog-400);
}

.fm-bean svg {
	display: block;
}

.fm-bean :is(ellipse, path) {
	stroke: var(--wp--preset--color--fog-600);
}

.fm-roast-chiaro .fm-bean--chiaro,
.fm-roast-medio .fm-bean--medio,
.fm-roast-scuro .fm-bean--scuro {
	color: var(--wp--preset--color--white);
}

.fm-roast-chiaro .fm-bean--chiaro ellipse,
.fm-roast-medio .fm-bean--medio ellipse,
.fm-roast-scuro .fm-bean--scuro ellipse {
	stroke: var(--o-bg);
}

.fm-roast-chiaro .fm-bean--chiaro path,
.fm-roast-medio .fm-bean--medio path,
.fm-roast-scuro .fm-bean--scuro path {
	stroke: var(--wp--preset--color--white);
}

.fm-roast-chiaro .fm-bean--chiaro ellipse { fill: var(--bean-light); }
.fm-roast-medio .fm-bean--medio ellipse { fill: var(--bean-medium); }
.fm-roast-scuro .fm-bean--scuro ellipse { fill: var(--bean-dark); }

/* Nebbia: le prime N pillole piene, con .fm-fog-{1..5} sul body. */
.fm-fogmeter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.fm-fogmeter__pills {
	display: flex;
	gap: 10px;
}

.fm-fogmeter__pills i {
	display: block;
	width: 48px;
	height: 16px;
	border: var(--wp--custom--stroke--thin) solid var(--wp--preset--color--fog-600);
	border-radius: var(--wp--custom--radius--pill);
}

.fm-fog-1 .fm-fogmeter__pills i:nth-child(-n+1),
.fm-fog-2 .fm-fogmeter__pills i:nth-child(-n+2),
.fm-fog-3 .fm-fogmeter__pills i:nth-child(-n+3),
.fm-fog-4 .fm-fogmeter__pills i:nth-child(-n+4),
.fm-fog-5 .fm-fogmeter__pills i:nth-child(-n+5) {
	border-color: var(--o-bg);
	background: var(--o-bg);
}

.fm-fogmeter__value {
	margin-left: 14px !important;
	font: 400 var(--wp--preset--font-size--xxl)/1 var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--white);
}

/* La storia ------------------------------------------------------------ */

.fm-ostoria {
	padding: 140px var(--wp--custom--layout--gutter);
	background: var(--wp--preset--color--black);
}

.fm-ostoria__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	align-items: center;
	gap: 64px 6vw;
	max-width: 1200px;
	margin: 0 auto;
}

.fm-ostoria__photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.fm-ostoria__photo .wp-block-image.is-style-fm-circle {
	width: min(100%, 340px);
}

.fm-ostoria__label {
	font: 700 var(--wp--preset--font-size--xs)/1 var(--wp--preset--font-family--sans);
	letter-spacing: var(--wp--custom--letter-spacing--blend);
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--coral);
}

.fm-ostoria__text {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.fm-ostoria__story {
	--blend-1: var(--o-bg);
	font: 400 var(--wp--preset--font-size--origin-story)/1.5 var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--mist);
}

.fm-ostoria__story > * + * {
	margin-top: 1em;
}

.fm-ostoria__story .fm-dropcap::first-letter {
	font-size: 96px;
}

.fm-ostoria__tagline {
	font: 400 var(--wp--preset--font-size--footer-tagline)/1.1 var(--wp--preset--font-family--script);
	color: var(--wp--preset--color--coral);
}

/* Come gustarlo: il metodo consigliato dipende da .fm-method-{slug} sul body. */
.fm-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 4vw;
}

.fm-method {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 26px;
	border-top: var(--wp--custom--stroke--bold) solid var(--wp--preset--color--fog-600);
}

.fm-method__icon {
	display: block;
	stroke: var(--wp--preset--color--castle-2);
}

.fm-method__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.fm-method__name {
	font: 400 34px/1 var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--white);
}

.fm-method__badge {
	display: none;
	padding: 6px 8px;
	font: 700 9px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
	background: var(--o-bg);
}

.fm-method-moka .fm-method--moka,
.fm-method-espresso .fm-method--espresso,
.fm-method-filtro .fm-method--filtro {
	border-top-color: var(--wp--preset--color--coral);
}

.fm-method-moka .fm-method--moka .fm-method__badge,
.fm-method-espresso .fm-method--espresso .fm-method__badge,
.fm-method-filtro .fm-method--filtro .fm-method__badge {
	display: block;
}

.fm-method__text {
	font: 400 18px/1.6 var(--wp--preset--font-family--slab);
	color: var(--wp--preset--color--fog-200);
}

/* Le altre origini (Query Loop: ogni <li> ha .is-origin-{slug}) ------- */

.fm-altre {
	padding-top: 140px;
	background: var(--wp--preset--color--black);
}

.fm-altre > .fm-section-head {
	margin-bottom: 0;
	padding: 0 var(--wp--custom--layout--gutter) 64px;
}

.fm-altre .wp-block-post-template.fm-altre__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fm-altre .wp-block-post {
	min-width: 0;
}

/* Card girevole della home in formato ridotto (.fm-origin--mini). */
.fm-origin--mini {
	height: 400px;
}

.fm-origin--mini .fm-origin__face {
	padding: 24px 20px;
}

.fm-origin--mini :is(.fm-origin__art, .fm-origin__bag) {
	padding: 8px 0;
}

.fm-origin--mini .fm-origin__art img {
	height: var(--art-mini);
}

.fm-origin--mini .fm-origin__bag img {
	max-height: 230px;
}

.fm-origin--mini .fm-origin__name {
	margin-bottom: -24px !important;
	padding: 16px 0;
}

.fm-origin--mini .fm-origin__title {
	margin: 0 !important;
	font-size: 30px;
	line-height: 0.86;
}

.fm-origin--mini .fm-origin__variety {
	font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * Animazioni guidate dal JS (solo con JS attivo e movimento consentito)
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.fm-js .fm-reveal {
		opacity: 0;
		transform: translateY(40px);
		transition: opacity 1s var(--wp--custom--motion--ease), transform 1s var(--wp--custom--motion--ease);
	}

	.fm-js .fm-reveal.is-above {
		transform: translateY(-40px);
	}

	.fm-js .fm-reveal.is-shown {
		opacity: 1;
		transform: none;
	}

	.fm-js .fm-reveal[class*="fm-delay-"] {
		transition-duration: 1.5s;
	}

	/* Le card delle origini sono anche reveal: va mantenuto il ritardo sullo z-index. */
	.fm-js .fm-origin.fm-reveal {
		transition: opacity 1s var(--wp--custom--motion--ease), transform 1s var(--wp--custom--motion--ease), z-index 0s 0.9s;
	}

	.fm-js .fm-origin.fm-reveal.is-flipped {
		transition-delay: 0s, 0s, 0s;
	}

	.fm-js .fm-delay-00 { transition-delay: 0s; }
	.fm-js .fm-delay-015 { transition-delay: 0.15s; }
	.fm-js .fm-delay-02 { transition-delay: 0.2s; }
	.fm-js .fm-delay-03 { transition-delay: 0.3s; }
	.fm-js .fm-delay-04 { transition-delay: 0.4s; }
	.fm-js .fm-delay-045 { transition-delay: 0.45s; }
	.fm-js .fm-delay-05 { transition-delay: 0.5s; }
	.fm-js .fm-delay-06 { transition-delay: 0.6s; }
	.fm-js .fm-delay-07 { transition-delay: 0.7s; }
	.fm-js .fm-delay-09 { transition-delay: 0.9s; }
	.fm-js .fm-delay-08 { transition-delay: 0.8s; }
	.fm-js .fm-delay-12 { transition-delay: 1.2s; }
	.fm-js .fm-delay-16 { transition-delay: 1.6s; }
	.fm-js .fm-delay-18 { transition-delay: 1.8s; }

	/* Card sfalsate per colonna: archivio (3 colonne, 0,2s) e altre origini (0,15s). */
	.fm-js .fm-posts .wp-block-post .fm-reveal {
		transition-duration: 1.5s;
	}

	.fm-js .fm-posts .wp-block-post:nth-child(3n+2) .fm-reveal { transition-delay: 0.2s; }
	.fm-js .fm-posts .wp-block-post:nth-child(3n) .fm-reveal { transition-delay: 0.4s; }

	/* Altre origini: terzo valore = z-index, resta a 0.9s come in home (vedi .fm-origin). */
	.fm-js .fm-altre__grid .fm-origin.fm-reveal:not(.is-flipped) { transition-duration: 1.5s, 1.5s, 0s; }
	.fm-js .fm-altre__grid .wp-block-post:nth-child(6n+2) .fm-origin.fm-reveal:not(.is-flipped) { transition-delay: 0.15s, 0.15s, 0.9s; }
	.fm-js .fm-altre__grid .wp-block-post:nth-child(6n+3) .fm-origin.fm-reveal:not(.is-flipped) { transition-delay: 0.3s, 0.3s, 0.9s; }
	.fm-js .fm-altre__grid .wp-block-post:nth-child(6n+4) .fm-origin.fm-reveal:not(.is-flipped) { transition-delay: 0.45s, 0.45s, 0.9s; }
	.fm-js .fm-altre__grid .wp-block-post:nth-child(6n+5) .fm-origin.fm-reveal:not(.is-flipped) { transition-delay: 0.6s, 0.6s, 0.9s; }
	.fm-js .fm-altre__grid .wp-block-post:nth-child(6n) .fm-origin.fm-reveal:not(.is-flipped) { transition-delay: 0.75s, 0.75s, 0.9s; }

	/* Stato iniziale dell'intro dell'hero, prima che parta il JS. */
	.fm-js .fm-hero__bag,
	.fm-js .fm-hero__giant,
	.fm-js .fm-hero__eyebrow {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-origin__flip,
	.fm-blend__bag,
	.fm-blend__label,
	.fm-nav,
	.fm-totop,
	.wp-block-image.is-style-fm-circle::after {
		transition: none;
	}
}