@charset "UTF-8";
/*
 * Haar.Expert — the whole stylesheet.
 *
 * Plain CSS. No Sass, no bundler, no npm, no framework. A person with FTP and
 * a text editor must be able to change this in five years without installing
 * anything, so everything is in one readable file in source order.
 *
 * Contents
 *   1.  Tokens (light)
 *   2.  Tokens (dark)
 *   3.  Reset and base
 *   4.  Accessibility primitives: skip link, focus, reduced motion
 *   5.  Layout primitives
 *   6.  Type
 *   7.  Buttons and links
 *   8.  The mark (initials + deterministic colour) — the 97% case
 *   9.  Site header and navigation
 *   10. Search
 *   11. Salon card and card grid
 *   12. Salon page
 *   13. Opening hours
 *   14. Services, brands, chips
 *   15. Gallery
 *   16. Contact form
 *   17. Editorial content (blog, pages, landing copy)
 *   18. Pagination, breadcrumbs, notices
 *   19. Footer
 *   20. Print
 */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
	color-scheme: light dark;

	/*
	 * Warm neutrals, not blue-greys. The audience is roughly 80% women looking
	 * for a hair salon; the reference points are a good salon interior and a
	 * printed magazine, not a SaaS dashboard.
	 *
	 * Every foreground/background pair below was checked against WCAG AA:
	 * --hx-ink 16:1, --hx-ink-soft 7.4:1, --hx-ink-mute 5.5:1, --hx-accent
	 * 7.0:1 on --hx-bg, and white on --hx-accent 7.3:1.
	 */
	--hx-bg: #fcfaf8;
	--hx-bg-sunk: #f4eee8;
	--hx-surface: #ffffff;
	--hx-surface-2: #faf5f1;
	--hx-line: #e8ded5;
	--hx-line-strong: #d5c6b9;

	--hx-ink: #221c1a;
	--hx-ink-soft: #5c514c;
	--hx-ink-mute: #6f625c;

	--hx-accent: #8e3b52;
	--hx-accent-hover: #742f42;
	--hx-accent-ink: #ffffff;
	--hx-accent-soft: #f8ecef;
	--hx-accent-line: #eed6dd;

	--hx-focus: #8e3b52;
	--hx-focus-halo: #ffffff;

	--hx-good: #2f6b4f;
	--hx-warn: #8a5a12;

	/* No webfont. Two system stacks: a serif for display, the UI stack for text.
	   The serif is what stops the page reading as generic Bootstrap, and it
	   costs zero network requests and zero layout shift. */
	--hx-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--hx-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
	--hx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Fluid type. Ratio ~1.22 on mobile opening to ~1.28 on desktop. */
	--hx-t--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
	--hx-t-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--hx-t-1: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--hx-t-2: clamp(1.3125rem, 1.24rem + 0.37vw, 1.5rem);
	--hx-t-3: clamp(1.5rem, 1.37rem + 0.65vw, 1.9375rem);
	--hx-t-4: clamp(1.8125rem, 1.55rem + 1.3vw, 2.75rem);
	--hx-t-5: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);

	/* Spacing scale, 4px based, fluid at the large end. */
	--hx-s-1: 0.25rem;
	--hx-s-2: 0.5rem;
	--hx-s-3: 0.75rem;
	--hx-s-4: 1rem;
	--hx-s-5: 1.5rem;
	--hx-s-6: 2rem;
	--hx-s-7: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);
	--hx-s-8: clamp(3.5rem, 2.6rem + 4vw, 6rem);

	--hx-radius: 0.75rem;
	--hx-radius-lg: 1.25rem;
	--hx-radius-pill: 999px;

	--hx-shadow-1: 0 1px 2px rgba(52, 34, 28, 0.05), 0 2px 8px rgba(52, 34, 28, 0.04);
	--hx-shadow-2: 0 2px 4px rgba(52, 34, 28, 0.06), 0 12px 28px rgba(52, 34, 28, 0.09);

	--hx-measure: 66ch;
	--hx-wrap: 76rem;
	--hx-wrap-narrow: 46rem;

	--hx-speed: 160ms;
	--hx-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ----------------------------------------------------------- 2. Tokens dark */

@media (prefers-color-scheme: dark) {
	:root {
		--hx-bg: #171311;
		--hx-bg-sunk: #120f0e;
		--hx-surface: #211b18;
		--hx-surface-2: #2a221e;
		--hx-line: #382f2a;
		--hx-line-strong: #4d413a;

		--hx-ink: #f4ece6;
		--hx-ink-soft: #c8bab1;
		--hx-ink-mute: #a2938b;

		--hx-accent: #f0a3b4;
		--hx-accent-hover: #f7c0cc;
		--hx-accent-ink: #2a1017;
		--hx-accent-soft: #33201f;
		--hx-accent-line: #4a2c31;

		--hx-focus: #f7c0cc;
		--hx-focus-halo: #171311;

		--hx-good: #8fd0ae;
		--hx-warn: #e0b169;

		--hx-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
		--hx-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.45);
	}
}

/* -------------------------------------------------------- 3. Reset and base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets must not hide under the sticky header. */
	scroll-padding-top: 5rem;
}

body {
	margin: 0;
	background: var(--hx-bg);
	color: var(--hx-ink);
	font-family: var(--hx-font-ui);
	font-size: var(--hx-t-0);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

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

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

table {
	border-collapse: collapse;
	width: 100%;
}

/* <search> is a landmark element; older engines treat unknown tags as inline
   and would collapse the form's layout. */
search {
	display: block;
}

hr {
	border: 0;
	border-top: 1px solid var(--hx-line);
	margin: var(--hx-s-6) 0;
}

/* ------------------------------------------------ 4. Accessibility primitives */

.hx-skip {
	position: absolute;
	left: var(--hx-s-3);
	top: var(--hx-s-3);
	z-index: 100;
	transform: translateY(-200%);
	background: var(--hx-accent);
	color: var(--hx-accent-ink);
	padding: var(--hx-s-3) var(--hx-s-5);
	border-radius: var(--hx-radius);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--hx-shadow-2);
}

