/*
Theme Name:  Namaste Angkor
Theme URI:   https://namasteangkorkitchen.com
Author:      Khmer Angkor Group
Author URI:  https://khmerangkorgroup.com
Description: Khmer × Indian fusion restaurant theme for Namaste Angkor Kitchen, Siem Reap, with three switchable culture styles (Indian, Khmer, Fusion) that change palette, typography and ornament together. Fusion pairs Fraunces with Karla, a spice-forward saffron/maroon palette, and a signature spice-meter motif. Works with the Namaste Angkor Core plugin (Dish menu system + WooCommerce ordering) and degrades gracefully without it. Operates as part of the KAT Family umbrella brand network, with editable cross-brand links + Google Map cards, GEO/AEO structured data (address, geo coordinates, FAQPage), SEM-tagged cross-links, and a live feed of this brand's bookable Experiences/Food Events from Khmer Angkor Travel.
Version:     1.11.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: namaste-angkor
Tags:        restaurant, food, woocommerce, custom-menu, custom-logo, footer-widgets, translation-ready
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
	/* Palette — spice, stone, and rice paper */
	--nak-ink: #241005;        /* clove brown, near-black warm */
	--nak-ink-soft: #4a3421;   /* softened body text */
	--nak-saffron: #e8871e;    /* saffron / turmeric — primary accent */
	--nak-turmeric: #f2b035;   /* gold turmeric — highlight */
	--nak-lotus: #b0203c;      /* tamarind / lotus red — CTA, Khmer nod */
	--nak-lotus-deep: #8c1730;
	--nak-stone: #c9bba0;      /* Angkor sandstone — borders, surfaces */
	--nak-stone-soft: #e4dcc9;
	--nak-cream: #fbf4e6;      /* rice-paper background */
	--nak-cream-deep: #f4ead4;
	--nak-white: #fffdf8;

	/* Type */
	--nak-display: "Fraunces", "Georgia", serif;
	--nak-body: "Karla", "Segoe UI", system-ui, sans-serif;

	/* Scale (fluid) */
	--nak-step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
	--nak-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	--nak-step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	--nak-step-2: clamp(1.5rem, 1.3rem + 1vw, 2.15rem);
	--nak-step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);
	--nak-step-4: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

	/* Space */
	--nak-gap: clamp(1.2rem, 1rem + 1vw, 2rem);
	--nak-section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
	--nak-wrap: 1180px;

	/* Detail */
	--nak-radius: 14px;
	--nak-radius-sm: 8px;
	--nak-shadow: 0 18px 40px -24px rgba(36, 16, 5, 0.5);
	--nak-line: 1px solid var(--nak-stone);

	/* Motion — shared cinematic ease-out for reveal/entrance animation */
	--nak-ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--nak-cream);
	color: var(--nak-ink);
	font-family: var(--nak-body);
	font-size: var(--nak-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

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

a {
	color: var(--nak-lotus);
	text-decoration: none;
	transition: color 0.18s ease;
}
a:hover { color: var(--nak-lotus-deep); }

h1, h2, h3, h4 {
	font-family: var(--nak-display);
	font-weight: 600;
	line-height: 1.08;
	margin: 0 0 0.5em;
	color: var(--nak-ink);
	font-optical-sizing: auto;
}

p { margin: 0 0 1em; }

:focus-visible {
	outline: 3px solid var(--nak-saffron);
	outline-offset: 3px;
	border-radius: 3px;
}

.nak-wrap {
	width: min(100% - 2.5rem, var(--nak-wrap));
	margin-inline: auto;
}

.nak-section { padding-block: var(--nak-section-y); }

.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.nak-skip {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 999;
	background: var(--nak-ink);
	color: var(--nak-cream);
	padding: 0.7em 1.2em;
	border-radius: 0 0 var(--nak-radius-sm) 0;
}
.nak-skip:focus { left: 0; color: var(--nak-cream); }

/* ============================================================
   Signature motif — the spice line divider
   ============================================================ */
.nak-spiceline {
	height: 22px;
	background-image:
		linear-gradient(90deg, transparent 0 6px, var(--nak-saffron) 6px 7px, transparent 7px),
		radial-gradient(circle, var(--nak-lotus) 0 3px, transparent 4px);
	background-size: 14px 1px, 26px 22px;
	background-position: center, center;
	background-repeat: repeat-x, repeat-x;
	position: relative;
}
.nak-spiceline::before,
.nak-spiceline::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px; height: 12px;
	background: var(--nak-turmeric);
	border: 2px solid var(--nak-lotus);
	transform: translate(-50%, -50%) rotate(45deg);
}
.nak-spiceline::after {
	width: 4px; height: 4px;
	background: var(--nak-cream);
	border: none;
}

/* ============================================================
   Top bar + header
   ============================================================ */
.nak-topbar {
	background: var(--nak-ink);
	color: var(--nak-cream-deep);
	font-size: var(--nak-step--1);
	letter-spacing: 0.02em;
}
.nak-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: 0.5rem;
	min-height: 34px;
}
.nak-topbar__tag { opacity: 0.85; }
.nak-topbar__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.1rem 1.1rem; margin-left: auto; }
.nak-topbar__link { color: var(--nak-turmeric); white-space: nowrap; }
.nak-topbar__link:hover { color: var(--nak-white); }
.nak-topbar__link--tel { font-variant-numeric: tabular-nums; }

.nak-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: var(--nak-line);
	transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* The frosted background lives on a pseudo-element, NOT on .nak-header itself.
   backdrop-filter on an ancestor makes it the containing block of any
   position:fixed descendant, which shrank the mobile nav drawer (fixed, full
   height) to the header's ~70px and left the menu unusable (fixed in 1.7.0). */
.nak-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--nak-cream) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.nak-header.is-stuck { box-shadow: 0 10px 30px -20px rgba(36, 16, 5, 0.55); }

.nak-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: clamp(0.5rem, 0.4rem + 0.4vw, 0.8rem);
}

.nak-brand__lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--nak-display);
	color: var(--nak-ink);
	line-height: 1;
}
.nak-brand__namaste {
	font-size: var(--nak-step-1);
	font-style: italic;
	font-weight: 500;
	color: var(--nak-lotus);
}
.nak-brand__angkor {
	font-size: var(--nak-step-1);
	font-weight: 700;
	letter-spacing: 0.01em;
}
.nak-brand__kitchen {
	font-family: var(--nak-body);
	font-size: var(--nak-step--1);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: var(--nak-ink-soft);
	align-self: center;
}
/* Logo hook box: name row over the Indian · Khmer · Fusion switch, one frame. */
.nak-brand { flex: 0 0 auto; max-width: 100%; }
.nak-brand__box {
	display: inline-flex; flex-direction: column; max-width: 100%;
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-box-radius, 14px);
	overflow: hidden;
	box-shadow: 0 8px 20px -14px rgba(36, 16, 5, 0.55);
}
.nak-brand__top { padding: 0.42rem 0.9rem 0.42rem 0.7rem; }
.nak-brand__name { display: flex; align-items: baseline; gap: 0.35em; flex-wrap: nowrap; white-space: nowrap; color: inherit; }
.nak-brand__name:hover { color: inherit; }
.nak-brand__mark { display: block; }
.nak-brand .custom-logo-link { display: block; }
.nak-brand .custom-logo { max-height: 44px; width: auto; }
/* Tablets / narrow desktop: the box scales down so the inline menu never squeezes it. */
@media (min-width: 761px) and (max-width: 1040px) {
	.nak-brand__top { padding: 0.4rem 0.7rem 0.4rem 0.55rem; }
	.nak-brand__namaste, .nak-brand__angkor { font-size: 1.1rem; }
	.nak-brand__kitchen { font-size: 0.58rem; letter-spacing: 0.18em; }
	.nak-brand__mark { width: 26px; height: 26px; }
	.nak-nav { gap: 0.9rem; }
	.nak-menu { gap: 0.9rem; }
}
/* Phones: the whole box scales down so it always sits beside the menu button. */
@media (max-width: 480px) {
	.nak-brand__top { padding: 0.42rem 0.65rem 0.42rem 0.55rem; }
	.nak-brand__namaste, .nak-brand__angkor { font-size: 1.02rem; }
	.nak-brand__kitchen { font-size: 0.56rem; letter-spacing: 0.18em; }
	.nak-brand__mark { width: 26px; height: 26px; }
}
@media (max-width: 360px) {
	.nak-brand__namaste, .nak-brand__angkor { font-size: 0.92rem; }
	.nak-brand__kitchen { font-size: 0.5rem; letter-spacing: 0.12em; }
	.nak-brand__mark { width: 22px; height: 22px; }
}
.custom-logo { border-radius: 50%; }

