/* ==========================================================================
   Hammam & Sauna Pretoria — theme.css
   Design system (tokens), reset, typography, buttons, header, hero,
   reservation bar, footer, and interior page templates.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS (:root) — from design-spec §10 (verbatim), with free
      Google Font mapping (Figtree / Cormorant Garamond) replacing Typekit.
   --------------------------------------------------------------------------- */
:root {
	/* ---- Color: deep teal-green (neutral) ---- */
	--color-neutral-50:  #f5f6f6;
	--color-neutral-100: #e4e9e9;
	--color-neutral-200: #ccd5d5;
	--color-neutral-300: #a9b7b6;
	--color-neutral-400: #7e9291;
	--color-neutral-500: #637777;
	--color-neutral-600: #546566;
	--color-neutral-700: #485556;
	--color-neutral-800: #40494a;
	--color-neutral-900: #002d33;   /* deep teal — header, newsletter band */
	--color-neutral-950: #001215;   /* near-black teal — body text */

	/* ---- Color: warm cream / gold ---- */
	--color-gold-50:  #fbfaf7;      /* PAGE BACKGROUND */
	--color-gold-100: #e9e2cc;      /* footer / soft bands */
	--color-gold-200: #dacea9;
	--color-gold-500: #b79f56;      /* accent gold, italic labels, ring */
	--color-gold-600: #a69049;
	/* Text/link gold — darkened for WCAG AA (>=4.5:1 on cream/white). */
	--color-gold-700: #6e5c22;

	/* ---- Color: taupe primary (CTA) ---- */
	--color-primary-100: #d0ccc8;
	--color-primary-500: #7c736a;   /* button fill */
	--color-primary-600: #605952;   /* button hover */

	/* ---- Color: utility ---- */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-error: #f26d68;

	/* ---- Brand accents (Phase 4) ---- */
	--color-topbar:        #daab69;   /* warm-gold top utility bar */
	--color-reserve:       #982122;   /* deep-red reservation/booking CTAs */
	--color-reserve-hover: #7d1a1b;   /* reservation CTA hover */
	--color-header-solid:  #005a87;   /* solid blue header bar on no-hero pages */

	/* Fallbacks for footer progress-bar underline (WP / Woo presets). */
	--wp--preset--color--luminous-vivid-amber: #fcb900;
	--wc-red: #e2401c;

	/* ---- Semantic aliases ---- */
	--bg-page:        var(--color-gold-50);
	--bg-dark:        var(--color-neutral-900);
	--bg-footer:      var(--color-gold-100);
	--text-body:      var(--color-neutral-950);
	--text-muted:     var(--color-neutral-600);
	--text-on-dark:   var(--color-white);
	--accent:         var(--color-gold-500);
	--cta:            var(--color-primary-500);
	--cta-hover:      var(--color-primary-600);
	--border-subtle:  var(--color-neutral-200);

	/* ---- Typography (Typekit → free Google Fonts) ---- */
	--font-sans:  "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-serif: "Cormorant Garamond", Georgia, serif;   /* italic display accent */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--text-xs:   0.75rem;   --lh-xs:   1.25rem;
	--text-sm:   0.875rem;  --lh-sm:   1.25rem;
	--text-base: 1rem;      --lh-base: 1.5rem;
	--text-lg:   1.125rem;  --lh-lg:   2rem;
	--text-xl:   1.25rem;   --lh-xl:   2rem;
	--text-2xl:  1.5rem;    --lh-2xl:  2rem;
	--text-3xl:  1.75rem;   --lh-3xl:  2.25rem;
	--text-4xl:  2rem;      --lh-4xl:  2.5rem;
	--text-5xl:  2.5rem;    --lh-5xl:  3.125rem;
	--text-6xl:  3rem;      --lh-6xl:  3.75rem;
	--text-7xl:  4rem;      --lh-7xl:  4.5rem;
	--text-8xl:  5rem;      --lh-8xl:  4.5rem;

	--tracking-wide:   0.025em;
	--tracking-wider:  0.1em;
	--tracking-widest: 0.1em;

	/* ---- Spacing / layout ---- */
	--spacing: 0.25rem;
	--container-max: 90rem;
	--container-pad-sm: 1.25rem;
	--container-pad-lg: 5rem;
	--content-max: 52.5rem;
	--section-gap-sm: 2.5rem;
	--section-gap-lg: 6rem;
	--grid-gutter: 2.5rem;

	/* ---- Radii ---- */
	--radius-xs: 0.125rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-pill: 9999px;

	/* ---- Buttons ---- */
	--btn-height: 3.5rem;
	--btn-pad-x: 1.5rem;

	/* ---- Shadows ---- */
	--shadow-sm:   0 1px 2px 0 rgb(0 18 21 / 0.06);
	--shadow-card: 0 8px 24px -8px rgb(0 18 21 / 0.18);
	--shadow-ring-focus: 0 0 0 2px rgb(124 115 106 / 0.40);

	/* ---- Motion ---- */
	--transition-fast: 0.15s;
	--transition: 0.2s;
	--transition-slow: 0.3s;

	/* ---- Header sizing ---- */
	--topbar-h: 2.5rem;
	--mainbar-h: 5.25rem;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
	max-width: 100%;
}

body {
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: var(--text-base);
	line-height: var(--lh-base);
	color: var(--text-body);
	background-color: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
video,
svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

input,
select,
textarea { font: inherit; color: inherit; }

ul { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-normal); line-height: 1.15; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--color-neutral-900);
	color: #fff;
	border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

body.mobile-menu-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   3. LAYOUT — container
   --------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-sm);
	transition: padding var(--transition-slow);
}
@media (min-width: 1024px) {
	.container { padding-inline: 3rem; }
}
@media (min-width: 1280px) {
	.container { padding-inline: var(--container-pad-lg); }
}

.site-main { min-height: 40vh; }

/* ---------------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: var(--btn-height);
	padding-inline: var(--btn-pad-x);
	width: fit-content;
	border-radius: var(--radius-pill);
	font-size: var(--text-base);
	line-height: 1;
	text-transform: uppercase;
	font-variant: all-small-caps;
	letter-spacing: var(--tracking-wider);
	transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition);
}

.btn-primary {
	background-color: var(--cta);
	color: #fff;
}
.btn-primary:hover { background-color: var(--cta-hover); color: #fff; }
.btn-primary:not(:disabled):active { transform: scale(0.98); }

/* Reservation / booking CTA — deep red (#982122), reuses .btn-primary geometry.
   Use on reserve actions; normal .btn-primary stays taupe for everything else. */
.btn-reserve {
	background-color: var(--color-reserve);
	color: #fff;
}
.btn-reserve:hover { background-color: var(--color-reserve-hover); color: #fff; }
.btn-reserve:not(:disabled):active { transform: scale(0.98); }

.btn-secondary {
	background: transparent;
	color: var(--color-neutral-950);
	box-shadow: inset 0 0 0 1px var(--color-gold-500);
}
.btn-secondary:hover { background: rgb(183 159 86 / 0.10); }

.btn-label { display: inline-block; transform: translateY(-0.13em); }

/* Rounded/circular icon button (slider arrows) */
.btn-rounded {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.14);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background-color var(--transition), transform var(--transition);
}
.btn-rounded:hover { background: rgb(255 255 255 / 0.28); }
.btn-rounded:active { transform: scale(0.96); }

/* Generic icon button (header search/account/hamburger) */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-pill);
	color: inherit;
	transition: background-color var(--transition), color var(--transition);
}
.icon-btn:hover { color: var(--color-gold-500); }

*:focus-visible {
	outline: 2px solid var(--color-gold-500);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   5. HEADER
   --------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 40;
	color: #fff;
	transition: background-color var(--transition), box-shadow var(--transition);
}

/* Top utility bar — always warm gold (#daab69) with dark-teal text so it
   stays legible in every header state (over-hero + scrolled). */
.header-topbar {
	background-color: var(--color-topbar);
	color: var(--color-neutral-900);
	transition: background-color var(--transition);
}
.header-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--topbar-h);
}
.header-topbar__left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
/* --- Language switcher (dropdown NL / EN) -------------------------------- */
.header-topbar .hammam-langs,
.site-footer .hammam-langs,
.mobile-menu .hammam-langs {
	position: relative;
	display: inline-block !important;
	vertical-align: middle;
	line-height: 1;
}
.header-topbar .hammam-langs__trigger,
.site-footer .hammam-langs__trigger,
.mobile-menu .hammam-langs__trigger {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 8px 5px 7px;
	min-height: 28px;
	border-radius: 999px;
	border: 1px solid rgba(0, 45, 51, 0.12);
	background: rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	color: #002d33 !important;
	font: inherit;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.header-topbar .hammam-langs__trigger:hover,
.site-footer .hammam-langs__trigger:hover,
.mobile-menu .hammam-langs__trigger:hover,
.header-topbar .hammam-langs.is-open .hammam-langs__trigger,
.site-footer .hammam-langs.is-open .hammam-langs__trigger,
.mobile-menu .hammam-langs.is-open .hammam-langs__trigger {
	background: #ffffff;
	border-color: rgba(0, 45, 51, 0.18);
	box-shadow: 0 1px 3px rgba(0, 45, 51, 0.12);
}
.header-topbar .hammam-langs__caret,
.site-footer .hammam-langs__caret,
.mobile-menu .hammam-langs__caret {
	flex-shrink: 0;
	opacity: 0.7;
	transition: transform 0.18s ease;
}
.header-topbar .hammam-langs.is-open .hammam-langs__caret,
.site-footer .hammam-langs.is-open .hammam-langs__caret,
.mobile-menu .hammam-langs.is-open .hammam-langs__caret {
	transform: rotate(180deg);
}
.header-topbar .hammam-langs__menu,
.site-footer .hammam-langs__menu,
.mobile-menu .hammam-langs__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 100%;
	margin: 0;
	padding: 4px;
	list-style: none;
	border-radius: 12px;
	border: 1px solid rgba(0, 45, 51, 0.12);
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 45, 51, 0.14);
}
.header-topbar .hammam-langs__menu[hidden],
.site-footer .hammam-langs__menu[hidden],
.mobile-menu .hammam-langs__menu[hidden] {
	display: none !important;
}
.header-topbar .hammam-langs__menu li,
.site-footer .hammam-langs__menu li,
.mobile-menu .hammam-langs__menu li {
	margin: 0;
	padding: 0;
}
.header-topbar .hammam-langs__native,
.site-footer .hammam-langs__native,
.mobile-menu .hammam-langs__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}
.header-topbar .hammam-langs__opt,
.site-footer .hammam-langs__opt,
.mobile-menu .hammam-langs__opt {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none !important;
	color: #002d33 !important;
	background: transparent;
	box-sizing: border-box;
	white-space: nowrap;
}
.header-topbar .hammam-langs__opt:hover,
.site-footer .hammam-langs__opt:hover,
.mobile-menu .hammam-langs__opt:hover {
	background: rgba(218, 171, 105, 0.18);
}
.header-topbar .hammam-langs__opt.is-active,
.site-footer .hammam-langs__opt.is-active,
.mobile-menu .hammam-langs__opt.is-active {
	background: rgba(218, 171, 105, 0.28);
	cursor: default;
}
.header-topbar .hammam-langs__flag,
.site-footer .hammam-langs__flag,
.mobile-menu .hammam-langs__flag {
	display: inline-flex;
	width: 18px;
	height: 12px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
	flex-shrink: 0;
}
.header-topbar .hammam-langs__flag svg,
.site-footer .hammam-langs__flag svg,
.mobile-menu .hammam-langs__flag svg {
	display: block;
	width: 100%;
	height: 100%;
}
.header-topbar .hammam-langs__code,
.site-footer .hammam-langs__code,
.mobile-menu .hammam-langs__code {
	font-family: var(--font-sans, "Figtree", sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}

/* Footer: open upward near page bottom */
.site-footer .hammam-langs__menu {
	top: auto;
	bottom: calc(100% + 6px);
}
.site-footer .hammam-langs__trigger {
	background: rgba(255, 255, 255, 0.7);
}

/* Mobile dark menu */
.mobile-menu__head-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.mobile-menu .hammam-langs__trigger {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.2);
	color: #ffffff !important;
	box-shadow: none;
}
.mobile-menu .hammam-langs__trigger:hover,
.mobile-menu .hammam-langs.is-open .hammam-langs__trigger {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff !important;
}
.mobile-menu .hammam-langs__menu {
	right: 0;
	left: auto;
}

.footer-bottom__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 1.75rem;
}

/* Legacy unused chip class kept for safety */
.lang-chip,
.rating-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--color-neutral-900);
}
.lang-chip__flag { font-size: 0.95rem; }
/* Dark stars for maximum contrast on the gold bar. */
.rating-chip__stars { color: var(--color-neutral-900); letter-spacing: 0.05em; }
.rating-chip:hover { color: var(--color-neutral-950); opacity: 0.75; }

/* Slim hairline separator between reviews and phone. */
.topbar-divider {
	display: inline-block;
	width: 1px;
	height: 1rem;
	background: rgb(0 45 51 / 0.22);
	flex: 0 0 auto;
}

/* Phone — same chip language as lang/reviews, no heavy pill. */
.topbar-call {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9375rem;
	line-height: 1;
	font-weight: var(--fw-semibold);
	color: var(--color-neutral-900);
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: color var(--transition), opacity var(--transition);
}
.topbar-call__icon {
	flex: 0 0 auto;
	color: var(--color-neutral-900);
	opacity: 0.85;
}
.topbar-call__num {
	font-variant-numeric: tabular-nums;
}
.topbar-call:hover {
	color: var(--color-reserve);
	opacity: 1;
}
.topbar-call:hover .topbar-call__icon { color: var(--color-reserve); opacity: 1; }

.header-topbar__right {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.header-topbar__right a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	text-transform: uppercase;
	font-variant: all-small-caps;
	letter-spacing: var(--tracking-widest);
	color: var(--color-neutral-900);
}
.header-topbar__right a:hover { color: var(--color-neutral-950); opacity: 0.7; }
.header-topbar__right .topbar-link__icon {
	flex: 0 0 auto;
	opacity: 0.9;
}
.header-topbar__right a:hover .topbar-link__icon { opacity: 1; }

@media (max-width: 1279.98px) {
	.header-topbar { display: none; }
}

/* Main nav bar */
.header-main__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	height: var(--mainbar-h);
}
.header-main__logo { flex: 0 0 auto; }
/* Header logo — explicit, bounded sizing (specificity 0,2,0) that outranks
   WooCommerce core's unscoped page-image normalization (specificity 0,1,1)
   which otherwise blows up the logo on WooCommerce pages. */
.site-header .site-logo,
.site-header .header-main__logo img {
	height: 3rem;
	width: auto;
	max-width: none;
	transition: filter var(--transition), opacity var(--transition);
}
.header-main__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-start;
}

/* Primary menu */
.primary-menu {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
}
.primary-menu li { position: relative; }
.primary-menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	padding-block: 0.5rem;
	white-space: nowrap;
}
.primary-menu a:hover { color: var(--color-gold-500); }
.primary-menu .menu-item-has-children > a::after {
	content: "";
	width: 0.5rem; height: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--transition);
}

/* Dropdown submenu */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14rem;
	background: var(--color-gold-50);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 0.5rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: 5;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.primary-menu .sub-menu a {
	display: block;
	padding: 0.6rem 1.25rem;
	color: var(--color-neutral-950);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--text-sm);
}
.primary-menu .sub-menu a:hover { color: var(--color-gold-600); background: rgb(183 159 86 / 0.08); }

