/* =====================================================================
   Honey Aesthetics — Brand 2026
   Child theme stylesheet for honey-aesthetics-2025

   EASY EDITS
   - Colors:  change the values in :root below.
   - Fonts:   change --ha-font-heading / --ha-font-body (and the Google
              Fonts URL in functions.php if you switch families).
   - Labels:  button/link wording lives in assets/honey.js (LABELS).

   Sections in this file:
     1. Brand tokens
     2. Base type and color
     3. Color mapping for the parent theme's color classes
     4. Flat look (no shadows / no rounded corners)
     5. Buttons
     6. Header (desktop)
     7. Dropdown menus
     8. Hero video
     9. Treatment Categories tabs
    10. Membership / Referral scrolling bar
    11. Footer
    12. Sitewide buttons (all four button styles, everywhere)
    13. Pop-ups (Book pop-up) and Gravity Forms
    14. Blog (News & Updates): categories, cards, pagination
    15. Text highlight color
    16. Price lists (.ha-price-list) used inside text components
   ===================================================================== */

/* 1. Brand tokens ---------------------------------------------------- */
:root {
	--ha-mulberry: #3C0E1F;   /* accent: headlines, links, buttons */
	--ha-cloud:    #FDFCF4;   /* main background */
	--ha-lilac:    #E0D6D6;   /* soft neutral (spare) */
	--ha-mist:     #C2CCD8;   /* contrast sections + footer */
	--ha-charcoal: #3F3E3D;   /* body text */
	--ha-hairline: rgba(63, 62, 61, .10);
	--ha-hero-overlay: rgba(38, 30, 32, .45);

	--ha-font-heading: "Zalando Sans", "Helvetica Neue", Arial, sans-serif;
	--ha-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

	--ha-header-height: 72px;
}

/* 2. Base type and color --------------------------------------------- */
html body {
	background: var(--ha-cloud) !important;
	color: var(--ha-charcoal);
	font-family: var(--ha-font-body) !important;
}
html body * { font-family: var(--ha-font-body); }
/* replace the old body font (Figtree) everywhere; headlines keep Zalando Sans below */
html body :is(p, li, a, span, div, small, label, button, input, select, textarea, td, th, blockquote, figcaption, strong, b, em, i) { font-family: var(--ha-font-body) !important; }
html body :is(h1, h2, h3, h4, h5, h6, [data-ha-serif]) * { font-family: inherit !important; }

html body h1, html body h2, html body h3, html body h4,
html body [data-ha-serif], html body [data-ha-serif] * {
	font-family: var(--ha-font-heading) !important;
	font-style: normal !important;
	font-weight: 300 !important;
	text-transform: uppercase;
	letter-spacing: -0.02em !important;
}
/* no italics inside headlines (the old theme used italic serif accents) */
html body :is(h1, h2, h3, h4, [data-ha-serif]) :is(em, i) { font-style: normal !important; }
html body main :is(h1, h2, h3, h4):not([data-ha-hero] *),
html body main [data-ha-serif]:not([data-ha-hero] *) { color: var(--ha-mulberry) !important; }
html body main p, html body main li { color: var(--ha-charcoal); }
html body main a:not([class*="btn"]):not([class*="bg-brand"]):not([data-ha-hero] *) { color: var(--ha-mulberry); }

/* 3. Color mapping for the parent theme's color classes --------------- */
html body [class~="bg-white"],
html body [class~="bg-brand-off-white"],
html body [class~="bg-brand-light-teal"],
html body [class~="bg-brand-light-grey"] { background-color: var(--ha-cloud) !important; }

html body main [class~="bg-brand-navy"]:not(a),
html body main [class~="bg-brand-teal"]:not(a),
html body main [class~="bg-brand-dark-teal"]:not(a) { background-color: var(--ha-mist) !important; }

html body main [class~="bg-brand-navy"]:not(a) :is(p, li),
html body main [class~="bg-brand-teal"]:not(a) :is(p, li) { color: var(--ha-charcoal) !important; }

/* slider arrows and other icon buttons on Mist sections */
html body main [class~="bg-brand-navy"]:not(a) button:not([data-ha-tab]),
html body main [class~="bg-brand-navy"]:not(a) button:not([data-ha-tab]) * { color: var(--ha-mulberry) !important; border-color: var(--ha-mulberry) !important; }

html body [class~="text-brand-slate"] { color: var(--ha-charcoal) !important; }
html body [class~="text-brand-navy"],
html body [class~="lg:text-brand-navy"],
html body [class~="text-brand-teal"] { color: var(--ha-mulberry) !important; }

html body [class~="hover:text-brand-teal"]:hover,
html body [class~="hocus:text-brand-teal"]:hover,
html body [class~="group-hover:text-brand-teal"]:hover,
html body [class~="hover:text-brand-dark-teal"]:hover { color: var(--ha-mulberry) !important; }