/* Nav */
.nak-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nak-menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.8vw, 2rem);
	list-style: none;
	margin: 0; padding: 0;
}
.nak-menu a {
	color: var(--nak-ink);
	font-weight: 600;
	font-size: var(--nak-step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-block: 0.35em;
	position: relative;
}
.nak-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 100%; height: 2px;
	background: var(--nak-saffron);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}
.nak-menu a:hover { color: var(--nak-lotus); }
.nak-menu a:hover::after { transform: scaleX(1); }
.nak-menu .current-menu-item > a::after { transform: scaleX(1); }

.nak-nav-toggle {
	display: none;
	width: 46px; height: 46px;
	border: var(--nak-line);
	border-radius: var(--nak-radius-sm);
	background: var(--nak-white);
	cursor: pointer;
	position: relative;
	z-index: 2; /* stays above the open drawer, where it becomes the close "X" */
}
.nak-nav-toggle__bar,
.nak-nav-toggle__bar::before,
.nak-nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 22px; height: 2px;
	background: var(--nak-ink);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nak-nav-toggle__bar::before { transform: translate(-50%, -8px); }
.nak-nav-toggle__bar::after { transform: translate(-50%, 6px); }
.nak-nav-toggle[aria-expanded="true"] .nak-nav-toggle__bar { background: transparent; }
.nak-nav-toggle[aria-expanded="true"] .nak-nav-toggle__bar::before { transform: translate(-50%, -50%) rotate(45deg); }
.nak-nav-toggle[aria-expanded="true"] .nak-nav-toggle__bar::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ============================================================
   Buttons
   ============================================================ */
.nak-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--nak-body);
	font-weight: 700;
	font-size: var(--nak-step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	line-height: 1;
}
.nak-btn:hover { transform: translateY(-2px); }
.nak-btn--primary { background: var(--nak-lotus); color: var(--nak-white); }
.nak-btn--primary:hover { background: var(--nak-lotus-deep); color: var(--nak-white); }
.nak-btn--ghost {
	background: transparent;
	color: var(--nak-ink);
	border-color: var(--nak-ink);
}
.nak-btn--ghost:hover { background: var(--nak-ink); color: var(--nak-cream); }
.nak-btn--order { background: var(--nak-saffron); color: var(--nak-ink); }
.nak-btn--order:hover { background: var(--nak-turmeric); color: var(--nak-ink); }
.nak-btn--sm { padding: 0.55em 1.15em; font-size: 0.72rem; letter-spacing: 0.05em; }

/* ============================================================
   Hero — the thesis
   Cinematic sanctuary scene behind the headline. Works two ways:
   1. is-placeholder — no image uploaded yet: CSS-drawn stone
      pillars + firelight glow stand in for the render.
   2. has-image — Customizer > Hero: Cinematic Scene image is set:
      the same scene, vignette and dust layer wrap the real photo/
      render, Ken-Burns slow-zoom included. Swap the image any time
      from wp-admin; no template changes needed.
   ============================================================ */
.nak-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(26rem, 20rem + 18vw, 44rem);
	display: flex;
	align-items: center;
	color: var(--nak-cream);
}
.nak-hero__scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, #1a0e08 0%, var(--nak-ink) 55%, #150a05 100%);
	overflow: hidden;
}
.nak-hero.has-image .nak-hero__scene {
	background-image:
		linear-gradient(180deg, rgba(20, 10, 5, 0.55) 0%, rgba(20, 10, 5, 0.35) 45%, rgba(20, 10, 5, 0.82) 100%),
		var(--nak-hero-img);
	background-size: cover;
	background-position: center 30%;
	animation: nak-hero-kenburns 22s ease-in-out infinite alternate;
}
@keyframes nak-hero-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* Placeholder scene: suggested stone pillars either side, warm glow at center */
.nak-hero__pillars {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg,
			rgba(0,0,0,0) 0, rgba(0,0,0,0) 6%,
			rgba(0,0,0,0.35) 6%, rgba(0,0,0,0.35) 9%,
			rgba(0,0,0,0) 9%, rgba(0,0,0,0) 14%),
		linear-gradient(180deg, #241608 0%, #120a04 100%);
	opacity: 0.9;
}
.nak-hero__pillars::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 220, 160, 0.05) 1px, transparent 1.4px);
	background-size: 5px 5px;
	mix-blend-mode: overlay;
}
.nak-hero__glow {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 60vw;
	height: 60vw;
	max-width: 700px;
	max-height: 700px;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(242, 176, 53, 0.35) 0%, rgba(242, 176, 53, 0.12) 35%, transparent 70%);
	animation: nak-hero-flicker 5s ease-in-out infinite;
	filter: blur(2px);
}
@keyframes nak-hero-flicker {
	0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
	75%      { opacity: 0.92; transform: translate(-50%, -50%) scale(0.99); }
}

/* Drifting dust / incense particles — same layer for placeholder or real image */
.nak-hero__dust {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.nak-hero__dust span {
	position: absolute;
	bottom: -5%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--nak-turmeric);
	opacity: 0;
	animation-name: nak-hero-drift;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.nak-hero__dust span:nth-child(odd) { background: var(--nak-cream); width: 2px; height: 2px; }
/* Deterministic per-particle variety without inline styles per item */
.nak-hero__dust span:nth-child(1)  { left: 4%;  animation-duration: 16s; animation-delay: -1s; }
.nak-hero__dust span:nth-child(2)  { left: 9%;  animation-duration: 19s; animation-delay: -6s; }
.nak-hero__dust span:nth-child(3)  { left: 14%; animation-duration: 14s; animation-delay: -3s; }
.nak-hero__dust span:nth-child(4)  { left: 20%; animation-duration: 21s; animation-delay: -9s; }
.nak-hero__dust span:nth-child(5)  { left: 27%; animation-duration: 17s; animation-delay: -2s; }
.nak-hero__dust span:nth-child(6)  { left: 33%; animation-duration: 15s; animation-delay: -11s; }
.nak-hero__dust span:nth-child(7)  { left: 40%; animation-duration: 20s; animation-delay: -4s; }
.nak-hero__dust span:nth-child(8)  { left: 47%; animation-duration: 18s; animation-delay: -8s; }
.nak-hero__dust span:nth-child(9)  { left: 54%; animation-duration: 16s; animation-delay: -13s; }
.nak-hero__dust span:nth-child(10) { left: 61%; animation-duration: 22s; animation-delay: -5s; }
.nak-hero__dust span:nth-child(11) { left: 67%; animation-duration: 14s; animation-delay: -10s; }
.nak-hero__dust span:nth-child(12) { left: 73%; animation-duration: 19s; animation-delay: -7s; }
.nak-hero__dust span:nth-child(13) { left: 79%; animation-duration: 17s; animation-delay: -14s; }
.nak-hero__dust span:nth-child(14) { left: 85%; animation-duration: 21s; animation-delay: -2s; }
.nak-hero__dust span:nth-child(15) { left: 91%; animation-duration: 15s; animation-delay: -12s; }
.nak-hero__dust span:nth-child(16) { left: 96%; animation-duration: 18s; animation-delay: -6s; }
.nak-hero__dust span:nth-child(17) { left: 12%; animation-duration: 23s; animation-delay: -16s; }
.nak-hero__dust span:nth-child(18) { left: 58%; animation-duration: 24s; animation-delay: -18s; }
@keyframes nak-hero-drift {
	0%   { transform: translateY(0) translateX(0); opacity: 0; }
	10%  { opacity: 0.7; }
	50%  { transform: translateY(-45vh) translateX(2vw); opacity: 0.55; }
	90%  { opacity: 0; }
	100% { transform: translateY(-85vh) translateX(-2vw); opacity: 0; }
}

.nak-hero__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 55%),
		linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.35) 100%);
}

