/*!
 * Ruyah Adventures — design system
 *
 * This file is the single source of truth for the site's CSS. It used to live
 * in Customizer → Additional CSS, which WordPress prints inline in <head> on
 * every request and can never cache. At ~74KB that was the largest avoidable
 * cost on the page.
 *
 * Additional CSS is deliberately left empty and still works — it loads after
 * this file, so anything put there overrides the system without editing it.
 * Use it for quick tweaks; put lasting changes here.
 */

/* ==========================================================================
   RUYAH ADVENTURES - DESIGN SYSTEM
   --------------------------------------------------------------------------
   Edit palette and rhythm HERE, in section 1, and the whole site follows.
   Colours and fonts are aliases onto Elementor Site Settings globals, so a
   change made in Elementor flows through automatically. Never hardcode a
   hex value or a font name below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root,
body {
	/* Brand colours, mapped to Elementor Global Colors. */
	--ruyah-ink:       var(--e-global-color-primary, #12140F);
	--ruyah-sage:      var(--e-global-color-secondary, #6E7F63);
	--ruyah-gold:      var(--e-global-color-accent, #DFAE6C);
	--ruyah-laterite:  var(--e-global-color-rylater, #C25A2B);
	--ruyah-bone:      var(--e-global-color-rybone, #F4EFE6);

	/* Supporting tones. */
	--ruyah-ink-80:    var(--e-global-color-ryink80, #2A2D25);
	--ruyah-sage-mist: var(--e-global-color-rysagem, #DDE2D6);
	/* Sage lightened to clear WCAG AA for small text on Ink (5.2:1). Use for
	   mono micro-labels on dark grounds; plain --ruyah-sage stays correct for
	   rules, icons and large text. */
	--ruyah-sage-ink:  var(--e-global-color-rysageink, #909E85);
	/* Gold and Sage are unreadable as small text on Bone (1.8:1 and 3.8:1).
	   These darkened variants clear AA at 5.1:1 while staying in the family.
	   Use the pure colours for large text, rules, icons and dark grounds. */
	--ruyah-gold-bone: var(--e-global-color-rygoldbone, #775930);
	--ruyah-sage-bone: var(--e-global-color-rysagebone, #525F4B);
	--ruyah-bone-deep: var(--e-global-color-ryboned, #E7DFD1);
	--ruyah-on-ink:    var(--e-global-color-rytxtink, #F4EFE6);
	--ruyah-on-bone:   var(--e-global-color-text, #1B1E17);

	/* Typography, mapped to Elementor Global Fonts. */
	--font-display: var(--e-global-typography-primary-font-family, "Fraunces"), Georgia, serif;
	--font-body:    var(--e-global-typography-text-font-family, "Inter Tight"), system-ui, sans-serif;
	--font-mono:    var(--e-global-typography-secondary-font-family, "Space Mono"), ui-monospace, monospace;

	/* Spacing scale. */
	--space-3xs: 0.25rem;  --space-2xs: 0.5rem;   --space-xs: 0.75rem;
	--space-s:   1rem;     --space-m:   1.5rem;   --space-l:  2.5rem;
	--space-xl:  4rem;     --space-2xl: 6rem;     --space-3xl: 9rem;

	/* Section rhythm. */
	--section-y: clamp(4rem, 10vw, 9rem);
	--gutter:    clamp(1.25rem, 5vw, 5rem);
	--measure:   68ch;

	/* Radii. */
	--radius-s: 4px; --radius-m: 10px; --radius-l: 20px; --radius-pill: 999px;

	/* Motion. */
	--ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 800ms; --dur-reveal: 1200ms;

	/* Elevation. */
	--shadow-s: 0 1px 3px rgba(18, 20, 15, .08);
	--shadow-m: 0 8px 24px rgba(18, 20, 15, .12);
	--shadow-l: 0 24px 60px rgba(18, 20, 15, .20);

	/* Type scale. */
	--fs-hero:  clamp(3rem, 11vw, 8.5rem);
	--fs-h1:    clamp(2.5rem, 6vw, 4.5rem);
	--fs-h2:    clamp(2rem, 4.5vw, 3.25rem);
	--fs-h3:    clamp(1.375rem, 2.5vw, 1.75rem);
	--fs-lead:  clamp(1.125rem, 2vw, 1.5rem);
	--fs-body:  clamp(1rem, 1.2vw, 1.125rem);
	--fs-small: 0.875rem;
	--fs-micro: 0.75rem;

	/* Chrome. */
	--header-h: 68px;
	--hairline: 1px solid color-mix(in srgb, var(--ruyah-sage) 38%, transparent);
}

@media (min-width: 1025px) {
	:root,
	body { --header-h: 88px; }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--ruyah-on-bone);
	background-color: var(--ruyah-bone);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 500; }

p { max-width: var(--measure); }

/* Tabular figures wherever a number is being compared or counted. */
.stat__value, .price, .woocommerce-Price-amount, time, .u-mono {
	font-variant-numeric: tabular-nums;
}

/* Pages without a full-bleed hero clear the fixed header. */
body:not(.ruyah-has-hero) .site-main { padding-top: calc(var(--header-h) + var(--space-l)); }

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY PRIMITIVES
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--space-2xs); left: var(--space-2xs);
	z-index: 999;
	width: auto; height: auto;
	clip-path: none;
	padding: var(--space-2xs) var(--space-s);
	background: var(--ruyah-gold);
	color: var(--ruyah-ink);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border-radius: var(--radius-s);
}

/* Visible focus on everything interactive. Never removed without replacement. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--ruyah-gold);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

/* --------------------------------------------------------------------------
   4. UTILITIES
   -------------------------------------------------------------------------- */
.u-mono, .eyebrow, .micro {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

.eyebrow { color: var(--ruyah-gold-bone); margin: 0 0 var(--space-s); }

/* Dark sections restore the full-strength brand tones. */
.on-ink .eyebrow { color: var(--ruyah-gold); }
.on-ink .micro,
.on-ink .u-mono { color: var(--ruyah-sage-ink); }
.lede    { font-size: var(--fs-lead); line-height: 1.5; max-width: 52ch; }
.measure { max-width: var(--measure); }

.hairline {
	border: 0;
	border-top: var(--hairline);
	margin: 0;
}

/* Film grain for dark sections. Applied to a positioned ancestor. */
.has-grain { position: relative; }
.has-grain > * { position: relative; z-index: 1; }
.has-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reveal target. Visible by default; JS only adds the animated entrance. */
[data-ruyah-reveal] { opacity: 1; }
.ruyah-js [data-ruyah-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.ruyah-js [data-ruyah-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	padding: var(--space-xs) var(--space-m);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.btn__arrow {
	transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
	background-color: var(--ruyah-gold);
	color: var(--ruyah-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--ruyah-laterite);
	color: var(--ruyah-bone);
	transform: translateY(-2px);
	box-shadow: var(--shadow-m);
}

.btn--ghost {
	background-color: transparent;
	border-color: var(--ruyah-sage);
	color: var(--ruyah-on-ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background-color: color-mix(in srgb, var(--ruyah-sage) 15%, transparent);
	border-color: var(--ruyah-gold);
}

/* --------------------------------------------------------------------------
   6. SITE HEADER
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 100;
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: color-mix(in srgb, var(--ruyah-ink) 92%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: var(--hairline);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled::before,
body:not(.ruyah-has-hero) .site-header::before { opacity: 1; }

/* Hello Elementor makes .site-header a flex row, so the inner would shrink to its
   content. On phones the nav is an off-canvas panel and takes no space, which left
   the inner 219px wide and the menu button stranded mid-header. Always fill. */
.site-header__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	min-height: var(--header-h);
	padding-inline: var(--gutter);
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	text-decoration: none;
}

.site-header__mark {
	display: block;
	width: auto;
	height: 34px;
}

.site-header__wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.site-header__name {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ruyah-gold);
}

.site-header__sub {
	margin-top: 3px;
	font-family: var(--font-mono);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--ruyah-sage-ink);
}

.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ruyah-on-ink);
	cursor: pointer;
}

.site-header__toggle-bars {
	position: relative;
	display: block;
	width: 24px;
	height: 12px;
}

.site-header__toggle-bars i {
	position: absolute;
	inset-inline: 0;
	height: 1.5px;
	background-color: currentColor;
	transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.site-header__toggle-bars i:first-child { top: 0; }
.site-header__toggle-bars i:last-child  { bottom: 0; }

[aria-expanded="true"] .site-header__toggle-bars i:first-child { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .site-header__toggle-bars i:last-child  { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. NAVIGATION
   -------------------------------------------------------------------------- */
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	position: relative;
	color: var(--ruyah-on-ink);
	text-decoration: none;
}

.site-nav__list > li > a {
	display: inline-block;
	padding-block: var(--space-2xs);
}

/* Gold underline drawing from the left. */
.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background-color: var(--ruyah-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--ease-out);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > li > a:focus-visible::after,
.site-nav__list > li.current-menu-item > a::after,
.site-nav__list > li.current-menu-parent > a::after {
	transform: scaleX(1);
}

/* Mobile: full-screen overlay. Only hidden when JavaScript is available. */
.ruyah-js .site-nav {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-l);
	padding: calc(var(--header-h) + var(--space-l)) var(--gutter) var(--space-xl);
	background-color: var(--ruyah-ink);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1.5%);
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		visibility 0s linear var(--dur-base);
}

.ruyah-js body.ruyah-nav-open .site-nav {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

body.ruyah-nav-open { overflow: hidden; }

.site-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.site-nav__list > li > a {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
}

/* Staggered entrance for the overlay links. */
.ruyah-js .site-nav__list > li {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.ruyah-js body.ruyah-nav-open .site-nav__list > li {
	opacity: 1;
	transform: none;
}

.ruyah-js body.ruyah-nav-open .site-nav__list > li:nth-child(1) { transition-delay:  60ms; }
.ruyah-js body.ruyah-nav-open .site-nav__list > li:nth-child(2) { transition-delay: 120ms; }
.ruyah-js body.ruyah-nav-open .site-nav__list > li:nth-child(3) { transition-delay: 180ms; }
.ruyah-js body.ruyah-nav-open .site-nav__list > li:nth-child(4) { transition-delay: 240ms; }
.ruyah-js body.ruyah-nav-open .site-nav__list > li:nth-child(5) { transition-delay: 300ms; }
.ruyah-js body.ruyah-nav-open .site-nav__list > li:nth-child(6) { transition-delay: 360ms; }

/* Sub-menu: indented list on mobile. */
.site-nav__list .sub-menu {
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0 0 0 var(--space-s);
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	border-left: var(--hairline);
}

.site-nav__list .sub-menu a {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: color-mix(in srgb, var(--ruyah-on-ink) 78%, transparent);
}

.site-nav__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-top: auto;
}

/* Desktop navigation. */
@media (min-width: 1025px) {
	.site-header__toggle { display: none; }

	.ruyah-js .site-nav,
	.site-nav {
		position: static;
		z-index: auto;
		flex-direction: row;
		align-items: center;
		gap: var(--space-l);
		padding: 0;
		background: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__list {
		flex-direction: row;
		align-items: center;
		gap: var(--space-m);
	}

	.ruyah-js .site-nav__list > li {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.site-nav__list > li { position: relative; }

	.site-nav__list > li > a {
		font-family: var(--font-body);
		font-size: var(--fs-small);
		font-weight: 500;
	}

	/* Simple dropdown, grouped by pillar. No mega-menu: Elementor Pro only. */
	.site-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 16rem;
		margin: 0;
		padding: var(--space-s);
		background-color: var(--ruyah-ink-80);
		border: var(--hairline);
		border-radius: var(--radius-m);
		box-shadow: var(--shadow-l);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition:
			opacity var(--dur-fast) var(--ease-out),
			transform var(--dur-fast) var(--ease-out),
			visibility 0s linear var(--dur-fast);
	}

	.site-nav__list > li:hover > .sub-menu,
	.site-nav__list > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.site-nav__actions {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2xs);
		margin-top: 0;
	}

	/* WhatsApp lives in the mobile panel; the desktop bar keeps one CTA. */
	.site-nav__whatsapp { display: none; }
}

/* --------------------------------------------------------------------------
   8. SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--ruyah-ink);
	color: var(--ruyah-on-ink);
	border-top: var(--hairline);
	padding-top: var(--section-y);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-l);
	padding-inline: var(--gutter);
	padding-bottom: var(--space-xl);
}

.site-footer__mark { display: block; width: auto; height: 56px; }

.site-footer__wordmark {
	display: flex;
	flex-direction: column;
	line-height: 1;
	margin: var(--space-s) 0 0;
}

.site-footer__name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--ruyah-gold);
}

.site-footer__sub {
	margin-top: 4px;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: var(--ruyah-sage-ink);
}

.site-footer__signature {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-h3);
	color: var(--ruyah-sage-ink);
	margin: var(--space-m) 0 var(--space-2xs);
}

.site-footer__blurb {
	font-size: var(--fs-small);
	color: color-mix(in srgb, var(--ruyah-on-ink) 72%, transparent);
	max-width: 34ch;
}

.site-footer__group { border-top: var(--hairline); padding-top: var(--space-s); }

.site-footer__heading {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
	cursor: pointer;
	list-style: none;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-footer__heading::-webkit-details-marker { display: none; }

.site-footer__heading::after {
	content: "+";
	font-size: 1rem;
	color: var(--ruyah-gold);
	transition: transform var(--dur-fast) var(--ease-out);
}

.site-footer__group[open] > .site-footer__heading::after { transform: rotate(45deg); }

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--space-s);
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.site-footer__list a,
.site-footer__contact-link {
	display: inline-block;
	padding-block: var(--space-3xs);
	font-size: var(--fs-small);
	color: color-mix(in srgb, var(--ruyah-on-ink) 80%, transparent);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__list a:hover,
.site-footer__contact-link:hover { color: var(--ruyah-gold); }

.site-footer__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding-bottom: var(--space-s);
}

.site-footer__contact-note {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
	margin-left: var(--space-2xs);
}

.site-footer__postal {
	font-size: var(--fs-small);
	color: color-mix(in srgb, var(--ruyah-on-ink) 72%, transparent);
}

.site-footer__currency {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
}

.site-footer__bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-m) var(--gutter);
	border-top: var(--hairline);
}

.site-footer__copyright,
.site-footer__locations {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: color-mix(in srgb, var(--ruyah-on-ink) 60%, transparent);
	max-width: none;
}

@media (min-width: 768px) {
	.site-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		gap: var(--space-xl);
	}

	.site-footer__group {
		border-top: 0;
		padding-top: 0;
	}

	.site-footer__heading {
		cursor: default;
		min-height: 0;
		justify-content: flex-start;
		margin-bottom: var(--space-s);
		pointer-events: none;
	}

	.site-footer__heading::after { content: none; }

	.site-footer__bar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.ruyah-js [data-ruyah-reveal] {
		opacity: 1;
		transform: none;
	}
}
/* --------------------------------------------------------------------------
   10. WOOCOMMERCE
   -------------------------------------------------------------------------- */
.woocommerce .site-main,
.woocommerce-page .site-main {
	padding-inline: var(--gutter);
	padding-bottom: var(--section-y);
}

.woocommerce .woocommerce-products-header__title,
.woocommerce-products-header__title {
	font-size: var(--fs-h1);
	margin-bottom: var(--space-m);
}

/* Result count and ordering read as field notes, not shop furniture. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-bone);
}

/* --- Product grid --- */
.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0 0 var(--space-s);
	border-radius: var(--radius-m);
	transition: transform 600ms var(--ease-out);
}



.woocommerce ul.products li.product:hover a img { transform: scale(1.06); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.2;
	padding: 0;
	margin: 0;
	color: var(--ruyah-on-bone);
}

/* Duration is the primary decision factor for this audience, so it leads. */
.ruyah-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.ruyah-card-meta__duration { color: var(--ruyah-gold-bone); }
.ruyah-card-meta__rating   { color: var(--ruyah-sage-bone); }

.woocommerce ul.products li.product .price {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ruyah-on-bone);
	margin: 0;
}

.woocommerce ul.products li.product .price del { opacity: .5; }

.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: var(--space-2xs);
}

@media (min-width: 768px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-l); }
}



.woocommerce div.product .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-m); }

.woocommerce div.product .summary {
	width: 100%;
	float: none;
	margin: 0;
}



.woocommerce div.product p.price {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	color: var(--ruyah-on-bone);
}

/* Micro-label row: duration, location, rating. */
.ruyah-meta {
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-bone);
}

.ruyah-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
}

