/* ==========================================================================
   HuaHinExpats — Design Tokens (MVP Spec §3)
   Single source of truth for colour, type, spacing.
   Loaded BEFORE main.css so existing rules still resolve via aliases below.
   ========================================================================== */

:root {

	/* ---- Colour · §3.1 --------------------------------------------------- */
	/* Base — warm neutral system */
	--hh-white:        #FAF8F5;  /* page bg */
	--hh-stone:        #EFEAE3;  /* card / section bg */
	--hh-mineral:      #D8D2C7;  /* borders, dividers */
	--hh-mist:         #8A8680;  /* secondary text */
	--hh-charcoal:     #1F1D1B;  /* primary text */

	/* Accent — restrained, coastal, muted */
	--hh-accent:       #4A6670;  /* muted slate-teal, primary CTA */
	--hh-accent-deep:  #334B54;  /* hover */
	--hh-accent-soft:  #E4ECEE;  /* tint bg */

	/* Utility */
	--hh-success:      #5A7D5A;
	--hh-warning:      #B08A3E;

	/* ---- Typography · §3.2 ---------------------------------------------- */
	--hh-font-display: "Fraunces", Georgia, serif;
	--hh-font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

	--hh-text-xs:    0.75rem;   /* 12px */
	--hh-text-sm:    0.875rem;  /* 14px */
	--hh-text-base:  1rem;      /* 16px */
	--hh-text-lg:    1.125rem;  /* 18px */
	--hh-text-xl:    1.375rem;  /* 22px */
	--hh-text-2xl:   1.75rem;   /* 28px */
	--hh-text-3xl:   2.25rem;   /* 36px */
	--hh-text-4xl:   3rem;      /* 48px — hero */

	--hh-lh-xs:   1.5;
	--hh-lh-sm:   1.55;
	--hh-lh-base: 1.65;
	--hh-lh-lg:   1.55;
	--hh-lh-xl:   1.4;
	--hh-lh-2xl:  1.3;
	--hh-lh-3xl:  1.2;
	--hh-lh-4xl:  1.1;

	--hh-fw-body:     400;
	--hh-fw-emphasis: 500;
	--hh-fw-heading:  600;

	/* ---- Spacing · §3.3 -------------------------------------------------- */
	--hh-space-1:   4px;
	--hh-space-2:   8px;
	--hh-space-3:  12px;
	--hh-space-4:  16px;
	--hh-space-5:  24px;
	--hh-space-6:  32px;
	--hh-space-7:  48px;
	--hh-space-8:  64px;
	--hh-space-9:  96px;
	--hh-space-10: 128px;

	/* ---- Banner height lock (§3.4 — site-wide visual standard) -----------
	   Canonical minimum depth for every full-bleed banner surface across
	   the site (archive-banner, hh-category-band, etc.). Anchored to the
	   Restaurants hub-page band which is the visual standard. Same value
	   at every breakpoint by default — banners can shrink via padding
	   adjustments but the min-height keeps them from collapsing to
	   content-only depth.

	   Override per-surface or per-breakpoint by re-declaring the variable
	   on a more specific selector, e.g. .archive-banner--compact, or in
	   a media query. */
	--hhe-banner-min-height:        320px;
	--hhe-banner-min-height-tablet: 320px;
	--hhe-banner-min-height-mobile: 260px;

	/* ---- Shape / motion (not specced, kept minimal) ---------------------- */
	--hh-radius:        4px;
	--hh-radius-lg:     8px;
	--hh-shadow-card:   0 1px 2px rgba(31,29,27,0.06), 0 1px 3px rgba(31,29,27,0.04);
	--hh-shadow-hover:  0 6px 16px rgba(31,29,27,0.10), 0 2px 4px rgba(31,29,27,0.06);
	--hh-transition:    200ms ease;

	/* ---- Liquid glass (translucent panel surface) ----------------------- */
	--hh-glass-bg:        rgba(250, 248, 245, 0.72);
	--hh-glass-bg-strong: rgba(250, 248, 245, 0.84);
	--hh-glass-tint:      rgba(239, 234, 227, 0.55);
	--hh-glass-border:    rgba(31, 29, 27, 0.08);
	--hh-glass-shadow:    0 12px 32px rgba(31, 29, 27, 0.10), 0 2px 6px rgba(31, 29, 27, 0.04);
	--hh-glass-blur:      18px;
	--hh-glass-saturate:  140%;

	/* ---- Legacy aliases — keep old `--color-*` rules resolving against new palette
	   so main.css can be swapped without a full rewrite. Block 3 replaces these sites
	   with direct --hh-* tokens; aliases are the bridge, not the destination. ------ */
	--color-primary:     var(--hh-accent);
	--color-primary-dk:  var(--hh-accent-deep);
	--color-primary-lt:  var(--hh-accent-soft);
	--color-accent:      var(--hh-accent);
	--color-accent-dk:   var(--hh-accent-deep);
	--color-text:        var(--hh-charcoal);
	--color-text-light:  var(--hh-mist);
	--color-bg:          var(--hh-white);
	--color-bg-alt:      var(--hh-stone);
	--color-border:      var(--hh-mineral);
	--color-orange:      var(--hh-accent);
	--color-orange-dk:   var(--hh-accent-deep);
	--color-blue:        var(--hh-accent);
	--color-blue-dk:     var(--hh-accent-deep);
	--color-teal:        var(--hh-accent);
	--color-navy:        var(--hh-charcoal);
	--color-red:         var(--hh-warning);

	--font-heading:      var(--hh-font-display);
	--font-body:         var(--hh-font-body);
	--font-nav:          var(--hh-font-body);
	--font-ui:           var(--hh-font-body);
}

/* ==========================================================================
   Shared MVP components (§3.4) — used by new templates.
   Defined here so templates reference these classes, never inline styles.
   ========================================================================== */

/* ---- Section wrapper ---------------------------------------------------- */
.hh-section {
	padding-block: var(--hh-space-8);
	background: var(--hh-white);
}
.hh-section--stone  { background: var(--hh-stone); }
.hh-section--tight  { padding-block: var(--hh-space-6); }

.hh-container {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: var(--hh-space-5);
}

