/*
Theme Name: Franco Miscia
Theme URI: https://francomiscia.nl
Author: Franco Miscia
Description: Block theme voor Franco Miscia — Italiaanse wijnspeciaalzaak in Rotterdam. Wijn uit Piemonte en Lavazza A Modo Mio. Geen webshop: de site is een etalage en een lokale magneet. Eén accent (Barolo garnet), geen afgeronde hoeken, geen slagschaduwen.
Version: 1.4.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: franco-miscia
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu
*/

/* =========================================================================
   1. Tokens — letterlijk uit _ds/tokens/. Eén bron, ook voor de blokken.
   ========================================================================= */
:root {
	/* Merk — Barolo garnet. Het enige accent. Geen goud, geen tweede accent. */
	--fm-garnet: #5B1A18;
	--fm-garnet-active: #40100E;
	--fm-garnet-soft: #F5E9E7;

	/* Inktladder */
	--fm-ink: #1C1917;
	--fm-ink-soft: #4A423E;
	--fm-body: #5A514C;
	/* Het ontwerpsysteem schrijft #8B807A voor. Die haalt op wit 3,84:1, op de
	   warme band 3,62:1 en op cream 3,27:1 — te weinig voor de eyebrow van 11px,
	   die WCAG AA op 4,5:1 zet. Eén stap donker in dezelfde warme neutraal haalt
	   5,33 / 5,02 / 4,53 en blijft duidelijk terugtreden ten opzichte van
	   de broodtekst (#5A514C). */
	--fm-muted: #746963;
	--fm-muted-soft: #A99F98;

	/* Haarlijnen — alle structuur in dit systeem is een haarlijn */
	--fm-hairline: #E4DDD2;
	--fm-hairline-strong: #C9BFB1;
	--fm-hairline-on-dark: #3A322E;

	/* Canvassen */
	--fm-canvas: #FFFFFF;
	--fm-canvas-warm: #FAF8F4;
	--fm-canvas-cream: #F2ECE1;
	--fm-canvas-dark: #1C1917;
	--fm-on-dark: #F5F1EA;

	/* Semantisch */
	--fm-success: #2F6B4F;
	--fm-warning: #9A5B12;
	--fm-error: #8C2019;

	/* Tricolore — marker, geen palet. Nooit als vlak, rand of band. */
	--fm-tricolore-green: #009246;
	--fm-tricolore-white: #FFFFFF;
	--fm-tricolore-red: #CE2B37;

	/* Typografie */
	--fm-font-display: "Bodoni Moda", Didot, Georgia, serif;
	--fm-font-body: Manrope, -apple-system, system-ui, "Segoe UI", sans-serif;

	/* Spacing-ladder, basiseenheid 4px */
	--fm-4: 4px;
	--fm-8: 8px;
	--fm-16: 16px;
	--fm-24: 24px;
	--fm-32: 32px;
	--fm-48: 48px;
	--fm-64: 64px;
	--fm-96: 96px;
	--fm-144: 144px;

	/* Layout */
	--fm-container: 1240px;
	--fm-gutter: var(--fm-32);
	--fm-nav-height: 72px;
	--fm-control-height: 48px;

	/* Sectieruimte — schaalt mee op mobiel */
	--fm-section-y: var(--fm-96);
	--fm-section-y-tall: var(--fm-144);

	/* Randen — er zijn geen schaduwen in dit systeem */
	--fm-hairline-w: 1px;
	--fm-answer-rule-w: 2px;
	--fm-meter-track-h: 2px;
	--fm-tricolore-h: 3px;
	--fm-tricolore-w: 132px;

	/* Beweging */
	--fm-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
	--fm-duration-hover: 150ms;
	--fm-duration-reveal: 500ms;
	--fm-duration-rule: 700ms;
}

/* =========================================================================
   2. Basis
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fm-canvas);
	color: var(--fm-body);
	font-family: var(--fm-font-body);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
	overflow-x: hidden;
}

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

/* WordPress zet standaard een blok-gap tussen de kinderen van .wp-site-blocks.
   Dat gaf een witte strook tussen de kop en de hero, en tussen de laatste
   sectie en de voet. De banden regelen hun eigen verticale ruimte. */
.wp-site-blocks > *,
.wp-site-blocks > * + * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks > main > :first-child { margin-block-start: 0; }
.wp-block-template-part { margin-block: 0; }

/* Radius 0 op alles — een wijnetiket is een rechthoek. */
img,
figure,
input,
select,
textarea,
button,
.wp-block-button__link,
.wp-block-image img,
.wp-block-group { border-radius: 0 !important; }

::selection { background: var(--fm-garnet-soft); color: var(--fm-ink); }

/* Focus is de browserstandaard in garnet — niet weghalen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--fm-garnet);
	outline-offset: 2px;
}

.fm-container {
	max-width: var(--fm-container);
	margin-inline: auto;
	padding-inline: var(--fm-gutter);
}

.fm-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.fm-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--fm-garnet); color: #fff;
	padding: 12px 20px; font-size: 13px; font-weight: 600;
	letter-spacing: 1.2px; text-transform: uppercase;
}
.fm-skip-link:focus { left: 0; }

/* =========================================================================
   3. Typeschaal — de .fm-* klassen uit tokens/typography.css
   ========================================================================= */