/* Right action cluster */
.header-main__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.header-cta { height: 3rem; }
.menu-toggle { display: none; }

/* Search panel — cream band matching brand, pill field + red CTA */
.header-search-panel {
	background: var(--color-gold-100);
	padding-block: 1.15rem;
	border-top: 1px solid rgb(0 45 51 / 0.08);
}
.header-search-panel .search-form {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	max-width: 48rem;
}
.header-search-panel .search-field {
	flex: 1 1 auto;
	height: 3.25rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-subtle);
	padding-inline: 1.35rem;
	background: #fff;
	color: var(--color-neutral-950);
	font-size: var(--text-base);
	box-shadow: var(--shadow-sm);
}
.header-search-panel .search-field:focus {
	border-color: var(--color-gold-500);
	outline: 2px solid var(--color-gold-500);
	outline-offset: 1px;
}
.header-search-panel .search-submit {
	flex: 0 0 auto;
	background-color: var(--color-reserve);
	color: #fff;
	min-height: 3.25rem;
}
.header-search-panel .search-submit:hover {
	background-color: var(--color-reserve-hover);
	color: #fff;
}

/* --- Header states: transparent over hero vs solid ---
   Defaults are driven by the body class so the FIRST paint is correct even
   before the (deferred) JS runs:
     - front page / has-hero  → transparent at top
     - interior / no-hero      → solid (legible over cream page)
   JS then toggles .is-solid on scroll (and .is-transparent at scrollTop 0). */
.site-header {
	background-color: transparent;
	box-shadow: none;
}

/* Front page starts transparent over the hero. */
body.has-hero .site-header,
.site-header.is-transparent {
	background-color: transparent;
	box-shadow: none;
}
/* Topbar stays warm gold regardless of header state. */
body.has-hero .site-header .header-topbar {
	background-color: var(--color-topbar);
}

/* Interior pages (no hero) — solid blue header bar in every state. Its own
   rule so it does NOT inherit the homepage's translucent blue .is-solid fill. */
body.no-hero .site-header,
body.no-hero .site-header.is-solid {
	background-color: var(--color-header-solid);
	box-shadow: 0 2px 12px rgb(0 18 21 / 0.18);
}
body.no-hero .site-header .header-topbar {
	background-color: var(--color-topbar);
}

/* Scrolled state — frosted glassmorphism on the MAIN nav row only.
   The transparent front-page rule `body.has-hero .site-header` has specificity
   (0,2,1); the plain `.site-header.is-solid` rule was only (0,2,0) and lost on
   the homepage. We keep the `body.has-hero .site-header.is-solid` structure so
   the scrolled state wins on the front page too, while `.site-header.is-solid`
   on its own still covers interior pages.

   Instead of a solid teal fill we now use a translucent teal + backdrop blur so
   the hero shows through, blurred, behind the nav. The topbar keeps its solid
   gold. A @supports fallback below keeps it legible without backdrop-filter. */
body.has-hero .site-header.is-solid,
.site-header.is-solid {
	background-color: rgb(0 107 161 / 68%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.06), 0 6px 24px rgb(0 18 21 / 0.28);
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
/* Topbar stays warm gold even when scrolled. */
body.has-hero .site-header.is-solid .header-topbar,
.site-header.is-solid .header-topbar {
	background-color: var(--color-topbar);
}
/* Fallback: no backdrop-filter → a near-solid teal so text stays legible. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	body.has-hero .site-header.is-solid,
	.site-header.is-solid {
		background-color: rgb(0 107 161 / 0.96);
	}
}

/* Non-front pages start solid, with header offset so content isn't hidden */
body.no-hero { padding-top: var(--mainbar-h); }
@media (min-width: 1280px) {
	body.no-hero { padding-top: calc(var(--mainbar-h) + var(--topbar-h)); }
}

/* Mobile header adjustments */
@media (max-width: 1023.98px) {
	.header-main__nav { display: none; }
	.header-search-toggle,
	.header-main__actions > a.icon-btn[href*="mijn-account"] { display: none; }
	.header-cta { display: none; }
	.menu-toggle { display: inline-flex; }
	.header-main__nav { flex: 0; }
	.header-main__inner { justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   6. MOBILE OVERLAY MENU
   --------------------------------------------------------------------------- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--color-neutral-900);
	color: #fff;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--transition), transform var(--transition);
}
.mobile-menu.is-open {
	opacity: 1;
	transform: translateY(0);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--mainbar-h);
}
.mobile-menu .mobile-menu__logo { height: 2.75rem; width: auto; max-width: none; }
.mobile-menu__close { color: #fff; }
.mobile-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 1.5rem;
	overflow-y: auto;
}
.mobile-primary-menu,
.mobile-primary-menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}
.mobile-primary-menu a {
	display: block;
	padding: 0.85rem 0;
	font-size: var(--text-xl);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.mobile-primary-menu a:hover { color: var(--color-gold-500); }
.mobile-primary-menu .sub-menu { padding-left: 1rem; }
.mobile-primary-menu .sub-menu a { font-size: var(--text-base); text-transform: none; letter-spacing: normal; opacity: 0.85; }
.mobile-menu__cta { margin-top: 1.75rem; width: 100%; }

/* ---------------------------------------------------------------------------
   7. HERO SLIDER + RESERVATION BAR
   --------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #fff;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Background video: sits above the slider images, below the overlay. Starts
   invisible (poster/slider shows through) and fades in once loaded by JS. */
.hero__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	/* Decorative only — never interactive (no pause/seek/fullscreen). */
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.hero__video.is-ready { opacity: 1; }

/* Slim loading progress bar overlaid on the hero (teal track, gold fill). */
.hero__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 4px;
	background: rgb(0 45 51 / 0.45);
	overflow: hidden;
}
.hero__progress[hidden] { display: none; }
.hero__progress-bar {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--color-gold-500), var(--color-topbar));
	transition: width 0.2s ease-out;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to bottom, rgb(0 18 21 / 0.45) 0%, rgb(0 18 21 / 0.25) 40%, rgb(0 18 21 / 0.55) 100%);
}

.hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	padding-top: calc(var(--mainbar-h) + var(--topbar-h));
	padding-bottom: 4rem;
}

.hero__title {
	max-width: 72rem;
	margin-inline: auto;
	text-align: center;
	text-wrap: balance;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	color: #fff;
}
.hero__title-serif {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-size: var(--text-4xl);
	line-height: 1.05;
}
.hero__title-sans {
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--text-2xl);
	line-height: 1.15;
}
@media (min-width: 1024px) {
	.hero__title-serif { font-size: var(--text-8xl); line-height: var(--lh-8xl); }
	.hero__title-sans  { font-size: var(--text-6xl); line-height: 1.1; }
}

/* Scroll cue */
.hero__scroll-cue {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	color: #fff;
	animation: hammam-bounce 1.8s infinite;
}
@keyframes hammam-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__scroll-cue { animation: none; }
	.hero__slide { transition: none; }
	html { scroll-behavior: auto; }
}

/* Reservation bar (frosted glass) */
.reservation-bar {
	width: 100%;
	max-width: 62rem;
	margin-inline: auto;
	background: rgba(251, 250, 247, 0.20);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: var(--radius-lg);
	padding: 2.5rem;
	box-shadow: var(--shadow-card);
}
/* Fallback: without backdrop-filter, use a darker translucent fill so the
   white field labels stay legible over the hero. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
	.reservation-bar { background: rgba(0, 45, 51, 0.55); }
}
.reservation-bar__grid {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 1rem;
	align-items: end;
}
.res-field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.res-field__label {
	font-size: var(--text-sm);
	color: #fff;
	letter-spacing: var(--tracking-wide);
}
.res-pill {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--btn-height);
	background: #fff;
	border-radius: var(--radius-pill);
	padding-left: 1.75rem;
	padding-right: 0.4rem;
	color: var(--color-neutral-950);
	transition: box-shadow var(--transition);
}
.res-pill:focus-within {
	box-shadow: inset 0 0 0 2px var(--cta), var(--shadow-ring-focus);
}
.res-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	height: 100%;
	outline: none;
	font-size: var(--text-base);
}
.res-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 0.5rem;
	cursor: pointer;
}
.res-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	background: var(--color-neutral-100);
	color: var(--color-neutral-900);
	transition: background-color var(--transition);
}
.res-chip--caret { background: transparent; pointer-events: none; }
button.res-chip:hover { background: var(--color-neutral-200); }

/* Custom reservation select (icons + full-width panel matching the pill). */
.res-select-custom {
	position: relative;
	width: 100%;
}
.res-select-custom__trigger {
	width: 100%;
	justify-content: flex-start;
	gap: 0.65rem;
	padding-left: 1rem;
	padding-right: 0.4rem;
	cursor: pointer;
	border: none;
	text-align: left;
	font: inherit;
	/* Explicit dark text — do not inherit hero/white label color. */
	color: var(--color-neutral-950);
	background: #fff;
}
.res-select-custom__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.16);
	color: var(--color-gold-700);
}
.res-select-custom__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--text-base);
	line-height: 1.3;
	color: var(--color-neutral-950);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.res-select-custom__trigger .res-chip--caret {
	margin-left: auto;
	transition: transform var(--transition);
}
.res-select-custom.is-open .res-select-custom__trigger .res-chip--caret {
	transform: rotate(180deg);
}
.res-select-custom__list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.4rem);
	z-index: 30;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: #fff;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card), 0 0 0 1px rgb(0 45 51 / 0.08);
	max-height: 16rem;
	overflow: auto;
}
.res-select-custom__option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3rem;
	padding: 0.55rem 0.85rem;
	border-radius: var(--radius-pill);
	cursor: pointer;
	color: var(--color-neutral-950);
	font-size: var(--text-base);
	transition: background-color var(--transition), color var(--transition);
}
.res-select-custom__option:hover,
.res-select-custom__option:focus-visible {
	background: rgb(183 159 86 / 0.12);
	outline: none;
}
.res-select-custom__option.is-selected {
	background: rgb(152 33 34 / 0.08);
	color: var(--color-reserve);
}
.res-select-custom__option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.16);
	color: var(--color-gold-700);
}
.res-select-custom__option.is-selected .res-select-custom__option-icon {
	background: var(--color-reserve);
	color: #fff;
}
.res-select-custom__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Guests stepper */
.res-stepper {
	justify-content: space-between;
	padding-left: 0.4rem;
	gap: 0.5rem;
}
.res-stepper__value {
	flex: 1 1 auto;
	text-align: center;
	font-size: var(--text-base);
	white-space: nowrap;
}

.reservation-bar__submit { width: 100%; white-space: nowrap; }
.res-field--submit { justify-content: flex-end; }

@media (max-width: 1023.98px) {
	.reservation-bar { display: none; }
}

/* ---------------------------------------------------------------------------
   8. INTERIOR PAGE TEMPLATE
   --------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	min-height: 52vh;
	display: flex;
	align-items: flex-end;
	color: #fff;
	background-image: var(--page-hero-img);
	background-size: cover;
	background-position: center;
}
.page-hero--slim { min-height: 38vh; }
.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(0 18 21 / 0.35), rgb(0 18 21 / 0.65));
}
.page-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: 3rem;
	padding-top: 6rem;
}
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-sm);
	margin-bottom: 0.75rem;
	opacity: 0.9;
}
.breadcrumb a:hover { color: var(--color-gold-500); }
.page-hero__title {
	font-size: var(--text-4xl);
	line-height: 1.1;
}
@media (min-width: 1024px) {
	.page-hero__title { font-size: var(--text-6xl); }
}

.page-article { padding-block: var(--section-gap-sm); }
@media (min-width: 1024px) {
	.page-article { padding-block: var(--section-gap-lg); }
}
/* Full-bleed .pg pages: hero already frames the top; last section owns the
   bottom rhythm (avoids a huge cream gap before the footer). */
.page-article:has(.pg) {
	padding-top: 0;
	padding-bottom: 0;
}
.entry-content {
	max-width: var(--content-max);
	margin-inline: auto;
	font-size: var(--text-lg);
	line-height: 1.8;
	color: var(--text-muted);
}
/* ACF block pages put .pg on .entry-content itself. Drop the reading-column
   max-width and the full-bleed breakout math — sections use .pg-container. */
.entry-content.pg {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}
.entry-content h2 { font-size: var(--text-4xl); color: var(--text-body); margin: 2rem 0 1rem; }
.entry-content h3 { font-size: var(--text-2xl); color: var(--text-body); margin: 1.75rem 0 0.75rem; }
.entry-content p { margin-bottom: 1.25rem; }
/* In-content text links: accessible gold + multicolor progress-bar hover.
   Buttons and image links must NOT inherit this. */
.entry-content a:not(.btn):not(:has(img)) {
	position: relative;
	color: var(--color-gold-700);
	text-decoration: none;
	background-image: linear-gradient(
		326deg,
		var(--color-gold-500) 0%,
		var(--wp--preset--color--luminous-vivid-amber) 35%,
		var(--wc-red) 70%,
		var(--color-gold-500) 100%
	);
	background-size: 200% 2px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	transition: color var(--transition), background-position 0.45s ease;
}
.entry-content a:not(.btn):not(:has(img)):hover,
.entry-content a:not(.btn):not(:has(img)):focus-visible {
	color: var(--color-reserve);
	background-position: 0% 100%;
}
/* Gallery / any link that wraps an image: never underline. */
.entry-content a:has(img),
#pg-gallerij a,
#pg-gallerij figure.g-item a {
	background-image: none !important;
	text-decoration: none !important;
	color: inherit;
}
/* Guard: .btn links inside content keep their own fill + never underline. */
.entry-content a.btn,
.pg a.btn {
	color: #fff;
	text-decoration: none;
	background-image: none;
}
.entry-content a.btn-secondary,
.pg a.btn-secondary {
	color: var(--color-neutral-950);
}
.entry-content img { border-radius: var(--radius-lg); margin-block: 1.5rem; }
.entry-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }

/* ---------------------------------------------------------------------------
   9. INDEX / BLOG LIST
   --------------------------------------------------------------------------- */
.index-list { padding-block: var(--section-gap-sm); }
@media (min-width: 1024px) {
	.index-list { padding-block: var(--section-gap-lg); }
}
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: var(--grid-gutter);
}
.post-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.post-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
.post-card__title { font-size: var(--text-2xl); }
.post-card__title a:hover { color: var(--color-gold-600); }
.post-card__meta { font-size: var(--text-sm); color: var(--text-muted); }
.post-card__excerpt { color: var(--text-muted); }