.hx-skip:focus {
	transform: translateY(0);
}

/*
 * Visible focus everywhere. :focus-visible is the target, but the plain
 * :focus rule comes first so a browser without :focus-visible support still
 * shows a ring rather than nothing.
 */
:focus {
	outline: 3px solid var(--hx-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--hx-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--hx-focus-halo);
}

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

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------ 5. Layout primitives */

.hx-wrap {
	width: 100%;
	max-width: var(--hx-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.hx-wrap--narrow {
	max-width: var(--hx-wrap-narrow);
}

.hx-site-main {
	flex: 1 0 auto;
	padding-block: var(--hx-s-6) var(--hx-s-8);
}

.hx-section {
	margin-block-start: var(--hx-s-7);
}

.hx-section:first-child {
	margin-block-start: 0;
}

.hx-stack > * + * {
	margin-block-start: var(--hx-s-4);
}

.hx-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-s-3);
	align-items: center;
}

/* ------------------------------------------------------------------ 6. Type */

h1,
h2,
h3,
h4 {
	font-family: var(--hx-font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.012em;
	text-wrap: balance;
	color: var(--hx-ink);
}

h1 {
	font-size: var(--hx-t-4);
}

h2 {
	font-size: var(--hx-t-3);
}

h3 {
	font-size: var(--hx-t-2);
}

h4 {
	font-size: var(--hx-t-1);
}

.hx-display {
	font-size: var(--hx-t-5);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.hx-lede {
	font-size: var(--hx-t-1);
	line-height: 1.55;
	color: var(--hx-ink-soft);
	max-width: var(--hx-measure);
	text-wrap: pretty;
}

.hx-meta {
	font-size: var(--hx-t--1);
	color: var(--hx-ink-mute);
	letter-spacing: 0.01em;
}

.hx-eyebrow {
	font-family: var(--hx-font-ui);
	font-size: var(--hx-t--1);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hx-accent);
	margin-block-end: var(--hx-s-2);
}

.hx-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-s-3);
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--hx-s-4);
}

/* ------------------------------------------------------ 7. Buttons and links */

a {
	color: var(--hx-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--hx-speed) var(--hx-ease);
}

a:hover {
	color: var(--hx-accent-hover);
}

/* .hx-button is hx-core's class name, printed by the claim call to action, the
   contact form and the registration form. The plugin renders its own markup and
   must not have to know the theme's class names, so the theme answers to both
   rather than the two vocabularies drifting apart. */
.hx-btn,
.hx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hx-s-2);
	/* 44px minimum target on touch, per WCAG 2.5.5. */
	min-height: 2.875rem;
	padding: var(--hx-s-3) var(--hx-s-5);
	border-radius: var(--hx-radius-pill);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: var(--hx-t-0);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: var(--hx-accent);
	color: var(--hx-accent-ink);
	transition: background-color var(--hx-speed) var(--hx-ease), transform var(--hx-speed) var(--hx-ease);
}

.hx-btn:hover,
.hx-button:hover {
	background: var(--hx-accent-hover);
	color: var(--hx-accent-ink);
}

.hx-btn:active,
.hx-button:active {
	transform: translateY(1px);
}

.hx-btn--ghost {
	background: transparent;
	color: var(--hx-ink);
	border-color: var(--hx-line-strong);
}

.hx-btn--ghost:hover {
	background: var(--hx-surface-2);
	color: var(--hx-ink);
	border-color: var(--hx-ink-mute);
}

.hx-btn--soft {
	background: var(--hx-accent-soft);
	color: var(--hx-accent);
	border-color: var(--hx-accent-line);
}

.hx-btn--soft:hover {
	background: var(--hx-accent-soft);
	color: var(--hx-accent-hover);
	border-color: var(--hx-accent);
}

.hx-btn--block {
	width: 100%;
}

.hx-btn__icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------- 8. The mark */

/*
 * THE DEFINING CONSTRAINT. About 3% of salons have a usable logo, so 97% of
 * cards have no image at all. There is no grey placeholder box anywhere in
 * this stylesheet, and no slot is reserved for an image that will usually be
 * absent.
 *
 * Instead every salon gets a mark: its own initials on a colour derived
 * deterministically from its name (hx_mark_hue() in functions.php sets
 * --hx-mark-h). It is real, stable identity, not a stand-in for something
 * missing — the same salon is the same colour on every page, forever.
 *
 * Contrast is guaranteed by construction: only the hue varies, saturation and
 * lightness are fixed, so the worst case across all 360 hues is 5.1:1 in
 * light mode and 7.4:1 in dark. A logo, when one exists, occupies exactly the
 * same box, so the two cases are typographically interchangeable.
 */
.hx-mark {
	--_h: var(--hx-mark-h, 344);
	flex: none;
	inline-size: var(--hx-mark-size, 3.25rem);
	block-size: var(--hx-mark-size, 3.25rem);
	border-radius: calc(var(--hx-mark-size, 3.25rem) * 0.28);
	display: grid;
	place-items: center;
	overflow: hidden;
	background: hsl(var(--_h) 45% 91%);
	color: hsl(var(--_h) 62% 25%);
	font-family: var(--hx-font-display);
	font-weight: 600;
	font-size: calc(var(--hx-mark-size, 3.25rem) * 0.36);
	line-height: 1;
	letter-spacing: 0.01em;
	user-select: none;
}