.fm-display-mega,
.fm-display-xl,
.fm-display-lg,
.fm-display-md,
.fm-etiket-line {
	font-family: var(--fm-font-display);
	font-weight: 400; /* nooit vet: het streekcontrast ís het drama */
	color: var(--fm-ink);
	margin: 0;
}
.fm-display-mega { font-size: clamp(30px, 8.6vw, 76px); line-height: 1.06; letter-spacing: -1.4px; }
.fm-display-xl   { font-size: clamp(28px, 6.6vw, 52px); line-height: 1.12; letter-spacing: -0.8px; }
.fm-display-lg   { font-size: clamp(24px, 4.2vw, 34px); line-height: 1.22; letter-spacing: -0.3px; }
.fm-display-md   { font-size: clamp(21px, 2.6vw, 24px); line-height: 1.35; letter-spacing: -0.1px; }
.fm-etiket-line  { font-size: 20px; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; }

.fm-title-md { font-family: var(--fm-font-body); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.1px; color: var(--fm-ink); margin: 0; }
.fm-title-sm { font-family: var(--fm-font-body); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--fm-ink); margin: 0; }
.fm-body-lg  { font-size: 18px; line-height: 1.65; color: var(--fm-body); margin: 0; }
.fm-body-md  { font-size: 15px; line-height: 1.7; color: var(--fm-body); margin: 0; }
.fm-body-sm  { font-size: 13px; line-height: 1.6; color: var(--fm-body); margin: 0; }
.fm-editorial { font-size: 17px; line-height: 1.7; color: var(--fm-ink-soft); margin: 0; }

.fm-eyebrow {
	font-family: var(--fm-font-body);
	font-weight: 600; font-size: 11px; line-height: 1.4;
	letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--fm-muted); margin: 0;
}

.fm-spec-value,
.fm-price {
	font-family: var(--fm-font-body);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--fm-body);
}
.fm-spec-value { font-size: 15px; line-height: 1.4; }
.fm-price { font-size: 17px; line-height: 1.2; color: var(--fm-ink); }

/* Alle cijferkolommen lijnen uit */
table, .fm-spec, .fm-hours, .fm-compare { font-variant-numeric: tabular-nums; }

/* =========================================================================
   4. Banden en secties
   ========================================================================= */
.fm-band { padding-block: var(--fm-section-y); }
.fm-band--flush-top { padding-top: 0; }
.fm-band--flush-bottom { padding-bottom: 0; }
.fm-band--tall { padding-block: var(--fm-section-y-tall); }
.fm-band--light { background: var(--fm-canvas); }
.fm-band--warm { background: var(--fm-canvas-warm); }
.fm-band--cream { background: var(--fm-canvas-cream); }
.fm-band--dark { background: var(--fm-canvas-dark); color: var(--fm-on-dark); }
.fm-band--dark .fm-display-mega,
.fm-band--dark .fm-display-xl,
.fm-band--dark .fm-display-lg,
.fm-band--dark .fm-display-md,
.fm-band--dark .fm-title-md { color: var(--fm-on-dark); }
.fm-band--dark .fm-body-md,
.fm-band--dark .fm-body-lg,
.fm-band--dark .fm-editorial { color: var(--fm-on-dark); }
.fm-band--dark .fm-eyebrow { color: var(--fm-muted-soft); }

.fm-section-head { margin-bottom: var(--fm-48); }
.fm-section-head p { max-width: 60ch; margin: var(--fm-16) 0 0; }
.fm-lede { max-width: 56ch; }

/* Splitsingen 5/7 en 7/5 */
.fm-split-57,
.fm-split-75 {
	display: grid;
	gap: var(--fm-64);
	align-items: center;
}
.fm-split-57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fm-split-75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }

/* =========================================================================
   5. Tricolore-regel — de enige nationale iconografie, alleen als marker
   ========================================================================= */
.fm-tricolore {
	display: block;
	width: var(--fm-tricolore-w);
	height: var(--fm-tricolore-h);
	background: linear-gradient(
		to right,
		var(--fm-tricolore-green) 0 33.333%,
		var(--fm-tricolore-white) 33.333% 66.666%,
		var(--fm-tricolore-red) 66.666% 100%
	);
}
.fm-tricolore--inline {
	display: inline-block;
	width: 9px; height: 12px;
	vertical-align: -1px; margin-right: 8px;
	background: linear-gradient(
		to bottom,
		var(--fm-tricolore-green) 0 33.333%,
		var(--fm-tricolore-white) 33.333% 66.666%,
		var(--fm-tricolore-red) 66.666% 100%
	);
}

/* Appellatieregel — de garnet ornamentregel binnen een etiketplaat */
.fm-rule {
	display: block; height: 1px; width: 100%;
	background: var(--fm-garnet);
	transform-origin: center;
}

/* =========================================================================
   6. Knoppen — primary · outline · text · onDark
   ========================================================================= */
