/*
Theme Name: Martina Henry
Theme URI: https://martinahenrybeauty.com
Description: Child theme of GeneratePress for Martina Henry.
Author: Martina Henry
Author URI: https://martinahenrybeauty.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: martina-henry-beauty
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	--cream: #FAF6F0;
	--cream-50: #FEFCFA;
	--cream-100: #FAF6F0;
	--cream-200: #F0E6DC;
	--cream-300: #E8D5C8;
	--rose: #8B4F60;
	--rose-light: #B87B8B;
	--rose-dark: #5C2D3A;
	--gold: #C4956A;
	--gold-light: #DDBF9A;
	--gold-dark: #9B6B43;
	--charcoal: #2A2A2A;
	--warm-gray: #6B5E58;
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
	--shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
}

/* ============================================================
   RESET / BASE — overrides GeneratePress defaults
   ============================================================ */
html { scroll-behavior: smooth; }

body {
	background: var(--cream) !important;
	color: var(--charcoal) !important;
	font-family: var(--font-body) !important;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
	font-family: var(--font-display) !important;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.15;
}

a { color: var(--rose); text-decoration: none; transition: color .3s; }
a:hover { color: var(--rose-dark); }

img { max-width: 100%; height: auto; display: block; }

/* Hide GeneratePress default site header — we use our own */
.site-header,
.main-navigation { display: none !important; }

/* ============================================================
   LAYOUT
   ============================================================ */
.mhb-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 640px) { .mhb-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .mhb-container { padding: 0 2.5rem; } }

.mhb-section { padding: 4rem 0; }
@media (min-width: 640px) { .mhb-section { padding: 6rem 0; } }
@media (min-width: 1024px) { .mhb-section { padding: 8rem 0; } }

.mhb-bg-cream { background: var(--cream); }
.mhb-bg-white { background: #fff; }
.mhb-bg-rose-dark { background: var(--rose-dark); color: var(--cream-50); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.mhb-section-label {
	font-family: var(--font-body);
	font-size: .75rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gold-dark);
	font-weight: 500;
	margin-bottom: 1rem;
	display: block;
}

.mhb-h2 {
	font-size: clamp(1.875rem, 4vw, 3.75rem);
	font-weight: 300;
	margin: 0 0 1.5rem;
}
.mhb-h2 .accent { color: var(--rose); font-style: italic; }

.mhb-lead {
	color: var(--warm-gray);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 42rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.mhb-btn,
.mhb-btn-primary,
.mhb-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .9rem 2rem;
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all .3s ease;
}
.mhb-btn-primary,
a.mhb-btn-primary,
.entry-content a.mhb-btn-primary,
.entry-content a.mhb-btn {
	background: var(--rose);
	color: var(--cream-50) !important;
	text-decoration: none !important;
}
.mhb-btn-primary:hover,
a.mhb-btn-primary:hover,
.entry-content a.mhb-btn-primary:hover {
	background: var(--rose-dark);
	color: var(--cream-50) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}
.mhb-btn-outline,
a.mhb-btn-outline,
.entry-content a.mhb-btn-outline {
	background: transparent;
	color: var(--charcoal) !important;
	border-color: var(--charcoal);
	text-decoration: none !important;
}
.mhb-btn-outline:hover,
a.mhb-btn-outline:hover,
.entry-content a.mhb-btn-outline:hover {
	background: var(--charcoal);
	color: var(--cream-50) !important;
	transform: translateY(-2px);
}
.mhb-btn-gold {
	background: var(--gold);
	color: var(--charcoal);
}
.mhb-btn-gold:hover { background: var(--gold-dark); color: var(--cream-50); }

/* ============================================================
   WOOCOMMERCE BLOCKS — Cart & Checkout primary buttons
   Target both the classic shortcode markup AND the new block markup so
   "Proceed to Checkout" (cart) and "Place order" (checkout) match the
   brand pill button (.mhb-btn-primary).
   ============================================================ */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.wc-block-components-button,
.woocommerce-page #place_order,
.woocommerce-page .checkout-button,
.woocommerce a.checkout-button.button.alt.wc-forward,
button.wc-block-components-checkout-place-order-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: .5rem !important;
	padding: .95rem 2rem !important;
	min-height: 0 !important;
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	background: var(--rose) !important;
	background-color: var(--rose) !important;
	color: var(--cream-50) !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease !important;
	width: auto !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-page #place_order:hover,
.woocommerce-page .checkout-button:hover,
button.wc-block-components-checkout-place-order-button:hover {
	background: var(--rose-dark) !important;
	background-color: var(--rose-dark) !important;
	color: var(--cream-50) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-lg) !important;
}
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible,
.woocommerce-page #place_order:focus-visible {
	outline: 2px solid var(--rose) !important;
	outline-offset: 3px !important;
}
/* Cart "Proceed to Checkout": full-width to match the Apple/Google Pay
   wallet buttons rendered above it in the cart sidebar. */
.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__submit-container {
	display: flex !important;
	justify-content: stretch !important;
	width: 100% !important;
	padding: 0 !important;
}
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
	width: 100% !important;
	justify-content: center !important;
}

/* Express Checkout (Stripe Apple Pay / Google Pay) — Stripe's wallet button
   iframe ignored parent layout, so the original WC Blocks "Express Checkout"
   title overlapped the buttons. We hide that broken title and replace it
   with our own "Pay quickly with" label via ::before — outside the iframe,
   fully under our control, mirrors the "Or continue below" separator below
   for visual symmetry. */
.wc-block-components-express-payment__title-container,
.wcstripe-express-checkout__title-container,
.wc-stripe-express-checkout-button-separator,
.wc-stripe-express-checkout__title-container {
	display: none !important;
}
/* Move the WC Blocks express payment border from the buttons-only content
   container UP to the parent so our injected "Pay quickly with" label sits
   inside the bordered card. Without this the border wraps just the buttons,
   leaving the label visually orphaned above an empty top edge. */
.wc-block-components-express-payment {
	border: 1px solid var(--cream-200);
	border-radius: 4px;
	padding: 1.25rem;
	background: transparent;
}
.wc-block-components-express-payment__content {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Style for the JS-injected "Pay quickly with" label (see functions.php). */
.mhb-express-label {
	text-align: center;
	font-family: var(--font-body);
	font-size: .8rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--charcoal);
	opacity: .7;
	margin-bottom: 1rem;
}
.wc-block-components-express-payment__event-buttons {
	margin-top: 0 !important;
}
.wc-block-components-express-payment__event-buttons > li {
	max-height: 48px;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.mhb-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	background: var(--rose);
	height: 36px;
	display: flex;
	align-items: center;
}
.mhb-topbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding: 0 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mhb-topbar-brand,
.mhb-topbar-follow {
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(254,252,250,.9);
}
.mhb-topbar-socials { display: flex; gap: .25rem; align-items: center; }
.mhb-topbar-socials a {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	color: rgba(254,252,250,.9);
}
.mhb-topbar-socials a:hover { color: #fff; }
@media (max-width: 640px) { .mhb-topbar-follow { display: none; } }

/* ============================================================
   NAVBAR
   ============================================================ */
.mhb-navbar {
	position: fixed;
	top: 36px; left: 0; right: 0;
	z-index: 50;
	background: rgba(250,246,240,.95);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-sm);
	padding: 1rem 0;
	transition: padding .3s ease;
}
.mhb-navbar.scrolled { padding: .5rem 0; }
.mhb-navbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
/* Right-side group keeps icons, Book Now and burger glued together so the
   space-between only distributes around logo / menu / actions. */
.mhb-nav-actions {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
}
@media (min-width: 640px) { .mhb-navbar-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .mhb-navbar-inner { padding: 0 2.5rem; } }

.mhb-logo img,
.mhb-logo .custom-logo { height: 50px; width: auto; max-width: 220px; object-fit: contain; }
@media (min-width: 1024px) {
	.mhb-logo img,
	.mhb-logo .custom-logo { height: 64px; max-width: 280px; }
}
.mhb-logo .custom-logo-link { display: inline-block; line-height: 0; }

.mhb-nav-links {
	list-style: none;
	display: none;
	gap: 2rem;
	margin: 0; padding: 0;
}
@media (min-width: 768px) { .mhb-nav-links { display: flex; align-items: center; } }
.mhb-nav-links a {
	font-family: var(--font-body);
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--warm-gray);
	position: relative;
	padding-bottom: 2px;
}
.mhb-nav-links a::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	height: 1px; width: 0;
	background: var(--rose);
	transition: width .3s;
}
.mhb-nav-links a:hover { color: var(--charcoal); }
.mhb-nav-links a:hover::after { width: 100%; }

/* -- Primary nav dropdowns ------------------------------------- */
.mhb-nav-links .menu-item-has-children { position: relative; }
/* Fatten every top-level link's vertical click target so there's no dead strip
   between the link and the dropdown card. Applies to all top-level nav items
   (keeps alignment consistent whether or not they have children). */
.mhb-nav-links > li > a { padding-top: .75rem; padding-bottom: calc(.75rem + 2px); }
.mhb-nav-links .menu-item-has-children > a { padding-right: 1.1em; }
.mhb-nav-links .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .3s ease;
	pointer-events: none; /* chevron is decoration — never eat the click */
}
.mhb-nav-links .menu-item-has-children:hover > a::before,
.mhb-nav-links .menu-item-has-children:focus-within > a::before {
	transform: translateY(-30%) rotate(-135deg);
}
.mhb-nav-links .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;            /* sits at the bottom of the parent link, with margin-top below for visual breathing room */
	left: 50%;
	margin: .5rem 0 0;    /* small gap between link and dropdown card */
	padding: .5rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 12px 30px rgba(0,0,0,.08);
	min-width: 14rem;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);  /* no Y animation — position is stable */
	transition: opacity .2s ease, visibility .2s;
	pointer-events: none;
	z-index: 5;
}
/* Invisible hover bridge: spans the .5rem gap (sub-menu margin-top) plus the
   link's padding-bottom, so moving the cursor diagonally never crosses a
   dead zone. Stops exactly at the link text — never overlaps it. */
.mhb-nav-links .sub-menu::before {
	content: '';
	position: absolute;
	top: calc(-.5rem - .75rem - 2px);
	left: 0; right: 0;
	height: calc(.5rem + .75rem + 2px);
}
.mhb-nav-links .menu-item-has-children:hover > .sub-menu,
.mhb-nav-links .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.mhb-nav-links .sub-menu li { margin: 0; }
.mhb-nav-links .sub-menu a {
	display: block;
	padding: .7rem 1rem;
	border-radius: .5rem;
	white-space: nowrap;
}
.mhb-nav-links .sub-menu a::after { display: none; } /* no underline in dropdown */
.mhb-nav-links .sub-menu a:hover {
	background: var(--cream);
	color: var(--charcoal);
}

.mhb-nav-cta { display: none; }
@media (min-width: 768px) {
	.mhb-nav-cta {
		display: inline-flex;
		padding: .65rem 1.5rem;
		font-size: .7rem;
	}
}

/* Mobile burger */
.mhb-burger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: .75rem;
	cursor: pointer;
}
.mhb-burger span {
	display: block;
	width: 24px;
	height: 1px;
	background: var(--charcoal);
	transition: all .3s;
}
.mhb-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mhb-burger.open span:nth-child(2) { opacity: 0; }
.mhb-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mhb-burger.open span { background: var(--charcoal); }
@media (min-width: 768px) { .mhb-burger { display: none; } }

.mhb-mobile-menu {
	display: none;
	background: var(--cream);
	border-top: 1px solid var(--cream-200);
	padding: 1rem 1.5rem 1.5rem;
}
.mhb-mobile-menu.open { display: block; }
.mhb-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mhb-mobile-menu li { border-bottom: 1px solid var(--cream-200); }
.mhb-mobile-menu a {
	display: block;
	padding: 1rem 0;
	font-family: var(--font-body);
	font-size: .85rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--charcoal);
}
.mhb-mobile-menu .mhb-btn-primary {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	color: var(--cream-50);
}
.mhb-mobile-menu .mhb-btn-primary:hover { color: var(--cream-50); }

/* Add top padding to body so fixed navbar doesn't cover content */
.mhb-page-offset { padding-top: 130px; }
@media (min-width: 1024px) { .mhb-page-offset { padding-top: 150px; } }

/* ============================================================
   HERO
   ============================================================ */
.mhb-hero {
	position: relative;
	min-height: 90vh;
	background: var(--cream);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 9rem 0 4rem;
}
@media (min-width: 1024px) {
	.mhb-hero { padding: 10.5rem 0 4rem; }
}
.mhb-hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	gap: 2rem;
	width: 100%;
}
@media (min-width: 1024px) {
	.mhb-hero-inner {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		padding: 0 2.5rem;
		align-items: center;
	}
}
.mhb-hero h1 {
	font-size: clamp(2.2rem, 6vw, 5rem);
	margin: 1rem 0 1.5rem;
	line-height: 1.05;
}
.mhb-hero h1 .accent {
	display: block;
	font-style: italic;
	color: var(--rose);
}
.mhb-hero-text { max-width: 28rem; margin-bottom: 2rem; }
.mhb-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.mhb-hero-media {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 9 / 16;
	max-height: 70vh;
	margin: 0 auto;
	width: 100%;
	max-width: 350px;
	/* iOS Safari: forces GPU compositing so video renders inside overflow:hidden+border-radius */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
@media (min-width: 1024px) {
	.mhb-hero-media { max-width: none; max-height: 80vh; }
}
.mhb-hero-media img,
.mhb-hero-media video {
	width: 100%; height: 100%;
	object-fit: cover;
}
/* Image fallback for video hero — hidden on desktop, shown on mobile */
.mhb-hero-video-fallback {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: none;
}
/* On mobile: hide the entire hero media block */
@media (max-width: 1023px) {
	.mhb-hero-media { display: none; }
}

/* ============================================================
   CARDS — services, testimonials
   ============================================================ */
.mhb-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mhb-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mhb-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .mhb-grid-4 { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 640px) {
	.mhb-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.mhb-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.mhb-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.mhb-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

.mhb-card {
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all .3s;
}
.mhb-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}
.mhb-card-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream-200);
}
.mhb-card-image img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.mhb-card:hover .mhb-card-image img { transform: scale(1.05); }
.mhb-card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.mhb-card-title {
	font-size: 1.4rem;
	margin: 0 0 .75rem;
	color: var(--charcoal);
}
.mhb-card-text {
	color: var(--warm-gray);
	font-size: .9rem;
	line-height: 1.7;
	flex: 1;
	margin: 0 0 1.25rem;
}
.mhb-card-footer {
	display: flex;
	gap: .5rem;
	margin-top: auto;
}
.mhb-card-footer .mhb-btn-outline,
.mhb-card-footer .mhb-btn-primary {
	flex: 1;
	justify-content: center;
	padding: .8rem;
	font-size: .7rem;
}

/* ============================================================
   TESTIMONIAL CARDS
   ============================================================ */
.mhb-testimonial-card {
	background: #fff;
	border: 1px solid var(--cream-300);
	border-radius: 1.25rem;
	padding: 2rem 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	position: relative;
}
.mhb-testimonial-card .mhb-testimonial-quote,
.mhb-testimonial-card .mhb-testimonial-quote p,
.mhb-testimonial-quote {
	font-family: var(--font-display) !important;
	font-size: 1.5rem !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: var(--charcoal) !important;
	line-height: 1.5 !important;
}
.mhb-testimonial-card .mhb-testimonial-quote p { margin: 0 0 .5rem !important; }
.mhb-testimonial-card .mhb-testimonial-quote p:last-child { margin-bottom: 0 !important; }
.mhb-testimonial-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--cream-200);
	padding-top: 1rem;
	margin-top: auto;
}
.mhb-testimonial-person {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
}
.mhb-testimonial-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--cream-200);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mhb-testimonial-avatar img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.mhb-testimonial-avatar-fallback {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--rose);
	background: rgba(139,79,96,.1);
}
.mhb-testimonial-name {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: .85rem;
	color: var(--charcoal);
}
.mhb-stars { display: flex; gap: 4px; color: var(--gold); }

/* ============================================================
   BLOG
   ============================================================ */
.mhb-blog-card {
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 1rem;
	overflow: hidden;
	transition: all .3s;
}
.mhb-blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mhb-blog-card-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-200); }
.mhb-blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.mhb-blog-card-body { padding: 1.5rem; }
.mhb-blog-meta {
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
}
.mhb-meta-dot { color: var(--gold); opacity: .7; }
.mhb-blog-card-title {
	font-size: 1.4rem !important;
	margin: 0 0 .6rem;
	line-height: 1.25;
}
@media (min-width: 1024px) {
	.mhb-blog-card-title { font-size: 1.5rem !important; }
}
.mhb-blog-card-title a { color: var(--charcoal); }
.mhb-blog-card-title a:hover { color: var(--rose); }
.mhb-blog-excerpt {
	color: var(--warm-gray);
	font-size: .9rem;
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Category pills (service category pages) */
.mhb-cat-pill {
	display: inline-block;
	padding: .65rem 1.25rem;
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--warm-gray);
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 999px;
	transition: all .3s;
	text-decoration: none;
}
.mhb-cat-pill:hover {
	border-color: var(--rose);
	color: var(--rose);
}
.mhb-cat-pill-active {
	background: var(--rose);
	color: var(--cream-50);
	border-color: var(--rose);
}
.mhb-cat-pill-active:hover {
	background: var(--rose-dark);
	color: var(--cream-50);
	border-color: var(--rose-dark);
}

/* Single post hero (above the featured image). Owns its own top spacing
   so the page does not need .mhb-page-offset on top of inline padding. */
.mhb-single-hero {
	padding: clamp(7rem, 11vw, 9.5rem) 0 1.5rem;
	background: var(--cream);
	text-align: center;
}
.mhb-single-hero-inner { max-width: 48rem; }
.mhb-single-hero-meta { justify-content: center; }
.mhb-single-hero-title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	margin: 1rem 0 0;
	line-height: 1.15;
}
.mhb-single-hero-lead {
	margin: 1.25rem auto 0;
	text-align: center;
	max-width: 38rem;
}

/* Featured image — natural aspect ratio (no forced crop) so portrait,
   square, and landscape images all render correctly. */
.mhb-single-featured-image {
	max-width: 1100px;
	margin: 2.5rem auto 0;
	padding: 0 1.5rem;
}
.mhb-single-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: cover;
	border-radius: 1rem;
	margin: 0 auto;
}