.hx-mark img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	/* A logo is usually a transparent PNG drawn for white. Give it white to sit
	   on in both schemes rather than inventing a tint that fights the artwork. */
	background: #ffffff;
	padding: 8%;
}

.hx-mark--lg {
	--hx-mark-size: clamp(4rem, 3rem + 4vw, 5.5rem);
}

.hx-mark--sm {
	--hx-mark-size: 2.5rem;
}

@media (prefers-color-scheme: dark) {
	.hx-mark {
		background: hsl(var(--_h) 28% 20%);
		color: hsl(var(--_h) 55% 78%);
	}
}

/* --------------------------------------------- 9. Site header and navigation */

.hx-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--hx-bg);
	border-block-end: 1px solid transparent;
	transition: border-color var(--hx-speed) var(--hx-ease), box-shadow var(--hx-speed) var(--hx-ease);
}

/* Set by main.js. Without JS the header simply never gains a shadow, which is
   a cosmetic difference and nothing more. */
.hx-header.is-stuck {
	border-block-end-color: var(--hx-line);
	box-shadow: var(--hx-shadow-1);
}

.hx-header__inner {
	display: flex;
	align-items: center;
	gap: var(--hx-s-4);
	min-height: 4rem;
	padding-block: var(--hx-s-3);
}

.hx-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 0.15em;
	font-family: var(--hx-font-display);
	font-size: var(--hx-t-2);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--hx-ink);
	text-decoration: none;
	margin-inline-end: auto;
}

.hx-brand:hover {
	color: var(--hx-ink);
}

.hx-brand__dot {
	color: var(--hx-accent);
}

.hx-brand img {
	max-height: 2.25rem;
	width: auto;
}

.hx-nav {
	display: none;
}

.hx-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hx-nav a {
	display: inline-block;
	padding-block: var(--hx-s-2);
	color: var(--hx-ink-soft);
	font-weight: 500;
	text-decoration: none;
	border-block-end: 2px solid transparent;
}

.hx-nav a:hover {
	color: var(--hx-ink);
	border-block-end-color: var(--hx-accent);
}

.hx-nav .current-menu-item > a,
.hx-nav .current_page_item > a {
	color: var(--hx-ink);
	border-block-end-color: var(--hx-accent);
}

/*
 * Navigation without JavaScript: below 48rem the nav is a <details> disclosure,
 * which is a native browser control. Above 48rem it is a plain horizontal list
 * and the disclosure chrome is hidden. Nothing about the menu depends on a
 * script running.
 */
.hx-nav-toggle {
	margin-inline-start: auto;
}

.hx-nav-toggle > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hx-s-2);
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding-inline: var(--hx-s-3);
	border: 1px solid var(--hx-line-strong);
	border-radius: var(--hx-radius-pill);
	cursor: pointer;
	font-size: var(--hx-t--1);
	font-weight: 600;
	color: var(--hx-ink);
}

.hx-nav-toggle > summary::-webkit-details-marker {
	display: none;
}

.hx-nav-toggle__bars {
	width: 1.1rem;
	height: 0.7rem;
	position: relative;
}

.hx-nav-toggle__bars::before,
.hx-nav-toggle__bars::after,
.hx-nav-toggle__bars span {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.hx-nav-toggle__bars::before {
	top: 0;
}

.hx-nav-toggle__bars span {
	top: calc(50% - 1px);
}

.hx-nav-toggle__bars::after {
	bottom: 0;
}

.hx-nav-panel {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--hx-surface);
	border-block-end: 1px solid var(--hx-line);
	box-shadow: var(--hx-shadow-2);
	padding: var(--hx-s-4) 0 var(--hx-s-5);
}

.hx-nav-panel ul {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.hx-nav-panel a {
	display: block;
	padding: var(--hx-s-3) 0;
	border-block-end: 1px solid var(--hx-line);
	font-size: var(--hx-t-1);
}

@media (min-width: 48rem) {
	.hx-nav {
		display: block;
	}

	.hx-nav-toggle {
		display: none;
	}
}

/* ---------------------------------------------------------------- 10. Search */

.hx-hero {
	background: linear-gradient(180deg, var(--hx-accent-soft), var(--hx-bg) 78%);
	padding-block: var(--hx-s-8) var(--hx-s-7);
	border-block-end: 1px solid var(--hx-line);
}

.hx-hero__inner {
	max-width: 44rem;
}

.hx-hero h1 {
	margin-block-end: var(--hx-s-4);
}

.hx-search {
	margin-block-start: var(--hx-s-6);
}

.hx-search__fields {
	display: grid;
	gap: var(--hx-s-3);
	background: var(--hx-surface);
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius-lg);
	padding: var(--hx-s-4);
	box-shadow: var(--hx-shadow-1);
}

.hx-field {
	display: grid;
	gap: var(--hx-s-1);
}

.hx-field > label {
	font-size: var(--hx-t--1);
	font-weight: 600;
	color: var(--hx-ink-soft);
}

.hx-field .hx-hint {
	font-size: var(--hx-t--1);
	color: var(--hx-ink-mute);
}

.hx-input,
.hx-select,
.hx-textarea {
	width: 100%;
	min-height: 2.875rem;
	padding: var(--hx-s-3);
	background: var(--hx-surface);
	color: var(--hx-ink);
	border: 1px solid var(--hx-line-strong);
	border-radius: var(--hx-radius);
	appearance: none;
}

.hx-textarea {
	min-height: 9rem;
	resize: vertical;
	line-height: 1.55;
}

.hx-input::placeholder,
.hx-textarea::placeholder {
	color: var(--hx-ink-mute);
	opacity: 1;
}

.hx-input:hover,
.hx-select:hover,
.hx-textarea:hover {
	border-color: var(--hx-ink-mute);
}