/* ---- Type utilities ----------------------------------------------------- */
.hh-display {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	color: var(--hh-charcoal);
	letter-spacing: -0.01em;
}
.hh-body {
	font-family: var(--hh-font-body);
	font-weight: var(--hh-fw-body);
	color: var(--hh-charcoal);
}
.hh-eyebrow {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-mist);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---- Buttons ------------------------------------------------------------ */
.hh-btn-primary,
.hh-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hh-space-2);
	padding: var(--hh-space-3) var(--hh-space-5);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	line-height: 1;
	letter-spacing: 0.01em;
	border-radius: var(--hh-radius);
	text-decoration: none;
	transition: background var(--hh-transition), color var(--hh-transition), border-color var(--hh-transition), transform var(--hh-transition);
	cursor: pointer;
	border: 1px solid transparent;
}
.hh-btn-primary {
	background: var(--hh-accent);
	color: var(--hh-white);
}
.hh-btn-primary:hover,
.hh-btn-primary:focus-visible {
	background: var(--hh-accent-deep);
	color: var(--hh-white);
}
.hh-btn-secondary {
	background: transparent;
	color: var(--hh-charcoal);
	border-color: var(--hh-charcoal);
}
.hh-btn-secondary:hover,
.hh-btn-secondary:focus-visible {
	background: var(--hh-charcoal);
	color: var(--hh-white);
}

/* ---- Tag ---------------------------------------------------------------- */
.hh-tag {
	display: inline-block;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-mist);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---- Card (§6 spec) ----------------------------------------------------- */
.hh-card {
	display: flex;
	flex-direction: column;
	background: var(--hh-stone);
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius);
	overflow: hidden;
	transition: transform var(--hh-transition), box-shadow var(--hh-transition);
}
.hh-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--hh-shadow-hover);
}

.hh-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--hh-mineral);
}
.hh-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}
.hh-card:hover .hh-card__media img {
	transform: scale(1.02);
}

.hh-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-3);
	padding: var(--hh-space-4);
}

.hh-card__tag {
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-mist);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
}
.hh-card__title {
	font-family: var(--hh-font-display);
	font-size: var(--hh-text-lg);
	line-height: var(--hh-lh-lg);
	font-weight: var(--hh-fw-heading);
	color: var(--hh-charcoal);
	margin: 0;
}
.hh-card__title a {
	color: inherit;
	text-decoration: none;
}
.hh-card__title a:hover { color: var(--hh-accent-deep); }

.hh-card__meta {
	font-size: var(--hh-text-sm);
	line-height: var(--hh-lh-sm);
	color: var(--hh-mist);
	margin: 0;
}

.hh-card__cta {
	margin-top: auto;
}

/* ---- Card: trust + claim affordances (April 2026 polish) ---------------- */

/* Badges sit over the media, top-left, mirroring the .listing-card overlay. */
.hh-card__media .listing-badges {
	position: absolute;
	top: var(--hh-space-2);
	left: var(--hh-space-2);
	margin: 0;
	z-index: 1;
	pointer-events: none; /* badges are decorative; the whole tile is the link */
}

/* Honest fallback for missing structured info. Matches .hh-card__meta size,
 * but leans muted + italic so it reads as "we don't have this yet" rather
 * than competing with real data on neighbouring cards. */
.hh-card__meta--fallback {
	color: var(--hh-mist);
	font-style: italic;
	opacity: 0.85;
}

/* "Is this your business? Claim this listing →" — a micro-link sitting
 * under the primary CTA. Quiet by default, becomes assertive on hover. */
.hh-card__claim {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: var(--hh-space-2);
	padding: 0;
	font-size: var(--hh-text-xs);
	line-height: var(--hh-lh-xs);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.01em;
	color: var(--hh-mist);
	text-decoration: none;
	border-radius: 2px;
	transition: color var(--hh-transition);
}
.hh-card__claim:hover,
.hh-card__claim:focus-visible {
	color: var(--hh-accent-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	outline: none;
}

/* Subtle vertical lift on claimed listings — the claim badge already signals
 * trust, the soft ring just reinforces it without competing with premium. */
.hh-card--claimed:not(:has(.listing-badge--premium-plus)):not(:has(.listing-badge--premium)) {
	border-color: rgba(31, 29, 27, 0.12);
}

/* ---- Grid (used by homepage featured + category pages) ------------------ */
.hh-grid {
	display: grid;
	gap: var(--hh-space-5);
	grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 720px) {
	.hh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
	.hh-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Mobile scale-down (§3.2) ------------------------------------------ */
@media (max-width: 720px) {
	:root {
		--hh-text-3xl: 1.875rem;
		--hh-text-4xl: 2.5rem;
	}
}

/* ==========================================================================
   MVP page chrome (homepage hero, category band, breadcrumb, pagination,
   single listing, footer) — all classes namespaced `hh-*`.
   ========================================================================== */

/* Page background + body defaults (defensive; main.css may also set) */
body.page-template-template-mvp-category,
body.home,
body.single-listing,
body.tax-listing_category {
	background: var(--hh-white);
	color: var(--hh-charcoal);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	font-weight: var(--hh-fw-body);
}

/* ---- Homepage hero (§3.1) ----------------------------------------------
 * Hero hosts the brand logo (header is nav-only). Sized to ~85vh rather than
 * full-viewport so:
 *   1. the centred logo + headline + CTAs visually rise higher on the page,
 *   2. a hint of the next section peeks under the fold, encouraging scroll,
 *   3. the daytime aerial doesn't dedicate the top half of the screen to sky.
 * background-position is shifted to ~65–70% so the SkyShot's bright-blue sky
 * crops off the top edge and the city/coastline/foreground dominate. Asymmetric
 * padding-block (smaller top, larger bottom) nudges centred content upward
 * within the flex container without breaking vertical centring. */
.hh-hero {
	position: relative;
	min-height: 75vh;
	min-height: 75dvh; /* respects mobile address bar */
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hh-charcoal) no-repeat;
	background-image: var(--hh-hero-mobile, var(--hh-hero-desktop));
	background-size: cover;
	background-position: center 70%;
	color: var(--hh-white);
	padding-block: var(--hh-space-6) var(--hh-space-8);
}
@media (min-width: 720px) {
	.hh-hero {
		min-height: 70vh;
		background-image: var(--hh-hero-desktop);
		background-position: center 85%; /* drop more sky off the top, keep skyline visible */
	}
}
/* Daytime-aerial overlay: dense at the bright sky to keep the white logo +
 * H1 readable, easing through the city/sea band so the place reads, then a
 * gentle re-anchor at the bottom for CTA contrast. Tuned for the SkyShot
 * aerial; if reverting to the magic-hour hero, lighten the top stop to ~0.18. */
.hh-hero::before {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg,
			rgba(20, 18, 16, 0.42) 0%,
			rgba(20, 18, 16, 0.26) 55%,
			rgba(20, 18, 16, 0.45) 100%);
	pointer-events: none;
}
.hh-hero__inner {
	position: relative;
	max-width: 820px;
	padding-inline: var(--hh-space-5);
	margin-inline: auto;
	text-align: center;
}
.hh-hero__logo {
	margin: 0 0 var(--hh-space-5);
	display: flex;
	justify-content: center;
}
.hh-hero__logo img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
}
@media (max-width: 480px) {
	.hh-hero__logo img { max-width: 220px; }
}
.hh-hero__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-4xl);
	line-height: var(--hh-lh-4xl);
	letter-spacing: -0.015em;
	color: var(--hh-white);
	margin: 0 0 var(--hh-space-4);
}
.hh-hero__sub {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-lg);
	line-height: var(--hh-lh-lg);
	color: rgba(250, 248, 245, 0.92);
	margin: 0 0 var(--hh-space-6);
	max-width: 620px;
	margin-inline: auto;
}
.hh-hero__actions {
	display: flex;
	gap: var(--hh-space-3);
	justify-content: center;
	flex-wrap: wrap;
}
.hh-hero .hh-btn-secondary {
	background: rgba(250, 248, 245, 0.08);
	color: var(--hh-white);
	border-color: rgba(250, 248, 245, 0.55);
}
.hh-hero .hh-btn-secondary:hover,
.hh-hero .hh-btn-secondary:focus-visible {
	background: var(--hh-white);
	color: var(--hh-charcoal);
	border-color: var(--hh-white);
}