.nak-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(3.5rem, 2rem + 8vw, 8rem);
	max-width: 60ch;
	opacity: 0;
	transform: translateY(14px);
	animation: nak-hero-reveal 1.6s var(--nak-ease-cinematic) 0.15s forwards;
}
@keyframes nak-hero-reveal {
	to { opacity: 1; transform: translateY(0); }
}
.nak-hero__eyebrow {
	font-weight: 700;
	font-size: var(--nak-step--1);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--nak-turmeric);
	margin-bottom: 1.2rem;
}
.nak-hero__title {
	font-size: var(--nak-step-4);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: 1.3rem;
	color: var(--nak-white);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.nak-hero__line { display: block; }
.nak-hero__line--2 {
	font-style: italic;
	font-weight: 500;
	color: var(--nak-turmeric);
	padding-left: 0.6em;
}
.nak-hero__line--3 {
	color: var(--nak-saffron);
	padding-left: 1.2em;
}
.nak-hero__lede {
	font-size: var(--nak-step-1);
	color: var(--nak-stone-soft);
	max-width: 46ch;
	margin-bottom: 2rem;
}
.nak-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.nak-hero .nak-btn--ghost { color: var(--nak-white); border-color: var(--nak-stone-soft); }
.nak-hero .nak-btn--ghost:hover { background: var(--nak-white); color: var(--nak-ink); }

@media (prefers-reduced-motion: reduce) {
	.nak-hero__inner { animation: none; opacity: 1; transform: none; }
	.nak-hero__dust span,
	.nak-hero__glow,
	.nak-hero.has-image .nak-hero__scene { animation: none; }
}

/* ============================================================
   Khmer Guardian Reading — birth-date personalization
   ============================================================ */
.nak-guardian { background: var(--nak-white); border-bottom: var(--nak-line); }
.nak-guardian__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: start;
}
.nak-guardian__intro p { color: var(--nak-ink-soft); }

.nak-guardian__form { margin-top: 1.5rem; }
.nak-guardian__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.nak-guardian__fields input {
	width: 5.5rem;
	padding: 0.75em 0.9em;
	border: var(--nak-line);
	border-radius: var(--nak-radius-sm);
	background: var(--nak-cream);
	color: var(--nak-ink);
	font-family: var(--nak-body);
	font-size: var(--nak-step-0);
}
.nak-guardian__fields input:focus {
	outline: 2px solid var(--nak-saffron);
	outline-offset: 1px;
}
.nak-guardian__status {
	margin: 0.8rem 0 0;
	font-size: var(--nak-step--1);
	color: var(--nak-ink-soft);
	min-height: 1.2em;
}
.nak-guardian__status.is-error { color: var(--nak-lotus); }

.nak-guardian__result[hidden] { display: none; }
.nak-guardian__card {
	background: var(--nak-cream);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}
.nak-guardian__row {
	display: flex;
	flex-direction: column;
	padding-block: 0.85rem;
	border-bottom: 1px dashed var(--nak-stone);
}
.nak-guardian__row:first-child { padding-top: 0; }
.nak-guardian__row:last-of-type { border-bottom: none; }
.nak-guardian__row-label {
	font-size: var(--nak-step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--nak-saffron);
	font-weight: 700;
}
.nak-guardian__row-value {
	font-family: var(--nak-display);
	font-size: var(--nak-step-1);
	color: var(--nak-ink);
	margin-top: 0.2rem;
}
.nak-guardian__row-note {
	font-size: var(--nak-step--1);
	color: var(--nak-ink-soft);
	margin-top: 0.2rem;
}
.nak-guardian__disclaimer {
	margin: 1rem 0 0;
	padding-top: 0.9rem;
	border-top: var(--nak-line);
	font-size: var(--nak-step--1);
	color: var(--nak-ink-soft);
	font-style: italic;
}

@media (max-width: 780px) {
	.nak-guardian__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Story — Khmer | meeting | India
   ============================================================ */
.nak-story { background: var(--nak-white); border-bottom: var(--nak-line); }
.nak-story__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: center;
	padding-block: var(--nak-section-y);
}
.nak-story__pillar { text-align: center; }
.nak-story__word {
	display: block;
	font-family: var(--nak-display);
	font-size: var(--nak-step-2);
	font-weight: 700;
	color: var(--nak-saffron);
	margin-bottom: 0.4rem;
}
.nak-story__pillar:last-child .nak-story__word { color: var(--nak-lotus); }
.nak-story__pillar p { color: var(--nak-ink-soft); font-size: var(--nak-step--1); margin: 0; }
.nak-story__center {
	text-align: center;
	border-inline: var(--nak-line);
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.nak-story__title { font-size: var(--nak-step-2); margin-bottom: 0.7rem; }
.nak-story__center p { color: var(--nak-ink-soft); margin: 0; }

/* Reveal */
.nak-dish, .nak-story__pillar, .nak-story__center, .nak-course {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.nak-dish.is-in, .nak-story__pillar.is-in, .nak-story__center.is-in, .nak-course.is-in {
	opacity: 1;
	transform: none;
}

/* ============================================================
   Section headings
   ============================================================ */
.nak-section__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.nak-section__eyebrow {
	font-weight: 700;
	font-size: var(--nak-step--1);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nak-saffron);
	margin-bottom: 0.6rem;
}
.nak-section__title { font-size: var(--nak-step-3); }
.nak-section--stone { background: var(--nak-cream-deep); }
.nak-section__more { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ============================================================
   Dish cards + spice meter (signature)
   ============================================================ */
.nak-menu-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.nak-cols-1 { grid-template-columns: 1fr; }
.nak-cols-2 { grid-template-columns: repeat(2, 1fr); }
.nak-cols-3 { grid-template-columns: repeat(3, 1fr); }
.nak-cols-4 { grid-template-columns: repeat(4, 1fr); }

.nak-dish {
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--nak-shadow);
}
.nak-dish.is-signature { border-color: var(--nak-saffron); }
.nak-dish__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--nak-stone-soft); }
.nak-dish__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.nak-dish:hover .nak-dish__img { transform: scale(1.04); }
.nak-dish__body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.nak-dish__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.nak-dish__title { font-size: var(--nak-step-1); margin: 0; }
.nak-dish__title a { color: var(--nak-ink); }
.nak-dish__title a:hover { color: var(--nak-lotus); }
.nak-dish__price {
	font-family: var(--nak-display);
	font-weight: 700;
	color: var(--nak-lotus);
	white-space: nowrap;
	font-size: var(--nak-step-0);
}
.nak-dish__desc { color: var(--nak-ink-soft); font-size: var(--nak-step--1); margin: 0; flex: 1; }
.nak-dish__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.nak-dish__actions { margin-top: 0.3rem; }

/* Spice meter */
.nak-spice { display: inline-flex; align-items: center; gap: 4px; }
.nak-spice__dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--nak-lotus);
	display: inline-block;
}
.nak-spice__dot.is-on { background: var(--nak-lotus); }
.nak-spice--mild {
	font-size: var(--nak-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nak-stone);
}

/* Tags */
.nak-tag {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	line-height: 1.4;
}
.nak-tag--diet { background: var(--nak-stone-soft); color: var(--nak-ink-soft); }
.nak-tag--signature { background: var(--nak-saffron); color: var(--nak-ink); }

.nak-empty {
	text-align: center;
	color: var(--nak-ink-soft);
	font-style: italic;
	padding-block: 2rem;
}

/* ============================================================
   Menu archive
   ============================================================ */
