/*
 * SMYN theme overrides v2 — Hello Elementor parent. Loaded after
 * tokens.css + blocks.css. Palette tokens only (no cool greys).
 * Carries: page shell (zero-gap), base typography, buttons/forms,
 * header shims (mega dropdown, cream mobile overlay), blog/search/404
 * and the pre-import footer fallback.
 */

/* ==================================================================
   0. Page shell — ZERO-GAP contract (spec v2 §0)
   ================================================================== */
body { margin: 0; }

/* Skip link (WCAG 2.4.1). Invisible until it takes keyboard focus, so the
   design is unchanged for everyone using a mouse or touch. */
.smyn-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 14px 20px;
	background: #1A1714;
	color: #FDFAF7;
	font-weight: 700; font-size: 11px; line-height: 1; font-family: var(--smyn-font-label);
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
}
.smyn-skip-link:focus,
.smyn-skip-link:focus-visible {
	left: 12px;
	top: 12px;
	outline: 2px solid #822E27;
	outline-offset: 2px;
}
.smyn-site-main { display: block; margin: 0; padding: 0; }
.smyn-site-main > *:first-child { margin-top: 0; }
.smyn-site-header { position: relative; z-index: 9995; }

/* ==================================================================
   1. Base typography — brand scale
   ================================================================== */
body {
	font-family: var(--smyn-font-body);
	/*
	 * 400, not 500. Glacial Indifference ships 400 and 700 and nothing between,
	 * so `font-weight: 400` asked for a face that does not exist and the browser
	 * rounded it back to 400 anyway — the declaration described a weight the
	 * site has never actually rendered.
	 */
	font-weight: var(--smyn-w-regular);
	/*
	 * 15px, not 14px. The brief's body floor is 15-17px, and 14px was the base
	 * every unstyled paragraph on the site inherited.
	 */
	font-size: var(--smyn-fs-body);
	line-height: var(--smyn-lh-body);
	color: var(--smyn-ink);
	background-color: var(--smyn-cream);
	/* Arrows/glyphs must render as text, never colour emoji (iOS). */
	font-variant-emoji: text;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--smyn-font-display);
	color: var(--smyn-ink);
}

/*
 * Every heading weight below is 400 or 700, because those are the only two
 * Glacial Indifference has. h1/h2 previously asked for 300 and h5/h6 for
 * 500/600; at display sizes Glacial's geometric 400 already reads light, so
 * the character is kept without asking for a face that isn't there.
 */
h1 { font-weight: 400; font-size: 48px; line-height: 1.08; letter-spacing: -1px; }
h2 { font-weight: 400; font-size: 38px; line-height: 1.1;  letter-spacing: -1px; }
h3 { font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.5px; }
h4 { font-weight: 400; font-size: 22px; line-height: 1.2; }
h5 { font-weight: 400; font-size: 18px; line-height: 1.3; }
/* h6 is a tracked uppercase label, so it takes the label face, not display. */
h6 {
	font-family: var(--smyn-font-label);
	font-weight: var(--smyn-w-label);
	font-size: var(--smyn-fs-label);
	line-height: 1.4;
	letter-spacing: var(--smyn-ls-label-tight);
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	h1 { font-size: 38px; }
	h2 { font-size: 30px; }
	h3 { font-size: 24px; }
}
@media (max-width: 767px) {
	h1 { font-size: 30px; }
	h2 { font-size: 26px; }
	h3 { font-size: 22px; }
	h4 { font-size: 21px; }
}

a {
	color: var(--smyn-terracotta);
	transition: color .3s cubic-bezier(.22,.61,.36,1);
}
a:hover, a:focus { color: var(--smyn-terracotta-hover); }

::selection { background: var(--smyn-champagne); color: var(--smyn-ink); }

/* ==================================================================
   2. Buttons — site-wide recipes (spec §5)
   ================================================================== */

/* Primary: terracotta fill. */
.smyn-btn,
.smyn-btn-primary,
.smyn-btn-secondary,
.smyn-btn-on-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 0;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .6px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color .3s cubic-bezier(.22,.61,.36,1),
		border-color .3s cubic-bezier(.22,.61,.36,1),
		color .3s cubic-bezier(.22,.61,.36,1),
		transform .3s cubic-bezier(.22,.61,.36,1);
}

.smyn-btn-primary {
	background-color: var(--smyn-terracotta);
	border: 1px solid var(--smyn-terracotta);
	color: #FFFFFF;
}
.smyn-btn-primary:hover, .smyn-btn-primary:focus {
	background-color: var(--smyn-terracotta-hover);
	border-color: var(--smyn-terracotta-hover);
	color: #FFFFFF;
	transform: translateY(-1px);
}

/* Secondary: 1px ink outline on cream. */
.smyn-btn-secondary {
	background-color: transparent;
	border: 1px solid var(--smyn-ink);
	color: var(--smyn-ink);
}
.smyn-btn-secondary:hover, .smyn-btn-secondary:focus {
	background-color: var(--smyn-ink);
	color: var(--smyn-cream);
	transform: translateY(-1px);
}

/* On-dark: champagne outline. */
.smyn-btn-on-dark {
	background-color: transparent;
	border: 1px solid var(--smyn-champagne);
	color: var(--smyn-champagne);
}
.smyn-btn-on-dark:hover, .smyn-btn-on-dark:focus {
	background-color: var(--smyn-champagne);
	border-color: var(--smyn-champagne);
	color: var(--smyn-ink);
	transform: translateY(-1px);
}

/* Underline CTA: text + 1px underline, offset 4px, trailing arrow. */
.smyn-cta-underline {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--smyn-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-cta-underline::after {
	content: "\2197";
	text-decoration: none;
	display: inline-block;
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-cta-underline:hover, .smyn-cta-underline:focus { color: var(--smyn-terracotta); }
.smyn-cta-underline:hover::after, .smyn-cta-underline:focus::after { transform: translate(3px, -3px); }

.smyn-btn:focus-visible,
.smyn-btn-primary:focus-visible,
.smyn-btn-secondary:focus-visible,
.smyn-btn-on-dark:focus-visible,
.smyn-cta-underline:focus-visible {
	outline: 2px solid var(--smyn-terracotta);
	outline-offset: 3px;
}

/* Buttons run 11/11/10px across desktop/tablet/mobile (spec §5). */
@media (max-width: 767px) {
	.smyn-btn,
	.smyn-btn-primary,
	.smyn-btn-secondary,
	.smyn-btn-on-dark {
		font-size: 10px;
	}
}

/* ==================================================================
   3. Forms — cream fields, warm hairlines, terracotta focus
   ================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
	background-color: var(--smyn-cream);
	border: 1px solid var(--smyn-line);
	border-radius: 0;
	color: var(--smyn-ink);
	font-family: var(--smyn-font-label);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	padding: 12px 14px;
	transition: border-color .3s cubic-bezier(.22,.61,.36,1);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
	border-color: var(--smyn-terracotta);
	outline: 2px solid var(--smyn-terracotta);
	outline-offset: 2px;
}
::placeholder { color: var(--smyn-muted); opacity: 1; }

form label,
.wpcf7 label,
.woocommerce form label {
	display: block;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--smyn-terracotta);
	margin-bottom: 8px;
}

input[type="submit"],
button[type="submit"] {
	border-radius: 0;
	background-color: var(--smyn-terracotta);
	border: 1px solid var(--smyn-terracotta);
	color: #FFFFFF;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	min-height: 48px;
	padding: 0 24px;
	cursor: pointer;
	transition: background-color .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--smyn-terracotta-hover);
	border-color: var(--smyn-terracotta-hover);
}

/* iOS: 16px inputs stop the focus zoom. */
@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="date"],
	textarea,
	select {
		font-size: 16px;
	}
}

/* ==================================================================
   4. Blog (journal) — Hello Elementor markup restyled onto the tokens
   ================================================================== */
.smyn-site-main article.post,
.smyn-site-main article.page {
	max-width: 760px;
	margin: 0 auto 56px;
	padding: 0 20px;
	background: transparent;
}
.smyn-site-main .post-thumbnail img,
.smyn-site-main .entry-content img {
	display: block;
	max-width: 100%;
	height: auto;
}
.smyn-site-main article .entry-title,
.smyn-site-main article .entry-title a {
	font-family: var(--smyn-font-body);
	font-weight: var(--smyn-w-regular);
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--smyn-ink);
	text-decoration: none;
}
.smyn-site-main article .entry-title a:hover,
.smyn-site-main article .entry-title a:focus { color: var(--smyn-terracotta); }
.smyn-site-main .entry-meta,
.smyn-site-main .post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--smyn-muted);
	margin: 14px 0 16px;
}
.smyn-site-main .entry-meta a,
.smyn-site-main .post-meta a { color: var(--smyn-mocha); text-decoration: none; }
.smyn-site-main .entry-meta a:hover,
.smyn-site-main .post-meta a:hover { color: var(--smyn-terracotta); }
.smyn-site-main .entry-content,
.smyn-site-main .entry-summary {
	font-family: var(--smyn-font-label);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.7;
	color: var(--smyn-mocha-dark);
}
.smyn-site-main .page-header .page-title {
	font-weight: 400;
	letter-spacing: -1px;
}
.pagination a, .page-numbers a { color: var(--smyn-terracotta); }
.pagination .current, .page-numbers.current { color: var(--smyn-ink); }

/* ==================================================================
   6. Header shims — rules the PHP partial needs beyond blocks.css
   ================================================================== */

/* Logo: the header bar is terracotta, so it asks smyn_render_logo() for the
   LIGHT variant and gets the owner's own cream artwork. It used to take
   whatever the WordPress Site Logo was and knock it white with
   `filter: brightness(0) invert(1)`, which is not a white logo — it is every
   colour in the file crushed to one, so a warm ink wordmark comes out cold
   and anything with two tones comes out flat. The variant is chosen now, so
   there is nothing left to fake.

   If a site has only a Site Logo set, it is used as-is: uploading a Light
   Logo under Appearance -> SMYN Theme Settings is the fix, not a filter.

   Sizing (display/width/max-height at every breakpoint) is owned by the
   blocks.css !important rules — only height:auto is needed here, to
   neutralise the img height attribute. */
.smyn-header-logo img {
	height: auto;
}

/* Desktop nav — plain wp_nav_menu ul instead of the wdt widget.
   Layout and type (flex/gap/justify, margins, font, colors, transition)
   are owned by the blocks.css `.smyn-nav-desktop nav > ul` !important
   rules — only what blocks.css does not set lives here. */