.fm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fm-control-height);
	padding: 15px var(--fm-32);
	font-family: var(--fm-font-body);
	font-size: 13px; font-weight: 600; line-height: 1;
	letter-spacing: 1.2px; text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: color var(--fm-duration-hover) linear,
		background-color var(--fm-duration-hover) linear,
		border-color var(--fm-duration-hover) linear;
}
.fm-btn--primary { background: var(--fm-garnet); color: #fff; border-color: var(--fm-garnet); }
.fm-btn--primary:hover,
.fm-btn--primary:active { background: var(--fm-garnet-active); border-color: var(--fm-garnet-active); color: #fff; }

.fm-btn--outline { background: transparent; color: var(--fm-ink); border-color: var(--fm-hairline-strong); }
.fm-btn--outline:hover,
.fm-btn--outline:active { color: var(--fm-garnet); border-color: var(--fm-garnet); }

.fm-btn--text {
	background: transparent; color: var(--fm-garnet);
	border: 0; padding: 0; min-height: 0;
	border-bottom: 1px solid var(--fm-garnet);
	letter-spacing: 1.2px;
}
.fm-btn--text:hover,
.fm-btn--text:active { color: var(--fm-garnet-active); border-bottom-color: var(--fm-garnet-active); }

.fm-btn--on-dark { background: transparent; color: var(--fm-on-dark); border-color: var(--fm-hairline-on-dark); }
.fm-btn--on-dark:hover { border-color: var(--fm-on-dark); }

.fm-btn[aria-disabled="true"],
.fm-btn:disabled { background: var(--fm-hairline); color: var(--fm-muted-soft); border-color: var(--fm-hairline); cursor: not-allowed; }

.fm-actions { display: flex; flex-wrap: wrap; gap: var(--fm-16); margin-top: var(--fm-32); }
.fm-actions--text { gap: var(--fm-24); }

/* =========================================================================
   7. TopNav — het enige sticky element. Ondoorzichtig wit, verandert niet.
   ========================================================================= */
.fm-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--fm-canvas);
	border-bottom: 1px solid var(--fm-hairline);
}
.fm-header__inner {
	max-width: var(--fm-container);
	margin-inline: auto;
	padding-inline: var(--fm-gutter);
	min-height: var(--fm-nav-height);
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--fm-32);
}
.fm-logo { display: inline-flex; align-items: center; border: 0; }
.fm-logo img { display: block; height: 32px; width: auto; }
.fm-nav { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--fm-24); row-gap: 0; }
.fm-nav a {
	font-family: var(--fm-font-body);
	font-size: 13px; font-weight: 500; line-height: 1.4;
	letter-spacing: 0.6px; text-transform: uppercase;
	color: var(--fm-ink); text-decoration: none;
	padding: 8px 0; border-bottom: 1px solid transparent;
	transition: color var(--fm-duration-hover) linear;
}
.fm-nav a:hover { color: var(--fm-garnet); }
.fm-nav a[aria-current="page"],
.fm-nav .current-menu-item > a,
.fm-nav .current-menu-ancestor > a { color: var(--fm-garnet); border-bottom-color: var(--fm-garnet); }
.fm-header__aside { display: flex; align-items: center; gap: var(--fm-16); }
.fm-header__phone {
	font-size: 13px; font-weight: 600; letter-spacing: 0.6px;
	color: var(--fm-ink); text-decoration: none; white-space: nowrap;
}
.fm-header__phone:hover { color: var(--fm-garnet); }


/* =========================================================================
   8. AnswerBlock — de vraag zoals iemand hem typt, dan het antwoord
   ========================================================================= */
.fm-answer {
	background: var(--fm-canvas-warm);
	border-left: var(--fm-answer-rule-w) solid var(--fm-garnet);
	padding: var(--fm-32) var(--fm-32) var(--fm-32) var(--fm-32);
}
.fm-answer__q {
	font-family: var(--fm-font-display);
	font-weight: 400;
	font-size: clamp(21px, 2.8vw, 26px);
	line-height: 1.3; letter-spacing: -0.2px;
	color: var(--fm-ink); margin: 0;
}
.fm-answer__a {
	font-family: var(--fm-font-body);
	font-weight: 500; font-size: 19px; line-height: 1.6; letter-spacing: -0.1px;
	color: var(--fm-ink); margin: var(--fm-16) 0 0; max-width: 74ch;
}
.fm-answer + .fm-answer { margin-top: var(--fm-24); }

/* =========================================================================
   9. EtiketPlate — het signatuurcomponent. Transparant, 1px firmere rand.
   ========================================================================= */
.fm-etiket {
	background: transparent;
	border: 1px solid var(--fm-hairline-strong);
	padding: var(--fm-32);
	text-align: center;
}
.fm-etiket__producer { font-family: var(--fm-font-body); font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fm-muted); margin: 0; }
.fm-etiket__name { font-family: var(--fm-font-display); font-weight: 400; font-size: clamp(22px, 3vw, 30px); line-height: 1.22; letter-spacing: -0.2px; color: var(--fm-ink); margin: var(--fm-16) 0 0; }
.fm-etiket__rule { margin: var(--fm-16) auto; max-width: 120px; }
.fm-etiket__line { font-family: var(--fm-font-display); font-size: 20px; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fm-ink); margin: 0; }
.fm-etiket__meta { font-size: 13px; line-height: 1.6; color: var(--fm-muted); margin: var(--fm-8) 0 0; }

/* De ene flourish: de regel tekent zich vanuit het midden. Eén keer per pagina. */
@keyframes fm-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fm-etiket__rule .fm-rule { animation: fm-rule-draw var(--fm-duration-rule) var(--fm-ease-reveal) both; }

/* AppellationBadge */
.fm-badge {
	display: inline-block;
	border: 1px solid var(--fm-garnet);
	color: var(--fm-garnet);
	font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
	padding: 5px 10px; background: transparent;
}

/* =========================================================================
   10. Flessen — BottleFigure, BottleCard, FlagshipBottleCard
   ========================================================================= */
.fm-bottle-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--fm-48) var(--fm-32);
}
.fm-bottle-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Flesfoto's zijn uitgeknipte PNG's op wit, bodem uitgelijnd op één schapregel. */
.fm-bottle-figure {
	background: var(--fm-canvas);
	display: flex; align-items: flex-end; justify-content: center;
	height: 260px;
	border-bottom: 1px solid var(--fm-hairline);
	margin: 0;
}
.fm-bottle-figure img { display: block; max-height: 100%; width: auto; object-fit: contain; }
.fm-bottle-figure--tall { height: 340px; }
.fm-bottle-figure__placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: var(--fm-canvas-warm);
	font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fm-muted);
	text-align: center; padding: var(--fm-16);
}