.ruyah-meta__item--duration { color: var(--ruyah-gold-bone); }
.ruyah-meta__item--rating span { color: var(--ruyah-sage-bone); }

.ruyah-meta__item + .ruyah-meta__item::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-right: var(--space-s);
	background-color: color-mix(in srgb, var(--ruyah-sage) 45%, transparent);
}

/* The honesty panel. Availability is confirmed by hand, and this says so. */
.ruyah-availability {
	margin-top: var(--space-m);
	padding: var(--space-s) var(--space-m);
	background-color: var(--ruyah-bone-deep);
	border-left: 3px solid var(--ruyah-gold);
	border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.ruyah-availability__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.6;
}

.ruyah-availability__policy {
	margin: var(--space-2xs) 0 0;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.ruyah-availability__policy a { color: var(--ruyah-on-bone); }

.ruyah-book-anchor {
	display: block;
	height: 1px;
}

@media (min-width: 1025px) {
.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related {
		grid-column: 1 / -1;
	}
}
/* --- Booking fields at checkout --- */
.ruyah-booking {
	margin-block: var(--space-l);
	padding: var(--space-m);
	background-color: var(--ruyah-bone-deep);
	border-radius: var(--radius-m);
}

.ruyah-booking h3 {
	margin: 0 0 var(--space-2xs);
	font-size: var(--fs-h3);
}

.ruyah-booking__notice {
	margin: 0 0 var(--space-m);
	font-size: var(--fs-small);
	line-height: 1.6;
	padding-left: var(--space-s);
	border-left: 3px solid var(--ruyah-gold);
}

.ruyah-booking__whatsapp { margin: var(--space-m) 0 0; }
.ruyah-booking__whatsapp .btn--ghost { color: var(--ruyah-on-bone); }

/* Form fields: bottom border only, sage to gold on focus. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
	width: 100%;
	padding: var(--space-2xs) 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--ruyah-on-bone);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ruyah-sage);
	border-radius: 0;
	transition: border-color 300ms var(--ease-out), border-width 300ms var(--ease-out);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-bottom-color: var(--ruyah-gold);
	border-bottom-width: 2px;
}

.woocommerce form .form-row label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-bone);
	margin-bottom: var(--space-3xs);
	display: block;
}

.woocommerce form .form-row .required {
	color: var(--ruyah-laterite);
	text-decoration: none;
}

.woocommerce form .form-row span.description,
.woocommerce form .form-row .description {
	display: block;
	margin-top: var(--space-3xs);
	font-size: var(--fs-small);
	color: color-mix(in srgb, var(--ruyah-on-bone) 70%, transparent);
}

/* --- Sticky booking bar, mobile only --- */
.ruyah-bookbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: var(--space-2xs) var(--gutter);
	padding-bottom: max(var(--space-2xs), env(safe-area-inset-bottom));
	background-color: color-mix(in srgb, var(--ruyah-ink) 96%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: var(--hairline);
	transform: translateY(100%);
	transition: transform var(--dur-base) var(--ease-out);
}

.ruyah-bookbar.is-visible { transform: none; }
.ruyah-bookbar[hidden] { display: none; }

.ruyah-bookbar__info {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.ruyah-bookbar__price {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ruyah-on-ink);
}

.ruyah-bookbar__price .woocommerce-Price-amount { color: var(--ruyah-on-ink); }

.ruyah-bookbar__duration {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
}

@media (min-width: 1025px) {
	.ruyah-bookbar { display: none; }
}

/* --- WooCommerce buttons inherit the site button language --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	padding: var(--space-xs) var(--space-m);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1;
	color: var(--ruyah-ink);
	background-color: var(--ruyah-gold);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	transition:
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--ruyah-laterite);
	color: var(--ruyah-bone);
	transform: translateY(-2px);
	box-shadow: var(--shadow-m);
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--ruyah-gold);
	font-size: var(--fs-small);
}

.woocommerce-error { border-top-color: var(--ruyah-laterite); }
/* --------------------------------------------------------------------------
   11. SPECIFICITY CORRECTIONS
   --------------------------------------------------------------------------
   WooCommerce and the parent theme ship broad rules that outrank single-class
   selectors. These restate our intent at a specificity that wins, kept in one
   place rather than scattering !important through the file.
   -------------------------------------------------------------------------- */

/* .woocommerce img { height: auto } was overriding the logo on every store
   page, rendering the mark at its full 326x400 and inflating the header. */
.site-header .site-header__mark {
	width: auto;
	height: 34px;
}

.site-footer .site-footer__mark {
	width: auto;
	height: 56px;
}

/* Woo's ul.products[class*="columns-"] li.product rule was shrinking each card
   to 30.75% inside its own grid column. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

/* Card imagery: fill the column, hold a 3:2 frame, crop rather than distort. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0 0 var(--space-s);
}



.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* The WordPress admin bar is fixed too, so the header must sit below it. */
body.admin-bar .site-header { top: 46px; }

@media (min-width: 783px) {
	body.admin-bar .site-header { top: 32px; }
}

body.admin-bar.ruyah-nav-open .site-nav { top: 46px; }

/* Page titles on non-Elementor pages should not shout. */
.site-main .entry-title,
.woocommerce-products-header__title {
	font-size: var(--fs-h1);
	margin-bottom: var(--space-m);
}

/* Breadcrumbs read as field notes. */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-bone);
	margin-bottom: var(--space-m);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--ruyah-sage-bone); }