.nak-menu-hero {
	background: var(--nak-ink);
	color: var(--nak-cream);
	text-align: center;
	padding-top: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.nak-menu-hero .nak-section__eyebrow { color: var(--nak-turmeric); }
.nak-menu-hero__title { color: var(--nak-cream); font-size: var(--nak-step-4); }
.nak-menu-hero__lede { color: var(--nak-stone); max-width: 52ch; margin: 0.5rem auto clamp(2rem, 4vw, 3rem); }

.nak-course { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.nak-course__title {
	font-size: var(--nak-step-2);
	color: var(--nak-ink);
	padding-bottom: 0.5rem;
	margin-bottom: 1.6rem;
	border-bottom: 2px solid var(--nak-stone);
	position: relative;
}
.nak-course__title::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 64px; height: 2px;
	background: var(--nak-lotus);
}

/* ============================================================
   Why Namaste Angkor — reasons grid
   ============================================================ */
.nak-why-us__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
}
.nak-why-us__card {
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	padding: clamp(1.2rem, 2vw, 1.6rem);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s var(--nak-ease-cinematic), transform 0.5s var(--nak-ease-cinematic);
}
.nak-why-us__card.is-in { opacity: 1; transform: none; }
.nak-why-us__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--nak-cream-deep);
	color: var(--nak-lotus);
	margin-bottom: 0.9rem;
}
.nak-why-us__title { font-size: var(--nak-step-0); margin: 0 0 0.4rem; }
.nak-why-us__text { font-size: var(--nak-step--1); color: var(--nak-ink-soft); margin: 0; }

/* ============================================================
   Beyond the Table — experience categories
   ============================================================ */
.nak-experiences__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.nak-experience-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	padding: clamp(1.2rem, 2vw, 1.6rem);
	color: var(--nak-ink);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s var(--nak-ease-cinematic), transform 0.5s var(--nak-ease-cinematic), box-shadow 0.2s ease;
}
.nak-experience-card.is-in { opacity: 1; transform: none; }
.nak-experience-card:hover { color: var(--nak-ink); box-shadow: var(--nak-shadow); }
.nak-experience-card[aria-disabled="true"] { cursor: default; opacity: 0.6; }
.nak-experience-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nak-cream-deep);
	color: var(--nak-saffron);
}
.nak-experience-card__title { font-size: var(--nak-step-0); margin: 0; }
.nak-experience-card__text { font-size: var(--nak-step--1); color: var(--nak-ink-soft); margin: 0; flex: 1; }

/* ============================================================
   Khmer Angkor Travel cross-sell (KAT Family echo system)
   ============================================================ */
.nak-travel-cross__lede { max-width: 56ch; margin: 0.8rem auto 0; text-align: center; color: var(--nak-ink-soft); }
.nak-travel-cross__grid { margin-top: clamp(2rem, 4vw, 3rem); }

.nak-travel-card {
	display: flex;
	flex-direction: column;
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	overflow: hidden;
	box-shadow: var(--nak-shadow);
	color: var(--nak-ink);
	transition: transform 0.25s var(--nak-ease-cinematic), box-shadow 0.25s ease;
}
.nak-travel-card:hover { transform: translateY(-4px); color: var(--nak-ink); box-shadow: 0 24px 48px -24px rgba(36, 16, 5, 0.55); }
.nak-travel-card__media {
	aspect-ratio: 4 / 3;
	background: var(--nak-stone-soft) var(--nak-travel-img, none) center / cover no-repeat;
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 0.8rem;
}
.nak-travel-card__type { position: static; }
.nak-travel-card__body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.nak-travel-card__title { font-size: var(--nak-step-1); margin: 0; }
.nak-travel-card__excerpt { color: var(--nak-ink-soft); font-size: var(--nak-step--1); margin: 0; flex: 1; }
.nak-travel-card__cta { font-weight: 700; font-size: var(--nak-step--1); color: var(--nak-lotus); margin-top: 0.4rem; }
.nak-travel-card:hover .nak-travel-card__cta { color: var(--nak-lotus-deep); }

/* ============================================================
   Reservation band
   ============================================================ */
.nak-reserve-band {
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(232, 135, 30, 0.25), transparent 55%),
		var(--nak-lotus);
	color: var(--nak-cream);
	padding-block: var(--nak-section-y);
}
.nak-reserve { text-align: center; max-width: 46ch; margin-inline: auto; }
.nak-reserve__title { color: var(--nak-cream); font-size: var(--nak-step-3); }
.nak-reserve__text { color: var(--nak-cream-deep); font-size: var(--nak-step-1); }
.nak-reserve__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 1.5rem; }
.nak-reserve-band .nak-btn--primary { background: var(--nak-cream); color: var(--nak-lotus-deep); }
.nak-reserve-band .nak-btn--primary:hover { background: var(--nak-white); }
.nak-reserve-band .nak-btn--ghost { border-color: var(--nak-cream); color: var(--nak-cream); }
.nak-reserve-band .nak-btn--ghost:hover { background: var(--nak-cream); color: var(--nak-lotus-deep); }

/* ============================================================
   Reservation planner
   ============================================================ */
.nak-planner__form {
	max-width: 640px;
	margin-inline: auto;
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	box-shadow: var(--nak-shadow);
	padding: clamp(1.4rem, 3vw, 2.2rem);
}
.nak-planner__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-bottom: 1.4rem; }
.nak-planner__fields label,
.nak-planner__request label { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--nak-step--1); font-weight: 700; color: var(--nak-ink-soft); }
.nak-planner__fields input,
.nak-planner__request-fields input,
.nak-planner textarea {
	font-family: var(--nak-body);
	font-size: var(--nak-step-0);
	padding: 0.6em 0.8em;
	border: var(--nak-line);
	border-radius: var(--nak-radius-sm);
	background: var(--nak-cream);
	color: var(--nak-ink);
}
.nak-planner__summary { font-weight: 700; color: var(--nak-lotus); margin: 0 0 1rem; }
.nak-planner__choices { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }
.nak-planner__request { border-top: var(--nak-line); padding-top: 1.4rem; display: grid; gap: 0.7rem; }
.nak-planner__request-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.nak-planner__status { font-size: var(--nak-step--1); color: var(--nak-lotus); min-height: 1.4em; margin: 0; }
.nak-planner__status.is-error { color: #b3261e; }
.nak-planner__back {
	background: none;
	border: none;
	color: var(--nak-ink-soft);
	font-size: var(--nak-step--1);
	text-decoration: underline;
	cursor: pointer;
	padding: 0.6rem 0 0;
}

/* ============================================================
   Single / page / prose
   ============================================================ */
.nak-page__head { padding-block: clamp(2.5rem, 4vw, 4rem) 1.5rem; text-align: center; }
.nak-page__title { font-size: var(--nak-step-3); }
.nak-single__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: var(--nak-step--1);
	font-weight: 700;
	color: var(--nak-saffron);
	margin-bottom: 0.6rem;
}
.nak-single__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 0.8rem;
}
.nak-single__price {
	font-family: var(--nak-display);
	font-weight: 700;
	font-size: var(--nak-step-1);
	color: var(--nak-lotus);
}
.nak-single__media { margin-block: 1.5rem; }
.nak-single__media img { border-radius: var(--nak-radius); box-shadow: var(--nak-shadow); }
.nak-single__order { text-align: center; padding-bottom: var(--nak-section-y); }

.nak-prose {
	max-width: 68ch;
	margin-inline: auto;
	padding-bottom: var(--nak-section-y);
	font-size: var(--nak-step-0);
	color: var(--nak-ink-soft);
}
.nak-prose h2 { font-size: var(--nak-step-2); margin-top: 1.6em; }
.nak-prose h3 { font-size: var(--nak-step-1); margin-top: 1.4em; }
.nak-prose a { text-decoration: underline; text-underline-offset: 3px; }
.nak-prose img { border-radius: var(--nak-radius-sm); margin-block: 1.4em; }
.nak-prose blockquote {
	margin: 1.6em 0;
	padding: 0.4em 0 0.4em 1.4em;
	border-left: 4px solid var(--nak-saffron);
	font-family: var(--nak-display);
	font-style: italic;
	font-size: var(--nak-step-1);
	color: var(--nak-ink);
}