.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination a,
.pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.75rem;
	border-radius: var(--radius-pill);
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.pagination .current { background: var(--color-neutral-900); color: #fff; }

/* ---------------------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
	background: var(--bg-footer);
	color: var(--color-neutral-700);
	overflow-x: hidden;
	/* No top margin — sits flush against the last content band (avoids a
	   pale page-bg gap between Openingstijden and the cream footer). */
	margin-top: 0;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gutter);
	padding-block: var(--section-gap-sm);
}
@media (min-width: 640px) {
	.site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.site-footer__inner {
		grid-template-columns: 1.2fr 1fr 1fr 1fr;
		padding-block: var(--section-gap-lg);
	}
}
.footer-col__title {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	color: var(--color-gold-500);
	margin-bottom: 1.25rem;
}
.site-footer .footer-logo { height: 3.5rem; width: auto; max-width: none; margin-bottom: 1.25rem; }
.footer-social { display: flex; gap: 0.75rem; }
.footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-pill);
	background: rgb(0 45 51 / 0.06);
	color: var(--color-neutral-800);
	transition: background-color var(--transition), color var(--transition);
}
.footer-social__link:hover { color: var(--color-gold-600); background: rgb(0 45 51 / 0.12); }

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.footer-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--text-base);
	line-height: 1.35;
	color: var(--color-neutral-800);
	text-decoration: none;
	background-image: linear-gradient(
		326deg,
		var(--color-gold-500) 0%,
		var(--wp--preset--color--luminous-vivid-amber) 35%,
		var(--wc-red) 70%,
		var(--color-gold-500) 100%
	);
	background-size: 200% 2px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	transition: color var(--transition), background-position 0.45s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--color-gold-700);
	background-position: 0% 100%;
}
.footer-link__icon {
	flex: 0 0 auto;
	color: var(--color-gold-700);
	opacity: 0.9;
}
.footer-links a:hover .footer-link__icon { color: var(--color-gold-700); opacity: 1; }

.footer-address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.footer-address__row {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
	line-height: 1.55;
	color: var(--color-neutral-800);
}
.footer-address__row .footer-link__icon {
	margin-top: 0.15rem;
}
.footer-address a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(
		326deg,
		var(--color-gold-500) 0%,
		var(--wp--preset--color--luminous-vivid-amber) 35%,
		var(--wc-red) 70%,
		var(--color-gold-500) 100%
	);
	background-size: 200% 2px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	transition: color var(--transition), background-position 0.45s ease;
}
.footer-address a:hover,
.footer-address a:focus-visible {
	color: var(--color-gold-700);
	background-position: 0% 100%;
}

/* Homepage: Openingstijden cream band flows straight into the cream footer. */
body.home #pg-openingstijden .pg-section--tint {
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.site-footer__bottom {
	border-top: 1px solid rgb(0 45 51 / 0.10);
}
.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding-block: 1.5rem;
	font-size: var(--text-sm);
}
.footer-bottom__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem 1.75rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-legal a {
	text-decoration: none;
	color: inherit;
	background-image: linear-gradient(
		326deg,
		var(--color-gold-500) 0%,
		var(--wp--preset--color--luminous-vivid-amber) 35%,
		var(--wc-red) 70%,
		var(--color-gold-500) 100%
	);
	background-size: 200% 2px;
	background-repeat: no-repeat;
	background-position: 100% 100%;
	transition: color var(--transition), background-position 0.45s ease;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
	color: var(--color-gold-700);
	background-position: 0% 100%;
}

/* ---------------------------------------------------------------------------
   11. WOOCOMMERCE — shop, single product, cart, checkout & account, styled
       on-brand inside the theme container. (Task 2)
   --------------------------------------------------------------------------- */
.woocommerce-page-main { padding-block: var(--section-gap-sm); }
@media (min-width: 1024px) {
	.woocommerce-page-main { padding-block: var(--section-gap-lg); }
}

/* --- Content image normalization (scoped) --------------------------------
   WooCommerce core (woocommerce-layout.css) ships an UNSCOPED page-wide image
   normalization (height:auto; max-width:100%) that also matches the
   header/footer/mobile logos and blows them up. We cannot edit plugin core,
   so the logos are protected by higher-specificity rules above; here we
   (re)assert responsive sizing ONLY for genuine product and content
   images — never for `.site-header` / `.site-footer`. */
.woocommerce div.product img,
.woocommerce ul.products img,
.woocommerce .woocommerce-product-gallery img,
.woocommerce .related img,
.woocommerce .upsells img,
.woocommerce-cart img,
.woocommerce-checkout img,
.res-single img { height: auto; max-width: 100%; }

/* --- Buttons: brand-red primary, gold-outline secondary ------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.75rem 1.75rem;
	background-color: var(--color-reserve);
	color: #fff;
	border: none;
	border-radius: var(--radius-pill);
	font-size: var(--text-base);
	line-height: 1;
	text-transform: uppercase;
	font-variant: all-small-caps;
	letter-spacing: var(--tracking-wider);
	transition: background-color var(--transition), transform var(--transition), opacity var(--transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.checkout-button:hover {
	background-color: var(--color-reserve-hover);
	color: #fff;
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: scale(0.98); }
.woocommerce a.added_to_cart { margin-left: 0.75rem; color: var(--color-gold-700); }

/* Secondary / utility Woo buttons (Update cart, Apply coupon, Continue shopping). */
.woocommerce button.button:not(.alt):not(.checkout-button),
.woocommerce a.button:not(.alt):not(.checkout-button):not(.add_to_cart_button):not(.product_type_booking):not(.single_add_to_cart_button),
.woocommerce input.button:not(.alt),
.woocommerce .coupon .button,
.woocommerce-cart .actions .button,
.woocommerce a.button.wc-backward {
	background: transparent;
	color: var(--color-neutral-950);
	box-shadow: inset 0 0 0 1px var(--color-gold-500);
}
.woocommerce button.button:not(.alt):not(.checkout-button):hover,
.woocommerce a.button:not(.alt):not(.checkout-button):not(.add_to_cart_button):not(.product_type_booking):not(.single_add_to_cart_button):hover,
.woocommerce input.button:not(.alt):hover,
.woocommerce .coupon .button:hover,
.woocommerce-cart .actions .button:hover,
.woocommerce a.button.wc-backward:hover {
	background: rgb(183 159 86 / 0.12);
	color: var(--color-neutral-950);
	box-shadow: inset 0 0 0 1px var(--color-gold-700);
}

/* Disabled / unavailable booking CTA stays readable (muted red, not lavender). */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce .wc-bookings-booking-form-button.disabled {
	background-color: var(--color-reserve) !important;
	color: #fff !important;
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Notices ------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	border-radius: var(--radius-lg);
	border-top: none;
	box-shadow: var(--shadow-sm);
	padding: 1.15rem 1.35rem 1.15rem 3.75rem !important;
	margin-bottom: 1.5rem;
	list-style: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 1.2rem !important;
	left: 1.2rem !important;
	z-index: 0;
}
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	position: relative;
	z-index: 1;
	margin: 0 0 0.45rem !important;
	padding: 0 !important;
	list-style: none !important;
}
.woocommerce-message li:last-child,
.woocommerce-info li:last-child,
.woocommerce-error li:last-child { margin-bottom: 0 !important; }
.woocommerce-message { background: rgb(183 159 86 / 0.10); color: var(--text-body); }
.woocommerce-info { background: var(--color-neutral-50); color: var(--text-body); }
.woocommerce-error {
	background: rgb(152 33 34 / 0.08);
	color: var(--color-reserve);
}
.woocommerce-error a,
.woocommerce-error a:not(.btn) {
	color: var(--color-reserve) !important;
	background-image: none !important;
	text-decoration: underline;
	font-weight: var(--fw-medium);
}
.woocommerce-error a:hover {
	color: var(--color-reserve-hover) !important;
}

/* --- Breadcrumb ---------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-bottom: 1.75rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--color-gold-700); }

/* --- Shop / archive product grid (cards like .offer-card) --------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gutter);
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	margin: 0;
	padding: 0;
	width: auto !important;
	float: none !important;
	text-align: left;
}
.woocommerce ul.products li.product a { display: block; }
.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--text-xl);
	color: var(--text-body);
	padding: 1.25rem 1.5rem 0;
}
.woocommerce ul.products li.product .price {
	display: block;
	color: var(--color-gold-700);
	font-size: var(--text-lg);
	padding: 0.5rem 1.5rem 0;
	margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--text-muted); opacity: 0.7; margin-right: 0.4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: 1rem 1.5rem 1.5rem;
	align-self: flex-start;
}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--color-gold-500);
	color: #fff;
	border-radius: var(--radius-pill);
	min-height: auto;
	min-width: auto;
	padding: 0.35rem 0.85rem;
	font-size: var(--text-xs);
	line-height: 1;
	font-variant: all-small-caps;
	letter-spacing: var(--tracking-wide);
}
.woocommerce .woocommerce-result-count { color: var(--text-muted); font-size: var(--text-sm); }
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	padding: 0.5rem 1rem;
	background: #fff;
}

/* --- Single product: gallery left / summary right ----------------------- */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
@media (min-width: 900px) {
	.woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
	.woocommerce div.product .woocommerce-product-gallery { position: sticky; top: calc(var(--mainbar-h) + 1.5rem); }
}
.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none;
	margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: var(--radius-lg); }
.woocommerce div.product .woocommerce-product-gallery .flex-viewport { border-radius: var(--radius-lg); overflow: hidden; }
.woocommerce div.product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; padding: 0; }
.woocommerce div.product .flex-control-thumbs li { width: 5rem; margin: 0; }
.woocommerce div.product .flex-control-thumbs img { border-radius: var(--radius-md); }
.woocommerce div.product .summary { width: 100% !important; float: none; margin: 0; }
.woocommerce div.product .product_title {
	font-size: var(--text-4xl);
	line-height: 1.1;
	color: var(--text-body);
	margin-bottom: 0.75rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-gold-700);
	font-size: var(--text-2xl);
	margin-bottom: 1.25rem;
}
.woocommerce div.product p.price del { color: var(--text-muted); opacity: 0.7; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--text-muted);
	line-height: 1.7;
	margin-bottom: 1.5rem;
}
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 1rem; }
.woocommerce div.product .product_meta { font-size: var(--text-sm); color: var(--text-muted); margin-top: 1.5rem; }
.woocommerce div.product .product_meta a:hover { color: var(--color-gold-700); }

/* Quantity + add-to-cart row */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.woocommerce .quantity input.qty {
	width: 4.5rem;
	height: 3rem;
	text-align: center;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	background: #fff;
}
.woocommerce div.product form.cart .variations { margin-bottom: 1rem; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: 0.5rem 0; }
.woocommerce div.product form.cart .variations select {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	padding: 0.5rem 1rem;
	background: #fff;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 0 1rem;
	margin: 0;
	border-bottom: 1px solid var(--border-subtle);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: var(--radius-pill);
	padding: 0;
	margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.55rem 1.25rem;
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	text-transform: uppercase;
	font-variant: all-small-caps;
	letter-spacing: var(--tracking-wide);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: var(--color-neutral-900); color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel {
	padding-top: 1.5rem;
	color: var(--text-muted);
	line-height: 1.7;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { color: var(--text-body); font-size: var(--text-2xl); margin-bottom: 1rem; }

/* Related / upsells */
.woocommerce .related.products,
.woocommerce .upsells.products { grid-column: 1 / -1; margin-top: 3rem; }
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
	font-size: var(--text-3xl);
	color: var(--text-body);
	margin-bottom: 1.5rem;
}

/* --- Cart / checkout / account: clean + legible ------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--color-gold-100); color: var(--text-body); }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { padding: 1rem; }
.woocommerce table.shop_table a { color: var(--color-gold-700); }
.woocommerce table.shop_table a:hover { color: var(--color-reserve); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	background: var(--color-gold-100);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
	color: var(--text-body);
	font-weight: var(--fw-normal);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input,
.woocommerce #order_review input,
.woocommerce .select2-container--default .select2-selection--single {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	background: #fff;
	min-height: 3rem;
	color: var(--text-body);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--color-gold-500);
	outline: 2px solid var(--color-gold-500);
	outline-offset: 1px;
}
.woocommerce form .form-row textarea { min-height: 6rem; }
.woocommerce-checkout #payment {
	background: var(--color-gold-100);
	border-radius: var(--radius-lg);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border-subtle); }
.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	color: var(--text-muted);
}
.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation ul li { margin: 0; list-style: none; }
.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: var(--radius-pill);
	color: var(--text-body);
	text-decoration: none;
	background-image: none !important;
	font-size: var(--text-base);
	transition: background-color var(--transition), color var(--transition);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--color-reserve);
	color: #fff;
}
.woocommerce-MyAccount-navigation ul li a:hover { background: rgb(152 33 34 / 0.08); color: var(--color-reserve); }
.woocommerce-MyAccount-navigation ul li.is-active a:hover { background: var(--color-reserve-hover); color: #fff; }

@media (min-width: 768px) {
	/* Flex (not auto-flow grid): empty notices wrappers used to steal
	   the first 15rem column and crush content into a narrow stack.
	   Kill WooCommerce float/30%/68% so nav + content share the full width. */
	body.logged-in.woocommerce-account .woocommerce {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 2rem;
		width: 100%;
	}
	body.logged-in.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
		flex: 0 0 100%;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none !important;
		flex: 0 0 15rem;
		width: 15rem !important;
		max-width: 15rem;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
		float: none !important;
		flex: 1 1 0;
		width: auto !important;
		max-width: none !important;
		min-width: 0;
	}
}

/* ==========================================================================
   11b. MY ACCOUNT — login panel + logged-in dashboard
   ========================================================================== */
body.woocommerce-account .entry-content {
	max-width: var(--container-max);
}
body.woocommerce-account .page-article {
	padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce > h2 {
	/* Hide default bare "Login" heading; our panel has its own title. */
	display: none;
}

/* --- Logged-out: centered login card ------------------------------------ */
.hammam-account-login {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-block: 0.5rem 1rem;
}
.hammam-account-login__card {
	width: 100%;
	max-width: 28rem;
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: var(--shadow-sm);
}
.hammam-account-login__form {
	/* Prevent fallback form.login card styles from nesting a second box. */
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.hammam-account-login__form .password-input {
	display: block;
	position: relative;
}
.hammam-account-login__form .password-input .woocommerce-Input,
.hammam-account-login__form .password-input input.input-text {
	padding-right: 3rem !important;
}
.hammam-account-login__form .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.65rem;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
}
.hammam-account-login__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	margin-bottom: 1.5rem;
}
.hammam-account-login__head .pg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	line-height: 1.2;
	color: var(--color-gold-700);
	margin: 0;
}
.hammam-account-login__head .pg-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.hammam-account-login__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(1.6rem, 3vw, 2rem);
	line-height: 1.15;
	color: var(--text-body);
}
.hammam-account-login__lead {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--text-muted);
}
.hammam-account-login__form .form-row {
	margin: 0 0 1.1rem;
}
.hammam-account-login__form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-body);
}
.hammam-account-login__form .woocommerce-Input,
.hammam-account-login__form input.input-text {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--text-body);
	font: inherit;
	box-sizing: border-box;
}
.hammam-account-login__form .woocommerce-Input:focus,
.hammam-account-login__form input.input-text:focus {
	border-color: var(--color-gold-500);
	outline: 2px solid var(--color-gold-500);
	outline-offset: 1px;
}
.hammam-account-login__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}
.hammam-account-login__actions .woocommerce-form__label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--fw-normal);
	color: var(--text-muted);
	cursor: pointer;
}
.hammam-account-login__lost {
	font-size: var(--text-sm);
	color: var(--color-gold-700) !important;
	background-image: none !important;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.hammam-account-login__lost:hover { color: var(--color-reserve) !important; }
.hammam-account-login__form .woocommerce-form-login__submit,
.hammam-account-login__form button[type="submit"] {
	width: 100%;
	min-height: 3.25rem;
	background-color: var(--color-reserve) !important;
	color: #fff !important;
	border: none;
	border-radius: var(--radius-pill);
	box-shadow: none;
}
.hammam-account-login__form .woocommerce-form-login__submit:hover {
	background-color: var(--color-reserve-hover) !important;
}
.hammam-account-login__help {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--text-sm);
	line-height: 1.55;
	color: var(--text-muted);
	text-align: center;
}
.hammam-account-login__help a {
	color: var(--color-gold-700) !important;
	background-image: none !important;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* Soft band behind the login panel so it does not float in empty white. */
body.woocommerce-account:not(.logged-in) .page-article {
	background:
		linear-gradient(
			180deg,
			var(--color-gold-50) 0%,
			#fff 42%,
			#fff 100%
		);
}

/* Fallback when template override is not yet loaded (bare WC login). */
body.woocommerce-account:not(.logged-in) .woocommerce form.login:not(.hammam-account-login__form) {
	max-width: 28rem;
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: var(--shadow-sm);
}
body.woocommerce-account:not(.logged-in) .woocommerce form.login:not(.hammam-account-login__form) .form-row-wide {
	margin-bottom: 1.1rem;
}
body.woocommerce-account:not(.logged-in) .woocommerce form.login:not(.hammam-account-login__form) label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
}
body.woocommerce-account:not(.logged-in) .woocommerce form.login:not(.hammam-account-login__form) .button {
	width: 100%;
	background-color: var(--color-reserve) !important;
	color: #fff !important;
	border-radius: var(--radius-pill);
	min-height: 3.25rem;
}