/* --------------------------------------------------------------------------
   12. HERO
   -------------------------------------------------------------------------- */
.ruyah-has-hero .site-main {
	padding: 0;
	max-width: none;
}

.ruyah-hero {
	position: relative;
	min-height: 100svh;
	padding: 0;
	gap: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var(--ruyah-ink);
	overflow: visible;
	z-index: 2;
}

/* --- Media layer --- */
.ruyah-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	padding: 0;
	gap: 0;
	display: block;
	overflow: hidden;
}

.ruyah-hero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: ruyah-crossfade 24s var(--ease-inout) infinite;
}

.ruyah-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: ruyah-kenburns 24s var(--ease-inout) infinite;
}

.ruyah-hero__frame:nth-child(1) { animation-delay: 0s; }
.ruyah-hero__frame:nth-child(2) { animation-delay: 6s; }
.ruyah-hero__frame:nth-child(3) { animation-delay: 12s; }
.ruyah-hero__frame:nth-child(4) { animation-delay: 18s; }

.ruyah-hero__frame:nth-child(1) img { animation-delay: 0s; }
.ruyah-hero__frame:nth-child(2) img { animation-delay: 6s; }
.ruyah-hero__frame:nth-child(3) img { animation-delay: 12s; }
.ruyah-hero__frame:nth-child(4) img { animation-delay: 18s; }

@keyframes ruyah-crossfade {
	0%     { opacity: 1; }
	18.75% { opacity: 1; }
	25%    { opacity: 0; }
	93.75% { opacity: 0; }
	100%   { opacity: 1; }
}

@keyframes ruyah-kenburns {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}

/* Single art-directed still: delete the other frames in Elementor and this
   takes over automatically. No settings to change. */
.ruyah-hero__media > .ruyah-hero__frame:only-child {
	opacity: 1;
	animation: none;
}

.ruyah-hero__media > .ruyah-hero__frame:only-child img { animation: none; }

/* Phone hero: a single portrait photo. In Elementor it is an Image widget in
   the media container with the extra class ruyah-hero__frame--portrait and
   visibility "mobile only"; the landscape slides are set to hide on mobile.
   Wide photos in a tall phone frame were cropped to a thin strip and enlarged
   ~3.5x. It is the only visible frame on phones, so hold it still rather than
   crossfading it. (0,3,0) also beats the reduced-motion rule that hides every
   frame after the first. inc/performance.php sets its sizes and preload. */
@media (max-width: 767px) {
	.ruyah-hero__media > .ruyah-hero__frame.ruyah-hero__frame--portrait {
		opacity: 1;
		animation: none;
	}

	.ruyah-hero__media > .ruyah-hero__frame.ruyah-hero__frame--portrait img { animation: none; }
}

/* Scrim: never rely on the photograph for contrast. Two gradients: the top one
   sits behind the transparent header and the eyebrow, so the logo stays legible
   over a bright sky; the bottom one carries the headline, body and buttons. */
.ruyah-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--ruyah-ink) 70%, transparent) 0%,
			color-mix(in srgb, var(--ruyah-ink) 30%, transparent) 10rem,
			transparent 18rem
		),
		linear-gradient(
			to top,
			color-mix(in srgb, var(--ruyah-ink) 75%, transparent) 0%,
			color-mix(in srgb, var(--ruyah-ink) 20%, transparent) 55%,
			transparent 100%
		),
		color-mix(in srgb, var(--ruyah-ink) 20%, transparent);
}

/* --- Content --- */
.ruyah-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s);
	width: 100%;
	max-width: none;
	padding: calc(var(--header-h) + var(--space-xl)) var(--gutter) var(--space-l);
	margin-top: auto;
}

.ruyah-hero__eyebrow { color: var(--ruyah-gold); }

.ruyah-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: .92;
	letter-spacing: -0.03em;
	color: var(--ruyah-bone);
	font-variation-settings: "SOFT" 20, "WONK" 1;
	text-wrap: balance;
}

.ruyah-hero__title-sub {
	display: block;
	margin-top: var(--space-xs);
	font-size: 42%;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: color-mix(in srgb, var(--ruyah-bone) 90%, transparent);
	font-variation-settings: "SOFT" 0, "WONK" 0;
}

.ruyah-hero__lead p {
	margin: 0;
	max-width: 52ch;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: color-mix(in srgb, var(--ruyah-bone) 85%, transparent);
}

.ruyah-hero__actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	width: auto;
	padding: 0;
	margin-top: var(--space-2xs);
}

/* --- Scroll cue --- */
.ruyah-hero__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	margin: var(--space-m) 0 0;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
	transition: opacity var(--dur-base) var(--ease-out);
}

.ruyah-hero__scroll::before {
	content: "";
	order: -1;
	width: 1px;
	height: 48px;
	background-color: var(--ruyah-gold);
	transform-origin: top;
	animation: ruyah-scrollcue 2.4s var(--ease-inout) infinite;
}

@keyframes ruyah-scrollcue {
	0%, 100% { transform: scaleY(0); opacity: 0; }
	40%      { transform: scaleY(1); opacity: 1; }
	70%      { transform: scaleY(1); opacity: 1; }
}

body.ruyah-scrolled .ruyah-hero__scroll { opacity: 0; }

@media (min-width: 1025px) {
	.ruyah-hero__inner { padding-bottom: var(--space-xl); }
	.ruyah-hero__scroll { align-items: flex-start; }
}
/* --------------------------------------------------------------------------
   13. TIME CHOOSER
   -------------------------------------------------------------------------- */
.ruyah-timechooser {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: 0 var(--gutter) var(--space-l);
	margin-bottom: calc(var(--space-xl) * -1);
}

.ruyah-timechooser__title {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
}

.ruyah-timechooser__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xs);
	padding: 0;
	width: 100%;
	max-width: none;
}

.ruyah-timecard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding: var(--space-s) var(--space-m);
	background-color: color-mix(in srgb, var(--ruyah-ink-80) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid color-mix(in srgb, var(--ruyah-sage) 45%, transparent);
	border-radius: var(--radius-m);
	min-height: 44px;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.ruyah-timecard:hover,
.ruyah-timecard:focus-within {
	border-color: var(--ruyah-gold);
	background-color: var(--ruyah-ink-80);
	transform: translateY(-4px);
}

.ruyah-timecard__duration {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--ruyah-gold);
	transition: transform var(--dur-fast) var(--ease-out);
	transform-origin: left;
}