/* Blog list */
.nak-post-list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nak-post {
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	padding: 1.4rem;
}
.nak-post__media img { border-radius: var(--nak-radius-sm); margin-bottom: 1rem; }
.nak-post__title { font-size: var(--nak-step-1); }
.nak-post__title a { color: var(--nak-ink); }
.nak-post__excerpt { color: var(--nak-ink-soft); font-size: var(--nak-step--1); margin-bottom: 1rem; }

/* Pagination */
.pagination, .nav-links {
	display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 3rem;
}
.pagination .page-numbers {
	display: inline-flex;
	min-width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border: var(--nak-line);
	border-radius: var(--nak-radius-sm);
	color: var(--nak-ink);
	font-weight: 700;
}
.pagination .page-numbers.current { background: var(--nak-lotus); color: var(--nak-cream); border-color: var(--nak-lotus); }

/* ============================================================
   Footer
   ============================================================ */
.nak-footer { background: var(--nak-ink); color: var(--nak-stone); }
.nak-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block: clamp(3rem, 5vw, 4.5rem);
}
.nak-footer__lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--nak-cream);
	margin-bottom: 1rem;
}
.nak-footer__lockup:hover { color: var(--nak-turmeric); }
.nak-footer__lotus { color: var(--nak-turmeric); flex-shrink: 0; }
.nak-footer__wordmark {
	font-family: var(--nak-display);
	font-size: var(--nak-step-1);
	font-weight: 700;
	line-height: 1.15;
}
.nak-footer__tagline {
	font-size: var(--nak-step--1);
	line-height: 1.6;
	max-width: 32ch;
	margin: 0 0 1.6rem;
}
.nak-footer__head {
	font-family: var(--nak-body);
	font-size: var(--nak-step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--nak-cream);
	margin-bottom: 0.8rem;
}
.nak-footer__head--follow { margin-bottom: 0.9rem; }
.nak-footer__col p { margin: 0 0 0.5rem; font-size: var(--nak-step--1); }
.nak-footer__col a { color: var(--nak-stone); }
.nak-footer__col a:hover { color: var(--nak-turmeric); }
.nak-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--nak-step--1); }

/* Social icon row */
.nak-social { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.nak-social__link {
	--nak-social-bg: var(--nak-lotus);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nak-social-bg);
	color: var(--nak-white);
	flex-shrink: 0;
	transition: transform 0.18s ease, filter 0.18s ease;
}
.nak-social__link:hover { color: var(--nak-white); transform: translateY(-2px); filter: brightness(1.08); }

.nak-footer__bar { border-top: 1px solid rgba(201, 187, 160, 0.25); }
.nak-footer__bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.8rem;
	padding-block: 1.2rem;
	font-size: var(--nak-step--1);
}
.nak-footer__nav { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; }
.nak-footer__nav a { color: var(--nak-stone); }
.nak-footer__madewith { color: var(--nak-stone); }

/* KAT Family footer column */
.nak-footer__links-umbrella a { display: inline-flex; align-items: center; gap: 0.5rem; }
.nak-tag--umbrella { background: var(--nak-saffron); color: var(--nak-ink); }

/* Back-to-top */
.nak-back-to-top {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 99989;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--nak-lotus);
	color: var(--nak-white);
	box-shadow: 0 6px 18px rgba(36, 16, 5, 0.35);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nak-back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.nak-back-to-top:hover { filter: brightness(1.1); }
@media (max-width: 480px) { .nak-back-to-top { left: 12px; bottom: 12px; } }

/* Widgets */
.widget-title { color: var(--nak-cream); font-size: var(--nak-step-1); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
	.nak-story__grid { grid-template-columns: 1fr; text-align: center; }
	.nak-story__center { border-inline: 0; border-block: var(--nak-line); padding-block: 1.6rem; }
	.nak-cols-3, .nak-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.nak-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.nak-why-us__grid { grid-template-columns: repeat(2, 1fr); }
	.nak-planner__fields { grid-template-columns: 1fr; }
	.nak-planner__request-fields { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.nak-nav-toggle { display: inline-flex; }
	.nak-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(84vw, 340px);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.4rem;
		background: var(--nak-cream);
		border-left: var(--nak-line);
		padding: 6rem 2rem 2rem;
		overflow-y: auto;
		z-index: 1;
		transform: translateX(100%);
		transition: transform 0.28s ease;
		box-shadow: -20px 0 50px -30px rgba(36, 16, 5, 0.6);
	}
	.nak-nav.is-open { transform: none; }
	.nak-menu { flex-direction: column; align-items: flex-start; gap: 0.3rem; width: 100%; }
	.nak-menu a { font-size: var(--nak-step-0); padding-block: 0.6em; }
	.nak-nav__cta { margin-top: 1rem; }
	.nak-topbar__tag { display: none; }
	.nak-topbar__links { margin-inline: auto; justify-content: center; gap: 0.1rem 0.9rem; }
}

@media (max-width: 540px) {
	.nak-cols-2, .nak-cols-3, .nak-cols-4 { grid-template-columns: 1fr; }
	.nak-footer__grid { grid-template-columns: 1fr; }
	.nak-hero__line--2 { padding-left: 0.3em; }
	.nak-hero__line--3 { padding-left: 0.6em; }
	.nak-why-us__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Motion + WooCommerce polish
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.nak-dish, .nak-story__pillar, .nak-story__center, .nak-course { opacity: 1; transform: none; }
}

.woocommerce span.onsale { background: var(--nak-lotus); color: var(--nak-cream); }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt {
	background: var(--nak-lotus) !important;
	color: var(--nak-cream) !important;
	border-radius: 999px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--nak-lotus-deep) !important; }

/* ============================================================
   Homepage feature — Siem Reap map band (inc/map-feature.php)
   Two-column promo linking to the district map page: copy on the
   left, a small map motif (two blobs + the dashed NR6 line) on the
   right that nudges on hover. Motion is disabled under reduced-motion.
   ============================================================ */
.nak-map-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--nak-gap);
	align-items: center;
}
.nak-map-feature__blurb {
	max-width: 46ch;
	margin: 0.75rem 0 1.5rem;
	color: var(--nak-ink-soft);
	line-height: 1.6;
}
.nak-map-feature__actions { margin: 0; }

.nak-map-feature__motif {
	display: block;
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	box-shadow: var(--nak-shadow);
	padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}