/* Een fleskaart heeft géén volledige rand — alleen een haarlijn onder. */
.fm-bottle-card {
	display: block;
	border: 0; border-bottom: 1px solid var(--fm-hairline);
	padding-bottom: var(--fm-24);
	text-decoration: none;
	transition: border-color var(--fm-duration-hover) linear;
}
.fm-bottle-card:hover { border-bottom-color: var(--fm-hairline-strong); }
.fm-bottle-card__producer { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fm-muted); margin: var(--fm-24) 0 0; }
.fm-bottle-card__name { font-family: var(--fm-font-display); font-weight: 400; font-size: 22px; line-height: 1.25; letter-spacing: -0.2px; color: var(--fm-ink); margin: var(--fm-8) 0 0; }
.fm-bottle-card__specs { font-size: 13px; line-height: 1.6; color: var(--fm-muted); margin: var(--fm-8) 0 0; }
.fm-bottle-card__price { margin: var(--fm-16) 0 0; }

/* Flagship: warm canvas, 48px padding, geen rand. Alleen Barolo en Barbaresco. */
.fm-flagship-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-32); }
.fm-flagship {
	background: var(--fm-canvas-warm);
	border: 0;
	padding: var(--fm-48);
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--fm-32); align-items: center;
	text-decoration: none;
}
.fm-flagship .fm-bottle-figure { background: transparent; height: 300px; border-bottom-color: var(--fm-hairline-strong); }
.fm-flagship__name { font-family: var(--fm-font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.22; letter-spacing: -0.3px; color: var(--fm-ink); margin: var(--fm-8) 0 0; }
.fm-flagship__note { font-size: 15px; line-height: 1.7; color: var(--fm-ink-soft); margin: var(--fm-16) 0 0; }
.fm-flagship__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fm-16); margin-top: var(--fm-24); }

/* Voorraadstatus */
.fm-stock { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; }
.fm-stock--in-stock { color: var(--fm-success); }
.fm-stock--low { color: var(--fm-warning); }
.fm-stock--out { color: var(--fm-muted); }

/* =========================================================================
   11. Productdetail — SpecRow, TastingNoteBlock, PairingBlock, ReserveBlock
   ========================================================================= */
.fm-spec { width: 100%; border-collapse: collapse; }
.fm-spec th,
.fm-spec td {
	text-align: left; padding: 13px 0;
	border-bottom: 1px solid var(--fm-hairline);
	font-size: 15px; line-height: 1.4; vertical-align: top;
}
.fm-spec th { font-weight: 500; color: var(--fm-muted); width: 40%; font-size: 13px; letter-spacing: 0.4px; }
.fm-spec td { color: var(--fm-body); font-weight: 500; }
.fm-spec tr:last-child th,
.fm-spec tr:last-child td { border-bottom: 0; }

/* Proefnotitie is proza — nooit bullets, nooit een score. */
.fm-note {
	background: var(--fm-canvas-warm);
	padding: var(--fm-32);
	border: 0;
}
.fm-note p { font-size: 17px; line-height: 1.7; color: var(--fm-ink-soft); margin: var(--fm-16) 0 0; max-width: 62ch; }

.fm-pairing { border-top: 1px solid var(--fm-hairline); padding-top: var(--fm-24); }
.fm-pairing ul { list-style: none; margin: var(--fm-16) 0 0; padding: 0; }
.fm-pairing li { padding: 10px 0; border-bottom: 1px solid var(--fm-hairline); font-size: 15px; color: var(--fm-body); }
.fm-pairing li:last-child { border-bottom: 0; }

/* Vervangt "in winkelwagen" — er is geen webshop. */
.fm-reserve {
	background: var(--fm-canvas-warm);
	padding: var(--fm-32);
}
.fm-reserve__price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fm-16); margin-bottom: var(--fm-24); }
.fm-reserve__note { font-size: 13px; line-height: 1.6; color: var(--fm-muted); margin: var(--fm-16) 0 0; }
.fm-reserve .fm-actions { margin-top: var(--fm-24); }

/* ProducerPanel — cream, want dit is een herkomstoppervlak */
.fm-producer-panel {
	background: var(--fm-canvas-cream);
	padding: var(--fm-48);
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--fm-48); align-items: center;
}
.fm-producer-panel--text-only { grid-template-columns: minmax(0, 1fr); }
.fm-producer-panel img { display: block; width: 100%; height: 320px; object-fit: cover; }
.fm-producer-panel__meta { display: flex; flex-wrap: wrap; gap: var(--fm-24); margin-top: var(--fm-24); }
.fm-producer-panel__meta div { font-size: 13px; color: var(--fm-muted); }
.fm-producer-panel__meta strong { display: block; font-size: 15px; font-weight: 500; color: var(--fm-ink); margin-top: 2px; }

/* =========================================================================
   12. Koffie — LavazzaCupCard en IntensityMeter
   ========================================================================= */
.fm-cup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fm-24); }
.fm-cup-card {
	display: block; background: var(--fm-canvas);
	border: 1px solid transparent; padding: var(--fm-24);
	text-decoration: none;
	transition: border-color var(--fm-duration-hover) linear;
}
.fm-cup-card:hover { border-color: var(--fm-hairline-strong); }
.fm-cup-card img { display: block; width: 100%; height: 200px; object-fit: contain; }
.fm-cup-card__name { font-family: var(--fm-font-display); font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--fm-ink); margin: var(--fm-16) 0 0; }
.fm-cup-card__blend { font-size: 13px; color: var(--fm-muted); margin: var(--fm-4) 0 0; }
.fm-cup-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fm-8); margin-top: var(--fm-16); }