/* Post body — long-form typography. */
.mhb-single-content {
	max-width: 44rem;
	margin: 0 auto;
	color: var(--charcoal);
	font-size: 1.0625rem;
	line-height: 1.8;
}
.mhb-single-content > *:first-child { margin-top: 0; }
.mhb-single-content > *:last-child { margin-bottom: 0; }
.mhb-single-content p { margin: 0 0 1.4rem; }
.mhb-single-content h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	margin: 3rem 0 1rem;
	color: var(--charcoal);
}
.mhb-single-content h3 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	line-height: 1.25;
	margin: 2.25rem 0 .85rem;
	color: var(--charcoal);
}
.mhb-single-content h4 {
	font-size: 1.15rem;
	margin: 1.75rem 0 .6rem;
	color: var(--charcoal);
}
.mhb-single-content a {
	color: var(--rose-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s;
}
.mhb-single-content a:hover { color: var(--rose); }
.mhb-single-content strong, .mhb-single-content b { color: var(--charcoal); font-weight: 600; }
.mhb-single-content em, .mhb-single-content i { font-style: italic; }
.mhb-single-content ul,
.mhb-single-content ol {
	margin: 0 0 1.4rem;
	padding-left: 1.5rem;
}
.mhb-single-content ul { list-style: disc; }
.mhb-single-content ol { list-style: decimal; }
.mhb-single-content li { margin: 0 0 .5rem; }
.mhb-single-content li > ul,
.mhb-single-content li > ol { margin: .5rem 0 .25rem; }
.mhb-single-content blockquote {
	margin: 2rem 0;
	padding: .25rem 0 .25rem 1.5rem;
	border-left: 3px solid var(--rose);
	color: var(--warm-gray);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.6;
}
.mhb-single-content blockquote p:last-child { margin-bottom: 0; }
.mhb-single-content hr {
	border: 0;
	height: 1px;
	background: var(--cream-200);
	margin: 2.5rem auto;
	max-width: 12rem;
}
.mhb-single-content img,
.mhb-single-content figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: .75rem;
	margin: 1.75rem auto;
}
.mhb-single-content figure { margin: 1.75rem 0; }
.mhb-single-content figcaption {
	margin-top: .75rem;
	font-family: var(--font-body);
	font-size: .85rem;
	color: var(--warm-gray);
	text-align: center;
	font-style: italic;
}
.mhb-single-content iframe,
.mhb-single-content video,
.mhb-single-content embed {
	display: block;
	max-width: 100%;
	margin: 1.75rem auto;
	border: 0;
	border-radius: .75rem;
}
/* Responsive 16:9 wrapper for embeds (YouTube etc.) */
.mhb-single-content .mhb-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 1.75rem 0;
	border-radius: .75rem;
	overflow: hidden;
	background: var(--cream-200);
}
.mhb-single-content .mhb-embed iframe,
.mhb-single-content .mhb-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
}
.mhb-single-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: .95rem;
}
.mhb-single-content th,
.mhb-single-content td {
	padding: .65rem .85rem;
	border-bottom: 1px solid var(--cream-200);
	text-align: left;
}
.mhb-single-content th { font-weight: 600; color: var(--charcoal); }
.mhb-single-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9em;
	background: var(--cream-100, #f6efe9);
	padding: .15em .4em;
	border-radius: 4px;
}
.mhb-single-content pre {
	background: var(--cream-100, #f6efe9);
	padding: 1rem 1.25rem;
	border-radius: .5rem;
	overflow-x: auto;
	margin: 1.75rem 0;
	font-size: .9rem;
	line-height: 1.6;
}
.mhb-single-content pre code { background: none; padding: 0; }
/* WP block alignment classes */
.mhb-single-content .alignleft  { float: left;  margin: .5rem 1.5rem 1rem 0; max-width: 50%; }
.mhb-single-content .alignright { float: right; margin: .5rem 0 1rem 1.5rem; max-width: 50%; }
.mhb-single-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.mhb-single-content .alignwide  { max-width: min(100%, 56rem); margin-left: auto; margin-right: auto; }
.mhb-single-content .alignfull  { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

@media (max-width: 640px) {
	.mhb-single-content { font-size: 1rem; line-height: 1.75; }
	.mhb-single-content blockquote { font-size: 1.1rem; padding-left: 1rem; }
	.mhb-single-content .alignleft,
	.mhb-single-content .alignright { float: none; margin: 1.25rem auto; max-width: 100%; }
}

/* ============================================================
   PAGINATION
   ============================================================ */
.mhb-pagination { margin-top: 3rem; text-align: center; }
.mhb-pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}
.mhb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .85rem;
	border: 1px solid var(--cream-300);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: .9rem;
	font-weight: 500;
	line-height: 1;
	border-radius: 8px;
	transition: all .2s ease;
	box-sizing: border-box;
}
.mhb-pagination a.page-numbers:hover {
	background: var(--cream-200);
	border-color: var(--rose);
	color: var(--rose);
}
.mhb-pagination .page-numbers.current {
	background: var(--rose);
	color: var(--cream-50);
	border-color: var(--rose);
}
.mhb-pagination .page-numbers.dots { border: 0; padding: 0 .25rem; color: var(--warm-gray); }
.mhb-pagination .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;
}

/* ============================================================
   SHARE BUTTONS (single post)
   ============================================================ */
.mhb-share {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	margin: 3rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--cream-200);
	max-width: 44rem;
	flex-wrap: wrap;
}
.mhb-share-label {
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin-right: .5rem;
}
.mhb-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--cream-300);
	background: #fff;
	color: var(--charcoal);
	border-radius: 999px;
	cursor: pointer;
	transition: all .25s ease;
	position: relative;
	text-decoration: none;
}
.mhb-share-btn:hover {
	background: var(--rose);
	border-color: var(--rose);
	color: var(--cream-50);
	transform: translateY(-1px);
}
.mhb-share-btn svg { display: block; }
.mhb-share-copy { font-family: inherit; }
.mhb-share-copied {
	position: absolute;
	top: -1.85rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--charcoal);
	color: var(--cream-50);
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .25rem .55rem;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	white-space: nowrap;
}
.mhb-share-copy.is-copied .mhb-share-copied { opacity: 1; }
.mhb-share-copy.is-copied .mhb-share-copied::after { content: 'Copied'; }

/* ============================================================
   FOOTER
   ============================================================ */
.mhb-footer { background: var(--rose-dark); color: var(--cream-50); }
.mhb-footer-cta {
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding: 2.5rem 0;
}
.mhb-footer-cta-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
	text-align: center;
}
@media (min-width: 768px) {
	.mhb-footer-cta-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}
.mhb-footer-cta-label {
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--gold-light);
	margin-bottom: .25rem;
}
.mhb-footer-cta-text {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--cream-50);
}

.mhb-footer-main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 3rem 1rem;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.mhb-footer-main {
		padding: 4rem 1.5rem;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 2.5rem;
	}
}
.mhb-footer h3,
.mhb-footer h4 {
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gold-light);
	margin: 0 0 1.25rem;
	font-weight: 500;
}
.mhb-footer .mhb-footer-brand {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cream-50);
	margin: 0 0 .5rem;
}
.mhb-footer-list { list-style: none; padding: 0; margin: 0; }
.mhb-footer-list li { margin-bottom: .75rem; }
.mhb-footer-list a {
	font-size: .8rem;
	color: rgba(240,230,220,.7);
	font-family: var(--font-body);
}
.mhb-footer-list a:hover { color: var(--cream-50); }

.mhb-footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding: 1.25rem 1rem;
	font-family: var(--font-body);
	font-size: .75rem;
	color: rgba(240,230,220,.7);
}
.mhb-footer-legal-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
}
.mhb-footer-legal-list a {
	font-size: .75rem;
	font-family: var(--font-body);
}

/* ============================================================
   HERO — decorative circles
   ============================================================ */
.mhb-hero { position: relative; }
.mhb-hero-shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	opacity: .55;
}
.mhb-hero-shape-1 {
	width: 280px; height: 280px;
	background: radial-gradient(circle at 30% 30%, rgba(184,123,139,.55), rgba(184,123,139,0) 70%);
	top: 6rem; left: -80px;
}
.mhb-hero-shape-2 {
	width: 180px; height: 180px;
	background: radial-gradient(circle at 50% 50%, rgba(232,213,200,.85), rgba(232,213,200,0) 70%);
	top: 50%; left: 32%;
}
.mhb-hero-shape-3 {
	width: 340px; height: 340px;
	background: radial-gradient(circle at 40% 40%, rgba(221,191,154,.35), rgba(221,191,154,0) 70%);
	bottom: -60px; right: -100px;
}
.mhb-hero-inner,
.mhb-hero-media { position: relative; z-index: 1; }
@media (max-width: 1023px) {
	.mhb-hero-shape-1 { width: 200px; height: 200px; top: 4rem; left: -60px; }
	.mhb-hero-shape-2 { display: none; }
	.mhb-hero-shape-3 { width: 240px; height: 240px; bottom: -40px; right: -80px; }
}

/* ============================================================
   SERVICES — header row + text-only card with hover image
   ============================================================ */
.mhb-services-header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 3rem;
}
.mhb-services-header .mhb-h2 { margin-bottom: 0; }
.mhb-services-viewall { align-self: flex-start; }
@media (min-width: 768px) {
	.mhb-services-header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}
	.mhb-services-viewall { align-self: auto; }
}

.mhb-service-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 1rem;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
	isolation: isolate;
}
.mhb-service-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--mhb-card-image, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .35s ease;
	z-index: 0;
}
.mhb-service-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(92,45,58,.55) 0%, rgba(92,45,58,.85) 100%);
	opacity: 0;
	transition: opacity .35s ease;
	z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
	.mhb-service-card.has-hover-image:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
	.mhb-service-card.has-hover-image:hover::before,
	.mhb-service-card.has-hover-image:hover::after { opacity: 1; }
	.mhb-service-card.has-hover-image:hover .mhb-card-title,
	.mhb-service-card.has-hover-image:hover .mhb-service-price,
	.mhb-service-card.has-hover-image:hover .mhb-card-text { color: var(--cream-50); }
	.mhb-service-card.has-hover-image:hover .mhb-btn-outline {
		color: var(--cream-50);
		border-color: var(--cream-50);
	}
	.mhb-service-card.has-hover-image:hover .mhb-btn-outline:hover {
		background: var(--cream-50);
		color: var(--rose-dark);
	}
	.mhb-service-card.has-hover-image:hover .mhb-btn-primary {
		background: var(--gold);
		color: var(--cream-50);
		border-color: var(--gold);
	}
	.mhb-service-card.has-hover-image:hover .mhb-btn-primary:hover {
		background: var(--gold-dark);
		border-color: var(--gold-dark);
	}
}
.mhb-service-card-inner {
	position: relative;
	z-index: 1;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 1rem;
	transition: color .35s ease;
}
.mhb-service-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--cream-200);
	transition: border-color .35s ease;
}
.mhb-service-card.has-hover-image:hover .mhb-service-card-head {
	border-bottom-color: rgba(255,255,255,.25);
}
.mhb-service-card .mhb-card-title {
	margin: 0;
	font-size: 1.35rem;
	transition: color .35s ease;
}
.mhb-service-price {
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--rose);
	flex-shrink: 0;
	transition: color .35s ease;
}
.mhb-service-card .mhb-card-text {
	color: var(--warm-gray);
	font-size: .9rem;
	line-height: 1.7;
	flex: 1;
	margin: 0;
	transition: color .35s ease;
}
.mhb-service-card.has-hover-image:hover .mhb-card-text {
	color: rgba(254,252,250,.9);
}
.mhb-service-card .mhb-card-footer {
	display: flex;
	gap: .5rem;
	margin-top: auto;
}
.mhb-service-card .mhb-card-footer .mhb-btn-outline,
.mhb-service-card .mhb-card-footer .mhb-btn-primary {
	flex: 1;
	justify-content: center;
	padding: .8rem;
	font-size: .7rem;
}

/* ============================================================
   PORTFOLIO (dark) — masonry + filters
   ============================================================ */
.mhb-portfolio-section {
	background: var(--rose-dark);
	color: var(--cream-50);
}
.mhb-h2-light { color: var(--cream-50); }
.mhb-section-label-gold { color: var(--gold-light); }
.mhb-portfolio-header {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 900px) {
	.mhb-portfolio-header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}
}
.mhb-portfolio-header .mhb-h2 { margin-bottom: 0; }
.mhb-portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.mhb-filter-pill {
	appearance: none;
	border: 1px solid transparent !important;
	background: rgba(255,255,255,.08) !important;
	color: rgba(240,230,220,.92) !important;
	padding: .95rem 1.85rem !important;
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	border-radius: 999px !important;
	cursor: pointer;
	transition: all .25s ease;
	line-height: 1;
}
.mhb-filter-pill:hover {
	background: rgba(255,255,255,.18) !important;
	color: var(--cream-50) !important;
}
.mhb-filter-pill-active,
.mhb-filter-pill-active:hover {
	background: var(--cream-50) !important;
	color: var(--rose-dark) !important;
	border-color: var(--cream-50) !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
}
.mhb-portfolio-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 180px;
	gap: 1rem;
	transition: opacity .2s ease, transform .2s ease;
}
.mhb-portfolio-grid.is-fading {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
}
@media (min-width: 640px) {
	.mhb-portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 200px;
	}
}
@media (min-width: 1024px) {
	.mhb-portfolio-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 220px;
		gap: 1.25rem;
	}
}
.mhb-portfolio-item {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	background: rgba(255,255,255,.04);
	cursor: pointer;
	transition: transform .4s ease;
	grid-row: span 1;
	padding: 0;
	border: none;
	color: inherit;
	font: inherit;
	text-align: left;
	width: 100%;
	appearance: none;
	-webkit-transform: translateZ(0);
}
.mhb-portfolio-item.is-hidden { display: none; }
.mhb-portfolio-item:hover { transform: translateY(-4px); }
.mhb-portfolio-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.mhb-portfolio-zoom {
	position: absolute;
	top: .9rem;
	right: .9rem;
	z-index: 3;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	color: var(--charcoal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: .9;
	transition: all .25s ease;
	pointer-events: none;
}
.mhb-portfolio-zoom svg {
	width: 16px; height: 16px;
	display: block;
}
.mhb-portfolio-item:hover .mhb-portfolio-zoom {
	opacity: 1;
	transform: scale(1.05);
}

.mhb-portfolio-overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2rem 1.2rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	background: linear-gradient(180deg, rgba(26,14,18,0) 0%, rgba(26,14,18,.85) 100%);
	color: var(--cream-50);
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
	z-index: 2;
	pointer-events: none;
}
.mhb-portfolio-item:hover .mhb-portfolio-overlay,
.mhb-portfolio-item:focus-visible .mhb-portfolio-overlay {
	opacity: 1;
	transform: translateY(0);
}
.mhb-portfolio-overlay-title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--cream-50);
}
.mhb-portfolio-overlay-text {
	font-family: var(--font-body);
	font-size: .8rem;
	line-height: 1.5;
	color: rgba(254,252,250,.9);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Touch devices: overlay always subtly visible so text is discoverable without hover. */
@media (hover: none) {
	.mhb-portfolio-overlay { opacity: 1; transform: translateY(0); }
	.mhb-portfolio-overlay-text { display: none; }
}
@media (min-width: 640px) {
	.mhb-portfolio-tall { grid-row: span 2; }
	.mhb-portfolio-wide { grid-row: span 1; }
}
.mhb-portfolio-item img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.mhb-portfolio-item:hover img { transform: scale(1.05); }
.mhb-portfolio-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}
.mhb-portfolio-tag {
	position: absolute;
	top: .9rem;
	left: .9rem;
	z-index: 2;
	font-family: var(--font-body);
	font-size: .65rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cream-50);
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(4px);
	padding: .3rem .7rem;
	border-radius: 999px;
}

/* ============================================================
   SECTION DIVIDER — used between same-bg home sections so they don't blend.
   The band keeps the surrounding bg color, draws a thin centred line
   broken by three rose dots. */
.mhb-divider-band {
	padding: 1.25rem 0 1.5rem;
}
.mhb-divider-band .mhb-container {
	display: flex;
	justify-content: center;
}
.mhb-divider-ornament {
	display: flex;
	align-items: center;
	gap: .65rem;
	width: 100%;
	max-width: 22rem;
}
.mhb-divider-ornament::before,
.mhb-divider-ornament::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--cream-300);
}
.mhb-divider-ornament > span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rose);
	opacity: .55;
	flex: 0 0 auto;
}
.mhb-divider-ornament > span:nth-child(2) {
	opacity: .85;
	width: 8px;
	height: 8px;
}

/* ============================================================
   ABOUT PAGE — section grouping, group tags, cards, SEO-hidden content
   ============================================================ */
.mhb-about-section { /* shares .mhb-section padding/bg */ }
.mhb-about-offer-head { margin-bottom: 3rem; }

.mhb-about-group { margin-top: 2.5rem; }
.mhb-about-group:first-of-type { margin-top: 1rem; }
.mhb-about-group-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cream-300);
}
.mhb-about-group-tag {
	display: inline-block;
	padding: .35rem .75rem;
	font-family: var(--font-body);
	font-size: .65rem;
	font-weight: 500;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--cream-50);
	background: var(--rose);
	border-radius: 0;
}
.mhb-about-group-tag-alt { background: var(--charcoal); }
.mhb-about-group-title {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--charcoal);
	margin: 0;
}
.mhb-about-group-intro {
	margin: 0;
	color: var(--warm-gray);
	font-size: .95rem;
	line-height: 1.7;
}

/* Cards — match the home services card visual language */
.mhb-about-card {
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 1rem;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}
.mhb-about-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
.mhb-about-card-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.mhb-about-card .mhb-card-title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 .75rem;
}
.mhb-about-card .mhb-card-text {
	color: var(--warm-gray);
	font-size: .95rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
	flex: 1 1 auto;
}
.mhb-about-card-footer { margin-top: auto; }
.mhb-about-card-footer .mhb-btn { display: inline-flex; }

.mhb-about-story-body p {
	color: var(--charcoal);
	line-height: 1.8;
	margin: 0 0 1.25rem;
}
.mhb-about-story-body p:last-child { margin-bottom: 0; }

.mhb-about-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}

/* SEO-hidden page content (still in DOM for crawlers) */
.mhb-sr-content {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   POLICY / LONG-FORM PAGE CONTENT — calmer heading sizes for body
   content rendered through the page-with-hero (Hero - centered) template.
   Scoped to .mhb-woo content blocks so it doesn't shrink the marketing
   .mhb-h2 headings on the home page or service / shop archives.
   Heading hierarchy stays correct for SEO + a11y; only the visual size shrinks.
   ============================================================ */
.mhb-woo .wp-block-heading,
.mhb-woo h2.wp-block-heading,
.mhb-woo h2:not(.mhb-h2) {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--charcoal);
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 2.25rem 0 .85rem;
}
.mhb-woo h3.wp-block-heading,
.mhb-woo h3:not(.mhb-card-title):not(.mhb-about-group-title) {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--charcoal);
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 1.5rem 0 .5rem;
}
.mhb-woo h4:not([class*="mhb-"]) {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	margin: 1.25rem 0 .35rem;
	color: var(--charcoal);
}
.mhb-woo .wp-block-list,
.mhb-woo > p {
	color: var(--charcoal);
	line-height: 1.75;
}
.mhb-policy-meta {
	color: var(--warm-gray);
	font-size: .85rem;
	margin: 0 0 2rem !important;
}

/* ============================================================
   GUTENBERG BUTTON BLOCKS — match brand square button
   ============================================================ */
.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: .5rem !important;
	padding: .9rem 2rem !important;
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	background: var(--rose) !important;
	background-color: var(--rose) !important;
	color: var(--cream-50) !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease !important;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover {
	background: var(--rose-dark) !important;
	background-color: var(--rose-dark) !important;
	color: var(--cream-50) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-lg) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--charcoal) !important;
	border-color: var(--charcoal) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--charcoal) !important;
	background-color: var(--charcoal) !important;
	color: var(--cream-50) !important;
}

/* Shop loop "Add to basket" button — square to match the brand */
.mhb-shop-main ul.products li.product .button,
.mhb-shop-main ul.products li.product a.button,
body.woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product a.button,
.mhb-home-shop-grid li.product .mhb-btn,
.mhb-home-shop-grid li.product .button,
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button {
	border-radius: 0 !important;
}

/* ============================================================
   ABOUT MARTINA — home section
   ============================================================ */
.mhb-about-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 900px) {
	.mhb-about-layout {
		grid-template-columns: 1fr 1.1fr;
		gap: 4rem;
	}
}
.mhb-about-media {
	border-radius: 1.25rem;
	overflow: hidden;
	background: var(--cream-200);
	aspect-ratio: 4 / 5;
	max-width: 480px;
	width: 100%;
	box-shadow: var(--shadow-lg);
}
.mhb-about-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mhb-about-media-placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(139, 79, 96, .12), transparent 60%),
		linear-gradient(135deg, var(--cream-200), var(--cream-100));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rose);
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-style: italic;
	letter-spacing: .04em;
}
.mhb-about-content .mhb-section-label { display: inline-block; margin-bottom: 1rem; }
.mhb-about-content h2 { margin: 0 0 1.25rem; }
.mhb-about-content p { margin: 0 0 1rem; color: var(--charcoal); line-height: 1.75; }
.mhb-about-content p:last-of-type { margin-bottom: 1.75rem; }
.mhb-about-content strong { color: var(--rose); font-weight: 500; }
.mhb-about-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ============================================================
   HOME SHOP — featured products preview
   ============================================================ */