.smyn-nav-desktop .smyn-nav-list {
	list-style: none;
}

/* Header column widths — SEVEN menu items + five actions never overlap.
   blocks.css ships the v1 23/25/52 split (!important), which is too narrow
   for the v2 menu; these later !important rules win via load order. The
   full desktop bar runs ≥1201px; 1025–1200px uses burger + actions. */
@media (min-width: 1201px) {
	.smyn-header-logo-col { flex: 0 0 16% !important; width: 16% !important; }
	.smyn-header-menu-col { flex: 0 0 45% !important; width: 45% !important; }
	.smyn-header-actions-col { flex: 0 0 39% !important; width: 39% !important; }
	.smyn-nav-desktop .smyn-nav-list,
	.smyn-nav-desktop nav > ul {
		display: flex;
		flex-wrap: nowrap !important;
		gap: 16px !important;
		min-width: 0;
	}
	.smyn-nav-desktop .smyn-nav-list > li > a { white-space: nowrap; }
}
@media (min-width: 1201px) and (max-width: 1560px) {
	.smyn-nav-desktop .smyn-nav-list > li > a { font-size: 12px !important; }
}
@media (min-width: 1201px) and (max-width: 1366px) {
	.smyn-nav-desktop .smyn-nav-list,
	.smyn-nav-desktop nav > ul { gap: 11px !important; }
	.smyn-nav-desktop .smyn-nav-list > li > a { font-size: 11px !important; letter-spacing: .05em !important; }
}
/* Tablet-wide band: the desktop list would not fit — burger takes over. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.smyn-header-logo-col { flex: 0 0 24% !important; width: 24% !important; }
	.smyn-header-menu-col,
	.smyn-nav-desktop { display: none !important; }
	.smyn-header-actions-col { flex: 0 0 76% !important; width: 76% !important; }
	.smyn-nav-mobile { display: block !important; }
}
.smyn-nav-desktop .smyn-nav-list li { position: relative; margin: 0; padding: 0; }
/*
 * Top-level items stay bar-height. That is LAYOUT — it is what anchors each
 * dropdown to the bottom edge of the header via the panel's `top: 100%`, and
 * it is not what should open anything.
 *
 * It used to be the hover trigger as well, and that was the bug: measured at
 * 1440/1280/1201 the <li> is 84px tall while its link box is 44px, so 20px
 * above and 20px below the word opened that item's submenu with the pointer
 * nowhere near it. Travelling along the bar through those bands opened panels
 * the visitor never aimed at. The trigger now lives on the link — see the
 * hover block further down.
 */
.smyn-nav-desktop .smyn-nav-list > li {
	display: flex;
	align-items: center;
	min-height: 84px;
}
/*
 * The link IS the target, and it already has the right shape: blocks.css gives
 * it `min-height: 44px` and `padding: 0 !important`, so it is the word's width
 * by 44px tall, centred in the 84px item. That is a comfortable target — 44px
 * is the accessible minimum — while covering barely half the item's height,
 * which is what makes the bands above and below inert.
 *
 * Nothing is added here on purpose. Padding would be dead code against that
 * !important; overriding the 44px would drag the underline (`::after` sits
 * 2px off the link's bottom edge) and change a header the brief says not to
 * redesign; and horizontal padding has nowhere to go — measured at 1440 the
 * seven items already fill their column exactly, 609px of nav in a 609px
 * track, so widening any item wraps the bar.
 */
.smyn-nav-desktop .smyn-nav-list > li > a {
	position: relative;
	text-decoration: none;
}
.smyn-nav-desktop .smyn-nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: var(--smyn-champagne);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
/* Hover/current colors come from blocks.css (!important); the ::after
   underline activation for current items is ours — blocks.css only
   covers :hover for this markup. */
.smyn-nav-desktop .smyn-nav-list > li > a:hover::after,
.smyn-nav-desktop .smyn-nav-list > li.current-menu-item > a::after,
.smyn-nav-desktop .smyn-nav-list > li.current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Submenu — dark dropdown panel (simple one-column case, e.g. About).
   The .25s close delay keeps the panel open while the pointer crosses
   from the menu bar into it. */
.smyn-nav-desktop .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: rgba(26,23,20, .98);
	border: 1px solid rgba(253, 250, 247, .18);
	box-shadow: 0 20px 44px rgba(0, 0, 0, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	/*
	 * Close grace. 250ms was long enough to feel like the panel was chasing
	 * the pointer around the bar; with the trigger now tight to the link a
	 * short grace is all the gap-crossing needs. 120ms to start fading,
	 * visibility flipping when the fade ends.
	 */
	/*
	 * CLOSED IS COMPLETELY INERT. All three of visibility, opacity and
	 * pointer-events, so the panel cannot be seen, cannot be hit, and cannot
	 * make anything above it satisfy any condition.
	 *
	 * pointer-events can be stated plainly now. It could not while a hover
	 * selector was the open condition: it flipped the instant the pointer left
	 * the link, killing the bridge mid-crossing. With the state machine owning
	 * the open state, the pointer leaving the link starts a 140ms timer instead
	 * — the panel stays open, and therefore stays hittable, for the whole
	 * crossing. The grace period replaces the bridge entirely.
	 */
	transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s linear .28s, pointer-events 0s linear .28s;
	pointer-events: none;
	z-index: 9996;
}
/*
 * WHAT OPENS A SUBMENU: a state class, set by JavaScript. Nothing else.
 *
 * Every previous attempt made some :hover selector the open condition —
 * `li:hover > .sub-menu`, then `a:hover ~ .sub-menu` plus `.sub-menu:hover`
 * plus a bridge. Each was tightened after the last one leaked, and each still
 * had the same structural flaw: a hover selector cannot distinguish "the
 * pointer entered the owning link" from "the pointer is somewhere inside a box
 * that happens to satisfy the selector". A mega panel spans the whole bar, so
 * `.sub-menu:hover` covers a region far from the word that owns it — and any
 * geometry change, any stacking-context or transition timing difference, turns
 * that into an open panel under a cursor that never went near TREATMENTS.
 *
 * CSS now styles an already-open panel and decides nothing. `smyn.js`'s
 * desktopMenu() owns the state and sets `.smyn-submenu-open` on the item, from
 * pointerenter on the owning anchor and from no other event.
 *
 * See assets/js/smyn.js -> desktopMenu() for the state machine.
 */
.smyn-nav-desktop li.smyn-submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s, pointer-events 0s;
}

/*
 * THE NO-JS FALLBACK, AND NOTHING ELSE.
 *
 * This was wrong before, and it was the mechanism behind the reported
 * screenshot. ":focus-within is safe where :hover was not" — because focus
 * comes from Tab, not from a pointer — is FALSE. A mouse sets focus:
 * mousedown focuses a link. So middle-clicking or ctrl-clicking TREATMENTS to
 * open it in a new tab, or pressing on it and dragging away, leaves the link
 * focused on this page, and this rule then held the mega panel open while the
 * cursor went wherever it liked. Reproduced, at 1440px, with the pointer at
 * the far right of the page.
 *
 * So the rule applies ONLY where JavaScript is not going to run. The
 * `smyn-js` class is written onto <html> by an inline <head> script
 * (inc/performance.php), before the header markup is even parsed, so there is
 * no window during page load in which this rule is live on a scripted page —
 * keying it off an attribute set at DOMContentLoaded left exactly that window.
 * smyn.js removes the class again if the state machine fails to bind, so the
 * keyboard is never locked out of a menu.
 *
 * The separate `data-smyn-menu-js` attribute that smyn.js stamps on the nav is
 * the RUNTIME marker: it proves the state machine actually bound this menu.
 * Absent on a live site, the state machine is not running there.
 */
html:not(.smyn-js) .smyn-nav-desktop li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s, pointer-events 0s;
}
.smyn-nav-desktop .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--smyn-cream);
}
.smyn-nav-desktop .sub-menu a:hover { color: #E7DCC9; }
/*
 * Any nested level that slips through defaults to an in-flow list — never an
 * overlapping absolute box.
 *
 * NOTE THE MISSING `visibility`. It used to say `visibility: visible
 * !important` here, unconditionally, and that was a real hole: `visibility` is
 * inherited, and a descendant IS allowed to override an ancestor's `hidden`
 * with `visible`. So every link in every nested column of a CLOSED mega panel
 * stayed rendered — invisible only because the panel above it is `opacity: 0`
 * — which left them all in the tab order and gave focus a way into a menu
 * nobody had opened. In the shipped 3.12.1 build, where the closed panel also
 * had no `pointer-events: none`, those same nested lists were hit-testable
 * too, and hovering the invisible block under the header was enough to satisfy
 * the old `.sub-menu:hover` open condition. That is the reported screenshot.
 *
 * Visibility is now restored only when the panel is actually open, below.
 */
.smyn-nav-desktop .sub-menu .sub-menu {
	position: static !important;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none;
}
/* Open — and only open — brings the nested columns back. */
.smyn-nav-desktop li.smyn-submenu-open > .sub-menu .sub-menu,
html:not(.smyn-js) .smyn-nav-desktop li:focus-within > .sub-menu .sub-menu {
	visibility: visible !important;
}
.smyn-nav-desktop .sub-menu .sub-menu a {
	font-weight: 400;
	font-size: 12px;
	text-transform: none;
	letter-spacing: .03em;
	padding: 7px 18px;
	white-space: normal;
}

/* Treatments MEGA panel — full-bar sheet anchored to the header container
   (assets/js/smyn.js stamps `smyn-mega` on any top item whose submenu has
   its own submenus; li goes static so the panel spans the whole header).
   The header chain is forced static so nothing between the container and
   the panel captures the absolute positioning. */
.smyn-header-main > .elementor-container { position: relative; }
.smyn-header-main .elementor-column,
.smyn-header-main .elementor-widget-wrap,
.smyn-header-main .elementor-widget,
.smyn-header-main .elementor-widget-container { position: static !important; }
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega { position: static !important; }
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu {
	left: 0;
	right: 0;
	min-width: 0;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px 28px;
	padding: 30px 34px 26px;
	max-height: calc(100vh - 120px);
	overflow: auto;
	overscroll-behavior: contain;
}
/* Category columns — sizing keys off has-children so the plain footer item
   (Full price list) never inherits column width in either mega path. */
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu > li.menu-item-has-children {
	flex: 1 1 150px;
	min-width: 0;
	max-width: 220px;
}
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu > li.menu-item-has-children > a {
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--smyn-champagne);
	padding: 0 0 10px;
	white-space: normal;
}
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu > li.menu-item-has-children > a:hover,
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu > li.menu-item-has-children > a:focus {
	color: var(--smyn-cream);
}
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu .sub-menu a {
	padding: 7px 0;
	line-height: 1.35;
}
/* Items without children (e.g. "Full price list →") become a footer row. */
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu > li:not(.menu-item-has-children) {
	flex: 1 1 100%;
	max-width: none;
	margin-top: 12px;
	border-top: 1px solid rgba(253, 250, 247, .16);
}
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu > li:not(.menu-item-has-children) > a {
	padding: 14px 0 2px;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--smyn-champagne);
}
.smyn-nav-desktop .smyn-nav-list > li.smyn-mega > .sub-menu > li:not(.menu-item-has-children) > a:hover {
	color: var(--smyn-cream);
}
/* No-JS fallback for modern browsers: mirror the critical geometry via
   :has() in its own rules (kept separate — an unsupported :has() must not
   invalidate the class-based rules above). */