/* ---- Homepage 3-up category entry (§3.1 item 2) ------------------------ */
.hh-cats {
	display: grid;
	gap: var(--hh-space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.hh-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.hh-cats { grid-template-columns: repeat(4, 1fr); }
}
.hh-cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--hh-radius);
	aspect-ratio: 4 / 5;
	text-decoration: none;
	color: var(--hh-white);
	background: var(--hh-charcoal);
	transition: transform var(--hh-transition);
}
.hh-cat-card:hover { transform: translateY(-2px); }
.hh-cat-card__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.hh-cat-card:hover .hh-cat-card__img { transform: scale(1.03); }
.hh-cat-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(31,29,27,0.10) 30%, rgba(31,29,27,0.70) 100%);
}
.hh-cat-card__body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--hh-space-5);
}
.hh-cat-card__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-2xl);
	line-height: var(--hh-lh-2xl);
	color: var(--hh-white);
	margin: 0 0 var(--hh-space-2);
}
.hh-cat-card__intro {
	font-size: var(--hh-text-sm);
	line-height: var(--hh-lh-sm);
	color: rgba(250,248,245,0.92);
	margin: 0;
}

/* ---- Homepage featured 6 listings row ---------------------------------- */
.hh-featured-row { /* alias of .hh-grid for semantics */ }

/* ---- Homepage editorial block (§3.1 item 4) ---------------------------- */
.hh-editorial {
	display: grid;
	gap: var(--hh-space-7);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 820px) {
	.hh-editorial { grid-template-columns: 1.1fr 1fr; }
}
.hh-editorial__body { max-width: 560px; }
.hh-editorial__eyebrow {
	font-size: var(--hh-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hh-mist);
	font-weight: var(--hh-fw-emphasis);
	margin: 0 0 var(--hh-space-3);
}
.hh-editorial__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-3xl);
	line-height: var(--hh-lh-3xl);
	margin: 0 0 var(--hh-space-4);
	color: var(--hh-charcoal);
}
.hh-editorial__copy {
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
}
.hh-editorial__img {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--hh-radius);
}
.hh-editorial__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Category page band (§3.2) ----------------------------------------- */
.hh-category-band {
	position: relative;
	/* Anchored to --hhe-banner-min-height (declared in :root above). Shared
	   with .archive-banner so the Directory landing, every category archive,
	   and every hub-page band render at the same depth. */
	min-height: var(--hhe-banner-min-height);
	display: flex;
	align-items: flex-end;
	background: var(--hh-charcoal) center/cover no-repeat;
	color: var(--hh-white);
}
@media (max-width: 1024px) {
	.hh-category-band {
		min-height: var(--hhe-banner-min-height-tablet);
	}
}
@media (max-width: 720px) {
	.hh-category-band {
		min-height: var(--hhe-banner-min-height-mobile);
	}
}
.hh-category-band__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(31,29,27,0.15) 40%, rgba(31,29,27,0.65) 100%);
}
.hh-category-band__inner {
	position: relative;
	padding-block: var(--hh-space-7);
	width: 100%;
}
.hh-category-band__title {
	font-size: var(--hh-text-3xl);
	color: var(--hh-white);
	margin: var(--hh-space-3) 0 var(--hh-space-3);
}
.hh-category-band__intro {
	font-size: var(--hh-text-lg);
	line-height: var(--hh-lh-lg);
	color: rgba(250,248,245,0.95);
	max-width: 620px;
	margin: 0;
}

/* ---- Breadcrumb -------------------------------------------------------- */
.hh-breadcrumb {
	font-size: var(--hh-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(250,248,245,0.85);
}
.hh-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.hh-breadcrumb a:hover { text-decoration: underline; }
/* Variant on light backgrounds */
.hh-breadcrumb--light { color: var(--hh-mist); }
.hh-breadcrumb--light a { color: var(--hh-mist); }

/* ---- Pagination -------------------------------------------------------- */
.hh-pagination {
	display: flex;
	justify-content: center;
	gap: var(--hh-space-2);
	margin-top: var(--hh-space-7);
	flex-wrap: wrap;
}
.hh-pagination .page-numbers {
	padding: var(--hh-space-2) var(--hh-space-3);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	color: var(--hh-charcoal);
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius);
	text-decoration: none;
	background: var(--hh-stone);
}
.hh-pagination .page-numbers:hover { background: var(--hh-mineral); }
.hh-pagination .page-numbers.current {
	background: var(--hh-accent);
	border-color: var(--hh-accent);
	color: var(--hh-white);
}

