/*
Theme Name:   TDC Clinic Blueprint
Theme URI:    https://thedesignclinic.co
Description:  Child theme of Hello Elementor for The Design Clinic aesthetic-clinic blueprint. A port of the Urban Skin reference design system, rebuilt on tokens driven by Clinic Settings so every value stays client-editable.
Author:       The Design Clinic
Author URI:   https://thedesignclinic.co
Template:     hello-elementor
Version:      2.10.0
Text Domain:  tdc-clinic
*/

/* =========================================================================
   TDC CLINIC — DESIGN SYSTEM
   -------------------------------------------------------------------------
   Ported from the reference site's own CSS. Every literal has been replaced
   with a --tdc-* token emitted by TDC_Clinic_CSS_Vars from Clinic Settings,
   so the design is faithful but still fully re-brandable per client.

   Reference mapping (from the reference site's aprils.css override layer):
     h1,h2,h3            IvyOra            → var(--tdc-font-display)
     h1 em,h2 em,h3 em   IvyOra Italic     → display, italic
     h4                  Commuters Sans    → var(--tdc-font-ui)
     p, nav, footer link Neue Haas Roman   → var(--tdc-font-body)
     buttons, labels     Commuters Sans    → var(--tdc-font-ui), uppercase
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Reset and base
   ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	font-family: var(--tdc-font-body);
	font-size: var(--tdc-font-size-base);
	font-weight: 400;
	line-height: var(--tdc-leading-body);
	color: var(--tdc-color-text);
	background-color: var(--tdc-color-bg);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe, table, pre { max-width: 100%; }
img { height: auto; }

a { color: inherit; text-underline-offset: 0.18em; }

/* Hello Elementor's reset.css paints every link, button and submit in its
   own default red (#c36): red text and border on buttons, a solid red
   background on hover *and focus*, and navy (#336) on link hover. The focus
   case is the visible one on phones — tapping a button leaves it focused, so
   the burger stayed red after being tapped.

   These rules repeat Hello's selectors exactly, so they match its
   specificity and win on source order (this sheet loads after Hello's).
   They sit here, before any component, so every component rule that follows
   — including their own :hover states — still wins over them. */
a:active,
a:hover { color: inherit; }

[type=button],
[type=submit],
button {
	border-color: currentColor;
	color: inherit;
}

[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
	background-color: transparent;
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--tdc-color-primary);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   2. Typography

   The reference sets headings at 3rem (h1) scaling by an --adjust-heading
   factor, stepping down at 1024px and 767px. Reproduced here with the same
   breakpoints and ratios rather than a fluid clamp, so the rhythm matches.
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--tdc-font-display);
	font-weight: 300;
	font-style: normal;
	color: var(--tdc-color-heading);
	display: block;
	margin: 0 0 0.5em;
	line-height: 1.25;
	letter-spacing: var(--tdc-tracking-heading);
	/* Never leave the last word stranded on its own line. Individual headings
	   can still ask for `balance` where even line lengths matter more. */
	text-wrap: pretty;
}

/* Italic emphasis inside a heading swaps to the italic display cut and
   cancels the browser's own slant, exactly as the reference does. */
h1 em, h2 em, h3 em,
.h1 em, .h2 em, .h3 em {
	font-family: var(--tdc-font-display);
	font-style: italic;
	font-weight: 300;
}