.smyn-nav-desktop .smyn-nav-list > li:has(> .sub-menu .sub-menu) { position: static; }
.smyn-nav-desktop .smyn-nav-list > li:has(> .sub-menu .sub-menu) > .sub-menu {
	left: 0;
	right: 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px 28px;
	padding: 30px 34px 26px;
	max-height: calc(100vh - 120px);
	overflow: auto;
}
.smyn-nav-desktop .smyn-nav-list > li:has(> .sub-menu .sub-menu) > .sub-menu > li.menu-item-has-children {
	flex: 1 1 150px;
	min-width: 0;
	max-width: 220px;
}
.smyn-nav-desktop .smyn-nav-list > li:has(> .sub-menu .sub-menu) > .sub-menu > li:not(.menu-item-has-children) {
	flex: 1 1 100%;
	max-width: none;
}

/* Icon squares (search / cart / hamburger) — mirror the block spec. */
.smyn-icon-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(253, 250, 247, .30);
	border-radius: 0;
	color: var(--smyn-cream);
	cursor: pointer;
	position: relative;
	text-decoration: none;
	transition: border-color .3s cubic-bezier(.22,.61,.36,1), background-color .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-icon-square svg { width: 17px; height: 17px; }
.smyn-icon-square:hover,
.smyn-icon-square:focus {
	border-color: #E7DCC9;
	background: rgba(253, 250, 247, .09);
	color: var(--smyn-cream);
}
.smyn-icon-square:focus-visible {
	outline: 2px solid #E7DCC9;
	outline-offset: 3px;
}
.smyn-store-icons-inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
@media (max-width: 1024px) {
	.smyn-icon-square { width: 38px; height: 38px; min-width: 38px; }
}
@media (max-width: 767px) {
	.smyn-icon-square { width: 32px; height: 32px; min-width: 32px; }
	.smyn-icon-square svg { width: 14px; height: 14px; }
}
@media (max-width: 374px) {
	.smyn-icon-square { width: 30px; height: 30px; min-width: 30px; }
}

/* Header contact/booking actions — self-contained recipes so the PHP header
   never depends on extracted block CSS. Phone + WhatsApp + Fresha as labelled
   ghost buttons (labels collapse to icons as the bar narrows); BOOK stays a
   cream-filled bar that always contrasts with the terracotta gradient. */
.smyn-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-flow: row nowrap;
	gap: 8px;
	margin: 0;
}
.smyn-header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	border: 1px solid rgba(253, 250, 247, .32);
	border-radius: 0;
	background: transparent;
	color: var(--smyn-cream, #FDFAF7);
	font-family: var(--smyn-font-label);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: color .24s ease, background-color .24s ease, border-color .24s ease, transform .24s ease;
}
.smyn-header-action svg { display: block; flex: 0 0 auto; width: 17px; height: 17px; }
.smyn-header-action-phone,
.smyn-header-action-whatsapp,
.smyn-header-action-fresha { padding: 0 14px; }
.smyn-header-action-phone:hover,
.smyn-header-action-whatsapp:hover,
.smyn-header-action-fresha:hover,
.smyn-header-action-phone:focus,
.smyn-header-action-whatsapp:focus,
.smyn-header-action-fresha:focus {
	border-color: #E7DCC9;
	background: rgba(253, 250, 247, .09);
	color: #E7DCC9;
	transform: translateY(-1px);
}
.smyn-fresha-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--smyn-cream, #FDFAF7);
	color: #521A15;
	/*
	 * KEEP, and the only non-Brand-Book family left on the front end. This is
	 * not typography — it is Fresha's own logo mark, a serif italic "f", drawn
	 * with a letterform because an icon font would be a second font request for
	 * one glyph. Setting it in Glacial Indifference would draw a different
	 * company's mark wrong.
	 */
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	transition: background-color .24s ease;
}
.smyn-header-action-fresha:hover .smyn-fresha-mark,
.smyn-header-action-fresha:focus .smyn-fresha-mark { background: #E7DCC9; }
.smyn-header-action-book {
	min-width: 128px;
	padding: 0 18px;
	border-color: var(--smyn-cream, #FDFAF7);
	background: var(--smyn-cream, #FDFAF7);
	color: #521A15;
	letter-spacing: .1em;
}
.smyn-header-action-book:hover,
.smyn-header-action-book:focus {
	border-color: #E7DCC9;
	background: #E7DCC9;
	color: #521A15;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
	transform: translateY(-1px);
}
.smyn-header-action-book svg { width: 15px; height: 15px; transition: transform .24s ease; }
.smyn-header-action-book:hover svg { transform: translate(2px, -2px); }
.smyn-header-action:focus-visible { outline: 2px solid #E7DCC9; outline-offset: 3px; }
.smyn-book-label-mobile { display: none; }
@media (max-width: 1560px) {
	.smyn-header-action-fresha { padding: 0; width: 44px; }
	.smyn-header-action-fresha .smyn-action-label { display: none; }
	.smyn-header-action-whatsapp { padding: 0; width: 44px; }
	.smyn-header-action-whatsapp .smyn-action-label { display: none; }
}
@media (max-width: 1100px) {
	.smyn-header-action-phone { padding: 0; width: 44px; }
	.smyn-header-action-phone .smyn-action-label { display: none; }
}
@media (max-width: 1024px) {
	.smyn-header-action { min-height: 38px; }
	.smyn-header-action-phone,
	.smyn-header-action-whatsapp,
	.smyn-header-action-fresha { width: 38px; min-width: 38px; }
	.smyn-header-action-book { min-width: 108px; padding: 0 14px; }
}
@media (max-width: 767px) {
	.smyn-header-actions { gap: 6px; }
	.smyn-header-action { min-height: 32px; font-size: 10px; }
	.smyn-header-action svg { width: 14px; height: 14px; }
	.smyn-header-action-phone,
	.smyn-header-action-whatsapp,
	.smyn-header-action-fresha { width: 32px; min-width: 32px; }
	.smyn-fresha-mark { width: 15px; height: 15px; font-size: 11px; }
	.smyn-book-label-desktop { display: none; }
	.smyn-book-label-mobile { display: inline; }
	/*
	 * Widened for the 13px label. At 10px the word fitted a 56px button; at
	 * the legibility floor it needs ~36px of type plus the arrow, so the box
	 * grows to 68px and the tracking tightens to buy some of that back.
	 * Measured at 320/360/390/414 after the change: nothing clips, nothing
	 * overflows, and the row still ends inside the viewport.
	 */
	.smyn-header-action-book { min-width: 68px; padding: 0 8px; gap: 3px; letter-spacing: .04em; }
	.smyn-header-action-book svg { width: 11px; height: 11px; }
}
@media (max-width: 480px) {
	/* BOOK already lands on Fresha — drop the duplicate icon on tiny bars. */
	.smyn-header-action-fresha { display: none; }
}
@media (max-width: 374px) {
	.smyn-header-actions { gap: 4px; }
	.smyn-header-action { min-height: 30px; }
	.smyn-header-action-phone,
	.smyn-header-action-whatsapp { width: 30px; min-width: 30px; }
	.smyn-header-action-book { min-width: 52px; padding: 0 7px; }
	.smyn-header-action-book svg { display: none; }
}

/* Cart badge — 16px cream pill per the approved header block. */
.smyn-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--smyn-cream);
	color: var(--smyn-terracotta-deep);
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 9px;
	line-height: 1;
}

/* Hamburger — visible only at tablet/mobile widths. */
.smyn-mnav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
}
.smyn-mnav-toggle .smyn-mnav-bar {
	display: block;
	width: 16px;
	height: 2px;
	background: var(--smyn-cream);
	transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-mnav-toggle.is-open .smyn-mnav-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.smyn-mnav-toggle.is-open .smyn-mnav-bar:nth-child(2) { opacity: 0; }
.smyn-mnav-toggle.is-open .smyn-mnav-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1200px) {
	.smyn-mnav-toggle { display: inline-flex; }
	.smyn-nav-desktop .smyn-nav-list { display: none; }
}

/* Mobile menu v2 — FULL-SCREEN CREAM overlay with display typography. */
.smyn-mnav-panel {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	flex-direction: column;
	background: var(--smyn-cream);
	color: var(--smyn-ink);
	padding: 0 clamp(22px, 6vw, 44px) 30px;
	overflow-y: auto;
}
.smyn-mnav-panel[hidden] { display: none; }
body.smyn-mnav-open { overflow: hidden; }

.smyn-mnav-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	border-bottom: 1px solid var(--smyn-line);
	margin-bottom: 18px;
}
/*
 * The logo lockup's last resort. Reached only when no Light Logo, no Dark
 * Logo, no Site Logo and no legacy URL option resolves — where the header
 * previously pointed an <img> at a bundled file that may never have been
 * imported, and showed a broken image when it had not been.
 *
 * Set in the header's own type so an unbranded install still reads as SMYN
 * rather than as a missing asset. Matches .smyn-mnav-wordmark, in cream
 * because the header bar is terracotta.
 */
.smyn-header-logo .smyn-logo-wordmark {
	display: block;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--smyn-cream, #FDFAF7);
}