/* Lost password */
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-lost-password .woocommerce form.lost_reset_password {
	max-width: 26rem;
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: var(--shadow-sm);
}
body.woocommerce-lost-password .woocommerce form.lost_reset_password .button {
	background-color: var(--color-reserve) !important;
	color: #fff !important;
	border-radius: var(--radius-pill);
	min-height: 3rem;
}

/* --- Logged-in dashboard ------------------------------------------------- */
body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--color-gold-100);
	border-radius: var(--radius-xl);
	padding: 1rem;
}
body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: clamp(1.25rem, 3vw, 1.85rem);
	min-width: 0;
}
body.logged-in.woocommerce-account .woocommerce-MyAccount-content > h2,
body.logged-in.woocommerce-account .woocommerce-MyAccount-content > h3 {
	margin: 0 0 1rem;
	font-weight: var(--fw-normal);
	font-size: var(--text-2xl);
	color: var(--text-body);
}
body.logged-in.woocommerce-account .woocommerce-MyAccount-content p {
	color: var(--text-muted);
	line-height: 1.65;
}
body.logged-in.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.btn) {
	color: var(--color-gold-700);
	background-image: none !important;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}
body.logged-in.woocommerce-account .woocommerce-MyAccount-content .button,
body.logged-in.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
	background-color: var(--color-reserve) !important;
	color: #fff !important;
	border-radius: var(--radius-pill);
	border: none;
	min-height: 2.75rem;
	padding: 0.55rem 1.35rem;
}
body.logged-in.woocommerce-account .woocommerce-Orders-table,
body.logged-in.woocommerce-account table.shop_table {
	width: 100%;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	overflow: hidden;
}
body.logged-in.woocommerce-account table.shop_table th {
	background: var(--color-gold-100);
	font-size: var(--text-sm);
}
body.logged-in.woocommerce-account .woocommerce-Address {
	background: var(--color-gold-50);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 1.15rem;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}
body.logged-in.woocommerce-account .woocommerce-Addresses,
body.logged-in.woocommerce-account .u-columns.col2-set.addresses {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	width: 100% !important;
	float: none !important;
	clear: both;
}
body.logged-in.woocommerce-account .woocommerce-Addresses::before,
body.logged-in.woocommerce-account .woocommerce-Addresses::after,
body.logged-in.woocommerce-account .u-columns.col2-set.addresses::before,
body.logged-in.woocommerce-account .u-columns.col2-set.addresses::after {
	display: none !important;
	content: none !important;
}
body.logged-in.woocommerce-account .woocommerce-Addresses .col-1,
body.logged-in.woocommerce-account .woocommerce-Addresses .col-2,
body.logged-in.woocommerce-account .woocommerce-Addresses .u-column1,
body.logged-in.woocommerce-account .woocommerce-Addresses .u-column2 {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}
body.logged-in.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 0.75rem;
}
body.logged-in.woocommerce-account .woocommerce-Address-title h2,
body.logged-in.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--fw-normal);
}
body.logged-in.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: 1.65;
	color: var(--text-body);
}
@media (min-width: 720px) {
	body.logged-in.woocommerce-account .woocommerce-Addresses,
	body.logged-in.woocommerce-account .u-columns.col2-set.addresses {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 767.98px) {
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 1.25rem;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem;
	}
	body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		text-align: center;
		font-size: var(--text-sm);
		padding: 0.6rem 0.5rem;
	}
}

/* Shop loop / booking "Boek nu" and add-to-cart stay brand red. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce a.button.product_type_booking,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
	background-color: var(--color-reserve);
	color: #fff;
	box-shadow: none;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce a.button.product_type_booking:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: var(--color-reserve-hover);
	color: #fff;
}

/* ==========================================================================
   12. HOMEPAGE SECTIONS (Phase 3) — discover, offers, gallery, news, newsletter
   Reuses the design tokens above. Section rhythm my-10 → lg:my-24 (40/96px);
   headings use the §2 Section-H2 style (weight 400, centered, neutral-950,
   clamped to 52.5rem).
   ========================================================================== */

/* --- Shared section rhythm + heading -------------------------------------- */
.home-intro,
.home-section { margin-block: var(--section-gap-sm); }
@media (min-width: 1024px) {
	.home-intro,
	.home-section { margin-block: var(--section-gap-lg); }
}

.section-h2 {
	max-width: var(--content-max);
	margin-inline: auto;
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: var(--text-3xl);
	line-height: var(--lh-3xl);
	color: var(--color-neutral-950);
	text-align: center;
	text-wrap: balance;
}
@media (min-width: 1024px) {
	.section-h2 { font-size: var(--text-6xl); line-height: var(--lh-6xl); }
}

.home-section__head { margin-bottom: 2.5rem; }
@media (min-width: 1024px) {
	.home-section__head { margin-bottom: 4rem; }
}
.home-section__cta {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

/* --- Intro lead-in -------------------------------------------------------- */
.home-intro__lead {
	max-width: var(--content-max);
	margin-inline: auto;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--text-lg);
	line-height: 1.8;
}

/* --- Shared 3-column card grid ------------------------------------------- */
.card-grid {
	display: grid;
	gap: var(--grid-gutter);
}
.card-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Small uppercase text link ("Ontdek meer →") */
.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.25rem;
	font-size: var(--text-sm);
	text-transform: uppercase;
	font-variant: all-small-caps;
	letter-spacing: var(--tracking-wider);
	color: var(--color-neutral-950);
}
.text-link:hover { color: var(--color-gold-600); }
.text-link__arrow { transition: transform var(--transition); }
.text-link:hover .text-link__arrow { transform: translateX(3px); }

/* --- a) Discover: full-bleed facility panels ----------------------------- */
.facility-panels {
	display: grid;
	gap: var(--grid-gutter);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.facility-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.facility-panel {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 3 / 4;
	min-height: 22rem;
	color: #fff;
	text-decoration: none;
	background-image: none !important;
}
.facility-panel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 0.7s ease;
}
.facility-panel__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(0 18 21 / 0.05) 0%,
		rgb(0 18 21 / 0.2) 45%,
		rgb(0 18 21 / 0.72) 100%
	);
	pointer-events: none;
}
.facility-panel__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding: 1.75rem 1.25rem 1.85rem;
	text-align: center;
}
.facility-panel__title {
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: clamp(1.35rem, 2vw, 1.65rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.15;
}
.facility-panel__text {
	max-width: 16rem;
	font-size: var(--text-base);
	line-height: 1.45;
	color: rgb(255 255 255 / 0.9);
}
.facility-panel:hover .facility-panel__img,
.facility-panel:focus-visible .facility-panel__img {
	transform: scale(1.07);
}
.facility-panel:focus-visible {
	outline: 2px solid var(--color-gold-500);
	outline-offset: 3px;
}

/* Legacy facility-card (kept for safety if referenced elsewhere) */
.facility-card { display: flex; flex-direction: column; }
.facility-card__media { display: block; }
.facility-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
.facility-card__body {
	padding-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}
.facility-card__title { font-size: var(--text-2xl); }
.facility-card__text { color: var(--text-muted); }

/* --- a2) News ticker (inside home-reserve band) -------------------------- */
.home-reserve .news-ticker {
	position: relative;
	z-index: 2;
	background: transparent;
	border: 0;
	overflow: hidden;
	border-bottom: 1px solid rgb(183 159 86 / 0.28);
}
.news-ticker__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 3rem;
	padding-block: 0.55rem;
}
.news-ticker__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-reserve);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.news-ticker__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}
.news-ticker__track {
	display: flex;
	width: max-content;
	gap: 3.5rem;
	animation: hammam-ticker 48s linear infinite;
}
.news-ticker:hover .news-ticker__track,
.news-ticker:focus-within .news-ticker__track {
	animation-play-state: paused;
}
.news-ticker__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 0;
	white-space: nowrap;
	font-size: var(--text-sm);
	line-height: 1.45;
	color: var(--text-body);
}
.news-ticker__label {
	color: var(--color-gold-700);
	font-weight: var(--fw-semibold);
}
.news-ticker__sep { color: var(--color-gold-500); }
@media (prefers-reduced-motion: reduce) {
	.news-ticker__track { animation: none; flex-wrap: wrap; width: auto; gap: 0.75rem 1.5rem; }
	.news-ticker__item { white-space: normal; }
	.news-ticker__viewport { mask-image: none; overflow: visible; }
}
@keyframes hammam-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --- a3) Reserve doors (below ticker) ------------------------------------ */
.home-reserve {
	margin: 0 0 var(--section-gap-sm);
	padding: 0 0 clamp(2rem, 4vw, 3.25rem);
	background: var(--color-gold-100);
}
@media (min-width: 1024px) {
	.home-reserve { margin-bottom: var(--section-gap-lg); }
}
.home-reserve__body {
	padding-top: 0.75rem;
}
.home-reserve__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 1.35rem;
}
.home-reserve__head .section-h2 {
	margin-block: 0;
}
.home-reserve__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	color: var(--color-gold-700);
}
.home-reserve__eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.home-reserve__lead {
	max-width: 36rem;
	margin: 0.7rem auto 0;
	color: var(--text-muted);
	font-size: var(--text-base);
	line-height: 1.65;
}
.reserve-doors {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	justify-items: center;
}
@media (min-width: 720px) {
	.reserve-doors {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.75rem;
		align-items: stretch;
	}
}

/* Door = one arched panel with an integrated gold jamb (not a floating halo). */
.reserve-door {
	position: relative;
	display: block;
	width: min(100%, 17.5rem);
	text-decoration: none;
	color: var(--text-body);
	background-image: none !important;
}
.reserve-door__frame {
	display: block;
	height: 100%;
	transform-origin: left center;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.45s ease;
}
.reserve-door__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	height: 100%;
	min-height: 100%;
	padding: 1.45rem 1.15rem 1.5rem;
	border-radius: 999px 999px 1.1rem 1.1rem;
	border: 2px solid var(--color-gold-500);
	background: #fff;
	box-shadow: var(--shadow-sm);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	transition: border-color 0.35s ease, box-shadow 0.45s ease;
}
.reserve-door__panel::before {
	/* Warm threshold glow — only on hover. */
	content: "";
	position: absolute;
	inset: -30% -15% auto;
	height: 60%;
	background: radial-gradient(ellipse at 50% 0%, rgb(218 171 105 / 0.35), transparent 68%);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
	z-index: 0;
}
.reserve-door__panel > * { position: relative; z-index: 1; }

.reserve-door--dames .reserve-door__panel {
	background: linear-gradient(180deg, #fff8f6 0%, #fff 48%);
}
.reserve-door--heren .reserve-door__panel {
	background: linear-gradient(180deg, #f4f8fb 0%, #fff 48%);
}
.reserve-door--prive .reserve-door__panel {
	background: linear-gradient(180deg, #fbf7ee 0%, #fff 48%);
}

.reserve-door__media {
	display: grid;
	place-items: center;
	width: 7.5rem;
	height: 7.5rem;
	margin-bottom: 0.35rem;
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--color-gold-50);
	box-shadow: inset 0 0 0 1px rgb(183 159 86 / 0.2);
}
.reserve-door__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reserve-door__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
	background: rgb(152 33 34 / 0.08);
	color: var(--color-reserve);
	transition: transform 0.4s ease, background-color 0.4s ease;
}
.reserve-door__title {
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
}
.reserve-door__text {
	font-size: var(--text-sm);
	color: var(--text-muted);
	line-height: 1.4;
}
.reserve-door__price {
	margin-top: 0.25rem;
	font-size: var(--text-xl);
	color: var(--color-gold-700);
	font-weight: var(--fw-semibold);
}
.reserve-door__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.55rem;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-reserve);
	letter-spacing: 0.02em;
}
.reserve-door__arrow {
	display: inline-block;
	transition: transform 0.35s ease;
}

/* Hover: shared lift for all doors (no 3D pivot). */
.reserve-door:hover .reserve-door__frame,
.reserve-door:focus-visible .reserve-door__frame {
	transform: translateY(-6px);
	filter: drop-shadow(0 14px 24px rgb(0 18 21 / 0.12));
}
.reserve-door:hover .reserve-door__panel,
.reserve-door:focus-visible .reserve-door__panel {
	border-color: var(--color-gold-700);
	box-shadow: 0 0 0 1px rgb(183 159 86 / 0.22);
}
.reserve-door:hover .reserve-door__panel::before,
.reserve-door:focus-visible .reserve-door__panel::before {
	opacity: 1;
}
.reserve-door:hover .reserve-door__media img,
.reserve-door:focus-visible .reserve-door__media img {
	transform: scale(1.06);
}
.reserve-door:hover .reserve-door__icon,
.reserve-door:focus-visible .reserve-door__icon {
	transform: scale(1.06);
	background: rgb(152 33 34 / 0.14);
}
.reserve-door:hover .reserve-door__cta,
.reserve-door:focus-visible .reserve-door__cta {
	color: var(--color-reserve-hover);
}
.reserve-door:hover .reserve-door__arrow,
.reserve-door:focus-visible .reserve-door__arrow {
	transform: translateX(4px);
}
.reserve-door:focus-visible {
	outline: none;
}
.reserve-door:focus-visible .reserve-door__frame {
	outline: 2px solid var(--color-gold-500);
	outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
	.reserve-door__frame,
	.reserve-door__media img,
	.reserve-door__icon,
	.reserve-door__arrow,
	.reserve-door__panel::before {
		transition: none;
	}
	.reserve-door:hover .reserve-door__frame,
	.reserve-door:focus-visible .reserve-door__frame {
		transform: none;
		filter: none;
	}
	.reserve-door:hover .reserve-door__media img,
	.reserve-door:focus-visible .reserve-door__media img,
	.reserve-door:hover .reserve-door__icon,
	.reserve-door:focus-visible .reserve-door__icon,
	.reserve-door:hover .reserve-door__arrow,
	.reserve-door:focus-visible .reserve-door__arrow {
		transform: none;
	}
}