.hx-select {
	/* Chevron drawn as an inline data URI so there is no image request and no
	   external host. currentColor is not available inside url(), so the stroke
	   is the mid ink of each scheme. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236f625c' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--hx-s-3) center;
	background-size: 1rem;
	padding-inline-end: 2.5rem;
}

@media (prefers-color-scheme: dark) {
	.hx-select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a2938b' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
	}
}

@media (min-width: 34rem) {
	.hx-search__fields {
		grid-template-columns: 1fr 1fr auto;
		align-items: end;
	}

	.hx-search__submit {
		grid-column: 3;
	}
}

.hx-search--inline .hx-search__fields {
	box-shadow: none;
	background: var(--hx-surface-2);
}

/* --------------------------------------------------- 11. Salon card and grid */

.hx-results-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-s-3);
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--hx-s-5);
}

.hx-cards {
	/* The card decides its own layout from its own width, not the viewport's.
	   This is the case container queries genuinely earn: the same card appears
	   full width in a one-column list, two-up in a grid, and narrow inside the
	   salon page sidebar, and it must be right in all three. */
	container-type: inline-size;
	container-name: hx-cards;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hx-s-4);
}

@media (min-width: 52rem) {
	.hx-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 78rem) {
	.hx-cards--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hx-card {
	position: relative;
	display: flex;
	gap: var(--hx-s-4);
	padding: var(--hx-s-5);
	background: var(--hx-surface);
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius-lg);
	transition: border-color var(--hx-speed) var(--hx-ease), box-shadow var(--hx-speed) var(--hx-ease), transform var(--hx-speed) var(--hx-ease);
}

.hx-card:hover {
	border-color: var(--hx-line-strong);
	box-shadow: var(--hx-shadow-2);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hx-card:hover {
		transform: translateY(-2px);
	}
}

/* The focus ring belongs to the whole card, because the whole card is the
   target. It is driven by the real <a> inside, never by a div handler. */
.hx-card:focus-within {
	border-color: var(--hx-accent);
	outline: 3px solid var(--hx-focus);
	outline-offset: 2px;
}

.hx-card__body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--hx-s-2);
}

.hx-card__title {
	font-size: var(--hx-t-1);
	line-height: 1.25;
	margin: 0;
}

.hx-card__title a {
	color: var(--hx-ink);
	text-decoration: none;
}

.hx-card__title a:hover {
	color: var(--hx-accent);
	text-decoration: underline;
}

/*
 * Whole-card link. The <a> is real and keyboard reachable; ::after only
 * enlarges its hit area. Interactive children (the phone link) are lifted
 * above it with position:relative so they stay independently clickable.
 */
.hx-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hx-card__where {
	font-size: var(--hx-t--1);
	color: var(--hx-ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4em;
}

.hx-card__sep {
	color: var(--hx-line-strong);
}

.hx-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hx-s-2) var(--hx-s-4);
	margin-block-start: auto;
	padding-block-start: var(--hx-s-2);
}

.hx-card__distance {
	font-size: var(--hx-t--1);
	font-weight: 600;
	color: var(--hx-ink);
	white-space: nowrap;
}

.hx-card__tel {
	position: relative;
	z-index: 1;
	font-size: var(--hx-t--1);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.hx-card__tel:hover {
	text-decoration: underline;
}

.hx-card--featured {
	border-color: var(--hx-accent-line);
	background: linear-gradient(180deg, var(--hx-accent-soft), var(--hx-surface) 4.5rem);
}

@container hx-cards (min-width: 30rem) {
	.hx-card {
		padding: var(--hx-s-5) var(--hx-s-6);
	}

	.hx-card__title {
		font-size: var(--hx-t-2);
	}
}

@container hx-cards (max-width: 22rem) {
	.hx-card {
		flex-direction: column;
		gap: var(--hx-s-3);
	}
}

.hx-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.6em;
	border-radius: var(--hx-radius-pill);
	font-size: var(--hx-t--1);
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--hx-surface-2);
	color: var(--hx-ink-soft);
	border: 1px solid var(--hx-line);
	white-space: nowrap;
}

.hx-badge--featured {
	background: var(--hx-accent-soft);
	color: var(--hx-accent);
	border-color: var(--hx-accent-line);
}

.hx-badge--claimed {
	color: var(--hx-good);
	border-color: color-mix(in srgb, var(--hx-good) 35%, transparent);
	background: color-mix(in srgb, var(--hx-good) 10%, transparent);
}

.hx-empty {
	text-align: center;
	padding: var(--hx-s-8) var(--hx-s-4);
	border: 1px dashed var(--hx-line-strong);
	border-radius: var(--hx-radius-lg);
	color: var(--hx-ink-soft);
}

.hx-empty h2 {
	margin-block-end: var(--hx-s-3);
}

/* ----------------------------------------------------------- 12. Salon page */

.hx-salon-hero {
	background: var(--hx-surface);
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius-lg);
	padding: var(--hx-s-5);
	box-shadow: var(--hx-shadow-1);
}

.hx-salon-hero__top {
	display: flex;
	gap: var(--hx-s-4);
	align-items: flex-start;
}

/* E31: the 'breed' arrangement - the H1 spans the card, the logo sits
   beside the address block below it (owner choice on Salonpagina). */
.hx-salon-hero--wide .hx-salon-hero__top {
	margin-block-start: var(--hx-s-3);
	align-items: center;
}

.hx-salon-hero h1 {
	font-size: var(--hx-t-4);
	margin-block-end: var(--hx-s-2);
}

.hx-salon-hero__where {
	color: var(--hx-ink-soft);
	font-size: var(--hx-t-0);
}

.hx-salon-hero__sub {
	margin-block-start: 0.35rem;
}