.smyn-mnav-wordmark {
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2.4px;
	color: var(--smyn-terracotta);
}
/*
 * The panel's own lockup. Its sheet is cream, so it carries the DARK logo
 * while the bar behind it carries the light one — the same asset the sign-in
 * card uses. The box is fixed at the wordmark's old footprint so opening the
 * menu never resizes the panel's top row, whatever the owner uploads:
 * object-fit keeps a tall or a wide file inside it instead of stretching.
 */
.smyn-mnav-logo-link {
	display: inline-flex;
	align-items: center;
	max-width: 60%;
	text-decoration: none;
}
.smyn-mnav-logo {
	display: block;
	width: 150px;
	max-width: 100%;
	height: 22px;
	object-fit: contain;
	object-position: left center;
}
/* Last resort inside the panel: the site name, set exactly as the wordmark
   this lockup replaced, so the fallback is indistinguishable from before. */
.smyn-mnav-logo-link .smyn-logo-wordmark {
	display: block;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	line-height: 22px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--smyn-terracotta);
}
.smyn-mnav-logo-link:focus-visible {
	outline: 2px solid var(--smyn-terracotta);
	outline-offset: 4px;
}
.smyn-mnav-close {
	border-color: var(--smyn-line);
	color: var(--smyn-ink);
	font-size: 20px;
	line-height: 1;
}
.smyn-mnav-close:hover,
.smyn-mnav-close:focus {
	border-color: var(--smyn-terracotta);
	background: var(--smyn-hover-surface);
	color: var(--smyn-ink);
}

.smyn-mnav-panel .smyn-mnav-list,
.smyn-mnav-panel .smyn-mnav-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Top level — display voice. */
.smyn-mnav-panel .smyn-mnav-list > li > a {
	display: block;
	padding: 12px 0;
	font-family: var(--smyn-font-body);
	font-weight: var(--smyn-w-regular);
	font-size: clamp(26px, 6vw, 34px);
	line-height: 1.1;
	letter-spacing: -0.5px;
	text-decoration: none;
	color: var(--smyn-ink);
	transition: color .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-mnav-panel .smyn-mnav-list > li > a:hover,
.smyn-mnav-panel .smyn-mnav-list > li > a:focus { color: var(--smyn-terracotta); }
/* Group labels (second level with children) — eyebrow clusters. */
.smyn-mnav-panel .sub-menu > li.menu-item-has-children > a {
	display: block;
	padding: 12px 0 4px;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--smyn-muted);
}
.smyn-mnav-panel .sub-menu > li.menu-item-has-children > a:hover,
.smyn-mnav-panel .sub-menu > li.menu-item-has-children > a:focus {
	color: var(--smyn-terracotta);
}
/* Leaf links. */
.smyn-mnav-panel .sub-menu a {
	display: block;
	padding: 7px 0;
	font-family: var(--smyn-font-label);
	font-weight: 400;
	font-size: 15px;
	text-decoration: none;
	color: var(--smyn-mocha-dark);
	transition: color .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-mnav-panel .sub-menu a:hover,
.smyn-mnav-panel .sub-menu a:focus { color: var(--smyn-terracotta); }
.smyn-mnav-panel .smyn-mnav-list > li { border-bottom: 1px solid var(--smyn-line); }
.smyn-mnav-panel .smyn-mnav-list > li:last-child { border-bottom: 0; }
.smyn-mnav-panel .smyn-mnav-list > li > .sub-menu { padding-bottom: 14px; }
.smyn-mnav-panel .smyn-mnav-list > li > .sub-menu[hidden] { display: none; }

/* Accordion chevrons — sub-menus start closed; the chevron opens a section. */
.smyn-mnav-panel .smyn-mnav-list > li.menu-item-has-children { position: relative; }
.smyn-mnav-panel .smyn-mnav-list > li.menu-item-has-children > a { padding-right: 56px; }
.smyn-mnav-sub-toggle {
	position: absolute;
	top: 10px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--smyn-line);
	border-radius: 0;
	color: var(--smyn-ink);
	cursor: pointer;
	transition: border-color .3s cubic-bezier(.22,.61,.36,1), color .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-mnav-sub-toggle svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.smyn-mnav-sub-toggle:hover,
.smyn-mnav-sub-toggle:focus { border-color: var(--smyn-terracotta); color: var(--smyn-terracotta); }
.smyn-mnav-sub-toggle:focus-visible { outline: 2px solid var(--smyn-terracotta); outline-offset: 2px; }
.smyn-mnav-panel .smyn-mnav-list > li.is-open > .smyn-mnav-sub-toggle svg { transform: rotate(180deg); }

/* ==================================================================
   Motion accents — the site breathes: the open/closed pill pulses,
   primary CTAs carry a light sweep, decorative marks twinkle. All of it
   dies under prefers-reduced-motion.
   ================================================================== */
/* Live-hours pill: the dot pulses with a soft halo (open or closed). */
.smyn-b10-status-dot {
	animation: smynDotPulse 2.2s ease-in-out infinite;
}
@keyframes smynDotPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(253, 250, 247, .35); opacity: 1; }
	50% { box-shadow: 0 0 0 7px rgba(253, 250, 247, 0); opacity: .7; }
}
/* Primary CTAs: a cream light-sweep runs across on hover. */
.smyn-header-action-book,
.smyn-b01-book .elementor-button,
.smyn-mnav-book {
	position: relative;
	overflow: hidden;
}
.smyn-header-action-book::before,
.smyn-b01-book .elementor-button::before,
.smyn-mnav-book::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -80%;
	width: 55%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: skewX(-18deg);
	transition: left .7s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}
.smyn-header-action-book:hover::before,
.smyn-b01-book .elementor-button:hover::before,
.smyn-mnav-book:hover::before {
	left: 130%;
}
@media (prefers-reduced-motion: reduce) {
	.smyn-b10-status-dot { animation: none; }
	.smyn-header-action-book::before,
	.smyn-b01-book .elementor-button::before,
	.smyn-mnav-book::before { display: none; }
}

/* 3D tilt (assets/js/smyn.js drives the transform; this only smooths it). */
.smyn-tilt {
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.smyn-tilt:hover { transition: transform .06s linear; }

/* Hero takeover tour: while the tour runs the slider owns the whole screen —
   the header fades away and the page cannot scroll behind it. */
.smyn-site-header { transition: opacity .45s cubic-bezier(.22,.61,.36,1); }
body.smyn-tour .smyn-site-header { opacity: 0; pointer-events: none; }
body.smyn-tour { overflow: hidden; }

/* ==================================================================
   Scroll-reveal — sections rise in as they enter the viewport.
   The class pair is applied by assets/js/smyn.js only when JS, IO and
   full motion are all available, so content is never hidden otherwise.
   ================================================================== */
/*
 * Timings live in tokens so the whole cascade can be reasoned about in one
 * place, and so the mobile block below can shorten all of it at once.
 *
 * The previous values were 800ms for a section, 600ms per child and a stagger
 * that reached 360ms by the sixth widget — 960ms from trigger to the last
 * child settling, on top of a trigger that fired late (see smyn.js). That is
 * the lag the owner described: reaching the next section while the previous
 * one was still arriving.
 */
:root {
	--smyn-rv-section: 380ms;
	--smyn-rv-child: 300ms;
	--smyn-rv-word: 420ms;
	--smyn-rv-curtain: 520ms;
	--smyn-rv-step: 40ms;
	--smyn-rv-ease: cubic-bezier(.22,.61,.36,1);
	--smyn-rv-lift: 18px;
	--smyn-rv-lift-child: 10px;
}

.smyn-reveal {
	opacity: 0;
	transform: translateY(var(--smyn-rv-lift));
	transition: opacity var(--smyn-rv-section) var(--smyn-rv-ease),
	            transform var(--smyn-rv-section) var(--smyn-rv-ease);
	will-change: opacity, transform;
}
.smyn-reveal.smyn-inview {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Children follow the section with a soft cascade. Decorative widgets that
   absolutely position ghosts/numbers opt out (transform would re-anchor
   them mid-flight); everything settles at transform:none. */
.smyn-reveal .elementor-widget:not(.smyn-no-anim):not(.smyn-b05-decor-left):not(.smyn-b05-decor-right):not([class*="ghost"]) {
	opacity: 0;
	transform: translateY(var(--smyn-rv-lift-child));
	transition: opacity var(--smyn-rv-child) var(--smyn-rv-ease),
	            transform var(--smyn-rv-child) var(--smyn-rv-ease);
}
.smyn-reveal.smyn-inview .elementor-widget:not(.smyn-no-anim):not(.smyn-b05-decor-left):not(.smyn-b05-decor-right):not([class*="ghost"]) {
	opacity: 1;
	transform: none;
}
/*
 * The cascade is capped at three steps — 120ms — instead of running to six.
 * Past the third widget a stagger stops reading as choreography and starts
 * reading as the page being slow, which is precisely the complaint.
 */
.smyn-reveal.smyn-inview .elementor-widget:nth-child(2) { transition-delay: var(--smyn-rv-step); }
.smyn-reveal.smyn-inview .elementor-widget:nth-child(3) { transition-delay: calc(var(--smyn-rv-step) * 2); }
.smyn-reveal.smyn-inview .elementor-widget:nth-child(n+4) { transition-delay: calc(var(--smyn-rv-step) * 3); }

/*
 * Content priority: nothing a visitor can act on waits for the cascade.
 * Buttons, the booking CTAs and any link widget reveal on the section's own
 * timing with no stagger at all, so they are never the last thing to arrive
 * and never sit at opacity 0 while the copy above them is already readable.
 */
.smyn-reveal.smyn-inview .elementor-widget-button,
.smyn-reveal.smyn-inview .smyn-cta-underline,
.smyn-reveal.smyn-inview .smyn-b31-cta,
.smyn-reveal.smyn-inview .smyn-b30-related a {
	transition-delay: 0s !important;
}
/*
 * :has() kept in its own rule on purpose. An unknown pseudo-class invalidates
 * the entire selector list it appears in, so folding these into the block
 * above would take the plain selectors down with them on any browser that does
 * not support it. Separated, an unsupported :has() costs only this rule.
 */
.smyn-reveal.smyn-inview .elementor-widget:has(.smyn-book-cta),
.smyn-reveal.smyn-inview .elementor-widget:has(> .elementor-widget-container > a) {
	transition-delay: 0s !important;
}

/* Line-mask word reveals (assets/js/smyn.js splits display headings). */
.smyn-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: .12em;
	margin-bottom: -.12em;
}
.smyn-wi {
	display: inline-block;
	transform: translateY(115%);
	transition: transform var(--smyn-rv-word) var(--smyn-rv-ease);
}
.smyn-inview .smyn-wi { transform: none; }

/* Curtain image reveals — a champagne sheet wipes off key imagery. */
.smyn-curtain { position: relative; }
.smyn-curtain::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #E7DCC9;
	transform-origin: top;
	transform: scaleY(1);
	transition: transform var(--smyn-rv-curtain) var(--smyn-rv-ease) 60ms;
	pointer-events: none;
	z-index: 3;
}
.smyn-inview .smyn-curtain::after { transform: scaleY(0); transform-origin: bottom; }