.mhb-home-shop-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
@media (min-width: 700px) {
	.mhb-home-shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: 1.5rem !important;
		row-gap: 2rem !important;
	}
}
.mhb-home-shop-grid li.product {
	display: flex !important;
	flex-direction: column !important;
	background: var(--cream-100) !important;
	border: 1px solid var(--cream-200) !important;
	border-radius: 1rem !important;
	padding: 1.25rem !important;
	margin: 0 !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	list-style: none !important;
	transition: transform .25s ease, box-shadow .25s ease;
}
.mhb-home-shop-grid li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
.mhb-home-shop-grid li.product > a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	text-decoration: none;
	color: inherit;
	margin: 0 0 .85rem;
}
.mhb-home-shop-grid li.product img {
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: .75rem;
	margin: 0 0 1rem !important;
	display: block;
}
.mhb-home-shop-grid li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--charcoal);
	line-height: 1.3;
	margin: 0 0 .5rem;
	min-height: 3.25rem;
	flex-grow: 1;
}
.mhb-home-shop-grid li.product .price {
	font-family: var(--font-body);
	color: var(--rose);
	font-size: 1rem;
	margin: 0;
}
.mhb-home-shop-grid li.product .mhb-btn {
	margin-top: auto;
	align-self: flex-start;
}
.mhb-home-shop-cta {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* ============================================================
   BUSINESS HOURS — image + list layout
   ============================================================ */
.mhb-hours-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
@media (min-width: 900px) {
	.mhb-hours-layout {
		grid-template-columns: 1fr 1.1fr;
		gap: 4rem;
	}
}
.mhb-hours-media {
	border-radius: 1rem;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	max-height: 560px;
	background: var(--cream-200);
}
.mhb-hours-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.mhb-hours-media-placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--cream-300), var(--rose-light));
}
.mhb-hours-content .mhb-section-label,
.mhb-hours-content .mhb-h2 { text-align: left; }
.mhb-hours-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
}
.mhb-hours-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--cream-200);
	font-family: var(--font-body);
	font-size: .9rem;
	color: var(--warm-gray);
}
.mhb-hours-row:last-child { border-bottom: none; }
.mhb-hours-row.is-today {
	color: var(--charcoal);
	font-weight: 500;
}
.mhb-hours-row.is-closed .mhb-hours-time {
	color: rgba(107,94,88,.6);
	font-style: italic;
}
.mhb-hours-day {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}
.mhb-hours-day-name {
	font-weight: 500;
	color: var(--charcoal);
	min-width: 5rem;
	display: inline-block;
}
.mhb-hours-badge {
	font-size: .62rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	background: rgba(196,149,106,.18);
	color: var(--gold-dark);
	padding: .2rem .55rem;
	border-radius: 999px;
	font-weight: 500;
}
.mhb-hours-badge-today {
	background: var(--rose);
	color: var(--cream-50);
}
.mhb-hours-time {
	color: inherit;
	font-variant-numeric: tabular-nums;
}
.mhb-hours-note {
	margin: 2rem 0 0;
	padding: 1rem 1.25rem;
	background: rgba(139,79,96,.06);
	border: 1px solid rgba(139,79,96,.12);
	border-radius: .75rem;
	color: var(--warm-gray);
	font-size: .85rem;
	line-height: 1.6;
	text-align: center;
}

/* ============================================================
   TESTIMONIAL CAROUSEL
   ============================================================ */
.mhb-testimonial-carousel {
	position: relative;
}
.mhb-testimonial-track {
	position: relative;
	min-height: 240px;
}
.mhb-testimonial-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(20px);
	transition: opacity .4s ease, transform .4s ease;
	pointer-events: none;
}
.mhb-testimonial-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
	position: relative;
}
.mhb-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2rem;
}
.mhb-carousel-btn {
	appearance: none;
	background: #fff;
	border: 1px solid var(--rose);
	color: var(--rose);
	width: 42px; height: 42px;
	padding: 0 !important;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .25s ease;
	box-shadow: 0 1px 4px rgba(139,79,96,.12);
	line-height: 1;
}
.mhb-carousel-btn:hover {
	background: var(--rose);
	color: var(--cream-50);
	transform: translateY(-1px);
}
.mhb-carousel-dots {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.mhb-carousel-dot {
	appearance: none;
	border: none;
	background: var(--cream-300);
	width: 24px;
	height: 3px;
	border-radius: 2px;
	padding: 0;
	cursor: pointer;
	transition: all .25s ease;
}
.mhb-carousel-dot.is-active {
	background: var(--rose);
	width: 32px;
}

/* ============================================================
   FOOTER — newsletter + socials
   ============================================================ */
.mhb-newsletter {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0 0 1.25rem;
}
.mhb-newsletter input[type=email] {
	appearance: none;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	color: var(--cream-50);
	padding: .75rem 1rem;
	font-family: var(--font-body);
	font-size: .85rem;
	border-radius: 8px;
	width: 100%;
	transition: all .25s ease;
}
.mhb-newsletter input[type=email]::placeholder { color: rgba(240,230,220,.85); opacity: 1; }
.mhb-newsletter-msg {
	margin: .85rem 0 0;
	font-family: var(--font-body);
	font-size: .85rem;
	line-height: 1.5;
	color: rgba(240, 230, 220, .9);
}
.mhb-newsletter-msg[data-state="ok"]    { color: #b6e5b4; }
.mhb-newsletter-msg[data-state="error"] { color: #ffb4ad; }
.mhb-newsletter input[type=email]:focus {
	outline: none;
	border-color: var(--gold);
	background: rgba(255,255,255,.12);
}
.mhb-newsletter-btn {
	justify-content: center;
	padding: .75rem 1rem;
	font-size: .7rem;
	width: 100%;
}
.mhb-footer-socials {
	display: flex;
	gap: .5rem;
}
.mhb-footer-socials a {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.08);
	color: rgba(240,230,220,.85);
	transition: all .25s ease;
}
.mhb-footer-socials a:hover {
	background: var(--gold);
	color: var(--cream-50);
}

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

/* ============================================================
   404 PAGE
   ============================================================ */
.mhb-404-section {
	position: relative;
	background: var(--cream);
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding: 8rem 0 6rem;
}
.mhb-404-inner {
	position: relative;
	z-index: 1;
	max-width: 40rem;
}
.mhb-404-heading {
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 300;
	margin: 1rem 0 1.25rem;
	line-height: 1.1;
}
.mhb-404-heading .accent {
	color: var(--rose);
	font-style: italic;
}
.mhb-404-text {
	margin: 0 auto 2rem;
	max-width: 28rem;
}
.mhb-404-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* ============================================================
   FOOTER — logo block + scroll to top
   ============================================================ */
.mhb-footer-logo {
	margin: 0 0 1rem;
	line-height: 0;
}
.mhb-footer-logo .custom-logo,
.mhb-footer-logo img {
	max-width: 120px;
	max-height: 80px;
	height: auto;
	width: auto;
	display: block;
	border-radius: 10px;
	background: #F0E6DC;
	padding: .35rem .55rem;
}
.mhb-footer-logo .custom-logo-link { display: inline-block; line-height: 0; }
.mhb-footer-brand {
	font-family: var(--font-display) !important;
	font-size: 1.5rem;
	color: var(--cream-50);
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 1rem;
}

.mhb-footer-bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	text-align: center;
}
.mhb-footer-bottom-right {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}
.mhb-to-top {
	appearance: none;
	background: transparent;
	border: 1px solid rgba(240,230,220,.3);
	color: rgba(240,230,220,.85);
	width: 36px; height: 36px;
	padding: 0 !important;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .25s ease;
	line-height: 1;
}
.mhb-to-top:hover {
	border-color: var(--gold);
	color: var(--gold);
	transform: translateY(-2px);
}

/* ============================================================
   PORTFOLIO LIGHTBOX
   ============================================================ */
.mhb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(20,10,14,.95);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 5rem;
	opacity: 0;
	transition: opacity .3s ease;
}
.mhb-lightbox[hidden] { display: none; }
.mhb-lightbox.is-open { opacity: 1; }
body.mhb-lightbox-open { overflow: hidden; }

.mhb-lightbox-frame {
	position: relative;
	max-width: min(1100px, 94vw);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5rem;
}
/* Dark stage panel — spans the frame width. Arrows live INSIDE it, flanking
   the media. Rounded corners on the stage itself so the dark panels don't
   look like hard rectangles against the overlay. */
.mhb-lightbox-stage {
	position: relative;
	width: 100%;
	min-height: 60vh;
	max-height: 75vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.35);
	border-radius: .75rem;
	overflow: hidden;
	transition: opacity .25s ease;
}
.mhb-lightbox-stage.is-swapping { opacity: 0; }
.mhb-lightbox-media {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 75vh;
}
.mhb-lightbox-media img,
.mhb-lightbox-media video {
	max-width: 100%;
	max-height: 75vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.mhb-lightbox-info {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	color: var(--cream-50);
	padding: 0 .25rem;
}
.mhb-lightbox-info-left {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	max-width: 70ch;
	flex: 1;
}
.mhb-lightbox-info-right {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}
.mhb-lightbox-cat {
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--gold-light);
}
.mhb-lightbox-cat:empty { display: none; }
.mhb-lightbox-title {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 300;
	font-style: italic;
	color: var(--cream-50);
	margin: 0;
	line-height: 1.2;
}
.mhb-lightbox-title:empty { display: none; }
.mhb-lightbox-desc {
	font-family: var(--font-body);
	font-size: .9rem;
	color: rgba(254,252,250,.8);
	margin: 0;
	line-height: 1.5;
}
.mhb-lightbox-desc:empty { display: none; }
.mhb-lightbox-counter {
	font-family: var(--font-body);
	font-size: .9rem;
	color: rgba(254,252,250,.75);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: .05em;
}
.mhb-lightbox-counter:empty { display: none; }
.mhb-lightbox-dots {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.mhb-lightbox-dot {
	appearance: none;
	border: none !important;
	background: rgba(255,255,255,.28) !important;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	padding: 0 !important;
	cursor: pointer;
	transition: all .25s ease;
	line-height: 1;
	flex-shrink: 0;
}
.mhb-lightbox-dot:hover {
	background: rgba(255,255,255,.55) !important;
}
.mhb-lightbox-dot.is-active {
	background: var(--gold-light) !important;
	width: 26px;
	border-radius: 4px;
}

.mhb-lightbox-close,
.mhb-lightbox-nav {
	appearance: none;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.25);
	color: var(--cream-50) !important;
	width: 46px; height: 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .25s ease;
	padding: 0 !important;
	line-height: 1;
	flex-shrink: 0;
	z-index: 5;
}
.mhb-lightbox-close svg,
.mhb-lightbox-nav svg {
	width: 22px;
	height: 22px;
	display: block;
	color: inherit;
	stroke: currentColor;
	fill: none;
	pointer-events: none;
}
.mhb-lightbox-close:hover,
.mhb-lightbox-nav:hover {
	background: rgba(255,255,255,.2);
	border-color: var(--cream-50);
	transform: scale(1.05);
}
.mhb-lightbox-close {
	position: absolute;
	top: 1rem; right: 1rem;
	background: transparent;
	border: none;
}
/* Arrows are absolutely positioned inside the .mhb-lightbox-stage (which
   is position: relative by default via its rendering). Darker fill since
   they sit ON the dark stage background. */
.mhb-lightbox-prev,
.mhb-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.5) !important;
	border: none !important;
}
.mhb-lightbox-prev { left: 1.25rem; }
.mhb-lightbox-next { right: 1.25rem; }
.mhb-lightbox-prev:hover,
.mhb-lightbox-next:hover {
	transform: translateY(-50%) scale(1.05);
	background: rgba(0,0,0,.7) !important;
}

@media (max-width: 720px) {
	.mhb-lightbox { padding: 4rem .75rem 1rem; align-items: flex-start; }
	.mhb-lightbox-frame { margin-top: 1rem; }
	.mhb-lightbox-close { top: .5rem; right: .5rem; width: 40px; height: 40px; }
	.mhb-lightbox-close svg { width: 18px; height: 18px; }
	.mhb-lightbox-nav { width: 40px; height: 40px; }
	.mhb-lightbox-nav svg { width: 18px; height: 18px; }
	.mhb-lightbox-prev { left: .5rem; }
	.mhb-lightbox-next { right: .5rem; }
	.mhb-lightbox-info { flex-direction: column; align-items: flex-start; gap: .75rem; }
	.mhb-lightbox-info-right { width: 100%; justify-content: space-between; }
	.mhb-lightbox-title { font-size: 1.25rem; }
	.mhb-lightbox-stage { min-height: 50vh; max-height: 65vh; }
	.mhb-lightbox-media,
	.mhb-lightbox-media img,
	.mhb-lightbox-media video { max-height: 65vh; }
}

/* ============================================================
   Bulletproof SVG rendering inside buttons
   (GeneratePress sets default padding:10px 20px on <button>, which with
    border-box squashes the icon to 0. Overridden via padding:0 !important
    on each custom button. Belt-and-braces: force stroke + sizing on every
    svg we own.)
   ============================================================ */
.mhb-carousel-btn svg,
.mhb-to-top svg,
.mhb-lightbox-close svg,
.mhb-lightbox-nav svg,
.mhb-portfolio-item svg {
	display: block !important;
	fill: none !important;
	stroke: currentColor !important;
	pointer-events: none;
	overflow: visible;
}
.mhb-carousel-btn svg { width: 18px !important; height: 18px !important; }
.mhb-to-top svg { width: 16px !important; height: 16px !important; }
.mhb-lightbox-close svg,
.mhb-lightbox-nav svg { width: 22px !important; height: 22px !important; }
.mhb-carousel-btn svg path,
.mhb-to-top svg path,
.mhb-lightbox-close svg path,
.mhb-lightbox-nav svg path {
	stroke: currentColor;
	fill: none;
}
/* Filled-icon overrides — play glyph uses fill not stroke */
.mhb-portfolio-zoom svg[fill="currentColor"],
.mhb-portfolio-zoom svg[fill="currentColor"] path {
	fill: currentColor !important;
	stroke: none !important;
}

/* ============================================================
   UTIL: simple fade-in on scroll
   ============================================================ */
.mhb-fade { opacity: 0; transform: translateY(20px); transition: all .8s ease; }
.mhb-fade.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--gold);
	color: var(--cream-50);
	padding: .5rem 1rem;
}
.skip-link:focus { left: 0; }

/* ============================================================
   SERVICE CATEGORY ARCHIVE
   ============================================================ */
.mhb-cat-hero {
	padding-top: 3rem;
	padding-bottom: 2.5rem;
}
.mhb-breadcrumb {
	margin-bottom: 2rem;
}
.mhb-breadcrumb ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-family: var(--font-body);
	font-size: .75rem;
	letter-spacing: .1em;
	color: var(--warm-gray);
	text-transform: none;
}
.mhb-breadcrumb a {
	color: var(--warm-gray);
}
.mhb-breadcrumb a:hover {
	color: var(--rose);
}
.mhb-breadcrumb li[aria-current="page"] {
	color: var(--charcoal);
}
.mhb-breadcrumb-sep {
	opacity: .5;
}
.mhb-cat-hero .mhb-section-label {
	color: var(--rose);
	display: block;
	margin-bottom: .75rem;
}
.mhb-cat-hero-heading {
	max-width: 48rem;
	margin-bottom: 1.5rem;
}
.mhb-cat-hero-heading .accent {
	color: var(--rose);
	font-style: italic;
}
.mhb-cat-hero-desc {
	max-width: 44rem;
	margin-bottom: 2rem;
}
.mhb-cat-hero-desc p {
	margin: 0 0 1rem;
}
.mhb-cat-hero-desc p:last-child {
	margin-bottom: 0;
}
.mhb-cat-hero-cta .mhb-btn-primary {
	text-transform: uppercase;
	letter-spacing: .15em;
}

/* Service card: clean screenshot layout — applies anywhere the card markup
   appears (category listings, single-service "Also in" related, etc).
   The :not(.has-hover-image) keeps the legacy homepage hover-image variant
   on its own track. */
.mhb-service-card:not(.has-hover-image) {
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: .75rem;
	box-shadow: 0 2px 14px rgba(92, 45, 58, 0.04);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow .3s ease, transform .3s ease;
}
.mhb-service-card:not(.has-hover-image):hover {
	box-shadow: 0 10px 28px rgba(92, 45, 58, 0.10);
	transform: translateY(-2px);
}
.mhb-service-card:not(.has-hover-image)::before,
.mhb-service-card:not(.has-hover-image)::after { display: none; }
.mhb-service-card:not(.has-hover-image) .mhb-card-body {
	position: relative;
	z-index: 1;
	padding: 1.5rem 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}
.mhb-service-card:not(.has-hover-image) .mhb-service-card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0;
}
.mhb-service-card:not(.has-hover-image) h2.mhb-card-title,
.mhb-service-card:not(.has-hover-image) h3.mhb-card-title,
.mhb-service-card:not(.has-hover-image) .mhb-card-title {
	margin: 0 !important;
	font-family: var(--font-display) !important;
	font-size: 1.35rem !important;
	font-weight: 400 !important;
	color: var(--charcoal) !important;
	line-height: 1.2 !important;
}
.mhb-service-card:not(.has-hover-image) .mhb-service-card-price {
	font-family: var(--font-display) !important;
	font-size: 1.35rem !important;
	color: var(--rose) !important;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1.2 !important;
}

/* Category filter row above the services grid */
.mhb-cat-services {
	padding-top: 1.5rem !important;
	padding-bottom: 4rem !important;
}
.mhb-cat-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: flex-start;
	margin-bottom: 2rem;
}
.mhb-cat-filter-row button.mhb-cat-pill {
	cursor: pointer;
	font-family: var(--font-body);
	line-height: 1;
	background: #fff !important;
	color: var(--warm-gray) !important;
	border: 1px solid var(--cream-200) !important;
}
.mhb-cat-filter-row button.mhb-cat-pill:hover,
.mhb-cat-filter-row button.mhb-cat-pill:focus {
	background: #fff !important;
	color: var(--rose) !important;
	border-color: var(--rose) !important;
}
.mhb-cat-filter-row button.mhb-cat-pill.mhb-cat-pill-active,
.mhb-cat-filter-row button.mhb-cat-pill.mhb-cat-pill-active:focus {
	background: var(--rose) !important;
	color: var(--cream-50) !important;
	border-color: var(--rose) !important;
}
.mhb-cat-filter-row button.mhb-cat-pill.mhb-cat-pill-active:hover {
	background: var(--rose-dark) !important;
	color: var(--cream-50) !important;
	border-color: var(--rose-dark) !important;
}
.mhb-service-card.is-hidden {
	display: none !important;
}
.mhb-cat-services .mhb-grid {
	transition: opacity .2s ease, transform .2s ease;
}
.mhb-cat-services .mhb-grid.is-fading {
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
}
.mhb-service-card:not(.has-hover-image) .mhb-card-text {
	color: var(--warm-gray);
	font-size: .875rem;
	line-height: 1.6;
	margin: 0;
	flex: 1;
}
.mhb-service-card:not(.has-hover-image) .mhb-card-footer {
	display: flex;
	gap: .5rem;
	margin-top: .25rem;
}
.mhb-service-card:not(.has-hover-image) .mhb-card-footer .mhb-btn-outline,
.mhb-service-card:not(.has-hover-image) .mhb-card-footer .mhb-btn-primary {
	flex: 1;
	justify-content: center;
	padding: .75rem .5rem;
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Explore More Treatments footer */
.mhb-bg-cream-200 {
	background: var(--cream-200);
}
.mhb-cat-explore {
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.mhb-cat-explore-label {
	display: block;
	margin-bottom: 1.25rem;
	color: var(--rose);
}
.mhb-cat-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

@media (max-width: 768px) {
	.mhb-cat-hero {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.mhb-service-card:not(.has-hover-image) .mhb-service-card-head {
		flex-wrap: wrap;
	}
}

/* ============================================================
   SINGLE SERVICE PAGE
   ============================================================ */
.mhb-single-service-hero {
	padding-bottom: 3rem;
}
.mhb-single-service-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 2rem;
	max-width: 48rem;
	margin-bottom: 1.5rem;
}
.mhb-single-service-head .mhb-cat-hero-heading {
	margin-bottom: 0;
}
.mhb-single-service-price {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--rose);
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1.1;
}
.mhb-single-service-image {
	padding-top: 0;
	padding-bottom: 3rem;
}
.mhb-single-service-thumb {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: .75rem;
}
.mhb-single-service-content {
	padding-top: 1rem;
	padding-bottom: 4rem;
}
.mhb-single-service-related {
	padding-top: 2rem !important;
	padding-bottom: 4rem !important;
}
.mhb-single-service-related-label {
	color: var(--rose);
	margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
	.mhb-single-service-head {
		flex-direction: column;
		gap: .5rem;
	}
	.mhb-single-service-price {
		font-size: 1.5rem;
	}
}

/* ============================================================
   SINGLE SERVICE PAGE (React-parity layout)
   ============================================================ */
.mhb-ss-hero {
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}
.mhb-ss-h1 {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.1;
	margin: 0 0 1rem;
	max-width: 52rem;
}
.mhb-ss-h1 .accent { color: var(--rose); font-style: italic; }
.mhb-ss-price {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 300;
	color: var(--rose);
	line-height: 1.1;
	margin-bottom: 1.25rem;
}
.mhb-ss-tagline {
	font-family: var(--font-body);
	font-style: italic;
	color: var(--warm-gray);
	font-weight: 300;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	max-width: 42rem;
	margin: 0 0 2rem;
}
.mhb-ss-cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.mhb-ss-cta-outline {
	padding: .65rem 1.5rem;
	font-size: .7rem;
}

.mhb-ss-section {
	padding: 3rem 0;
}
@media (min-width: 640px) {
	.mhb-ss-section { padding: 4rem 0; }
}

.mhb-container-narrow { max-width: 48rem !important; }

.mhb-ss-h2 {
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 3.5vw, 2.5rem);
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.15;
	margin: 0 0 1.5rem;
}
.mhb-ss-h2 .accent { color: var(--rose); font-style: italic; }
.mhb-ss-h2-center { text-align: center; margin-bottom: 2.5rem; }
.mhb-ss-h2-small {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	font-weight: 300;
	color: var(--charcoal);
	margin: 0 0 2rem;
}
.mhb-ss-h2-small .accent { color: var(--rose); font-style: italic; }