.hx-salon-hero__badges {
	margin-block-start: var(--hx-s-3);
}

.hx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-s-3);
	margin-block-start: var(--hx-s-5);
	padding-block-start: var(--hx-s-5);
	border-block-start: 1px solid var(--hx-line);
}

.hx-actions .hx-btn {
	flex: 1 1 10rem;
}

@media (min-width: 40rem) {
	.hx-salon-hero {
		padding: var(--hx-s-6);
	}

	.hx-actions .hx-btn {
		flex: 0 0 auto;
	}
}

.hx-salon-layout {
	display: grid;
	gap: var(--hx-s-7);
	margin-block-start: var(--hx-s-6);
	align-items: start;
}

@media (min-width: 60rem) {
	.hx-salon-layout {
		grid-template-columns: minmax(0, 1fr) 21rem;
	}

	.hx-salon-aside {
		position: sticky;
		top: 5.5rem;
	}
}

.hx-panel {
	background: var(--hx-surface);
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius-lg);
	padding: var(--hx-s-5);
}

.hx-panel + .hx-panel {
	margin-block-start: var(--hx-s-4);
}

.hx-panel > h2,
.hx-panel > h3 {
	font-size: var(--hx-t-1);
	margin-block-end: var(--hx-s-4);
}

/* Name/address/phone block. A description list is the honest element: these
   are label/value pairs, and screen readers announce them as such. */
.hx-nap {
	display: grid;
	gap: var(--hx-s-3);
	margin: 0;
}

.hx-nap__row {
	display: grid;
	grid-template-columns: 1.4rem 1fr;
	gap: var(--hx-s-3);
	align-items: start;
}

.hx-nap dt {
	grid-column: 1;
	color: var(--hx-ink-mute);
}

.hx-nap dd {
	grid-column: 2;
	margin: 0;
	min-width: 0;
}

.hx-nap__icon {
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--hx-ink-mute);
}

.hx-nap a {
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------- 13. Opening hours */

.hx-hours {
	font-size: var(--hx-t-0);
}

.hx-hours th,
.hx-hours td {
	text-align: start;
	padding-block: var(--hx-s-2);
	border-block-end: 1px solid var(--hx-line);
	vertical-align: baseline;
}

.hx-hours tr:last-child th,
.hx-hours tr:last-child td {
	border-block-end: 0;
}

.hx-hours th {
	font-weight: 500;
	color: var(--hx-ink-soft);
	width: 45%;
}

.hx-hours td {
	font-variant-numeric: tabular-nums;
}

.hx-hours .is-today th,
.hx-hours .is-today td {
	font-weight: 700;
	color: var(--hx-ink);
}

.hx-hours .is-closed td {
	color: var(--hx-ink-mute);
	font-weight: 400;
}

.hx-hours__label {
	display: block;
	font-size: var(--hx-t--1);
	font-weight: 500;
	color: var(--hx-accent);
}

.hx-hours__note {
	display: block;
	font-size: var(--hx-t--1);
	color: var(--hx-ink-mute);
}

/* ------------------------------------------- 14. Services, brands and chips */

.hx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hx-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.3rem 0.8rem;
	border-radius: var(--hx-radius-pill);
	border: 1px solid var(--hx-line);
	background: var(--hx-surface-2);
	color: var(--hx-ink-soft);
	font-size: var(--hx-t--1);
	line-height: 1.3;
	text-decoration: none;
	transition: border-color var(--hx-speed) var(--hx-ease), color var(--hx-speed) var(--hx-ease), background-color var(--hx-speed) var(--hx-ease);
}

a.hx-chip:hover {
	border-color: var(--hx-accent);
	background: var(--hx-accent-soft);
	color: var(--hx-accent);
}

.hx-chip--more {
	background: transparent;
	color: var(--hx-ink-mute);
	border-style: dashed;
}

/* Card chips are decoration under a whole-card link, so they must not look or
   behave like separate targets. */
.hx-card .hx-chip {
	min-height: 0;
	padding: 0.15rem 0.6rem;
	pointer-events: none;
}

.hx-services-list {
	display: grid;
	gap: var(--hx-s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 34rem) {
	.hx-services-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hx-service-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hx-s-3);
	min-height: 2.875rem;
	padding: var(--hx-s-3);
	border-radius: var(--hx-radius);
	border: 1px solid var(--hx-line);
	background: var(--hx-surface);
	color: var(--hx-ink);
	text-decoration: none;
	font-weight: 500;
}

.hx-service-link:hover {
	border-color: var(--hx-accent);
	background: var(--hx-accent-soft);
	color: var(--hx-accent);
}

.hx-service-link[aria-current="page"] {
	border-color: var(--hx-accent);
	background: var(--hx-accent-soft);
	color: var(--hx-accent);
	font-weight: 700;
}

.hx-service-link__chevron {
	flex: none;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.55;
}

/* Native disclosure — the long service and brand lists collapse with no JS. */
.hx-disclosure > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--hx-s-2);
	min-height: 2.75rem;
	font-weight: 600;
	color: var(--hx-accent);
}

.hx-disclosure > summary::-webkit-details-marker {
	display: none;
}

.hx-disclosure > summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--hx-speed) var(--hx-ease);
}

.hx-disclosure[open] > summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.hx-disclosure__body {
	padding-block-start: var(--hx-s-4);
}

/* -------------------------------------------------------------- 15. Gallery */