h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2.5rem; }
h3, .h3 { font-size: 2rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

/* h4 is a UI-face heading on the reference, not a display one. */
h4, .h4 {
	font-family: var(--tdc-font-ui);
	font-size: 1.5rem;
	font-weight: 400;
}

@media (max-width: 1024px) {
	h1, .h1 { font-size: 2.5rem; }
	h2, .h2 { font-size: 2.1rem; }
	h3, .h3 { font-size: 1.75rem; }
}

@media (max-width: 767px) {
	h1, .h1 { font-size: 2.25rem; }
	h2, .h2 { font-size: 1.75rem; }
	h3, .h3 { font-size: 1.5rem; }
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

/* The small caps label above a heading. Commuters Sans, uppercase. */
.tdc-subheading,
.main-subheading {
	display: block;
	font-family: var(--tdc-font-ui);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: var(--tdc-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--tdc-color-text);
	margin: 0 0 10px;
}

.tdc-lead {
	font-size: 1.125rem;
	line-height: 1.55;
}

.tdc-prose > p,
.tdc-prose > ul,
.tdc-prose > ol { max-width: 68ch; }

/* -------------------------------------------------------------------------
   3. Layout and section rhythm

   The reference gives every section its own --PT / --PB and scales them to
   80% at 1024px and 60% at 767px. That single mechanism produces the whole
   vertical rhythm, so it is reproduced verbatim.
   ------------------------------------------------------------------------- */

.tdc-section {
	--pt: var(--PT, var(--tdc-section-y));
	--pb: var(--PB, var(--tdc-section-y));
	padding-top: var(--pt);
	padding-bottom: var(--pb);
}

@media (max-width: 1024px) {
	.tdc-section {
		padding-top: calc(var(--pt) * 0.8);
		padding-bottom: calc(var(--pb) * 0.8);
	}
}

@media (max-width: 767px) {
	.tdc-section {
		padding-top: calc(var(--pt) * 0.6);
		padding-bottom: calc(var(--pb) * 0.6);
	}
}

/* The reference runs full-bleed: .wrapper is width:100% with a 60px gutter
   that steps to 40px at tablet and 20px at mobile. --tdc-container is
   `none` unless a client sets a cap in Clinic Settings. */
.tdc-container {
	width: 100%;
	max-width: var(--tdc-container);
	margin-inline: auto;
	padding-inline: var(--tdc-gutter);
}

@media (max-width: 1024px) {
	:root { --tdc-gutter: 2.5rem; }  /* 40px */
}

@media (max-width: 767px) {
	:root { --tdc-gutter: 1.25rem; } /* 20px */
}

.tdc-narrow {
	width: 100%;
	max-width: var(--tdc-container-narrow);
	margin-inline: auto;
}

.tdc-section--alt  { background-color: var(--tdc-color-bg-alt); }
.tdc-section--dark { background-color: var(--tdc-color-bg-dark); color: #fff; }
.tdc-section--dark h1,
.tdc-section--dark h2,
.tdc-section--dark h3,
.tdc-section--dark h4 { color: #fff; }

/* -------------------------------------------------------------------------
   4. Buttons

   Reference: Commuters Sans, uppercase, 8px radius, filled with the text
   colour, min-width 120px (180px on larger viewports).
   ------------------------------------------------------------------------- */

.tdc-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: 120px;
	font-family: var(--tdc-font-ui);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	padding: 1.05em 1.75em;
	border: 1px solid var(--tdc-color-button-bg);
	border-radius: var(--tdc-button-radius);
	background-color: var(--tdc-color-button-bg);
	color: var(--tdc-color-button-text);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 768px) {
	.tdc-btn { min-width: 180px; }
}

.tdc-btn:hover,
.tdc-btn:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--tdc-color-button-hover-bg);
	border-color: var(--tdc-color-button-hover-bg);
	color: var(--tdc-color-button-hover-text);
}

.tdc-btn--outline {
	background-color: transparent;
	color: var(--tdc-color-button-bg);
}

.tdc-btn--outline:hover {
	background-color: var(--tdc-color-button-bg);
	color: var(--tdc-color-button-text);
}

.tdc-btn--light {
	background-color: #fff;
	border-color: #fff;
	color: var(--tdc-color-heading);
}

.tdc-btn--light:hover {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

/* Quiet underlined link, used beside section headings. */
.tdc-link {
	display: inline-block;
	font-family: var(--tdc-font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 0.35em;
	border-bottom: 1px solid currentColor;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.tdc-link:hover {
	color: var(--tdc-color-primary);
	border-color: var(--tdc-color-primary);
}

/* -------------------------------------------------------------------------
   5. Motion

   Keyframes lifted from the reference. The reveal is driven by
   IntersectionObserver in assets/js/tdc.js, which adds .is-visible.
   ------------------------------------------------------------------------- */

@keyframes tdcHeroFade {
	0%   { opacity: 0.001; transform: translate3d(0, var(--move-offset, 30px), 0); }
	to   { opacity: 1; transform: translateZ(0); }
}

@keyframes tdcFadeInUp {
	0%   { transform: translateY(15px); opacity: 0; }
	50%  { opacity: 1; }
	to   { transform: translateZ(0); opacity: 1; }
}

@keyframes tdcPressFadeInUp {
	0%   { transform: translateY(70%); opacity: 0; }
	to   { transform: translateZ(0); opacity: 1; }
}

@keyframes tdcClipPathFromLeft {
	0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
	to   { clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
}

@keyframes tdcImageInSlide {
	0%   { transform: translate(20%); }
	to   { transform: translate(0); }
}

@keyframes tdcMenuFadeIn {
	0%   { opacity: 0; transform: scale(0.975); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes tdcShowCompactHeader {
	0%   { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Reveal-on-scroll. Elements opt in with data-tdc-anim.

   Only hide them once the observer is known to be running — tdc.js sets
   .tdc-anim-ready on <html>. Without JS, or if the script fails, content
   stays visible rather than disappearing. */
.tdc-anim-ready [data-tdc-anim] {
	opacity: 0;
	will-change: transform, opacity;
}

[data-tdc-anim].is-visible,
.tdc-anim-ready [data-tdc-anim].is-visible {
	/* The resting state is visible. The animation only decorates the way in —
	   if it never runs, the content is still on screen. */
	opacity: 1;
	animation-duration: 0.9s;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	animation-fill-mode: forwards;
}

[data-tdc-anim="fade-up"].is-visible  { animation-name: tdcFadeInUp; }
[data-tdc-anim="hero"].is-visible     { animation-name: tdcHeroFade; }
[data-tdc-anim="press"].is-visible    { animation-name: tdcPressFadeInUp; }
[data-tdc-anim="clip"].is-visible     { animation-name: tdcClipPathFromLeft; animation-duration: 1.2s; }
[data-tdc-anim="slide"].is-visible    { animation-name: tdcImageInSlide; }

/* Stagger children of a revealed group. */
[data-tdc-stagger] > * { --tdc-delay: 0ms; }
[data-tdc-stagger].is-visible > *:nth-child(1) { animation-delay: 0ms; }
[data-tdc-stagger].is-visible > *:nth-child(2) { animation-delay: 90ms; }
[data-tdc-stagger].is-visible > *:nth-child(3) { animation-delay: 180ms; }
[data-tdc-stagger].is-visible > *:nth-child(4) { animation-delay: 270ms; }
[data-tdc-stagger].is-visible > *:nth-child(5) { animation-delay: 360ms; }
[data-tdc-stagger].is-visible > *:nth-child(6) { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-tdc-anim] { opacity: 1 !important; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------------
   7. Header and mega menu

   Reference layout: navigation left, logo absolutely centred, actions right.
   On pages that open with a banner the header is transparent and sits over
   the image behind a soft gradient; it turns solid once scrolled.
   ------------------------------------------------------------------------- */

.tdc-header {
	position: relative;
	z-index: 50;
	width: 100%;
	background-color: var(--tdc-color-bg);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.tdc-header--sticky { position: sticky; top: 0; }

/* Overlay mode: the header floats on top of the hero. */
.tdc-header--transparent {
	position: absolute;
	inset: 0 0 auto 0;
	background-color: transparent;
	color: #fff;
}

.tdc-header--transparent.tdc-header--sticky { position: fixed; }

/* The gradient keeps nav legible over a bright image without a solid bar. */
.tdc-header--has-gradient::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 200%;
	pointer-events: none;
	background: var(--tdc-header-overlay, linear-gradient(to bottom, rgba(0, 0, 0, 0.38), transparent));
	z-index: -1;
}

.tdc-header--transparent .tdc-nav__link,
.tdc-header--transparent .tdc-header__icon,
.tdc-header--transparent .tdc-burger { color: #fff; }

/* Once scrolled it compresses to the reference's 60px bar and goes solid. */
.tdc-header.has-scrolled {
	background-color: var(--tdc-color-bg);
	color: var(--tdc-color-heading);
	box-shadow: 0 1px 0 rgba(92, 61, 46, 0.12);
}

.tdc-header.has-scrolled::before { opacity: 0; }

.tdc-header.has-scrolled .tdc-nav__link,
.tdc-header.has-scrolled .tdc-header__icon,
.tdc-header.has-scrolled .tdc-burger { color: var(--tdc-color-heading); }

/* The bar grows to fit the logo: the logo is absolutely centred and takes
   up no height of its own, so header.php passes the height of whatever is
   showing in each state (--tdc-hh-*) and the bar reserves it plus breathing
   room. 60px / 76px remain the minimums. */
.tdc-header.has-scrolled .tdc-header__inner { min-height: max(60px, calc(var(--tdc-hh-sc-d, 0px) + 1rem)); padding-block: 0; }

.tdc-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--tdc-container);
	margin-inline: auto;
	padding-inline: var(--tdc-gutter);
	padding-block: 0.9rem;
	min-height: max(76px, calc(var(--tdc-hh-top-d, 0px) + 0.5rem));
	transition: min-height 0.3s ease, padding 0.3s ease;
}

/* Logo sits dead centre regardless of how wide the nav is. */
.tdc-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	line-height: 0;
	isolation: isolate;
}

.tdc-header__logo-img {
	display: block;
	width: var(--tdc-logo-w, 240px);
	max-width: 40vw;
	height: auto;
	transition: opacity 0.3s ease, width 0.3s ease;
}

/* The dark logo is stacked on top of the light one and cross-faded, so the
   header does not reflow when the two files differ slightly in size. */
.tdc-header__logo-img--dark {
	position: absolute;
	inset: 0;
	opacity: 1;
}

/* Over the hero: show the light mark. */
.tdc-header--transparent .tdc-header__logo-img--dark { opacity: 0; }
.tdc-header--transparent .tdc-header__logo-img--light { opacity: 1; }

/* Scrolled and solid: back to full colour. */
.tdc-header--transparent.has-scrolled .tdc-header__logo-img--dark { opacity: 1; }
.tdc-header--transparent.has-scrolled .tdc-header__logo-img--light { opacity: 0; }

/* A solid header only ever needs the colour version. */
.tdc-header:not(.tdc-header--transparent) .tdc-header__logo-img--light { opacity: 0; }

/* No inverse logo supplied: knock the primary out to white while transparent. */
.tdc-header--transparent .tdc-header__logo--knockout .tdc-header__logo-img--light {
	filter: brightness(0) invert(1);
}

/* Logo mark. When one is uploaded it replaces the full logo once the header
   is sticky. It is centred inside the logo box rather than resizing it, so
   nothing else in the header moves when it swaps in. */
.tdc-header__logo-mark {
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	/* Capped so a non-square upload cannot spread into the nav or icons;
	   object-fit keeps it undistorted when the cap applies. */
	max-width: 30vw;
	height: var(--tdc-mark-h, 40px);
	object-fit: contain;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.tdc-header.has-scrolled .tdc-header__logo--has-mark .tdc-header__logo-img--light,
.tdc-header.has-scrolled .tdc-header__logo--has-mark .tdc-header__logo-img--dark { opacity: 0; }
.tdc-header.has-scrolled .tdc-header__logo--has-mark .tdc-header__logo-mark { opacity: 1; }

/* Optional width once sticky (Clinic Settings → Brand → Logo Width on
   Scroll). Applies to whatever is showing when scrolled: the full logo, or
   the mark if one is uploaded. Unset, both keep their normal size. */
.tdc-header__logo-mark { transition: opacity 0.3s ease, width 0.3s ease; }
.tdc-header.has-scrolled .tdc-header__logo-img { width: var(--tdc-logo-w-s, var(--tdc-logo-w, 240px)); }
.tdc-header__logo--sw .tdc-header__logo-mark { width: var(--tdc-logo-w-s); height: auto; }

.tdc-nav-wrap { flex: 1 1 auto; min-width: 0; }

.tdc-nav {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdc-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
	margin-left: auto;
}

.tdc-nav__item { position: relative; }

.tdc-nav__link {
	position: relative;
	display: inline-block;
	font-family: var(--tdc-font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.075em;
	text-decoration: none;
	color: var(--tdc-color-heading);
	padding-block: 0.4rem;
	white-space: nowrap;
}

/* Underline sweep — reference uses a 1.1s expo curve with a 0.25s delay. */
.tdc-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-nav__item:hover > .tdc-nav__link::after,
.tdc-nav__item.is-visible > .tdc-nav__link::after {
	transform: scaleX(1);
	transition-delay: 0.25s;
}

/* The pill CTA — reference calls it navlink--highlight. */
.tdc-navlink--highlight {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	background-color: var(--tdc-color-bg);
	color: var(--tdc-color-heading);
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.tdc-navlink--highlight:hover {
	background-color: var(--tdc-color-primary);
	color: #fff;
}

.tdc-header:not(.tdc-header--transparent) .tdc-navlink--highlight,
.tdc-header.has-scrolled .tdc-navlink--highlight {
	background-color: var(--tdc-color-heading);
	color: #fff;
}

.tdc-header:not(.tdc-header--transparent) .tdc-navlink--highlight:hover,
.tdc-header.has-scrolled .tdc-navlink--highlight:hover {
	background-color: var(--tdc-color-primary);
}

/* Dark transparent scheme (Clinic Settings → Brand → Transparent Header
   Style). For clients whose logo should not appear in white, or whose hero
   imagery is light. Everything that the light scheme turns white goes dark,
   and the scrim behind the header fades from white instead of black so dark
   text stays legible over a photograph.

   Placed after every rule it overrides so ties resolve in its favour. The
   scrolled and logo-mark rules are more specific and still win, so the
   sticky header behaves identically in both schemes. */
.tdc-header--scheme-dark { color: var(--tdc-color-heading); }

.tdc-header--scheme-dark.tdc-header--has-gradient::before {
	background: var(--tdc-header-overlay, linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent));
}

.tdc-header--scheme-dark .tdc-nav__link,
.tdc-header--scheme-dark .tdc-header__icon,
.tdc-header--scheme-dark .tdc-burger { color: var(--tdc-color-heading); }

/* Full-colour logo from the start; the white/knockout version never shows. */
.tdc-header--scheme-dark .tdc-header__logo-img--light { opacity: 0; }
.tdc-header--scheme-dark .tdc-header__logo-img--dark { opacity: 1; }

.tdc-header--scheme-dark .tdc-navlink--highlight {
	background-color: var(--tdc-color-heading);
	color: #fff;
}

.tdc-header--scheme-dark .tdc-navlink--highlight:hover {
	background-color: var(--tdc-color-primary);
	color: #fff;
}

.tdc-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--tdc-color-heading);
	position: relative;
}

.tdc-header__icon svg { width: 1.05rem; height: 1.05rem; }

.tdc-header__cart-count {
	position: absolute;
	top: -0.15rem;
	right: -0.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.25em;
	border-radius: 999px;
	background-color: var(--tdc-color-primary);
	color: #fff;
	font-family: var(--tdc-font-ui);
	font-size: 0.625rem;
	line-height: 1;
}

/* --- Mega menu panel --- */

.tdc-megamenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 15rem;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	z-index: 14;
	background-color: var(--tdc-color-bg);
	color: var(--tdc-color-text);
	border-radius: 0 0 var(--tdc-radius) var(--tdc-radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* Full-width panel spans the header container, not the nav item, so the item
   that owns one drops its positioning context. */
.tdc-nav__item--wide { position: static; }

.tdc-megamenu--wide { left: 0; right: 0; width: auto; }

.tdc-nav__item.is-visible > .tdc-megamenu {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
	transition: opacity 0.2s ease, visibility 0s;
}

.tdc-megamenu__wrapper {
	display: grid;
	grid-template-columns: repeat(var(--tdc-mega-cols, 4), minmax(0, 1fr));
	gap: 2rem 2.5rem;
	padding: 2.5rem var(--tdc-gutter);
	transform: translateY(-8px);
	opacity: 0;
	transition: transform 0.1s, opacity 0.2s;
}

/* Reveal is a transition, never an animation with a fill mode: an animation
   that does not run would pin the panel invisible. */
.tdc-nav__item.is-visible > .tdc-megamenu > .tdc-megamenu__wrapper {
	transform: translateY(0);
	opacity: 1;
	transition: transform 0.1s 0.1s, opacity 0.2s 0.1s;
}

.tdc-megamenu__col { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }

/* A simple dropdown is a compact single-column list, not a full-width panel:
   it does not need the container gutter or the column gaps. */
.tdc-megamenu:not(.tdc-megamenu--wide) .tdc-megamenu__wrapper {
	padding: 1.25rem 1.5rem;
	gap: 0;
	row-gap: 0.15rem;
}

.tdc-megamenu:not(.tdc-megamenu--wide) /* A lone panel item given a description reads as its own column: heading,
   a line of copy, then the link out. */
.tdc-megamenu__desc {
	font-family: var(--tdc-font-body);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--tdc-color-muted);
	max-width: 22ch;
	text-wrap: pretty;
	margin: 0 0 0.75rem;
}

.tdc-megamenu__more {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--tdc-color-heading);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	align-self: flex-start;
	transition: opacity 0.2s ease;
}

.tdc-megamenu__more:hover { opacity: 0.6; }

.tdc-megamenu__link { padding-block: 0.3rem; }

.tdc-megamenu__title {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--tdc-color-primary);
	margin: 0 0 0.35rem;
}

.tdc-megamenu__link {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--tdc-color-text);
	transition: color 0.2s ease;
}

.tdc-megamenu__link:hover { color: var(--tdc-color-primary); }

@media (max-width: 1024px) {
	.tdc-nav-wrap, .tdc-megamenu { display: none; }
	.tdc-header__inner { min-height: max(60px, calc(var(--tdc-hh-top-m, 0px) + 1.25rem)); }
	.tdc-header.has-scrolled .tdc-header__inner { min-height: max(60px, calc(var(--tdc-hh-sc-m, 0px) + 1rem)); }

	/* The logo stays absolutely centred on mobile, exactly as on desktop.
	   Making it static and centring it with auto margins only centres it in
	   the gap between the burger and the icons — which differ in width, so it
	   sat off-centre. Static positioning also left the stacked full-colour
	   logo anchored to the header bar instead of the logo, so it appeared to
	   jump left once the header went solid on scroll. */
	.tdc-header__logo-img { width: var(--tdc-logo-w-m, var(--tdc-logo-w, 140px)); max-width: 44vw; }
	.tdc-header__logo-mark { height: var(--tdc-mark-h-m, 32px); }

	/* Scrolled, mobile. Uses the mobile scrolled width only — a desktop
	   scrolled width must not leak onto phones, so if only that one is set
	   the mark drops back to its normal mobile size. */
	.tdc-header.has-scrolled .tdc-header__logo-img { width: var(--tdc-logo-w-m-s, var(--tdc-logo-w-m, var(--tdc-logo-w, 140px))); }
	.tdc-header__logo--sw:not(.tdc-header__logo--swm) .tdc-header__logo-mark { width: auto; height: var(--tdc-mark-h-m, 32px); }
	.tdc-header__logo--swm .tdc-header__logo-mark { width: var(--tdc-logo-w-m-s); height: auto; }
}

/* -------------------------------------------------------------------------
   8. Mobile drawer navigation
   ------------------------------------------------------------------------- */

.tdc-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: -0.6rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--tdc-color-heading);
}

.tdc-burger__bars,
.tdc-burger__bars::before,
.tdc-burger__bars::after {
	display: block;
	width: 20px;
	height: 1px;
	background-color: currentColor;
	transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s;
}

.tdc-burger__bars { position: relative; }
.tdc-burger__bars::before { content: ""; position: absolute; top: -6px; }
.tdc-burger__bars::after  { content: ""; position: absolute; top: 6px; }

.tdc-drawer[open] ~ * .tdc-burger__bars { opacity: 0; }

@media (max-width: 1024px) {
	.tdc-burger { display: inline-flex; }
}

.tdc-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
}

.tdc-drawer.is-open { visibility: visible; pointer-events: auto; }

.tdc-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.tdc-drawer.is-open .tdc-drawer__scrim { opacity: 1; }

.tdc-drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(24rem, 88vw);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.5rem var(--tdc-gutter) 3rem;
	overflow-y: auto;
	background-color: var(--tdc-color-bg);
	transform: translateX(-100%);
	transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-drawer.is-open .tdc-drawer__panel { transform: translateX(0); }

.tdc-drawer__close {
	align-self: flex-end;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--tdc-color-heading);
}

/* Reference uses IvyOra for level-1 mobile links, Neue Haas below. */
/* ---- Collapsible drawer sections ---------------------------------------
   Native disclosures, so the whole menu works with no JavaScript and reads
   correctly to a screen reader. Closed by default: printing every level open
   put the entire site on one very long scroll. */
.tdc-drawer__section { display: flex; flex-direction: column; }

.tdc-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	padding-right: 0.25rem;
}