.mhb-ss-prose {
	color: var(--warm-gray);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.75;
	font-family: var(--font-body);
}
@media (min-width: 640px) {
	.mhb-ss-prose { font-size: 1.05rem; }
}
.mhb-ss-prose p { margin: 0 0 1.25rem; }
.mhb-ss-prose p:last-child { margin: 0; }

/* Benefits */
.mhb-ss-benefit {
	background: var(--cream);
	border-radius: 1rem;
	padding: 1.5rem;
	height: 100%;
}
.mhb-ss-benefit-icon {
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: rgba(139, 79, 96, 0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rose);
	margin-bottom: 1rem;
}
.mhb-ss-benefit-icon svg { width: 1rem; height: 1rem; }
.mhb-ss-benefit-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 300;
	color: var(--charcoal);
	margin: 0 0 .5rem;
}
.mhb-ss-benefit-desc {
	color: var(--warm-gray);
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
	font-family: var(--font-body);
}

/* What to Expect */
.mhb-ss-expect { display: flex; flex-direction: column; gap: 1.5rem; }
.mhb-ss-step { display: flex; gap: 1.25rem; align-items: flex-start; }
.mhb-ss-step-num {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: rgba(139, 79, 96, 0.1);
	color: var(--rose);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mhb-ss-step-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--charcoal);
	margin: 0 0 .5rem;
}
.mhb-ss-step-desc {
	color: var(--warm-gray);
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
	font-family: var(--font-body);
}

/* FAQ — native <details> accordion. The `name="mhb-service-faq"` attribute
   on each <details> makes modern browsers (Chrome 120+, Safari 17.4+,
   Firefox 134+) auto-close any other open one. JS in main.js polyfills the
   exclusive behaviour for older browsers. */
.mhb-ss-faq { display: flex; flex-direction: column; gap: 0; }
.mhb-ss-faq-item {
	border-bottom: 1px solid var(--cream-200);
	padding: 0;
	margin: 0;
}
.mhb-ss-faq-item[open] { background: transparent; }

/* The <summary> = clickable header */
.mhb-ss-faq-q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.4rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--charcoal);
	margin: 0;
	transition: color .2s ease;
	user-select: none;
}
.mhb-ss-faq-q::-webkit-details-marker,
.mhb-ss-faq-q::marker { display: none; content: ""; }
.mhb-ss-faq-q:hover { color: var(--rose); }
.mhb-ss-faq-q:focus-visible {
	outline: 2px solid var(--rose);
	outline-offset: 4px;
	border-radius: 4px;
}
.mhb-ss-faq-q-text { flex: 1 1 auto; line-height: 1.4; }

/* +/− icon (pure CSS, animates on open) */
.mhb-ss-faq-icon {
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	margin-top: .35rem;
}
.mhb-ss-faq-icon::before,
.mhb-ss-faq-icon::after {
	content: "";
	position: absolute;
	background: var(--rose);
	border-radius: 1px;
	transition: transform .25s ease, opacity .25s ease;
}
.mhb-ss-faq-icon::before {
	top: 50%; left: 0; right: 0;
	height: 1.5px;
	transform: translateY(-50%);
}
.mhb-ss-faq-icon::after {
	top: 0; bottom: 0; left: 50%;
	width: 1.5px;
	transform: translateX(-50%);
}
.mhb-ss-faq-item[open]:not(.is-closing) .mhb-ss-faq-icon::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

.mhb-ss-faq-a {
	color: var(--warm-gray);
	font-size: .9rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0;
	padding: 0 0 1.5rem;
	white-space: pre-line;
	font-family: var(--font-body);
}

/* Related */
.mhb-ss-related-card {
	display: block;
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 1rem;
	padding: 1.25rem;
	transition: transform .3s, box-shadow .3s;
	text-decoration: none;
}
.mhb-ss-related-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(92, 45, 58, 0.08);
}
.mhb-ss-related-head {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
	align-items: flex-start;
	margin-bottom: .5rem;
}
.mhb-ss-related-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 300;
	color: var(--charcoal);
	margin: 0;
}
.mhb-ss-related-price {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 300;
	color: var(--rose);
	flex-shrink: 0;
}
.mhb-ss-related-desc {
	color: var(--warm-gray);
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
	font-family: var(--font-body);
}

/* ============================================================
   BENEFITS — tab interface
   ============================================================ */
.mhb-benefit-tabs { max-width: 52rem; margin: 0 auto; }
.mhb-benefit-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	margin-bottom: 2rem;
}
.mhb-benefit-tab {
	font-family: var(--font-body);
	font-size: .7rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--warm-gray);
	background: #fff !important;
	border: 1px solid var(--cream-200) !important;
	border-radius: 999px;
	padding: .65rem 1.25rem;
	cursor: pointer;
	transition: all .25s ease;
	line-height: 1;
}
.mhb-benefit-tab:hover,
.mhb-benefit-tab:focus {
	color: var(--rose) !important;
	border-color: var(--rose) !important;
	background: #fff !important;
}
.mhb-benefit-tab.is-active,
.mhb-benefit-tab.is-active:hover {
	background: var(--rose) !important;
	color: var(--cream-50) !important;
	border-color: var(--rose) !important;
}
.mhb-benefit-panels { position: relative; }
.mhb-benefit-panel {
	background: var(--cream);
	border-radius: 1rem;
	padding: 2rem 1.75rem;
	text-align: center;
	opacity: 0;
	transition: opacity .25s ease;
}
.mhb-benefit-panel.is-active {
	opacity: 1;
}
.mhb-benefit-panel[hidden] { display: none; }
.mhb-benefit-panel .mhb-ss-benefit-icon { margin: 0 auto 1rem; }
.mhb-benefit-panel-title {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 300;
	color: var(--charcoal);
	margin: 0 0 .75rem;
}
.mhb-benefit-panel-desc {
	color: var(--warm-gray);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 38rem;
	font-family: var(--font-body);
}

/* Benefits grid: center when fewer than 3 items */
.mhb-ss-benefits.is-compact {
	justify-content: center;
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   NAV — Woo icons (cart + account)
   ============================================================ */
.mhb-nav-woo {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.mhb-nav-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--charcoal);
	border-radius: 50%;
	transition: background .2s ease, color .2s ease;
	text-decoration: none;
}
.mhb-nav-icon:hover { background: var(--cream-200); color: var(--rose); }
.mhb-nav-icon svg { display: block; }
.mhb-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--rose);
	color: #fff;
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.mhb-cart-count.is-empty { display: none; }
@media (max-width: 900px) {
	.mhb-nav-woo { margin-right: 0; }
	/* account icon stays visible on mobile, sitting next to cart */
}

/* ============================================================
   PAGE HERO — reusable cream band, breadcrumb + heading.
   Used by the "Page with Hero" template and Woo wrapper.
   ============================================================ */
/* When a hero is the first thing in <main>, drop main's navbar-offset padding
   and let the hero own the entire visible cream area below the (fixed) navbar.
   The hero then carries that offset as its own padding-top so the navbar still
   doesn't overlap the title. */
.mhb-page-offset:has(> .mhb-page-hero:first-child) { padding-top: 0; }

.mhb-page-hero {
	padding-top: calc(130px + 1rem);
	padding-bottom: 1.5rem;
}
@media (min-width: 1024px) {
	.mhb-page-hero {
		padding-top: calc(150px + 1.25rem);
		padding-bottom: 1.75rem;
	}
}
.mhb-page-hero > .mhb-container { width: 100%; }
.mhb-page-hero .mhb-breadcrumb { margin-bottom: .75rem; }
.mhb-page-hero.is-align-center { text-align: center; }
.mhb-page-hero.is-align-center .mhb-breadcrumb ol { justify-content: center; }
.mhb-page-hero-heading {
	margin: 0;
	max-width: 48rem;
}
.mhb-page-hero.is-align-center .mhb-page-hero-heading {
	margin-left: auto;
	margin-right: auto;
}

/* Tighter content section that immediately follows a hero — kills the
   stacked .mhb-section padding gap between the cream band and the white
   content (and trims the bottom-of-page gap before the footer). */
.mhb-page-hero + .mhb-section {
	padding-top: 1.75rem;
	padding-bottom: 2rem;
}
@media (min-width: 1024px) {
	.mhb-page-hero + .mhb-section {
		padding-top: 2rem;
		padding-bottom: 2.5rem;
	}
}

/* Single-product pages: no hero, so the navbar offset is the only gap above
   the breadcrumb. Tighten the section padding so the breadcrumb sits close
   to the navbar without the stacked 4rem section padding. */
body.single-product .mhb-section.mhb-bg-white {
	padding-top: 1rem;
	padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
	body.single-product .mhb-section.mhb-bg-white {
		padding-top: 1.25rem;
	}
}
.mhb-breadcrumb-inline { margin: 0 0 1.25rem; }

/* Without a page hero on product pages, the .mhb-page-offset (130-150px)
   padding above content shows the body's cream background as a strip
   directly under the navbar. Give the offset area a white background on
   product pages so it visually merges with the white content section below. */
body.single-product #mhb-main,
body.single-product main.mhb-page-offset { background: #fff !important; }

/* GeneratePress wraps Woo's content in .content-area > .site-main >
   article.inside-article > .entry-content. On product pages this stacks
   extra backgrounds and width constraints inside our own wrapper, causing
   the "leftover hero" tint and the right-shifted related products grid.
   Neutralise all of those nested wrappers so our layout owns the page. */
body.single-product .content-area,
body.single-product .site-main,
body.single-product .inside-article,
body.single-product .entry-content,
body.single-product article.product,
body.single-product article.post-110.product,
body.single-product article.type-product,
body.single-product div#product-110,
body.single-product div.product {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	float: none !important;
}
/* GP also adds top/bottom padding to .inside-article. Kill it. */
body.single-product .separate-containers .inside-article { padding: 0 !important; }
/* And the "below content" GP wrappers can hold leftover bg */
body.single-product .site-content,
body.single-product .site-content > div { background: transparent !important; }

/* GP injects the post's featured image as a banner-sized div at the top of
   single articles (.featured-image.page-header-image-single). On product pages
   that duplicates the gallery image and reads as a leftover hero. Hide it
   defensively in case the PHP filter doesn't catch every GP code path. */
body.single-product .featured-image,
body.single-product .page-header-image,
body.single-product .page-header-image-single,
body.single-product .featured-image.page-header-image-single { display: none !important; }

/* Related products container should be flush-left, full-width, and visually
   separated from the product summary above. */
body.single-product .related.products,
body.single-product .upsells.products {
	margin-top: 3rem !important;
	padding-top: 2rem !important;
	border-top: 1px solid var(--cream-200);
}
body.single-product .related.products > h2,
body.single-product .upsells.products > h2 {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 1.25rem !important;
}

/* ============================================================
   WOOCOMMERCE — theme-wrapper container + base typography
   ============================================================ */
.mhb-woo { padding-top: 0; padding-bottom: 0; } /* outer .mhb-section already provides vertical rhythm */
.mhb-woo .page-title,
.mhb-woo .woocommerce-products-header__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 1.25rem;
}
.mhb-woo .woocommerce-result-count,
.mhb-woo .woocommerce-breadcrumb {
	font-family: var(--font-body);
	color: var(--warm-gray);
	font-size: .9rem;
}
.mhb-woo .woocommerce-breadcrumb a { color: var(--rose); text-decoration: none; }
.mhb-woo .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* Product grid cards — fixed 4-column grid, items always fill from the left.
   Selectors include body.woocommerce-page prefix for max specificity since
   Woo's CSS targets that scope and was overriding earlier attempts. */
body.woocommerce ul.products,
body.woocommerce-page ul.products,
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products,
.mhb-woo ul.products,
.related.products ul.products,
.upsells.products ul.products,
ul.products.columns-4 {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	grid-auto-flow: row !important;
	grid-auto-columns: minmax(0, 1fr) !important;
	gap: 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	direction: ltr !important;
	justify-content: start !important;
	justify-items: stretch !important;
	align-items: start !important;
	text-align: left !important;
}
@media (max-width: 900px) {
	body.woocommerce ul.products,
	body.woocommerce-page ul.products,
	body.single-product .related.products ul.products,
	.mhb-woo ul.products,
	.related.products ul.products,
	.upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 480px) {
	body.woocommerce ul.products,
	body.woocommerce-page ul.products,
	.mhb-woo ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}
	body.woocommerce ul.products li.product,
	body.woocommerce-page ul.products li.product,
	.mhb-woo ul.products li.product {
		padding: 0.875rem !important;
	}
}
body.woocommerce ul.products li.product,
body.single-product ul.products li.product,
.mhb-woo ul.products li.product,
.related.products ul.products li.product,
.upsells.products ul.products li.product,
ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 1.25rem !important;
	grid-column-start: auto !important;
	grid-column-end: auto !important;
	grid-row: auto !important;
	justify-self: stretch !important;
	align-self: start !important;
}
/* ============================================================
   SHOP ARCHIVE — left sidebar (25%) + 3-column product grid (75%)
   ============================================================ */
.mhb-shop-grid {
	display: grid !important;
	grid-template-columns: 1fr 3fr !important;
	column-gap: 32px !important;
	row-gap: 32px !important;
	align-items: start !important;
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 768px) {
	.mhb-shop-grid {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}
}
.mhb-shop-sidebar {
	min-width: 0;
}
.mhb-shop-sidebar-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 1rem;
}
.mhb-shop-cat-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.mhb-shop-cat-list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--cream-200);
	list-style: none;
}
.mhb-shop-cat-list li a {
	display: block;
	padding: .65rem 0;
	color: var(--charcoal);
	text-decoration: none;
	font-family: var(--font-body);
	font-size: .95rem;
	transition: color .2s ease;
}
.mhb-shop-cat-list li a:hover { color: var(--rose); }
.mhb-shop-cat-list li.current-cat > a,
.mhb-shop-cat-list li.current-cat-parent > a {
	color: var(--rose);
	font-weight: 500;
}
.mhb-shop-filter-title {
	margin-top: 1.75rem;
}
.mhb-shop-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0;
}
.mhb-shop-filter-option {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-body);
	font-size: .95rem;
	color: var(--charcoal);
	cursor: pointer;
	width: 100%;
}
.mhb-shop-filter-option input[type="checkbox"] {
	margin: 0;
	accent-color: var(--rose);
}
.mhb-shop-filter-apply {
	font-family: var(--font-body);
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .5rem 1rem;
	background: var(--charcoal);
	color: #fff;
	border: 0;
	cursor: pointer;
	transition: background .2s ease;
}
.mhb-shop-filter-apply:hover {
	background: var(--rose);
}
.mhb-shop-filter-clear {
	font-family: var(--font-body);
	font-size: .85rem;
	color: var(--charcoal);
	text-decoration: underline;
}
.mhb-shop-filter-clear:hover { color: var(--rose); }
.mhb-shop-main { min-width: 0; }

/* --- Booking page: two-column layout with help sidebar on the right --- */
.mhb-booking-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 2rem;
	align-items: start;
}
@media (max-width: 900px) {
	.mhb-booking-grid { grid-template-columns: 1fr; }
}
.mhb-booking-main { min-width: 0; }
.mhb-booking-sidebar {
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 8px;
	padding: 1.5rem 1.5rem 1.75rem;
	min-width: 0;
}
.mhb-booking-sidebar-title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 .75rem;
}
.mhb-booking-sidebar-intro {
	margin: 0 0 1.25rem;
	font-size: .95rem;
	line-height: 1.55;
	color: #5a5a5a;
}
.mhb-booking-sidebar-button {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	padding: .75rem 1.25rem;
	background: var(--rose);
	color: #fff !important;
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: .03em;
	transition: background .2s ease;
}
.mhb-booking-sidebar-button:hover { background: var(--rose-dark); }
.mhb-booking-sidebar-divider {
	border: 0;
	border-top: 1px solid var(--cream-200);
	margin: 1.75rem 0 1.25rem;
}
.mhb-booking-sidebar-subtitle {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 .65rem;
}
.mhb-booking-sidebar-text {
	margin: 0 0 1rem;
	font-size: .9rem;
	line-height: 1.55;
	color: #5a5a5a;
}
.mhb-booking-sidebar-link {
	color: var(--rose);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color .2s ease;
}
.mhb-booking-sidebar-link:hover { color: var(--rose-dark); }
.mhb-booking-notice {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	background: var(--cream-200);
	border-left: 3px solid var(--gold);
	border-radius: 0 4px 4px 0;
	padding: .75rem 1rem;
	margin-bottom: 1.75rem;
	font-size: .8rem;
	color: var(--warm-gray);
	line-height: 1.6;
}
.mhb-booking-notice p { margin: 0; }
.mhb-booking-notice svg { flex-shrink: 0; margin-top: 2px; color: var(--gold-dark); opacity: .75; }
.mhb-booking-notice a { color: var(--warm-gray); text-decoration: underline; text-underline-offset: 2px; }
.mhb-booking-notice a:hover { color: var(--rose); text-decoration: none; }

/* Strict 3-column grid — high specificity via .site-main + .mhb-shop-main
   ancestors, scoped to the shop archive (NOT related products on single
   product pages, which keep their own grid rule below). Also targets
   .columns-3 / .columns-4 in case Woo's body class lags behind. */
.site-main .mhb-shop-main ul.products,
body.post-type-archive-product .site-main ul.products,
body.tax-product_cat .site-main ul.products,
body.tax-product_tag .site-main ul.products,
body.post-type-archive-product .mhb-shop-main ul.products,
body.tax-product_cat .mhb-shop-main ul.products,
body.tax-product_tag .mhb-shop-main ul.products,
.mhb-shop-main ul.products,
.mhb-shop-main ul.products.columns-3,
.mhb-shop-main ul.products.columns-4 {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-flow: row !important;
	column-gap: 20px !important;
	row-gap: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	justify-content: flex-start !important;
	justify-items: stretch !important;
	align-items: start !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}