.nak-map-feature__motif svg { width: 100%; height: auto; display: block; }
.nak-map-feature__blob {
	fill: var(--nak-cream-deep);
	stroke: var(--nak-stone);
	stroke-width: 1.5;
	transition: fill 0.25s ease;
}
.nak-map-feature__motif:hover .nak-map-feature__blob { fill: var(--nak-stone-soft); }
.nak-map-feature__road {
	fill: none;
	stroke: var(--nak-lotus);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 5 5;
	animation: nak-map-feature-march 1.4s linear infinite;
}
@keyframes nak-map-feature-march { to { stroke-dashoffset: -20; } }
.nak-map-feature__stop { fill: var(--nak-turmeric); }
.nak-map-feature__stop--home { fill: var(--nak-lotus); }
.nak-map-feature__road-label {
	font-family: var(--nak-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	fill: var(--nak-lotus);
	text-anchor: middle;
}

@media (max-width: 720px) {
	.nak-map-feature__grid { grid-template-columns: 1fr; }
	.nak-map-feature__motif { order: -1; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
	.nak-map-feature__road { animation: none; }
}

/* ============================================================
   KAT Family hub — "Under the umbrella" section
   (inc/sections.php · nak_render_watch_follow_section)
   One merged grid: three OS utility tiles (Calendar / Map /
   Menu & order) sit alongside a Detail Brand map+address+link
   card per sister kitchen (GEO/AEO/SEM — see inc/kat-family.php),
   closed out by a small signal line instead of a mid-section
   divider.
   ============================================================ */
.nak-brand-os__lede { margin: 0.6rem 0 0; max-width: 62ch; }
.nak-brand-os__hook {
	margin: 0.5rem 0 0;
	max-width: 62ch;
	font-family: var(--nak-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
	color: var(--nak-lotus-deep);
}

/* Design Frame — a bordered panel around the Hook Layer's header
   (eyebrow / title / lede / hook), giving those four lines a distinct
   "frame" instead of sitting as plain centered text. A saffron→turmeric
   accent bar overlaps the top edge like a tab, and a small diamond
   ornament divides the lede from the hook line — a light nod to the
   spice-meter motif used elsewhere in the theme. */
.nak-brand-os__frame {
	position: relative;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(2rem, 1.5rem + 2vw, 3.2rem) clamp(1.4rem, 1rem + 2vw, 3rem);
	background: linear-gradient(180deg, var(--nak-white) 0%, var(--nak-cream-deep) 100%);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	box-shadow: var(--nak-shadow);
}
.nak-brand-os__frame::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(56px, 8vw, 96px);
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nak-saffron), var(--nak-turmeric));
}
.nak-brand-os__frame .nak-brand-os__lede,
.nak-brand-os__frame .nak-brand-os__hook {
	margin-left: auto;
	margin-right: auto;
}
.nak-brand-os__frame .nak-brand-os__hook {
	margin-top: 1.1rem;
	padding-top: 1rem;
}
.nak-brand-os__frame .nak-brand-os__hook::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 auto 0.9rem;
	background: var(--nak-saffron);
	transform: rotate(45deg);
}

.nak-brand-os__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--nak-gap);
	margin-top: var(--nak-gap);
}

.nak-brand-os__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: var(--nak-white);
	border: var(--nak-line);
	border-top: 3px solid var(--nak-saffron);
	border-radius: var(--nak-radius);
	box-shadow: var(--nak-shadow);
	padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	text-decoration: none;
	color: var(--nak-ink);
	transition: transform 0.18s ease, border-color 0.18s ease;
}
.nak-brand-os__tile:hover { transform: translateY(-4px); border-color: var(--nak-saffron); }
.nak-brand-os__tile:focus-visible { outline: 2px solid var(--nak-lotus); outline-offset: 3px; }
.nak-brand-os__eyebrow {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nak-lotus);
}
.nak-brand-os__title {
	font-family: var(--nak-display);
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.1;
}
.nak-brand-os__note { font-size: 0.88rem; line-height: 1.5; color: var(--nak-ink-soft); }
.nak-brand-os__go {
	margin-top: 0.35rem;
	font-weight: 700;
	color: var(--nak-lotus);
	transition: transform 0.18s ease;
}
.nak-brand-os__tile:hover .nak-brand-os__go { transform: translateX(4px); }

.nak-brand-os__detail-card {
	display: flex;
	flex-direction: column;
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	box-shadow: var(--nak-shadow);
	overflow: hidden;
}
.nak-brand-os__detail-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--nak-cream-deep);
}
.nak-brand-os__detail-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.nak-brand-os__detail-body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
	flex: 1;
}
.nak-brand-os__detail-name {
	font-family: var(--nak-display);
	font-weight: 600;
	font-size: 1.1rem;
	margin: 0;
}
.nak-brand-os__detail-tagline { font-size: 0.88rem; color: var(--nak-ink-soft); margin: 0; }
.nak-brand-os__detail-address {
	font-size: 0.8rem;
	color: var(--nak-stone);
	margin: 0;
}
.nak-brand-os__detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 0.6rem;
}
.nak-brand-os__detail-card--umbrella {
	background: linear-gradient(155deg, var(--nak-ink) 0%, var(--nak-lotus-deep) 78%, var(--nak-lotus) 100%);
	color: var(--nak-cream);
	border-color: var(--nak-lotus-deep);
}
/* Text legibility fix — the global `h1, h2, h3, h4 { color: var(--nak-ink) }`
   rule (line ~92) sets color directly on every heading element, and a direct
   rule always wins over an inherited value no matter its specificity. That
   silently pulled this card's <h3> brand name back to near-black ink on top
   of the dark maroon/ink gradient background, making "Khmer Angkor Travel"
   almost invisible and bleeding into the saffron tag above it. Restore the
   light color explicitly on every text node inside the umbrella card so
   nothing here can be re-darkened by a more general rule elsewhere. */
.nak-brand-os__detail-card--umbrella .nak-brand-os__detail-name { color: var(--nak-cream); }
.nak-brand-os__detail-card--umbrella .nak-brand-os__detail-tagline { color: var(--nak-stone-soft); }
.nak-brand-os__detail-card--umbrella .nak-brand-os__feature-title { color: var(--nak-cream); }
.nak-brand-os__detail-card--umbrella .nak-btn--ghost { border-color: var(--nak-stone-soft); color: var(--nak-cream); }
.nak-brand-os__detail-card--umbrella .nak-btn--ghost:hover { background: var(--nak-cream); color: var(--nak-ink); }

/* ------------------------------------------------------------
   Premium redesign of the Hook Menu (umbrella marketplace card).
   A gold hairline frame, a soft top glow, a menu-card style icon
   row for the two feature links, and a gilded "Book now" pill —
   reads like a restaurant's own printed table-tent, not a plain
   directory tile.
   ------------------------------------------------------------ */
.nak-brand-os__detail-card--premium {
	position: relative;
	/* Establishes a stacking context so the watermark's negative
	   z-index (below) is contained to this card — it sits behind this
	   card's own content but can't slip behind the section around it. */
	z-index: 0;
	border: 1px solid rgba(242, 176, 53, 0.35);
	border-radius: calc(var(--nak-radius) + 4px);
	box-shadow: 0 30px 60px -30px rgba(20, 8, 4, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	/* Crisp text: this card's copy sits on a photographic-strength dark
	   gradient, where default subpixel/grayscale hinting can look soft.
	   Force antialiased smoothing + optimizeLegibility across every text
	   node in the card so headline, tagline, and note text stay sharp at
	   every size instead of blurring into the background. */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.nak-brand-os__detail-card--premium::after {
	/* accent tab, echoing the saffron→turmeric bar on the section's
	   header frame (.nak-brand-os__frame::before) so the two panels
	   read as one family */
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(48px, 7vw, 84px);
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--nak-saffron), var(--nak-turmeric));
	z-index: 2;
}
/* Signature line-art — a fusion thali (curry bowl, rice, naan, chili)
   inside a Khmer carving-style dotted ring. Sent fully to the
   background: centered behind the whole card at low opacity with a
   negative z-index, instead of pinned in a corner that copy had to
   reserve padding to avoid. Text now lays out freely — nothing to
   dodge, since the watermark sits behind it, not beside it. Clipped
   by the card's own overflow: hidden (.nak-brand-os__detail-card), so
   it can never bleed past the card edge. */
.nak-brand-os__art {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nak-turmeric);
	opacity: 0.07;
	pointer-events: none;
	z-index: -1;
}
.nak-brand-os__art svg { width: min(72%, 240px); height: min(72%, 240px); display: block; }
@media (max-width: 620px) {
	.nak-brand-os__art svg { width: min(66%, 190px); height: min(66%, 190px); }
}
@media (max-width: 480px) {
	.nak-brand-os__art { opacity: 0.06; }
	.nak-brand-os__art svg { width: min(62%, 160px); height: min(62%, 160px); }
}
.nak-brand-os__detail-card--premium::before {
	/* soft gold glow, top-right, like light catching gilt trim */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 70% at 100% 0%, rgba(242, 176, 53, 0.22) 0%, transparent 55%);
	pointer-events: none;
}
.nak-brand-os__detail-card--premium .nak-brand-os__detail-body {
	position: relative;
	gap: 0;
	padding: clamp(0.9rem, 0.78rem + 0.5vw, 1.25rem);
}
/* Tag, brand name, and tagline flow together as one row (tag →
   name → tagline) instead of three stacked lines, wrapping onto
   another line only if the card is too narrow to fit them. Framed as
   its own bordered panel — echoing the section header's own
   .nak-brand-os__frame treatment, inverted for this card's dark
   background — so the text reads as a distinct block sitting above
   the watermark rather than loose copy on the gradient. */