/* Magnetic CTAs (transform driven by smyn.js). */
.smyn-mag { transition: transform .45s cubic-bezier(.22,.61,.36,1); }

/* Cursor ring — the native cursor stays; a champagne ring floats after it. */
.smyn-cursor-ring {
	position: fixed;
	top: -17px;
	left: -17px;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(216, 204, 184, .85);
	border-radius: 50%;
	pointer-events: none;
	z-index: 100000;
	opacity: 0;
	transition: opacity .3s ease, width .25s cubic-bezier(.22,.61,.36,1), height .25s cubic-bezier(.22,.61,.36,1), margin .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
.smyn-cursor-ring.is-on { opacity: .9; }
.smyn-cursor-ring.is-link {
	width: 52px;
	height: 52px;
	margin: -9px 0 0 -9px;
	border-color: rgba(130, 46, 39, .8);
}
.smyn-cursor-ring::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: #822E27;
}

/* Aurora orbs — soft brand light drifting behind hero/footer content.
   The host clips them; without this they escape to the initial containing
   block and add scroll height (blank strip under the footer). */
.smyn-orb-host { position: relative; overflow: hidden; }
.smyn-orb {
	position: absolute;
	width: 46vmin;
	height: 46vmin;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(60px);
	opacity: .3;
	z-index: 1;
	will-change: transform;
}
.smyn-orb-1 {
	top: -10%;
	right: 4%;
	background: radial-gradient(circle, rgba(250, 227, 227, .8), rgba(250, 227, 227, 0) 70%);
	animation: smynOrbA 26s ease-in-out infinite alternate;
}
.smyn-orb-2 {
	bottom: -14%;
	left: -6%;
	background: radial-gradient(circle, rgba(216, 204, 184, .7), rgba(216, 204, 184, 0) 70%);
	animation: smynOrbB 32s ease-in-out infinite alternate;
}
.smyn-b26-root .smyn-orb-1 {
	top: auto;
	bottom: -18%;
	right: 10%;
	opacity: .22;
	animation-duration: 34s;
}
@keyframes smynOrbA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-9vmin, 7vmin, 0) scale(1.15); } }
@keyframes smynOrbB { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(8vmin, -6vmin, 0) scale(.95); } }

/* Scroll progress hairline. */
.smyn-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #822E27, #D8CCB8);
	transform: scaleX(0);
	transform-origin: left;
	z-index: 100001;
	pointer-events: none;
}
body.smyn-tour .smyn-progress { opacity: 0; }

@media (max-width: 1024px) {
	.smyn-orb { filter: blur(44px); }
}
@media (prefers-reduced-motion: reduce) {
	.smyn-reveal { opacity: 1; transform: none; transition: none; }
	.smyn-reveal .elementor-widget { opacity: 1 !important; transform: none !important; transition: none !important; }
	.smyn-wi { transform: none; transition: none; }
	.smyn-curtain::after { display: none; }
	.smyn-orb { display: none; }
	.smyn-cursor-ring { display: none; }
	.smyn-mag { transition: none; }
}

.smyn-mnav-meta { margin-top: auto; padding-top: 22px; }
.smyn-mnav-book {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 24px;
	background: var(--smyn-terracotta);
	color: #FFFFFF;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-mnav-book:hover, .smyn-mnav-book:focus { background: var(--smyn-terracotta-hover); color: #FFFFFF; }
.smyn-mnav-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.smyn-mnav-contact {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border: 1px solid var(--smyn-line);
	color: var(--smyn-ink);
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color .3s cubic-bezier(.22,.61,.36,1), color .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-mnav-contact:hover, .smyn-mnav-contact:focus { border-color: var(--smyn-terracotta); color: var(--smyn-terracotta); }
.smyn-mnav-line {
	margin: 14px 0 0;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 12px;
	color: var(--smyn-muted);
}
.smyn-mnav-line a { color: var(--smyn-mocha); text-decoration: none; }
@media (min-width: 1201px) {
	.smyn-mnav-panel { display: none !important; }
}
@media (max-width: 767px) {
	.smyn-mnav-line { font-size: 13px; }
}

/* Search form primitives (used on the search results page). */
.smyn-search-row {
	display: flex;
	gap: 14px;
	align-items: stretch;
}
.smyn-search-submit {
	flex: 0 0 auto;
	background: var(--smyn-terracotta);
	border: 1px solid var(--smyn-terracotta);
	border-radius: 0;
	color: #FFFFFF;
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 0 22px;
	min-height: 48px;
	cursor: pointer;
	transition: background-color .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.smyn-search-submit:hover,
.smyn-search-submit:focus {
	background: var(--smyn-terracotta-hover);
	border-color: var(--smyn-terracotta-hover);
}
.smyn-search-submit:focus-visible {
	outline: 2px solid var(--smyn-terracotta);
	outline-offset: 3px;
}
@media (max-width: 767px) {
	.smyn-search-row { flex-direction: column; }
}

/* ==================================================================
   7. 404 + pre-import footer fallback
   ================================================================== */
.smyn-404 {
	position: relative;
	overflow: hidden;
	background: var(--smyn-ink);
	color: var(--smyn-cream);
	padding: clamp(90px, 16vh, 170px) clamp(22px, 6vw, 64px);
	text-align: left;
}
.smyn-404-ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -54%);
	font-family: var(--smyn-font-body);
	font-style: italic;
	font-weight: var(--smyn-w-regular);
	font-size: clamp(120px, 24vw, 320px);
	letter-spacing: -2px;
	color: var(--smyn-cream);
	opacity: .07;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}
.smyn-404-inner { position: relative; max-width: 640px; margin: 0 auto; }
.smyn-404-eyebrow {
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--smyn-champagne);
	margin: 0 0 22px;
}
.smyn-404-title {
	font-family: var(--smyn-font-body);
	font-weight: var(--smyn-w-regular);
	font-size: clamp(44px, 8vw, 84px);
	line-height: .95;
	letter-spacing: -1px;
	color: var(--smyn-cream);
	margin: 0 0 22px;
}
.smyn-404-title em {
	font-style: italic;
	color: var(--smyn-champagne);
}
.smyn-404-line {
	font-family: var(--smyn-font-label);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.7;
	color: var(--smyn-line-champagne);
	margin: 0 0 34px;
	max-width: 46ch;
}
.smyn-404-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.smyn-footer-fallback {
	background: var(--smyn-ink);
	color: var(--smyn-champagne);
	border-top: 1px solid rgba(253, 250, 247, .18);
	padding: 44px clamp(22px, 6vw, 64px);
	text-align: center;
}
.smyn-footer-fallback-brand {
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2.6px;
	color: var(--smyn-champagne);
	margin: 0 0 10px;
}
.smyn-footer-fallback-line,
.smyn-footer-fallback-copy {
	font-family: var(--smyn-font-label);
	font-weight: 700;
	font-size: 12px;
	color: var(--smyn-muted);
	margin: 4px 0;
}
.smyn-footer-fallback a { color: var(--smyn-champagne); text-decoration: none; }
.smyn-footer-fallback a:hover { color: var(--smyn-cream); }
/* Bottom line: legal left, studio credit hard right. */
.smyn-footer-fallback-copy {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 26px;
}
.smyn-footer-fallback-credit { margin-left: auto; text-align: right; }
@media (max-width: 767px) {
	.smyn-footer-fallback-line, .smyn-footer-fallback-copy { font-size: 13px; }
	.smyn-footer-fallback-copy { justify-content: flex-start; gap: 8px; }
	.smyn-footer-fallback-credit { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* ==================================================================
   8. Reduced motion — kill every animation/transition added above
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
	body a,
	.smyn-btn, .smyn-btn-primary, .smyn-btn-secondary, .smyn-btn-on-dark,
	.smyn-cta-underline, .smyn-cta-underline::after,
	input, textarea, select,
	.smyn-nav-desktop .smyn-nav-list > li > a,
	.smyn-nav-desktop .smyn-nav-list > li > a::after,
	.smyn-nav-desktop .sub-menu,
	.smyn-icon-square,
	.smyn-mnav-toggle .smyn-mnav-bar,
	.smyn-mnav-panel .smyn-mnav-list a,
	.smyn-mnav-panel .sub-menu a,
	.smyn-mnav-book,
	.smyn-search-submit {
		transition-duration: .001ms !important;
		/*
		 * The delays matter as much as the durations here. The closed submenu
		 * defers `visibility` and `pointer-events` by .28s so the panel stays
		 * hittable while it fades; zeroing only the duration left a fully
		 * clickable, completely invisible full-bar panel for 280ms after every
		 * close — and for someone who asked for no motion there is no fade to
		 * protect in the first place.
		 */
		transition-delay: 0s !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
	}
	.smyn-btn-primary:hover, .smyn-btn-secondary:hover, .smyn-btn-on-dark:hover {
		transform: none !important;
	}
}

/* Block 05 (Craft & Care): clip the decorative ghost words at the section edge —
 * sibling blocks (hero, shop) carry overflow:hidden on their roots; block 05's
 * export lacks it, letting the 102px tablet ghost word push horizontal scroll. */
.smyn-b05-root{overflow:hidden;}

/* ==================================================================
   9. Search results page (moved from woocommerce.css — that sheet
   only loads on commerce screens; search is site-wide)
   ================================================================== */
/* ============================================================
   13. Search results — .smyn-search-results (theme template)
   Hairline result list + the form spec on a light ground.
   ============================================================ */

/* Inline form (light-page cut of the overlay recipe; .smyn-search-row
   and .smyn-search-submit come from theme-overrides unchanged). */
.smyn-search-results .smyn-search-form {
	max-width: 640px;
	margin: 0 0 40px;
}

.smyn-search-results .smyn-search-label {
	color: var(--smyn-terracotta);
}

.smyn-search-results .smyn-search-input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--smyn-line);
	border-radius: 0;
	padding: 12px 2px;
	font-family: var(--smyn-font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--smyn-ink);
}