/* ---- Navigation (applied to site-nav__list when hh-nav class present) -- */
.site-nav .hh-nav {
	display: flex;
	gap: var(--hh-space-5);
	list-style: none;
	padding: 0;
	margin: 0;
}
.site-nav .hh-nav li { padding: 0; }
.site-nav .hh-nav a {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-charcoal);
	text-decoration: none;
	letter-spacing: 0.01em;
}
.site-nav .hh-nav a:hover { color: var(--hh-accent-deep); }
.site-nav .hh-nav .current-menu-item > a {
	color: var(--hh-accent-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Footer (single row §3.4) ------------------------------------------ */
.hh-footer {
	background: var(--hh-stone);
	border-top: 1px solid var(--hh-mineral);
	padding-block: var(--hh-space-6);
	font-size: var(--hh-text-sm);
	color: var(--hh-mist);
}
.hh-footer__inner {
	display: flex;
	gap: var(--hh-space-5);
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.hh-footer__name {
	font-family: var(--hh-font-display);
	font-size: var(--hh-text-base);
	color: var(--hh-charcoal);
	font-weight: var(--hh-fw-heading);
	text-decoration: none;
}
.hh-footer__links {
	display: flex;
	gap: var(--hh-space-4);
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}
.hh-footer__links a {
	color: var(--hh-mist);
	text-decoration: none;
}
.hh-footer__links a:hover { color: var(--hh-charcoal); }

/* ---- Single listing (§3.3) --------------------------------------------- */
.hh-listing {
	padding-block: var(--hh-space-7);
}
.hh-listing__hero {
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: var(--hh-radius);
	margin-bottom: var(--hh-space-6);
	background: var(--hh-stone);
}
.hh-listing__hero img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.hh-listing__hero {
	position: relative;
}
.hh-listing__hero-credit {
	position: absolute;
	right: var(--hh-space-3);
	bottom: var(--hh-space-3);
	background: rgba(31, 29, 27, 0.55);
	color: rgba(250, 248, 245, 0.92);
	font-size: var(--hh-text-xs);
	padding: 4px 10px;
	border-radius: var(--hh-radius);
	line-height: 1.4;
}
.hh-listing__hero-credit a {
	color: inherit;
	text-decoration: none;
}
.hh-listing__hero-credit a:hover {
	color: var(--hh-white);
	text-decoration: underline;
}
.hh-listing__layout {
	display: grid;
	gap: var(--hh-space-7);
	grid-template-columns: 1fr;
}
@media (min-width: 860px) {
	.hh-listing__layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.hh-listing__tag {
	font-size: var(--hh-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hh-mist);
	font-weight: var(--hh-fw-emphasis);
	margin: 0 0 var(--hh-space-2);
}
.hh-listing__title {
	font-family: var(--hh-font-display);
	font-weight: var(--hh-fw-heading);
	font-size: var(--hh-text-3xl);
	line-height: var(--hh-lh-3xl);
	color: var(--hh-charcoal);
	margin: 0 0 var(--hh-space-5);
}
.hh-listing__copy {
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
}
.hh-listing__facts {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-4);
	background: var(--hh-stone);
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius);
	padding: var(--hh-space-5);
}
.hh-listing__fact {
	display: flex;
	flex-direction: column;
	gap: var(--hh-space-1);
}
.hh-listing__fact-label {
	font-size: var(--hh-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hh-mist);
	font-weight: var(--hh-fw-emphasis);
}
.hh-listing__fact-value {
	font-size: var(--hh-text-base);
	color: var(--hh-charcoal);
	word-break: break-word;
}
.hh-listing__fact-value a { color: var(--hh-accent-deep); text-decoration: underline; }
.hh-listing__cta-row {
	display: flex;
	gap: var(--hh-space-3);
	flex-wrap: wrap;
}
.hh-listing__cta-row .hh-btn-primary { flex: 1 0 auto; }

/* ════════════════════════════════════════════════════════════════════════
   FRONT-END POLISH SPRINT — May 2026
   ────────────────────────────────────────────────────────────────────────
   Additions for: card grid variation, hover polish, "Coming soon" badge,
   category-archive medallion banner, directory controls, mobile rhythm.
   All scoped to existing class names — no selector renames, no overrides
   of existing rules. Safe to revert by deleting this block.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Homepage category card: "Coming soon" treatment ────────────────────
   Stays clickable so the visitor lands on the hub page; the card is just
   visually marked as in-curation. */
.hh-cat-card--coming-soon { position: relative; }
.hh-cat-card--coming-soon .hh-cat-card__img { opacity: 0.78; }
.hh-cat-card__badge {
	position: absolute;
	top: var(--hh-space-3);
	right: var(--hh-space-3);
	z-index: 2;
	padding: 0.32em 0.7em;
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hh-charcoal);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(31, 29, 27, 0.12);
	pointer-events: none;
}

/* ── Listing card grid: subtle per-card variation ──────────────────────
   With ~25 listings per category sharing the same symbol icon, a grid
   read as "wall of identical cards" before this. Rotating a 4-tone
   border-top accent + subtle media-zone tint by :nth-child breaks the
   repetition without inventing imagery. Effect is intentionally quiet.
   Applied to BOTH card variants (.hh-card homepage + .listing-card
   directory/archive). */
.hh-card,
.listing-card {
	border-top: 3px solid transparent;
	transition: transform var(--hh-transition),
	            box-shadow var(--hh-transition),
	            border-color var(--hh-transition);
}
.hh-card:nth-child(4n+1),
.listing-card:nth-child(4n+1) { border-top-color: rgba(31, 29, 27, 0.10); }
.hh-card:nth-child(4n+2),
.listing-card:nth-child(4n+2) { border-top-color: rgba(31, 29, 27, 0.14); }
.hh-card:nth-child(4n+3),
.listing-card:nth-child(4n+3) { border-top-color: rgba(31, 29, 27, 0.06); }
.hh-card:nth-child(4n+4),
.listing-card:nth-child(4n+4) { border-top-color: rgba(31, 29, 27, 0.18); }

/* Stronger hover lift than the base rule, with brand-accent border. */
.hh-card:hover,
.listing-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(31, 29, 27, 0.10),
	            0 2px 8px rgba(31, 29, 27, 0.05);
	border-top-color: var(--hh-accent);
}