/* Safari draws its own triangle unless both of these are set. */
.tdc-drawer__toggle::-webkit-details-marker { display: none; }
.tdc-drawer__toggle::marker { content: ''; }

.tdc-drawer__inner { display: flex; flex-direction: column; }

/* A chevron from two borders: it turns to point up when the panel opens. */
.tdc-drawer__chevron {
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid var(--tdc-color-heading);
	border-bottom: 1.5px solid var(--tdc-color-heading);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease;
}

.tdc-drawer__section[open] > .tdc-drawer__toggle .tdc-drawer__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.tdc-drawer__section--sub > .tdc-drawer__toggle { padding-left: 1rem; }
.tdc-drawer__section--sub .tdc-drawer__chevron { width: 0.4rem; height: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
	.tdc-drawer__chevron { transition: none; }
}

.tdc-drawer__link--1 {
	font-family: var(--tdc-font-display);
	font-size: 1.5rem;
	font-weight: 300;
	text-decoration: none;
	color: var(--tdc-color-heading);
	padding-block: 0.5rem;
}

.tdc-drawer__link--2 {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--tdc-color-text);
	padding-block: 0.35rem;
	padding-left: 1rem;
}

.tdc-drawer__group {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow, 0.12em);
	text-transform: uppercase;
	color: var(--tdc-color-muted);
	padding-block: 0.6rem 0.2rem;
	padding-left: 1rem;
}

.tdc-drawer__link--3 {
	font-family: var(--tdc-font-body);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--tdc-color-text);
	padding-block: 0.3rem;
	padding-left: 2rem;
}


/* -------------------------------------------------------------------------
   9. Mosaic grid  (reference: 3 blocks at 33.33%, content overlaid)
   ------------------------------------------------------------------------- */

.tdc-mosaic {
	display: grid;
	grid-template-columns: repeat(var(--tdc-mosaic-cols, 3), minmax(0, 1fr));
	gap: 10px; /* reference uses a tight 10px rhythm between mosaic cards */
	width: 100%;
}

.tdc-mosaic__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* 4:3 so the cards grow with the screen; the min-height keeps narrow
	   (3-up or mobile) cards from getting too short. The explicit width is
	   what keeps them in their column: without it the browser sizes the card
	   from its min-height and the ratio, and the cards overlap. */
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 30rem;
	padding: 2rem;
	overflow: hidden;
	border-radius: var(--tdc-radius);
	isolation: isolate;
	color: #fff;
	text-decoration: none;
}

.tdc-mosaic__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-mosaic__item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--tdc-overlay, linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05) 65%));
}

.tdc-mosaic__item:hover img { transform: scale(1.05); }

.tdc-mosaic__title {
	font-family: var(--tdc-font-display);
	font-size: 1.75rem;
	font-weight: 300;
	color: #fff;
	margin: 0 0 0.4rem;
}

.tdc-mosaic__text {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 1.1rem;
	/* A category's description can be a full paragraph (it is the blurb on the
	   treatments listing too), so the card shows an opening few lines only. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.tdc-mosaic__btn {
	font-family: var(--tdc-font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.3em;
	align-self: flex-start;
}

/* Reference turns the mosaic into a swipeable row on mobile. */
@media (max-width: 767px) {
	.tdc-mosaic {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.75rem;
	}
	.tdc-mosaic__item {
		flex: 0 0 78%;
		scroll-snap-align: start;
		min-height: 24rem;
	}

	.tdc-mosaic__title { font-size: 1.5rem; }

	.tdc-mosaic__text {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}

/* -------------------------------------------------------------------------
   10. Cards  (reference product media is 130% padding-top → 1 : 1.3)
   ------------------------------------------------------------------------- */

.tdc-card { display: flex; flex-direction: column; text-decoration: none; }

.tdc-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.3;
	overflow: hidden;
	border-radius: var(--tdc-radius);
	background-color: var(--tdc-color-bg-alt);
}

.tdc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-card:hover .tdc-card__media img { transform: scale(1.04); }

.tdc-card__title {
	font-family: var(--tdc-font-body);
	font-size: 1rem;
	font-weight: 400;
	color: var(--tdc-color-heading);
	margin: 1.1rem 0 0.3rem;
}

.tdc-card__price {
	font-family: var(--tdc-font-ui);
	font-size: 0.875rem;
	color: var(--tdc-color-text);
	margin: 0;
}

/* Summary and "Find out more" on treatment category cards. */
.tdc-card__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--tdc-color-text);
	margin: 0 0 0.9rem;
}

.tdc-card__link {
	margin-top: auto;
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tdc-color-heading);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* News cards. */
.tdc-card__date {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow, 0.12em);
	text-transform: uppercase;
	color: var(--tdc-color-muted);
	margin: 1.1rem 0 0.35rem;
}

.tdc-card--post .tdc-card__title { margin-top: 0; }
.tdc-card--post .tdc-card__media { aspect-ratio: 4 / 3; }

/* Treatment cards lead with the display face. */
.tdc-card--treatment .tdc-card__title {
	font-family: var(--tdc-font-display);
	font-size: 1.5rem;
	font-weight: 300;
}

/* -------------------------------------------------------------------------
   12. Testimonials  (reference sets the quote in IvyOra)
   ------------------------------------------------------------------------- */

.tdc-testimonial { display: flex; flex-direction: column; align-items: center; text-align: center; }

.tdc-testimonial__quote {
	font-family: var(--tdc-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--tdc-color-heading);
	margin: 0 0 1.25rem;
	max-width: 34ch;
}

.tdc-testimonial--quotes .tdc-testimonial__quote::before { content: "\201C"; }
.tdc-testimonial--quotes .tdc-testimonial__quote::after  { content: "\201D"; }

.tdc-testimonial__name {
	font-family: var(--tdc-font-body);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tdc-color-text);
	margin: 0;
}

.tdc-rating { display: inline-flex; gap: 0.15rem; margin-bottom: 0.9rem; color: var(--tdc-color-primary); }
.tdc-rating svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }

/* -------------------------------------------------------------------------
   13. Press / brand strip
   ------------------------------------------------------------------------- */

.tdc-press { display: flex; flex-direction: column; align-items: center; gap: 2rem; }

.tdc-press__title {
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tdc-color-text);
	margin: 0;
}

.tdc-press__logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: center;
	gap: 2.5rem;
	width: 100%;
}

.tdc-press__logos img {
	width: 100%;
	max-width: 130px;
	margin-inline: auto;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity 0.35s ease, filter 0.35s ease;
}

.tdc-press__logos a:hover img { opacity: 1; filter: grayscale(0); }

@media (max-width: 1024px) { .tdc-press__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
@media (max-width: 767px)  { .tdc-press__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

/* -------------------------------------------------------------------------
   14. Banner image  (reference: rounded-large, overlay, fade / zoom-out)
   ------------------------------------------------------------------------- */

.tdc-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 82vh;
	padding: 4rem var(--tdc-gutter);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--tdc-radius-lg);
}

.tdc-banner .tdc-banner__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal-point, 50% 50%);
	z-index: -2;
}