.ruyah-timecard:hover .ruyah-timecard__duration { transform: scale(1.05); }

.ruyah-timecard__sub p {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: var(--ruyah-sage-ink);
}

/* The container link Elementor injects must cover the whole card. */
body .ruyah-timecard > a.elementor-element-overlay, body .ruyah-timecard > .elementor-container-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (min-width: 768px) {
	.ruyah-timechooser__cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-s); }
}

@media (min-width: 1025px) {
	.ruyah-timechooser {
		padding-bottom: var(--space-xl);
		margin-bottom: calc(var(--space-2xl) * -1);
	}

	.ruyah-timechooser__cards { max-width: 62rem; }
}

/* Hero buttons: Elementor's button widget adopts the site button language. */
body .ruyah-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	padding: var(--space-xs) var(--space-m);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

body .ruyah-btn--primary .elementor-button {
	background-color: var(--ruyah-gold);
	color: var(--ruyah-ink);
}

body .ruyah-btn--primary .elementor-button:hover, body .ruyah-btn--primary .elementor-button:focus-visible {
	background-color: var(--ruyah-laterite);
	color: var(--ruyah-bone);
	transform: translateY(-2px);
	box-shadow: var(--shadow-m);
}

body .ruyah-btn--ghost .elementor-button {
	background-color: transparent;
	border-color: var(--ruyah-sage);
	color: var(--ruyah-bone);
}

body .ruyah-btn--ghost .elementor-button:hover, body .ruyah-btn--ghost .elementor-button:focus-visible {
	background-color: color-mix(in srgb, var(--ruyah-sage) 15%, transparent);
	border-color: var(--ruyah-gold);
}

body .ruyah-btn .elementor-button-icon { display: none; }
/* --- Kinetic word reveal. Only active once JS has split the headline, so
       the text is always visible if the script never runs. --- */
/* The mask clips at the line box, and the display face is set at line-height
   0.92, so descenders (the y in "your") were cut off. Pad the mask to clear
   them and pull the same amount back so the lines do not move. */
.ruyah-hero__title.is-split .ruyah-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
}

.ruyah-hero__title.is-split .ruyah-word__inner {
	display: inline-block;
	transform: translateY(130%);
	transition: transform 900ms var(--ease-out);
}

.ruyah-hero__title.is-split.is-revealed .ruyah-word__inner {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ruyah-hero__title.is-split .ruyah-word__inner { transform: none; }
	.ruyah-hero__frame { animation: none; opacity: 1; }
	.ruyah-hero__frame ~ .ruyah-hero__frame { opacity: 0; }
	.ruyah-hero__frame img { animation: none; }
	.ruyah-hero__scroll::before { animation: none; transform: scaleY(1); opacity: 1; }
}
/* --------------------------------------------------------------------------
   14. STATS STRIP
   -------------------------------------------------------------------------- */
.ruyah-stats {
	position: relative;
	z-index: 1;
	padding: calc(var(--space-xl) + var(--space-l)) 0 var(--space-l);
	background-color: var(--ruyah-ink-80);
	border-top: var(--hairline);
	border-bottom: var(--hairline);
	overflow: hidden;
}

.ruyah-stats__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	width: max-content;
	max-width: none;
	animation: ruyah-marquee 40s linear infinite;
}

.ruyah-stat {
	flex: 0 0 auto;
	width: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding: 0 var(--space-l);
	border-right: 1px solid color-mix(in srgb, var(--ruyah-sage) 30%, transparent);
}

.ruyah-stat__value {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--ruyah-gold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ruyah-stat__label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.4;
	color: var(--ruyah-sage-ink);
	white-space: nowrap;
}

@keyframes ruyah-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause while touched or focused. */
.ruyah-stats:hover .ruyah-stats__track,
.ruyah-stats:focus-within .ruyah-stats__track,
.ruyah-stats:active .ruyah-stats__track {
	animation-play-state: paused;
}

/* Desktop: a static six-column grid, no marquee. */
@media (min-width: 768px) {
	.ruyah-stats { padding-top: calc(var(--space-2xl) + var(--space-l)); }

	.ruyah-stats__track {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		width: 100%;
		animation: none;
		transform: none;
		padding-inline: var(--gutter);
	}

	.ruyah-stat {
		width: auto;
		padding: 0 var(--space-s);
		align-items: flex-start;
	}

	.ruyah-stat:last-child { border-right: 0; }

	.ruyah-stat__value,
	.ruyah-stat__label { white-space: normal; }

	/* The duplicated marquee set is only needed on mobile. */
	.ruyah-stat[data-ruyah-clone] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ruyah-stats__track { animation: none; }
}
/* --------------------------------------------------------------------------
   15. ELEMENTOR WIDGET TARGETING
   --------------------------------------------------------------------------
   Elementor puts a widget's CSS class on the wrapper <div>, not on the element
   it renders. Headings therefore keep their base h1/h2/h3 sizing unless the
   inner .elementor-heading-title is targeted directly.
   -------------------------------------------------------------------------- */
body .ruyah-hero__title .elementor-heading-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: .92;
	letter-spacing: -0.03em;
	color: var(--ruyah-bone);
	font-variation-settings: "SOFT" 20, "WONK" 1;
	text-wrap: balance;
}

body .ruyah-timechooser__title .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ruyah-sage-ink);
}

body .ruyah-timecard__duration .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--ruyah-gold);
}

.ruyah-timecard__duration a {
	color: inherit;
	text-decoration: none;
}

/* One real anchor, expanded to the whole card. */
.ruyah-timecard__duration a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ruyah-timecard:focus-within {
	outline: 2px solid var(--ruyah-gold);
	outline-offset: 2px;
}

.ruyah-timecard__duration a:focus-visible { outline: none; }

body .ruyah-hero__eyebrow .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-gold);
}

body .ruyah-hero__scroll .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
}

body .ruyah-stat__value .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--ruyah-gold);
	font-variant-numeric: tabular-nums;
}

body .ruyah-stat__label .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.4;
	color: var(--ruyah-sage-ink);
}

/* Elementor's own widget margins would break the vertical rhythm. */
body .ruyah-hero .elementor-widget:not(:last-child), body .ruyah-stats .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}
/* --------------------------------------------------------------------------
   16. LAYOUT CORRECTIONS
   -------------------------------------------------------------------------- */

/* Hero CTAs sit on one row. Elementor's container rules outrank a single
   class, hence the element-level selector. */
body .elementor-element.ruyah-hero__actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	width: auto;
	padding: 0;
}

body .ruyah-hero__actions .elementor-widget-button { width: auto; }

/* Equal-height buttons regardless of label length. */
body .ruyah-btn .elementor-button {
	height: 48px;
	justify-content: center;
}

/* --- Product cards: bottom-align price and button across the row --- */
.woocommerce ul.products li.product {
	height: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 0;
}

/* Push everything from the price down to the foot of the card, so the buttons
   line up even when one title wraps to two lines. */
.woocommerce ul.products li.product .price {
	margin-top: auto;
	padding-top: var(--space-2xs);
}

.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: var(--space-2xs);
}

.woocommerce ul.products {
	align-items: stretch;
}
/* --- Catalogue card internals ---------------------------------------------
   WooCommerce nests the thumbnail, title, meta and price inside a single
   anchor, with the Add to cart button as a sibling. So the anchor has to be
   the flex column that grows, and the price is bottom-aligned inside it. That
   lines both the price and the button up across a row whatever the title does.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--space-2xs);
	text-decoration: none;
	overflow: visible;
	border-radius: 0;
}

.ruyah-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-m);
	margin-bottom: var(--space-2xs);
}

.woocommerce ul.products li.product .ruyah-thumb img {
	margin: 0;
	transition: transform 600ms var(--ease-out);
}

.woocommerce ul.products li.product:hover .ruyah-thumb img { transform: scale(1.06); }

/* Price sits at the foot of the anchor; the button at the foot of the card. */
.woocommerce ul.products li.product .price {
	margin-top: auto;
	padding-top: var(--space-2xs);
}

.woocommerce ul.products li.product > .button {
	margin-top: var(--space-s);
	align-self: flex-start;
}

/* Gold underline draws beneath the title on hover, per the interaction spec. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(var(--ruyah-gold), var(--ruyah-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 400ms var(--ease-out);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	background-size: 100% 1px;
}
/* --------------------------------------------------------------------------
   17. PARENT THEME COLLISIONS
   --------------------------------------------------------------------------
   Hello Elementor's header-footer.css targets .site-header and .site-footer,
   the same class names our templates use, and boxes them to a centred 1140px.
   The chrome must be full-bleed.
   -------------------------------------------------------------------------- */
/* Hello boxes these with .site-header:not(.dynamic-header), which is (0,2,0)
   because :not() carries its argument's specificity. Match it and win on
   source order. */
body .site-header:not(.dynamic-header),
body .site-footer:not(.dynamic-footer) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.site-header__inner,
.site-footer__inner,
.site-footer__bar {
	max-width: none;
}

/* Keep the chrome aligned with the content measure on very wide screens. */
@media (min-width: 1600px) {
	.site-header__inner,
	.site-footer__inner,
	.site-footer__bar {
		max-width: 1600px;
		margin-inline: auto;
	}
}