@media (max-width: 1024px) {
	.site-main .mhb-shop-main ul.products,
	.mhb-shop-main ul.products,
	.mhb-shop-main ul.products.columns-3,
	.mhb-shop-main ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 480px) {
	.site-main .mhb-shop-main ul.products,
	.mhb-shop-main ul.products,
	.mhb-shop-main ul.products.columns-3,
	.mhb-shop-main ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 12px !important;
	}
}
.site-main .mhb-shop-main ul.products li.product,
.mhb-shop-main ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
	clear: none !important;
	box-sizing: border-box !important;
	justify-self: stretch !important;
	align-self: stretch !important;
	grid-column-start: auto !important;
	grid-column-end: auto !important;
	flex: none !important;
}

/* Force the first item of every Woo "row" to start flush left. Woo adds the
   .first class to items 1/4/7/... in 3-column mode, intended to clear floats —
   in our grid context that legacy class shouldn't push the item right, but
   make it explicit. */
.site-main .mhb-shop-main ul.products li.product.first,
.mhb-shop-main ul.products li.product.first,
.related.products ul.products li.product.first,
.upsells.products ul.products li.product.first {
	clear: none !important;
	float: none !important;
	margin-left: 0 !important;
	grid-column-start: auto !important;
}

/* Result-count + ordering row above the loop. Woo defaults to floats here,
   which can leak past ul.products and offset the first card to the right.
   Use a flex row instead, then clear:both on ul.products as a safety net. */
.mhb-shop-main { display: block !important; }
.mhb-shop-main .woocommerce-result-count,
.mhb-shop-main .woocommerce-ordering {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mhb-shop-main .woocommerce-result-count { float: left !important; margin-bottom: 1.25rem !important; }
.mhb-shop-main .woocommerce-ordering { float: right !important; margin-bottom: 1.25rem !important; }
.mhb-shop-main ul.products { clear: both !important; }

/* Woo's ul.products::before / ::after are clearfix pseudo-elements with
   display:table for the legacy float layout. Inside a grid container they
   become grid items themselves and consume the first column — pushing the
   actual first product into column 2. Suppress them. */
.site-main .mhb-shop-main ul.products::before,
.site-main .mhb-shop-main ul.products::after,
.mhb-shop-main ul.products::before,
.mhb-shop-main ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
.related.products ul.products::before,
.related.products ul.products::after,
.upsells.products ul.products::before,
.upsells.products ul.products::after {
	content: none !important;
	display: none !important;
}

/* Flexbox fallback: if grid is unsupported or overridden, the same
   layout works with flex-wrap. */
@supports not (display: grid) {
	.site-main .mhb-shop-main ul.products,
	.mhb-shop-main ul.products {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		gap: 20px !important;
	}
	.site-main .mhb-shop-main ul.products li.product,
	.mhb-shop-main ul.products li.product {
		flex: 0 0 calc((100% - 40px) / 3) !important;
		max-width: calc((100% - 40px) / 3) !important;
		margin-left: 0 !important;
	}
}

/* ============================================================
   PRODUCT CARDS — equal-height flex columns with sticky bottom button.
   Applies to BOTH the shop loop and related/upsells loops on single-product pages.
   ============================================================ */
.site-main .mhb-shop-main ul.products li.product,
.mhb-shop-main ul.products li.product,
.mhb-woo .related.products ul.products li.product,
.mhb-woo .upsells.products ul.products li.product,
.related.products ul.products li.product,
.upsells.products ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	background: #fff !important;
	border: 1px solid var(--cream-200) !important;
	border-radius: 1rem !important;
	padding: 1.25rem !important;
	box-sizing: border-box !important;
	transition: transform .25s ease, box-shadow .25s ease;
}
.site-main .mhb-shop-main ul.products li.product:hover,
.mhb-shop-main ul.products li.product:hover,
.related.products ul.products li.product:hover,
.upsells.products ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

/* The product link wraps image + title + price. Make it a flex column too
   so the title can grow inside it and push the price to its base. */
.site-main .mhb-shop-main ul.products li.product > a.woocommerce-LoopProduct-link,
.mhb-shop-main ul.products li.product > a.woocommerce-LoopProduct-link,
.related.products ul.products li.product > a.woocommerce-LoopProduct-link,
.upsells.products ul.products li.product > a.woocommerce-LoopProduct-link,
.site-main .mhb-shop-main ul.products li.product > a:first-child,
.mhb-shop-main ul.products li.product > a:first-child,
.related.products ul.products li.product > a:first-child,
.upsells.products ul.products li.product > a:first-child {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	text-decoration: none !important;
	color: inherit !important;
	margin: 0 0 .85rem !important;
}

/* Image — uniform 1:1 aspect ratio, object-fit:cover prevents stretching */
.site-main .mhb-shop-main ul.products li.product img,
.mhb-shop-main ul.products li.product img,
.related.products ul.products li.product img,
.upsells.products ul.products li.product img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: .75rem !important;
	margin: 0 0 1rem !important;
	display: block !important;
	flex: 0 0 auto !important;
}

/* Title — fixed min-height + flex-grow so titles of different lengths
   all take the same vertical space, and price/button align across cards. */
.site-main .mhb-shop-main ul.products li.product .woocommerce-loop-product__title,
.mhb-shop-main ul.products li.product .woocommerce-loop-product__title,
.related.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display) !important;
	font-size: 1.3rem !important;
	font-weight: 500 !important;
	color: var(--charcoal) !important;
	line-height: 1.3 !important;
	margin: 0 0 .5rem !important;
	padding: 0 !important;
	min-height: 3.25rem !important;
	flex-grow: 1 !important;
	display: block !important;
}

/* Price — sits flush below the title, before the button slot */
.site-main .mhb-shop-main ul.products li.product .price,
.mhb-shop-main ul.products li.product .price,
.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price {
	font-family: var(--font-body) !important;
	color: var(--rose) !important;
	font-size: 1rem !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

/* Button — sibling of the link inside li.product. margin-top:auto pushes it
   to the bottom of the flex column regardless of title/image height variance. */
.site-main .mhb-shop-main ul.products li.product .button,
.site-main .mhb-shop-main ul.products li.product a.button,
.mhb-shop-main ul.products li.product .button,
.mhb-shop-main ul.products li.product a.button,
.related.products ul.products li.product .button,
.related.products ul.products li.product a.button,
.upsells.products ul.products li.product .button,
.upsells.products ul.products li.product a.button {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	align-self: flex-start !important;
	flex: 0 0 auto !important;
}
.mhb-shop-main .woocommerce-result-count,
.mhb-shop-main .woocommerce-ordering {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Ensure related/upsells SECTION itself spans full width left-aligned */
.mhb-woo .related.products,
.mhb-woo .upsells.products,
body.single-product .related.products,
body.single-product .upsells.products {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
	clear: both;
	text-align: left !important;
}

/* Force the related-products UL to be a left-aligned flex/grid container,
   and the cards to start at the section's left edge (matching the H2). */
.mhb-woo .related.products > ul.products,
.mhb-woo .upsells.products > ul.products,
body.single-product .related.products > ul.products,
body.single-product .upsells.products > ul.products,
.related.products ul.products,
.upsells.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	justify-content: flex-start !important;
	justify-items: stretch !important;
	align-items: start !important;
	text-align: left !important;
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 900px) {
	.mhb-woo .related.products > ul.products,
	.mhb-woo .upsells.products > ul.products,
	body.single-product .related.products > ul.products,
	body.single-product .upsells.products > ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
.mhb-woo .related.products > ul.products > li.product,
.mhb-woo .upsells.products > ul.products > li.product,
body.single-product .related.products > ul.products > li.product,
body.single-product .upsells.products > ul.products > li.product,
.related.products ul.products li.product,
.upsells.products ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
	clear: none !important;
	justify-self: stretch !important;
	align-self: start !important;
	grid-column-start: auto !important;
	grid-column-end: auto !important;
	box-sizing: border-box;
}
.mhb-woo .related.products > ul.products > li.product:first-child,
.mhb-woo .upsells.products > ul.products > li.product:first-child,
body.single-product .related.products > ul.products > li.product:first-child,
body.single-product .upsells.products > ul.products > li.product:first-child,
.related.products ul.products li.product:first-child,
.related.products ul.products li.product.first,
.upsells.products ul.products li.product:first-child {
	margin-left: 0 !important;
	grid-column-start: 1 !important;
}
.mhb-woo ul.products li.product {
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: 1rem;
	padding: 1.25rem !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	text-align: left;
	transition: transform .25s ease, box-shadow .25s ease;
	box-sizing: border-box;
}
.mhb-woo ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
.mhb-woo ul.products li.product a { text-decoration: none; }
.mhb-woo ul.products li.product img {
	border-radius: .75rem;
	margin-bottom: 1rem;
	width: 100%;
	height: auto;
}
.mhb-woo ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display) !important;
	font-size: 1.3rem !important;
	font-weight: 500 !important;
	color: var(--charcoal) !important;
	padding: 0 !important;
	margin-bottom: .4rem !important;
}
.mhb-woo ul.products li.product .price {
	font-family: var(--font-body);
	color: var(--rose);
	font-size: 1rem;
	font-weight: 500;
}

/* Buttons — inherit site button style */
.mhb-woo .button,
.mhb-woo button.button,
.mhb-woo input.button,
.mhb-woo a.button,
.woocommerce-page .button,
.woocommerce-page button.button {
	background: var(--rose) !important;
	color: #fff !important;
	border-radius: 999px !important;
	border: none !important;
	padding: .7rem 1.4rem !important;
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	font-size: .9rem !important;
	letter-spacing: .02em !important;
	text-transform: none !important;
	transition: background .2s ease, transform .2s ease !important;
	cursor: pointer;
}
.mhb-woo .button:hover,
.mhb-woo button.button:hover,
.mhb-woo a.button:hover,
.woocommerce-page .button:hover {
	background: var(--rose-dark) !important;
	transform: translateY(-1px);
}
.mhb-woo .added_to_cart {
	display: inline-block;
	margin-left: .5rem;
	color: var(--rose);
	font-size: .85rem;
}
/* After first successful add: disable re-clicking and suppress the WC icon-font ✓. */
.button.mhb-added,
.mhb-woo a.button.mhb-added {
	pointer-events: none !important;
	opacity: .7 !important;
	cursor: default !important;
}
.button.mhb-added::after { display: none !important; }

/* Single product layout */
.mhb-woo div.product .product_title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 500;
	color: var(--charcoal);
	margin-bottom: .75rem;
}
.mhb-woo div.product .price {
	font-family: var(--font-body);
	color: var(--rose);
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 1.25rem;
}
.mhb-woo div.product .woocommerce-product-details__short-description {
	font-family: var(--font-body);
	color: var(--warm-gray);
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

/* Cart + checkout tables */
.mhb-woo table.shop_table {
	border: 1px solid var(--cream-200);
	border-radius: .75rem;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.mhb-woo table.shop_table th {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--charcoal);
	background: var(--cream-100);
	padding: .9rem 1rem !important;
}
.mhb-woo table.shop_table td {
	padding: 1rem !important;
	vertical-align: middle;
	border-top: 1px solid var(--cream-200);
}

/* Form fields */
.mhb-woo input[type="text"],
.mhb-woo input[type="email"],
.mhb-woo input[type="tel"],
.mhb-woo input[type="password"],
.mhb-woo input[type="number"],
.mhb-woo textarea,
.mhb-woo select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page textarea,
.woocommerce-page select {
	border: 1px solid var(--cream-300);
	border-radius: .5rem;
	padding: .6rem .75rem;
	font-family: var(--font-body);
	background: #fff;
}

/* My Account nav */
.mhb-woo .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}
.mhb-woo .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--cream-200);
}
.mhb-woo .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .75rem 0;
	color: var(--charcoal);
	text-decoration: none;
	font-family: var(--font-body);
	transition: color .2s ease;
}
.mhb-woo .woocommerce-MyAccount-navigation li.is-active a,
.mhb-woo .woocommerce-MyAccount-navigation li a:hover {
	color: var(--rose);
}

/* Notices */
.mhb-woo .woocommerce-message,
.mhb-woo .woocommerce-info,
.mhb-woo .woocommerce-error {
	border-radius: .5rem !important;
	border-top-color: var(--rose) !important;
	background: var(--cream-100) !important;
	font-family: var(--font-body);
}

/* ============================================================
   PRODUCT PAGE — gallery, meta, tabs, reviews
   ============================================================ */

/* Single-product gallery: lock aspect ratio so all images are the same height,
   regardless of source dimensions. */
.mhb-woo .woocommerce-product-gallery { position: relative; }

/* Product page layout: let Woo's default float-based 2-column layout do its
   job. Our parent resets killed widths and floats — restore them only on
   the .images and .summary children where they're needed. */
body.single-product div.product,
body.single-product div#product-110 {
	display: block !important;
	width: 100% !important;
}
body.single-product div.product::after {
	content: "";
	display: table;
	clear: both;
}
body.single-product div.product > .woocommerce-product-gallery,
body.single-product div.product > div.images {
	float: left !important;
	width: 48% !important;
	max-width: 48% !important;
	margin: 0 !important;
}
body.single-product div.product > .summary,
body.single-product div.product > div.summary {
	float: right !important;
	width: 48% !important;
	max-width: 48% !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
@media (max-width: 768px) {
	body.single-product div.product > .woocommerce-product-gallery,
	body.single-product div.product > div.images,
	body.single-product div.product > .summary,
	body.single-product div.product > div.summary {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 1.5rem !important;
	}
}
body.single-product div.product > .woocommerce-tabs,
body.single-product div.product > .related,
body.single-product div.product > .upsells {
	clear: both !important;
	width: 100% !important;
	float: none !important;
	margin-top: 3rem !important;
}

/* FORCE-VISIBLE: defeat the Flexslider opacity:0 pattern. */
.mhb-woo .woocommerce-product-gallery,
.woocommerce-product-gallery {
	opacity: 1 !important;
	visibility: visible !important;
}
.mhb-woo .woocommerce-product-gallery .woocommerce-product-gallery__image {
	border-radius: .75rem;
	overflow: hidden;
	background: var(--cream-100);
}
.mhb-woo .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.mhb-woo .woocommerce-product-gallery .flex-active-slide img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	display: block;
	transition: opacity .4s ease;
}
.mhb-woo .woocommerce-product-gallery .flex-viewport { border-radius: .75rem; overflow: hidden; }

/* Main image: hide directionNav arrows entirely (we navigate via thumbnails). */
.mhb-woo .woocommerce-product-gallery .flex-direction-nav,
.woocommerce-product-gallery .flex-direction-nav { display: none !important; }

/* Horizontal thumbnail slider — wraps Flexslider's auto-generated
   .flex-control-thumbs. Strip itself is a horizontal flex/scroll container;
   prev/next arrows sit on either side and scroll the strip. */
.mhb-woo .woocommerce-product-gallery .mhb-thumb-slider,
.woocommerce-product-gallery .mhb-thumb-slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .75rem 0 0;
	width: 100%;
}
/* FORCE-RESET: WooCommerce + Flexslider injects inline styles and floats
   on the thumbnail nav that push it into a vertical column or hide it.
   Win the cascade with body.single-product + div.product ancestor + ol type
   selector (specificity 0,2,3) and !important to defeat inline styles. */
body.single-product div.product div.woocommerce-product-gallery ol.flex-control-nav,
body.single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs,
body.single-product div.product div.woocommerce-product-gallery ol.mhb-flex-thumbs,
body.woocommerce div.product div.woocommerce-product-gallery ol.flex-control-nav,
body.woocommerce div.product div.woocommerce-product-gallery ol.flex-control-thumbs,
body.woocommerce div.product div.woocommerce-product-gallery ol.mhb-flex-thumbs,
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs,
.woocommerce div.product .woocommerce-product-gallery .mhb-flex-thumbs,
.mhb-woo .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,
.mhb-woo .woocommerce-product-gallery .flex-control-thumbs,
.mhb-woo .woocommerce-product-gallery .flex-control-nav,
.mhb-woo .woocommerce-product-gallery .mhb-flex-thumbs,
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery .mhb-flex-thumbs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: .6rem !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 20px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	float: none !important;
	clear: both !important;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1 1 auto !important;
}
.mhb-woo .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }

body.single-product div.product div.woocommerce-product-gallery ol.flex-control-nav li,
body.single-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li,
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav li,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li,
.mhb-woo .woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-nav li {
	flex: 0 0 96px !important;
	width: 96px !important;
	min-width: 96px !important;
	max-width: 96px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	display: block !important;
	list-style: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
}
.mhb-woo .woocommerce-product-gallery .flex-control-thumbs li img,
.woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: .5rem;
	border: 1.5px solid transparent;
	opacity: .65;
	cursor: pointer;
	display: block;
	transition: opacity .2s ease, border-color .2s ease;
}
.mhb-woo .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.mhb-woo .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--rose);
}

/* Thumbnail-slider arrows */
.mhb-thumb-arrow {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--cream-300);
	background: #fff;
	color: var(--charcoal);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	padding: 0;
}
.mhb-thumb-arrow:hover {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}
.mhb-thumb-arrow:focus-visible {
	outline: 2px solid var(--rose);
	outline-offset: 2px;
}

/* Decorative "expand" icon overlay on the main image. Lightbox is disabled
   so this is purely a visual cue that the image supports zoom-on-hover. */
.mhb-woo .woocommerce-product-gallery,
.woocommerce-product-gallery { position: relative; }
.mhb-woo .woocommerce-product-gallery .flex-viewport,
.mhb-woo .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper { position: relative; }
/* Expand-icon overlay: anchored to the IMAGE wrapper (not the gallery div),
   z-index 9 (well below the navbar's z-index 50) so a scroll never lets the
   icon bleed into the header zone. */
.mhb-woo .woocommerce-product-gallery .flex-viewport::before,
.mhb-woo .woocommerce-product-gallery .woocommerce-product-gallery__wrapper::before,
.woocommerce-product-gallery .flex-viewport::before,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper::before {
	content: "\26F6"; /* ⛶ four-corners square — the [ ] expand glyph */
	position: absolute !important;
	top: .85rem !important;
	right: .85rem !important;
	z-index: 9 !important;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--charcoal);
	font-size: 1.15rem;
	line-height: 38px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	pointer-events: none;
}
/* Disable the previous gallery-level ::after so the icon only appears once,
   on the image wrapper. */
.mhb-woo .woocommerce-product-gallery::after,
.woocommerce-product-gallery::after { content: none !important; display: none !important; }

/* Zoom trigger ("click to enlarge"): lower z-index so it sits below the
   sticky navbar on scroll, and replace the default magnifier with our
   "expand corners" icon. Hover scales the icon. */
.mhb-woo .woocommerce-product-gallery__trigger {
	z-index: 5 !important;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-indent: -9999px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: transform .2s ease, background .2s ease;
	top: .75rem !important;
	right: .75rem !important;
	color: transparent !important;
}
.mhb-woo .woocommerce-product-gallery__trigger::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2A2A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' y1='3' x2='14' y2='10'/><line x1='3' y1='21' x2='10' y2='14'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
	text-indent: 0;
}
.mhb-woo .woocommerce-product-gallery__trigger:hover {
	transform: scale(1.05);
	background: #fff !important;
}

/* Product summary block */
.mhb-woo .product .summary { padding-left: 1rem; }
@media (max-width: 768px) {
	.mhb-woo .product .summary { padding-left: 0; padding-top: 1rem; }
}

/* Breathing room around the variations -> add-to-cart group so the button
   isn't right under the pills */
.mhb-woo form.cart { margin-top: 1.5rem; }
.mhb-woo .woocommerce-variation-add-to-cart { margin-top: 1.25rem; }
.mhb-woo .single_variation_wrap { margin-top: 1rem; }