.fm-meter { margin-top: var(--fm-16); }
.fm-meter__label { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fm-muted); display: flex; justify-content: space-between; }
.fm-meter__track { height: var(--fm-meter-track-h); background: var(--fm-hairline); margin-top: var(--fm-8); }
.fm-meter__fill { height: 100%; background: var(--fm-garnet); }

/* =========================================================================
   13. Winkel — StoreCard en OpeningStatus
   ========================================================================= */
.fm-store-card { background: var(--fm-canvas-warm); padding: var(--fm-48); }
.fm-store-card__address { font-size: 17px; line-height: 1.6; color: var(--fm-ink); margin: var(--fm-16) 0 0; font-style: normal; }
.fm-hours { width: 100%; border-collapse: collapse; margin-top: var(--fm-24); }
.fm-hours th,
.fm-hours td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--fm-hairline); font-size: 15px; font-weight: 400; color: var(--fm-body); }
.fm-hours td { text-align: right; }
.fm-hours tr:last-child th,
.fm-hours tr:last-child td { border-bottom: 0; }
.fm-hours tr[data-today="1"] th,
.fm-hours tr[data-today="1"] td { color: var(--fm-ink); font-weight: 600; }

.fm-opening-status { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; }
.fm-opening-status--open { color: var(--fm-success); }
.fm-opening-status--closed { color: var(--fm-muted); }

.fm-contact-list { list-style: none; margin: var(--fm-24) 0 0; padding: 0; }
.fm-contact-list li { padding: 9px 0; border-bottom: 1px solid var(--fm-hairline); font-size: 15px; }
.fm-contact-list li:last-child { border-bottom: 0; }
.fm-contact-list a { color: var(--fm-garnet); text-decoration: none; border-bottom: 1px solid currentColor; }

/* =========================================================================
   14. FAQ — toggelt met + en —, geen chevrons
   ========================================================================= */
.fm-faq { max-width: 74ch; }
.fm-faq__row { border-bottom: 1px solid var(--fm-hairline); }
.fm-faq__row summary {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fm-24);
	list-style: none; cursor: pointer; padding: var(--fm-24) 0;
	font-family: var(--fm-font-body); font-weight: 600; font-size: 17px; line-height: 1.4;
	color: var(--fm-ink);
	transition: color var(--fm-duration-hover) linear;
}
.fm-faq__row summary::-webkit-details-marker { display: none; }
.fm-faq__row summary:hover { color: var(--fm-garnet); }
.fm-faq__row summary::after { content: "+"; font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--fm-muted); flex: none; }
.fm-faq__row[open] summary::after { content: "\2014"; }
.fm-faq__row-body { padding: 0 0 var(--fm-24); font-size: 15px; line-height: 1.7; color: var(--fm-body); max-width: 68ch; }
.fm-faq__row-body p { margin: 0 0 var(--fm-16); }
.fm-faq__row-body p:last-child { margin-bottom: 0; }

/* =========================================================================
   15. Geschenken en nieuwsbrief
   ========================================================================= */
.fm-gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fm-32); }
.fm-gift-tier { background: var(--fm-canvas); border: 1px solid var(--fm-hairline); padding: var(--fm-32); display: flex; flex-direction: column; }
.fm-gift-tier:hover { border-color: var(--fm-hairline-strong); }
.fm-gift-tier__name { font-family: var(--fm-font-display); font-weight: 400; font-size: 26px; line-height: 1.22; color: var(--fm-ink); margin: var(--fm-8) 0 0; }
.fm-gift-tier__price { margin: var(--fm-16) 0 0; }
.fm-gift-tier ul { list-style: none; margin: var(--fm-24) 0 0; padding: 0; flex: 1; }
.fm-gift-tier li { padding: 9px 0; border-bottom: 1px solid var(--fm-hairline); font-size: 15px; color: var(--fm-body); }
.fm-gift-tier li:last-child { border-bottom: 0; }
.fm-gift-tier .fm-actions { margin-top: var(--fm-24); }

.fm-newsletter { background: var(--fm-canvas-cream); padding-block: var(--fm-64); }
.fm-newsletter__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fm-64); align-items: center; }
.fm-newsletter form { display: flex; align-items: flex-end; gap: var(--fm-16); flex-wrap: wrap; }
.fm-newsletter label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fm-muted); margin-bottom: var(--fm-8); }

.fm-input {
	font-family: var(--fm-font-body); font-size: 15px;
	height: var(--fm-control-height); padding: 0 var(--fm-16);
	background: var(--fm-canvas);
	border: 1px solid var(--fm-hairline-strong);
	border-radius: 0; color: var(--fm-ink); width: 100%;
}
.fm-input:hover { border-color: var(--fm-ink); }
textarea.fm-input { height: auto; padding: 12px var(--fm-16); line-height: 1.6; }
.fm-field { flex: 1 1 260px; min-width: 0; }

/* =========================================================================
   16. Vergelijkingstabel — scrollt liever dan dat hij de pagina uitduwt
   ========================================================================= */
.fm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fm-compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.fm-compare th,
.fm-compare td { text-align: left; padding: 14px var(--fm-16) 14px 0; border-bottom: 1px solid var(--fm-hairline); font-size: 15px; vertical-align: top; }
.fm-compare thead th { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fm-muted); border-bottom-color: var(--fm-hairline-strong); }
.fm-compare tbody th { font-weight: 600; color: var(--fm-ink); }