html body [class~="border-brand-light-grey"],
html body main [class*="border"]:not(hr) { border-color: var(--ha-hairline) !important; }

/* 4. Flat look -------------------------------------------------------- */
html body *:not(#wpadminbar *) { box-shadow: none !important; }
html body main *, html body footer * { border-radius: 0 !important; }

/* 5. Buttons ---------------------------------------------------------- */
html body main .btn-primary,
html body main a[class*="bg-brand"]:not([class*="light"]),
html body main a[data-ha-btn] {
	background: var(--ha-mulberry) !important;
	border-color: var(--ha-mulberry) !important;
	color: var(--ha-cloud) !important;
	border-radius: 0 !important;
	transition: background .2s ease, color .2s ease !important;
}
html body main [class] a.btn-primary.btn-primary *,
html body main [class] a[data-ha-btn][data-ha-btn] * { color: var(--ha-cloud) !important; background: transparent !important; }
html body main .btn-primary::after,
html body main [class*="btn-"]::after { display: none !important; }   /* removes the sliding "loading bar" fill */
html body main .btn-primary:hover,
html body main a[data-ha-btn]:hover { background: var(--ha-charcoal) !important; border-color: var(--ha-charcoal) !important; }

/* 6. Header (desktop) ------------------------------------------------- */
@media (min-width: 1024px) {
	html body header.navbar.navbar.navbar.navbar {
		position: fixed !important;
		top: var(--wp-admin--admin-bar--height, 0px) !important;
		left: 0 !important; right: 0 !important; width: 100% !important;
		transform: none !important;
		height: var(--ha-header-height) !important;
		display: grid !important;
		align-items: center;
		background: transparent !important;
		border: none !important;
		border-bottom: 1px solid transparent !important;
		border-radius: 0 !important;
		backdrop-filter: none !important;
		z-index: 1000 !important;
		transition: background .3s ease, border-color .3s ease;
	}
	/* solid Cloud bar once the visitor scrolls (class added by honey.js) */
	html body header.navbar.navbar.navbar.navbar.ha-solid {
		background: var(--ha-cloud) !important;
		border-bottom-color: rgba(63, 62, 61, .12) !important;
	}

	/* stack the logo row and the menu row on one line */
	html body header.navbar.navbar.navbar.navbar > * { grid-area: 1 / 1; }
	html body header.navbar.navbar.navbar.navbar > div.py-2 { background: transparent !important; padding: 0 !important; }
	html body header.navbar.navbar.navbar.navbar > div.py-2 > div { max-width: none !important; width: 100% !important; padding: 0 40px !important; margin: 0 !important; }

	/* logo: left, larger */
	html body header.navbar.navbar.navbar.navbar > div.py-2 a.block.h-fit { position: static !important; transform: none !important; height: auto !important; }
	html body header.navbar.navbar.navbar.navbar > div.py-2 .logo { height: 60px !important; width: auto !important; max-height: none !important; }

	/* menu: centered, aligned with the bottom of the logo */
	html body header.navbar.navbar.navbar.navbar > div[class*="lg:bg-brand-light-teal"] {
		justify-self: center !important;
		background: transparent !important;
		border: none !important;
		margin-top: 16px !important;
		z-index: 3;
	}
	html body header.navbar.navbar.navbar.navbar > div[class*="lg:bg-brand-light-teal"] *:not(.dropdown-menu):not(.dropdown-menu *) { background: transparent !important; border: none !important; }
	html body header.navbar.navbar.navbar.navbar > div[class*="lg:bg-brand-light-teal"] ul { gap: 26px !important; background: transparent !important; }

	/* right group (phone, Honey Method, Book): aligned with the menu */
	html body header.navbar.navbar.navbar.navbar > div.py-2 div.flex.items-center.justify-end { transform: translateY(8px); }
	html body header.navbar.navbar.navbar.navbar div.py-2 ul { gap: 28px !important; }

	/* menu text: uppercase, regular weight */
	html body header.navbar.navbar.navbar.navbar .primary-menu-item__text,
	html body header.navbar.navbar.navbar.navbar > div[class*="lg:bg-brand-light-teal"] button,
	html body header.navbar.navbar.navbar.navbar div.py-2 a,
	html body header.navbar.navbar.navbar.navbar div.py-2 a * {
		text-transform: uppercase !important;
		letter-spacing: .08em !important;
		font-size: 13px !important;
		font-weight: 400 !important;
	}

	/* colors: Cloud over the video, Charcoal on the solid bar */
	html body header.navbar.navbar.navbar.navbar:not(.ha-solid) :is(a, span, li, button, svg) { color: var(--ha-cloud) !important; }
	html body header.navbar.navbar.navbar.navbar:not(.ha-solid) .logo { filter: brightness(0) invert(1); }
	html body header.navbar.navbar.navbar.navbar.ha-solid :is(a, span, li, button) { color: var(--ha-charcoal) !important; }

	/* phone + Honey Method: small gap between icon and text */
	html body header.navbar.navbar.navbar.navbar div.py-2 a:not(.btn-primary):not(.block):not([class*="lg:hidden"]) { display: inline-flex !important; align-items: center; gap: 7px !important; }
	html body header.navbar.navbar.navbar.navbar div.py-2 a:not(.btn-primary):not(.block) svg { flex-shrink: 0; }
	/* hide the mobile-only phone icon on desktop */
	html body header.navbar.navbar.navbar.navbar a[class*="lg:hidden"],
	html body header.navbar.navbar.navbar.navbar div.py-2 a[class*="lg:hidden"] { display: none !important; }

	/* hover: static underline + slight grow (no animated bar) */
	html body header.navbar.navbar.navbar.navbar button::after,
	html body header.navbar.navbar.navbar.navbar button::before,
	html body header.navbar.navbar.navbar.navbar .primary-menu-item__text::after,
	html body header.navbar.navbar.navbar.navbar .primary-menu-item__text::before,
	html body header.navbar.navbar.navbar.navbar div.py-2 a::after,
	html body header.navbar.navbar.navbar.navbar div.py-2 a::before { display: none !important; transition: none !important; animation: none !important; }

	html body header.navbar.navbar.navbar.navbar .primary-menu-item__text {
		display: inline-block;
		transition: transform .2s ease !important;
		transform-origin: center bottom;
		text-underline-offset: 6px;
		text-decoration-thickness: 1px;
	}
	html body header.navbar.navbar.navbar.navbar button:hover .primary-menu-item__text,
	html body header.navbar.navbar.navbar.navbar button:focus-visible .primary-menu-item__text,
	html body header.navbar.navbar.navbar.navbar button.is-open .primary-menu-item__text { text-decoration: underline !important; transform: scale(1.07); }

	html body header.navbar.navbar.navbar.navbar div.py-2 a:not(.btn-primary):not(.block) { transition: transform .2s ease; }
	html body header.navbar.navbar.navbar.navbar div.py-2 a:not(.btn-primary):not(.block):hover { transform: scale(1.07); text-decoration: underline !important; text-underline-offset: 6px; text-decoration-thickness: 1px; }

	/* Book: clear outline button, bold */
	html body header.navbar.navbar.navbar.navbar a.btn-primary {
		background: transparent !important;
		border: 1px solid currentColor !important;
		border-radius: 0 !important;
		padding: 9px 22px !important;
		font-size: 12px !important;
		letter-spacing: .12em !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		transition: background .2s ease, color .2s ease !important;
	}
	html body header.navbar.navbar.navbar.navbar div.py-2 a.btn-primary.btn-primary,
	html body header.navbar.navbar.navbar.navbar div.py-2 a.btn-primary.btn-primary * { font-weight: 700 !important; }
	html body header.navbar.navbar.navbar.navbar a.btn-primary::after { display: none !important; }

	html body header.navbar.navbar.navbar.navbar:not(.ha-solid) a.btn-primary,
	html body header.navbar.navbar.navbar.navbar:not(.ha-solid) a.btn-primary * { color: var(--ha-cloud) !important; border-color: var(--ha-cloud) !important; }
	html body header.navbar.navbar.navbar.navbar:not(.ha-solid) a.btn-primary:hover { background: var(--ha-cloud) !important; }
	html body header.navbar.navbar.navbar.navbar:not(.ha-solid) a.btn-primary:hover,
	html body header.navbar.navbar.navbar.navbar:not(.ha-solid) a.btn-primary:hover * { color: var(--ha-mulberry) !important; }

	html body header.navbar.navbar.navbar.navbar.ha-solid a.btn-primary,
	html body header.navbar.navbar.navbar.navbar.ha-solid a.btn-primary * { color: var(--ha-mulberry) !important; border-color: var(--ha-mulberry) !important; }
	html body header.navbar.navbar.navbar.navbar.ha-solid a.btn-primary:hover { background: var(--ha-mulberry) !important; }
	html body header.navbar.navbar.navbar.navbar.ha-solid a.btn-primary:hover,
	html body header.navbar.navbar.navbar.navbar.ha-solid a.btn-primary:hover * { color: var(--ha-cloud) !important; }
}

/* Mobile menu items: uppercase like the desktop menu */
html body header.navbar .primary-menu-item__text { text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1023px) { html body header.navbar .primary-menu-item__text { font-size: 15px; } }

/* Mobile "Honey Method" bar under the header */
html body header.navbar .primary-nav-mobile-cta.primary-nav-mobile-cta {
	background: var(--ha-mulberry) !important;
	color: var(--ha-cloud) !important;
	font-family: var(--ha-font-body) !important;
	letter-spacing: .12em !important;
	font-weight: 400 !important;
}
html body header.navbar .primary-nav-mobile-cta.primary-nav-mobile-cta:hover { background: var(--ha-charcoal) !important; }
/* any other teal/mauve fills left in the header */
html body header.navbar [class~="bg-brand-teal"]:not(.btn-primary),
html body header.navbar [class~="bg-brand-dark-teal"]:not(.btn-primary) { background-color: var(--ha-mulberry) !important; color: var(--ha-cloud) !important; }

/* mobile menu: the old near-black fills become Charcoal */
@media (max-width: 1023px) {
	html body header.navbar [class~="bg-brand-navy"] { background-color: var(--ha-charcoal) !important; color: var(--ha-cloud) !important; }
	html body header.navbar [class~="bg-brand-navy"] * { color: var(--ha-cloud) !important; }
}

/* 7. Dropdown menus --------------------------------------------------- */
html body header.navbar .dropdown-menu.dropdown-menu.dropdown-menu {
	background: var(--ha-cloud) !important;
	z-index: 60 !important;
	border: none !important;
	border-top: 1px solid var(--ha-hairline) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu :is(a, span, li, p, div, h2, h3, h4) { color: var(--ha-charcoal) !important; }
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu a:hover,
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu a:hover * { color: var(--ha-mulberry) !important; }
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu a[data-ha-viewall],
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu .btn-primary {
	background: var(--ha-mulberry) !important;
	border-radius: 0 !important;
}
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu a[data-ha-viewall],
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu a[data-ha-viewall] *,
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu .btn-primary,
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu .btn-primary *,
html body header.navbar.navbar.navbar.navbar .dropdown-menu.dropdown-menu.dropdown-menu [class*="bg-image"] * { color: var(--ha-cloud) !important; }

/* 8. Hero video ------------------------------------------------------- */
html body [data-ha-hero] :is(h1, h2, h3, p, span, a, [data-ha-serif]) { color: var(--ha-cloud) !important; }
/* light panels inside a hero (e.g. the info bar on service pages) keep dark text */
html body [data-ha-hero] :is([class~="bg-white"], [class~="bg-brand-off-white"], [class~="bg-brand-light-teal"], [class~="bg-brand-light-grey"]) :is(h1, h2, h3, h4, p, span, a, li, div) { color: var(--ha-charcoal) !important; }
html body [data-ha-hero] :is([class~="bg-white"], [class~="bg-brand-off-white"], [class~="bg-brand-light-teal"], [class~="bg-brand-light-grey"]) :is(h1, h2, h3, h4) { color: var(--ha-mulberry) !important; }
html body [data-ha-hero] .bg-image--overlay-dark::before,
html body [data-ha-hero] .bg-image--overlay-dark::after { background: var(--ha-hero-overlay) !important; }

@media (min-width: 1024px) {
	/* full-bleed, edge to edge, sitting under the transparent header */
	html body [data-ha-hero] {
		margin: -100px 0 0 !important;
		border-radius: 0 !important;
	}
	/* homepage hero fills the screen */
	html body.home [data-ha-hero] { min-height: 100vh; }
	/* homepage text block: bottom-left */
	html body.home [data-ha-hero] .container.relative {
		position: absolute !important;
		left: 0; right: 0; bottom: 64px;
		max-width: none !important;
		padding: 0 40px !important;
		margin: 0 !important;
	}
	html body.home [data-ha-hero] .container.relative .row { justify-content: flex-start !important; }
	html body.home [data-ha-hero] .col { margin-left: 0 !important; }
	html body.home [data-ha-hero] .wysiwyg,
	html body.home [data-ha-hero] .wysiwyg * { text-align: left !important; margin-left: 0 !important; justify-content: flex-start !important; }
	html body.home [data-ha-hero] h1 { font-size: 40px !important; line-height: 1.1 !important; max-width: 620px; }

	/* small "MED SPA" label */
	html body.home [data-ha-hero] [data-ha-eyebrow],
	html body.home [data-ha-hero] [data-ha-eyebrow] * {
		font-family: var(--ha-font-body) !important;
		font-size: 12px !important;
		letter-spacing: .16em !important;
		font-weight: 400 !important;
		margin-bottom: 14px !important;
	}
}

/* hero button: flat Cloud outline */
html body [data-ha-hero] [data-ha-ctarow] { display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px !important; }
@media (max-width: 1023px) { html body [data-ha-hero] [data-ha-ctarow] { justify-content: center; } }
html body main [data-ha-hero] a[data-ha-cta] {
	display: inline-block !important;
	margin: 0 !important;
	padding: 13px 28px !important;
	font-family: var(--ha-font-body) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border-radius: 0 !important;
	border: 1px solid var(--ha-cloud) !important;
	background: transparent !important;
	color: var(--ha-cloud) !important;
	transition: background .2s ease, color .2s ease !important;
}
html body main [data-ha-hero] a[data-ha-cta] * { background: transparent !important; color: inherit !important; }
html body main [data-ha-hero] a[data-ha-cta]:hover { background: var(--ha-cloud) !important; color: var(--ha-mulberry) !important; }
html body main [data-ha-hero] a[data-ha-cta]::after { display: none !important; }

/* 9. Treatment Categories tabs --------------------------------------- */
html body main button[data-ha-tab][data-ha-tab] {
	background: var(--ha-cloud) !important;
	color: var(--ha-charcoal) !important;
	border: none !important;
	border-left: 3px solid transparent !important;
	border-bottom: 1px solid rgba(63, 62, 61, .12) !important;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
html body main button[data-ha-tab][data-ha-tab] :is(h1, h2, h3, h4, span, p, div) {
	color: var(--ha-charcoal) !important;
	font-family: var(--ha-font-heading) !important;
	font-weight: 400 !important;
	letter-spacing: .02em !important;
	font-size: 17px !important;
}
html body main button[data-ha-tab][data-ha-tab]:hover { background: var(--ha-mist) !important; }
html body main button[data-ha-tab][data-ha-tab]:hover :is(h1, h2, h3, h4, span, p, div) { color: var(--ha-mulberry) !important; }
html body main button[data-ha-tab][data-ha-tab].is-active,
html body main button[data-ha-tab][data-ha-tab].is-active:hover { background: var(--ha-mulberry) !important; border-left-color: var(--ha-mulberry) !important; }
html body main button[data-ha-tab][data-ha-tab].is-active,
html body main button[data-ha-tab][data-ha-tab].is-active :is(h1, h2, h3, h4, span, p, div) { color: var(--ha-cloud) !important; }
html body main button[data-ha-tab][data-ha-tab]::after {
	content: "\2192";
	margin-left: auto;
	padding-left: 16px;
	font-family: var(--ha-font-body);
	font-size: 18px;
	opacity: .55;
}
html body main button[data-ha-tab][data-ha-tab].is-active::after { opacity: 1; }

/* 10. Membership / Referral scrolling bar ---------------------------- */
html body [data-ha-tick],
html body [data-ha-tick] * {
	font-family: var(--ha-font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
}
html body [data-ha-tickrow] { padding-top: 14px !important; padding-bottom: 14px !important; }

/* the scrolling bar itself: Mulberry band, Cloud text and dots */
html body main .marquee.marquee[class],
html body main .marquee.marquee[class] [class*="bg-brand"],
html body main .marquee.marquee[class] .marquee__marquee { background-color: var(--ha-mulberry) !important; }
html body main .marquee.marquee[class] *,
html body main .marquee.marquee[class] :is(a, span, p, div, svg) { color: var(--ha-cloud) !important; fill: currentColor; }
html body main .marquee.marquee[class] :is(.marquee__slide-text, .marquee__slide-text *) {
	font-family: var(--ha-font-body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
}
/* even spacing: hearts sit exactly halfway between the words, including
   across slides (the negative margin cancels the slider's own gap; honey.js
   keeps --ha-mq-half in sync with it) */
html body main .marquee.marquee[class] .marquee__slide-text {
	display: flex !important;
	align-items: center !important;
	justify-content: space-around !important;
	gap: 0 !important;
	margin: 0 calc(var(--ha-mq-half, 10px) * -1) !important;
}
html body main .marquee.marquee[class] .marquee__slide-text * { margin-left: 0 !important; margin-right: 0 !important; }
/* breathing room on both sides of each heart (equal, so it stays centered) */
html body main .marquee.marquee[class] .marquee__slide-text > span:has(.icon-heart),
html body main .marquee.marquee[class] .marquee__slide-text > :not(a):has(svg) { padding-left: 28px !important; padding-right: 28px !important; }
html body main .marquee.marquee[class] a.ha-marquee-link { padding: 0 8px; }
html body main .marquee.marquee[class] a.ha-marquee-link { text-decoration: none !important; }
html body main .marquee.marquee[class] a.ha-marquee-link:hover,
html body main .marquee.marquee[class] a.ha-marquee-link:focus-visible { text-decoration: underline !important; text-underline-offset: 5px; text-decoration-thickness: 1px; }
html body main .marquee.marquee[class] ::selection { background: var(--ha-mist); color: var(--ha-mulberry); }

/* 11. Footer ---------------------------------------------------------- */
html body footer,
html body footer [class~="bg-brand-navy"],
html body footer [class*="bg-"] { background: var(--ha-mist) !important; }
html body footer * { color: var(--ha-charcoal) !important; border-color: rgba(60, 14, 31, .14) !important; }
html body footer :is(h2, h3, h4) { color: var(--ha-mulberry) !important; }
html body footer a:hover { color: var(--ha-mulberry) !important; }
/* footer logo in Charcoal so it reads on Mist */
html body footer .logo, html body footer img[class*="logo"] { filter: brightness(0) invert(.24) !important; }
/* footer logo sized to match the height of the address/link columns */
html body footer img.logo.logo { width: auto !important; height: 150px !important; max-width: none !important; }
@media (min-width: 768px) { html body footer img.logo.logo { height: 210px !important; } }

/* hidden: "Web Design & SEO by Lifted Logic" credit (tagged by honey.js) */
html body [data-ha-hide] { display: none !important; }


/* 12. Sitewide buttons ------------------------------------------------
   The parent theme has four button styles. All of them lose the sliding
   "loading bar" fill and use flat brand colors, everywhere on the site
   (pages, dropdowns, pop-ups, forms). The header BOOK button and the hero
   button have their own styles above. */
html body :is(.btn-primary, .btn-primary-white, .btn-secondary, .btn-secondary-white)::before,
html body :is(.btn-primary, .btn-primary-white, .btn-secondary, .btn-secondary-white)::after {
	display: none !important;
	transition: none !important;
	transform: none !important;
}
html body :is(.btn-primary, .btn-primary-white, .btn-secondary, .btn-secondary-white).btn {
	border-radius: 0 !important;
}
html body :is(.btn-primary, .btn-primary-white, .btn-secondary, .btn-secondary-white) {
	border-radius: 0 !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
	font-family: var(--ha-font-body) !important;
}
html body :is(.btn-primary, .btn-primary-white, .btn-secondary, .btn-secondary-white) * {
	color: inherit !important;
	background: transparent !important;
	transition: none !important;
}

/* filled: Mulberry -> Charcoal on hover */
html body .btn-primary.btn-primary {
	background-color: var(--ha-mulberry) !important;
	border: 1px solid var(--ha-mulberry) !important;
	color: var(--ha-cloud) !important;
}
html body .btn-primary.btn-primary:hover,
html body .btn-primary.btn-primary:focus-visible {
	background-color: var(--ha-charcoal) !important;
	border-color: var(--ha-charcoal) !important;
	color: var(--ha-cloud) !important;
}

/* remove the parent theme's animated line drawn on the text inside buttons/links */
html body :is(.btn-primary, .btn-primary-white, .btn-secondary, .btn-secondary-white) :is(span, div)::before,
html body :is(.btn-primary, .btn-primary-white, .btn-secondary, .btn-secondary-white) :is(span, div)::after {
	display: none !important;
	transition: none !important;
	transform: none !important;
}

/* text links with an arrow ("View Post", "View All Posts", "Read More"):
   no box, Mulberry text, static underline on hover */
html body :is(.btn-secondary, .btn-secondary-white):is(.btn-secondary, .btn-secondary-white) {
	background-color: transparent !important;
	border: none !important;
	color: var(--ha-mulberry) !important;
	text-decoration: none !important;
	letter-spacing: .1em !important;
}
html body :is(.btn-secondary, .btn-secondary-white):is(.btn-secondary, .btn-secondary-white):hover,
html body :is(.btn-secondary, .btn-secondary-white):is(.btn-secondary, .btn-secondary-white):focus-visible {
	background-color: transparent !important;
	color: var(--ha-mulberry) !important;
	text-decoration: underline !important;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}
html body :is(.btn-secondary, .btn-secondary-white):is(.btn-secondary, .btn-secondary-white):is(:hover, :focus-visible) span {
	text-decoration: underline !important;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}
html body :is(.btn-secondary, .btn-secondary-white):is(.btn-secondary, .btn-secondary-white) svg { transition: transform .2s ease !important; }
html body :is(.btn-secondary, .btn-secondary-white):is(.btn-secondary, .btn-secondary-white):hover svg { transform: translateX(3px); }
/* white text-links stay Cloud only over photos/video */
html body :is([data-ha-hero], [class*="bg-image"]) .btn-secondary-white.btn-secondary-white,
html body :is([data-ha-hero], [class*="bg-image"]) .btn-secondary-white.btn-secondary-white:hover { color: var(--ha-cloud) !important; }

/* keep "whole card is clickable" links working (the parent theme uses an
   invisible ::after layer for that) */
html body [class*="after:inset-0"][class*="after:inset-0"]::after,
html body main [class*="after:inset-0"][class*="after:inset-0"]::after {
	display: block !important;
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: transparent !important;
	transform: none !important;
}

/* on photos/video: Cloud line -> filled Cloud on hover */
html body .btn-primary-white.btn-primary-white {
	background-color: transparent !important;
	border: 1px solid var(--ha-cloud) !important;
	color: var(--ha-cloud) !important;
}
html body .btn-primary-white.btn-primary-white:hover,
html body .btn-primary-white.btn-primary-white:focus-visible {
	background-color: var(--ha-cloud) !important;
	color: var(--ha-mulberry) !important;
}

/* 13. Pop-ups and Gravity Forms --------------------------------------- */
/* dim background behind any pop-up */
html body .mfp-bg { background: var(--ha-charcoal) !important; opacity: .72 !important; }

/* Lifted Logic pop-ups (e.g. the BOOK pop-up): panel colors come from these settings */
html body .lifted-logic-popup-modal {
	--ll-editor-modal-background-color: var(--ha-mist) !important;
	--ll-editor-modal-background-color-secondary: var(--ha-cloud) !important;
	--ll-editor-modal-border-radius: 0px !important;
}
html body .mfp-content :is(h1, h2, h3, h4, .hdg-1, .hdg-2, .hdg-3, .hdg-4, .hdg-5) {
	font-family: var(--ha-font-heading) !important;
	font-weight: 300 !important;
	font-style: normal !important;
	text-transform: uppercase !important;
	letter-spacing: -0.02em !important;
	color: var(--ha-mulberry) !important;
}
html body .mfp-content :is(p, li, span, label, div) { color: var(--ha-charcoal); }
html body .mfp-content a:not([class*="btn"]) { color: var(--ha-mulberry) !important; }
html body .mfp-wrap .mfp-close {
	color: var(--ha-charcoal) !important;
	opacity: 1 !important;
	font-family: var(--ha-font-body) !important;
	font-weight: 300 !important;
}
html body .mfp-wrap .mfp-close:hover { color: var(--ha-mulberry) !important; }

/* Gravity Forms (pop-up, contact and request pages) */
html body .gform_wrapper :is(.gfield_label, .gform-field-label, legend) {
	color: var(--ha-charcoal) !important;
	font-family: var(--ha-font-body) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: .02em;
}
html body .gform_wrapper .gfield_required { color: var(--ha-mulberry) !important; }
html body .gform_wrapper :is(.gfield_description, .gform_required_legend, .ginput_counter) { color: var(--ha-charcoal) !important; opacity: .75; }
html body .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea) {
	background: var(--ha-cloud) !important;
	color: var(--ha-charcoal) !important;
	border: 1px solid rgba(63, 62, 61, .28) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--ha-font-body) !important;
	transition: border-color .2s ease !important;
}
html body .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea):focus {
	border-color: var(--ha-mulberry) !important;
	outline: 1px solid var(--ha-mulberry) !important;
	outline-offset: 0 !important;
}
html body .gform_wrapper :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ha-mulberry); }
html body .gform_wrapper .gfield_error :is(input, select, textarea) { border-color: var(--ha-mulberry) !important; }
html body .gform_wrapper :is(.validation_message, .gform_validation_errors, .gform_submission_error) { color: var(--ha-mulberry) !important; border-color: var(--ha-mulberry) !important; background: transparent !important; }
html body .gform_wrapper :is(input[type="submit"], button[type="submit"], .gform_button) {
	border-radius: 0 !important;
	font-family: var(--ha-font-body) !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
}
html body .gform_wrapper :is(input[type="submit"], .gform_button):not(.btn-primary) {
	background: var(--ha-mulberry) !important;
	color: var(--ha-cloud) !important;
	border: 1px solid var(--ha-mulberry) !important;
}
html body .gform_wrapper :is(input[type="submit"], .gform_button):not(.btn-primary):hover { background: var(--ha-charcoal) !important; border-color: var(--ha-charcoal) !important; }