/* --- a4) Pricing (replaces news/blogs) ----------------------------------- */
.pricing-layout {
	display: grid;
	gap: 2rem;
	align-items: start;
}
@media (min-width: 960px) {
	.pricing-layout {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
		gap: 2.5rem;
	}
}
.pricing-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.35rem;
}
.pricing-tabs__btn {
	appearance: none;
	border: 1px solid var(--border-subtle);
	background: #fff;
	color: var(--text-body);
	border-radius: var(--radius-pill);
	min-height: 2.6rem;
	padding: 0.45rem 1.15rem;
	font: inherit;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.pricing-tabs__btn:hover {
	border-color: var(--color-gold-500);
	color: var(--color-gold-700);
}
.pricing-tabs__btn.is-active {
	background: var(--color-reserve);
	border-color: var(--color-reserve);
	color: #fff;
}
.pricing-tabs__btn:focus-visible {
	outline: 2px solid var(--color-gold-500);
	outline-offset: 2px;
}
.pricing-panel[hidden] { display: none !important; }
.pricing-panel__intro {
	margin: 0 0 1.35rem;
	color: var(--text-muted);
	line-height: 1.65;
}
.pricing-group + .pricing-group { margin-top: 1.5rem; }
.pricing-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	margin-bottom: 0.65rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid var(--color-gold-200);
}
.pricing-group__title {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-body);
}
.pricing-group__note {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-gold-700);
}
.pricing-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pricing-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px dotted var(--color-gold-200);
}
.pricing-row:last-child { border-bottom: 0; }
.pricing-row__name {
	color: var(--text-body);
	line-height: 1.4;
}
.pricing-row__price {
	flex: 0 0 auto;
	font-weight: var(--fw-semibold);
	color: var(--color-gold-700);
	font-variant-numeric: tabular-nums;
}
.pricing-panel__foot {
	margin: 1.35rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--border-subtle);
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--text-muted);
}
.pricing-aside {
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	max-height: 36rem;
}
.pricing-aside img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 959.98px) {
	.pricing-aside {
		aspect-ratio: 16 / 9;
		max-height: none;
		order: -1;
	}
	.pricing-layout { display: flex; flex-direction: column; }
}

/* --- b) Offers: arrangement cards ---------------------------------------- */
.offer-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.offer-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.offer-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	flex: 1 1 auto;
}
.offer-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.offer-card__title { font-size: var(--text-2xl); }
.offer-card__price {
	font-size: var(--text-xl);
	color: var(--color-gold-600);
	white-space: nowrap;
}
.offer-card__features {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.offer-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--text-muted);
	font-size: var(--text-base);
	line-height: 1.4;
}
.offer-card__check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.05rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.15);
	color: var(--color-gold-600);
}
.offer-card__text { color: var(--text-muted); font-size: var(--text-base); line-height: 1.6; }
.offer-card__cta { margin-top: auto; align-self: flex-start; }

/* --- Decorative divider (before the gallery) ----------------------------- */
.section-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	margin-top: var(--section-gap-sm);
	margin-bottom: 0;
}
@media (min-width: 1024px) {
	.section-divider { margin-top: var(--section-gap-lg); }
}
.section-divider + .home-gallery { margin-top: 2.5rem; }
@media (min-width: 1024px) {
	.section-divider + .home-gallery { margin-top: 3.5rem; }
}
.section-divider__rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-gold-200);
}
.section-divider__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--color-gold-500);
	color: var(--color-gold-500);
}

/* --- c) Gallery slider (lazyloaded carousel) ------------------------------
   Horizontal track of rounded image slides; responsive slides-per-view is set
   by JS via the --gallery-per-view custom property (1 mobile / 2 tablet /
   3 desktop). Off-screen slides are lazyloaded (data-src → src on view). */
.gallery-slider {
	--gallery-per-view: 1;
	--gallery-gap: 1.25rem;
	position: relative;
}
@media (min-width: 600px)  { .gallery-slider { --gallery-per-view: 2; } }
@media (min-width: 1024px) { .gallery-slider { --gallery-per-view: 3; --gallery-gap: 1.5rem; } }

.gallery-slider__viewport {
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.gallery-slider__track {
	display: flex;
	gap: var(--gallery-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform var(--transition-slow) ease;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.gallery-slider__track { transition: none; }
}
.gallery-slide {
	flex: 0 0 calc((100% - (var(--gallery-per-view) - 1) * var(--gallery-gap)) / var(--gallery-per-view));
	max-width: calc((100% - (var(--gallery-per-view) - 1) * var(--gallery-gap)) / var(--gallery-per-view));
}
.gallery-slide__figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-gold-100);
	box-shadow: var(--shadow-card);
}
.gallery-slide__link {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: zoom-in;
}
.gallery-slide__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	transition: transform var(--transition-slow) ease, opacity var(--transition-slow) ease;
}
/* Lazyload: dim the placeholder, fade the real image in once loaded. */
.gallery-slide__img:not(.is-loaded) { opacity: 0.35; }
.gallery-slide__img.is-loaded { opacity: 1; }
.gallery-slide__figure:hover .gallery-slide__img.is-loaded { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.gallery-slide__figure:hover .gallery-slide__img.is-loaded { transform: none; }
}

/* Prev/next arrows */
.gallery-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.92);
	color: var(--color-neutral-900);
	box-shadow: var(--shadow-card);
	transition: background-color var(--transition), transform var(--transition), opacity var(--transition);
}
.gallery-slider__arrow:hover { background: #fff; color: var(--color-gold-600); }
.gallery-slider__arrow:active { transform: translateY(-50%) scale(0.96); }
.gallery-slider__arrow--prev { left: 0.5rem; }
.gallery-slider__arrow--next { right: 0.5rem; }
@media (min-width: 1024px) {
	.gallery-slider__arrow--prev { left: -1.25rem; }
	.gallery-slider__arrow--next { right: -1.25rem; }
}

/* Dots */
.gallery-slider__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}
.gallery-slider__dot {
	width: 0.6rem;
	height: 0.6rem;
	padding: 0;
	border-radius: var(--radius-pill);
	background: var(--color-gold-200);
	transition: background-color var(--transition), transform var(--transition);
}
.gallery-slider__dot:hover { background: var(--color-gold-500); }
.gallery-slider__dot.is-active {
	background: var(--color-gold-600);
	transform: scale(1.25);
}

/* --- d) News & blogs ------------------------------------------------------ */
.home-news__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}
@media (min-width: 1024px) {
	.home-news__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
	.home-news__head .section-h2 { margin-inline: 0; text-align: left; }
}
.home-news__all { flex: 0 0 auto; }

.home-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gutter);
}
@media (min-width: 1024px) {
	.home-news__grid { grid-template-columns: 1.4fr 1fr; }
	.home-news--solo .home-news__grid { grid-template-columns: 1fr; }
}

.news-feature {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 22rem;
}
.news-feature__media { position: absolute; inset: 0; }
.news-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.news-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 18 21 / 0.78), rgb(0 18 21 / 0) 60%);
}
.news-feature__overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	min-height: 22rem;
	padding: 2rem;
	color: #fff;
}
.news-feature__date { font-size: var(--text-sm); opacity: 0.85; }
.news-feature__title { font-size: var(--text-3xl); line-height: 1.2; color: #fff; }
.news-feature:hover .news-feature__title { color: var(--color-gold-500); }

.news-list { display: flex; flex-direction: column; gap: 1.25rem; }
.news-item {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
	align-items: center;
}
.news-item__media {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.news-item__media img { width: 100%; height: 100%; object-fit: cover; }
.news-item__body { display: flex; flex-direction: column; gap: 0.25rem; }
.news-item__date { font-size: var(--text-xs); color: var(--text-muted); }
.news-item__title { font-size: var(--text-lg); line-height: 1.3; }
.news-item:hover .news-item__title { color: var(--color-gold-600); }

/* --- e) Newsletter band --------------------------------------------------- */
.newsletter {
	background: var(--color-neutral-900);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 1024px) {
	.newsletter {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		padding: 4rem;
		align-items: center;
	}
}
.newsletter__title { color: #fff; text-align: left; margin-inline: 0; }
.newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: stretch;
}
.newsletter__fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (min-width: 768px) {
	.newsletter__fields { display: grid; grid-template-columns: 1fr 1fr; }
}
.newsletter__input {
	width: 100%;
	height: var(--btn-height);
	border: none;
	border-radius: var(--radius-pill);
	padding-inline: 1.5rem;
	background: #fff;
	color: var(--color-neutral-950);
	transition: box-shadow var(--transition);
}
.newsletter__input::placeholder { color: var(--color-neutral-500); }
.newsletter__input:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--cta), var(--shadow-ring-focus);
}
.newsletter__submit { align-self: flex-start; }

/* NOTE: the homepage Opening-hours section was migrated to the unified
   `.pg-section` + `.pg-hours` components (see §16). Its former bespoke
   `.hours-*` rules were removed to avoid dead CSS. */

/* ==========================================================================
   13. ICON SET — inline SVGs that inherit text color (hammam_icon)
   ========================================================================== */
.hammam-icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
	color: inherit;
}
/* Icons sitting inside pill buttons align optically with the small-caps label. */
.btn .hammam-icon,
.btn-primary .hammam-icon,
.btn-secondary .hammam-icon { margin-top: -0.06em; }

/* ==========================================================================
   14. RESERVATION SINGLE-PRODUCT TEMPLATE (single-product-reservation.php)
   Bespoke booking-focused layout for the 3 reservation products. (Task 3)
   ========================================================================== */
.res-single { padding-bottom: var(--section-gap-sm); }
@media (min-width: 1024px) { .res-single { padding-bottom: var(--section-gap-lg); } }

/* Centered single-column layout: the booking form is the primary element.
   Everything sits in a comfortable, readable column (no cropped hero). */
.res-single__body {
	--res-col: 56rem; /* ~896px — the shared max-width for the stacked sections */
	padding-top: var(--section-gap-sm);
}
@media (min-width: 1024px) { .res-single__body { padding-top: var(--section-gap-lg); } }
.res-single__crumb { margin-bottom: 1.5rem; }

/* Compact header: small tasteful image + title + price + intro */
.res-single__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
	max-width: var(--res-col);
	margin: 0 auto 2.5rem;
}
@media (min-width: 720px) {
	.res-single__header {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 2rem;
	}
}
.res-single__thumb {
	flex: 0 0 auto;
	margin: 0;
	width: 12rem;
	max-width: 60vw;
}
.res-single__thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border-subtle);
}
.res-single__headings { min-width: 0; }
.res-single__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-gold-600);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--text-lg);
	margin-bottom: 0.5rem;
}
.res-single__title {
	font-size: var(--text-4xl);
	line-height: 1.1;
	color: var(--text-body);
	margin-bottom: 0.5rem;
}
@media (min-width: 1024px) { .res-single__title { font-size: var(--text-5xl); } }
.res-single__price {
	font-size: var(--text-2xl);
	color: var(--color-gold-600);
}
.res-single__price .amount { font-weight: var(--fw-semibold); }
.res-single__price del { opacity: 0.7; margin-right: 0.5rem; }
.res-single__price ins { text-decoration: none; }
.res-single__intro {
	font-size: var(--text-lg);
	line-height: 1.8;
	color: var(--text-muted);
	margin-top: 1rem;
}

/* Primary booking section — full width but constrained + centered */
.res-single__booking { max-width: var(--res-col); margin: 0 auto 2.5rem; }

.res-single__desc {
	max-width: var(--res-col);
	margin: 0 auto 2.5rem;
}
.res-single__included {
	max-width: var(--res-col);
	margin: 0 auto 2.5rem;
}
.res-single__sub {
	font-size: var(--text-2xl);
	color: var(--text-body);
	margin: 0 0 1.25rem;
}
.res-includes { display: grid; gap: 0.75rem; }
@media (min-width: 560px) { .res-includes { grid-template-columns: 1fr 1fr; } }
.res-includes li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--text-muted);
	line-height: 1.4;
}
.res-includes__check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.05rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.15);
	color: var(--color-gold-600);
}

/* Booking panel (holds the real inline Bookings form) — the primary element */
.res-booking-panel {
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	border: 1px solid var(--border-subtle);
}
@media (min-width: 720px) {
	.res-single__booking .res-booking-panel { padding: 2.5rem; }
}
.res-booking-panel__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.25rem;
}
.res-booking-panel__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	background: var(--color-neutral-900);
	color: #fff;
}
.res-booking-panel__title { font-size: var(--text-xl); color: var(--text-body); }
.res-booking-panel__sub { font-size: var(--text-sm); color: var(--text-muted); }
.res-booking-panel__trust {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border-subtle);
}
.res-booking-panel__trust li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-sm);
	color: var(--text-muted);
}
.res-booking-panel__trust .hammam-icon { color: var(--color-gold-600); }

/* ==== Booking form controls (WooCommerce Bookings + TM Extra Product Options)
   Scoped to .res-booking-panel. STYLING ONLY — field names, nonce and the
   form action are left untouched so the POST keeps working. Goals: consistent
   comfortable spacing, aligned labels, ≥44px tap targets, clean brand-accented
   checkboxes/radios, and no horizontal overflow on mobile. ==== */

/* Reset plugin margins; clean vertical rhythm for the whole form. */
.res-booking-panel .wc-bookings-booking-form,
.res-booking-panel form.cart { margin: 0; display: block; }
.res-booking-panel form.cart > * { margin-bottom: 1.5rem; }
.res-booking-panel form.cart > *:last-child { margin-bottom: 0; }

/* Grouped blocks inside the Bookings form. */
.res-booking-panel .wc-bookings-date-picker,
.res-booking-panel .wc-bookings-booking-form-button,
.res-booking-panel .form-field,
.res-booking-panel fieldset { margin: 0 0 1.5rem; padding: 0; border: 0; }
.res-booking-panel .form-field:last-child { margin-bottom: 0; }

/* Labels — consistent, legible, sitting just above their control. */
.res-booking-panel .wc_bookings_field_persons > label,
.res-booking-panel fieldset.wc-bookings-date-picker > legend {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	color: var(--text-body);
	line-height: 1.5;
	margin: 0 0 0.5rem;
}

/* Text / number / select / textarea controls — comfortable + ≥44px tall. */
.res-booking-panel input[type="text"],
.res-booking-panel input[type="number"],
.res-booking-panel input[type="email"],
.res-booking-panel input[type="tel"],
.res-booking-panel input.qty,
.res-booking-panel select,
.res-booking-panel textarea {
	max-width: 100%;
	min-height: 3rem;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 0.7rem 0.9rem;
	background: #fff;
	font-size: var(--text-base);
	line-height: 1.4;
	color: var(--text-body);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.res-booking-panel input:focus,
.res-booking-panel select:focus,
.res-booking-panel textarea:focus {
	outline: none;
	border-color: var(--color-header-solid);
	box-shadow: 0 0 0 3px rgb(0 90 135 / 0.18);
}

/* Persons number field — full width for an easy tap target. */
.res-booking-panel .wc_bookings_field_persons > input[type="number"] { width: 100%; }

/* Date picker: dd / mm / yyyy as a neat inline group of stacked mini-fields. */
.res-booking-panel .wc-bookings-date-picker-date-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem 0.75rem;
}
.res-booking-panel .wc-bookings-date-picker-date-fields label {
	display: inline-flex;
	flex-direction: column-reverse;
	gap: 0.3rem;
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}
.res-booking-panel .wc-bookings-date-picker-date-fields input {
	width: 4rem;
	text-align: center;
}
.res-booking-panel .wc-bookings-date-picker-date-fields input.booking_date_year { width: 5.5rem; }
.res-booking-panel .wc-bookings-date-picker-timezone-block {
	font-size: var(--text-sm);
	color: var(--text-muted);
	text-align: left !important;
	margin: 0 0 0.75rem;
}
.res-booking-panel .picker,
.res-booking-panel .ui-datepicker { max-width: 100%; }
.res-booking-panel ul.block-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}
.res-booking-panel ul.block-picker li { color: var(--text-muted); font-size: var(--text-sm); }