.smyn-search-results .smyn-search-input::placeholder {
	color: var(--smyn-muted);
}

.smyn-search-results .smyn-search-input:focus {
	outline: none;
	border-bottom-color: var(--smyn-terracotta);
}

.smyn-search-results .smyn-search-input:focus-visible {
	outline: 2px solid var(--smyn-terracotta);
	outline-offset: 4px;
}

/* Result count — eyebrow. */
.smyn-search-results .smyn-search-count,
.smyn-search-results .search-results-count {
	font-weight: 700; font-size: 10px; line-height: 1.6; font-family: var(--smyn-font-label);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--smyn-mocha);
	margin: 0 0 6px;
}

/* Result rows — hairline list. */
.smyn-search-results article {
	border-bottom: 1px solid var(--smyn-line);
	padding: 28px 0;
	margin: 0;
}

.smyn-search-results article:first-of-type {
	border-top: 1px solid var(--smyn-line);
}

.smyn-search-results article .entry-meta {
	font-weight: 700; font-size: 10px; line-height: 1.6; font-family: var(--smyn-font-label);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--smyn-mocha);
	margin: 0 0 10px;
}

.smyn-search-results article .entry-meta a {
	color: var(--smyn-mocha);
	text-decoration: none;
}

.smyn-search-results article .entry-meta a:hover {
	color: var(--smyn-terracotta);
}

.smyn-search-results article .entry-title {
	font-family: var(--smyn-font-body);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -.4px;
	line-height: 1.25;
	color: var(--smyn-ink);
	margin: 0 0 8px;
}

.smyn-search-results article .entry-title a {
	color: var(--smyn-ink);
	text-decoration: none;
	transition: color .3s cubic-bezier(.22, .61, .36, 1);
}

.smyn-search-results article .entry-title a:hover {
	color: var(--smyn-terracotta);
}

.smyn-search-results article .entry-summary,
.smyn-search-results article .entry-summary p,
.smyn-search-results article .entry-excerpt {
	font-weight: 400; font-size: 14px; line-height: 1.7; font-family: var(--smyn-font-label);
	color: var(--smyn-mocha);
	margin: 0;
}

/* Read-more — caps underline CTA. */
.smyn-search-results article .more-link,
.smyn-search-results article .smyn-result-link {
	display: inline-block;
	margin-top: 12px;
	border-bottom: 1px solid var(--smyn-ink);
	font-weight: 700; font-size: 11px; line-height: 1; font-family: var(--smyn-font-label);
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--smyn-ink);
	text-decoration: none;
	padding-bottom: 7px;
	transition: color .3s cubic-bezier(.22, .61, .36, 1), border-color .3s cubic-bezier(.22, .61, .36, 1);
}

.smyn-search-results article .more-link:hover,
.smyn-search-results article .smyn-result-link:hover {
	color: var(--smyn-terracotta);
	border-bottom-color: var(--smyn-terracotta);
}

/* Nothing found — quiet, with a way onward. */
.smyn-search-results .no-results .page-title,
.smyn-search-results .no-results h1,
.smyn-search-results .no-results h2 {
	font-family: var(--smyn-font-body);
	font-size: 24px;
	font-weight: var(--smyn-w-regular);
	letter-spacing: -.8px;
	color: var(--smyn-ink);
	margin: 0 0 12px;
}

.smyn-search-results .no-results p {
	font-weight: 400; font-size: 15px; line-height: 1.7; font-family: var(--smyn-font-label);
	color: var(--smyn-mocha-dark);
}

/* Pagination — the shop's 44px squares. */
.smyn-search-results .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 36px;
}

.smyn-search-results .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--smyn-line);
	background: var(--smyn-cream);
	font-weight: 700; font-size: 11px; line-height: 1; font-family: var(--smyn-font-label);
	letter-spacing: .6px;
	color: var(--smyn-ink);
	text-decoration: none;
	padding: 0 8px;
}

.smyn-search-results .nav-links .page-numbers.current,
.smyn-search-results .nav-links a.page-numbers:hover {
	background: var(--smyn-terracotta);
	border-color: var(--smyn-terracotta);
	color: var(--smyn-cream);
}