/* 14. Blog (News & Updates) ------------------------------------------- */
/* category list: plain links, Mulberry + static underline when active/hovered */
html body main a.paragraph-large,
html body main a.paragraph-large * {
	color: var(--ha-charcoal) !important;
	text-decoration: none !important;
	transition: none !important;
}
html body main a.paragraph-large:hover,
html body main a.paragraph-large:focus-visible,
html body main a.paragraph-large[aria-current],
html body main a.paragraph-large.is-active {
	color: var(--ha-mulberry) !important;
	text-decoration: underline !important;
	text-underline-offset: 5px !important;
	text-decoration-thickness: 1px !important;
}

/* post cards on light pages: a hairline frame so they read as cards */
html body main .post__read-more-wrapper { margin-left: 0 !important; }
html body main :has(> .post__read-more-wrapper) { border: 1px solid var(--ha-hairline) !important; }

/* pagination: flat squares */
html body .blog__pagination ul.page-numbers { display: flex !important; gap: 8px !important; align-items: center; list-style: none; padding: 0; }
html body .blog__pagination :is(a, span).page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px !important;
	border: 1px solid rgba(63, 62, 61, .2) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--ha-charcoal) !important;
	font-family: var(--ha-font-body) !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}
html body .blog__pagination a.page-numbers:hover,
html body .blog__pagination a.page-numbers:focus-visible { background: var(--ha-mist) !important; border-color: var(--ha-mist) !important; color: var(--ha-mulberry) !important; }
html body .blog__pagination span.page-numbers.current { background: var(--ha-mulberry) !important; border-color: var(--ha-mulberry) !important; color: var(--ha-cloud) !important; }
html body .blog__pagination :is(a, span).page-numbers::before,
html body .blog__pagination :is(a, span).page-numbers::after { display: none !important; }
html body .blog__pagination :is(a, span).page-numbers svg { color: inherit !important; }