/* =========================================================================
   17. Tegels, artikelen, producenten
   ========================================================================= */
.fm-tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fm-32); }
.fm-tile { display: block; border-bottom: 1px solid var(--fm-hairline); padding-bottom: var(--fm-24); text-decoration: none; transition: border-color var(--fm-duration-hover) linear; }
.fm-tile:hover { border-bottom-color: var(--fm-hairline-strong); }
.fm-tile img { display: block; width: 100%; height: 260px; object-fit: cover; }
/* display:block — als span blijven ze inline, krijgen geen breedte mee en
   duwen ze op smalle schermen de pagina uit. */
.fm-tile__name { display: block; font-family: var(--fm-font-display); font-weight: 400; font-size: 26px; line-height: 1.25; letter-spacing: -0.2px; color: var(--fm-ink); margin-top: var(--fm-24); overflow-wrap: anywhere; }
.fm-tile__line { display: block; font-size: 15px; line-height: 1.6; color: var(--fm-body); margin-top: var(--fm-8); overflow-wrap: anywhere; }

.fm-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fm-48) var(--fm-32); }
.fm-article-card { display: block; border-bottom: 1px solid var(--fm-hairline); padding-bottom: var(--fm-24); text-decoration: none; transition: border-color var(--fm-duration-hover) linear; }
.fm-article-card:hover { border-bottom-color: var(--fm-hairline-strong); }
.fm-article-card img { display: block; width: 100%; height: 220px; object-fit: cover; }
.fm-article-card__title { display: block; font-family: var(--fm-font-display); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--fm-ink); margin: var(--fm-24) 0 0; overflow-wrap: anywhere; }
.fm-article-card__lead { display: block; font-size: 15px; line-height: 1.6; color: var(--fm-body); margin: var(--fm-8) 0 0; overflow-wrap: anywhere; }

/* Artikelbody — leesmaat */
.fm-prose { max-width: 68ch; }
.fm-prose h2 { font-family: var(--fm-font-display); font-weight: 400; font-size: clamp(24px, 4vw, 32px); line-height: 1.22; letter-spacing: -0.3px; color: var(--fm-ink); margin: var(--fm-48) 0 var(--fm-16); }
.fm-prose h3 { font-family: var(--fm-font-display); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--fm-ink); margin: var(--fm-32) 0 var(--fm-8); }
.fm-prose p { font-size: 17px; line-height: 1.75; color: var(--fm-ink-soft); margin: 0 0 var(--fm-16); }
.fm-prose ul, .fm-prose ol { padding-left: 1.2em; margin: 0 0 var(--fm-16); }
.fm-prose li { font-size: 17px; line-height: 1.75; color: var(--fm-ink-soft); margin-bottom: var(--fm-8); }
.fm-prose a { color: var(--fm-garnet); border-bottom: 1px solid currentColor; text-decoration: none; }

.fm-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-16); font-size: 13px; color: var(--fm-muted); margin-top: var(--fm-24); }

/* Broodkruimels */
/* Bronregel — verantwoording, geen aangekondigde link. Terughoudend gezet,
   met een haarlijn erboven zodat hij als noot leest en niet als broodtekst. */
.fm-bronregel {
	font-size: 14px; line-height: 1.65; color: var(--fm-muted);
	max-width: 68ch; margin: var(--fm-32) 0 0;
	padding-top: var(--fm-16); border-top: 1px solid var(--fm-hairline);
}
.fm-bronregel a { color: var(--fm-garnet); text-decoration: none; border-bottom: 1px solid var(--fm-hairline-strong); }
.fm-bronregel a:hover { color: var(--fm-garnet-active); border-bottom-color: currentColor; }

.fm-breadcrumbs { font-size: 13px; color: var(--fm-muted); padding-block: var(--fm-24) 0; }
.fm-breadcrumbs a { color: var(--fm-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.fm-breadcrumbs a:hover { color: var(--fm-garnet); border-bottom-color: currentColor; }

/* =========================================================================
   18. Hero — type staat nooit óver de foto, altijd in de band eronder
   ========================================================================= */
.fm-hero__image { display: block; width: 100%; height: 520px; object-fit: cover; }
.fm-hero__band { background: var(--fm-canvas-warm); padding-block: var(--fm-64) 72px; }
.fm-hero__band .fm-tricolore { margin-top: 12px; }
.fm-hero__band h1 { margin: var(--fm-24) 0 0; max-width: 22ch; }
.fm-hero__band p { margin: var(--fm-32) 0 0; }
.fm-hero--compact .fm-hero__image { height: 360px; }

/* =========================================================================
   19. Footer — donker, haarlijnen #3A322E, tekst warm gebroken wit
   ========================================================================= */
/* Geen margin-top: elke band regelt zijn eigen ruimte onderaan. Een marge hier
   gaf een witte strook tussen de laatste sectie en de voet. */
.fm-footer { background: var(--fm-canvas-dark); color: var(--fm-on-dark); padding-block: var(--fm-64) var(--fm-32); margin-top: 0; position: relative; overflow: hidden; }
.fm-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fm-48) var(--fm-32); }
.fm-footer h2, .fm-footer h3 { font-family: var(--fm-font-body); font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fm-on-dark); margin: 0 0 var(--fm-16); }
.fm-footer ul { list-style: none; margin: 0; padding: 0; }
.fm-footer li { margin-bottom: var(--fm-8); }
.fm-footer a { color: var(--fm-muted-soft); text-decoration: none; font-size: 15px; border-bottom: 0; transition: color var(--fm-duration-hover) linear; }
.fm-footer a:hover { color: var(--fm-on-dark); }
.fm-footer address { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--fm-muted-soft); }
/* Het merkteken is een transparant bestand met donkere letters; op de donkere
   voet is het onzichtbaar. Het ontwerpsysteem schrijft omkeren voor. De sepia-
   en verzadigingsstap houdt het bij het warme gebroken wit van de voet in
   plaats van bij koel zuiver wit. */