.nak-brand-os__premium-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.65rem;
	row-gap: 0.25rem;
	margin-bottom: 0.85rem;
	padding: 0.95rem 1.15rem;
	border: 1px solid rgba(255, 253, 248, 0.16);
	border-radius: calc(var(--nak-radius) - 6px);
	background: rgba(255, 253, 248, 0.05);
}
.nak-brand-os__premium-head .nak-tag--umbrella {
	margin: 0;
	flex: none;
	/* fluid: scales with viewport instead of a fixed 0.72rem, matching
	   the theme's --nak-step clamp() convention used elsewhere */
	font-size: clamp(0.76rem, 0.7rem + 0.25vw, 0.86rem);
}
.nak-brand-os__premium-head .nak-brand-os__detail-name { margin: 0; font-size: clamp(1.35rem, 1.22rem + 0.5vw, 1.7rem); }
.nak-brand-os__premium-head .nak-brand-os__detail-tagline {
	margin: 0;
	font-style: italic;
	font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem);
	opacity: 0.85;
}
.nak-brand-os__premium-head .nak-brand-os__detail-tagline::before {
	content: "\2013"; /* en dash separator from the name when on the same row */
	margin-right: 0.4rem;
}

/* Two full-width rows instead of a two-up grid — each feature link
   (Find us / Map, From the kitchen / Menu & order) gets its own full
   row, so title and note have real room instead of squeezing into a
   half-width column. */
.nak-brand-os__umbrella-features {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.6rem;
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, transparent, rgba(242, 176, 53, 0.55), transparent) 1;
}
.nak-brand-os__feature {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	/* right padding clears the trailing arrow, now pinned to the row's
	   edge instead of paired inline with the eyebrow */
	padding: 0.55rem 2.5rem 0.55rem 0.65rem;
	border-radius: calc(var(--nak-radius) - 4px);
	background: rgba(255, 253, 248, 0.05);
	border: 1px solid rgba(255, 253, 248, 0.09);
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.nak-brand-os__feature:hover,
.nak-brand-os__feature:focus-visible {
	transform: translateX(3px);
	background: rgba(255, 253, 248, 0.09);
	border-color: rgba(242, 176, 53, 0.45);
}
.nak-brand-os__feature-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.05rem;
	height: 2.05rem;
	border-radius: 50%;
	background: rgba(242, 176, 53, 0.14);
	border: 1px solid rgba(242, 176, 53, 0.45);
	color: var(--nak-turmeric);
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}
.nak-brand-os__feature-icon svg { width: 1.15rem; height: 1.15rem; shape-rendering: geometricPrecision; }
.nak-brand-os__feature-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.nak-brand-os__feature-head { display: block; }
.nak-brand-os__feature .nak-brand-os__eyebrow {
	color: var(--nak-saffron);
	/* fluid override of the shared .nak-brand-os__eyebrow's fixed
	   0.7rem, scoped to this card only */
	font-size: clamp(0.64rem, 0.6rem + 0.2vw, 0.72rem);
}
.nak-brand-os__feature .nak-brand-os__go {
	/* pinned to the row's trailing edge, vertically centered, instead
	   of sitting inline beside the eyebrow */
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	font-size: clamp(0.74rem, 0.7rem + 0.2vw, 0.82rem);
	color: var(--nak-saffron);
	transition: transform 0.18s ease;
}
.nak-brand-os__feature-title {
	font-family: var(--nak-display);
	font-weight: 700;
	font-size: clamp(0.82rem, 0.77rem + 0.25vw, 0.92rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
}
.nak-brand-os__feature .nak-brand-os__note {
	color: #f0e6d2;
	font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.76rem);
	line-height: 1.3;
}
.nak-brand-os__feature:hover .nak-brand-os__go,
.nak-brand-os__feature:focus-visible .nak-brand-os__go { transform: translateY(-50%) translateX(4px); }
.nak-brand-os__feature:focus-visible { outline: 2px solid var(--nak-saffron); outline-offset: 3px; }

.nak-brand-os__detail-actions--premium { justify-content: center; margin-top: 0.7rem; padding-top: 0; }
.nak-btn--premium {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.2rem;
	/* fluid override of .nak-btn--sm's fixed 0.72rem, scoped to this
	   button only so other sibling-card buttons using --sm elsewhere
	   are unaffected */
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	background: linear-gradient(135deg, var(--nak-turmeric) 0%, var(--nak-saffron) 100%);
	color: var(--nak-ink) !important;
	border: 0;
	box-shadow: 0 14px 28px -14px rgba(242, 176, 53, 0.65);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nak-btn--premium:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -14px rgba(242, 176, 53, 0.8);
}
.nak-btn--premium .nak-brand-os__go { color: var(--nak-ink); }

/* The feature list is a single column by default now (two full-width
   rows), so no mid-tier column-collapse is needed — just tighten the
   row gap a touch as cards narrow. */
@media (max-width: 620px) {
	.nak-brand-os__umbrella-features { gap: 0.4rem; }
}

@media (max-width: 480px) {
	.nak-brand-os__premium-head { padding: 0.8rem 0.95rem; }
	/* Tag + name still share a row here; the full sentence-length
	   tagline reliably won't fit alongside them at this width, so
	   give it its own line and drop the inline dash rather than let
	   it wrap mid-row with a dangling separator. */
	.nak-brand-os__premium-head .nak-brand-os__detail-tagline {
		flex-basis: 100%;
		margin-top: 0.25rem;
	}
	.nak-brand-os__premium-head .nak-brand-os__detail-tagline::before {
		content: "";
		margin-right: 0;
	}
	.nak-brand-os__feature { padding: 0.5rem 2.1rem 0.5rem 0.55rem; gap: 0.5rem; }
	.nak-brand-os__feature .nak-brand-os__go { right: 0.6rem; }
}


/* ============================================================
   Tour reviews (inc/reviews.php) + card rating badge
   Traveller star ratings tied to a marketplace tour reference.
   Scoped under .nak-tour-reviews / .nak-travel-card so nothing
   else in the theme is affected.
   ============================================================ */

/* --- Aggregate rating badge on a cross-sell card --- */
.nak-travel-card__rating {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 0.5rem;
	font-size: var(--nak-step--1);
	line-height: 1;
}
.nak-travel-card__stars { color: var(--nak-turmeric); letter-spacing: 0.05em; }
.nak-travel-card__rating-value { font-weight: 700; color: var(--nak-ink); }
.nak-travel-card__rating-count { color: var(--nak-ink-soft); }

/* --- Reviews section --- */
.nak-tour-reviews .nak-review-summary {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
}
.nak-review-summary__value {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-size: var(--nak-step-2);
	font-weight: 600;
	color: var(--nak-ink);
	line-height: 1;
}
.nak-review-summary__stars { color: var(--nak-turmeric); font-size: var(--nak-step-1); letter-spacing: 0.08em; }
.nak-review-summary__count { font-size: var(--nak-step--1); color: var(--nak-ink-soft); }

.nak-review-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.nak-review-item {
	background: var(--nak-white);
	border: 1px solid var(--nak-stone-soft);
	border-radius: var(--nak-radius-sm);
	padding: 1rem 1.15rem;
}
.nak-review-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.4rem;
}
.nak-review-item__author { font-weight: 700; color: var(--nak-ink); }
.nak-review-item__stars { color: var(--nak-turmeric); letter-spacing: 0.05em; }
.nak-review-item__date { margin-left: auto; font-size: var(--nak-step--1); color: var(--nak-ink-soft); }
.nak-review-item__body { margin: 0; color: var(--nak-ink-soft); }