/* --- Catalogue toolbar --- */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	padding: var(--space-2xs) var(--space-l) var(--space-2xs) var(--space-s);
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, var(--ruyah-sage-bone) 50%),
		linear-gradient(135deg, var(--ruyah-sage-bone) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid color-mix(in srgb, var(--ruyah-sage) 45%, transparent);
	border-radius: var(--radius-pill);
	color: var(--ruyah-sage-bone);
	cursor: pointer;
	min-height: 44px;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.woocommerce .woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering select:focus {
	border-color: var(--ruyah-gold);
}

.woocommerce .woocommerce-ordering { margin-bottom: var(--space-l); }

.woocommerce .woocommerce-result-count { margin-bottom: var(--space-l); }
/* Hello boxes .site-main to a centred 1140px as well, which left page content
   starting 143px in while the logo sat on the 72px gutter. Let our own gutter
   do the work so the chrome and the content share one alignment. */
body .site-main:not(.dynamic-content) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.site-main {
	padding-inline: var(--gutter);
}

/* The hero and any other full-bleed Elementor section opt out. */
.ruyah-has-hero .site-main {
	padding-inline: 0;
}

/* Stop the measure running away on very wide screens. */
@media (min-width: 1600px) {
	.woocommerce .site-main > *,
	.woocommerce-page .site-main > * {
		max-width: 1456px;
		margin-inline: auto;
	}
}
/* --------------------------------------------------------------------------
   18. SECTIONS
   -------------------------------------------------------------------------- */
.ruyah-section {
	position: relative;
	padding: var(--section-y) var(--gutter);
	gap: var(--space-l);
}

.ruyah-section--bone     { background-color: var(--ruyah-bone); color: var(--ruyah-on-bone); }
.ruyah-section--bonedeep { background-color: var(--ruyah-bone-deep); color: var(--ruyah-on-bone); }
.ruyah-section--ink      { background-color: var(--ruyah-ink); color: var(--ruyah-on-ink); }

.ruyah-section__head {
	gap: var(--space-2xs);
	padding: 0;
	max-width: 46rem;
}

body .ruyah-section__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

body .ruyah-section--ink .ruyah-section__title .elementor-heading-title { color: var(--ruyah-bone); }

.ruyah-section__lead p {
	margin: 0;
	max-width: 52ch;
	font-size: var(--fs-lead);
	line-height: 1.5;
}

.ruyah-section--ink .ruyah-section__lead p {
	color: color-mix(in srgb, var(--ruyah-bone) 85%, transparent);
}

/* --------------------------------------------------------------------------
   19. PILLARS (see 31 for the four-card layout)
   -------------------------------------------------------------------------- */
.ruyah-pillars__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	padding: 0;
	width: 100%;
	max-width: none;
}

.ruyah-pillar {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 22rem;
	padding: 0;
	padding-top: calc(var(--space-m) + 1.5rem);
	gap: 0;
	overflow: hidden;
	border-radius: var(--radius-m);
	background-color: var(--ruyah-ink);
	isolation: isolate;
}

.ruyah-pillar__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ruyah-pillar__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out);
}

.ruyah-pillar:hover .ruyah-pillar__media img { transform: scale(1.08); }

.ruyah-pillar__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--ruyah-ink) 88%, transparent) 0%,
		color-mix(in srgb, var(--ruyah-ink) 45%, transparent) 60%,
		color-mix(in srgb, var(--ruyah-ink) 25%, transparent) 100%
	);
	transition: opacity var(--dur-base) var(--ease-out);
}

.ruyah-pillar:hover .ruyah-pillar__media::after { opacity: .85; }

/* Deliberately unpositioned: .ruyah-pillar__index lives inside this box but must
   anchor to the card's corner, and the title's full-card link overlay
   (a::after, inset: 0) must cover the card, not just the text. As a flex item
   it still stacks above the media with z-index alone. */
.elementor-element.ruyah-pillar__body {
	--position: static;
	position: static;
	z-index: 1;
	padding: var(--space-m);
	gap: var(--space-2xs);
	width: 100%;
	max-width: none;
}

body .ruyah-pillar__index .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.14em;
	color: var(--ruyah-gold);
}

.ruyah-pillar__index { position: absolute; top: var(--space-m); left: var(--space-m); }

body .ruyah-pillar__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.15;
	color: var(--ruyah-bone);
}

.ruyah-pillar__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--ruyah-gold), var(--ruyah-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 600ms var(--ease-out);
}

.ruyah-pillar:hover .ruyah-pillar__title a { background-size: 100% 1px; }

.ruyah-pillar__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.ruyah-pillar__copy p {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: color-mix(in srgb, var(--ruyah-bone) 82%, transparent);
	max-width: 46ch;
}

body .ruyah-pillar__tags .elementor-heading-title, body .ruyah-pillar__count .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.5;
}

body .ruyah-pillar__tags .elementor-heading-title { color: var(--ruyah-sage-ink); }
body .ruyah-pillar__count .elementor-heading-title { color: var(--ruyah-gold); }

.ruyah-pillar:focus-within { outline: 2px solid var(--ruyah-gold); outline-offset: 3px; }

@media (min-width: 768px) {
	.ruyah-pillars__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(20rem, auto);
		gap: var(--space-m);
	}

	/* Card 01 is the moat, so it gets the space. */
	.ruyah-pillar--01 { grid-row: span 2; min-height: 34rem; }
}

@media (min-width: 1025px) {
	.ruyah-pillars__grid { grid-template-columns: 1.25fr 1fr; }
	.ruyah-pillar--01 { min-height: 40rem; }
	.ruyah-pillar__body { padding: var(--space-l); }
	.ruyah-pillar__index { top: var(--space-l); left: var(--space-l); }
	.ruyah-pillar { padding-top: calc(var(--space-l) + 1.5rem); }
}

/* --------------------------------------------------------------------------
   20. STORY
   -------------------------------------------------------------------------- */
.ruyah-story { gap: var(--space-l); }

.ruyah-story__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-m);
}

.ruyah-story__body { gap: var(--space-s); padding: 0; }

.ruyah-story__copy p {
	margin: 0 0 var(--space-s);
	max-width: 60ch;
	line-height: 1.7;
}

body .ruyah-story__quote .elementor-heading-title {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-h3);
	font-weight: 500;
	color: var(--ruyah-sage-bone);
}

@media (min-width: 1025px) {
	.ruyah-story {
		display: grid;
		grid-template-columns: 0.85fr 1fr;
		gap: var(--space-xl);
		align-items: center;
	}

	/* The portrait breaks upward into the section above it. */
	.ruyah-story__media { margin-top: calc(var(--space-2xl) * -1); }

	.ruyah-story__quote { margin-left: calc(var(--space-l) * -1); }
}
/* --------------------------------------------------------------------------
   21. FEATURED EXPERIENCES (WooCommerce loop on an Ink ground)
   -------------------------------------------------------------------------- */
.ruyah-featured .woocommerce ul.products,
.ruyah-featured ul.products {
	grid-template-columns: 1fr;
	gap: var(--space-l);
}

.ruyah-featured ul.products li.product .woocommerce-loop-product__title,
.ruyah-featured ul.products li.product .price {
	color: var(--ruyah-bone);
}

.ruyah-featured ul.products li.product .ruyah-card-meta__duration { color: var(--ruyah-gold); }
.ruyah-featured ul.products li.product .ruyah-card-meta__rating   { color: var(--ruyah-sage-ink); }

.ruyah-featured__cta { margin-top: var(--space-l); }
body .ruyah-featured__cta .elementor-button { color: var(--ruyah-bone); }

@media (min-width: 600px) {
	.ruyah-featured ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
	.ruyah-featured ul.products { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }
}

/* Mobile: horizontal scroll-snap with a visible next card. */
@media (max-width: 599px) {
	.ruyah-featured ul.products {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: var(--space-2xs);
	}

	.ruyah-featured ul.products::-webkit-scrollbar { display: none; }
	.ruyah-featured ul.products li.product { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   22. HOW IT WORKS
   -------------------------------------------------------------------------- */
.ruyah-how__track {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	padding: 0;
	width: 100%;
	max-width: none;
}

/* The connecting hairline, drawn progressively as the section is revealed. */
.ruyah-how__track::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: color-mix(in srgb, var(--ruyah-gold) 45%, transparent);
	transform: scaleY(var(--ruyah-line, 1));
	transform-origin: top;
	transition: transform var(--dur-reveal) var(--ease-out);
}

.ruyah-step {
	position: relative;
	padding: 0 0 0 var(--space-l);
	gap: var(--space-3xs);
}

.ruyah-step::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 10px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--ruyah-gold);
}

body .ruyah-step__num .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--ruyah-gold);
	line-height: 1;
}

body .ruyah-step__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	color: var(--ruyah-bone);
}

.ruyah-step__copy p {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: color-mix(in srgb, var(--ruyah-bone) 80%, transparent);
	max-width: 36ch;
}

@media (min-width: 768px) {
	.ruyah-how__track { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }

	.ruyah-how__track::before {
		left: 0; top: 10px;
		width: 100%; height: 1px;
		transform: scaleX(var(--ruyah-line, 1));
		transform-origin: left;
	}

	.ruyah-step { padding: var(--space-l) 0 0; }
	.ruyah-step::before { left: 0; top: 6px; }
}

/* --------------------------------------------------------------------------
   23. TRUST BAR
   -------------------------------------------------------------------------- */
.ruyah-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	padding: var(--space-m) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--ruyah-sage) 35%, transparent);
	width: 100%;
	max-width: none;
}