.hx-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hx-s-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.hx-gallery img {
	width: 100%;
	/* Fixed ratio + explicit width/height attributes in the markup: the box is
	   reserved before the bytes arrive, so images never shift the layout. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hx-radius);
	background: var(--hx-surface-2);
}

/* --------------------------------------------------------- 16. Contact form */

.hx-form {
	display: grid;
	gap: var(--hx-s-4);
}

.hx-form__row {
	display: grid;
	gap: var(--hx-s-4);
}

@media (min-width: 34rem) {
	.hx-form__row--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hx-required {
	color: var(--hx-accent);
	font-weight: 700;
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   display:none fields. aria-hidden + tabindex=-1 keep it away from real users
   and from assistive technology. */
.hx-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hx-notice {
	padding: var(--hx-s-4);
	border-radius: var(--hx-radius);
	border: 1px solid var(--hx-line);
	background: var(--hx-surface-2);
	margin-block-end: var(--hx-s-5);
}

.hx-notice--ok {
	border-color: color-mix(in srgb, var(--hx-good) 40%, transparent);
	background: color-mix(in srgb, var(--hx-good) 10%, transparent);
}

.hx-notice--error {
	border-color: var(--hx-accent);
	background: var(--hx-accent-soft);
}

/* ---------------------------------------------------- 17. Editorial content */

.hx-prose {
	max-width: var(--hx-measure);
	color: var(--hx-ink-soft);
	font-size: var(--hx-t-0);
	line-height: 1.7;
}

.hx-prose > * + * {
	margin-block-start: var(--hx-s-4);
}

.hx-prose h2,
.hx-prose h3,
.hx-prose h4 {
	color: var(--hx-ink);
	margin-block-start: var(--hx-s-6);
}

.hx-prose ul,
.hx-prose ol {
	padding-inline-start: 1.35em;
}

.hx-prose li + li {
	margin-block-start: var(--hx-s-2);
}

.hx-prose img {
	border-radius: var(--hx-radius);
}

.hx-prose blockquote {
	margin: 0;
	padding-inline-start: var(--hx-s-5);
	border-inline-start: 3px solid var(--hx-accent-line);
	font-family: var(--hx-font-display);
	font-size: var(--hx-t-1);
	color: var(--hx-ink);
}

.hx-prose code {
	font-family: var(--hx-font-mono);
	font-size: 0.9em;
	background: var(--hx-surface-2);
	padding: 0.15em 0.35em;
	border-radius: 4px;
}

.hx-prose pre {
	overflow-x: auto;
	padding: var(--hx-s-4);
	background: var(--hx-surface-2);
	border-radius: var(--hx-radius);
}

/* Any wide thing — an editor table, an embed — scrolls inside itself. The page
   body must never scroll sideways. */
.hx-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hx-prose table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.hx-entry-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hx-s-6);
}

.hx-entry__title {
	font-size: var(--hx-t-2);
	margin-block-end: var(--hx-s-2);
}

.hx-entry__title a {
	color: var(--hx-ink);
	text-decoration: none;
}

.hx-entry__title a:hover {
	color: var(--hx-accent);
	text-decoration: underline;
}

.hx-entry + .hx-entry {
	border-block-start: 1px solid var(--hx-line);
	padding-block-start: var(--hx-s-6);
}

/* ------------------------------- 18. Pagination, breadcrumbs and small parts */

.hx-crumbs {
	font-size: var(--hx-t--1);
	color: var(--hx-ink-mute);
	margin-block-end: var(--hx-s-5);
}

.hx-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hx-crumbs li::after {
	content: "/";
	margin-inline-start: 0.5em;
	color: var(--hx-line-strong);
}

.hx-crumbs li:last-child::after {
	content: none;
}

.hx-crumbs a {
	color: var(--hx-ink-mute);
}

.hx-crumbs a:hover {
	color: var(--hx-accent);
}

.hx-crumbs [aria-current="page"] {
	color: var(--hx-ink-soft);
}

.hx-pagination {
	margin-block-start: var(--hx-s-7);
}

.hx-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-s-2);
	align-items: center;
	justify-content: center;
}

.hx-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--hx-s-3);
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius);
	color: var(--hx-ink-soft);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.hx-pagination a.page-numbers:hover {
	border-color: var(--hx-accent);
	color: var(--hx-accent);
}

.hx-pagination .page-numbers.current {
	background: var(--hx-accent);
	border-color: var(--hx-accent);
	color: var(--hx-accent-ink);
	font-weight: 700;
}

.hx-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
}

.hx-to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 20;
	width: 2.875rem;
	height: 2.875rem;
	padding: 0;
	border-radius: 50%;
	background: var(--hx-surface);
	color: var(--hx-ink);
	border: 1px solid var(--hx-line-strong);
	box-shadow: var(--hx-shadow-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity var(--hx-speed) var(--hx-ease), transform var(--hx-speed) var(--hx-ease), visibility var(--hx-speed);
}

.hx-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* --------------------------------------------------------------- 19. Footer */

.hx-footer {
	margin-block-start: var(--hx-s-8);
	background: var(--hx-bg-sunk);
	border-block-start: 1px solid var(--hx-line);
	padding-block: var(--hx-s-7) var(--hx-s-6);
	color: var(--hx-ink-soft);
	font-size: var(--hx-t--1);
}

.hx-footer__grid {
	display: grid;
	gap: var(--hx-s-6);
}

@media (min-width: 44rem) {
	.hx-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.hx-footer h2 {
	font-family: var(--hx-font-ui);
	font-size: var(--hx-t--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-ink);
	margin-block-end: var(--hx-s-3);
}

.hx-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hx-s-2);
}

.hx-footer a {
	color: var(--hx-ink-soft);
	text-decoration: none;
}

.hx-footer a:hover {
	color: var(--hx-accent);
	text-decoration: underline;
}

.hx-footer__cta {
	margin-block-start: var(--hx-s-4);
}

.hx-colophon {
	margin-block-start: var(--hx-s-6);
	padding-block-start: var(--hx-s-4);
	border-block-start: 1px solid var(--hx-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-s-3);
	justify-content: space-between;
	color: var(--hx-ink-mute);
}