.tdc-banner__content { position: relative; width: 100%; max-width: var(--tdc-container); margin-inline: auto; color: #fff; }
.tdc-banner__content h1, .tdc-banner__content h2 { color: #fff; }

@media (max-width: 767px) { .tdc-banner { min-height: 68vh; } }

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */

.tdc-footer__title {
	font-family: var(--tdc-font-display);
	font-size: 1.25rem;
	font-weight: 300;
	margin: 0 0 1rem;
}

.tdc-footer__link {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tdc-footer__link:hover { opacity: 0.7; }

/* -------------------------------------------------------------------------
   16. Shortcode output

   The shortcodes emit plain lists and paragraphs. Styling hangs off a hook
   class on the wrapper (.tdc-hours-block, .tdc-detail-block…) and targets
   descendants structurally, so the markup stays simple.
   ------------------------------------------------------------------------- */

.tdc-hours-block ul { list-style: none; margin: 0; padding: 0; width: 100%; }

.tdc-hours-block li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding-block: 0.45em;
	border-bottom: 1px solid currentColor;
	border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}

.tdc-hours-block li:last-child { border-bottom: 0; }
.tdc-hours-block li > span:first-child { text-transform: capitalize; }
.tdc-hours-block li > span:last-child { white-space: nowrap; opacity: 0.85; }

.tdc-social-block ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }

.tdc-social-block a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.tdc-social-block a:hover { opacity: 0.7; }

.tdc-address-block a { text-decoration: none; }
.tdc-address-block a:hover { color: var(--tdc-color-primary); }

.tdc-richtext p { margin: 0 0 1.1em; }
.tdc-richtext p:last-child { margin-bottom: 0; }
.tdc-richtext ul, .tdc-richtext ol { margin: 0 0 1.1em 1.2em; padding: 0; }

/* Treatment / concern detail blocks. */
.tdc-detail-block .tdc-block__heading {
	font-family: var(--tdc-font-display);
	font-weight: 300;
	font-size: 1.75rem;
	line-height: 1.25;
	color: var(--tdc-color-heading);
	margin: 0 0 1.1rem;
}

.tdc-detail-block ul,
.tdc-detail-block ol { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.tdc-detail-block ul:last-child,
.tdc-detail-block ol:last-child { margin-bottom: 0; }

.tdc-detail-block ul > li {
	position: relative;
	padding: 0.7em 0 0.7em 1.9em;
	border-bottom: 1px solid var(--tdc-color-border);
	border-bottom-color: color-mix(in srgb, var(--tdc-color-border) 20%, transparent);
}

.tdc-detail-block ul > li:last-child { border-bottom: 0; }

.tdc-detail-block ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15em;
	width: 0.55em;
	height: 0.3em;
	border-left: 1.5px solid var(--tdc-color-primary);
	border-bottom: 1.5px solid var(--tdc-color-primary);
	transform: rotate(-45deg);
}

.tdc-detail-block ol { counter-reset: tdc-step; }

.tdc-detail-block ol > li {
	counter-increment: tdc-step;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0 0 1.6em 3.2em;
}

.tdc-detail-block ol > li::before {
	content: counter(tdc-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: var(--tdc-font-ui);
	font-size: 0.9rem;
	color: var(--tdc-color-primary);
}

.tdc-detail-block ol > li strong {
	font-family: var(--tdc-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	color: var(--tdc-color-heading);
}

.tdc-detail-block .tdc-wysiwyg { margin-bottom: 2.5rem; }

/* -------------------------------------------------------------------------
   17. WooCommerce alignment
   ------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--tdc-font-body);
	font-size: 1rem;
	font-weight: 400;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	font-family: var(--tdc-font-ui);
	font-size: 0.875rem;
	color: var(--tdc-color-heading);
}

.woocommerce span.onsale {
	background-color: var(--tdc-color-accent);
	color: #fff;
	border-radius: 3px;
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-height: auto;
	min-width: auto;
	padding: 0.4em 0.8em;
	line-height: 1;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--tdc-color-primary);
	background-color: var(--tdc-color-bg-alt);
}

/* -------------------------------------------------------------------------
   18. Utilities
   ------------------------------------------------------------------------- */

.tdc-rule { border: 0; border-top: 1px solid var(--tdc-color-border); border-top-color: color-mix(in srgb, var(--tdc-color-border) 22%, transparent); margin: 0; }

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

.tdc-skip-link:focus {
	position: fixed;
	top: 1rem; left: 1rem;
	z-index: 99999;
	padding: 0.75rem 1.25rem;
	background: var(--tdc-color-bg);
	color: var(--tdc-color-heading);
	border: 2px solid var(--tdc-color-primary);
}

body.tdc-no-sticky_header .tdc-header { position: static !important; }

@media print {
	.tdc-section { padding-block: 1rem; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* -------------------------------------------------------------------------
   19. Announcement bar and cart link
   ------------------------------------------------------------------------- */

.tdc-announcement {
	background-color: var(--tdc-color-primary);
	padding-block: 0.6rem;
	padding-inline: var(--tdc-gutter);
	text-align: center;
}

/* The bar keeps its own colours whether its text is plain or a link: without
   this the link inherits the header's link colour and flips to dark once the
   header turns solid on scroll. */
.tdc-announcement p,
.tdc-header .tdc-announcement a,
.tdc-header.has-scrolled .tdc-announcement a {
	margin: 0;
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.tdc-header .tdc-announcement a { text-decoration: none; }
.tdc-header .tdc-announcement a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.tdc-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--tdc-font-body);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--tdc-color-heading);
	white-space: nowrap;
}

.tdc-header__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.35em;
	border-radius: 999px;
	background-color: var(--tdc-color-primary);
	color: #fff;
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	line-height: 1;
}

.tdc-header__cta { min-width: auto; padding-inline: 1.5rem; }

@media (max-width: 767px) {
	/* The CTA already appears in the drawer, so it is dropped from the bar
	   rather than allowed to overflow. */
	.tdc-navlink--highlight { display: none; }
}

/* =========================================================================
   20. Front-page sections (reference layouts)
   ========================================================================= */

.tdc-main { overflow-x: clip; }
.tdc-text-centre { text-align: center; }
.tdc-section__head { margin-bottom: 2.5rem; }

/* --- Banner / hero ------------------------------------------------------ */

.tdc-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	/* The reference hero fills the viewport below the announcement bar:
	   862px inside a 900px window with a 38px bar. */
	min-height: calc(100svh - var(--tdc-announce-h, 0px));
	padding-block: 5rem;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

.tdc-banner--closing {
	align-items: center;
	min-height: 620px;
	border-radius: var(--tdc-radius-lg) var(--tdc-radius-lg) 0 0;
	/* Opaque in its own right: this banner scrolls over the sticky hero, and
	   its image loads lazily. */
	background-color: var(--tdc-color-bg-dark);
}

.tdc-banner .tdc-banner__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.tdc-banner--zoom .tdc-banner__media { animation: tdcBannerZoom 14s ease-out both; }

@keyframes tdcBannerZoom {
	0% { transform: scale(1.08); }
	to { transform: scale(1); }
}

.tdc-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Editable per banner (an Image Overlay field); the fallback is the
	   theme default. */
	background: var(--tdc-overlay, linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.08)));
}

.tdc-banner__content { position: relative; }

/* Reference hero heading: 60px / 66px, stepping to 35px on mobile.
   Banner headings are short and display-sized, so they balance their lines
   rather than only avoiding an orphan: `pretty` cannot fix a two-line
   heading, and leaves the last word stranded. */
.tdc-banner__heading {
	text-wrap: balance;
	font-family: var(--tdc-font-display);
	font-weight: 400;
	font-size: 60px;
	line-height: 1.1;
	color: #fff;
	margin: 0;
	max-width: 16ch;
}

.tdc-banner--closing .tdc-banner__heading { max-width: 22ch; margin-inline: auto; }

.tdc-banner__text {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 1.1rem 0 0;
	max-width: 46ch;
}

.tdc-banner--closing .tdc-banner__text { margin-inline: auto; }

.tdc-banner__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.tdc-banner--closing .tdc-banner__actions { justify-content: center; }

.tdc-btn--ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.tdc-btn--ghost:hover { background-color: #fff; border-color: #fff; color: var(--tdc-color-heading); }

@media (max-width: 1024px) { .tdc-banner__heading { font-size: 44px; } }
@media (max-width: 767px) {
	.tdc-banner { min-height: 74vh; }
	.tdc-banner__heading { font-size: 35px; max-width: none; }
	.tdc-banner--closing { min-height: 440px; }
}

/* --- Card-stacking scroll ----------------------------------------------

   The reference pins the hero (position:sticky, top:0) and lets the next
   section scroll over it behind a 34px rounded top edge. That pin is what
   reads as parallax — the hero appears to sit still while the page moves. */

/* Only the home hero pins. On the reference exactly one banner carries the
   base `card-scrolling-effect` class; inner-page banners carry only the
   `--rounded-large` modifier, so they scroll normally. */
.tdc-banner--hero {
	position: sticky;
	top: 0;
	z-index: 0;
}

.tdc-stack-next {
	position: relative;
	z-index: 2;
	border-radius: 34px 34px 0 0;
	background-color: var(--tdc-color-bg);
}

/* Everything after the pinned hero has to travel above it — and must be
   opaque, or the pinned hero shows through. A transparent section is
   invisible on a static page but becomes a window onto the pin. */
.tdc-main > .tdc-section {
	position: relative;
	z-index: 1;
	background-color: var(--tdc-color-bg);
}

.tdc-main > .tdc-stack-next { z-index: 2; }

/* Modifier grounds still win. */
.tdc-main > .tdc-section--alt { background-color: var(--tdc-color-bg-alt); }
.tdc-main > .tdc-section--dark,
.tdc-main > .tdc-section--values { background-color: var(--tdc-color-bg-dark); }

/* Only the hero pins. The closing banner carries the reference's
   `card-scrolling-effect--rounded-large` class *without* the base
   `card-scrolling-effect`, i.e. the rounded top edge but no sticky — pinning
   it would park its background image behind the whole page. */
.tdc-main > .tdc-banner--closing { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.tdc-banner--hero { position: relative; }
}

/* --- Text sections ------------------------------------------------------ */

.tdc-text__heading {
	font-family: var(--tdc-font-display);
	font-weight: 400;
	font-size: 2.25rem;
	line-height: 1.25;
	color: var(--tdc-color-heading);
	margin: 0 0 1rem;
}

.tdc-text__heading em { font-style: italic; }

.tdc-text__body {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--tdc-color-text);
	margin: 0 0 1.5rem;
}

.tdc-section--intro .tdc-text__heading { font-size: 2rem; max-width: 24ch; margin-inline: auto; }
.tdc-section--intro .tdc-text__body { max-width: 60ch; margin-inline: auto; }

@media (max-width: 767px) {
	.tdc-text__heading, .tdc-section--intro .tdc-text__heading { font-size: 1.6rem; }
}

/* --- Carousel ----------------------------------------------------------- */

.tdc-carousel { position: relative; }