/* Related products + upsells: clear separation from tabs above */
.mhb-woo .woocommerce-tabs { margin-bottom: 3rem; }
.mhb-woo .related.products,
.mhb-woo .upsells.products {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--cream-200);
}
.mhb-woo .related.products > h2,
.mhb-woo .upsells.products > h2 {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 500;
	color: var(--charcoal);
	margin-bottom: 1.5rem;
}

/* Star rating in summary */
.mhb-woo .product .star-rating { color: var(--gold); margin-bottom: .75rem; }
.mhb-woo .product .woocommerce-product-rating { margin-bottom: 1rem; }
.mhb-woo .product .woocommerce-review-link {
	color: var(--warm-gray);
	text-decoration: none;
	font-size: .85rem;
	font-family: var(--font-body);
	margin-left: .5rem;
}
.mhb-woo .product .woocommerce-review-link:hover { color: var(--rose); }

/* On-brand product meta — Categories + Brands rendered as styled pills */
.mhb-product-meta {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cream-200);
	font-family: var(--font-body);
}
.mhb-product-meta-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .75rem;
}
.mhb-product-meta-label {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--warm-gray);
	font-weight: 500;
}
.mhb-product-meta-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.mhb-product-meta-pill {
	display: inline-block;
	padding: .35rem .85rem;
	border-radius: 999px;
	background: var(--cream-100);
	border: 1px solid var(--cream-300);
	color: var(--charcoal);
	font-size: .8rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mhb-product-meta-pill:hover {
	background: var(--rose);
	color: #fff !important;
	border-color: var(--rose);
}

/* Variation pills (replace Woo's <select>) — flex layout instead of table cells
   so labels sit flush-left with the rest of the summary content. */
.mhb-woo table.variations,
.mhb-woo table.variations tbody { display: block; width: 100%; margin: 0 0 1rem; border: none; }
.mhb-woo table.variations tr {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .25rem 0;
}
.mhb-woo table.variations th,
.mhb-woo table.variations td {
	display: block;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}
.mhb-woo table.variations th.label {
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--charcoal);
	text-align: left !important;
	white-space: nowrap;
	flex: 0 0 auto;
	min-width: 5.5rem;
}
.mhb-woo table.variations td.value { flex: 1 1 auto; }
.mhb-variation-pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5rem;
}
/* Important on these because GeneratePress's parent CSS sets a dark default
   bg/colour on every <button> which would otherwise win the cascade. */
button.mhb-variation-pill,
.mhb-woo button.mhb-variation-pill {
	appearance: none !important;
	background: #fff !important;
	background-color: #fff !important;
	border: 1.5px solid var(--cream-300) !important;
	color: var(--charcoal) !important;
	padding: .5rem 1.1rem !important;
	border-radius: 999px !important;
	font-family: var(--font-body) !important;
	font-size: .9rem !important;
	font-weight: 500 !important;
	letter-spacing: .02em;
	line-height: 1.2 !important;
	cursor: pointer;
	box-shadow: none !important;
	text-transform: none !important;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease;
}
button.mhb-variation-pill:hover,
.mhb-woo button.mhb-variation-pill:hover {
	background-color: #fff !important;
	color: var(--rose) !important;
	border-color: var(--rose) !important;
	transform: translateY(-1px);
}
button.mhb-variation-pill.is-active,
.mhb-woo button.mhb-variation-pill.is-active {
	background-color: var(--rose) !important;
	border-color: var(--rose) !important;
	color: #fff !important;
}

/* Hide Woo's separate variation-price block — the header price syncs via JS.
   Cover every place WC puts the duplicate (theme-specific markup varies). */
.mhb-woo .woocommerce-variation-price,
.mhb-woo .single_variation .price,
.mhb-woo .woocommerce-variation .price,
.mhb-woo .single_variation_wrap .single_variation .price {
	display: none !important;
}
.mhb-woo .woocommerce-variation-description { margin: 0 0 1rem; color: var(--warm-gray); }
.mhb-woo .reset_variations { display: none !important; } /* picking another pill is its own reset */

/* Quantity + Add-to-basket row alignment.
   Simple products: form.cart is the flex container.
   Variable products: form.cart contains the variations table AND the
   add-to-cart wrapper — only the inner wrapper should be flex, otherwise the
   table and the wrapper become row-siblings and the button gets pushed right. */
.mhb-woo form.cart:not(.variations_form),
.mhb-woo .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: .75rem;
	margin: 1.25rem 0 0;
}
.mhb-woo .single_variation_wrap { margin-top: 1rem; display: block; }
.mhb-woo form.cart .quantity {
	margin: 0;
	flex: 0 0 auto;
}
.mhb-woo form.cart .quantity input.qty {
	width: 84px;
	height: 100%;
	min-height: 44px;
	padding: .6rem .5rem;
	border: 1px solid var(--cream-300);
	border-radius: .5rem;
	text-align: center;
	font-family: var(--font-body);
	font-size: 1rem;
	box-sizing: border-box;
}
.mhb-woo form.cart button.single_add_to_cart_button {
	margin: 0 !important;
	white-space: nowrap;
	flex: 1 1 auto;
	min-height: 44px;
	padding: .75rem 1.5rem !important;
	font-size: .95rem !important;
	border-radius: 0 !important;
}

/* Tabs (Description / Additional info / Reviews) — replace Woo's default
   bordered look with a clean underline-active style. */
.mhb-woo .woocommerce-tabs {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--cream-200);
}
.mhb-woo .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0;
	margin: 0 0 2rem;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	list-style: none;
	flex-wrap: wrap;
}
.mhb-woo .woocommerce-tabs ul.tabs::before,
.mhb-woo .woocommerce-tabs ul.tabs::after { display: none !important; }
.mhb-woo .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}
.mhb-woo .woocommerce-tabs ul.tabs li::before,
.mhb-woo .woocommerce-tabs ul.tabs li::after { display: none !important; }
.mhb-woo .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: .9rem 1.5rem !important;
	font-family: var(--font-body) !important;
	font-size: .9rem !important;
	font-weight: 500 !important;
	letter-spacing: .04em;
	color: var(--warm-gray) !important;
	text-decoration: none !important;
	border-bottom: 2px solid transparent !important;
	transition: color .2s ease, border-color .2s ease;
}
.mhb-woo .woocommerce-tabs ul.tabs li a:hover { color: var(--charcoal) !important; }
.mhb-woo .woocommerce-tabs ul.tabs li.active a {
	color: var(--rose) !important;
	border-bottom-color: var(--rose) !important;
}
.mhb-woo .woocommerce-tabs .panel {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	margin: 0 !important;
}
.mhb-woo .woocommerce-tabs .panel > h2:first-child { display: none; } /* Section already clear from active tab */

/* Additional Information tab — clean attribute table (Quantity, Weight, etc.) */
.mhb-woo .woocommerce-product-attributes,
.mhb-woo table.shop_attributes,
.woocommerce-product-attributes,
table.shop_attributes {
	width: 100% !important;
	border: none !important;
	border-collapse: collapse !important;
	margin: 0 !important;
	font-family: var(--font-body);
}
.mhb-woo .woocommerce-product-attributes tr,
.mhb-woo table.shop_attributes tr,
.woocommerce-product-attributes tr,
table.shop_attributes tr {
	border-bottom: 1px solid var(--cream-200);
}
.mhb-woo .woocommerce-product-attributes tr:last-child,
.mhb-woo table.shop_attributes tr:last-child,
.woocommerce-product-attributes tr:last-child,
table.shop_attributes tr:last-child { border-bottom: none; }

.mhb-woo .woocommerce-product-attributes th,
.mhb-woo .woocommerce-product-attributes td,
.mhb-woo table.shop_attributes th,
.mhb-woo table.shop_attributes td,
.woocommerce-product-attributes th,
.woocommerce-product-attributes td,
table.shop_attributes th,
table.shop_attributes td {
	padding: 15px 0 !important;
	vertical-align: middle !important;
	border: none !important;
	background: transparent !important;
	line-height: 1.5;
	font-style: normal !important;
}

.mhb-woo .woocommerce-product-attributes th,
.mhb-woo table.shop_attributes th,
.woocommerce-product-attributes th,
table.shop_attributes th {
	width: 30%;
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	color: var(--charcoal);
	text-align: left !important;
	padding-left: 0 !important;
	padding-right: 1.25rem !important;
	margin-left: 0 !important;
	white-space: nowrap;
}

.mhb-woo .woocommerce-product-attributes td,
.mhb-woo table.shop_attributes td,
.woocommerce-product-attributes td,
table.shop_attributes td {
	color: var(--warm-gray);
	padding-left: 1.25rem !important;
	padding-right: 0 !important;
	text-align: left !important;
}
.mhb-woo .woocommerce-product-attributes td p,
.mhb-woo table.shop_attributes td p,
.woocommerce-product-attributes td p,
table.shop_attributes td p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5;
	display: inline;
}

/* Reviews list + form */
.mhb-woo .woocommerce-Reviews-title { display: none; }
.mhb-woo #reviews #comments ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mhb-woo #reviews #comments ol.commentlist li.comment {
	background: #fff;
	border: 1px solid var(--cream-200);
	border-radius: .75rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}
.mhb-woo #reviews #comments .comment-text { background: transparent !important; border: none !important; padding: 0 !important; }
.mhb-woo #reviews #respond {
	background: var(--cream-100);
	border-radius: .75rem;
	padding: 1.5rem;
	margin-top: 1rem;
}
.mhb-woo #reviews .comment-form-rating label,
.mhb-woo #reviews .comment-form label {
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--charcoal);
}

/* Empty cart state — replaces Woo's default "currently empty" + "New in store" */
.mhb-empty-cart {
	text-align: center;
	padding: 0 1rem;
	max-width: 34rem;
	margin: 0 auto;
}
.mhb-empty-cart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 1.5rem;
	color: var(--rose);
	background: var(--cream-100);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--cream-300);
}
.mhb-empty-cart-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	font-weight: 500;
	color: var(--charcoal);
	margin: 0 0 .75rem;
	line-height: 1.2;
}
.mhb-empty-cart-text {
	font-family: var(--font-body);
	color: var(--warm-gray);
	line-height: 1.6;
	margin: 0 0 2rem;
	font-size: 1.05rem;
}
.mhb-empty-cart-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}
/* Hide the default empty-cart icon Woo bolts onto its h2 — we render our own. */
.mhb-woo .with-empty-cart-icon::before { display: none !important; }

/* ============================================================
   Quantity stepper — always-visible +/- buttons, replaces the
   browser's native number-input spinners (which hide on hover
   in Firefox and look inconsistent across browsers).
   The stepper is injected by assets/js/qty-stepper.js.
   ============================================================ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}

.mhb-qty-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--cream-300);
	border-radius: .5rem;
	overflow: hidden;
	background: #fff;
	min-height: 44px;
}
.mhb-qty-btn {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 0;
	width: 36px;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--charcoal);
	font-family: var(--font-body);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	transition: background-color .15s ease, color .15s ease;
}
.mhb-qty-btn:hover {
	background: var(--cream-100, #f6efe2);
	color: var(--rose);
}
.mhb-qty-btn:focus-visible {
	outline: 2px solid var(--rose);
	outline-offset: -2px;
}
.mhb-qty-stepper .mhb-qty-minus { border-right: 1px solid var(--cream-300); }
.mhb-qty-stepper .mhb-qty-plus  { border-left:  1px solid var(--cream-300); }

/* Reset the input's own border/width when wrapped — the stepper now owns the
   outer frame. Higher specificity than the existing .mhb-woo form.cart rule. */
.mhb-qty-stepper input.qty,
.mhb-woo .quantity .mhb-qty-stepper input.qty,
.mhb-woo form.cart .quantity .mhb-qty-stepper input.qty {
	border: 0 !important;
	border-radius: 0 !important;
	width: 56px !important;
	min-height: 0;
	height: auto;
	background: transparent;
	padding: .5rem .25rem;
}

/* ============================================================
   Order-received / View Order — align Billing + Shipping address
   boxes so they sit side-by-side and end at the same vertical line.
   WC core / GeneratePress float .col-1 and .col-2 with %% widths;
   we override with flex + !important to win the cascade reliably.
   ============================================================ */
.woocommerce-customer-details .woocommerce-columns--addresses,
.mhb-woo .woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-order-details + .woocommerce-customer-details .woocommerce-columns,
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
	display: flex !important;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0 0 2rem !important;
}
.woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-customer-details .woocommerce-columns--addresses::after,
.mhb-woo .woocommerce-customer-details .woocommerce-columns--addresses::before,
.mhb-woo .woocommerce-customer-details .woocommerce-columns--addresses::after {
	display: none !important;
	content: none !important;
}
.woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column,
.mhb-woo .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column {
	flex: 1 1 280px !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column;
}
.woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column address,
.mhb-woo .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column address {
	flex: 1 1 auto;
	margin: 0 !important;
}

/* ============================================================
   BACK IN STOCK NOTIFIER (cwginstock plugin)
   Strip the plugin's bootstrap-style "panel" frame and apply the brand
   look — flat card, brand inputs, rose pill submit matching .mhb-btn-primary.
   ============================================================ */
.cwginstock-subscribe-form {
	margin: 1.5rem 0;
	padding: 0;
}
.cwginstock-subscribe-form .panel,
.cwginstock-subscribe-form .panel-primary,
.cwginstock-subscribe-form .cwginstock-panel-primary {
	background: var(--cream) !important;
	border: 1px solid var(--cream-300) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	overflow: hidden;
}
.cwginstock-subscribe-form .panel-heading,
.cwginstock-subscribe-form .cwginstock-panel-heading {
	background: transparent !important;
	border: 0 !important;
	padding: 1rem 1.25rem .25rem !important;
	color: var(--charcoal) !important;
}
.cwginstock-subscribe-form .panel-heading h4,
.cwginstock-subscribe-form .cwginstock-panel-heading h4 {
	margin: 0 !important;
	font-family: var(--font-heading, var(--font-body));
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	letter-spacing: .02em;
	color: var(--charcoal) !important;
	text-align: left !important;
}
.cwginstock-subscribe-form .panel-body,
.cwginstock-subscribe-form .cwginstock-panel-body {
	padding: .75rem 1.25rem 1.25rem !important;
	background: transparent !important;
}
.cwginstock-subscribe-form .form-group {
	margin-bottom: .75rem;
}

/* Inputs — match the rest of the site's form fields */
.cwginstock-subscribe-form input[type="text"],
.cwginstock-subscribe-form input[type="email"],
.cwginstock-subscribe-form input[type="tel"],
.cwginstock-subscribe-form .cwgstock_name,
.cwginstock-subscribe-form .cwgstock_email,
.cwginstock-subscribe-form .cwgstock_phone {
	width: 100% !important;
	padding: .65rem .85rem !important;
	border: 1px solid var(--cream-300) !important;
	border-radius: .5rem !important;
	font-family: var(--font-body) !important;
	font-size: .95rem !important;
	background: #fff !important;
	color: var(--charcoal) !important;
	text-align: left !important;
	margin-bottom: .55rem !important;
	box-shadow: none !important;
	transition: border-color .2s ease;
}
.cwginstock-subscribe-form input[type="text"]:focus,
.cwginstock-subscribe-form input[type="email"]:focus,
.cwginstock-subscribe-form input[type="tel"]:focus {
	outline: none !important;
	border-color: var(--rose) !important;
}

/* Submit button — match .mhb-btn-primary (rose pill, cream text, uppercase) */
.cwginstock-subscribe-form .cwgstock_button,
.cwginstock-subscribe-form input[type="submit"].cwgstock_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: .5rem !important;
	width: auto !important;
	padding: .9rem 2rem !important;
	margin-top: .25rem !important;
	background: var(--rose) !important;
	color: var(--cream-50) !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	font-family: var(--font-body) !important;
	font-size: .75rem !important;
	font-weight: 500 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease !important;
}
.cwginstock-subscribe-form .cwgstock_button:hover,
.cwginstock-subscribe-form input[type="submit"].cwgstock_button:hover {
	background: var(--rose-dark) !important;
	color: var(--cream-50) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg, 0 8px 20px rgba(0, 0, 0, .12)) !important;
}
.cwginstock-subscribe-form .cwgstock_button:focus-visible {
	outline: 2px solid var(--gold) !important;
	outline-offset: 2px !important;
}

/* Privacy checkbox + status output — keep tidy */
.cwginstock-subscribe-form .cwg_iagree_checkbox {
	margin: .5rem 0 .75rem;
	font-size: .85rem;
	color: var(--charcoal);
}
.cwginstock-subscribe-form .cwgstock_output {
	margin-top: .75rem;
	font-size: .9rem;
}
.cwginstock-subscribe-form .cwgstock_output:empty {
	display: none;
}

/* Centred submit row — the plugin uses style="text-align:center;" inline */
.cwginstock-subscribe-form .form-group[style*="text-align:center"] {
	text-align: left !important;
}

/* ============================================================
   COOKIEYES (cookie-law-info plugin) — brand override
   The plugin sets a lot of styles inline from its admin "Customize"
   panel which Martina can't easily reach the brand from. We override
   with high specificity + !important.
   ============================================================ */

/* Container — cream card, gold accent stripe, brand fonts */
body .cky-consent-container,
body .cky-modal,
body .cky-preference-center {
	font-family: var(--font-body) !important;
	color: var(--charcoal) !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 30px rgba(42, 42, 42, 0.10) !important;
}
body .cky-consent-container .cky-consent-bar,
body .cky-consent-container .cky-banner-bottom,
body .cky-consent-container .cky-banner-top,
body .cky-modal .cky-modal-content,
body .cky-preference-center {
	background: var(--cream-50) !important;
	border-top: 3px solid var(--gold) !important;
	border-radius: 8px !important;
	color: var(--charcoal) !important;
	padding: 1.25rem 1.5rem !important;
}

/* Heading + body text */
body .cky-consent-container [data-cky-tag="title"],
body .cky-consent-container .cky-title,
body .cky-modal [data-cky-tag="title"],
body .cky-modal .cky-title,
body .cky-preference-center .cky-preference-title {
	font-family: var(--font-heading), Georgia, serif !important;
	color: var(--rose) !important;
	font-weight: 500 !important;
	font-size: 1.15rem !important;
	letter-spacing: 0.01em !important;
	margin: 0 0 .5rem !important;
}
body .cky-consent-container [data-cky-tag="description"],
body .cky-consent-container .cky-notice-des,
body .cky-modal [data-cky-tag="description"],
body .cky-preference-center .cky-preference-content-wrapper {
	color: var(--charcoal) !important;
	font-family: var(--font-body) !important;
	font-size: .92rem !important;
	line-height: 1.55 !important;
}
body .cky-consent-container [data-cky-tag="description"] *,
body .cky-modal [data-cky-tag="description"] * {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
}