/* Search results — responsive + reduced motion (companions to §9). */
@media (max-width: 1024px) {
	.smyn-search-results article .entry-title { font-size: 19px; }
}
@media (max-width: 767px) {
	.smyn-search-results .smyn-search-input { font-size: 16px; }
	.smyn-search-results article .entry-title { font-size: 20px; }
	.smyn-search-results article { padding: 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.smyn-search-results *,
	.smyn-search-results *::before,
	.smyn-search-results *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Footer wordmark replaced by the light logo artwork when one is uploaded. */
.smyn-footer-fallback-brand--image {
	line-height: 0;
}
.smyn-footer-fallback-brand--image img {
	height: 34px;
	width: auto;
	max-width: 220px;
	display: inline-block;
}

/* ==================================================================
   Brand Book typography over Elementor
   ==================================================================
   import/content.xml carries 975 `typography_font_family` entries and every
   one of them is the literal "Jost". Elementor turns each into a per-element
   rule of its own, which is more specific than anything the theme said about
   `h1`, so measured in Chromium BEFORE this block every large display heading
   on the site rendered in Jost 300 — while the catalogue title directly beneath
   it rendered in Glacial Indifference, because the plugin's CSS did win there.
   Two faces at the same size on the same page.

   This is the "safest supported styling layer" the brief asks for: the page
   content is not touched, `_elementor_data` is not rewritten, and nothing is
   converted to Atomic. If a widget's font setting is ever changed in the
   Elementor editor, deleting this block restores its authority.

   Scope is every widget that carries reading text: headings, post titles and
   text editors. It was headings-only on the first pass, because forcing the
   brand face onto text-editor widgets also took the site's eyebrow labels
   ("SMYN · TREATMENTS", "01 · WHAT IT IS") with it, and Glacial Indifference
   has no middot — the separator was falling to whatever the OS offered.

   That is no longer a reason to hold back. Verified in Chromium with
   CSS.getPlatformFontsForNode, the browser falls back PER GLYPH, not per run:
   "SMYN · SERVICE MENU" renders 18 glyphs in Glacial Indifference and exactly
   one — the middot — in Jost. "£200" is 3 Glacial and 1 Jost. So the eyebrows
   keep their separator and everything else is on the brand face.

   Elementor's own button, icon-list and form widgets are left alone: they
   inherit from body, which is already the brand face, and overriding them would
   fight the editor for no gain.
   ================================================== */
.smyn .elementor-widget-heading .elementor-heading-title,
.smyn .elementor-widget-theme-post-title .elementor-heading-title,
.smyn .elementor-widget-text-editor,
.smyn .elementor-widget-text-editor p,
.smyn .elementor-widget-text-editor li,
.smyn .elementor-widget-button .elementor-button,
.smyn .elementor-widget-button .elementor-button-text,
.smyn .elementor-widget-icon-list .elementor-icon-list-text {
	font-family: var(--smyn-font-display) !important;
}

/*
 * ...and the weights those widgets ask for. Elementor's saved typography still
 * names 300/500/600/800 in places; Glacial Indifference has 400 and 700, so the
 * browser was already rounding them. These two rules make the computed value
 * match the face that actually paints, without touching page data.
 */
.smyn .elementor-widget-heading .elementor-heading-title,
.smyn .elementor-widget-theme-post-title .elementor-heading-title,
.smyn .elementor-widget-text-editor,
.smyn .elementor-widget-text-editor p {
	font-weight: var(--smyn-w-regular) !important;
}
.smyn .elementor-widget-button .elementor-button,
.smyn .elementor-widget-button .elementor-button-text {
	font-weight: var(--smyn-w-bold) !important;
}

/*
 * ...and the weights those widgets ask for. Elementor's kit and widgets
 * request 300 for display headings; Glacial Indifference has no 300, so the
 * browser was already rendering 400. Saying 400 makes the CSS describe what
 * actually paints, and stops a future variable face from honouring it.
 */
.smyn .elementor-widget-heading .elementor-heading-title,
.smyn .elementor-widget-theme-post-title .elementor-heading-title {
	font-weight: var(--smyn-w-regular) !important;
	letter-spacing: var(--smyn-ls-display);
}

/* The word-mask reveal wraps heading words in spans; they must inherit, not
   fall back to the widget's own family. */
.smyn .smyn-w,
.smyn .smyn-wi {
	font-family: inherit;
	font-weight: inherit;
}

/* Label surfaces. The label token now resolves to the same brand face as the
   display token — the roles are kept apart so one can be re-pointed later, not
   because they are different families. */
.smyn .elementor-widget-heading .smyn-eyebrow,
.smyn .elementor-widget-heading .elementor-heading-title.smyn-eyebrow,
.smyn .smyn-section-number,
.smyn .smyn-eyebrow {
	font-family: var(--smyn-font-label) !important;
}

/* ==================================================================
   The script accent — Snell Roundhand
   ==================================================================
   Editorial only, and opt-in by class so it can never leak into running copy.
   The brief's list of places it must never appear — body copy, navigation,
   buttons, prices, forms, WooCommerce controls, catalogue metadata, checkout,
   account UI, long paragraphs, accessibility-critical UI — is enforced by the
   fact that nothing in those surfaces carries .smyn-script.

   Snell's own design is slanted (italicAngle -40), so it is never given
   font-style: italic: that would ask the browser to slant it a second time.
   It sets a little small for its point size, so it runs at ~1.25em of whatever
   it sits in with a tighter line-height to stop the descenders colliding.
   ================================================================== */
.smyn-script {
	font-family: var(--smyn-font-script);
	font-style: normal;
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}
/* A script word inside a display heading: optically matched, never smaller
   than the copy around it. */
h1 .smyn-script, h2 .smyn-script { font-size: 1.15em; }

/*
 * Where the accent is actually used, and why it is only here.
 *
 * The brief allows "one short editorial accent, a hero phrase, occasional
 * expressive heading fragment" — and forbids rewriting Elementor page JSON.
 * Every heading on the marketing pages lives in _elementor_data, so the only
 * places the theme can apply a class without touching page content are its own
 * templates. These two are exactly the kind of fragment the brief describes:
 *
 *   404.php     the emphasised half of "This page has / wandered off."
 *   login.php   the single decorative ghost word behind the sign-in card
 *
 * For anything on a marketing page, the owner adds `smyn-script` to a widget's
 * CSS Classes field in Elementor, or wraps one word in <span class="smyn-script">
 * in the editor. That keeps the choice with the owner and the page data intact.
 */
.smyn-404-title em {
	font-family: var(--smyn-font-script);
	font-style: normal;
	font-weight: 400;
	font-size: 1.15em;
	line-height: 1.05;
	letter-spacing: 0;
}

/* ==================================================================
   The script accent, applied to the compositions that ask for it
   ==================================================================
   The site is built on one editorial figure, repeated: a roman display line
   answered by an expressive second line.

       Show me            More than          Book once.
       your nails.        beautiful nails.   Return beautifully.

   The design already names that second voice — every one of those widgets
   carries a class ending `-italic`, or is the hero's own `-line2` / `-title2` /
   `-ghost`. That naming is the classification, so this rule follows it rather
   than inventing one: 33 elements across the site, and no others.

   WHAT IS DELIBERATELY NOT HERE. Italic alone was never the test — §4 of the
   brief rules Snell out of prices, and the two italic price classes on the
   site (.smyn-b03x-price-val "£47" on the home worlds strip, .smyn-b07-pval
   "£80" on signatures) carry no `-italic` in their names, so they are not
   matched. Neither is .smyn-b02x-ghost "Precision", which is set roman: it is
   a decorative watermark but it is not in the expressive voice, and promoting
   it would be an assumption rather than a reading of the composition. Nothing
   in navigation, buttons, forms, checkout, catalogue metadata or WooCommerce
   is reachable from these selectors at all.

   The strongest evidence that the ghost belongs here is that the sign-in page
   already sets its own ghost word — "Polished." — in Snell, and has since the
   branded-login work. Home's hero ghost is the same word in the same role.

   Snell is drawn with its own slant (italicAngle -40), so it is set upright:
   asking for italic would shear an already-slanted face a second time. It also
   sets small for its point size, hence the 1.18em, and its descenders are long,
   hence the tighter line-height.
   ================================================================== */

/*
 * `!important`, and scoped under `.smyn`, for one reason: the rule further
 * down that forces EVERY Elementor heading onto the display face is itself
 * `!important` — it has to be, to beat 975 per-widget `font-family: "Jost"`
 * entries in the page data. This is the one deliberate exception to it, so it
 * has to speak the same language. Without that, these selectors lose and the
 * accent silently stays roman.
 */
.smyn .smyn-b01-ghost .elementor-heading-title,
.smyn .smyn-b01-line2 .elementor-heading-title,
.smyn .smyn-b02x-title2 .elementor-heading-title,
.smyn [class*="-title-italic"] .elementor-heading-title,
.smyn [class*="-package-italic"] .elementor-heading-title,
.smyn [class*="-gift-italic"] .elementor-heading-title,
.smyn [class*="-bridal-italic"] .elementor-heading-title {
	font-family: var(--smyn-font-script) !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 1.18em;
	line-height: 1.06;
	letter-spacing: 0;
}

/* The word-split spans the reveal animation inserts must not re-italicise. */
.smyn-b01-ghost .elementor-heading-title .smyn-w,
.smyn-b01-line2 .elementor-heading-title .smyn-w,
.smyn-b02x-title2 .elementor-heading-title .smyn-w,
[class*="-italic"] .elementor-heading-title .smyn-w {
	font-style: normal !important;
}

/*
 * Prices stay on the brand face, explicitly. They are italic in the design and
 * they are functional text; this states that so a future broad `italic` rule
 * cannot quietly capture them.
 */
.smyn-b03x-price-val,
.smyn-b07-pval,
.smyn-b07-price {
	font-family: var(--smyn-font-display);
}

/* ==================================================================
   Legibility floor — functional text is at least 13px
   ==================================================================
   Measured in Chromium across Home, Services, a treatment page, Packages,
   Contact, Reviews, About and FAQ: 31 distinct customer-facing styles were
   rendering between 9px and 12px. The brief's floors are 13-14px for
   functional text and 15-17px for body, so each one below is raised to 13px.

   These live here rather than at each rule's own site because blocks.css is
   GENERATED (scripts/build_import.py rewrites it on every `make import`), so a
   size edited there would be reverted by the next build. theme-overrides.css
   loads after it and is hand-written, which makes it the durable place for a
   policy that applies across many generated rules.

   What is deliberately NOT raised, because it is not text anyone reads:
     .smyn-service__n, .smyn-catalogue__group-n   row numbers, aria-hidden
     .smyn-service__book-mark, .smyn-book-arrow   arrow marks, aria-hidden
     .smyn-b30-acc-head .ic, .smyn-b33-ic         the "+" that rotates into "x"
   Those are ornaments with an accessible name elsewhere; sizing them as copy
   would make them shout.

   Tracked uppercase at 13px still reads as a small label — the letter-spacing
   does that work, not the size.
   ================================================================== */

/* Header and navigation */
.smyn-skip-link,
.smyn-action-label,
.smyn-book-label-desktop,
.smyn-book-label-mobile { font-size: var(--smyn-fs-micro) !important; }

/* Mobile menu panel: a phone number and an address are the two things a
   visitor most often reads on a phone. */
.smyn-mnav-contact,
.smyn-mnav-book,
.smyn-mnav-line { font-size: var(--smyn-fs-micro); }

/* Footer: address, legal line and credit */
.smyn-footer-fallback-line,
.smyn-footer-fallback-legal,
.smyn-footer-fallback-credit,
.smyn-b26-hours-pill,
.smyn-b26-copyright { font-size: var(--smyn-fs-micro); }

/* Opening status, map address and directions */
.smyn-b10-status,
.smyn-b10-status-text,
.smyn-b21-map-addr,
.smyn-b21-map-go,
.smyn-b21-map-cta { font-size: var(--smyn-fs-micro); }

/* Commercial detail a customer is deciding on: what a package contains,
   what a bonus is worth, what a price note excludes. */
.smyn-b31-chip-bonus,
.smyn-b31-chip-bonus b,
.smyn-b31-chip-save,
.smyn-b31-card-inc,
.smyn-b30-pnote,
.smyn-b30-badge,
.smyn-b30-prices .d,
.smyn-b03x-price-from,
.smyn-b07-pfrom { font-size: var(--smyn-fs-micro) !important; }

/* Cookie banner — consent copy is legal text, not fine print. The banner
   ships its own <style> from smyn-core/includes/popup.php, raised there too;
   this is the belt to that braces if the plugin is older than the theme. */
.smyn-cookie p,
.smyn-cookie a,
.smyn-cookie-ok { font-size: var(--smyn-fs-micro) !important; }

/* Navigation. The desktop bar dropped to 12px between 1201 and 1560px to fit
   seven items; the submenu and the header actions were 12px at every width.
   All three go to 13px.

   Measured at 1201/1280/1440/1560: at 13px the seven items are 457px of text
   plus six 16px gaps = 553px, and the 45% menu column offers 515px. Tightening
   the gap alone was not enough (11px still needed 523px), so at 1201-1280 the
   column split shifts three points from the actions column to the menu column:
   45/39 becomes 48/36. That gives the menu 576px and leaves the actions 432px
   against the 417px they measure, so neither clips. From 1281px up the
   original 45/39 split and 16px gap are untouched. */
@media (min-width: 1201px) and (max-width: 1560px) {
	.smyn-nav-desktop .smyn-nav-list > li > a,
	.smyn-nav-desktop nav > ul > li > a { font-size: var(--smyn-fs-micro) !important; }
}
@media (min-width: 1201px) and (max-width: 1280px) {
	.smyn-header-menu-col { flex: 0 0 48% !important; width: 48% !important; }
	.smyn-header-actions-col { flex: 0 0 36% !important; width: 36% !important; }
	.smyn-nav-desktop .smyn-nav-list,
	.smyn-nav-desktop nav > ul { gap: 13px !important; }
}
.smyn-nav-desktop .sub-menu a,
.smyn-header-action { font-size: var(--smyn-fs-micro) !important; }

/*
 * Icon-square controls (the burger, the cart, the menu's close ×). These set
 * a size but never a family, so the × in the mobile menu was rendering in the
 * browser's default button face — Arial — on every page at every width. It is
 * a control a visitor uses, not an ornament.
 */
.smyn-icon-square,
.smyn-mnav-close,
.smyn-mnav-toggle { font-family: var(--smyn-font-label); }

/*
 * Elementor's own button widget. Its label ships at 11px, and these are the
 * "Book on Fresha" / "Explore" calls to action on the treatment, packages,
 * contact and reviews pages — the most important thing on several of them.
 */
.smyn .elementor-button-text,
.smyn .elementor-button .elementor-button-text {
	font-size: var(--smyn-fs-micro) !important;
}

/* Remaining calls to action and links that were still under the floor. */
.smyn-b31-cta,
.smyn-b30-related a,
.smyn-mnav-book span,
.smyn-b26-nav ul.smyn-footer-menu a { font-size: var(--smyn-fs-micro) !important; }

/* Running copy the theme owns reaches the body floor rather than the
   functional one. */
.smyn-b30-acc-panel p,
.smyn-b33-panel p,
.smyn-b34-doc p { font-size: var(--smyn-fs-body); }

/* ==================================================================
   Motion on small screens, and for visitors who ask for less
   ==================================================================
   A swipe covers far more page on a phone than a scroll wheel does on a
   desktop, so the same timing that reads as considered at 1440px reads as lag
   at 390px. Everything is shortened and the stagger nearly disappears: the
   cascade is a desktop nicety, not something a thumb has time to watch.
   ================================================================== */
@media (max-width: 767px) {
	:root {
		--smyn-rv-section: 260ms;
		--smyn-rv-child: 220ms;
		--smyn-rv-word: 300ms;
		--smyn-rv-curtain: 360ms;
		--smyn-rv-step: 25ms;
		--smyn-rv-lift: 12px;
		--smyn-rv-lift-child: 8px;
	}
	/* Two steps, not three: 50ms of cascade total. */
	.smyn-reveal.smyn-inview .elementor-widget:nth-child(n+3) {
		transition-delay: calc(var(--smyn-rv-step) * 2);
	}
}

/*
 * Reduced motion. assets/js/smyn.js already returns before adding any reveal
 * class when the query matches, so in practice none of the rules above are
 * ever attached. This is the safety net for the case the JS misses — a class
 * left on the markup, a cached page, a preference changed after load: content
 * is visible, at rest, with nothing transitioning and nothing translated.
 */
@media (prefers-reduced-motion: reduce) {
	.smyn-reveal,
	.smyn-reveal .elementor-widget,
	.smyn-reveal.smyn-inview .elementor-widget,
	.smyn-wi,
	.smyn-mag {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
	.smyn-curtain::after { display: none !important; }
}

/* ==================================================================
   Legibility floor, part two — the running copy the first pass missed
   ==================================================================
   The earlier floor pass raised 31 LABEL classes. It did not touch body copy,
   because at the time the only way to reach those paragraphs looked like a
   blanket rule on `.elementor-widget-text-editor`, and that rule also captures
   the eyebrows — which is exactly the mistake that broke the eyebrow
   separators earlier in this project.

   Re-measured in Chromium across twelve pages, classifying every sub-13px
   element by the role it plays rather than by its size alone:

       A  decorative eyebrow / tertiary label     8
       B  functional UI (site chrome)             3
       C  body copy                              43   <- raised here
       D  metadata / short tracked label        277

   Only C is raised. A and D are the design's editorial voice — tracked
   uppercase eyebrows, section numerals, "SMYN / 01" image labels, durations,
   the scroll cue — and flattening them to 13px would erase the hierarchy the
   brief explicitly says not to destroy. They are catalogued, with the reason
   each is allowed to stay small, in docs/audit/elementor-label-sizes.md.

   The classes below are listed one by one rather than matched with
   [class*="-copy"], and that is deliberate: six copy classes already render
   ABOVE the floor — smyn-b05-copy-left and -right at 18px, smyn-b06-intro-copy,
   smyn-b07-copy, smyn-b08-copy and smyn-pt-copy at 14px — and a blanket rule
   would have SHRUNK them to 13px. Every class named here was measured at a
   single size site-wide, all of them below the floor, so this rule can only
   ever raise.
   ================================================================== */

.smyn .smyn-b04-gift-copy,
.smyn .smyn-b04-intro-note,
.smyn .smyn-b04-package-copy,
.smyn .smyn-b05-fact-copy,
.smyn .smyn-b06-badge-copy,
.smyn .smyn-b06-combo-copy,
.smyn .smyn-b06-note,
.smyn .smyn-b06-step-copy,
.smyn .smyn-b20-intro-note,
.smyn .smyn-b20-standards-copy,
.smyn .smyn-b20-story-copy,
.smyn .smyn-b21-form-note,
.smyn .smyn-b22-card-copy,
.smyn .smyn-b22-fineprint-copy,
.smyn .smyn-b22-how-note,
.smyn .smyn-b22-intro-note,
.smyn .smyn-b22-step-copy,
.smyn .smyn-b31-bridal-note,
.smyn .smyn-b31-closing-note,
.smyn .smyn-b31-group-note,
.smyn .smyn-b32-intro-note,
.smyn .smyn-b32-wall-note,
.smyn .smyn-b33-intro-note,
.smyn .smyn-b37-intro-note,
.smyn .smyn-footer-fallback-copy,
.smyn .smyn-b04-gift-copy p,
.smyn .smyn-b04-intro-note p,
.smyn .smyn-b04-package-copy p,
.smyn .smyn-b05-fact-copy p,
.smyn .smyn-b06-badge-copy p,
.smyn .smyn-b06-combo-copy p,
.smyn .smyn-b06-note p,
.smyn .smyn-b06-step-copy p,
.smyn .smyn-b20-intro-note p,
.smyn .smyn-b20-standards-copy p,
.smyn .smyn-b20-story-copy p,
.smyn .smyn-b21-form-note p,
.smyn .smyn-b22-card-copy p,
.smyn .smyn-b22-fineprint-copy p,
.smyn .smyn-b22-how-note p,
.smyn .smyn-b22-intro-note p,
.smyn .smyn-b22-step-copy p,
.smyn .smyn-b31-bridal-note p,
.smyn .smyn-b31-closing-note p,
.smyn .smyn-b31-group-note p,
.smyn .smyn-b32-intro-note p,
.smyn .smyn-b32-wall-note p,
.smyn .smyn-b33-intro-note p,
.smyn .smyn-b37-intro-note p,
.smyn .smyn-footer-fallback-copy p {
	font-size: var(--smyn-fs-micro) !important;
	line-height: 1.55;
}

/*
 * The empty cart's "New in store" grid rendered its product titles, prices and
 * Add-to-cart buttons at 11.3px — WooCommerce's own block defaults, and the one
 * place on the site where a price and a buy button were below the floor. It is
 * only reachable with an empty cart, which is why a sweep that adds a product
 * first never sees it.
 */
.woocommerce .wc-block-grid__product-title,
.woocommerce-page .wc-block-grid__product-title,
.woocommerce .wc-block-grid__product-price,
.woocommerce-page .wc-block-grid__product-price,
.woocommerce .wc-block-grid__product .wp-block-button__link,
.woocommerce-page .wc-block-grid__product .wp-block-button__link {
	font-size: var(--smyn-fs-micro);
}

/* =========================================================================
 * Fixed-width text never wider than its column (theme 3.13)
 *
 * Seven homepage text widgets carry an Elementor "custom width" in pixels —
 * 460px for the hero leads, 470px for the two paragraphs beside "More than
 * beautiful nails", 640px for two slide headings. Elementor writes that as
 * `width: Npx; max-width: Npx`, which replaces its own `max-width: 100%`, so on
 * a phone (and, for the 470px pair, on a 768px tablet) the text ran past the
 * window edge and was cut off mid-word by the section's overflow.
 *
 * This restores the 100% ceiling. Where the column is already wider than the
 * set width — every desktop layout — the rule changes nothing; it only takes
 * effect where the text was being clipped.
 * ====================================================================== */
.elementor .elementor-widget.elementor-widget__width-initial {
	max-width: 100% !important;
}

/* =========================================================================
 * Phones: no section scrolls the page sideways (theme 3.13)
 *
 * The script-accent headings ("One destination.", "Return beautifully.",
 * "signatures.", "at your address." and their kin) carry a design indent — a
 * left margin of 34-80px — on top of Elementor's 100% widget width, so each
 * one's box is wider than its column by exactly that indent. Their text fits;
 * the empty remainder of the box stuck out past the right edge of the screen
 * and let a phone scroll the page 5-40px sideways.
 *
 * Clipping each top-level section horizontally removes that without moving or
 * re-wrapping a single word: on a phone every section is the full width of
 * the screen, so what is clipped was already off-screen. `clip`, not
 * `hidden`: it creates no scroll container, so sticky and focus behaviour
 * inside are untouched, and nothing is clipped vertically.
 * ====================================================================== */
@media (max-width: 767px) {
	.elementor-section.elementor-top-section {
		overflow-x: clip;
	}
}

/* =========================================================================
 * HOMEPAGE REVIEWS — block 09 around the review carousel (theme 3.13)
 *
 * Every rule here is gated on :has(.smyn-rcar). The carousel is rendered by
 * SMYN Core 2.10+; with an older plugin the block still contains the previous
 * one-quote rotator, and this theme must leave that layout exactly as it was
 * rather than stretch a rotator into a space designed for cards.
 *
 * Elementor writes this block's column widths, borders and spacing into its
 * per-element CSS at (0,3,0) with element ids this stylesheet cannot know,
 * so the few properties that have to change carry !important.
 * ====================================================================== */

.smyn-b09-root:has(.smyn-rcar) {
	/* The carousel opens to the right-hand edge of the window; anything past
	   that edge (a scrollbar's width on some systems) is clipped here rather
	   than scrolling the page sideways. clip, not hidden: no scroll container
	   is created, so nothing inside loses sticky or focus behaviour. */
	overflow-x: clip;
}

/* Both columns full width: a heading row, then the cards. */
.smyn-b09-root:has(.smyn-rcar) > .elementor-container {
	flex-wrap: wrap;
}
.smyn-b09-root:has(.smyn-rcar) > .elementor-container > .elementor-column {
	width: 100% !important;
	max-width: 100%;
}

/* The rotator's furniture: its left rule, its indent, its giant quote mark. */
.smyn-b09-root:has(.smyn-rcar) > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
	border-left: 0 !important;
	padding: 0 !important;
}
.smyn-b09-root:has(.smyn-rcar) .smyn-b09-quote-mark {
	display: none;
}

/* The carousel runs from the content edge to the window edge — only in the
   full-width layout above; a browser without :has() keeps the carousel in
   its column rather than cutting the last card at an arbitrary line. */
.smyn-b09-root:has(.smyn-rcar) .smyn-rcar {
	--smyn-rcar-bleed: calc((100vw - 100%) / 2);
}

/*
 * The rating block becomes a heading row on wide screens: the numeral and its
 * stars on the left, "Read all reviews" on the right, and the cards directly
 * beneath — instead of a tall stack with an empty half-page beside it.
 */
@media (min-width: 1025px) {
	.smyn-b09-root:has(.smyn-rcar) > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
		display: grid !important;
		/* The numeral's column is a fixed 11rem rather than its own width: the
		   site's word reveal wraps "5.0" in spans and later unwraps it, which
		   changes its width by a few pixels, and a content-sized column passed
		   that on as a visible shift of the stars and meta beside it. 11rem
		   holds the 122px numeral with room; a longer one still fits (max-content). */
		grid-template-columns: minmax(max-content, 11rem) minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		column-gap: 28px;
		row-gap: 6px;
		align-items: end;
		margin-bottom: clamp(36px, 3.4vw, 56px);
	}
	.smyn-b09-root:has(.smyn-rcar) > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap > * {
		width: auto !important;
		margin: 0 !important;
	}
	.smyn-b09-root:has(.smyn-rcar) > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap > .elementor-section {
		grid-column: 1 / -1;
		margin-bottom: 14px !important;
	}
	.smyn-b09-root:has(.smyn-rcar) .smyn-b09-rating {
		grid-column: 1;
		grid-row: 2 / span 2;
		align-self: end;
	}
	.smyn-b09-root:has(.smyn-rcar) .smyn-b09-stars {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
	}
	.smyn-b09-root:has(.smyn-rcar) .smyn-b09-rating-meta {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		padding-bottom: 14px;
	}
	.smyn-b09-root:has(.smyn-rcar) .smyn-b09-review-link {
		grid-column: 3;
		grid-row: 2 / span 2;
		align-self: end;
		padding-bottom: 14px;
	}
}

@media (max-width: 1024px) {
	.smyn-b09-root:has(.smyn-rcar) > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
		margin-bottom: 30px;
	}
}