.tdc-carousel__track {
	display: flex;
	gap: var(--tdc-carousel-gap, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}

.tdc-carousel__track::-webkit-scrollbar { display: none; }

.tdc-carousel__slide {
	flex: 0 0 var(--tdc-slide-w, 24%);
	scroll-snap-align: start;
}

.tdc-carousel__nav { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.75rem; }

.tdc-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	/* The theme's default button padding (8px 16px) would leave a 4px content
	   box inside a 36px button and crush the icon to a sliver. */
	padding: 0;
	border: 1px solid var(--tdc-color-border);
	border-color: color-mix(in srgb, var(--tdc-color-border) 30%, transparent);
	border-radius: 999px;
	background: none;
	cursor: pointer;
	color: var(--tdc-color-heading);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tdc-carousel__btn svg { flex: 0 0 auto; width: 1rem; height: 1rem; }
.tdc-carousel__btn:hover { background-color: var(--tdc-color-heading); color: #fff; }
.tdc-carousel__btn[disabled] { opacity: 0.3; cursor: default; }

@media (max-width: 1024px) { .tdc-carousel__slide { flex-basis: 38%; } }
@media (max-width: 767px)  { .tdc-carousel__slide { flex-basis: 62%; } }

/* --- Product card media is 1 : 1.3 on the reference --------------------- */

/* Photos fill the frame, matching the shop and related-product cards. */
.tdc-card__media--product { aspect-ratio: 1 / 1.3; }
.tdc-card__media--product img { object-fit: cover; }

/* --- Common concerns: a compact three-column list of links --------------- */

.tdc-conlist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 4vw, 4rem);
}

.tdc-conlist__item {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--tdc-color-border) 22%, transparent);
	text-decoration: none;
	color: var(--tdc-color-heading);
}

.tdc-conlist__media {
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--tdc-color-bg-alt);
}

.tdc-conlist__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-conlist__item:hover .tdc-conlist__media img { transform: scale(1.06); }

.tdc-conlist__name {
	flex: 1 1 auto;
	font-family: var(--tdc-font-display);
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.25;
}

.tdc-conlist__arrow {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--tdc-color-heading);
	transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-conlist__arrow svg { width: 100%; height: 100%; display: block; }
.tdc-conlist__item:hover .tdc-conlist__arrow { transform: translateX(0.3rem); }

.tdc-conlist__more { margin-top: 2.5rem; }

@media (max-width: 1024px) {
	.tdc-conlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.tdc-conlist { grid-template-columns: minmax(0, 1fr); }
	.tdc-conlist__media { width: 88px; height: 88px; }
	.tdc-conlist__name { font-size: 1.1rem; }
}

/* --- Concern tiles ------------------------------------------------------ */

.tdc-tile { display: flex; flex-direction: column; text-decoration: none; text-align: center; }

.tdc-tile__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--tdc-radius);
	background-color: var(--tdc-color-bg-alt);
}

.tdc-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1); }
.tdc-tile:hover .tdc-tile__media img { transform: scale(1.05); }

.tdc-tile__label {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	color: var(--tdc-color-heading);
	margin-top: 0.9rem;
}

/* --- Review cards ------------------------------------------------------- */

.tdc-carousel--testimonials { --tdc-slide-w: 22%; }

/* A review service's own widget, in place of the testimonials carousel. */
.tdc-reviews-embed { width: 100%; }
.tdc-reviews-embed iframe { max-width: 100%; }

.tdc-review-card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.6rem;
	border: 1px solid color-mix(in srgb, var(--tdc-color-border) 25%, transparent);
	border-radius: var(--tdc-radius);
	background-color: var(--tdc-color-bg);
}

.tdc-review-card--feature {
	background-color: var(--tdc-color-primary);
	border-color: var(--tdc-color-primary);
	color: #fff;
	justify-content: space-between;
}

.tdc-review-card--feature .tdc-link { color: #fff; }

.tdc-review-card__lead {
	font-family: var(--tdc-font-display);
	font-size: 1.35rem;
	line-height: 1.3;
	margin: 0;
}

.tdc-review-card__score {
	font-family: var(--tdc-font-ui);
	font-size: 1.5rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.tdc-review-card__score span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }

.tdc-review-card__quote {
	font-family: var(--tdc-font-body);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--tdc-color-text);
	margin: 0;
}

.tdc-review-card__name {
	font-family: var(--tdc-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--tdc-color-heading);
	margin: 0;
}

.tdc-review-card__source {
	font-family: var(--tdc-font-body);
	font-size: 0.6875rem;
	color: var(--tdc-color-muted);
	margin: 0;
}

@media (max-width: 1024px) { .tdc-carousel--testimonials { --tdc-slide-w: 44%; } }
@media (max-width: 767px)  { .tdc-carousel--testimonials { --tdc-slide-w: 76%; } }

/* --- Image with text ---------------------------------------------------- */

.tdc-imagetext {
	display: grid;
	/* minmax(0, …) rather than a bare fr: a grid item defaults to
	   min-width:auto, so a wide image's intrinsic size would force the
	   column open and squeeze the text column off the page. */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
	max-width: 1180px;
	margin-inline: auto;
}

.tdc-imagetext__media {
	/* Without an explicit width the frame sizes from the image's intrinsic
	   width instead of its grid track. */
	width: 100%;
	min-width: 0;
	border-radius: var(--tdc-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--tdc-color-bg-alt);
}

.tdc-imagetext__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdc-imagetext__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

/* Optional two-column list of links (e.g. a category's treatments). */
.tdc-imagetext__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2rem;
	width: 100%;
	max-width: 34rem;
	margin: 0.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.tdc-imagetext__list a {
	display: block;
	padding: 0.75rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--tdc-color-border) 25%, transparent);
	font-size: 0.9375rem;
	color: var(--tdc-color-heading);
	text-decoration: none;
	transition: color 0.3s ease;
}

.tdc-imagetext__list a:hover { color: var(--tdc-color-accent); }

@media (max-width: 480px) { .tdc-imagetext__list { grid-template-columns: minmax(0, 1fr); } }

/* Alternating bands: the media moves to the second column. */
.tdc-imagetext--reverse .tdc-imagetext__media { order: 2; }
.tdc-imagetext--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }

@media (max-width: 1024px) {
	.tdc-imagetext--reverse { grid-template-columns: minmax(0, 1fr); }
	.tdc-imagetext--reverse .tdc-imagetext__media { order: 0; }
}

@media (max-width: 1024px) {
	.tdc-imagetext { grid-template-columns: 1fr; }
}

/* --- Footer ------------------------------------------------------------- */

.tdc-footer {
	background-color: var(--tdc-color-primary);
	color: #fff;
	padding-top: 134px;
	padding-bottom: 20px;
	overflow: hidden;
}

@media (max-width: 1024px) { .tdc-footer { padding-top: 80px; } }

.tdc-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3.5rem;
}

@media (max-width: 1024px) { .tdc-footer__cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 767px)  { .tdc-footer__cols { grid-template-columns: 1fr; } }

.tdc-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.tdc-footer__title {
	font-family: var(--tdc-font-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: #fff;
	margin: 0 0 0.75rem;
}

.tdc-footer__text,
.tdc-footer .tdc-hours-block,
.tdc-footer__link,
.tdc-footer__menu a {
	font-family: var(--tdc-font-body);
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	text-decoration: none;
}

.tdc-footer__link:hover,
.tdc-footer__menu a:hover { color: #fff; }

.tdc-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tdc-footer__social a { color: rgba(255, 255, 255, 0.78); }
.tdc-footer__social a:hover { color: #fff; }
.tdc-footer__hours { width: 100%; max-width: 18rem; margin-top: 0.5rem; }

/* The oversized closing wordmark. */
.tdc-footer__wordmark {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-inline: var(--tdc-gutter);
	margin-block: 1rem 1.5rem;
	line-height: 0.82;
	user-select: none;
}

.tdc-footer__wordmark span {
	font-family: var(--tdc-font-display);
	font-weight: 400;
	font-size: clamp(2rem, calc(96vw / (var(--tdc-wordmark-chars, 11) * 0.62)), 22rem);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.tdc-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tdc-footer__legal p { margin: 0; font-family: var(--tdc-font-body); font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }
.tdc-footer__legal a { color: inherit; text-decoration: none; }
.tdc-footer__legal a:hover { color: #fff; }

/* =========================================================================
   21. Inner page components
   ========================================================================= */

.tdc-banner--page { min-height: min(62vh, 560px); align-items: flex-end; }
.tdc-banner--page .tdc-banner__heading { font-size: 52px; }

@media (max-width: 767px) {
	.tdc-banner--page { min-height: 44vh; }
	.tdc-banner--page .tdc-banner__heading { font-size: 32px; }
}

/* Facts bar on a treatment. */
.tdc-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tdc-gutter);
}

@media (max-width: 767px) { .tdc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }

.tdc-facts__item { display: flex; flex-direction: column; gap: 0.3rem; }

.tdc-facts__label {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--tdc-color-muted);
	margin: 0;
}

.tdc-facts__value {
	font-family: var(--tdc-font-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--tdc-color-heading);
	margin: 0;
}

/* Treatment body + booking sidebar. */
.tdc-treatment {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: calc(var(--tdc-gutter) * 1.5);
	align-items: start;
}

@media (max-width: 1024px) { .tdc-treatment { grid-template-columns: minmax(0, 1fr); } }

.tdc-booking-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 2rem;
	border-radius: var(--tdc-radius);
	background-color: var(--tdc-color-bg-alt);
	position: sticky;
	top: 100px;
}

@media (max-width: 1024px) { .tdc-booking-card { position: static; } }

.tdc-booking-card__title {
	font-family: var(--tdc-font-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--tdc-color-heading);
	margin: 0;
}

.tdc-booking-card__text {
	font-family: var(--tdc-font-body);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--tdc-color-text);
	margin: 0;
}

.tdc-booking-card .tdc-btn { width: 100%; }
.tdc-booking-card__phone { font-size: 0.875rem; color: var(--tdc-color-muted); margin: 0; }

/* Simple grids used on inner pages. */
.tdc-grid { display: grid; gap: var(--tdc-gutter); }
.tdc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.tdc-grid--3, .tdc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.tdc-grid--2, .tdc-grid--3, .tdc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Values, team, contact, accordion ----------------------------------- */

.tdc-section--values { background-color: var(--tdc-color-bg-dark); color: #fff; }
.tdc-value { display: flex; flex-direction: column; gap: 0.75rem; }
.tdc-value__title { font-family: var(--tdc-font-display); font-size: 1.5rem; font-weight: 400; color: #fff; margin: 0; }
.tdc-value__text { font-family: var(--tdc-font-body); font-size: 0.9375rem; line-height: 1.7; color: rgba(255,255,255,0.75); margin: 0; }

.tdc-person { display: flex; flex-direction: column; }
.tdc-person__media { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--tdc-radius); background-color: var(--tdc-color-bg); }
.tdc-person__media img { width: 100%; height: 100%; object-fit: cover; }
.tdc-person__name { font-family: var(--tdc-font-display); font-size: 1.25rem; font-weight: 400; color: var(--tdc-color-heading); margin: 1rem 0 0.2rem; }
.tdc-person__role { font-family: var(--tdc-font-body); font-size: 0.875rem; color: var(--tdc-color-text); margin: 0; }
.tdc-person__quals { font-family: var(--tdc-font-ui); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tdc-color-muted); margin: 0.4rem 0 0; }