.fm-footer__logo img {
	display: block; height: 34px; width: auto; margin-bottom: var(--fm-24);
	filter: invert(1) sepia(0.18) saturate(0.35) brightness(1.05);
}
.fm-footer__socials { list-style: none; margin: var(--fm-16) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fm-16); }
.fm-footer__socials a { font-size: 13px; letter-spacing: 0.4px; }

/* Google-beoordeling — één regel: logo, sterren, cijfer, aantal. Rechte hoeken
   en een haarlijn, zoals alles in de voet. De sterren zijn data en geen
   versiering: daarom de Google-kleuren, en verder niets. De vijfde ster is
   deels gevuld — 4,8 is geen 5, en dat hoort te kloppen met het cijfer. */
.fm-google {
	display: inline-flex; align-items: center; gap: var(--fm-8);
	margin-top: var(--fm-24);
	padding: 10px var(--fm-16);
	border: 1px solid var(--fm-hairline-on-dark);
	color: var(--fm-canvas); text-decoration: none;
	font-size: 13px; line-height: 1; white-space: nowrap;
	transition: border-color var(--fm-duration-hover) linear;
}
.fm-google:hover { border-color: var(--fm-muted); }
.fm-google__g { width: 15px; height: 15px; flex: none; }
.fm-google__sterren { width: 76px; height: 15px; flex: none; }
.fm-google__score { font-weight: 600; letter-spacing: 0.2px; }
.fm-google__aantal { color: var(--fm-muted-soft); }
.fm-footer__note { font-size: 13px; line-height: 1.6; color: var(--fm-muted-soft); max-width: 52ch; margin-top: var(--fm-24); }
.fm-footer__bottom { border-top: 1px solid var(--fm-hairline-on-dark); margin-top: var(--fm-48); padding-top: var(--fm-24); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fm-16); font-size: 13px; color: var(--fm-muted-soft); }
.fm-footer__legal { display: flex; flex-wrap: wrap; gap: var(--fm-24); }

/* De omtrek van Italië, als achtergrond achter de voet. Eén haarlijn in
   dezelfde tint als de scheidingslijn erboven — het moet als textuur lezen,
   niet als illustratie. Hij is hoger dan de voet en snijdt boven en onder af;
   dat is opzet, geen kaderfout. Geen vulling, geen schaduw, geen beweging.
   Als pseudo-element: onzichtbaar voor schermlezers, nooit een muisdoel.
   De hoogte stuurt de breedte via de verhouding van de viewBox (600x720). */
.fm-footer::before {
	content: "";
	position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
	height: 135%; aspect-ratio: 5 / 6;
	background: url("assets/img/italie-outline.svg") no-repeat center / contain;
	pointer-events: none;
}

/* De inhoud staat er bovenop; de kaart blijft eronder. */
.fm-footer > .fm-container { position: relative; z-index: 1; }

/* Op telefoon staat de voet in één kolom en wordt hij juist hoog. De kaart
   blijft dus staan, maar kleiner en verankerd rechtsonder: hij snijdt rechts
   en onder af en leest als accent achter de tekst, niet als illustratie
   eroverheen. De haarlijn is #3A322E op #1C1917 — te zwak om te storen. */
@media (max-width: 768px) {
	.fm-footer::before {
		right: -16%; top: auto; bottom: -3%;
		transform: none;
		height: 42%;
	}
}

/* Kleine telefoon: nog een stap terug, anders wordt de bocht van de laars
   breder dan het scherm en verliest de vorm zijn silhouet. */
@media (max-width: 380px) {
	.fm-footer::before { right: -22%; height: 36%; }
}

/* =========================================================================
   20. Beweging — sectie onthult zich één keer, nooit opnieuw
   ========================================================================= */
@keyframes fm-reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fm-reveal { animation: fm-reveal-up var(--fm-duration-reveal) var(--fm-ease-reveal) both; }