/* Subtle inner separator under the media zone so the icon doesn't bleed
 * straight into the title. Only applies to .hh-card variant. */
.hh-card__media {
	box-shadow: inset 0 -1px 0 rgba(31, 29, 27, 0.05);
}

/* ── Category archive: medallion banner ────────────────────────────────
   New treatment puts a smaller centred icon medallion above the title,
   leans on typography for category identity, and uses a soft gradient
   backdrop instead of a full-bleed banner image. */
.archive-banner--medallion {
	background: linear-gradient(180deg,
		var(--hh-white) 0%,
		rgba(239, 234, 227, 0.40) 100%);
	border-bottom: 1px solid rgba(31, 29, 27, 0.06);
	padding-block: var(--hh-space-7) var(--hh-space-6);
	text-align: center;
}
.archive-banner--medallion .archive-banner__inner {
	max-width: 720px;
	margin-inline: auto;
}
.archive-banner__medallion-img {
	width: 96px;
	height: 96px;
	margin: 0 auto var(--hh-space-4);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(31, 29, 27, 0.10),
	            0 0 0 1px rgba(31, 29, 27, 0.04);
}
.archive-banner__medallion-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.archive-banner--medallion .archive-banner__title {
	font-family: var(--hh-font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.1;
	font-weight: var(--hh-fw-heading);
	margin: 0 0 var(--hh-space-2);
	letter-spacing: -0.01em;
}
.archive-banner__count {
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hh-mist);
	margin: 0 0 var(--hh-space-3);
}
.archive-banner--medallion .archive-banner__desc {
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
	max-width: 560px;
	margin: 0 auto;
}
.archive-banner--medallion .breadcrumb {
	margin-bottom: var(--hh-space-4);
	justify-content: center;
}

/* ── Directory page controls: unified discovery surface ────────────────
   Wraps the search + privacy line + filter pills as one section so the
   eye reads it as a curated find-flow rather than a stack of utility
   bars. Replaces the old inline-styled stack. */
.directory-container { padding-block: var(--hh-space-6) var(--hh-space-8); }
.directory-breadcrumb { margin-bottom: var(--hh-space-4); }

.directory-controls {
	margin-bottom: var(--hh-space-6);
	padding: var(--hh-space-5);
	background: var(--hh-stone);
	border: 1px solid rgba(31, 29, 27, 0.06);
	border-radius: var(--hh-radius);
}
.directory-controls .directory-search-bar { margin-bottom: 0.25rem; }
.directory-controls .directory-search__privacy {
	margin: 0 0 var(--hh-space-4);
	font-size: var(--hh-text-xs);
	color: var(--hh-mist);
}
.directory-controls__filters { margin-top: var(--hh-space-3); }
.directory-controls__eyebrow {
	display: block;
	margin-bottom: var(--hh-space-2);
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hh-mist);
}
.directory-controls .directory-results-count {
	margin: var(--hh-space-4) 0 0;
	font-size: var(--hh-text-sm);
	color: var(--hh-mist);
}