body .ruyah-trust__item .elementor-heading-title {
	position: relative;
	padding-left: var(--space-m);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1.5;
	color: var(--ruyah-sage-bone);
}

body .ruyah-trust__item .elementor-heading-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ruyah-gold);
}

@media (min-width: 768px) {
	.ruyah-trust { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   24. PLAN YOUR DAY TEASER + FINAL CTA
   -------------------------------------------------------------------------- */
.ruyah-planteaser__body { gap: var(--space-s); padding: 0; max-width: 46rem; }

.ruyah-finalcta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: calc(var(--section-y) * 1.15);
}

.ruyah-finalcta__media { position: absolute; inset: 0; z-index: 0; }

.ruyah-finalcta__media img {
	width: 100%; height: 100%; object-fit: cover; opacity: .3;
}

.ruyah-finalcta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 50%, transparent 40%, color-mix(in srgb, var(--ruyah-gold) 12%, transparent) 100%),
		color-mix(in srgb, var(--ruyah-ink) 55%, transparent);
}

.ruyah-finalcta__body {
	position: relative;
	z-index: 2;
	gap: var(--space-s);
	padding: 0;
	max-width: 46rem;
}

body .ruyah-finalcta__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--ruyah-bone);
	text-wrap: balance;
}

.ruyah-finalcta__actions { gap: var(--space-2xs); padding: 0; width: auto; }

body .ruyah-finalcta__micro .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-ink);
}

@keyframes ruyah-pulse {
	0%, 100% { opacity: .9; }
	50%      { opacity: 1; }
}

body .ruyah-btn--pulse .elementor-button { animation: ruyah-pulse 3s var(--ease-inout) infinite; }

@media (prefers-reduced-motion: reduce) {
	body .ruyah-btn--pulse .elementor-button { animation: none; opacity: 1; }
	.ruyah-how__track::before { transform: none; }
}
/* Progressive line draw and heading reveals only once JS is present. */
.ruyah-js .ruyah-how__track { --ruyah-line: 0; }
.ruyah-js .ruyah-how__track.is-drawn { --ruyah-line: 1; }

.is-split .ruyah-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.is-split .ruyah-word__inner { display: inline-block; transform: translateY(130%); transition: transform 900ms var(--ease-out); }
.is-split.is-revealed .ruyah-word__inner { transform: translateY(0); }

/* --- Featured grid: raise specificity above the shared catalogue rules --- */
body .ruyah-featured .elementor-shortcode .woocommerce ul.products, .ruyah-featured div.woocommerce ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
}

@media (min-width: 600px) {
	body .ruyah-featured .elementor-shortcode .woocommerce ul.products, .ruyah-featured div.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	body .ruyah-featured .elementor-shortcode .woocommerce ul.products, .ruyah-featured div.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-m);
	}
}

@media (max-width: 599px) {
	body .ruyah-featured .elementor-shortcode .woocommerce ul.products, .ruyah-featured div.woocommerce ul.products {
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
}
/* --------------------------------------------------------------------------
   25. INNER PAGES, TABLE, FAQ, PROSE
   -------------------------------------------------------------------------- */
body .ruyah-page__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* A self-contained answer, sized to be quoted. */
.ruyah-answer p {
	max-width: 60ch;
	font-size: var(--fs-lead);
	line-height: 1.55;
	padding-left: var(--space-s);
	border-left: 3px solid var(--ruyah-gold);
}

/* --- Comparison table --- */
.ruyah-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.ruyah-table th,
.ruyah-table td {
	text-align: left;
	padding: var(--space-xs) var(--space-s);
	border-bottom: 1px solid color-mix(in srgb, var(--ruyah-sage) 30%, transparent);
	vertical-align: top;
}

.ruyah-table thead th {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-bone);
	border-bottom-color: var(--ruyah-sage);
}

.ruyah-table tbody th a {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--ruyah-on-bone);
	text-decoration: none;
}

.ruyah-table tbody th a:hover { color: var(--ruyah-laterite); }

.ruyah-table tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--ruyah-bone) 55%, transparent); }

.ruyah-table td { font-variant-numeric: tabular-nums; }

/* Below 768px the table becomes stacked definition rows, never a scroller. */
@media (max-width: 767px) {
	.ruyah-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.ruyah-table, .ruyah-table tbody, .ruyah-table tr, .ruyah-table th, .ruyah-table td { display: block; width: auto; }

	.ruyah-table tr {
		padding: var(--space-s) 0;
		border-bottom: 1px solid color-mix(in srgb, var(--ruyah-sage) 30%, transparent);
	}

	.ruyah-table th, .ruyah-table td { border: 0; padding: var(--space-3xs) 0; }

	.ruyah-table td::before {
		content: attr(data-label) ": ";
		font-family: var(--font-mono);
		font-size: var(--fs-micro);
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: var(--ruyah-sage-bone);
	}
}

/* --- FAQ --- */
.ruyah-faq { display: flex; flex-direction: column; }

.ruyah-faq__item { border-bottom: 1px solid color-mix(in srgb, var(--ruyah-sage) 30%, transparent); }

.ruyah-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	min-height: 56px;
	padding: var(--space-s) 0;
	cursor: pointer;
	list-style: none;
}

.ruyah-faq__q::-webkit-details-marker { display: none; }

.ruyah-faq__q h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.25;
}

.ruyah-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 1.25rem;
	color: var(--ruyah-gold);
	transition: transform var(--dur-fast) var(--ease-out);
}

.ruyah-faq__item[open] > .ruyah-faq__q::after { transform: rotate(45deg); }

.ruyah-faq__a p {
	margin: 0;
	padding-bottom: var(--space-m);
	max-width: 68ch;
	line-height: 1.7;
}

/* --- Long-form prose --- */
.ruyah-prose__body h2 {
	margin: var(--space-l) 0 var(--space-2xs);
	font-size: var(--fs-h3);
}

.ruyah-prose__body p { margin: 0 0 var(--space-s); max-width: 68ch; line-height: 1.7; }
.ruyah-prose__body a { color: var(--ruyah-laterite); }

/* --- Contact --- */
.ruyah-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	padding: 0;
	width: 100%;
	max-width: none;
}

.ruyah-contact__card {
	gap: var(--space-2xs);
	padding: var(--space-m);
	background-color: var(--ruyah-bone-deep);
	border-radius: var(--radius-m);
	align-items: flex-start;
}

body .ruyah-contact__title .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ruyah-sage-bone);
}

.ruyah-contact__copy p { margin: 0; font-size: var(--fs-small); line-height: 1.6; }

body .ruyah-btn--onbone .elementor-button { color: var(--ruyah-on-bone); border-color: var(--ruyah-sage); }

@media (min-width: 768px) {
	.ruyah-contact__grid { grid-template-columns: repeat(3, 1fr); }
}
/* --------------------------------------------------------------------------
   26. TOUCH TARGETS
   --------------------------------------------------------------------------
   On touch devices every interactive element clears 44px. Pointer devices keep
   the tighter typographic rhythm.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
	.site-nav__list a,
	.site-footer__list a,
	.site-footer__contact-link,
	.ruyah-table tbody th a,
	.ruyah-prose__body a,
	.woocommerce-breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.site-footer__heading,
	.ruyah-faq__q { min-height: 48px; }
}
/* --------------------------------------------------------------------------
   27. SINGLE EXPERIENCE — Elementor Pro product template
   --------------------------------------------------------------------------
   The page is now a Theme Builder template built from containers, so
   WooCommerce's float layout no longer applies. The override block that used to
   fight it (div.product div.images at 48% etc.) has been deleted outright.
   -------------------------------------------------------------------------- */

.ruyah-pdp {
	padding-block: var(--space-l) var(--space-2xl);
	padding-inline: var(--gutter);
	max-width: 1456px;
	width: 100%;
	margin-inline: auto;
	gap: var(--space-xl);
}

.ruyah-pdp__crumbs,
.ruyah-pdp__crumbs .woocommerce-breadcrumb {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--ruyah-sage-bone);
}

.ruyah-pdp__crumbs a { color: inherit; text-decoration: none; }
.ruyah-pdp__crumbs a:hover { color: var(--ruyah-gold-bone); }

/* --- Top: gallery + summary --- */
body .elementor-element.ruyah-pdp__top {
	flex-direction: column;
	gap: var(--space-l);
	align-items: flex-start;
	padding: 0;
}

body .elementor-element.ruyah-pdp__gallery, body .elementor-element.ruyah-pdp__summary {
	padding: 0;
	width: 100%;
}

@media (min-width: 1025px) {
	body .elementor-element.ruyah-pdp__top {
		flex-direction: row;
		gap: var(--space-xl);
	}

	body .elementor-element.ruyah-pdp__gallery { width: 54%; }
	body .elementor-element.ruyah-pdp__summary { width: 46%; }
}

.ruyah-pdp__gallery .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
}

.ruyah-pdp__gallery img {
	border-radius: var(--radius-m);
	display: block;
	width: 100%;
	height: auto;
}

/* --- Summary --- */
body .elementor-element.ruyah-pdp__summary { gap: var(--space-xs); }

.ruyah-pdp__title .product_title,
.ruyah-pdp__title h1 {
	font-family: var(--font-display);
	font-size: var(--fs-h1-sm, clamp(2rem, 4vw, 3rem));
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

.ruyah-pdp__price .price,
.ruyah-pdp__price .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--ruyah-ink);
	font-weight: 600;
}