/* Running booking cost pill. */
.res-booking-panel .wc-bookings-booking-cost {
	background: rgb(183 159 86 / 0.12);
	border-radius: var(--radius-md);
	padding: 0.85rem 1.1rem;
	color: var(--text-body);
	font-size: var(--text-lg);
	margin-bottom: 1rem;
}

/* ---- TM Extra Product Options (arrangement + add-on checkboxes) ---- */
.res-booking-panel .tm-extra-product-options {
	max-width: 100%;
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--border-subtle);
}
.res-booking-panel .tm-extra-product-options .tc-row,
.res-booking-panel .tm-extra-product-options .tc-cell { max-width: 100%; }
.res-booking-panel .tm-description {
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.65;
	margin: 0 0 1.25rem;
}
/* Section headings between option groups. */
.res-booking-panel h3.tm-epo-element-label {
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	color: var(--text-body);
	line-height: 1.4;
	margin: 1.75rem 0 1rem;
}
.res-booking-panel .cpf-type-header + .cpf-type-checkbox h3.tm-epo-element-label,
.res-booking-panel .tc-container.cpf-type-header + .tc-container.cpf-type-checkbox {
	margin-top: 0;
}

/* Each option row: identical card chrome for EVERY layout (right qty + bottom qty). */
.res-booking-panel .tmcp-ul-wrap {
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.res-booking-panel li.tmcp-field-wrap {
	list-style: none;
	margin: 0;
	padding: 0;
}
.res-booking-panel .tmcp-field-wrap > .tc-container {
	margin: 0 !important;
	padding: 0 !important;
}
.res-booking-panel .tmcp-field-wrap .tc-quantity-right,
.res-booking-panel .tmcp-field-wrap .tc-quantity-bottom,
.res-booking-panel .tmcp-field-wrap > .tc-container > .tc-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center !important;
	gap: 0.85rem;
	padding: 1rem 1.15rem !important;
	min-height: 3.75rem;
	box-sizing: border-box;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: #fff;
	transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.res-booking-panel .tmcp-field-wrap .tc-quantity-right:hover,
.res-booking-panel .tmcp-field-wrap .tc-quantity-bottom:hover,
.res-booking-panel .tmcp-field-wrap > .tc-container > .tc-row:hover,
.res-booking-panel .tmcp-field-wrap.tc-active > .tc-container > .tc-row {
	border-color: var(--color-gold-500);
	background: rgb(183 159 86 / 0.06);
}

/* Simple EPO rows without a quantity wrapper (e.g. Dames/Heren on privé).
   Markup is: li > label.tm-epo-field-label > input + label text. */
.res-booking-panel li.tmcp-field-wrap:has(> label.tm-epo-field-label) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center !important;
	gap: 0.85rem;
	padding: 1rem 1.15rem !important;
	min-height: 3.75rem;
	box-sizing: border-box;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: #fff;
	transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.res-booking-panel li.tmcp-field-wrap:has(> label.tm-epo-field-label):hover,
.res-booking-panel li.tmcp-field-wrap.tc-active:has(> label.tm-epo-field-label) {
	border-color: var(--color-gold-500);
	background: rgb(183 159 86 / 0.06);
}
.res-booking-panel li.tmcp-field-wrap > label.tm-epo-field-label {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.85rem;
}
.res-booking-panel li.tmcp-field-wrap > .tc-price-wrap .tc-price.hidden {
	display: none !important;
}

/* Qty sits on the right, same height for every row; hidden until selected.
   Must beat the later .tc-cell { width:100% } neutralize rule. */
.res-booking-panel .tmcp-field-wrap .tm-quantity,
.res-booking-panel .tm-extra-product-options .tmcp-field-wrap .tc-cell.tm-quantity {
	order: 2;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: none;
	align-items: center;
	gap: 0;
}
.res-booking-panel .tmcp-field-wrap.tc-active .tm-quantity,
.res-booking-panel .tmcp-field-wrap:has(input.tmcp-checkbox:checked) .tm-quantity,
.res-booking-panel .tmcp-field-wrap:has(input.tmcp-radio:checked) .tm-quantity {
	display: inline-flex !important;
}
.res-booking-panel .tmcp-field-wrap .tm-quantity input.tm-qty {
	width: 2.75rem;
	min-width: 2.75rem;
	min-height: 2.25rem;
	height: 2.25rem;
	padding: 0.25rem 0.2rem;
	text-align: center;
	border: 1px solid var(--border-subtle);
	border-radius: 0;
	border-left: none;
	border-right: none;
	box-sizing: border-box;
	font: inherit;
	font-size: var(--text-base);
	color: var(--text-body);
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
}
.res-booking-panel .tmcp-field-wrap .tm-quantity input.tm-qty::-webkit-outer-spin-button,
.res-booking-panel .tmcp-field-wrap .tm-quantity input.tm-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.res-booking-panel .res-qty {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #fff;
}
.res-booking-panel .res-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	min-height: 2.25rem;
	margin: 0;
	padding: 0;
	border: none;
	background: var(--color-gold-50);
	color: var(--text-body);
	font-size: 1.15rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--transition), color var(--transition);
}
.res-booking-panel .res-qty__btn:hover {
	background: var(--color-gold-100);
	color: var(--color-reserve);
}
.res-booking-panel .res-qty__btn:focus-visible {
	outline: 2px solid var(--color-reserve);
	outline-offset: -2px;
	z-index: 1;
}
.res-booking-panel .res-qty .tm-qty {
	border-top: none !important;
	border-bottom: none !important;
}

/* Main line: checkbox + label + price + help — always one centered row. */
.res-booking-panel .tc-field-display,
.res-booking-panel .tm-extra-product-options .tmcp-field-wrap .tc-cell.tc-field-display {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center !important;
	gap: 0.75rem;
	order: 1;
	flex: 1 1 auto !important;
	min-width: 0;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.res-booking-panel label.tm-epo-field-label {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.85rem;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0;
	height: auto;
	cursor: pointer;
	font-size: var(--text-base);
	color: var(--text-body);
	line-height: 1.35;
	flex: 1 1 auto;
	min-width: 0;
}

/* Hide native inputs completely — visual UI is the SVG .res-check-icon. */
.res-booking-panel .tm-extra-product-options input.tmcp-checkbox,
.res-booking-panel .tm-extra-product-options input.tmcp-radio,
.res-booking-panel input.tmcp-checkbox,
.res-booking-panel input.tmcp-radio,
.res-booking-panel input[type="checkbox"].tm-epo-field,
.res-booking-panel input[type="radio"].tm-epo-field,
.res-booking-panel label.tm-epo-field-label input[type="checkbox"],
.res-booking-panel label.tm-epo-field-label input[type="radio"] {
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	opacity: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	pointer-events: none !important;
}

/* Inline-SVG checkbox icon (no webfont dependency). */
.res-booking-panel .res-check-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	color: var(--color-neutral-500);
	line-height: 0;
	cursor: pointer;
	transition: color 0.15s ease;
}
.res-booking-panel .res-check-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}
.res-booking-panel label.tm-epo-field-label:hover .res-check-icon {
	color: var(--color-reserve);
}
.res-booking-panel .res-check-icon.is-checked {
	color: var(--color-reserve);
}
.res-booking-panel .res-check-input:focus-visible + .res-check-icon {
	outline: 2px solid var(--color-reserve);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.res-booking-panel .tc-label-wrap,
.res-booking-panel .tc-label {
	line-height: 1.35;
	font-weight: var(--fw-medium, 500);
}

.res-booking-panel .tc-price-wrap {
	margin-left: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0;
	line-height: 1;
}
.res-booking-panel .tc-price-wrap .amount {
	color: var(--color-gold-600);
	font-weight: var(--fw-semibold);
}

/* Help icon — inline SVG inside a gold circle. */
.res-booking-panel .tm-tooltip,
.res-booking-panel .res-opt-help {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	border: none !important;
	border-radius: 50%;
	background: rgb(183 159 86 / 0.16);
	color: var(--color-gold-600);
	line-height: 0;
	cursor: help;
	text-decoration: none;
	font-style: normal !important;
	font-size: 0 !important;
	transition: background-color var(--transition), color var(--transition);
}
.res-booking-panel .tm-tooltip:hover,
.res-booking-panel .res-opt-help:hover {
	background: var(--color-gold-500);
	color: #fff;
}
.res-booking-panel .tm-tooltip::before,
.res-booking-panel .res-opt-help::before,
.res-booking-panel .tm-tooltip.tcfa::before,
.res-booking-panel .tm-tooltip.fa-circle-question::before {
	content: none !important;
	display: none !important;
}
.res-booking-panel .tm-tooltip svg,
.res-booking-panel .res-opt-help svg {
	width: 0.95rem;
	height: 0.95rem;
	display: block;
}

/* ---- Primary booking CTA — brand red, full width. High specificity so it
   beats WooCommerce core's taupe .button.alt rule (.res-single.woocommerce
   scopes to the page <main>). ---- */
.res-booking-panel .single_add_to_cart_button,
.res-booking-panel .wc-bookings-booking-form-button {
	width: 100%;
	margin: 1.25rem 0 0;
}
.res-single.woocommerce .res-booking-panel .single_add_to_cart_button,
.res-single.woocommerce .res-booking-panel .wc-bookings-booking-form-button {
	background-color: var(--color-reserve);
}
.res-single.woocommerce .res-booking-panel .single_add_to_cart_button:hover,
.res-single.woocommerce .res-booking-panel .wc-bookings-booking-form-button:hover {
	background-color: var(--color-reserve-hover);
}
.res-booking-panel .quantity { margin-bottom: 1.25rem; }

/* Neutralize EPO Bootstrap-like gutters (nested .tc-row uses -15px margins).
   Do NOT force 100% width on in-card cells (.tm-quantity / .tc-field-display)
   — that collapses price + qty into an overlapping stack when checked. */
.res-booking-panel .tm-extra-product-options .tc-row,
.res-booking-panel .tm-extra-product-options-field.tc-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
.res-booking-panel .tm-extra-product-options .tc-cell:not(.tm-quantity):not(.tc-field-display),
.res-booking-panel .tm-extra-product-options [class*="tcwidth-"],
.res-booking-panel .tm-extra-product-options .cpf-section,
.res-booking-panel .tm-extra-product-options .tmcp-ul-wrap {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}
.res-booking-panel .res-booking-panel__form,
.res-booking-panel form.cart,
.res-booking-panel .wc-bookings-booking-form,
.res-booking-panel .tm-extra-product-options,
.res-booking-panel .tm-extra-product-options-inner,
.res-booking-panel .tm-extra-product-options-fields {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Small screens: full-width option cards; no price/help overlapping labels. */
@media (max-width: 640px) {
	.res-booking-panel {
		padding: 1.25rem 1rem;
	}
	.res-booking-panel .tm-extra-product-options,
	.res-booking-panel .tm-extra-product-options .tc-row,
	.res-booking-panel .tm-extra-product-options .tc-cell,
	.res-booking-panel .tm-extra-product-options .cpf-type-checkbox,
	.res-booking-panel .tm-extra-product-options .tc-container,
	.res-booking-panel .tm-extra-product-options .cpf-section,
	.res-booking-panel .tm-extra-product-options .tc-section-inner-wrap,
	.res-booking-panel .tm-extra-product-options .tc-element-inner-wrap,
	.res-booking-panel .tm-extra-product-options .tmcp-ul-wrap,
	.res-booking-panel li.tmcp-field-wrap {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		float: none !important;
	}
	.res-booking-panel .tm-extra-product-options .tc-row,
	.res-booking-panel .tm-extra-product-options-field.tc-row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.res-booking-panel .tmcp-ul-wrap {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
	.res-booking-panel .tmcp-field-wrap .tc-quantity-right,
	.res-booking-panel .tmcp-field-wrap .tc-quantity-bottom,
	.res-booking-panel .tmcp-field-wrap > .tc-container > .tc-row {
		flex-wrap: wrap !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0.9rem 1rem !important;
		align-items: flex-start !important;
		box-sizing: border-box;
	}
	.res-booking-panel .tc-field-display {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"check label help"
			". price price";
		align-items: center;
		column-gap: 0.75rem;
		row-gap: 0.4rem;
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}
	.res-booking-panel label.tm-epo-field-label {
		display: contents !important;
	}
	.res-booking-panel .res-check-icon {
		grid-area: check;
	}
	.res-booking-panel .tc-label-wrap,
	.res-booking-panel .tc-label {
		grid-area: label;
		min-width: 0;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	.res-booking-panel .tc-price-wrap {
		grid-area: price;
		margin-left: 0 !important;
		position: static !important;
		justify-self: start;
	}
	.res-booking-panel .tm-tooltip,
	.res-booking-panel .res-opt-help {
		grid-area: help;
		position: static !important;
		justify-self: end;
		flex-shrink: 0;
	}
	.res-booking-panel .tmcp-field-wrap .tm-quantity,
	.res-booking-panel .tm-extra-product-options .tmcp-field-wrap .tc-cell.tm-quantity {
		order: 4;
		width: auto !important;
		max-width: none !important;
		margin-top: 0.35rem !important;
		margin-left: auto !important;
	}
	.res-booking-panel li.tmcp-field-wrap:has(> label.tm-epo-field-label) {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0.9rem 1rem !important;
	}
	.res-booking-panel .wc-bookings-date-picker,
	.res-booking-panel .wc-bookings-booking-form,
	.res-booking-panel .ui-datepicker {
		width: 100% !important;
		max-width: 100% !important;
	}
	.res-booking-panel .ui-datepicker table {
		width: 100% !important;
		table-layout: fixed;
	}
}

/* Practical info card */
.res-practical {
	background: var(--color-gold-100);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.75rem;
	max-width: var(--res-col);
	margin: 0 auto;
}
.res-practical__title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--text-lg);
	color: var(--color-gold-600);
	margin-bottom: 1rem;
}
.res-practical__list { display: flex; flex-direction: column; gap: 0.75rem; }
.res-practical__list li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--color-neutral-700);
	font-size: var(--text-sm);
}
.res-practical__list .hammam-icon { color: var(--color-gold-600); }
.res-practical__list a:hover { color: var(--color-gold-600); }

/* NOTE: the /reserveren/ page was migrated to the unified `.pg-*` components
   (see §16) — its former bespoke `.res-page__*`, `.res-option*`, `.res-step*`
   and `.res-note*` rules were removed to avoid dead CSS. The `.res-single*`
   rules in §14 remain: they still style the bespoke single-product booking
   template. */