@media (prefers-reduced-motion: reduce) {
	.fm-reveal,
	.fm-etiket__rule .fm-rule { animation: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================================
   21. Breekpunten — tablet <1000px, telefoon <680px, klein <380px
   ========================================================================= */
@media (max-width: 1000px) {
	:root { --fm-section-y: 72px; --fm-section-y-tall: var(--fm-96); }

	.fm-split-57,
	.fm-split-75,
	.fm-flagship,
	.fm-producer-panel,
	.fm-newsletter__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }

	.fm-bottle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fm-cup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fm-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fm-flagship-grid { grid-template-columns: minmax(0, 1fr); }
	.fm-gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fm-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fm-producer-panel { padding: var(--fm-32); }
	.fm-flagship { padding: var(--fm-32); }
}

@media (max-width: 680px) {
	:root { --fm-gutter: 20px; --fm-section-y: 56px; --fm-section-y-tall: var(--fm-64); }

	/* Flessengrids gaan 4-up → 3-up → 2-up. Nooit 1-up. */
	.fm-bottle-grid,
	.fm-bottle-grid--3,
	.fm-cup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-32) var(--fm-16); }
	.fm-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-24) var(--fm-16); }

	.fm-gift-grid,
	.fm-article-grid { grid-template-columns: minmax(0, 1fr); gap: var(--fm-24); }

	.fm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-32) 20px; }

	/* Hero's worden 44vh */
	.fm-hero__image { height: 44vh; min-height: 220px; }
	.fm-hero--compact .fm-hero__image { height: 240px; }
	.fm-tile img { height: 200px; }
	.fm-article-card img { height: 200px; }
	.fm-producer-panel img { height: 240px; }
	.fm-bottle-figure { height: 220px; }
	.fm-bottle-figure--tall { height: 260px; }
	.fm-flagship .fm-bottle-figure { height: 240px; }

	.fm-answer { padding: var(--fm-24); }
	.fm-answer__a { font-size: 17px; }
	.fm-note, .fm-reserve, .fm-store-card, .fm-etiket { padding: var(--fm-24); }
	.fm-store-card { padding: var(--fm-24); }

	/* Menu-items krijgen 34px tikhoogte en passen niet op één regel */
	.fm-header__inner { flex-wrap: wrap; gap: var(--fm-16); padding-block: var(--fm-8); }
	.fm-nav { column-gap: var(--fm-16); }
	.fm-nav a { font-size: 12px; padding: 10px 0; min-height: 34px; }

	.fm-actions .fm-btn { width: 100%; }
	.fm-actions--text .fm-btn { width: auto; }
	.fm-newsletter form > * { flex: 1 1 100%; }
	.fm-newsletter form .fm-btn { width: 100%; }

	/* Voorkomt zoom op iOS bij focus */
	.fm-input, textarea.fm-input { font-size: 16px; }
}

@media (max-width: 380px) {
	:root { --fm-gutter: 16px; }
	.fm-bottle-grid,
	.fm-bottle-grid--3,
	.fm-cup-grid,
	.fm-tile-grid { gap: var(--fm-24) 12px; }
	/* Bodoni nooit onder 20px: daaronder vallen de haarlijnen van de didone weg. */
	.fm-bottle-card__name { font-size: 20px; }
	.fm-tile__name { font-size: 22px; }
}

/* =========================================================================
   22. Formulieren — vervangen de winkelwagen: vragen, geen bestellen
   ========================================================================= */
.fm-form { max-width: 62ch; }
.fm-form__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-24) var(--fm-16); }
.fm-form__veld--breed { grid-column: 1 / -1; }
.fm-form label {
	display: block;
	font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--fm-muted); margin-bottom: var(--fm-8);
}
.fm-form label .fm-verplicht { color: var(--fm-garnet); }
.fm-form .fm-actions { margin-top: var(--fm-32); }
.fm-form__voet { font-size: 13px; line-height: 1.6; color: var(--fm-muted); margin-top: var(--fm-16); max-width: 56ch; }
.fm-form__voet a { color: var(--fm-garnet); border-bottom: 1px solid currentColor; text-decoration: none; }

/* Honeypot: onzichtbaar voor mensen, zichtbaar voor bots. */
.fm-form__val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fm-melding { border-left: var(--fm-answer-rule-w) solid var(--fm-garnet); background: var(--fm-canvas-warm); padding: var(--fm-24) var(--fm-32); max-width: 62ch; }
.fm-melding--ok { border-left-color: var(--fm-success); }
.fm-melding--fout { border-left-color: var(--fm-error); }
.fm-melding p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fm-ink); }
.fm-melding p + p { margin-top: var(--fm-8); font-size: 15px; color: var(--fm-body); }

@media (max-width: 680px) {
	.fm-form__velden { grid-template-columns: minmax(0, 1fr); }
	.fm-melding { padding: var(--fm-24); }
}

/* =========================================================================
   23. Reviews — echte klantoordelen, geen sterrenrating-schema
   ========================================================================= */
.fm-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fm-32); }
.fm-review {
	background: var(--fm-canvas);
	border-top: 1px solid var(--fm-hairline-strong);
	padding-top: var(--fm-24);
	display: flex; flex-direction: column; gap: var(--fm-16);
}
.fm-review__tekst {
	font-family: var(--fm-font-display); font-weight: 400;
	font-size: 21px; line-height: 1.45; letter-spacing: -0.1px;
	color: var(--fm-ink); margin: 0;
}
.fm-review__voet { margin-top: auto; }
.fm-review__auteur { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: var(--fm-ink); margin: 0; }
.fm-review__meta { font-size: 13px; color: var(--fm-muted); margin: 2px 0 0; font-variant-numeric: tabular-nums; }

/* De score als vijf haarlijnstreepjes — geen sterglyphs; die kent dit merk niet. */
.fm-score { display: flex; gap: 3px; align-items: center; }
.fm-score__streep { display: block; width: 14px; height: 2px; background: var(--fm-hairline-strong); }
.fm-score__streep--vol { background: var(--fm-garnet); }
.fm-score__getal { font-size: 13px; font-weight: 600; color: var(--fm-muted); margin-left: var(--fm-8); font-variant-numeric: tabular-nums; }

.fm-reviews-bron { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fm-16); margin-top: var(--fm-32); }
.fm-reviews-bron p { font-size: 13px; color: var(--fm-muted); margin: 0; }

@media (max-width: 1000px) { .fm-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
	.fm-reviews { grid-template-columns: minmax(0, 1fr); gap: var(--fm-24); }
	.fm-review__tekst { font-size: 20px; }
}

/* =========================================================================
   24. Print
   ========================================================================= */
@media print {
	.fm-header, .fm-footer, .fm-newsletter, .fm-actions { display: none !important; }
	body { color: #000; }
}