/* ---------------------------------------------------------------- 20. Print */

@media print {
	.hx-header,
	.hx-footer,
	.hx-to-top,
	.hx-search,
	.hx-actions,
	.hx-contact {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.hx-panel,
	.hx-salon-hero,
	.hx-card {
		border: 1px solid #ccc;
		box-shadow: none;
		break-inside: avoid;
	}
}

/* ------------------------------------------------------ 21. Listing filters */

/* The facet selects sit inside the finder form, so they inherit .hx-field and
   .hx-input and need almost nothing of their own. Two forms became one; this
   block shrank with it. */
.hx-field--facet select.hx-input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--hx-ink-mute) 50%),
		linear-gradient(135deg, var(--hx-ink-mute) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
	padding-right: 2rem;
}

/* ------------------------------------------------------ 22. Service tiles */

/* The /kapsalons service directory. A plain responsive grid of links - the
   legacy page's defining feature, and the only internal linking the 43 service
   pages get. */
.hx-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hx-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius);
	background: var(--hx-surface);
	color: var(--hx-ink);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hx-tile:hover,
.hx-tile:focus-visible {
	background: var(--hx-brand);
	border-color: var(--hx-brand);
	color: #fff;
	text-decoration: none;
}

/* ---------------------------------------------------------- 23. Events */

.hx-eventlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.hx-event {
	padding-left: 0.9rem;
	border-left: 3px solid var(--hx-brand);
}

.hx-event__title {
	margin: 0 0 0.15rem;
	font-size: 1rem;
}

/* ------------------------------------------------- 24. Long forms and the FAQ */

/* The registration form groups its fields; the salon contact form does not.
   A <fieldset> is the right element for that - it is what a screen reader
   announces the group by - but its default border and legend placement belong
   to 1997, so both are replaced rather than the element being avoided. */
.hx-fieldset {
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius-lg);
	padding: var(--hx-s-5);
	margin: 0;
	display: grid;
	gap: var(--hx-s-4);
	background: var(--hx-surface);
}

.hx-fieldset > legend {
	padding: 0 var(--hx-s-2);
	margin-inline-start: calc(var(--hx-s-2) * -1);
	font-size: var(--hx-t-1);
	font-weight: 700;
	color: var(--hx-ink);
}

/* A hint that is not inside a .hx-field - the one introducing the treatment
   list, which describes the whole group rather than one input. */
.hx-form .hx-hint {
	font-size: var(--hx-t--1);
	color: var(--hx-ink-mute);
	margin: 0;
}

/* 43 treatments. A single column is a very long scroll and a free-flowing
   inline list breaks mid-label, so they go into as many even columns as fit. */
.hx-checklist {
	display: grid;
	gap: var(--hx-s-2);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.hx-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--hx-s-2);
	/* 44px minimum target on touch, as with .hx-btn. */
	min-height: 2.75rem;
	padding: var(--hx-s-2);
	border-radius: var(--hx-radius);
	font-size: var(--hx-t--1);
	color: var(--hx-ink-soft);
	cursor: pointer;
}

.hx-checklist__item:hover {
	background: var(--hx-surface-2);
}

.hx-checklist__item input {
	/* Nudged onto the first line of a label that wraps to two. */
	margin-block-start: 0.15rem;
	flex: none;
}

.hx-consent {
	margin: 0;
}

.hx-consent .hx-checklist__item {
	font-size: var(--hx-t-0);
	color: var(--hx-ink);
}

/* The legacy FAQ accordion needed JavaScript to open an answer. <details> does
   it natively, keyboard included, and is findable by the browser's own
   in-page search - so there is nothing here but presentation. */
.hx-faq {
	display: grid;
	gap: var(--hx-s-2);
	margin-block: var(--hx-s-4);
}

.hx-faq__item {
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius);
	background: var(--hx-surface);
	overflow: hidden;
}

.hx-faq__item > summary {
	padding: var(--hx-s-3) var(--hx-s-4);
	font-weight: 600;
	color: var(--hx-ink);
	cursor: pointer;
	list-style-position: inside;
}

.hx-faq__item > summary:hover {
	background: var(--hx-surface-2);
}

.hx-faq__item[open] > summary {
	border-block-end: 1px solid var(--hx-line);
}

.hx-faq__item > *:not(summary) {
	padding-inline: var(--hx-s-4);
	color: var(--hx-ink-soft);
}

.hx-faq__item > *:not(summary):last-child {
	padding-block-end: var(--hx-s-3);
}

/* -------------------------------------------------------------- 25. Vacancies */

.hx-vacancy-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hx-s-4);
}

.hx-vacancy {
	padding: var(--hx-s-5);
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius-lg);
	background: var(--hx-surface);
}

.hx-vacancy__title {
	margin: 0 0 var(--hx-s-1);
	font-size: var(--hx-t-1);
}

.hx-vacancy .hx-chips {
	margin-block: var(--hx-s-2) 0;
}

/* Label/value pairs on a vacancy page. Stacked on a phone, two columns from
   the point where a label and its value fit side by side. */
.hx-facts {
	display: grid;
	gap: var(--hx-s-2) var(--hx-s-4);
	margin: 0;
	padding-block-start: var(--hx-s-4);
	border-block-start: 1px solid var(--hx-line);
}

.hx-facts dt {
	font-size: var(--hx-t--1);
	font-weight: 600;
	color: var(--hx-ink-mute);
}

.hx-facts dd {
	margin: 0;
	color: var(--hx-ink-soft);
}

@media (min-width: 34rem) {
	.hx-facts {
		grid-template-columns: max-content 1fr;
	}

	.hx-facts dt {
		grid-column: 1;
	}

	.hx-facts dd {
		grid-column: 2;
	}
}