/* ==========================================================================
   16. UNIFIED PAGE COMPONENTS (v2)
   ---------------------------------------------------------------------------
   ONE humanized, editorial styling system shared by every interior/content
   page (vacatures, faciliteiten, arrangementen, huisregels, contact, …), the
   homepage "Openingstijden" section and the /reserveren/ template.

   Design language (drawn from premium wellness/hospitality editorial layouts —
   Aman, Six Senses): generous vertical rhythm & whitespace as a visual pause,
   large editorial imagery, a restrained type scale with a Cormorant serif-italic
   "eyebrow" accent, alternating asymmetric feature rows, understated cards with
   thin hairline borders (no gaudy shadows, only a subtle hover lift), hairline
   dividers, clean tables for hours and <details> accordions for rules/FAQ.

   USAGE CONTRACT
   • Wrap every page/section in a `.pg` root (content pages: a Custom-HTML block
     with a unique id, e.g. `<div id="pg-vacatures" class="pg">…</div>`).
   • `.pg` breaks out of the narrow `.entry-content` reading column to full
     viewport width; on full-width templates it is a harmless no-op.
   • Inside `.pg`, put `.pg-section`s; inside each section a `.pg-container`
     constrains + pads the content. Reuse the EXISTING button classes
     (`.btn-primary`, `.btn-secondary`, `.btn-reserve`). Reuse `var()` tokens
     only — no new colors.
   • Text/heading/list/img components are namespaced under `.pg` so they always
     win over the generic `.entry-content` typography (higher specificity).
   ========================================================================== */

/* --- 16.1 Page root + width containers ----------------------------------- */
.pg {
	/* Full-bleed: expand out of a narrow centered parent (.entry-content is
	   capped at --content-max). On a parent that is already viewport-wide,
	   50% === 50vw so the margins compute to 0 → no-op. body has overflow-x
	   hidden, so a 100vw child never introduces a horizontal scrollbar. */
	margin-inline: calc(50% - 50vw);
	/* Reset typography inherited from .entry-content so the system is uniform
	   whether it lives inside a page article or a bespoke template. */
	color: var(--text-body);
	font-size: var(--text-base);
	line-height: var(--lh-base);
}

.pg-container {
	width: 100%;
	max-width: 75rem;             /* editorial content width (~1200px) */
	margin-inline: auto;
	padding-inline: var(--container-pad-sm);
}
@media (min-width: 1024px) {
	.pg-container { padding-inline: 3rem; }
}
.pg-container--narrow { max-width: 52rem; }   /* pure reading measure */
.pg-container--wide   { max-width: var(--container-max); }

/* --- 16.2 Section rhythm + tint / teal band ------------------------------ */
.pg-section { padding-block: clamp(2.5rem, 6vw, 6rem); }
.pg-section--flush-top    { padding-top: 0; }
.pg-section--flush-bottom { padding-bottom: 0; }

/* After a page hero, the first content band needs breathing room even when
   authored with --flush-top (arrangementen / huisregels / vacatures / etc.). */
body.page:not(.home) .entry-content > .pg > .pg-section:first-child,
body.page:not(.home) .entry-content.pg > .pg-section:first-child,
body.page:not(.home) .entry-content.pg > [class*="wp-block-acf-hammam"]:first-child .pg-section {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* Soft warm cream band (backgrounds span full width because the parent .pg is
   already viewport-wide). */
.pg-section--tint { background: var(--color-gold-100); }

/* Deep-teal band — content on dark. */
.pg-section--band { background: var(--color-neutral-900); color: var(--text-on-dark); }
.pg .pg-section--band .pg-eyebrow { color: var(--color-gold-500); }
.pg .pg-section--band .pg-section__title,
.pg .pg-section--band .pg-featurerow__title { color: var(--text-on-dark); }
.pg .pg-section--band .pg-lead,
.pg .pg-section--band .pg-featurerow__text,
.pg .pg-section--band .pg-section__lead { color: var(--color-neutral-300); }

/* --- 16.3 Section head (eyebrow + heading + lead) ------------------------ */
.pg-section__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 46rem;
	margin: 0 auto clamp(2rem, 4vw, 3.5rem);
	text-align: center;
	align-items: center;
}
.pg-section__head--left {
	margin-inline: 0;
	text-align: left;
	align-items: flex-start;
}
.pg .pg-section__title {
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(1.75rem, 3.5vw, var(--text-5xl));
	line-height: 1.12;
	color: var(--text-body);
	text-wrap: balance;
	margin: 0;
}

/* --- 16.4 Eyebrow, lead, pullquote (editorial type accents) -------------- */
.pg .pg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--color-gold-700);
	margin: 0;
}
.pg .pg-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.pg .pg-eyebrow--plain::before { display: none; }

.pg .pg-lead {
	max-width: 44rem;
	font-size: var(--text-lg);
	line-height: 1.8;
	color: var(--text-muted);
	margin: 0;
}
.pg-section__head .pg-lead { margin-inline: auto; }

.pg .pg-quote {
	margin: 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--color-gold-500);
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-size: clamp(1.35rem, 3vw, var(--text-3xl));
	line-height: 1.4;
	color: var(--text-body);
}
.pg .pg-quote__cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--font-sans);
	font-style: normal;
	font-weight: var(--fw-normal);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* --- 16.5 Editorial page header ------------------------------------------ */
.pg-pagehead { padding-block: clamp(2.5rem, 6vw, 5rem); }
.pg-pagehead__inner { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; }
.pg-pagehead--center .pg-pagehead__inner { margin-inline: auto; text-align: center; align-items: center; }
.pg .pg-pagehead__title {
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(2rem, 5.5vw, var(--text-6xl));
	line-height: 1.08;
	color: var(--text-body);
	text-wrap: balance;
	margin: 0;
}
.pg .pg-pagehead__lead {
	font-size: var(--text-lg);
	line-height: 1.8;
	color: var(--text-muted);
	margin: 0;
}
.pg-pagehead__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }

/* Optional background-image variant (set --pg-head-img via inline style). */
.pg-pagehead--image {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 9vw, 7.5rem);
	background-image: var(--pg-head-img);
	background-size: cover;
	background-position: center;
	color: var(--text-on-dark);
}
.pg-pagehead--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgb(0 18 21 / 0.42), rgb(0 18 21 / 0.68));
}
.pg .pg-pagehead--image .pg-pagehead__title { color: var(--text-on-dark); }
.pg .pg-pagehead--image .pg-pagehead__lead { color: rgb(255 255 255 / 0.88); }
.pg .pg-pagehead--image .pg-eyebrow { color: var(--color-gold-500); }

/* --- 16.6 Alternating feature row (image + editorial copy) --------------- */
.pg-featurerow {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.pg-featurerow + .pg-featurerow { margin-top: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 860px) {
	.pg-featurerow { grid-template-columns: 1fr 1fr; }
	.pg-featurerow--reverse .pg-featurerow__media { order: 2; }
}
.pg-featurerow__media { margin: 0; }
.pg .pg-featurerow__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin: 0;
}
/* Reserveren product PNGs: keep natural aspect ratio (no crop). */
body.page-template-page-reserveren .pg-featurerow__media img,
#pg-reserveren .pg-featurerow__media img {
	aspect-ratio: auto;
	object-fit: contain;
	background: transparent;
}
.pg-featurerow__body { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.pg .pg-featurerow__title {
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(1.5rem, 3vw, var(--text-4xl));
	line-height: 1.15;
	color: var(--text-body);
	margin: 0;
}
.pg .pg-featurerow__text {
	font-size: var(--text-base);
	line-height: 1.8;
	color: var(--text-muted);
	margin: 0;
}
.pg-featurerow__price {
	font-size: var(--text-xl);
	color: var(--color-gold-600);
}
.pg-featurerow__price del { opacity: 0.7; margin-right: 0.4rem; }
.pg-featurerow__price ins { text-decoration: none; }

/* --- 16.7 Card grid (understated, equal height, hairline border) --------- */
.pg-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gutter);
	align-items: stretch;
}
@media (min-width: 640px)  { .pg-cards--2, .pg-cards--3, .pg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.pg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pg-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-white);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pg-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -14px rgb(0 18 21 / 0.22);
	border-color: var(--color-gold-200);
}
.pg-card__media { margin: 0; }
.pg .pg-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}
.pg-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1.75rem;
	flex: 1 1 auto;
}
.pg-card--center .pg-card__body { align-items: center; text-align: center; }
.pg .pg-card__title {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-2xl);
	line-height: 1.2;
	color: var(--text-body);
	margin: 0;
}
.pg .pg-card__text {
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--text-muted);
	margin: 0;
}
.pg-card__price { font-size: var(--text-xl); color: var(--color-gold-600); }
.pg-card__cta { margin-top: auto; padding-top: 0.5rem; }
/* Feature card — subtle gold ring instead of a heavy shadow. */
.pg-card--feature { border-color: var(--color-gold-500); box-shadow: inset 0 0 0 1px var(--color-gold-500); }
/* Tag chip over a card image. */
.pg-card__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-pill);
	background: rgb(0 45 51 / 0.82);
	color: var(--text-on-dark);
	font-size: var(--text-xs);
	text-transform: uppercase;
	font-variant: all-small-caps;
	letter-spacing: var(--tracking-wide);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.pg-card__media { position: relative; }

/* --- 16.8 Icon / check list ---------------------------------------------- */
.pg .pg-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.pg .pg-list li {
	position: relative;
	padding-left: 2rem;
	color: var(--text-muted);
	line-height: 1.5;
}
/* CSS check (gold tinted disc + clear tick) so plain HTML lists work with no PHP/SVG. */
.pg .pg-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.18);
}
.pg .pg-list li::after {
	content: "";
	position: absolute;
	left: 0.48rem;
	top: 0.42em;
	width: 0.55rem;
	height: 0.28rem;
	border-left: 2.5px solid var(--color-gold-700);
	border-bottom: 2.5px solid var(--color-gold-700);
	transform: rotate(-45deg);
}
/* When a list item already carries an inline SVG icon (PHP hammam_icon), drop
   the CSS check so they don't double up. */
.pg .pg-list--icon li { padding-left: 0; display: flex; align-items: flex-start; gap: 0.6rem; }
.pg .pg-list--icon li::before,
.pg .pg-list--icon li::after { display: none; }
.pg .pg-list--icon .hammam-icon { flex: 0 0 auto; margin-top: 0.15em; color: var(--color-gold-600); }

/* --- 16.9 Opening-hours table (day + time rows, hairline dividers) ------- */
.pg-hours {
	display: flex;
	flex-direction: column;
	max-width: 42rem;
	margin-inline: auto;
}
.pg-hours__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--border-subtle);
}
.pg-hours__row:first-child { border-top: 1px solid var(--border-subtle); }
.pg-hours__label { display: flex; flex-direction: column; gap: 0.15rem; }
.pg-hours__day {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--text-body);
}
.pg-hours__note {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--text-base);
	color: var(--color-gold-600);
}
.pg-hours__times {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem 1rem;
}
.pg-hours__time {
	color: var(--text-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Mobile: stack day → note → times, all left-aligned. */
@media (max-width: 640px) {
	.pg-hours__row {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.35rem;
	}
	.pg-hours__times {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.2rem;
	}
	.pg-hours__row.is-today {
		margin-inline: 0;
		padding-inline: 0.75rem;
	}
}
/* Optional "today" emphasis. */
.pg-hours__row.is-today {
	margin-inline: -1rem;
	padding-inline: 1rem;
	background: rgb(183 159 86 / 0.10);
	border-radius: var(--radius-md);
	border-bottom-color: transparent;
}
.pg-hours__row.is-today .pg-hours__day { font-weight: var(--fw-semibold); }

/* --- 16.10 Info / practical-detail panels (contact) ---------------------- */
.pg-infogrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 560px) { .pg-infogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pg-infogrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-info { display: flex; gap: 1rem; align-items: flex-start; }
.pg-info__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.12);
	color: var(--color-gold-600);
}
.pg-info__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pg .pg-info__label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
	margin: 0;
}
.pg .pg-info__value { font-size: var(--text-base); color: var(--text-body); margin: 0; line-height: 1.5; }
.pg .pg-info__value a:hover { color: var(--color-gold-600); }
/* Card-style info panel variant. */
.pg-info--card {
	padding: 1.5rem;
	background: var(--color-white);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
}

/* --- 16.11 Calm full-width CTA band -------------------------------------- */
.pg-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.1rem;
	padding: clamp(2.25rem, 5vw, 4rem);
	border-radius: var(--radius-lg);
	background: var(--color-neutral-900);
	color: var(--text-on-dark);
}
.pg-cta--tint { background: var(--color-gold-100); color: var(--text-body); }
.pg .pg-cta .pg-eyebrow { color: var(--color-gold-500); }
.pg .pg-cta--tint .pg-eyebrow { color: var(--color-gold-600); }
.pg .pg-cta__title {
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(1.5rem, 3.5vw, var(--text-5xl));
	line-height: 1.12;
	color: inherit;
	text-wrap: balance;
	margin: 0;
}
.pg .pg-cta__text {
	max-width: 40rem;
	font-size: var(--text-lg);
	line-height: 1.7;
	color: inherit;
	opacity: 0.9;
	margin: 0;
}
.pg-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 0.5rem; }

/* --- 16.12 Accordion (styled <details>/<summary> for rules / FAQ) -------- */
.pg-accordion { border-top: 1px solid var(--border-subtle); max-width: 52rem; }
.pg-accordion--wide { max-width: none; }
.pg-accordion__item { border-bottom: 1px solid var(--border-subtle); }
.pg .pg-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	list-style: none;
	cursor: pointer;
	font-size: var(--text-lg);
	color: var(--text-body);
	margin: 0;
}
.pg-accordion__summary::-webkit-details-marker { display: none; }
.pg-accordion__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--color-gold-600);
	border-bottom: 2px solid var(--color-gold-600);
	transform: rotate(45deg);
	transition: transform var(--transition);
}
.pg-accordion__item[open] .pg-accordion__summary::after { transform: rotate(-135deg); }
.pg .pg-accordion__body {
	padding-bottom: 1.5rem;
	color: var(--text-muted);
	line-height: 1.8;
}
.pg .pg-accordion__body > *:first-child { margin-top: 0; }
.pg .pg-accordion__body > *:last-child { margin-bottom: 0; }
/* Keep job CTAs clearly separated from the list above. */
.pg .pg-accordion__body > p:has(> .btn),
.pg .pg-accordion__body > .btn {
	display: block;
	margin-top: 1.5rem;
	margin-bottom: 0.25rem;
}
.pg .pg-accordion__body > p:has(> .btn) .btn {
	display: inline-flex;
}

/* --- 16.13 Hairline dividers --------------------------------------------- */
.pg-divider {
	height: 1px;
	border: 0;
	background: var(--border-subtle);
	margin-block: clamp(2rem, 5vw, 4rem);
}
.pg-divider--mark {
	height: auto;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}
.pg-divider--mark::before,
.pg-divider--mark::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-gold-200);
}
.pg-divider__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--color-gold-500);
	color: var(--color-gold-500);
}

/* --- 16.14 Reduced-motion: disable hover lifts + chevron animation ------- */
@media (prefers-reduced-motion: reduce) {
	.pg-card,
	.pg-accordion__summary::after { transition: none; }
	.pg-card:hover { transform: none; }
}

/* ==========================================================================
   17. CADEAUBON — service-style gift card product (not a shop layout)
   ========================================================================== */
.gift-single {
	padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
}
.gift-single__body { max-width: 72rem; }
.gift-single__crumb {
	margin-bottom: 1.75rem;
	font-size: var(--text-sm);
	color: var(--text-muted);
}
.gift-single__crumb a:hover { color: var(--color-gold-700); }