.tdc-contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(var(--tdc-gutter) * 1.5); align-items: start; }
.tdc-contact__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.tdc-contact__block { display: flex; flex-direction: column; gap: 0.6rem; }
.tdc-contact__block .tdc-address-block,
.tdc-contact__block .tdc-hours-block { font-family: var(--tdc-font-body); font-size: 0.9375rem; line-height: 1.7; color: var(--tdc-color-heading); }
.tdc-contact__note { font-family: var(--tdc-font-body); font-size: 0.8125rem; font-style: italic; color: var(--tdc-color-muted); margin: 0; }

.tdc-contact__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 2.25rem; border-radius: var(--tdc-radius); background-color: var(--tdc-color-primary); color: #fff; }
.tdc-contact__panel .tdc-booking-card__title { color: #fff; }
.tdc-contact__panel .tdc-booking-card__text { color: rgba(255,255,255,0.8); }

@media (max-width: 1024px) {
	.tdc-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.tdc-contact__details { grid-template-columns: minmax(0, 1fr); }
}

.tdc-map { width: 100%; }
.tdc-map iframe { display: block; width: 100%; height: 460px; border: 0; }

/* FAQ accordion — native <details>, no JavaScript needed. */
.tdc-accordion { border-bottom: 1px solid color-mix(in srgb, var(--tdc-color-border) 22%, transparent); }
.tdc-accordion__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; cursor: pointer; list-style: none; }
.tdc-accordion__head::-webkit-details-marker { display: none; }
.tdc-accordion__title { font-family: var(--tdc-font-display); font-size: 1.35rem; font-weight: 400; color: var(--tdc-color-heading); }
.tdc-accordion__icon { position: relative; flex: 0 0 auto; width: 0.9rem; height: 0.9rem; }
.tdc-accordion__icon::before,
.tdc-accordion__icon::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background-color: var(--tdc-color-heading); transition: transform 0.3s cubic-bezier(0.19,1,0.22,1); }
.tdc-accordion__icon::after { transform: rotate(90deg); }
.tdc-accordion[open] .tdc-accordion__icon::after { transform: rotate(0deg); }
.tdc-accordion__body { padding-bottom: 1.5rem; font-family: var(--tdc-font-body); font-size: 0.9375rem; line-height: 1.75; color: var(--tdc-color-text); max-width: 62ch; }

/* =========================================================================
   22. Shop

   Reference: a 4-up grid of portrait cards showing only title and price, and
   a product page of gallery + buy panel + accordion. Woo's own colours are
   overridden explicitly — `.button.alt` carries WooCommerce purple and beats
   a generic `.button` rule.
   ========================================================================= */

/* --- Product grid ------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tdc-gutter) calc(var(--tdc-gutter) * 0.6);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.woocommerce ul.products li.product,
ul.products li.tdc-product-card {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	text-align: center;
}

/* Woo's own mobile rule is `.woocommerce ul.products[class*=columns-] li.product`
   (an attribute selector, so it outranks the reset above) and puts the cards
   back to 48% floats inside our grid cells. Same specificity wins it back. */
@media (max-width: 768px) {
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product {
		width: auto;
		float: none;
		clear: none;
		margin: 0;
	}
}

@media (max-width: 1024px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tdc-product-card__link { display: flex; flex-direction: column; text-decoration: none; }

.tdc-product-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.3;  /* the reference media ratio */
	overflow: hidden;
	border-radius: var(--tdc-radius);
	background-color: var(--tdc-color-bg-alt);
}

.tdc-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-product-card:hover .tdc-product-card__media img,
.tdc-product-card__link:hover .tdc-product-card__media img { transform: scale(1.04); }

.tdc-product-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.35em 0.75em;
	border-radius: 3px;
	background-color: var(--tdc-color-accent);
	color: #fff;
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

/* Reference: title in the body face at ~16px, centred; price in the UI face. */
.tdc-product-card__title {
	font-family: var(--tdc-font-body);
	font-size: 1rem;
	font-weight: 400;
	color: var(--tdc-color-heading);
	margin: 1rem 0 0.25rem;
}

.tdc-product-card__price,
.woocommerce ul.products li.product .price {
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	color: var(--tdc-color-text);
	margin: 0;
}

.tdc-product-card__price del { opacity: 0.5; margin-right: 0.4em; }
.tdc-product-card__price ins { text-decoration: none; }

/* --- Single product ----------------------------------------------------- */

.tdc-product__layout {
	display: grid;
	/* Gallery gets the wider share, since it holds two columns of images. */
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

@media (max-width: 1024px) { .tdc-product__layout { grid-template-columns: minmax(0, 1fr); } }

.tdc-product__gallery { min-width: 0; position: relative; }

/* Woo floats its gallery at width:48% for its own two-column layout. Ours is
   already a grid column, so reset it to fill.

   Woo's rule list includes `.woocommerce #content div.product div.images`,
   and our main element is id="content" — an ID beats any number of classes,
   so the override has to carry #content too rather than rely on class count.
   The id-less variants cover templates that do not use #content. */
.woocommerce #content div.product .tdc-product__gallery .woocommerce-product-gallery,
.woocommerce-page #content div.product .tdc-product__gallery .woocommerce-product-gallery,
.woocommerce div.product .tdc-product__gallery .woocommerce-product-gallery,
.woocommerce-page div.product .tdc-product__gallery .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin-bottom: 0;
}

/* Same trap for the summary column — and here the naive override *ties*
   Woo's `#content div.product div.summary` on specificity, so source order
   would decide it. Adding `.summary` breaks the tie in our favour. */
.woocommerce #content div.product .tdc-product__summary.summary,
.woocommerce-page #content div.product .tdc-product__summary.summary,
.woocommerce div.product .tdc-product__summary.summary,
.woocommerce-page div.product .tdc-product__summary.summary {
	width: 100%;
	float: none;
	margin-bottom: 0;
}

/* The gallery is a 2-column grid of fixed 4:5 frames, each photo covering
   its frame (cropped to fit), so a tall or wide photo can never stretch the
   page. A single image fills the column.

   Without its slider, Woo shrinks every image after the first to 25% wide
   (`.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)`),
   and its `div.images img` rules outrank a plain class selector — so these
   carry #content / div.product, like the gallery reset above. */
.tdc-product__gallery .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
}

.woocommerce #content div.product .tdc-product__gallery .woocommerce-product-gallery__image,
.woocommerce div.product .tdc-product__gallery .woocommerce-product-gallery__image {
	display: block;
	width: auto;
	padding: 0;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--tdc-radius);
	background-color: var(--tdc-color-bg-alt);
}

.tdc-product__gallery .woocommerce-product-gallery__image:only-child {
	grid-column: 1 / -1;
}

.tdc-product__gallery .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce div.product .tdc-product__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Click-to-enlarge icon, on the first image. */
.tdc-product__gallery .woocommerce-product-gallery__trigger {
	z-index: 3;
	top: 1rem;
	right: 1rem;
}

/* Phones: one swipeable row instead of a long stack, so the price and
   add-to-cart are not pushed several screens down. */
@media (max-width: 767px) {
	.tdc-product__gallery .woocommerce-product-gallery__wrapper {
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.tdc-product__gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }

	.woocommerce div.product .tdc-product__gallery .woocommerce-product-gallery__image {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}

	.tdc-product__gallery .woocommerce-product-gallery__image:only-child { flex-basis: 100%; }
}

/* Space between the product and the "You may also like" band below it. */
.tdc-product + .tdc-section { margin-top: clamp(3rem, 6vw, 5rem); }

.tdc-product__summary { min-width: 0; }

/* Details stay in view while the gallery scrolls past, just below the sticky
   header (its live height comes from tdc.js). Desktop only — stacked, there
   is nothing beside it to scroll past. */
@media (min-width: 1025px) {
	.tdc-product__summary {
		position: sticky;
		top: calc(var(--tdc-header-h, 0px) + 2rem);
	}

	body.tdc-no-sticky_header .tdc-product__summary { top: 2rem; }
}

.tdc-product__summary .product_title {
	font-family: var(--tdc-font-display);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--tdc-color-heading);
	margin: 0 0 0.4rem;
}

.tdc-product__subheading {
	font-family: var(--tdc-font-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--tdc-color-muted);
	margin: 0 0 1rem;
}

.woocommerce div.product .tdc-product__summary p.price,
.woocommerce div.product .tdc-product__summary span.price {
	font-family: var(--tdc-font-ui);
	font-size: 1.125rem;
	color: var(--tdc-color-heading);
	margin: 0 0 1.25rem;
}

.tdc-product__summary .woocommerce-product-details__short-description {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--tdc-color-text);
	margin-bottom: 1.5rem;
}

/* Quantity + add to cart */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
.woocommerce div.product form.cart .quantity { margin: 0; }

.woocommerce .quantity input.qty {
	width: 4.5rem;
	height: 100%;
	min-height: 3.05rem;
	padding: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--tdc-color-border) 30%, transparent);
	border-radius: var(--tdc-button-radius);
	background-color: var(--tdc-color-bg);
	font-family: var(--tdc-font-ui);
	font-size: 0.875rem;
	text-align: center;
	color: var(--tdc-color-heading);
}

/* WooCommerce ships `.button.alt` in its own purple — override explicitly. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	padding: 1.05em 1.75em;
	border: 1px solid var(--tdc-color-button-bg);
	border-radius: var(--tdc-button-radius);
	background-color: var(--tdc-color-button-bg);
	color: var(--tdc-color-button-text);
	font-family: var(--tdc-font-ui);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--tdc-color-button-hover-bg);
	border-color: var(--tdc-color-button-hover-bg);
	color: var(--tdc-color-button-hover-text);
}

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled { opacity: 0.45; }

/* Variation selectors */
/* Woo lays these out as a table, and Hello's table reset zebra-stripes the
   cells grey, centres the label and pads every cell 15px. Unpicked here so
   each option is simply its label stacked above a full-width select. */
.woocommerce div.product form.cart .variations { margin-bottom: 1rem; width: 100%; border: 0; }

.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	line-height: 1.4;
}

.woocommerce div.product form.cart .variations tr + tr { margin-top: 1rem; }
.woocommerce div.product form.cart .variations th { margin-bottom: 0.5rem; }

.woocommerce div.product form.cart .variations label { font-family: var(--tdc-font-ui); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }

.woocommerce div.product form.cart .variations select { width: 100%; margin: 0; }

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tdc-color-text);
}

.woocommerce div.product form.cart .variations select {
	padding: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--tdc-color-border) 30%, transparent);
	border-radius: var(--tdc-button-radius);
	font-family: var(--tdc-font-body);
	background-color: var(--tdc-color-bg);
}

/* --- Product accordion (reference uses these, not tabs) ----------------- */

.tdc-product__accordion { margin-top: 0.5rem; border-top: 1px solid color-mix(in srgb, var(--tdc-color-border) 22%, transparent); }