/* ---------------------------------------------------------------------------
 * The giftbox signup.
 *
 * Two columns on anything wider than a phone - details on the left, the hair
 * profile on the right - because that is the shape the legacy form had and the
 * shape the copy assumes ("Uw gegevens" / "Waar mogen de aanbiedingen over
 * gaan?").
 *
 * The 85 options are the reason for the <details> grouping. Shown flat they
 * would be four screens of checkboxes and nobody would reach the button; closed
 * by default, the form is four lines and the person opens only the group that
 * is about them. Native <details> rather than JavaScript, so it works with
 * scripting off and is keyboard-operable without any work.
 * ------------------------------------------------------------------------ */

.hx-giftbox__cols {
	display: grid;
	gap: var(--hx-s-5);
}

@media (min-width: 44rem) {
	.hx-giftbox__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		align-items: start;
	}
}

.hx-giftbox__col {
	display: grid;
	gap: var(--hx-s-4);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hx-giftbox__col > legend {
	padding: 0;
	font-size: var(--hx-t-1);
	font-weight: 700;
	color: var(--hx-ink);
}

.hx-giftbox__intro {
	margin: 0;
	font-size: var(--hx-t--1);
	color: var(--hx-ink-soft);
}

.hx-giftbox__group {
	border: 1px solid var(--hx-line);
	border-radius: var(--hx-radius, 8px);
	background: var(--hx-surface, transparent);
}

.hx-giftbox__group + .hx-giftbox__group {
	margin-top: var(--hx-s-2);
}

.hx-giftbox__group > summary {
	padding: var(--hx-s-3) var(--hx-s-4);
	font-weight: 600;
	cursor: pointer;
}

.hx-giftbox__group > summary:focus-visible {
	outline: 3px solid var(--hx-accent);
	outline-offset: -3px;
}

.hx-giftbox__list {
	margin: 0;
	padding: 0 var(--hx-s-4) var(--hx-s-3);
	list-style: none;
}

.hx-giftbox__opt > label {
	display: flex;
	gap: var(--hx-s-2);
	align-items: baseline;
	padding: 0.2rem 0;
	font-size: var(--hx-t--1);
	color: var(--hx-ink-soft);
	cursor: pointer;
}

/* The legacy tree is three deep in one place - Kort/Medium/Lang under Baard
 * under Man - and the indent is what makes that readable without nesting three
 * levels of list markup. */
.hx-giftbox__opt--d1 > label {
	font-weight: 600;
	color: var(--hx-ink);
}

.hx-giftbox__opt--d2 {
	padding-left: var(--hx-s-4);
}

.hx-giftbox__opt--d3 {
	padding-left: calc(var(--hx-s-4) * 2);
}

.hx-field--check > label {
	display: flex;
	gap: var(--hx-s-2);
	align-items: baseline;
	font-weight: 600;
	color: var(--hx-ink);
}

/* ---------------------------------------------------------- 26. Advertenties */

/*
 * The RESERVATION is deliberately not here. Each placement's width and height
 * are printed by HX_Ads::reservation_css() on wp_head 19, from the same file
 * that prints the <ins>. Splitting the markup and the box that holds its space
 * across two deployables would give every upload a window - plugin uploaded,
 * theme not yet, or a sibling whose theme is a version behind - in which
 * 142,000 routes carry ad markup with no reservation at all. That is exactly
 * the 2026-08-20 failure (GSC: CLS 0.12-0.16 on 4,906 mobile URLs, all of it
 * Auto ads injecting containers after load), recreated on purpose.
 *
 * What lives here is spacing, because spacing is a conversation between the
 * slot and the theme's own blocks - and a wrong margin can safely lag a deploy
 * by an hour where a missing reservation cannot.
 */

.hx-ad-slot {
	margin-block: var(--hx-s-5);
	max-width: 100%;
}

/* Both the AdSense policies and plain honesty want the thing named. Small and
   muted, and inside the reserved area, so the label costs no extra shift. */
.hx-ad-slot__label {
	display: block;
	margin-block-end: 0.25rem;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hx-ink-mute);
}

/*
 * .hx-panel + .hx-panel (section 17) has specificity 0,2,0 and beats
 * .hx-section at 0,1,0. The sidebar panels on a salon page are bare
 * .hx-panel, so dropping a slot between the contact card and the opening
 * hours would leave the hours matching nothing at all: no top margin, butted
 * straight against the ad. These two rules answer that, and they are
 * self-healing - an unconfigured slot emits zero bytes and the original
 * adjacency re-matches on its own.
 */
.hx-panel + .hx-ad-slot,
.hx-ad-slot + .hx-panel {
	margin-block-start: var(--hx-s-4);
}

/* A section-spaced block after a slot keeps its section spacing: without this
   the ad would quietly tighten the gap on 11,663 salon pages, which reads as a
   bug even though nothing shifts. 0,3,0 beats the 0,2,0 above. */
.hx-ad-slot + .hx-panel.hx-section,
.hx-ad-slot + .hx-section {
	margin-block-start: var(--hx-s-7);
}

/*
 * .hx-wrap's padding is clamp(1rem, 4vw, 2.5rem), so below a 400px viewport
 * the 1rem floor wins and the usable width is viewport - 32px: a 320px phone
 * leaves 288px, and a 300px-wide unit would push the whole body sideways on
 * every listing and salon page. Clipped by 12px beats a horizontally
 * scrolling site. This is a horizontal clip only - it never touches the
 * reserved height, so it cannot become a shift.
 */
.hx-ad-slot,
.hx-ad-slot > .hx-ad {
	max-width: 100%;
}

@media print {
	.hx-ad-slot {
		display: none;
	}
}