.nak-review-notice {
	border-radius: var(--nak-radius-sm);
	padding: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	font-size: var(--nak-step--1);
}
.nak-review-notice--ok { background: #eef6ef; color: #14432e; border: 1px solid #bcd9c2; }
.nak-review-notice--err { background: #fbecef; color: var(--nak-lotus-deep); border: 1px solid #edc3cd; }

/* --- Write-a-review form --- */
.nak-review-form-wrap {
	background: var(--nak-cream);
	border: 1px solid var(--nak-stone-soft);
	border-radius: var(--nak-radius);
	padding: 1.5rem;
	max-width: 40rem;
}
.nak-review-form-title { margin: 0 0 1rem; font-size: var(--nak-step-1); }
.nak-review-field { margin-bottom: 1rem; }
.nak-review-label { display: block; font-weight: 700; margin-bottom: 0.35rem; color: var(--nak-ink); }
.nak-review-input {
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--nak-stone);
	border-radius: var(--nak-radius-sm);
	background: var(--nak-white);
	font: inherit;
	color: var(--nak-ink);
}
.nak-review-input:focus {
	outline: 2px solid var(--nak-saffron);
	outline-offset: 1px;
	border-color: var(--nak-saffron);
}
.nak-review-moderation-note { margin: 0.75rem 0 0; font-size: var(--nak-step--1); color: var(--nak-ink-soft); }

/* Accessible star radio input — a right-to-left flex row so the
   CSS sibling selector can light up the hovered star and the ones
   before it, without any JavaScript. */
.nak-star-input {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.15rem;
}
.nak-star-input__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.nak-star-input__star {
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--nak-stone);
	transition: color 0.12s ease;
}
.nak-star-input__radio:checked ~ .nak-star-input__star,
.nak-star-input__star:hover,
.nak-star-input__star:hover ~ .nak-star-input__star {
	color: var(--nak-turmeric);
}
.nak-star-input__radio:focus-visible + .nak-star-input__star {
	outline: 2px solid var(--nak-saffron);
	outline-offset: 2px;
}

/* Honeypot — visually hidden but present for bots to trip on. */
.nak-review-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================
   Featured Products — "Food & Experiences" feature front page
   (inc/featured-products.php)
   ============================================================ */
.nak-feat__head { max-width: 640px; margin-inline: auto; }
.nak-feat__lede { color: var(--nak-ink-soft); }

.nak-feat__tabs { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.nak-feat__tab-input {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.nak-feat__tablist {
	display: inline-flex;
	gap: 0.4rem;
	padding: 0.35rem;
	background: var(--nak-cream-deep);
	border: var(--nak-line);
	border-radius: 999px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.nak-feat__tab-label {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.6em 1.25em;
	border-radius: 999px;
	font-family: var(--nak-display);
	font-size: var(--nak-step--1);
	font-weight: 600;
	color: var(--nak-ink-soft);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
	user-select: none;
}
.nak-feat__tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	padding: 0.05em 0.4em;
	border-radius: 999px;
	background: var(--nak-stone-soft);
	color: var(--nak-ink-soft);
	font-family: var(--nak-body);
	font-size: 0.7rem;
	font-weight: 700;
}
/* Each radio input drives its own label + panel via general-sibling
   selectors (the radios sit as siblings ahead of the tablist/panels). */
.nak-feat__panel { display: none; }
#nak-feat-tab-food:checked ~ .nak-feat__tablist label[for="nak-feat-tab-food"],
#nak-feat-tab-experience:checked ~ .nak-feat__tablist label[for="nak-feat-tab-experience"] {
	background: var(--nak-lotus);
	color: var(--nak-white);
}
#nak-feat-tab-food:checked ~ #nak-feat-panel-food,
#nak-feat-tab-experience:checked ~ #nak-feat-panel-experience {
	display: block;
}
.nak-feat__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(1.2rem, 2.5vw, 2rem);
	align-items: stretch;
}
.nak-feat__shortlist {
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 2vw, 1.25rem);
}

.nak-feat-card {
	display: flex;
	color: var(--nak-ink);
	background: var(--nak-white);
	border: var(--nak-line);
	border-radius: var(--nak-radius);
	overflow: hidden;
	transition: transform 0.22s var(--nak-ease-cinematic), box-shadow 0.22s var(--nak-ease-cinematic);
}
.nak-feat-card:hover { transform: translateY(-3px); color: var(--nak-ink); box-shadow: var(--nak-shadow); }

.nak-feat-card__media {
	position: relative;
	flex-shrink: 0;
	background-color: var(--nak-stone-soft);
	background-image: linear-gradient(180deg, rgba(36,16,5,0) 55%, rgba(36,16,5,0.55) 100%), var(--nak-feat-img, none);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0.65rem;
}
.nak-feat-card__type {
	padding: 0.3em 0.75em;
	border-radius: 999px;
	background: rgba(251, 244, 230, 0.92);
	color: var(--nak-ink);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.nak-feat-card__status {
	padding: 0.3em 0.75em;
	border-radius: 999px;
	background: var(--nak-lotus);
	color: var(--nak-white);
	font-size: 0.68rem;
	font-weight: 700;
}

.nak-feat-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.1rem, 2vw, 1.5rem);
	flex: 1;
}
.nak-feat-card__title {
	font-family: var(--nak-display);
	font-weight: 600;
	color: var(--nak-ink);
	line-height: 1.2;
}
.nak-feat-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	font-size: var(--nak-step--1);
}
.nak-feat-card__rating { display: inline-flex; align-items: center; gap: 0.4em; }
.nak-feat-card__stars { color: var(--nak-turmeric); letter-spacing: 0.05em; }
.nak-feat-card__rating-count { color: var(--nak-ink-soft); }
.nak-feat-card__price { letter-spacing: 0.02em; font-weight: 700; }
.nak-feat-card__price-fill { color: var(--nak-lotus); }
.nak-feat-card__price-empty { color: var(--nak-stone); }
.nak-feat-card__excerpt { color: var(--nak-ink-soft); font-size: var(--nak-step--1); flex: 1; }
.nak-feat-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	font-weight: 700;
	font-size: var(--nak-step--1);
	color: var(--nak-lotus);
}
.nak-feat-card:hover .nak-feat-card__cta { color: var(--nak-lotus-deep); }

/* Spotlight variant — the large primary pick */
.nak-feat-card--spotlight {
	flex-direction: column;
	height: 100%;
}
.nak-feat-card--spotlight .nak-feat-card__media { aspect-ratio: 16 / 10; padding: 1rem; }
.nak-feat-card--spotlight .nak-feat-card__title { font-size: var(--nak-step-2); }
.nak-feat-card--spotlight .nak-feat-card__body { padding: clamp(1.3rem, 2.5vw, 1.9rem); gap: 0.65rem; }

/* Shortlist variant — compact row */
.nak-feat-card--shortlist { flex-direction: row; flex: 1; }
.nak-feat-card--shortlist .nak-feat-card__media {
	width: clamp(96px, 14vw, 132px);
	aspect-ratio: auto;
	align-items: flex-end;
	padding: 0.5rem;
}
.nak-feat-card--shortlist .nak-feat-card__type { display: none; }
.nak-feat-card--shortlist .nak-feat-card__body { padding: 0.85rem 1.1rem; gap: 0.35rem; }
.nak-feat-card--shortlist .nak-feat-card__title { font-size: var(--nak-step-0); }

@media (max-width: 900px) {
	.nak-feat__grid { grid-template-columns: 1fr; }
	.nak-feat__shortlist { flex-direction: row; overflow-x: auto; padding-bottom: 0.25rem; scroll-snap-type: x proximity; }
	.nak-feat-card--shortlist { flex-direction: column; min-width: 220px; scroll-snap-align: start; }
	.nak-feat-card--shortlist .nak-feat-card__media { width: auto; aspect-ratio: 16 / 9; }
	.nak-feat-card--shortlist .nak-feat-card__type { display: inline-block; }
}

@media (max-width: 540px) {
	.nak-feat-card--spotlight .nak-feat-card__title { font-size: var(--nak-step-1); }
	.nak-feat__tablist { width: 100%; }
	.nak-feat__tab-label { flex: 1; justify-content: center; }
}