/* Empty state: more deliberate than a centred paragraph. */
.directory-empty {
	margin-block: var(--hh-space-7);
	padding: var(--hh-space-6) var(--hh-space-5);
	text-align: center;
	background: var(--hh-stone);
	border: 1px dashed rgba(31, 29, 27, 0.18);
	border-radius: var(--hh-radius);
}
.directory-empty__title {
	font-family: var(--hh-font-display);
	font-size: var(--hh-text-2xl);
	margin: 0 0 var(--hh-space-2);
}
.directory-empty__lead {
	font-size: var(--hh-text-base);
	color: var(--hh-charcoal);
	margin: 0 0 var(--hh-space-2);
}
.directory-empty__hint {
	font-size: var(--hh-text-sm);
	color: var(--hh-mist);
	margin: 0 0 var(--hh-space-4);
}
.directory-empty__actions {
	display: flex;
	gap: var(--hh-space-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* ── Mobile rhythm fixes ───────────────────────────────────────────────
   Tighter card gutters, larger pill tap targets, narrower medallion. */
@media (max-width: 720px) {
	.archive-banner--medallion {
		padding-block: var(--hh-space-5) var(--hh-space-4);
	}
	.archive-banner__medallion-img {
		width: 76px;
		height: 76px;
		margin-bottom: var(--hh-space-3);
	}
	.archive-banner--medallion .archive-banner__title {
		font-size: 1.875rem;
	}

	.directory-controls {
		padding: var(--hh-space-4);
	}
	.directory-filter-pills {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	.filter-pill {
		min-height: 40px; /* WCAG 2.5.5 — comfortable tap target */
		padding-inline: 0.85rem;
	}

	.hh-card__body,
	.listing-card__body {
		padding: var(--hh-space-3) var(--hh-space-3) var(--hh-space-4);
	}
	.hh-card__title,
	.listing-card__title {
		font-size: var(--hh-text-base);
		line-height: 1.25;
	}

	.hh-cat-card__badge {
		top: var(--hh-space-2);
		right: var(--hh-space-2);
		font-size: 0.65rem;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   I18N — Language switcher (May 2026)
   ────────────────────────────────────────────────────────────────────────
   Three contexts share the same data + base markup but render differently:
     .hh-langs--header  → compact pill row in the desktop header (≥720px)
     .hh-langs--mobile  → stacked rows inside the .site-nav__list drawer
     .hh-langs--footer  → muted text-link group at the bottom
   Whole switcher is intentionally invisible when no multilingual plugin
   is active (the i18n.php helper returns an empty string).
   ════════════════════════════════════════════════════════════════════════ */

.hh-langs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap; /* 12 languages — wrap rather than overflow */
	gap: 0.25rem;
}
.hh-langs__item {
	display: inline-flex;
}
.hh-langs__item > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.32em 0.55em;
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.05em;
	color: var(--hh-mist);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: color var(--hh-transition),
	            background-color var(--hh-transition),
	            border-color var(--hh-transition);
	min-height: 32px;
	min-width: 36px;
}
/* The two-letter pill code itself — kept on one line, sized to fit RU's
 * Cyrillic glyphs which render slightly wider than Latin. */
.hh-langs__code {
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}
.hh-langs__item > a:hover,
.hh-langs__item > a:focus-visible {
	color: var(--hh-charcoal);
	background-color: rgba(31, 29, 27, 0.04);
	outline: none;
}
.hh-langs__item--current > a {
	color: var(--hh-charcoal);
	background-color: rgba(31, 29, 27, 0.08);
	border-color: rgba(31, 29, 27, 0.10);
}
.hh-langs__item--current > a:hover,
.hh-langs__item--current > a:focus-visible {
	background-color: rgba(31, 29, 27, 0.12);
}

/* ── Desktop header context ────────────────────────────────────────────
   Sits to the right of the nav, hidden on mobile (the drawer variant
   takes over below 720px). With 12 languages we cap the visible row at
   ~6 pills wide and let the rest wrap to a second line at tight widths.
   On wide desktops (≥1280px) all 12 fit comfortably on one row. */
.hh-langs--header {
	margin-left: var(--hh-space-3);
	display: none;
	max-width: 280px; /* keep header tidy at narrow desktop widths */
}
@media (min-width: 720px) {
	.hh-langs--header { display: inline-flex; }
}
@media (min-width: 1280px) {
	/* enough room for all 12 pills inline */
	.hh-langs--header { max-width: none; }
}
.hh-langs--header .hh-langs__list {
	gap: 0.2rem;
	justify-content: flex-end;
}
.hh-langs--header .hh-langs__item > a {
	padding: 0.28em 0.5em;
	min-width: 34px;
}

/* ── Mobile drawer context ─────────────────────────────────────────────
   Renders inside the .site-nav__list when the hamburger opens. Hidden
   on desktop where the header switcher is visible. */
.hh-langs--mobile { display: none; }
.site-nav__list.is-open + .hh-langs--mobile,
.site-nav__list .hh-langs--mobile,
.site-nav .hh-langs--mobile {
	display: none;
}
@media (max-width: 719px) {
	.site-nav .hh-langs--mobile {
		display: block;
		margin-top: var(--hh-space-3);
		padding-top: var(--hh-space-3);
		border-top: 1px solid rgba(31, 29, 27, 0.08);
	}
	.hh-langs--mobile .hh-langs__list {
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	.hh-langs--mobile .hh-langs__item > a {
		min-height: 40px; /* tap target ≥40px on mobile */
		min-width: 48px;
		padding: 0.5em 0.85em;
		font-size: var(--hh-text-sm);
	}
	/* Only show the mobile switcher when the drawer is open — matches the
	 * rest of .site-nav__list behaviour. */
	.site-nav .hh-langs--mobile {
		display: none;
	}
	.site-nav:has(.site-nav__list.is-open) .hh-langs--mobile {
		display: block;
	}
}

/* ── Footer context ────────────────────────────────────────────────────
   Sits above the copyright line. Subtler styling — text links rather than
   pills, separated by a thin rule. */
.hh-langs--footer {
	margin-top: var(--hh-space-4);
	padding-top: var(--hh-space-3);
	border-top: 1px solid rgba(31, 29, 27, 0.06);
}
.hh-langs--footer .hh-langs__list {
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}
.hh-langs--footer .hh-langs__item > a {
	border-radius: var(--hh-radius);
	padding: 0.25em 0.55em;
	min-height: 28px;
	min-width: 36px;
}

/* ── Glass-aware variant ───────────────────────────────────────────────
   When the switcher sits inside the liquid-glass nav drawer, the items
   need slightly higher contrast against the translucent surface. */
.site-nav__list.is-open ~ .hh-langs--mobile .hh-langs__item--current > a,
.site-nav .hh-langs--mobile .hh-langs__item--current > a {
	background-color: rgba(31, 29, 27, 0.10);
}

/* ── TranslatePress wrapper override ───────────────────────────────────
   TranslatePress renders its own switcher markup; we keep the wrapper
   class for spacing but reset its internal ULs so it doesn't double-
   inherit our pill styling when it doesn't apply. */
.hh-langs--trp ul,
.hh-langs--trp li,
.hh-langs--trp a {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   .hhe-page-intro — long-form intro block (May 2026)
   ────────────────────────────────────────────────────────────────────────
   Used by:
     - template-mvp-category.php (hub pages: Restaurants / Medical & Dental
       / Property / Visas & Legal — reads from page post_content)
     - taxonomy-listing_category.php (19 category archives — reads from
       term description)
     - index.php (Blog index — reads from posts page post_content)
   Sits between the banner/header and the listing grid. Editorial typography,
   readable line length (~62 chars), generous breathing room. No box, no
   border — the whitespace + serif type does the work.
   ════════════════════════════════════════════════════════════════════════ */

.hhe-page-intro {
	background: var(--hh-white);
	padding-block: var(--hh-space-7) var(--hh-space-6);
	border-bottom: 1px solid rgba(31, 29, 27, 0.06);
}
.hhe-page-intro__inner {
	max-width: 720px;
	margin-inline: auto;
}
.hhe-page-intro p {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-lg);
	line-height: 1.7;
	color: var(--hh-charcoal);
	margin: 0 0 var(--hh-space-4);
}
.hhe-page-intro p:last-child { margin-bottom: 0; }
.hhe-page-intro a {
	color: var(--hh-accent-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hhe-page-intro a:hover,
.hhe-page-intro a:focus-visible {
	color: var(--hh-accent);
}
.hhe-page-intro ul,
.hhe-page-intro ol {
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
	padding-left: 1.25em;
	margin: 0 0 var(--hh-space-4);
}

@media (max-width: 720px) {
	.hhe-page-intro {
		padding-block: var(--hh-space-5) var(--hh-space-4);
	}
	.hhe-page-intro p {
		font-size: var(--hh-text-base);
		line-height: var(--hh-lh-base);
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Commercial-lead enquiry forms (May 2026)
   ────────────────────────────────────────────────────────────────────────
   Used by /sell-rent-your-property/ + /sell-your-business/.
   Renders the property/business enquiry forms — same design language as
   the rest of the site. Honeypot field is visually hidden.
   ════════════════════════════════════════════════════════════════════════ */

.hhe-lead-page__band { /* nothing extra; relies on existing .hh-category-band */ }

.hhe-lead-form-section {
	background: var(--hh-stone);
	padding-block: var(--hh-space-7) var(--hh-space-8);
	border-top: 1px solid rgba(31, 29, 27, 0.06);
}
.hhe-lead-form-section__inner {
	max-width: 760px;
	margin-inline: auto;
}
.hhe-lead-form-section__header {
	margin-bottom: var(--hh-space-5);
}
.hhe-lead-form-section__header .hh-display {
	font-size: var(--hh-text-2xl);
	margin: var(--hh-space-1) 0 var(--hh-space-3);
}
.hhe-lead-form-section__lead {
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
	margin: 0;
	max-width: 580px;
}

/* The form itself */
.hhe-lead-form {
	display: grid;
	gap: var(--hh-space-4);
	background: var(--hh-white);
	padding: var(--hh-space-5);
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius);
}
.hhe-lead-form__field {
	display: grid;
	gap: 0.35rem;
}
.hhe-lead-form__field label {
	font-size: var(--hh-text-sm);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-charcoal);
}
.hhe-lead-form__req { color: var(--hh-warning); }
.hhe-lead-form input[type="text"],
.hhe-lead-form input[type="email"],
.hhe-lead-form input[type="tel"],
.hhe-lead-form input[type="url"],
.hhe-lead-form input[type="number"],
.hhe-lead-form select,
.hhe-lead-form textarea {
	font: inherit;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--hh-mineral);
	border-radius: var(--hh-radius);
	background: var(--hh-white);
	color: var(--hh-charcoal);
	min-height: 44px; /* tap target */
	transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}
.hhe-lead-form textarea { min-height: 96px; resize: vertical; }
.hhe-lead-form input:focus,
.hhe-lead-form select:focus,
.hhe-lead-form textarea:focus {
	outline: none;
	border-color: var(--hh-accent);
	box-shadow: 0 0 0 3px rgba(74, 102, 112, 0.15);
}

/* Consent checkbox row */
.hhe-lead-form__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--hh-text-sm);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
	font-weight: var(--hh-fw-body);
	cursor: pointer;
}
.hhe-lead-form__check input[type="checkbox"] {
	margin-top: 0.2rem;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* Honeypot — visually hidden but still in the DOM for bots */
.hhe-lead-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
}

.hhe-lead-form__submit {
	justify-self: start;
	min-height: 48px;
	padding-inline: var(--hh-space-6);
	margin-top: var(--hh-space-2);
}

.hhe-lead-form__disclaimer {
	font-size: var(--hh-text-xs);
	color: var(--hh-mist);
	line-height: 1.55;
	margin: 0;
	max-width: 580px;
}

/* Status banners (success / warn / error) */
.hhe-lead-form__status {
	margin-bottom: var(--hh-space-5);
	padding: var(--hh-space-4);
	border-radius: var(--hh-radius);
	border-left: 3px solid;
	font-size: var(--hh-text-base);
}
.hhe-lead-form__status p { margin: 0.4rem 0 0; font-size: var(--hh-text-sm); }
.hhe-lead-form__status--success {
	background: #e8f5e9;
	border-left-color: #2e7d32;
	color: #1b5e20;
}
.hhe-lead-form__status--warn {
	background: #fff8e1;
	border-left-color: #f9a825;
	color: #6f5b00;
}
.hhe-lead-form__status--error {
	background: #ffebee;
	border-left-color: #c62828;
	color: #b71c1c;
}

@media (max-width: 720px) {
	.hhe-lead-form-section {
		padding-block: var(--hh-space-5) var(--hh-space-7);
	}
	.hhe-lead-form {
		padding: var(--hh-space-4);
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Listing pricing — "Guide Prices" block on single-listing pages (May 2026)
   ────────────────────────────────────────────────────────────────────────
   Renders between the listing description and the gallery/reviews. Clean
   2-column table that stacks to single-column on mobile. Editorial type
   treatment matching .hhe-page-intro rhythm.
   ════════════════════════════════════════════════════════════════════════ */

.hhe-listing-pricing {
	margin-top: var(--hh-space-7);
	padding-top: var(--hh-space-6);
	border-top: 1px solid rgba(31, 29, 27, 0.08);
}
.hhe-listing-pricing__header {
	margin-bottom: var(--hh-space-4);
}
.hhe-listing-pricing__title {
	font-size: var(--hh-text-2xl);
	margin: var(--hh-space-1) 0 var(--hh-space-3);
}
.hhe-listing-pricing__summary {
	font-size: var(--hh-text-base);
	line-height: var(--hh-lh-base);
	color: var(--hh-charcoal);
	margin: 0;
	max-width: 620px;
}

.hhe-listing-pricing__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.hhe-listing-pricing__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--hh-mineral);
	background: var(--hh-white);
	border-radius: var(--hh-radius);
	overflow: hidden;
}
.hhe-listing-pricing__table thead th {
	background: var(--hh-stone);
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-xs);
	font-weight: var(--hh-fw-emphasis);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hh-mist);
	padding: var(--hh-space-3) var(--hh-space-4);
	text-align: left;
	border-bottom: 1px solid var(--hh-mineral);
}
.hhe-listing-pricing__table tbody td {
	padding: var(--hh-space-3) var(--hh-space-4);
	border-bottom: 1px solid rgba(31, 29, 27, 0.06);
	font-size: var(--hh-text-base);
	line-height: 1.5;
	color: var(--hh-charcoal);
	vertical-align: top;
}
.hhe-listing-pricing__table tbody tr:last-child td {
	border-bottom: none;
}
.hhe-price-row__service {
	font-weight: var(--hh-fw-emphasis);
	width: 50%;
}
.hhe-price-row__primary {
	display: inline;
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-charcoal);
}
.hhe-price-row__extras {
	color: var(--hh-mist);
	font-size: var(--hh-text-sm);
}