/* Buttons — uppercase pill with brand colours, regardless of CookieYes inline styles */
body .cky-consent-container button,
body .cky-modal button,
body .cky-preference-center button,
body .cky-btn,
body .cky-banner-btn {
	font-family: var(--font-body) !important;
	font-size: .72rem !important;
	font-weight: 500 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	padding: .85rem 1.5rem !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

/* Accept All — rose pill (primary CTA) */
body .cky-btn-accept,
body button[data-cky-tag="accept-button"],
body .cky-banner-btn-accept {
	background: var(--rose) !important;
	color: var(--cream-50) !important;
	border: 1px solid var(--rose) !important;
}
body .cky-btn-accept:hover,
body button[data-cky-tag="accept-button"]:hover,
body .cky-banner-btn-accept:hover {
	background: var(--rose-dark) !important;
	border-color: var(--rose-dark) !important;
	color: var(--cream-50) !important;
	transform: translateY(-1px);
}

/* Reject All — outlined charcoal (secondary) */
body .cky-btn-reject,
body button[data-cky-tag="reject-button"],
body .cky-banner-btn-reject {
	background: transparent !important;
	color: var(--charcoal) !important;
	border: 1px solid var(--charcoal) !important;
}
body .cky-btn-reject:hover,
body button[data-cky-tag="reject-button"]:hover,
body .cky-banner-btn-reject:hover {
	background: var(--charcoal) !important;
	color: var(--cream-50) !important;
}

/* Customize / Preferences — outlined gold (tertiary) */
body .cky-btn-customize,
body button[data-cky-tag="settings-button"],
body button[data-cky-tag="detail-category-preview-link"] {
	background: transparent !important;
	color: var(--gold-dark) !important;
	border: 1px solid var(--gold) !important;
}
body .cky-btn-customize:hover,
body button[data-cky-tag="settings-button"]:hover {
	background: var(--gold) !important;
	color: var(--cream-50) !important;
	border-color: var(--gold) !important;
}

/* Save / Confirm in preference centre — same as primary */
body .cky-btn-preferences,
body button[data-cky-tag="save-button"] {
	background: var(--rose) !important;
	color: var(--cream-50) !important;
	border: 1px solid var(--rose) !important;
}

/* Links in banner & preference centre */
body .cky-consent-container a,
body .cky-modal a,
body .cky-preference-center a {
	color: var(--rose) !important;
	text-decoration: underline !important;
}
body .cky-consent-container a:hover,
body .cky-modal a:hover {
	color: var(--rose-dark) !important;
}

/* Toggle switches in the preference modal — rose when on */
body .cky-switch input[type="checkbox"]:checked + label,
body .cky-switch input[type="checkbox"]:checked + span,
body .cky-switch input[type="checkbox"]:checked ~ .slider {
	background: var(--rose) !important;
}

/* Floating "Manage consent" revisit button */
body .cky-revisit-bottom-left,
body .cky-revisit-bottom-right,
body .cky-revisit-top-left,
body .cky-revisit-top-right {
	background: var(--rose) !important;
	color: var(--cream-50) !important;
	border: 0 !important;
	box-shadow: 0 6px 16px rgba(42, 42, 42, 0.18) !important;
}
body .cky-revisit-bottom-left:hover,
body .cky-revisit-bottom-right:hover,
body .cky-revisit-top-left:hover,
body .cky-revisit-top-right:hover {
	background: var(--rose-dark) !important;
}

/* Modal backdrop — soft cream overlay */
body .cky-overlay,
body .cky-modal-backdrop {
	background: rgba(42, 42, 42, 0.55) !important;
}

/* ============================================================
   OUT OF STOCK badge — shop loop + featured-product cards
   Sits as an absolutely-positioned pill in the top-left of the
   product tile, in the same corner as the WC sale flash.
   ============================================================ */
.woocommerce ul.products li.product,
ul.products li.product,
.woocommerce-page ul.products li.product,
.mhb-home-shop-grid li.product {
	position: relative;
}
.mhb-oos-badge {
	position: absolute;
	top: .85rem;
	left: .85rem;
	z-index: 5;
	display: inline-block;
	padding: .35rem .75rem;
	background: var(--charcoal);
	color: var(--cream-50);
	font-family: var(--font-body);
	font-size: .65rem;
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	pointer-events: none;
}
/* Subtle visual cue on the whole tile when the product is out of stock */
ul.products li.product.outofstock .woocommerce-LoopProduct-link img,
ul.products li.product.outofstock img.attachment-woocommerce_thumbnail,
.mhb-home-shop-grid li.product.outofstock img {
	opacity: 0.6;
	filter: saturate(0.85);
	transition: opacity .25s ease;
}
ul.products li.product.outofstock:hover .woocommerce-LoopProduct-link img,
ul.products li.product.outofstock:hover img.attachment-woocommerce_thumbnail,
.mhb-home-shop-grid li.product.outofstock:hover img {
	opacity: 0.85;
}

/* Preference-centre accordion rows — the plugin's actual class is
 * .cky-accordion-btn (NOT .cky-accordion-trigger). Anchor on
 * .cky-accordion (the row container) and .cky-accordion-btn (the
 * clickable header) so the chevron sits tight against the title.
 */
body .cky-accordion .cky-accordion-btn,
body .cky-modal .cky-accordion-btn {
	display: flex !important;
	align-items: center !important;
	gap: .55rem !important;
	width: 100% !important;
	padding: .9rem 1.25rem !important;
	background: transparent !important;
	border: 0 !important;
	text-align: left !important;
	cursor: pointer !important;
	color: var(--charcoal) !important;
	font-family: var(--font-body) !important;
	font-size: .95rem !important;
	font-weight: 500 !important;
	letter-spacing: .04em !important;
	min-height: 0 !important;
}
/* Chevron — wherever it sits inside the button, normalise + size it */
body .cky-accordion-btn .cky-accordion-chevron,
body .cky-accordion .cky-accordion-chevron,
body .cky-modal .cky-accordion-chevron {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 14px !important;
	height: 14px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--charcoal) !important;
	transition: transform .2s ease !important;
	position: static !important;
}
body .cky-accordion-chevron svg,
body .cky-accordion-chevron i,
body .cky-accordion-chevron::before {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	line-height: 1 !important;
}
/* Anything inside the button that isn't the chevron or the status tag
 * is treated as the title — takes the remaining space.
 */