.ruyah-pdp__price del { opacity: 0.5; font-size: 0.7em; }

.ruyah-pdp__intro p {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--ruyah-ink-soft);
	margin: 0 0 var(--space-2xs);
	max-width: var(--measure);
}

.ruyah-pdp__cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0 0 var(--space-xs);
}

.ruyah-pdp__cart .quantity input {
	height: 48px;
	min-width: 72px;
	padding-inline: var(--space-2xs);
	border: 1px solid var(--ruyah-rule);
	border-radius: var(--radius-s);
	background: transparent;
	font-family: var(--font-mono);
	color: var(--ruyah-ink);
}

.ruyah-pdp__terms {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--ruyah-sage-bone);
	border-top: 1px solid var(--ruyah-rule);
	padding-top: var(--space-xs);
}

.ruyah-pdp__terms a { color: var(--ruyah-gold-bone); }

/* --- Tabs --- */
body .elementor-element.ruyah-pdp__detail, body .elementor-element.ruyah-pdp__more { padding: 0; }

.ruyah-pdp__tabs .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0 0 var(--space-2xs);
	border-bottom: 1px solid var(--ruyah-rule);
}

.ruyah-pdp__tabs .woocommerce-tabs ul.tabs::before,
.ruyah-pdp__tabs .woocommerce-tabs ul.tabs::after,
.ruyah-pdp__tabs .woocommerce-tabs ul.tabs li::before,
.ruyah-pdp__tabs .woocommerce-tabs ul.tabs li::after { display: none; }

.ruyah-pdp__tabs .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

body.woocommerce .ruyah-pdp .ruyah-pdp__tabs .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--ruyah-sage-bone);
	padding: var(--space-3xs) 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

body.woocommerce .ruyah-pdp .ruyah-pdp__tabs .woocommerce-tabs ul.tabs li.active a,
body.woocommerce .ruyah-pdp .ruyah-pdp__tabs .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ruyah-ink);
	border-bottom-color: var(--ruyah-gold);
}

.ruyah-pdp__tabs .woocommerce-Tabs-panel h2 { display: none; }

.ruyah-pdp__tabs .woocommerce-Tabs-panel p {
	max-width: var(--measure);
	margin: 0 0 var(--space-xs);
	line-height: 1.7;
}

/* --- Related --- */
.ruyah-pdp__related h2 {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-m);
}


/* Elementor's single-location wrapper renders as an auto-sized grid, which made
   every nested width:100% shrink-wrap to its content. A plain block hands width
   control back to the template's own root container. */
.elementor-location-single {
	display: block;
	width: 100%;
}

body .elementor-element.ruyah-pdp {
	width: 100%;
	max-width: 1456px;
	margin-inline: auto;
}

body .elementor-element.ruyah-pdp__top {
	width: 100%;
}

/* Gallery reads as a set of photographs, not as slider controls: one lead
   image across the top, the rest in a two-column grid. Nothing is clickable
   beyond the native link, so no interactive affordance is implied. */
.ruyah-pdp__gallery .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ruyah-pdp__gallery .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

.ruyah-pdp__gallery .woocommerce-product-gallery__image a {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-m);
}

.ruyah-pdp__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-m) var(--ease);
}

.ruyah-pdp__gallery .woocommerce-product-gallery__image a:hover img {
	transform: scale(1.04);
}

/* WooCommerce sizes gallery items from its --columns-N class
   (.woocommerce-product-gallery--columns-4 ... :nth-child(n+2) { width:25% }),
   which fought the grid tracks. Let the grid do the sizing. */

/* WooCommerce sizes gallery items with
   .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
   { width:25%; display:inline-block } — specificity (0, 4, body 2). The selector below
   carries five classes so it outranks it; the grid then does the sizing. */
.elementor-element.ruyah-pdp__gallery div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image, body .elementor-element.ruyah-pdp__gallery div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+2) {
	width: auto;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   29. ENQUIRY FORM — Elementor Pro Forms
   --------------------------------------------------------------------------
   WhatsApp stays the primary route on the Contact page; this is the written
   alternative. Submissions are stored in the database as well as emailed, so a
   mail failure never loses an enquiry.
   -------------------------------------------------------------------------- */

.ruyah-formsection { gap: var(--space-l); }

body .ruyah-form .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-s);
	margin: 0;
}

@media (max-width: 767px) {
	body .ruyah-form .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
}

body .ruyah-form .elementor-field-group {
	padding: 0;
	width: auto;
	max-width: none;
	flex-direction: column;
	align-items: stretch;
}

body .ruyah-form .elementor-field-group.elementor-field-type-textarea, body .ruyah-form .elementor-field-group.elementor-field-type-submit {
	grid-column: 1 / -1;
}

body .ruyah-form .elementor-field-label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--ruyah-sage-bone);
	margin-bottom: var(--space-3xs);
}

body .ruyah-form .elementor-field-required .elementor-field-label::after {
	content: " ·";
	color: var(--ruyah-gold-bone);
}

body .ruyah-form .elementor-field-textual, body .ruyah-form select.elementor-field-textual, body .ruyah-form textarea.elementor-field-textual {
	width: 100%;
	min-height: 48px;
	padding: var(--space-2xs);
	background: var(--ruyah-bone);
	border: 1px solid var(--ruyah-rule);
	border-radius: var(--radius-s);
	color: var(--ruyah-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--dur-s) var(--ease);
}

body .ruyah-form textarea.elementor-field-textual { min-height: 120px; resize: vertical; }

body .ruyah-form .elementor-field-textual:focus-visible {
	outline: 2px solid var(--ruyah-gold-bone);
	outline-offset: 2px;
	border-color: transparent;
}

body .ruyah-form .elementor-field-textual::placeholder {
	color: var(--ruyah-sage-bone);
	opacity: 0.75;
}

body .ruyah-form .elementor-field-type-submit .elementor-button {
	background: var(--ruyah-gold);
	color: var(--ruyah-ink);
	border: 0;
	border-radius: 999px;
	height: 48px;
	padding-inline: var(--space-m);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 500;
	justify-self: start;
	width: auto;
	transition: transform var(--dur-s) var(--ease), filter var(--dur-s) var(--ease);
}

body .ruyah-form .elementor-field-type-submit .elementor-button:hover { filter: brightness(1.05); }
body .ruyah-form .elementor-field-type-submit .elementor-button:active { transform: translateY(1px); }

body .ruyah-form .elementor-message {
	font-family: var(--font-body);
	font-size: 0.95rem;
	margin-top: var(--space-2xs);
	grid-column: 1 / -1;
}

body .ruyah-form .elementor-message.elementor-message-success { color: var(--ruyah-sage-bone); }
body .ruyah-form .elementor-message.elementor-message-danger { color: #8C3B2E; }

@media (prefers-reduced-motion: reduce) {
	body .ruyah-form .elementor-field-textual, body .ruyah-form .elementor-field-type-submit .elementor-button { transition: none; }
}

/* Elementor's own form rules (.elementor-widget-form ...) outrank a single
   class, so these carry the widget class too. */
body .ruyah-form.elementor-widget-form .elementor-form-fields-wrapper {
	margin: 0;
}

body .ruyah-form.elementor-widget-form .elementor-field-group > label.elementor-field-label {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--ruyah-sage-bone);
	margin-bottom: var(--space-3xs);
}

body .ruyah-form.elementor-widget-form .elementor-field-group .elementor-field-textual {
	background-color: var(--ruyah-bone);
	border: 1px solid var(--ruyah-rule);
	border-radius: var(--radius-s);
	color: var(--ruyah-ink);
	height: 48px;
	min-height: 48px;
	padding-block: 0;
	padding-inline: var(--space-2xs);
	font-family: var(--font-body);
	font-size: 1rem;
}

body .ruyah-form.elementor-widget-form .elementor-field-group textarea.elementor-field-textual {
	height: auto;
	min-height: 120px;
	padding-block: var(--space-2xs);
}

body .ruyah-form.elementor-widget-form .elementor-field-type-submit {
	display: flex;
	justify-content: flex-start;
}

body .ruyah-form.elementor-widget-form .elementor-field-type-submit .elementor-button {
	width: auto;
	flex: 0 0 auto;
	height: 48px;
	background-color: var(--ruyah-gold);
	color: var(--ruyah-ink);
	border-radius: 999px;
	padding-inline: var(--space-m);
}

body .ruyah-form.elementor-widget-form .elementor-field-type-submit.e-form__buttons {
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

/* Form fields were content-box: height 48 + padding rendered 64px, and
   width:100% + padding pushed the textarea past the viewport. */
body .ruyah-form.elementor-widget-form .elementor-field-group .elementor-field-textual, body .ruyah-form.elementor-widget-form .elementor-field-group textarea.elementor-field-textual {
	box-sizing: border-box;
	max-width: 100%;
}

/* Elementor's field group is a flex ROW, so the label sat beside the field,
   pushing it past the viewport and stretching it to the row height (the 64px
   inputs). Stacking the group fixes position, width and height together. */
body .ruyah-form.elementor-widget-form .elementor-field-group {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	padding: 0;
}

/* --------------------------------------------------------------------------
   30. CHECKOUT CONTROLS
   --------------------------------------------------------------------------
   WooCommerce ships 38-40px inputs. Everything else on this site is 48, and
   44 is the touch-target floor.
   -------------------------------------------------------------------------- */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row .select2-selection--single {
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	padding: 0 var(--space-2xs);
	border: 1px solid var(--ruyah-rule);
	border-radius: var(--radius-s);
	background-color: var(--ruyah-bone);
	color: var(--ruyah-ink);
	font-family: var(--font-body);
	font-size: 1rem;
}

.woocommerce-checkout form .form-row textarea {
	box-sizing: border-box;
	min-height: 120px;
	padding: var(--space-2xs);
	border: 1px solid var(--ruyah-rule);
	border-radius: var(--radius-s);
	background-color: var(--ruyah-bone);
	font-family: var(--font-body);
	font-size: 1rem;
}

.woocommerce-checkout #place_order {
	min-height: 48px;
}