/* Type-specific accents — quiet, doesn't compete with the data */
.hhe-price-row--from_price       .hhe-price-row__primary { color: var(--hh-accent-deep); }
.hhe-price-row--verified         .hhe-price-row__primary { color: var(--hh-success); }
.hhe-price-row--contact_provider .hhe-price-row__primary { color: var(--hh-mist); font-style: italic; font-weight: var(--hh-fw-body); }

.hhe-listing-pricing__disclaimer {
	margin: var(--hh-space-4) 0 0;
	font-size: var(--hh-text-sm);
	line-height: 1.55;
	color: var(--hh-mist);
	max-width: 620px;
}
.hhe-listing-pricing__last-checked {
	margin: var(--hh-space-2) 0 0;
	font-size: var(--hh-text-xs);
	color: var(--hh-mist);
	font-style: italic;
}

@media (max-width: 720px) {
	.hhe-listing-pricing { margin-top: var(--hh-space-5); padding-top: var(--hh-space-5); }
	.hhe-listing-pricing__title { font-size: var(--hh-text-xl); }
	.hhe-listing-pricing__table thead { display: none; }
	.hhe-listing-pricing__table,
	.hhe-listing-pricing__table tbody,
	.hhe-listing-pricing__table tr,
	.hhe-listing-pricing__table td { display: block; width: 100%; }
	.hhe-listing-pricing__table tr {
		padding: var(--hh-space-3) var(--hh-space-4);
		border-bottom: 1px solid rgba(31, 29, 27, 0.10);
	}
	.hhe-listing-pricing__table tbody tr:last-child { border-bottom: none; }
	.hhe-listing-pricing__table tbody td {
		padding: 0;
		border: none;
	}
	.hhe-price-row__service {
		font-size: var(--hh-text-sm);
		color: var(--hh-mist);
		margin-bottom: 2px;
	}
	.hhe-price-row__price {
		font-size: var(--hh-text-base);
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Sidebar category list — commercial CTA items (May 2026)
   ────────────────────────────────────────────────────────────────────────
   Renders the two enquiry-page links (Sell / Rent Your Property + Sell
   Your Business) at the bottom of the sidebar category list on category
   archive + directory archive pages. Visually grouped via a top border
   separator; arrow indicator distinguishes them from real categories.
   No count — they're CTAs, not term archives.
   ════════════════════════════════════════════════════════════════════════ */

.directory-sidebar__item--cta:first-of-type {
	margin-top: var(--hh-space-3);
	padding-top: var(--hh-space-3);
	border-top: 1px solid rgba(31, 29, 27, 0.10);
}
.directory-sidebar__item--cta > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hh-space-2);
	font-weight: var(--hh-fw-emphasis);
	color: var(--hh-accent-deep);
}
.directory-sidebar__item--cta > a:hover,
.directory-sidebar__item--cta > a:focus-visible {
	color: var(--hh-accent);
}
.directory-sidebar__item--cta .cta-arrow {
	font-size: var(--hh-text-base);
	font-weight: var(--hh-fw-body);
	color: var(--hh-mist);
	transition: transform var(--hh-transition), color var(--hh-transition);
}
.directory-sidebar__item--cta > a:hover .cta-arrow,
.directory-sidebar__item--cta > a:focus-visible .cta-arrow {
	transform: translateX(2px);
	color: var(--hh-accent);
}