.tdc-accordion--product .tdc-accordion__head { padding-block: 1.1rem; }

/* Reference: accordion titles are Commuters Sans 14px uppercase. */
.tdc-accordion__title--product {
	font-family: var(--tdc-font-ui);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tdc-color-heading);
}

.tdc-accordion--product .tdc-accordion__body { padding-bottom: 1.25rem; }

/* --- Cart, checkout, account ------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid color-mix(in srgb, var(--tdc-color-border) 20%, transparent);
	border-radius: var(--tdc-radius);
	border-collapse: separate;
	font-family: var(--tdc-font-body);
}

.woocommerce table.shop_table th {
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tdc-color-heading);
}

.woocommerce-cart table.cart img { width: 72px; border-radius: 4px; }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	font-family: var(--tdc-font-display);
	font-weight: 400;
	color: var(--tdc-color-heading);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	padding: 0.8rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--tdc-color-border) 30%, transparent);
	border-radius: var(--tdc-button-radius);
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	background-color: var(--tdc-color-bg);
}

.woocommerce form .form-row label { font-family: var(--tdc-font-ui); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top-color: var(--tdc-color-primary);
	background-color: var(--tdc-color-bg-alt);
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	border-radius: var(--tdc-radius);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--tdc-color-primary); }

/* Cart and checkout pages run inside a plain page template, so give them the
   same rhythm as a section. */
.woocommerce-cart .tdc-main,
.woocommerce-checkout .tdc-main,
.woocommerce-account .tdc-main { padding-block: 4rem; }

.woocommerce span.onsale {
	background-color: var(--tdc-color-accent);
	color: #fff;
	border-radius: 3px;
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-height: auto;
	min-width: auto;
	padding: 0.4em 0.8em;
	line-height: 1;
}

/* --- WooCommerce block cart & checkout ---------------------------------

   Woo 11 renders cart and checkout as blocks, which ignore the classic
   `.woocommerce .button` rules entirely and ship their own palette. They are
   restyled separately here. --------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { font-family: var(--tdc-font-body); }

.wc-block-components-button,
.wc-block-components-button:not([disabled]),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: var(--tdc-button-radius);
	background-color: var(--tdc-color-button-bg);
	color: var(--tdc-color-button-text);
	font-family: var(--tdc-font-ui);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 1.05em 1.75em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wc-block-components-button:not([disabled]):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--tdc-color-button-hover-bg);
	color: var(--tdc-color-button-hover-text);
}

.wc-block-components-button__text { font-family: inherit; letter-spacing: inherit; }

.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--tdc-font-display);
	font-weight: 400;
	color: var(--tdc-color-heading);
}

.wc-block-components-product-name {
	font-family: var(--tdc-font-body);
	color: var(--tdc-color-heading);
	text-decoration: none;
}

.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { font-family: var(--tdc-font-ui); }

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	background-color: var(--tdc-color-bg-alt);
	border-radius: var(--tdc-radius);
	padding: 1.5rem;
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select select {
	border-radius: var(--tdc-button-radius);
	font-family: var(--tdc-font-body);
}

/* Cart and checkout blocks manage their own max width; keep them inside the
   page container rather than letting them span the viewport. */
.tdc-page-body .wp-block-woocommerce-cart,
.tdc-page-body .wp-block-woocommerce-checkout { max-width: none; margin-inline: 0; }

.tdc-page-body { max-width: none; }
.tdc-page-body > * { max-width: 68ch; }
.tdc-page-body > .wp-block-woocommerce-cart,
.tdc-page-body > .wp-block-woocommerce-checkout,
.tdc-page-body > .woocommerce { max-width: none; }

.tdc-page-links { margin-top: 2rem; font-family: var(--tdc-font-ui); font-size: 0.8125rem; }

/* Contact block with only one of its two halves switched on. */
.tdc-contact--single { grid-template-columns: minmax(0, 1fr); }

/* Treatment page with the booking card switched off. */
.tdc-treatment--single { grid-template-columns: minmax(0, 1fr); }

/* =========================================================================
   COR — treatment page (split layout)

   COR only: the blueprint keeps its banner-style treatment page. Markup in
   single-treatment.php, helpers and SEO in inc/treatment-page.php.
   ========================================================================= */

.tdc-tx-eyebrow {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow, 0.12em);
	text-transform: uppercase;
	margin: 0 0 1rem;
}

/* --- Split header: Primary colour | image, below the normal solid header
   (inc/treatment-page.php turns the transparent one off here). ---------- */
.tdc-tx-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: clamp(30rem, 62vh, 42rem);
	background-color: var(--tdc-color-primary);
}

.tdc-tx-hero__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem var(--tdc-gutter);
	background-color: var(--tdc-color-primary);
	color: #fff;
	text-align: center;
}

.tdc-tx-hero__inner { max-width: 34rem; }

.tdc-tx-hero__heading {
	font-family: var(--tdc-font-display);
	font-size: clamp(2.25rem, 3.4vw, 3.5rem);
	font-weight: 300;
	line-height: 1.12;
	color: #fff;
	margin: 0;
	/* Even line lengths rather than a long first line and a stray last word. */
	text-wrap: balance;
}

.tdc-tx-hero__media { position: relative; min-height: 20rem; }

.tdc-tx-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Introduction: lead copy | two ruled lists. ------------------------- */
.tdc-tx-intro {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 5vw, 6rem);
	align-items: end;
	padding: clamp(4rem, 8vw, 7rem) var(--tdc-gutter);
}

.tdc-tx-intro__lead {
	font-family: var(--tdc-font-body);
	font-size: clamp(1.2rem, 1.6vw, 1.4rem);
	line-height: 1.45;
	color: var(--tdc-color-heading);
	margin: 0;
	max-width: 34ch;
}

.tdc-tx-intro__text {
	margin-top: 2rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--tdc-color-muted);
	max-width: 52ch;
}

.tdc-tx-intro__text p { margin: 0 0 0.9em; }
.tdc-tx-intro__text p:last-child { margin-bottom: 0; }

.tdc-tx-intro__lists {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

.tdc-tx-list {
	padding-top: 1.1rem;
	border-top: 1px solid color-mix(in srgb, var(--tdc-color-border) 30%, transparent);
}

.tdc-tx-list__heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: var(--tdc-tracking-eyebrow, 0.12em);
	text-transform: uppercase;
	color: var(--tdc-color-heading);
	margin: 0 0 1rem;
}

.tdc-tx-list__heading::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: var(--tdc-color-accent);
}

.tdc-tx-list__items {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--tdc-color-muted);
}

/* --- Image | content halves. -------------------------------------------- */
.tdc-tx-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: clamp(30rem, 46vw, 44rem);
}

.tdc-tx-split__media { position: relative; min-height: 20rem; background-color: var(--tdc-color-bg-alt); }

.tdc-tx-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tdc-tx-split--reverse .tdc-tx-split__media { order: 2; }

.tdc-tx-split__content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(3.5rem, 6vw, 6rem) clamp(1.5rem, 6vw, 7rem);
}

.tdc-tx-split__content--alt  { background-color: var(--tdc-color-bg-alt); }
.tdc-tx-split__content--tint { background-color: var(--tdc-color-secondary); }

.tdc-tx-split__inner { width: 100%; max-width: 38rem; }

.tdc-tx-heading {
	font-family: var(--tdc-font-display);
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: 300;
	line-height: 1.2;
	color: var(--tdc-color-heading);
	margin: 0 0 1.75rem;
}

/* Option and FAQ rows: a ruled list that opens row by row. */
.tdc-tx-row { border-bottom: 1px solid color-mix(in srgb, var(--tdc-color-border) 28%, transparent); }
.tdc-tx-row:first-child { border-top: 1px solid color-mix(in srgb, var(--tdc-color-border) 28%, transparent); }

.tdc-tx-row__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1.05rem;
	list-style: none;
	cursor: pointer;
}

.tdc-tx-row--static .tdc-tx-row__head { cursor: default; }
.tdc-tx-row__head::-webkit-details-marker { display: none; }

.tdc-tx-row__name {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tdc-color-heading);
}

.tdc-tx-row__meta {
	display: flex;
	gap: 1.25rem;
	font-size: 0.875rem;
	color: var(--tdc-color-heading);
	white-space: nowrap;
}

.tdc-tx-row__icon {
	position: relative;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid var(--tdc-color-heading);
	border-radius: 50%;
}

.tdc-tx-row__icon::before,
.tdc-tx-row__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 1px;
	background-color: var(--tdc-color-heading);
	transform: translate(-50%, -50%);
	transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.tdc-tx-row__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.tdc-tx-row[open] .tdc-tx-row__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.tdc-tx-row__body {
	padding: 0 2.5rem 1.2rem 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--tdc-color-muted);
}

.tdc-tx-row__body p { margin: 0 0 0.7em; }
.tdc-tx-row__body p:last-child { margin-bottom: 0; }

.tdc-tx-link {
	display: inline-block;
	margin-top: 1.75rem;
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tdc-color-heading);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Closing: centred copy on the tint. */
.tdc-tx-closing { text-align: center; }
.tdc-tx-closing .tdc-tx-eyebrow { color: var(--tdc-color-heading); }

.tdc-tx-closing__text {
	max-width: 44ch;
	margin: 0 auto 2rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--tdc-color-text);
}

/* --- Tablet and phone --------------------------------------------------- */
@media (max-width: 1024px) {
	.tdc-tx-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 767px) {
	.tdc-tx-hero,
	.tdc-tx-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }

	.tdc-tx-hero__panel { padding-bottom: 3rem; }
	.tdc-tx-hero__media,
	.tdc-tx-split__media { min-height: 0; aspect-ratio: 4 / 3; }

	/* Image first on every half when stacked. */
	.tdc-tx-split--reverse .tdc-tx-split__media { order: 0; }

	.tdc-tx-intro__lists { grid-template-columns: minmax(0, 1fr); }

	.tdc-tx-row__meta { gap: 0.75rem; font-size: 0.8125rem; }
}

/* =========================================================================
   COR — concern page: introduction + centred treatment cards
   ========================================================================= */

.tdc-cn-intro { max-width: 46rem; margin-inline: auto; text-align: center; }

.tdc-cn-intro__text {
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	line-height: 1.65;
	color: var(--tdc-color-heading);
	margin-bottom: 2.25rem;
}

.tdc-cn-intro__text p { margin: 0 0 1em; }
.tdc-cn-intro__text p:last-child { margin-bottom: 0; }

/* One to three cards, centred rather than left-aligned in a 3-up grid. */
.tdc-cn-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem));
	justify-content: center;
	gap: var(--tdc-gutter);
}