body .cky-accordion-btn > *:not(.cky-accordion-chevron):not(.cky-always-active) {
	flex: 1 1 auto !important;
	margin: 0 !important;
	min-width: 0 !important;
}
/* "Always Active" / status tag pushed to the far right */
body .cky-always-active {
	margin-left: auto !important;
	flex: 0 0 auto !important;
	font-size: .8rem !important;
	color: var(--gold-dark) !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
/* When accordion expands, rotate chevron 90° so it points down */
body .cky-accordion.cky-accordion-active .cky-accordion-chevron,
body .cky-accordion-active .cky-accordion-chevron,
body .cky-accordion-btn[aria-expanded="true"] .cky-accordion-chevron {
	transform: rotate(90deg) !important;
}

/* ==========================================================================
   Three pillars trio (homepage, after hero)
   ========================================================================== */
.mhb-pillars { padding-top: 4rem; padding-bottom: 4rem; }
.mhb-pillars-intro {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 3rem;
}
.mhb-pillars-intro .mhb-section-label { display: inline-block; }
.mhb-pillars-intro .mhb-h2 { margin-top: .5rem; }

.mhb-pillar-grid { gap: 1.5rem; }
.mhb-pillar-card {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: 2.25rem 1.75rem 2rem;
	background: var(--cream-50, #FEFCFA);
	border: 1px solid var(--cream-200, #EFE6DC);
	border-top: 3px solid var(--gold, #C4956A);
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
	position: relative;
	overflow: hidden;
}
.mhb-pillar-card:hover,
.mhb-pillar-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px -18px rgba(139, 79, 96, .25);
	border-top-color: var(--rose, #8B4F60);
}
.mhb-pillar-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.mhb-pillar-eyebrow {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-dark, #A6794D);
	font-weight: 500;
}
.mhb-pillar-price {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	font-size: .82rem;
	font-weight: 500;
	color: var(--rose, #8B4F60);
	background: rgba(139, 79, 96, .08);
	border: 1px solid rgba(139, 79, 96, .18);
	border-radius: 999px;
	padding: .25rem .7rem;
	white-space: nowrap;
	letter-spacing: .01em;
}
.mhb-pillar-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 2rem;
	color: var(--rose, #8B4F60);
	margin: 0;
	line-height: 1.1;
}
.mhb-pillar-text {
	color: var(--warm-gray, #6B5A44);
	font-size: .95rem;
	line-height: 1.7;
	margin: 0;
	flex: 1;
}
.mhb-pillar-cta {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	font-size: .85rem;
	letter-spacing: .04em;
	color: var(--rose, #8B4F60);
	font-weight: 500;
	margin-top: .25rem;
	transition: color .25s ease, gap .25s ease;
}
.mhb-pillar-card:hover .mhb-pillar-cta,
.mhb-pillar-card:focus-visible .mhb-pillar-cta {
	color: var(--gold-dark, #A6794D);
}

/* Pillar I — dual CTA variant (not a single link, so has two sub-links) */
.mhb-pillar-card--dual { cursor: default; }
.mhb-pillar-card--dual:hover,
.mhb-pillar-card--dual:focus-visible {
	transform: none;
	box-shadow: none;
	border-top-color: var(--gold, #C4956A);
}
.mhb-pillar-dual-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: .25rem;
}
.mhb-pillar-dual-ctas .mhb-pillar-cta { transition: color .25s ease; }
.mhb-pillar-dual-ctas .mhb-pillar-cta:hover { color: var(--gold-dark, #A6794D); }

/* Pillar III — coming soon variant */
.mhb-pillar-card--soon { opacity: .9; }
.mhb-pillar-card--soon .mhb-pillar-title { color: var(--warm-gray, #6B5A44); }
.mhb-pillar-soon-badge {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--gold-dark, #A6794D);
	background: rgba(196, 149, 106, .12);
	border: 1px solid rgba(196, 149, 106, .35);
	border-radius: 999px;
	padding: .25rem .7rem;
	white-space: nowrap;
}
.mhb-pillar-card--soon .mhb-pillar-cta { color: var(--warm-gray, #6B5A44); }
.mhb-pillar-card--soon .mhb-pillar-cta:hover { color: var(--gold-dark, #A6794D); }

/* About page — Academy teaser banner */
.mhb-about-academy-banner {
	text-align: center;
	padding: 3rem 2rem;
	border: 1px dashed var(--cream-200, #EFE6DC);
	border-radius: 6px;
	background: rgba(255,255,255,.6);
}
.mhb-about-academy-banner .mhb-h2 { margin: .5rem 0 1rem; }
.mhb-about-academy-banner .mhb-lead { margin: 0 auto 2rem; max-width: 36rem; }
.mhb-about-academy-label { margin-bottom: .25rem; }

/* ==========================================================================
   Beyond the treatment room (Readings + Reiki & Energy duo)
   ========================================================================== */
.mhb-beyond-grid { gap: 2rem; }
.mhb-beyond-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.5rem 2rem;
	background: var(--cream-50, #FEFCFA);
	border: 1px solid var(--cream-200, #EFE6DC);
	border-radius: 4px;
	position: relative;
}
.mhb-beyond-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 3px;
	background: var(--gold, #C4956A);
}
.mhb-beyond-card .mhb-card-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.85rem;
	color: var(--rose, #8B4F60);
	margin: 0;
	line-height: 1.15;
}
.mhb-beyond-card .mhb-card-text {
	color: var(--warm-gray, #6B5A44);
	font-size: .98rem;
	line-height: 1.75;
	margin: 0;
	flex: 1;
}
.mhb-beyond-card .mhb-card-footer {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: .5rem;
}

@media (max-width: 768px) {
	.mhb-pillar-card { padding: 1.75rem 1.5rem; }
	.mhb-pillar-title { font-size: 1.75rem; }
	.mhb-beyond-card { padding: 2rem 1.5rem; }
	.mhb-beyond-card .mhb-card-title { font-size: 1.6rem; }
}

/* ==========================================================================
   Readings landing — tighter cat-hero + WC product card grid + FAQ accordions
   ========================================================================== */
body.tax-service_category.term-readings .mhb-cat-hero { padding-bottom: 1.5rem; }
body.tax-service_category.term-readings .mhb-cat-hero-desc { margin-bottom: 1.25rem; }
.mhb-readings-grid { padding-top: 2.5rem; padding-bottom: 3.5rem; }
.mhb-readings-grid > .mhb-container > h2 { margin-top: 0; }

/* The .mhb-readings-products list inherits the same .products .product styling
   used by .mhb-home-shop-grid on the homepage shop section, so cards match. */

/* Readings landing reuses .mhb-ss-section / .mhb-ss-expect / .mhb-ss-faq from
   single-service.php so the "How a reading works" steps and the FAQ accordion
   match the per-service pages. No additional styles needed here. */

/* ==========================================================================
   Contact page (page-templates/page-contact.php)
   ========================================================================== */
.mhb-contact-section { padding-top: 3rem; padding-bottom: 4.5rem; }
.mhb-contact-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.mhb-contact-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 4rem;
	}
}

.mhb-contact-form-col { max-width: 36rem; }
.mhb-contact-form .mhb-form-row { margin: 0 0 1.1rem; }
.mhb-contact-form label {
	display: block;
	font-family: var(--font-body);
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--warm-gray);
	margin: 0 0 .4rem;
	font-weight: 500;
}
.mhb-form-optional { text-transform: none; letter-spacing: 0; color: rgba(107, 90, 68, .65); font-weight: 400; }
.mhb-contact-form input[type="text"],
.mhb-contact-form input[type="email"],
.mhb-contact-form input[type="tel"],
.mhb-contact-form select,
.mhb-contact-form textarea {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--cream-200, #EFE6DC);
	border-radius: 6px;
	background: var(--cream-50, #FEFCFA);
	font-family: var(--font-body);
	font-size: .95rem;
	color: var(--charcoal);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.mhb-contact-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B4F60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	padding-right: 2.5rem;
}
.mhb-contact-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.55;
}
.mhb-contact-form input:focus,
.mhb-contact-form select:focus,
.mhb-contact-form textarea:focus {
	outline: none;
	border-color: var(--rose, #8B4F60);
	box-shadow: 0 0 0 3px rgba(139, 79, 96, .12);
}
.mhb-contact-form input:invalid:not(:placeholder-shown):not(:focus),
.mhb-contact-form select:invalid:not(:focus),
.mhb-contact-form textarea:invalid:not(:placeholder-shown):not(:focus) {
	border-color: rgba(139, 79, 96, .55);
}
.mhb-form-consent label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .82rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--warm-gray);
	line-height: 1.55;
}
.mhb-form-consent input[type="checkbox"] {
	margin-top: .15rem;
	flex: 0 0 auto;
}
.mhb-form-consent a { color: var(--rose, #8B4F60); }
.mhb-form-actions { margin-top: 1.4rem; }

/* Honeypot — visually hidden, accessible to bots that read all DOM. */
.mhb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mhb-contact-msg {
	padding: .85rem 1rem;
	border-radius: 6px;
	margin: 0 0 1.5rem;
	font-size: .9rem;
	line-height: 1.55;
	border: 1px solid;
}
.mhb-contact-msg[data-state="ok"] {
	background: rgba(59, 110, 79, .08);
	border-color: rgba(59, 110, 79, .25);
	color: #2c5a3d;
}
.mhb-contact-msg[data-state="error"] {
	background: rgba(139, 79, 96, .07);
	border-color: rgba(139, 79, 96, .22);
	color: #6c3a48;
}

.mhb-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	border-top: 1px solid var(--cream-200, #EFE6DC);
}
.mhb-contact-list li {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--cream-200, #EFE6DC);
}
.mhb-contact-label {
	font-family: var(--font-body);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-dark, #A6794D);
	font-weight: 500;
}
.mhb-contact-list a { color: var(--rose, #8B4F60); }
.mhb-contact-list a:hover { color: var(--gold-dark, #A6794D); }

.mhb-contact-extra {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--cream-200, #EFE6DC);
	max-width: 48rem;
}

/* ==========================================================================
   Floating WhatsApp chat button (rendered by inc/whatsapp-chat.php)
   Bottom-right circle. Hover reveals a "Chat with Martina" tooltip.
   ========================================================================== */
.mhb-wa-fab,
.mhb-wa-fab:link,
.mhb-wa-fab:visited {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366 !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	z-index: 9998;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
	text-decoration: none !important;
	animation: mhb-wa-pop-in .35s ease-out both;
}
.mhb-wa-fab:hover,
.mhb-wa-fab:focus-visible {
	background: #1ebe57 !important;
	color: #fff !important;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
	text-decoration: none !important;
}
.mhb-wa-fab:focus-visible {
	outline: 2px solid var(--gold, #C4956A);
	outline-offset: 4px;
}
.mhb-wa-fab svg {
	width: 30px;
	height: 30px;
	display: block;
	fill: #fff !important;
	color: #fff !important;
}
.mhb-wa-fab-tooltip {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	background: var(--charcoal, #2A2225);
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	font-size: .82rem;
	padding: .45rem .75rem;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.mhb-wa-fab-tooltip::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-left-color: var(--charcoal, #2A2225);
}
.mhb-wa-fab:hover .mhb-wa-fab-tooltip,
.mhb-wa-fab:focus-visible .mhb-wa-fab-tooltip {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}
@keyframes mhb-wa-pop-in {
	from { opacity: 0; transform: translateY(8px) scale(.9); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
	.mhb-wa-fab,
	.mhb-wa-fab:link,
	.mhb-wa-fab:visited { right: 16px; bottom: 16px; }
	.mhb-wa-fab-tooltip { display: none; }
}

/* ============================================================
 * My Account → Account details: Password change heading
 * Replaces the default fieldset/legend with a tighter <h4>
 * that sits closer to the Current password field than to the
 * preceding Phone field. (Template lives in
 * woocommerce/myaccount/form-edit-account.php.)
 * ============================================================ */
.woocommerce-EditAccountForm .mhb-edit-account-pw-heading {
	font-family: var(--font-display, Georgia, serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--charcoal, #2A2225);
	margin: 1.75rem 0 0.6rem;   /* normal gap above, tight gap below */
	padding: 0;
	line-height: 1.3;
	letter-spacing: 0.01em;
}
/* Tight gap between the heading and the first password row underneath. */
.woocommerce-EditAccountForm .mhb-edit-account-pw-heading + .form-row {
	margin-top: 0;
}

/* ============================================================
 * My Account → Videos & Audios endpoint
 * Custom tab introduced in inc/order-attachments.php that lists
 * delivered video/audio readings, each with a Watch/Listen button
 * that links through to the order page where the inline player
 * is rendered.
 * ============================================================ */
.mhb-va-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.mhb-va-empty {
	padding: 1.5rem 1.75rem;
	background: #faf6ee;
	border-left: 3px solid #c4956a;
	border-radius: 4px;
	color: #5c4a36;
	line-height: 1.55;
}
.mhb-va-item {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 1rem 1.25rem;
	align-items: center;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid #e6dccb;
	border-radius: 8px;
}
.mhb-va-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #faf6ee;
	color: #8B4F60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mhb-va-meta { min-width: 0; }
.mhb-va-title {
	margin: 0 0 .15rem;
	font-family: var(--font-display, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--charcoal, #2A2225);
	line-height: 1.25;
}
.mhb-va-sub {
	margin: 0;
	font-size: .85rem;
	color: #6b5a44;
	line-height: 1.45;
}
.mhb-va-sub .mhb-va-sep { margin: 0 .35rem; }
.mhb-va-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .35rem;
}
.mhb-va-actions .mhb-va-play {
	white-space: nowrap;
	min-width: 110px;
	text-align: center;
}
.mhb-va-orderlink {
	font-size: .8rem;
	color: #6b5a44;
	text-decoration: none;
	border-bottom: 1px dotted #c4956a;
}
.mhb-va-orderlink:hover { color: #8B4F60; border-bottom-color: #8B4F60; }
@media (max-width: 600px) {
	.mhb-va-item {
		grid-template-columns: 40px 1fr;
		gap: .85rem 1rem;
	}
	.mhb-va-actions {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-top: .5rem;
		border-top: 1px solid #f0e7d5;
	}
}

/* ============================================================
 * My Account → Downloads tab: PDF view buttons + lightbox
 * Renders the View / Download buttons on rows for reading PDFs
 * (instead of the default "filename.pdf" link), and the modal
 * that hosts the PDF iframe.
 * ============================================================ */
.mhb-pdf-view,
.mhb-pdf-download {
	min-width: 90px;
	text-align: center;
	padding: .55rem 1rem;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.mhb-pdf-view + .mhb-pdf-download {
	margin-left: .35rem;
}

/* PDF lightbox shell — namespaced .mhb-pdf-lightbox-* to avoid colliding
 * with the portfolio gallery lightbox (which uses .mhb-lightbox-*). */
.mhb-pdf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}
.mhb-pdf-lightbox.is-open { display: block; }
.mhb-pdf-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(40, 30, 26, .42);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.mhb-pdf-lightbox-shell {
	position: relative;
	width: min(960px, 92vw);
	height: min(86vh, 1100px);
	margin: 4vh auto 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 24px 64px rgba(0,0,0,.32);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.mhb-pdf-lightbox-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 1rem .8rem 1.25rem;
	background: #faf6ee;
	border-bottom: 1px solid #e6dccb;
}
.mhb-pdf-lightbox-title {
	margin: 0;
	font-family: var(--font-display, Georgia, serif);
	font-size: 1.05rem;
	color: var(--charcoal, #2A2225);
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 1 1 auto;
}
.mhb-pdf-lightbox-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.mhb-pdf-lightbox-newtab {
	font-size: .8rem;
	color: #6b5a44;
	text-decoration: none;
	border-bottom: 1px dotted #c4956a;
	padding: .15rem 0;
	white-space: nowrap;
}
.mhb-pdf-lightbox-newtab:hover { color: #8B4F60; border-bottom-color: #8B4F60; }
.mhb-pdf-lightbox-close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #6b5a44;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.mhb-pdf-lightbox-close:hover { background: #f0e7d5; color: #8B4F60; }
.mhb-pdf-lightbox-close:focus,
.mhb-pdf-lightbox-close:focus-visible { outline: 2px solid #c4956a; outline-offset: 2px; }
.mhb-pdf-lightbox-body {
	flex: 1;
	min-height: 0;
	background: #2a2225;
	display: flex;
	flex-direction: column;
}
.mhb-pdf-lightbox-frame {
	width: 100%;
	flex: 1;
	min-height: 0;
	border: 0;
	background: #fff;
	display: block;
}
.mhb-pdf-lightbox-fallback {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 2rem 1.5rem;
	background: #fff;
	color: var(--charcoal, #2A2225);
	text-align: center;
}
.mhb-pdf-lightbox-fallback p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: #5c4a36;
	max-width: 320px;
}
.mhb-pdf-lightbox-fallback-btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	background: #8B4F60;
	color: #FEFCFA !important;
	text-decoration: none;
	font-size: .8rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	border-radius: 999px;
	font-weight: 500;
}
.mhb-pdf-lightbox-fallback-btn:hover { background: #6f3e4c; color: #fff !important; }

@media (max-width: 700px) {
	.mhb-pdf-lightbox-shell {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		border-radius: 0;
	}
	.mhb-pdf-lightbox-header {
		padding: env(safe-area-inset-top, 0) 1rem .65rem 1rem;
		padding-top: max(env(safe-area-inset-top, 0), .65rem);
		gap: .5rem;
	}
	.mhb-pdf-lightbox-title { font-size: .95rem; }
	/* Hide the inline "Open in new tab" link on mobile — the body itself
	 * is now a tap-to-open fallback so the link in the header would be
	 * redundant and cramp the layout. */
	.mhb-pdf-lightbox-newtab { display: none; }
	.mhb-pdf-lightbox-close { width: 44px; height: 44px; }
}

/* ============================================================
 * My Account → Account details: audit log section
 * Rendered by inc/account-security.php after the edit-account
 * form. Shows recent security events (sign-in, password
 * change/reset, email change).
 * ============================================================ */
.mhb-audit-log {
	margin: 2.25rem 0 0;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: 1px solid #e6dccb;
	border-radius: 8px;
}
.mhb-audit-heading {
	margin: 0 0 .35rem;
	font-family: var(--font-display, Georgia, serif);
	font-size: 1.1rem;
	color: var(--charcoal, #2A2225);
	font-weight: 600;
}
.mhb-audit-intro {
	margin: 0 0 1rem;
	color: #5c4a36;
	font-size: .9rem;
	line-height: 1.55;
}
.mhb-audit-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mhb-audit-item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .65rem 0;
	border-top: 1px solid #f0e7d5;
	font-size: .9rem;
}
.mhb-audit-item:first-child { border-top: 0; }
.mhb-audit-event {
	font-weight: 600;
	color: var(--charcoal, #2A2225);
}
.mhb-audit-item[data-event="password_reset"] .mhb-audit-event,
.mhb-audit-item[data-event="password_changed"] .mhb-audit-event,
.mhb-audit-item[data-event="email_changed"] .mhb-audit-event {
	color: #8B4F60;
}
.mhb-audit-meta {
	color: #6b5a44;
	font-size: .82rem;
}
.mhb-audit-sep { margin: 0 .25rem; }

/* ============================================================
 * Customer Reviews for WooCommerce — brand polish
 * Plugin ships with a generic teal/orange palette; rebind to the
 * site's gold-rose-cream system so the review form, summary box,
 * histogram, and submit form blend with the rest of the product page.
 * ============================================================ */

/* Stars — gold instead of plugin orange */
.cr-form-item-rating-radio .cr-form-item-inner svg path,
.cr-summaryBox-wrap svg path[fill="#f68609"],
.ivole-summaryBox svg path[fill="#f68609"],
.comment_container .star-rating::before,
.comment_container .star-rating span::before,
.cr-comment-rating svg path { fill: var(--gold) !important; color: var(--gold) !important; }

/* Summary box wrap — sits at top of reviews tab */
.cr-summaryBox-wrap,
.cr-reviews-grid .cr-summaryBox-wrap {
	background: var(--cream-100);
	border: 1px solid var(--cream-200);
	border-radius: 12px;
	padding: 1.5rem;
	font-family: var(--font-body);
}
.cr-summaryBox-wrap .ivole-summaryBox,
.cr-summaryBox-wrap .cr-summary-separator { border-color: var(--cream-300); }

/* Histogram bars — gold fill on cream track */
.ivole-meter { background: var(--cream-200); border-radius: 999px; overflow: hidden; }
.ivole-meter .ivole-meter-bar { background: var(--gold); }
.ivole-meter .ivole-meter-bar:before { background: var(--gold); }
.cr-histogramTable tr.ivole-histogramRow .ivole-histogramCell1,
.cr-histogramTable tr.ivole-histogramRow .ivole-histogramCell3 {
	color: var(--charcoal);
	font-family: var(--font-body);
}

/* Review form — match WC field styling already in the theme */
.cr-form,
.cr-form-wrapper {
	font-family: var(--font-body);
	color: var(--charcoal);
}
.cr-form-header,
.cr-form-title {
	font-family: var(--font-display);
	color: var(--charcoal);
	font-weight: 500;
}
.cr-form-item-comment textarea,
.cr-form input[type="text"],
.cr-form input[type="email"] {
	background: #fff;
	border: 1px solid var(--cream-300);
	border-radius: 8px;
	padding: .75rem .9rem;
	font-family: var(--font-body);
	color: var(--charcoal);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cr-form-item-comment textarea:focus,
.cr-form input[type="text"]:focus,
.cr-form input[type="email"]:focus {
	border-color: var(--rose);
	box-shadow: 0 0 0 3px rgba(139, 79, 96, 0.12);
	outline: none;
}

/* Star picker hover/active — gold on cream */
.cr-form-item-rating-radio .cr-form-item-outer { background: transparent; }
.cr-form-item-rating-radio .cr-form-item-inner.cr-form-active-radio,
.cr-form-item-rating-radio .cr-form-item-inner:hover { background: var(--cream-200); }

/* Photo / video upload area */
.cr-form-item-media-none {
	background: var(--cream-100);
	border: 1px dashed var(--cream-300);
	border-radius: 10px;
	color: var(--warm-gray);
}
.cr-form-item-image {
	border-radius: 8px;
	border: 1px solid var(--cream-300);
}

/* Submit button — match site primary button */
.cr-form button[type="submit"],
.cr-form .cr-form-submit,
.cr-all-reviews-shortcode .cr-form button[type="submit"] {
	background: var(--rose) !important;
	color: #fff !important;
	border: 1px solid var(--rose) !important;
	border-radius: 999px !important;
	padding: .75rem 1.75rem !important;
	font-family: var(--font-body) !important;
	font-size: .9rem !important;
	font-weight: 500 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	transition: background .2s ease, border-color .2s ease !important;
	box-shadow: none !important;
}
.cr-form button[type="submit"]:hover,
.cr-form .cr-form-submit:hover {
	background: var(--rose-dark) !important;
	border-color: var(--rose-dark) !important;
}

/* Verified-buyer / "Verified" badge */
.cr-badge .verified,
.comment-text .verified {
	background: var(--cream-200) !important;
	color: var(--rose) !important;
	border-radius: 999px !important;
	padding: .15rem .55rem !important;
	font-size: .7rem !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

/* Photo / video lightbox thumbnails on review listings */
.cr-comment-image-top,
.cr-comment-video {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--cream-200);
}

/* "Write a review" CTA inside the summary box — pill style */
.cr-summaryBox-wrap .cr-summary-add-review-btn,
.cr-summaryBox-wrap a.button {
	background: var(--rose) !important;
	color: #fff !important;
	border: 1px solid var(--rose) !important;
	border-radius: 999px !important;
	padding: .65rem 1.5rem !important;
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	font-size: .85rem !important;
}
.cr-summaryBox-wrap .cr-summary-add-review-btn:hover,
.cr-summaryBox-wrap a.button:hover {
	background: var(--rose-dark) !important;
	border-color: var(--rose-dark) !important;
}

/* ============================================================
 * Mobile fixes (iPhone-first)
 * - Stop horizontal scroll
 * - Service card title/price layout (always price right)
 * - Floating scroll-to-top stacked under WhatsApp
 * - Cookie banner overlap clearance for kr.ml credit
 * - Account icon stays visible on mobile (rule above already removed)
 * ============================================================ */

/* (1) Kill horizontal page scroll WITHOUT establishing a scroll context.
       overflow-x: clip clips overflow like `hidden` but does NOT make
       html/body a scroll container — so the page's normal vertical
       scroll keeps working on trackpad / mouse / scrollbar. */
html, body { overflow-x: clip; }
body { margin: 0; }

/* (2) Service card head — title 80% / price 20%, price always right,
       title wraps to next line if long. Replaces the prior flex-wrap
       behaviour that dropped the price onto its own row, left-aligned. */
.mhb-service-card:not(.has-hover-image) .mhb-service-card-head {
	display: grid;
	grid-template-columns: minmax(0, 4fr) auto;
	column-gap: 1rem;
	align-items: baseline;
	flex-wrap: nowrap;
}
.mhb-service-card:not(.has-hover-image) h2.mhb-card-title,
.mhb-service-card:not(.has-hover-image) h3.mhb-card-title,
.mhb-service-card:not(.has-hover-image) .mhb-card-title {
	min-width: 0;          /* lets the h2 wrap inside grid track */
	overflow-wrap: anywhere;
}
.mhb-service-card:not(.has-hover-image) .mhb-service-card-price {
	text-align: right;
	white-space: nowrap;
	justify-self: end;
}

/* (5)+(6) Scroll-to-top: floating on mobile, stacked under the WhatsApp FAB.
   Inline footer button becomes position:fixed below 768px. WhatsApp FAB
   moves up to bottom: 88px on mobile so the to-top sits at the corner. */
@media (max-width: 768px) {
	.mhb-footer-bottom-right { gap: 0; }
	.mhb-to-top {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 9997; /* below WhatsApp (9998) so the chat tooltip wins focus */
		width: 44px;
		height: 44px;
		background: var(--charcoal);
		border-color: var(--charcoal);
		color: var(--cream-50);
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity .25s ease, transform .25s ease, background .2s ease;
	}
	.mhb-to-top.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	.mhb-to-top:hover {
		background: var(--rose);
		border-color: var(--rose);
		color: #fff;
		transform: translateY(-2px);
	}
	/* WhatsApp FAB sits ABOVE the scroll-to-top on mobile. */
	.mhb-wa-fab,
	.mhb-wa-fab:link,
	.mhb-wa-fab:visited { right: 16px; bottom: 76px; }
}

/* (5) Cookie banner clearance — give the kr.ml credit room above the
       fixed-bottom cookie bar on mobile. Padding is harmless once the
       user accepts (just a touch of cream space at the page foot). */
@media (max-width: 768px) {
	.mhb-footer-bottom { padding-bottom: 96px; }
}

/* (7) Mobile menu / navbar — keep solid cream backdrop both open and
       closed. Avoids backdrop-filter darkening on iOS Safari, which made
       the closed state appear darker than the open state. !important
       wins over the original .mhb-navbar rule regardless of cache state. */
@media (max-width: 900px) {
	.mhb-navbar {
		background: var(--cream) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

/* (7b) Hide the WordPress admin bar on the mobile frontend. Logged-in
        admins can still reach wp-admin via /wp-admin or the menu — the
        floating dark bar at the top of the viewport was the actual
        "dark charcoal bar" the user kept seeing on iPhone. */
@media (max-width: 768px) {
	#wpadminbar { display: none !important; }
	html { margin-top: 0 !important; }
	html.wp-toolbar { padding-top: 0 !important; }
	body.admin-bar .mhb-topbar { top: 0 !important; }
	body.admin-bar .mhb-navbar { top: 36px !important; }
}

/* (kr.ml credit) On mobile the bottom row stacks vertically and centres,
   so the WhatsApp + scroll-to-top stack on the right doesn't sit on top
   of the credit. */
@media (max-width: 768px) {
	.mhb-footer-bottom-inner {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: .25rem;
	}
	.mhb-footer-bottom-right { justify-content: center; }
}

/* (slider arrows) Hard-hide above the slider breakpoint. */
@media (min-width: 1025px) {
	.mhb-portfolio-slider-controls { display: none !important; }
}

/* (burger reset) iOS Safari was painting a translucent dark
   tap-highlight rectangle over the burger button, which read as a
   "dark charcoal bar" each time the user opened/closed the menu.
   Force-clear every default UA chrome. */
.mhb-burger {
	background: transparent !important;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.mhb-burger:focus,
.mhb-burger:active {
	background: transparent !important;
	box-shadow: none !important;
}
/* Keep keyboard-focus indicator for a11y, but as a thin gold ring not
   the iOS chunky overlay. */
.mhb-burger:focus-visible {
	background: transparent !important;
	box-shadow: 0 0 0 2px var(--gold) !important;
	border-radius: 4px;
}

/* (safe area / landscape notch) Without viewport-fit=cover, iOS Safari
   in landscape on notched iPhones renders dark side-gutters where the
   page can't reach. Now we OPT IN to draw edge-to-edge and pad the
   inner content by safe-area-inset-* so nothing hides under the notch. */
@supports (padding: max(0px)) {
	.mhb-navbar-inner,
	.mhb-topbar-inner,
	.mhb-footer-bottom-inner,
	.mhb-footer-cta-inner,
	.mhb-footer-main {
		padding-left:  max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
	}
}

/* (3) Filter pills — drop the awkward 3-1-1-2 wrap on mobile by
       shrinking pill padding/letter-spacing and centring the row.
       Same change applies to the homepage portfolio filters and to
       the services listing filter row. */
@media (max-width: 768px) {
	.mhb-portfolio-filters,
	.mhb-cat-filter-row {
		justify-content: center;
		gap: .4rem;
	}
	.mhb-filter-pill,
	.mhb-cat-filter-row .mhb-cat-pill {
		padding: .65rem 1.1rem !important;
		font-size: .68rem !important;
		letter-spacing: .14em !important;
	}
}

/* (4 — footer-gap fix WITHOUT sticky footer)
   The flex-sticky-footer approach broke trackpad/scrollbar scroll, so
   we drop it. Instead, use colour matching:
   - html bg = rose-dark  (matches footer; covers any overscroll reveal)
   - body bg = rose-dark  (overrides the line-43 cream !important)
   - main bg = cream      (covers visible content; sections paint their own bgs on top)
   With these, any gap below the footer renders rose-dark = invisible
   against the footer. Vertical scrolling stays untouched. */
html { background: var(--rose-dark) !important; overscroll-behavior: none; }
body { background: var(--rose-dark) !important; overscroll-behavior: none; }
body > main,
body > #mhb-main,
body > .mhb-main { background: var(--cream); }

/* (4) Mobile portfolio slider — convert the grid into a horizontal
       scroll-snap carousel on phones AND iPhone-in-landscape (~932px),
       with arrow buttons OVERLAID on the slider edges + dots underneath.
       Arrows are absolute-positioned over the slider so they're
       impossible to miss. Uses 1024px so iPad portrait + all iPhones
       in any orientation get the slider. */
.mhb-portfolio-slider-wrap { position: relative; }
.mhb-portfolio-slider-arrow-overlay { display: none !important; }
.mhb-portfolio-slider-controls { display: none; }
@media (max-width: 1024px) {
	/* Overlay arrows — sit on top of the slider, left + right edges. */
	.mhb-portfolio-slider-arrow-overlay {
		display: inline-flex !important;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: rgba(42, 34, 37, .85);
		color: #fff;
		border: 1px solid rgba(255, 255, 255, .3);
		align-items: center;
		justify-content: center;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: transparent;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
		transition: background .2s ease, transform .2s ease;
		padding: 0;
	}
	.mhb-portfolio-slider-arrow-overlay.mhb-portfolio-slider-prev { left: 8px; }
	.mhb-portfolio-slider-arrow-overlay.mhb-portfolio-slider-next { right: 8px; }
	.mhb-portfolio-slider-arrow-overlay:hover,
	.mhb-portfolio-slider-arrow-overlay:focus-visible,
	.mhb-portfolio-slider-arrow-overlay:active {
		background: var(--gold);
		color: #fff;          /* keep chevron visible against gold bg */
		transform: translateY(-50%) scale(1.05);
		outline: none;
	}
	.mhb-portfolio-slider-arrow-overlay[disabled] {
		opacity: .3;
		pointer-events: none;
	}

	.mhb-portfolio-grid {
		grid-template-columns: none;
		grid-auto-rows: auto;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		gap: .75rem;
		padding-bottom: .5rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.mhb-portfolio-grid::-webkit-scrollbar { display: none; }
	.mhb-portfolio-grid .mhb-portfolio-item {
		flex: 0 0 calc(100% - 2rem);
		max-width: calc(100% - 2rem);
		height: 320px;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
	/* When category filter hides items, the slider should still snap on
	   only the visible items — `display:none` removes them from layout. */
	.mhb-portfolio-grid .mhb-portfolio-item.is-hidden { display: none; }

	.mhb-portfolio-slider-controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		margin-top: 1rem;
	}
	.mhb-portfolio-slider-dots {
		display: inline-flex;
		gap: .4rem;
		align-items: center;
	}
	.mhb-portfolio-slider-dot {
		appearance: none;
		background: rgba(240, 230, 220, .3);
		border: none;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		padding: 0;
		cursor: pointer;
		transition: background .2s ease, transform .2s ease;
	}
	.mhb-portfolio-slider-dot.is-active {
		background: var(--gold);
		transform: scale(1.3);
	}
}

/* ============================================================
   WC Block Checkout — mobile layout fixes
   WC's container query sets sidebar to order:0 on small screens
   which places the order summary ABOVE the form. Override to keep
   the natural source order: form first, order summary below.
   Also auto-expand the order summary when it's in its bottom position.
   ============================================================ */
@media (max-width: 700px) {
	.wc-block-checkout__sidebar {
		order: 2 !important;
		margin-bottom: 0 !important;
		margin-top: 1.5rem !important;
	}
	.wc-block-checkout__main {
		order: 1 !important;
	}
	/* Force the order summary content to show (no collapsed toggle at top) */
	.wc-block-components-order-summary__content {
		display: block !important;
	}
}

/* ============================================================
   Shop grid — mobile 2-column override (end-of-file, highest cascade).
   Mirrors the desktop selectors exactly (with html prefix to beat their
   specificity) so the 2-column rule always wins on narrow viewports,
   even when body.post-type-archive-product or body.tax-product_cat
   is present and would otherwise out-specificity the earlier rule.
   ============================================================ */
@media screen and (max-width: 1024px) {
	html .site-main .mhb-shop-main ul.products,
	html body.post-type-archive-product .site-main ul.products,
	html body.tax-product_cat .site-main ul.products,
	html body.tax-product_tag .site-main ul.products,
	html body.post-type-archive-product .mhb-shop-main ul.products,
	html body.tax-product_cat .mhb-shop-main ul.products,
	html body.tax-product_tag .mhb-shop-main ul.products,
	html .mhb-shop-main ul.products,
	html .mhb-shop-main ul.products.columns-3,
	html .mhb-shop-main ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 12px !important;
	}
}