/* Chooser buckets are activity time; transfers are stated alongside so the
   'how much time do you have?' question is answered honestly. */
.ruyah-timechooser__note .elementor-heading-title {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	margin: calc(var(--space-2xs) * -1) 0 var(--space-2xs);
}

/* --------------------------------------------------------------------------
   31. FOUR PILLARS
   --------------------------------------------------------------------------
   A fourth card would orphan on a third row under the original two-row layout.
   Tablet is a plain 2x2; desktop keeps card 01 as the large moat and stacks
   02-04 beside it.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.ruyah-pillars__grid .ruyah-pillar--01 { grid-row: auto; min-height: 20rem; }
}

@media (min-width: 1025px) {
	.ruyah-pillars__grid { grid-auto-rows: minmax(13rem, auto); }
	.ruyah-pillars__grid .ruyah-pillar--01 { grid-row: span 3; min-height: 44rem; }
	.ruyah-pillars__grid .ruyah-pillar--02,
	.ruyah-pillars__grid .ruyah-pillar--03,
	.ruyah-pillars__grid .ruyah-pillar--04 { min-height: 13rem; }
}

/* --------------------------------------------------------------------------
   32. GUEST REVIEWS
   --------------------------------------------------------------------------
   Rendered by [ruyah_reviews]. Text tones are checked against Bone and Bone
   Deep: Gold on Bone 4.88, Sage on Bone 5.13, Ink 14+.
   -------------------------------------------------------------------------- */
.ruyah-reviews-block { width: 100%; }

.ruyah-reviews-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	margin: 0;
}

@media (min-width: 768px) {
	.ruyah-reviews-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
}

@media (min-width: 1200px) {
	.ruyah-reviews .ruyah-reviews-list { grid-template-columns: repeat(3, 1fr); }
}

.ruyah-review {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0;
	padding: var(--space-m);
	background-color: var(--ruyah-bone-deep);
	border-radius: var(--radius-m);
}

.ruyah-review__stars {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.12em;
	line-height: 1;
	color: var(--ruyah-gold-bone);
}

.ruyah-review__quote {
	margin: 0;
	padding: 0;
	border: 0;
	flex: 1 1 auto;
	font-family: var(--font-body);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.6;
	color: var(--ruyah-ink);
	quotes: "\201C" "\201D";
}

.ruyah-review__quote p { margin: 0; max-width: none; }
.ruyah-review__quote p:first-child::before { content: open-quote; }
.ruyah-review__quote p:last-child::after { content: close-quote; }

.ruyah-review__by {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--space-2xs);
	border-top: 1px solid var(--ruyah-rule);
}

.ruyah-review__name {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--ruyah-ink);
}

.ruyah-review__meta,
.ruyah-reviews-note {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--track-mono);
	text-transform: uppercase;
	color: var(--ruyah-sage-bone);
}

.ruyah-reviews-note { margin: var(--space-s) 0 0; }

/* Product page section */
.elementor-element.ruyah-pdp__reviews { padding: 0; }

.ruyah-reviews__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--ruyah-ink);
	margin: 0 0 var(--space-m);
}
/* --------------------------------------------------------------------------
   33. ELEMENTOR PAGE GUTTERS
   --------------------------------------------------------------------------
   .site-main adds an inline gutter for theme-rendered pages (archives). Pages
   built in Elementor - including Theme Builder templates, whose body class is
   elementor-page-{id} - pad every section themselves, so the wrapper gutter
   doubled up and inset the coloured sections on Contact and Plan Your Day.
   -------------------------------------------------------------------------- */
body.elementor-page .site-main,
body[class*="elementor-page-"] .site-main {
	padding-inline: 0;
}
/* --------------------------------------------------------------------------
   34. PRICE UNIT
   --------------------------------------------------------------------------
   Almost every price on the site is per person, which the FAQ and the
   comparison table state once. A product priced any other way carries its own
   unit beside the figure (_ruyah_price_unit), so a charter rate can never be
   read as a per-person one. Set smaller and softer than the price it follows,
   because it qualifies the number rather than competing with it.
   -------------------------------------------------------------------------- */
.ruyah-price__unit {
	font-family: var(--font-body);
	font-size: 0.72em;
	font-weight: 400;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--ruyah-ink-soft);
}

.ruyah-bookbar__price .ruyah-price__unit {
	display: block;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   35. 404 PAGE
   --------------------------------------------------------------------------
   Theme Builder template "Ruyah — 404 page" (Templates → Theme Builder → 404).
   It reuses the closing-CTA section (.ruyah-finalcta) with .ruyah-404 added.
   Inner pages pad .site-main for the fixed header, which left a light strip
   above this dark section; instead the section runs under the header and fills
   the screen, so the footer is not half-way up a phone.
   -------------------------------------------------------------------------- */
body.error404 .site-main { padding-top: 0; }

.elementor-element.ruyah-404 {
	min-height: 100svh;
	padding-top: var(--header-h);
	justify-content: center;
}

/* --------------------------------------------------------------------------
   36. CHECKOUT LAYOUT
   --------------------------------------------------------------------------
   The checkout asks only for contact details and the booking (inc/
   woocommerce.php, ruyah_checkout_fields). Experiences are virtual, so
   WooCommerce's second column (shipping, order notes) is empty — remarks are
   rendered inside "Your adventure" — and is hidden. Both form sections are the
   same card. From 1025px the form and the order summary sit side by side,
   the summary sticky so the request button stays in reach.
   -------------------------------------------------------------------------- */
.woocommerce-checkout #customer_details .col-1 {
	float: none;
	width: 100%;
}

.woocommerce-checkout #customer_details .col-2 { display: none; }

.woocommerce-checkout .woocommerce-billing-fields {
	padding: var(--space-m);
	background-color: var(--ruyah-bone-deep);
	border-radius: var(--radius-m);
}

.woocommerce-checkout .woocommerce-billing-fields h3 {
	margin: 0 0 var(--space-s);
	font-size: var(--fs-h3);
}

.woocommerce-checkout .ruyah-booking { margin-block: var(--space-m) 0; }

/* One measure for every full-width row in both cards. */
.woocommerce-checkout .ruyah-checkout__main .form-row-wide {
	width: 100%;
	max-width: none;
}

.ruyah-checkout__aside { margin-top: var(--space-l); }

@media (min-width: 1025px) {
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: var(--space-xl);
		align-items: start;
	}

	/* Notices WooCommerce injects at the top of the form span both columns. */
	form.checkout.woocommerce-checkout > :not(.ruyah-checkout__main):not(.ruyah-checkout__aside) {
		grid-column: 1 / -1;
	}

	.ruyah-checkout__aside {
		position: sticky;
		top: calc(var(--header-h) + var(--space-m));
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   37. HELLO 3.5 PHONE GUTTER + CHECKOUT ON PHONES
   --------------------------------------------------------------------------
   Hello Elementor 3.5 added, under 575px,
   `body:not([class*="elementor-page-"]) .site-main { padding-inline: 10px }`
   — specificity (0,2,1), which beats our `.site-main` gutter and halved the
   side margin on every page not built in Elementor (checkout, cart, account,
   the experiences archive). Same selector, declared later, restores it.
   -------------------------------------------------------------------------- */
body:not([class*="elementor-page-"]) .site-main { padding-inline: var(--gutter); }

/* WooCommerce pairs fields at 47% width. On a phone that is ~145px — the
   pickup-time options and the WhatsApp help text get cut off. Stack them. (0,3,0) to beat WooCommerce's
   `.woocommerce form .form-row-first`, which is (0,2,1). */
@media (max-width: 767px) {
	.woocommerce-checkout .ruyah-checkout__main .form-row-first,
	.woocommerce-checkout .ruyah-checkout__main .form-row-last {
		float: none;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   38. HEADER CART
   --------------------------------------------------------------------------
   Markup: ruyah_header_cart() in inc/woocommerce.php, printed between the
   brand and the menu toggle and refreshed as a cart fragment. Phones: it sits
   beside the toggle (margin-left: auto pushes both right). Desktop: it moves
   after the nav — the inner row switches to flex-start so the nav can take
   the auto margin and the cart follows it at the far right.
   -------------------------------------------------------------------------- */
.site-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-left: auto;
	color: var(--ruyah-on-ink);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.site-header__cart:hover,
.site-header__cart:focus-visible { color: var(--ruyah-gold); }

.site-header__cart-count {
	position: absolute;
	top: 4px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background-color: var(--ruyah-gold);
	color: var(--ruyah-ink);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}

.site-header__cart[data-count="0"] .site-header__cart-count { display: none; }

@media (min-width: 1025px) {
	.site-header__inner { justify-content: flex-start; }
	.ruyah-js .site-nav,
	.site-nav { margin-left: auto; }
	.site-header__cart {
		order: 3;
		margin-left: 0;
	}
}