/* --- Mobile swipe rows --------------------------------------------------
   Every horizontal scroller (category cards, product and treatment
   carousels, testimonials, the product gallery) lines up with the text on
   the left and runs off the right edge of the screen, so a cut-off card
   reads as "there is more this way" rather than as a mistake. The container
   already provides the left gutter; only the right one is cancelled.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.tdc-mosaic,
	.tdc-carousel__track,
	.tdc-product__gallery {
		/* width:auto so the negative margin can widen the row past the
		   container; a 100% width would pin it to the container instead. */
		width: auto;
		margin-right: calc(var(--tdc-gutter) * -1);
		padding-right: 0;
		scroll-padding-inline-start: 0;
	}

	/* Mandatory snapping stops at the last card's start, which would leave it
	   permanently cut off. Snapping the last one to the end lets the row
	   scroll far enough to show it in full. */
	.tdc-mosaic__item:last-child,
	.tdc-carousel__slide:last-child,
	.tdc-product__gallery .woocommerce-product-gallery__image:last-child {
		scroll-snap-align: end;
	}

	/* The category cards have no arrows, so a slim track shows they swipe. */
	.tdc-mosaic {
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--tdc-color-border) 45%, transparent) transparent;
	}

	.tdc-mosaic::-webkit-scrollbar { height: 3px; }
	.tdc-mosaic::-webkit-scrollbar-track { background: transparent; }
	.tdc-mosaic::-webkit-scrollbar-thumb {
		background-color: color-mix(in srgb, var(--tdc-color-border) 45%, transparent);
		border-radius: 3px;
	}
}

/* =========================================================================
   Memberships: plan cards and the steps under them
   ========================================================================= */

/* Two or three plans side by side, each as tall as the tallest so the
   buttons line up on one axis. */
.tdc-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--tdc-gutter);
	max-width: 900px;
	margin-inline: auto;
}

.tdc-plan {
	display: flex;
	flex-direction: column;
	padding: 2.5rem 2rem;
	border-radius: var(--tdc-radius);
	background-color: var(--tdc-color-bg-alt);
	border: 1px solid color-mix(in srgb, var(--tdc-color-border) 45%, transparent);
	text-align: center;
}

/* The recommended plan carries the brand colour rather than a badge. */
.tdc-plan--featured {
	background-color: var(--tdc-color-primary);
	border-color: var(--tdc-color-primary);
}

.tdc-plan--featured :is(.tdc-plan__name, .tdc-plan__amount, .tdc-plan__period, .tdc-plan__saving) { color: #fff; }
.tdc-plan--featured .tdc-plan__text { color: rgba(255, 255, 255, 0.84); }

.tdc-plan__name {
	font-family: var(--tdc-font-display);
	font-size: 1.35rem;
	font-weight: var(--tdc-weight-heading, 400);
	color: var(--tdc-color-heading);
	margin: 0;
}

.tdc-plan__price { margin: 1rem 0 0; display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }

.tdc-plan__amount {
	font-family: var(--tdc-font-display);
	font-size: 2.75rem;
	line-height: 1;
	color: var(--tdc-color-heading);
}

.tdc-plan__period { font-family: var(--tdc-font-body); font-size: 0.875rem; color: var(--tdc-color-muted); }

.tdc-plan__saving {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow, 0.12em);
	text-transform: uppercase;
	color: var(--tdc-color-heading);
	margin: 0.75rem 0 0;
}

.tdc-plan__text { font-size: 0.9375rem; line-height: 1.65; margin-top: 1.25rem; text-wrap: pretty; }
.tdc-plan__text p:last-child { margin-bottom: 0; }

/* Pushed to the foot of the card, so buttons line up whatever the copy. */
.tdc-plan__btn { margin-top: auto; padding-top: 0.9rem; align-self: stretch; text-align: center; }
.tdc-plan__text + .tdc-plan__btn { margin-top: 1.75rem; }
.tdc-plan--featured .tdc-btn--outline { border-color: #fff; color: #fff; }

/* Numbered steps, shared by the memberships page. */
.tdc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--tdc-gutter);
}

.tdc-steps__number {
	font-family: var(--tdc-font-ui);
	font-size: 0.75rem;
	letter-spacing: var(--tdc-tracking-eyebrow, 0.12em);
	color: var(--tdc-color-primary);
	display: block;
	margin-bottom: 0.75rem;
}

.tdc-steps__title {
	font-family: var(--tdc-font-display);
	font-size: 1.125rem;
	font-weight: var(--tdc-weight-heading, 400);
	color: var(--tdc-color-heading);
	margin: 0 0 0.5rem;
}

.tdc-steps__text { font-size: 0.9375rem; line-height: 1.65; margin: 0; text-wrap: pretty; }

/* =========================================================================
   Makeup page: three chapters, each with a price list
   ========================================================================= */

.tdc-makeup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	max-width: var(--tdc-content-width, 1180px);
	margin-inline: auto;
}

/* The image leads on the odd chapters and follows on the even one, so the
   page alternates rather than marching down one side. */
.tdc-makeup--reverse .tdc-makeup__media { order: 2; }

.tdc-makeup__media {
	width: 100%;
	min-width: 0;
	border-radius: var(--tdc-radius);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--tdc-color-bg-alt);
}

.tdc-makeup__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Film is shot landscape. Cropping it into the portrait frame would throw
   away most of the width and upscale what is left, so a video frame takes
   the clip's own shape instead. */
.tdc-makeup__media--video { aspect-ratio: 16 / 9; }

/* ---- Stacked chapter ----------------------------------------------------
   The film spans the full width, and everything else sits under it. The copy
   keeps a readable measure rather than running the whole way across, while
   the price list takes the full width so the prices line up on one right-hand
   axis: name and note on the left, price on the right. */
.tdc-makeup--stacked { align-items: start; row-gap: 3.5rem; }

/* The film runs across both columns; the wording and the prices sit under it
   side by side. */
.tdc-makeup--stacked .tdc-makeup__media { grid-column: 1 / -1; order: 0; }

.tdc-makeup--stacked .tdc-makeup__prices {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tdc-makeup--stacked .tdc-pricelist { margin-top: 0; }
.tdc-makeup--stacked .tdc-makeup__text p:last-child { margin-bottom: 0; }

.tdc-makeup__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tdc-makeup__text { font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
.tdc-makeup__text p:last-child { margin-bottom: 0; }

/* Service and price on one row, with the dotted rule doing the joining. */
.tdc-pricelist { width: 100%; margin: 1.75rem 0 0; }

.tdc-pricelist__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--tdc-color-border) 40%, transparent);
}

.tdc-pricelist__row:first-child { border-top: 1px solid color-mix(in srgb, var(--tdc-color-border) 40%, transparent); }

.tdc-pricelist__name {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--tdc-color-heading);
	margin: 0;
}

.tdc-pricelist__note { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--tdc-color-muted); margin-top: 0.15rem; }

.tdc-pricelist__price {
	font-family: var(--tdc-font-display);
	font-size: 1.125rem;
	color: var(--tdc-color-heading);
	margin: 0;
	white-space: nowrap;
}

.tdc-pricelist + .tdc-btn { margin-top: 2rem; }

/* Bridal gallery: portrait tiles, three across. Fixed at three rather than
   auto-fit, so six shots fall into two even rows instead of four and two. */
.tdc-bridal-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tdc-gutter);
}

@media (max-width: 900px) { .tdc-bridal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tdc-bridal-grid { grid-template-columns: minmax(0, 1fr); } }

.tdc-bridal-grid__item { margin: 0; }

.tdc-bridal-grid__item img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border-radius: var(--tdc-radius);
}

.tdc-bridal-grid__item figcaption {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow, 0.12em);
	text-transform: uppercase;
	color: var(--tdc-color-muted);
	margin-top: 0.75rem;
	text-align: center;
}

@media (max-width: 900px) {
	.tdc-makeup { grid-template-columns: minmax(0, 1fr); }
	.tdc-makeup--reverse .tdc-makeup__media { order: 0; }
}

@media (max-width: 767px) {
	.tdc-plan { padding: 2rem 1.5rem; }
	.tdc-pricelist__row { flex-wrap: wrap; gap: 0.25rem 1rem; }
}

/* =========================================================================
   Price list: a jump list beside the prices
   =========================================================================
   Two across looked tidy until the blocks were real: a grid row is as tall as
   its tallest item, so a sixteen-row treatment beside a two-row one left a
   hole the size of a screen. The prices run in one column instead, with a
   narrow index alongside that sticks while you scroll. */

.tdc-pricepage {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	max-width: var(--tdc-content-width, 1180px);
	margin-inline: auto;
}

.tdc-pricepage__nav {
	position: sticky;
	/* Clear of the fixed header. */
	top: 110px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tdc-pricepage__navhead {
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--tdc-color-muted);
	margin: 1.75rem 0 0.5rem;
}

.tdc-pricepage__navhead:first-child { margin-top: 0; }

.tdc-pricepage__navlist { list-style: none; margin: 0; padding: 0; }

.tdc-pricepage__navlist a {
	display: block;
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--tdc-color-text);
	text-decoration: none;
	padding: 0.3rem 0;
	transition: color 0.2s ease;
}

.tdc-pricepage__navlist a:hover { color: var(--tdc-color-heading); }

.tdc-pricepage__list { min-width: 0; }

.tdc-price-group + .tdc-price-group { margin-top: 3.5rem; }

.tdc-price-group__title {
	font-family: var(--tdc-font-display);
	font-size: calc(1.75rem * var(--tdc-heading-scale, 1));
	font-weight: var(--tdc-weight-heading, 400);
	color: var(--tdc-color-heading);
	margin: 0 0 1.5rem;
}

.tdc-price-block { min-width: 0; }
.tdc-price-block + .tdc-price-block { margin-top: 2.5rem; }

/* The header is fixed, so an anchor would otherwise land under it. The
   header measures itself into --tdc-header-h as it changes height. */
.tdc-price-block,
.tdc-price-group { scroll-margin-top: calc(var(--tdc-header-h, 120px) + 1.5rem); }

.tdc-price-block__title {
	font-family: var(--tdc-font-display);
	font-size: 1.25rem;
	font-weight: var(--tdc-weight-heading, 400);
	color: var(--tdc-color-heading);
	margin: 0 0 0.25rem;
}

.tdc-price-block .tdc-pricelist { margin-top: 0; }

/* A treatment with no published price says so once, under its name. */
.tdc-price-block__note {
	font-family: var(--tdc-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--tdc-color-muted);
	margin: 0.75rem 0 0;
}

.tdc-price-block__link {
	display: inline-block;
	font-family: var(--tdc-font-ui);
	font-size: 0.6875rem;
	letter-spacing: var(--tdc-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--tdc-color-heading);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	margin-top: 1rem;
	transition: opacity 0.2s ease;
}

.tdc-price-block__link:hover { opacity: 0.6; }

@media (max-width: 900px) {
	/* The index becomes a plain contents list above the prices. */
	.tdc-pricepage { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.tdc-pricepage__nav { position: static; max-height: none; overflow: visible; }
	.tdc-pricepage__navlist { columns: 2; column-gap: 1.5rem; }
}