.gift-single__layout {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
@media (min-width: 960px) {
	.gift-single__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 3.5rem;
	}
}

.gift-single__intro {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	align-items: flex-start;
}
.gift-single__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.1;
	color: var(--text-body);
}
.gift-single__lead {
	margin: 0;
	font-size: var(--text-lg);
	line-height: 1.75;
	color: var(--text-muted);
}
.gift-single__lead p { margin: 0 0 0.75rem; }
.gift-single__lead p:last-child { margin-bottom: 0; }
.gift-single__perks { margin-top: 0.5rem; width: 100%; }

.gift-single__visual {
	position: relative;
	margin: 1rem 0 0;
	width: 100%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-gold-100);
}
.gift-single__visual img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	margin: 0;
}
.gift-single__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill);
	background: var(--color-reserve);
	color: #fff;
	box-shadow: var(--shadow-card);
}

.gift-single__panel {
	background: #fff;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--shadow-sm);
}
.gift-single__panel-head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.gift-single__panel-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.16);
	color: var(--color-gold-700);
}
.gift-single__panel-title {
	margin: 0.15rem 0 0;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: var(--fw-normal);
	color: var(--text-body);
	line-height: 1.2;
}

/* Amount radio cards */
.gift-amounts { margin-bottom: 1.75rem; }
.gift-amounts__label {
	margin: 0 0 0.85rem;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
}
.gift-amounts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.65rem;
}
@media (max-width: 479.98px) {
	.gift-amounts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gift-amount {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 0.5rem;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--color-gold-50);
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.gift-amount__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0, 0, 0, 0);
}
.gift-amount__value {
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	color: var(--text-body);
}
.gift-amount:hover {
	border-color: var(--color-gold-500);
	background: rgb(183 159 86 / 0.08);
}
.gift-amount.is-selected,
.gift-amount:has(.gift-amount__input:checked) {
	border-color: var(--color-reserve);
	background: rgb(152 33 34 / 0.06);
	box-shadow: inset 0 0 0 1px var(--color-reserve);
}
.gift-amount.is-selected .gift-amount__value,
.gift-amount:has(.gift-amount__input:checked) .gift-amount__value {
	color: var(--color-reserve);
}
.gift-amount:focus-within {
	outline: 2px solid var(--color-gold-500);
	outline-offset: 2px;
}

/* Hide native variations table (radios replace it). */
.gift-single table.variations { display: none !important; }
.gift-single .reset_variations { display: none !important; }

/* PW Gift Card recipient fields */
.gift-single #pwgc-purchase-container {
	display: block !important;
	width: 100%;
	margin: 0 0 1.5rem;
	padding: 0;
}
.gift-single .pwgc-field-container {
	margin-bottom: 1.15rem;
}
.gift-single .pwgc-label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-body);
}
.gift-single .pwgc-subtitle {
	margin-top: 0.35rem;
	font-size: var(--text-sm);
	color: var(--text-muted);
}
.gift-single .pwgc-input-text,
.gift-single #pwgc-message,
.gift-single input.pwgc-input-text,
.gift-single textarea#pwgc-message {
	width: 100% !important;
	max-width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--text-body);
	font: inherit;
	box-sizing: border-box;
}
.gift-single #pwgc-message {
	min-height: 7rem;
	resize: vertical;
}
.gift-single .pwgc-input-text:focus,
.gift-single #pwgc-message:focus {
	border-color: var(--color-gold-500);
	outline: 2px solid var(--color-gold-500);
	outline-offset: 1px;
}

.gift-single .single_variation_wrap {
	margin-top: 0.5rem;
}
.gift-single .woocommerce-variation-price {
	display: block !important;
	margin-bottom: 1rem;
	font-size: var(--text-2xl);
	color: var(--color-gold-700);
}
.gift-single .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.gift-single .quantity {
	margin: 0;
}
.gift-single .quantity .qty {
	width: 4.5rem;
	height: 3rem;
	text-align: center;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	background: #fff;
}
.gift-single .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 12rem;
	background-color: var(--color-reserve) !important;
	color: #fff !important;
	border-radius: var(--radius-pill);
	min-height: 3.25rem;
}
.gift-single .single_add_to_cart_button:hover {
	background-color: var(--color-reserve-hover) !important;
}

/* Hide default shop chrome that shouldn't appear on this service page. */
.gift-single .product_meta,
.gift-single .woocommerce-product-gallery,
.gift-single .related.products {
	display: none !important;
}
@media (max-width: 959.98px) {
	.gift-single__visual { order: -1; }
}

/* ==========================================================================
   18. SEARCH PAGE — Google-style SERP list, Hammam brand colors
   ========================================================================== */
.search-main {
	padding-block: clamp(1.75rem, 4vw, 3rem) clamp(3rem, 7vw, 5.5rem);
	background: var(--color-gold-50);
}
.search-shell {
	width: 100%;
	max-width: 42rem; /* ~672px — SERP reading column */
	margin-inline: auto;
	padding-inline: var(--container-pad-sm);
}
@media (min-width: 1024px) {
	.search-shell { padding-inline: 0; }
}

.search-shell__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border-subtle);
}
.search-shell__eyebrow {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	color: var(--color-gold-700);
}
.search-shell__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	line-height: 1.2;
	color: var(--text-body);
	text-wrap: balance;
}

.search-shell__form .search-form {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	width: 100%;
}
.search-shell__form .search-field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 3rem;
	padding: 0.65rem 1.15rem;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: var(--text-base);
	color: var(--text-body);
	box-shadow: var(--shadow-sm);
}
.search-shell__form .search-field:focus {
	border-color: var(--color-gold-500);
	outline: 2px solid var(--color-gold-500);
	outline-offset: 1px;
}
.search-shell__form .search-submit {
	flex: 0 0 auto;
	min-height: 3rem;
	padding-inline: 1.25rem;
}
@media (max-width: 479.98px) {
	.search-shell__form .search-form { flex-wrap: wrap; }
	.search-shell__form .search-submit { width: 100%; justify-content: center; }
}

.search-shell__count {
	margin: 0.35rem 0 0;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* Result list — no cards, stacked like Google */
.search-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.search-list__item { margin: 0; padding: 0; }

.serp {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-width: 100%;
}
.serp__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.65rem;
	min-width: 0;
}
.serp__favicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.16);
	color: var(--color-gold-700);
}
.serp__url {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.serp__type {
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-gold-700);
	padding: 0.15rem 0.5rem;
	border-radius: var(--radius-pill);
	background: rgb(183 159 86 / 0.14);
}

.serp__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-normal);
	font-size: clamp(1.15rem, 2.4vw, 1.35rem);
	line-height: 1.3;
}
.serp__title a {
	color: var(--color-header-solid);
	text-decoration: none;
	background-image: none !important;
}
.serp__title a:hover,
.serp__title a:focus-visible {
	color: var(--color-reserve);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.serp__snippet {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pagination */
.search-pagination {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-subtle);
}
.search-pagination .nav-links,
.search-pagination .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	justify-content: flex-start;
}
.search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	color: var(--text-body);
	text-decoration: none;
	background-image: none !important;
}
.search-pagination a.page-numbers:hover {
	background: rgb(183 159 86 / 0.16);
	color: var(--color-gold-700);
}
.search-pagination .page-numbers.current {
	background: var(--color-reserve);
	color: #fff;
}

/* Empty state */
.serp-empty { padding-block: 0.5rem 1rem; }
.serp-empty__text {
	margin: 0 0 1.25rem;
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--text-muted);
}
.serp-empty__hints {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.serp-empty__hints a {
	color: var(--color-header-solid);
	text-decoration: none;
	background-image: none !important;
	font-size: var(--text-base);
}
.serp-empty__hints a:hover {
	color: var(--color-reserve);
	text-decoration: underline;
}

/* Closing CTA sections on content pages: balanced vertical rhythm. */
.pg > .pg-section:last-child {
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.pg > .pg-section.pg-section--flush-top:has(.pg-cta) {
	padding-top: clamp(2rem, 4vw, 3.5rem);
}

/* Compact section rhythm (contact + similar) */
.pg-section--compact {
	padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
.pg-hours-block {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--color-gold-200);
}
.pg .pg-section__title--sm {
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}
.pg-map {
	padding: 0 !important;
	margin: 0;
}
.pg-map iframe {
	width: 100%;
	min-height: 22rem;
}

/* Huisregels split: stacked photos + accordion */
.pg-split {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
}
@media (min-width: 900px) {
	.pg-split {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}
.pg-split__media {
	margin: 0;
	display: grid;
	gap: 1rem;
}
.pg-split__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	object-fit: cover;
}
.pg-split__media img:first-child {
	aspect-ratio: 5 / 4;
}
.pg-split__media img:last-child {
	aspect-ratio: 3 / 4;
	max-height: 28rem;
}

/* Vacatures offer — flat content on the shared cream band (no card chrome). */
.pg-vacancy,
.pg-section--vacancy .pg-vacancy,
article.pg-vacancy {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	max-width: none !important;
}
.pg-vacancy__head { margin-bottom: 1rem; }
.pg-vacancy__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: var(--fw-normal);
	color: var(--text-body);
}
.pg-vacancy__meta {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--text-sm);
}
.pg-vacancy > p {
	color: var(--text-muted);
	line-height: 1.7;
	margin: 0 0 1.15rem;
}
.pg-vacancy .pg-eyebrow {
	margin-top: 1.35rem;
	margin-bottom: 0.65rem;
}
.pg-vacancy .pg-list {
	margin-bottom: 0.5rem;
}

/* One continuous cream band for intro + vacancy + apply (kills white gaps
   from block spacing / article background between sections). */
.page-article:has(.pg-section--vacancy),
.entry-content.pg:has(.pg-section--vacancy) {
	background: var(--color-gold-100);
}
.entry-content.pg:has(.pg-section--vacancy) > .pg-section--tint {
	background: transparent;
}
.entry-content.pg:has(.pg-section--vacancy) > * {
	margin-block: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Vacatures: offer + application rhythm inside the shared band. */
.pg-section--vacancy {
	padding-top: 0 !important;
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
}
.pg-section--vacancy + .pg-section--apply,
.wp-block-acf-hammam-vacancy + .wp-block-acf-hammam-form .pg-section--apply {
	padding-top: 0 !important;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pg-section--vacancy + .pg-section--apply .pg-apply__head,
.wp-block-acf-hammam-vacancy + .wp-block-acf-hammam-form .pg-apply__head {
	margin-top: 0;
	margin-bottom: clamp(1.15rem, 2.5vw, 1.65rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--color-gold-200);
	max-width: none;
	text-align: left;
	align-items: flex-start;
	margin-inline: 0;
}
.pg-section--vacancy + .pg-section--apply .pg-apply__head .pg-section__title,
.wp-block-acf-hammam-vacancy + .wp-block-acf-hammam-form .pg-apply__head .pg-section__title {
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}
.pg-section--vacancy + .pg-section--apply .pg-apply__head .pg-lead,
.wp-block-acf-hammam-vacancy + .wp-block-acf-hammam-form .pg-apply__head .pg-lead {
	margin-inline: 0;
	max-width: 40rem;
}

/* Intro above vacancy: tight, same band (parent already cream). */
.pg-section:has(+ .pg-section--vacancy),
.wp-block-acf-hammam-intro:has(+ .wp-block-acf-hammam-vacancy) .pg-section {
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.pg-section:has(+ .pg-section--vacancy) .pg-section__head,
.wp-block-acf-hammam-intro:has(+ .wp-block-acf-hammam-vacancy) .pg-section__head {
	margin-bottom: 0;
}
.pg-section:has(+ .pg-section--vacancy) .pg-container:not(.pg-container--narrow) {
	max-width: 52rem;
}

/* Info icons: SVG inherits gold token */
.pg-info__icon .hammam-icon {
	display: block;
	color: var(--color-gold-700);
}

/* Gallerij CTA: reuse brand tint band */
#pg-gallerij .pg-cta,
#pg-gallerij .g-cta-replaced {
	margin: clamp(2rem, 4vw, 3rem) auto;
	max-width: var(--container);
}
#pg-gallerij .g-cta {
	display: none; /* legacy inline CTA replaced by .pg-cta--tint */
}

/* ACF gallery groups (editable block version of #pg-gallerij) */
.pg-gallery-intro {
	text-align: center;
	max-width: 47.5rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.25rem);
}
.pg-gallery-group {
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	max-width: 75rem;
	padding-inline: var(--container-pad-sm);
}
@media (min-width: 1024px) {
	.pg-gallery-group { padding-inline: 3rem; }
}
.pg-gallery-group__head {
	display: flex;
	align-items: center;
	gap: 0.75rem 1.1rem;
	margin: 0 0 1.25rem;
	min-width: 0;
}
.pg-gallery-group__title {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.15rem, 3.2vw, 2.1rem);
	margin: 0;
	white-space: nowrap; /* always one line — shrinks via clamp on small screens */
	flex: 0 1 auto;
	min-width: 0;
	color: var(--text-body);
}
.pg-gallery-group__line {
	flex: 1 1 auto;
	min-width: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg, var(--color-gold-500), transparent);
}
.pg-gallery-group__count {
	flex: 0 0 auto;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--color-gold-700);
	font-weight: 600;
	white-space: nowrap;
}
/* Mosaic masonry via Macy.js — natural image heights (portrait + landscape).
   Sharp edges (no radius) so the set reads as one collage. */
.pg-gallery-group__grid {
	position: relative;
	width: 100%;
}
.pg-gallery-group__grid:not(.macy-initialized) {
	column-count: 3;
	column-gap: 0.5rem;
}
@media (max-width: 900px) {
	.pg-gallery-group__grid:not(.macy-initialized) { column-count: 2; }
}
@media (max-width: 560px) {
	.pg-gallery-group__grid:not(.macy-initialized) { column-count: 2; }
}
.pg-gallery-item {
	break-inside: avoid;
	margin: 0 0 0.5rem;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	background: var(--color-neutral-900);
}
.pg-gallery-group__grid.macy-initialized .pg-gallery-item {
	break-inside: auto;
	margin-bottom: 0;
}
.pg-gallery-item a {
	display: block;
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
}
.pg-gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	vertical-align: middle;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease;
}
.pg-gallery-item:hover img { transform: scale(1.03); }
.pg-gallery-item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.4rem 1rem 0.9rem;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	background: linear-gradient(0deg, rgba(0, 45, 51, 0.82), rgba(0, 45, 51, 0));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s ease, transform 0.45s ease;
	pointer-events: none;
}
.pg-gallery-item:hover figcaption {
	opacity: 1;
	transform: translateY(0);
}

/* Gravity Forms brand alignment (contact + vacatures) */
.gform_wrapper.gravity-theme .gform_button,
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	background-color: var(--color-reserve) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	min-height: 3rem;
	padding: 0.65rem 1.5rem !important;
	font-weight: var(--fw-semibold);
}
.gform_wrapper.gravity-theme .gform_button:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	background-color: var(--color-reserve-hover) !important;
}
.gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper textarea,
.gform_wrapper select {
	border: 1px solid var(--border-subtle) !important;
	border-radius: var(--radius-md) !important;
	min-height: 2.85rem;
}
.gform_wrapper textarea { min-height: 8rem; }
.gform_wrapper .gfield_label {
	font-weight: var(--fw-semibold);
	color: var(--text-body);
}