/* ════════════════════════════════════════════════════════════════════════
   .hhe-directory-intro — long-form editorial copy on /local-directory/
   ────────────────────────────────────────────────────────────────────────
   Renders the operator-edited intro page content (via the_content filter)
   between the medallion banner and the sidebar+grid layout. Richer than
   .hhe-page-intro because it carries multiple H2 sections, ordered/
   unordered lists, and inline CTA buttons.
   ════════════════════════════════════════════════════════════════════════ */

.hhe-directory-intro {
	background: var(--hh-white);
	padding-block: var(--hh-space-7) var(--hh-space-7);
	border-bottom: 1px solid rgba(31, 29, 27, 0.06);
}
.hhe-directory-intro__inner {
	max-width: 820px;
	margin-inline: auto;
}

/* Lead paragraph treatment — slightly larger + warmer than the body. */
.hhe-directory-intro__lead,
.hhe-directory-intro__inner > p:first-of-type {
	font-size: var(--hh-text-xl);
	line-height: 1.5;
	color: var(--hh-charcoal);
	margin: 0 0 var(--hh-space-5);
	font-weight: var(--hh-fw-emphasis);
}

.hhe-directory-intro__inner p {
	font-family: var(--hh-font-body);
	font-size: var(--hh-text-lg);
	line-height: 1.7;
	color: var(--hh-charcoal);
	margin: 0 0 var(--hh-space-4);
}
.hhe-directory-intro__inner p:last-child { margin-bottom: 0; }

.hhe-directory-intro__inner h2 {
	font-family: var(--hh-font-display);
	font-size: var(--hh-text-2xl);
	line-height: 1.2;
	font-weight: var(--hh-fw-heading);
	color: var(--hh-charcoal);
	margin: var(--hh-space-7) 0 var(--hh-space-3);
	letter-spacing: -0.01em;
}
.hhe-directory-intro__inner h2:first-child { margin-top: 0; }

.hhe-directory-intro__inner ul,
.hhe-directory-intro__inner ol {
	font-size: var(--hh-text-base);
	line-height: 1.65;
	color: var(--hh-charcoal);
	padding-left: 1.4em;
	margin: 0 0 var(--hh-space-4);
}
.hhe-directory-intro__inner ul li,
.hhe-directory-intro__inner ol li {
	margin: 0.25em 0;
}

/* CTA paragraph — single button on its own line, comfortably spaced. */
.hhe-directory-intro__cta-row {
	margin-top: var(--hh-space-5) !important;
	margin-bottom: var(--hh-space-4) !important;
}
.hhe-directory-intro__cta-row .hh-btn-primary,
.hhe-directory-intro__cta-row .hh-btn-secondary {
	min-height: 44px;
	padding-inline: var(--hh-space-5);
}

.hhe-directory-intro__inner a:not(.hh-btn-primary):not(.hh-btn-secondary) {
	color: var(--hh-accent-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hhe-directory-intro__inner a:not(.hh-btn-primary):not(.hh-btn-secondary):hover {
	color: var(--hh-accent);
}

@media (max-width: 720px) {
	.hhe-directory-intro {
		padding-block: var(--hh-space-5) var(--hh-space-5);
	}
	.hhe-directory-intro__lead,
	.hhe-directory-intro__inner > p:first-of-type {
		font-size: var(--hh-text-lg);
		line-height: 1.55;
	}
	.hhe-directory-intro__inner p {
		font-size: var(--hh-text-base);
		line-height: var(--hh-lh-base);
	}
	.hhe-directory-intro__inner h2 {
		font-size: var(--hh-text-xl);
		margin-top: var(--hh-space-6);
	}
}