/* 15. Text highlight color -------------------------------------------- */
html body ::selection { background: var(--ha-mulberry); color: var(--ha-cloud); }
html body ::-moz-selection { background: var(--ha-mulberry); color: var(--ha-cloud); }
/* on Mulberry areas, highlight in Mist so it still shows */
html body :is(.btn-primary, [class~="bg-brand-navy"] .btn-primary, [data-ha-btn], .primary-nav-mobile-cta, button[data-ha-tab].is-active) ::selection,
html body :is(.btn-primary, [data-ha-btn], .primary-nav-mobile-cta, button[data-ha-tab].is-active)::selection { background: var(--ha-mist); color: var(--ha-mulberry); }


/* 16. Price lists ------------------------------------------------------
   Use inside any text/WYSIWYG component:
   <table class="ha-price-list"><tbody><tr><th>Treatment</th><td>$000</td></tr>…</tbody></table>
   Optional: <p class="ha-price-eyebrow">…</p> above the heading, <p class="ha-price-note">…</p> below. */
html body .ha-price-eyebrow {
	font-family: var(--ha-font-body) !important;
	font-size: 12px !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--ha-charcoal) !important;
	margin-bottom: 10px !important;
}
html body table.ha-price-list {
	width: 100% !important;
	border-collapse: collapse !important;
	border: 0 !important;
	margin: 32px 0 18px !important;
	background: transparent !important;
	text-align: left !important;
}
html body table.ha-price-list tbody {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 56px;
	border-top: 1px solid rgba(63, 62, 61, .18);
}
@media (min-width: 768px) {
	html body table.ha-price-list tbody { grid-template-columns: 1fr 1fr; border-top: 0; }
	html body table.ha-price-list tr:nth-child(-n+2) { border-top: 1px solid rgba(63, 62, 61, .18) !important; }
}
html body table.ha-price-list tr {
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 16px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(63, 62, 61, .18) !important;
	background: transparent !important;
}
html body table.ha-price-list :is(th, td) {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--ha-font-body) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--ha-charcoal) !important;
	text-align: left !important;
}
html body table.ha-price-list th { font-weight: 400 !important; letter-spacing: .02em; }
html body table.ha-price-list td {
	font-weight: 700 !important;
	color: var(--ha-mulberry) !important;
	white-space: nowrap;
	text-align: right !important;
	letter-spacing: .04em;
}
html body .ha-price-note {
	font-size: 12px !important;
	color: var(--ha-charcoal) !important;
	opacity: .75;
	letter-spacing: .02em;
	margin-top: 8px !important;
}

/* price cards: 4 across (Content Grid with icons) */
html body table.ha-price-list.ha-price-list--card { margin: 14px 0 0 !important; }
html body table.ha-price-list.ha-price-list--card tbody { grid-template-columns: 1fr !important; border-top: 1px solid rgba(63, 62, 61, .18) !important; }
html body table.ha-price-list.ha-price-list--card tr:nth-child(-n+2) { border-top: 0 !important; }
html body table.ha-price-list.ha-price-list--card tr { padding: 12px 0 !important; gap: 16px; }
html body table.ha-price-list.ha-price-list--card :is(th, td) { font-size: 14px !important; }

html body [data-ha-pricecard] {
	background: var(--ha-cloud) !important;
	border: 1px solid rgba(63, 62, 61, .10) !important;
	padding: 32px 26px 22px !important;
	height: 100%;
	text-align: left !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start !important;
}
html body [data-ha-pricecard] :is(svg, img) {
	width: 40px !important;
	height: 40px !important;
	color: var(--ha-mulberry) !important;
	margin: 0 0 18px !important;
}
html body [data-ha-pricecard] svg :is(path, circle, rect, line, polyline, polygon) { stroke: currentColor; }
html body [data-ha-pricecard] h3 {
	font-size: 20px !important;
	line-height: 1.2 !important;
	color: var(--ha-mulberry) !important;
	text-align: left !important;
	margin: 0 0 4px !important;
}
html body [data-ha-pricecard] .wysiwyg, html body [data-ha-pricecard] .wysiwyg * { text-align: left; }
html body [data-ha-pricing] .ha-price-note { text-align: center; }