/*
 * BBH Block Theme - supplementary styles
 *
 * theme.json handles the vast majority of styling via design tokens.
 * This file is for the handful of patterns/effects that JSON can't express:
 * - custom list bullet styles
 * - smooth-scroll for in-page CTAs
 * - mini-cart polish
 * - WC overrides that don't have block equivalents yet
 */

/* Smooth scroll for #wholesale-inquiry and #sample-order anchors */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

/* Gold-checkmark bullet style used in wholesale tier cards + sample CTA */
ul.is-style-checkmarks {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

ul.is-style-checkmarks li {
	position: relative;
	padding-left: 1.75rem;
}

ul.is-style-checkmarks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 1.05rem;
	height: 1.05rem;
	background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a654' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Plain bullet-less list (footer link columns) */
ul.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

ul.is-style-no-bullets li {
	padding-left: 0;
}

ul.is-style-no-bullets a {
	color: inherit;
	text-decoration: none;
	transition: color 120ms ease;
}

ul.is-style-no-bullets a:hover {
	color: var(--wp--preset--color--gold);
}

/* Footer site title gold-link feel */
footer .wp-block-site-title a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* Navigation hover state polish */
.wp-block-navigation__container .wp-block-navigation-item__content {
	transition: color 120ms ease;
}

.wp-block-navigation__container .wp-block-navigation-item__content:hover,
.wp-block-navigation__container .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold-dark);
}

/* Details/summary (FAQ) styling */
.wp-block-details summary {
	cursor: pointer;
	padding: 0.25rem 0;
	font-size: 1.0625rem;
	transition: color 120ms ease;
	list-style-position: outside;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--gold-dark);
}

.wp-block-details[open] summary {
	color: var(--wp--preset--color--gold-dark);
	margin-bottom: 0.75rem;
}

/* Cover/hero text shadow for legibility over dim overlays */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover p {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Button outline variation uses theme.json but needs a small visual nudge */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
}

/* Mini-cart icon color in header */
.wp-block-woocommerce-mini-cart-contents,
.wc-block-mini-cart__button {
	color: var(--wp--preset--color--ink);
}

/* Responsive: stack hero buttons on mobile */
@media (max-width: 600px) {
	.wp-block-cover .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-cover .wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.wp-block-cover .wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* WooCommerce: hide default breadcrumb (we'll add custom one later if needed) */
.woocommerce-breadcrumb {
	display: none;
}

/* WC notice styling to match brand */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--gold);
}

.woocommerce-error {
	border-top-color: #b00020;
}

/* ===========================================================
   GRAVITY FORMS — Wholesale Inquiry + any other GF form
   Restyles default GF output to match the BBH brand: rounded
   inputs, gold focus state, full-width gold submit button,
   refined typography. Works with both legacy GF (no theme
   class) and GF 2.5+ "Orbital" theme.
   =========================================================== */

.gform_wrapper {
	font-family: var(--wp--preset--font-family--inter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	max-width: 100%;
}

/* Wrapper around all fields - reset margin */
.gform_wrapper form,
.gform_wrapper .gform_fields {
	margin: 0;
	padding: 0;
}

/* Field container */
.gform_wrapper .gfield {
	margin: 0 0 1.5rem 0;
	padding: 0;
	list-style: none;
}

/* Labels */
.gform_wrapper .gfield_label,
.gform_wrapper.gravity-theme .gfield_label {
	display: block;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0 0 0.625rem 0;
	line-height: 1.2;
}

/* Required asterisk - subtle gold, not red */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text_asterisk {
	color: var(--wp--preset--color--gold-dark, #a8893f);
	font-weight: 700;
	margin-left: 0.25rem;
}

.gform_wrapper .gfield_required_indicator {
	display: none; /* hide redundant "Required" text some GF themes show */
}

/* All text-like inputs */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="datetime-local"],
.gform_wrapper input[type="month"],
.gform_wrapper input[type="time"],
.gform_wrapper input[type="week"],
.gform_wrapper input[type="search"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.875rem 1rem;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #1a1a1a);
	background-color: #ffffff;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
	transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Hover state - subtle border darken */
.gform_wrapper input[type="text"]:hover,
.gform_wrapper input[type="email"]:hover,
.gform_wrapper input[type="tel"]:hover,
.gform_wrapper input[type="url"]:hover,
.gform_wrapper select:hover,
.gform_wrapper textarea:hover {
	border-color: var(--wp--preset--color--mist, #cfcfcf);
}

/* Focus state - gold border + subtle glow */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold, #c9a654);
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.18);
	background-color: #ffffff;
}

/* Placeholder text */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--wp--preset--color--stone, #7a7a7a);
	opacity: 1;
	font-style: italic;
}

/* Textarea - taller, vertical resize only */
.gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

/* Custom select dropdown with gold caret */
.gform_wrapper select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8893f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 14px;
	padding-right: 2.75rem;
	cursor: pointer;
}

/* Composite Name field - First / Last side by side */
.gform_wrapper .ginput_complex.ginput_container_name {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin: 0;
}

.gform_wrapper .ginput_complex .ginput_left,
.gform_wrapper .ginput_complex .ginput_right,
.gform_wrapper .ginput_complex .name_first,
.gform_wrapper .ginput_complex .name_last,
.gform_wrapper .ginput_complex span:not(.gfield_description) {
	flex: 1 1 calc(50% - 0.5rem);
	min-width: 200px;
	padding: 0;
}

/* Composite sub-labels (First / Last labels under composite name field) */
.gform_wrapper .ginput_complex label,
.gform_wrapper .ginput_complex .gform-field-label--type-sub {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wp--preset--color--stone, #7a7a7a);
	margin-top: 0.4rem;
	display: block;
}

/* Field description / instructions */
.gform_wrapper .gfield_description {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--smoke, #4a4a4a);
	margin-top: 0.4rem;
	line-height: 1.5;
}

/* Submit button footer */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	margin: 2rem 0 0 0;
	padding: 0;
}

/* Submit button - match site CTAs */
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper button[type="submit"] {
	display: inline-block;
	width: auto;
	min-width: 240px;
	padding: 1rem 2.5rem;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--black, #0d0d0d);
	background-color: var(--wp--preset--color--gold, #c9a654);
	border: 1px solid var(--wp--preset--color--gold, #c9a654);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 80ms ease;
	box-shadow: 0 2px 6px rgba(201, 166, 84, 0.25);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper button[type="submit"]:hover {
	background-color: var(--wp--preset--color--gold-dark, #a8893f);
	border-color: var(--wp--preset--color--gold-dark, #a8893f);
	color: var(--wp--preset--color--white, #ffffff);
	box-shadow: 0 4px 12px rgba(168, 137, 63, 0.35);
}

.gform_wrapper input[type="submit"]:active,
.gform_wrapper .gform_button:active,
.gform_wrapper button[type="submit"]:active {
	transform: translateY(1px);
	box-shadow: 0 1px 3px rgba(168, 137, 63, 0.3);
}

.gform_wrapper input[type="submit"]:focus,
.gform_wrapper .gform_button:focus,
.gform_wrapper button[type="submit"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.25), 0 2px 6px rgba(201, 166, 84, 0.25);
}

/* AJAX submission spinner */
.gform_wrapper .gform_ajax_spinner {
	margin-left: 0.75rem;
	vertical-align: middle;
	width: 20px;
	height: 20px;
}

/* Validation: field-level error */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield.gfield_error input,
.gform_wrapper .gfield.gfield_error select,
.gform_wrapper .gfield.gfield_error textarea {
	border-color: #b00020;
	background-color: #fff8f8;
}

.gform_wrapper .gfield_error .gfield_label {
	color: #b00020;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gform_validation_errors {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #b00020;
	margin-top: 0.4rem;
	background: none;
	border: none;
	padding: 0;
}

/* Top-of-form validation summary box */
.gform_wrapper .gform_validation_errors {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background-color: #fff8f8;
	border: 1px solid #f0c4c4;
	border-radius: 6px;
}

.gform_wrapper .gform_validation_errors h2 {
	font-size: 0.875rem;
	font-weight: 600;
	color: #b00020;
	margin: 0 0 0.4rem;
}

/* Confirmation message after successful submit */
.gform_confirmation_wrapper,
.gform_confirmation_message {
	padding: 2.5rem 2rem;
	background-color: var(--wp--preset--color--paper, #f7f6f3);
	border: 1px solid var(--wp--preset--color--gold-light, #e5d09a);
	border-radius: 6px;
	text-align: center;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* Checkbox + radio buttons (in case form ever adds them) */
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
	width: 18px;
	height: 18px;
	margin-right: 0.5rem;
	accent-color: var(--wp--preset--color--gold, #c9a654);
	cursor: pointer;
}

.gform_wrapper .gchoice label {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
	cursor: pointer;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Mobile responsive */
@media (max-width: 600px) {
	.gform_wrapper .ginput_complex.ginput_container_name {
		flex-direction: column;
		gap: 1rem;
	}

	.gform_wrapper .ginput_complex .ginput_left,
	.gform_wrapper .ginput_complex .ginput_right,
	.gform_wrapper .ginput_complex .name_first,
	.gform_wrapper .ginput_complex .name_last {
		flex: 1 1 100%;
		min-width: 0;
	}

	.gform_wrapper input[type="submit"],
	.gform_wrapper .gform_button,
	.gform_wrapper button[type="submit"] {
		width: 100%;
		min-width: 0;
	}
}

/* ===========================================================
   WOOCOMMERCE — SHOP, CART, CHECKOUT, PDP
   Brand styling for the WC pages that ship with default look.
   =========================================================== */

/* ---- SHOP / CATEGORY ARCHIVE ---- */

/* The product collection grid. Uses CSS Grid on ALL viewports so card
   heights are automatically equalized within each row (which lets the
   button-to-bottom flex trick work). WC uses flex by default, which
   leaves card heights unequal and buttons floating at different
   vertical positions across the row.
   IMPORTANT: do NOT set width:100% / margin-left:0 here — that breaks
   out of the parent's constrained layout and causes left-alignment
   across the full viewport. Let the parent handle width + centering. */
html body ul.wp-block-woocommerce-product-template,
html body ul.wp-block-woocommerce-product-collection,
html body .wp-block-woocommerce-product-template.is-flex-container,
html body ul.is-flex-container.columns-1,
html body ul.is-flex-container.columns-2,
html body ul.is-flex-container.columns-3,
html body ul.is-flex-container.columns-4,
html body ul.is-flex-container.columns-5,
html body ul.is-flex-container.columns-6,
html body .wp-block-woocommerce-product-collection ul.is-flex-container {
	display: grid !important;
	gap: 1.5rem !important;
	padding: 0 !important;
	list-style: none !important;
	align-items: stretch !important;
}

/* Make sure the product-collection wrapper respects the parent main's
   constrained width (1280px contentSize) and stays centered. WC may
   set it to alignwide/alignfull which breaks centering. */
main .wp-block-woocommerce-product-collection {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Default 4-column on desktop (matches WC's columns-4 attribute we set) */
html body ul.wp-block-woocommerce-product-template,
html body ul.is-flex-container.columns-4,
html body .wp-block-woocommerce-product-template.is-flex-container {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Other column variants if used elsewhere */
html body ul.is-flex-container.columns-1 { grid-template-columns: 1fr !important; }
html body ul.is-flex-container.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body ul.is-flex-container.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body ul.is-flex-container.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
html body ul.is-flex-container.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* Product cards take their full grid cell width + stretch full height */
html body ul.wp-block-woocommerce-product-template > li,
html body ul.wp-block-woocommerce-product-template > li.wc-block-product,
html body .wp-block-woocommerce-product-template > .wc-block-product,
html body .is-flex-container > li.wc-block-product {
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	grid-column: span 1 !important;
}

@media (max-width: 1024px) {
	/* Tablet: 3 columns (between mobile 2 and desktop 4) */
	html body ul.wp-block-woocommerce-product-template,
	html body ul.is-flex-container.columns-4,
	html body ul.is-flex-container.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 1.25rem !important;
	}
}

@media (max-width: 768px) {
	/* Mobile: 2 columns */
	html body ul.wp-block-woocommerce-product-template,
	html body ul.is-flex-container.columns-4,
	html body ul.is-flex-container.columns-3,
	html body ul.is-flex-container.columns-2 {
		grid-template-columns: 1fr 1fr !important;
		gap: 1rem !important;
	}

	/* Legacy WC list (single-product related products, [products] shortcode, etc.) */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products.columns-1,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem !important;
	}

	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product,
	ul.products li.product {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}

	/* Product titles and prices tighter on small screens */
	.wp-block-woocommerce-product-collection .wp-block-post-title,
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.9375rem;
	}

	.wc-block-components-product-price,
	ul.products li.product .price {
		font-size: 0.875rem;
	}

	/* Better tap-targets on shop archive Select Options button */
	ul.products li.product .button {
		font-size: 0.75rem !important;
		padding: 0.625rem 1rem !important;
	}
}

/* ===========================================================
   HEADER — dark version (matches footer for elegance)
   =========================================================== */

.bbh-site-header.has-black-background-color {
	background-color: #0d0d0d !important;
}

.bbh-site-header .bbh-header-logo {
	margin: 0;
}

.bbh-site-header .bbh-header-logo img {
	display: block;
	height: auto;
	max-height: 44px;
	width: auto;
	max-width: 180px;
}

/* Nav links on black header */
.bbh-site-header .wp-block-navigation .wp-block-navigation-item__content,
.bbh-site-header .wp-block-navigation a {
	color: #ffffff !important;
	transition: color 150ms ease;
}

.bbh-site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.bbh-site-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.bbh-site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--gold, #c9a654) !important;
}

/* Login link + cart icon on black header */
.bbh-site-header .wp-block-loginout a,
.bbh-site-header .bbh-login-link a {
	color: #ffffff !important;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color 150ms ease;
}

.bbh-site-header .wp-block-loginout a:hover {
	color: var(--wp--preset--color--gold, #c9a654) !important;
}

/* Mini-cart icon (the bag icon) tinted white on dark header */
.bbh-site-header .wp-block-woocommerce-mini-cart-contents,
.bbh-site-header .wc-block-mini-cart__button,
.bbh-site-header .wc-block-mini-cart__button svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}

.bbh-site-header .wc-block-mini-cart__button:hover svg {
	fill: var(--wp--preset--color--gold, #c9a654) !important;
}

/* Mobile menu toggle icon */
.bbh-site-header .wp-block-navigation__responsive-container-open svg,
.bbh-site-header .wp-block-navigation__responsive-container-close svg {
	fill: #ffffff !important;
}

/* Mobile menu overlay - keep dark theme inside the slide-out */
.bbh-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0d0d0d !important;
}

.bbh-site-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: #ffffff !important;
}

.bbh-site-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--gold, #c9a654) !important;
}

/* Mobile header reorder: [logo] ... [hamburger][account][cart] grouped right
   On desktop the nav stays in its middle position with full items.
   On mobile, the nav collapses to just the hamburger toggle which we
   re-position to be right before the account icon. */
@media (max-width: 781px) {
	/* Make the parent group properly arrange children */
	.bbh-site-header > .wp-block-group {
		justify-content: space-between !important;
		gap: 0 !important;
	}

	/* Logo stays on the left and pushes everything else right */
	.bbh-site-header .bbh-header-logo {
		order: 1 !important;
		flex: 0 0 auto !important;
		margin-right: auto !important;
	}

	/* Nav (with hamburger toggle visible on mobile) goes BEFORE the actions */
	.bbh-site-header > .wp-block-group > .wp-block-navigation,
	.bbh-site-header .bbh-primary-nav {
		order: 2 !important;
		flex: 0 0 auto !important;
		margin: 0 0.75rem 0 0 !important;
	}

	/* Account + cart actions stay rightmost */
	.bbh-site-header .bbh-header-actions {
		order: 3 !important;
		flex: 0 0 auto !important;
		gap: 0.75rem !important;
	}

	/* Hamburger toggle button styling on dark header */
	.bbh-site-header .wp-block-navigation__responsive-container-open {
		color: #ffffff !important;
		padding: 0 !important;
	}
}

/* Active nav state — WordPress's Navigation block sets aria-current="page"
 * on the link for the currently-viewed page. We were never styling it, so
 * users couldn't tell what page they were on from the menu. Now the active
 * link goes gold with a thin underline rule that sits flush under the
 * uppercase text. Works on every page automatically. */
.bbh-primary-nav .wp-block-navigation-item > a {
	position: relative;
	transition: color 180ms ease;
}

.bbh-primary-nav a[aria-current="page"],
.bbh-primary-nav a.is-current-nav-item,
.bbh-primary-nav .wp-block-navigation-item > a[aria-current="page"],
.bbh-primary-nav .wp-block-navigation-item.current-menu-item > a,
.bbh-primary-nav .wp-block-navigation-item.current_page_item > a {
	color: var(--wp--preset--color--gold, #d9b96e) !important;
}

.bbh-primary-nav a[aria-current="page"]::after,
.bbh-primary-nav a.is-current-nav-item::after,
.bbh-primary-nav .wp-block-navigation-item > a[aria-current="page"]::after,
.bbh-primary-nav .wp-block-navigation-item.current-menu-item > a::after,
.bbh-primary-nav .wp-block-navigation-item.current_page_item > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.45rem;
	height: 2px;
	background: var(--wp--preset--color--gold, #d9b96e);
	border-radius: 1px;
}

/* In the mobile overlay menu, the underline looks odd because items are
 * stacked. Use a gold left-edge accent there instead. */
.wp-block-navigation__responsive-container .bbh-primary-nav .wp-block-navigation-item > a[aria-current="page"]::after,
.wp-block-navigation__responsive-container .bbh-primary-nav .wp-block-navigation-item.current-menu-item > a::after {
	display: none;
}

/* Kill the blockGap (1.5rem default) between top-level template parts.
   This is the white strip that was showing between the black header
   and the dark hero. WP applies it via --wp--style--block-gap on the
   wp-site-blocks scope. */
.wp-site-blocks {
	--wp--style--block-gap: 0 !important;
}

.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

/* Specifically: header, main, footer have no gap between them */
.wp-site-blocks > main,
.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-site-blocks > .bbh-site-header,
.wp-site-blocks > .bbh-site-header + *,
header.bbh-site-header + main,
header + main,
main + footer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Cover blocks that are the first child of main start flush against header */
main > .wp-block-cover:first-child,
main > .wp-block-cover.alignfull:first-child,
main > .wp-block-group:first-child > .wp-block-cover:first-child {
	margin-top: 0 !important;
}

/* Footer logo sizing */
.bbh-footer-logo {
	margin: 0;
}

.bbh-footer-logo img {
	display: block;
	height: auto;
	max-height: 56px;
	width: auto;
	max-width: 200px;
}

/* Search toggle icon in header — same styling as account icon */
.bbh-header-actions .bbh-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: none;
	color: #ffffff;
	cursor: pointer;
	transition: color 150ms ease;
}

.bbh-header-actions .bbh-search-toggle:hover,
.bbh-header-actions .bbh-search-toggle:focus {
	color: var(--wp--preset--color--gold, #c9a654);
	outline: none;
}

.bbh-header-actions .bbh-search-toggle svg {
	display: block;
}

/* Person icon (account link) in header — white, gold on hover */
.bbh-header-actions .bbh-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #ffffff;
	text-decoration: none;
	transition: color 150ms ease;
}

.bbh-header-actions .bbh-account-link:hover,
.bbh-header-actions .bbh-account-link:focus {
	color: var(--wp--preset--color--gold, #c9a654);
}

.bbh-header-actions .bbh-account-link svg {
	display: block;
}

/* Hide any duplicate account icons WooCommerce auto-injects.
   WC's customer-account block + any legacy account widgets get
   suppressed everywhere in the header, leaving only our SVG icon. */
.bbh-site-header .wp-block-woocommerce-customer-account,
.bbh-site-header .wc-block-customer-account,
.bbh-site-header .wp-block-woocommerce-customer-account-block,
.bbh-site-header [class*="customer-account"]:not(.bbh-account-link),
.bbh-site-header .wp-block-loginout {
	display: none !important;
}

/* Some WC nav-injection adds an icon directly as an <a> inside the nav.
   If it's positioned as the last nav-item, hide it. */
.bbh-site-header .wp-block-navigation-item.wp-block-woocommerce-customer-account-item {
	display: none !important;
}

/* Product card hover - subtle lift */
.wp-block-woocommerce-product-collection .wc-block-product,
.wp-block-woocommerce-product-collection .wp-block-post {
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.wp-block-woocommerce-product-collection .wc-block-product:hover,
.wp-block-woocommerce-product-collection .wp-block-post:hover {
	transform: translateY(-2px);
}

/* Product image: locked to 1:1 square aspect ratio.
 *
 * Background: shop archive product images can come from any aspect ratio
 * the user uploaded — square bottle shots, portrait wig photos, landscape
 * sets. Without a constrained container, each card grows to its natural
 * image height, which:
 *   - Makes cards in the same row have different heights (first column
 *     looks "lower" than the rest if its product has a taller image)
 *   - Makes single-product pages render with a huge gap between the
 *     title and the button (the card balloons to match a tall image)
 *
 * Fix: every card image lives in a 1:1 square container. `object-fit:
 * contain` shows the whole image (no cropping), letterboxing portrait
 * or landscape images against a soft cream background that matches the
 * card aesthetic. Result: every card has identical image height, so
 * card heights are uniform across rows AND on single-item pages.
 *
 * Target both the new wp-block-woocommerce-product-image wrapper and
 * the underlying .wc-block-components-product-image span/anchor that
 * WC actually renders the <img> inside. */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-collection .wc-block-components-product-image,
ul.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image,
ul.wp-block-woocommerce-product-template .wc-block-components-product-image {
	display: block;
	aspect-ratio: 1 / 1;
	background: transparent;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img,
ul.wp-block-woocommerce-product-template .wc-block-components-product-image img,
ul.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	padding: 0.5rem;
	box-sizing: border-box;
	border-radius: 0 !important; /* container handles the rounding */
	display: block;
}

/* Anchor inside the image block (the <a> that wraps the img and links
 * to the product page) — make it fill the container so click target
 * matches the visible image area. */
.wp-block-woocommerce-product-collection .wc-block-components-product-image > a,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image > a,
ul.wp-block-woocommerce-product-template .wc-block-components-product-image > a,
ul.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Product cards: flex-column with tight gap. Buttons stay aligned across
   the row not via margin-top:auto (which created variable whitespace
   above the button on cards with shorter titles) but via the title
   min-height below, which reserves a consistent 2 lines per title. */
ul.wp-block-woocommerce-product-template > li.wc-block-product,
.wp-block-woocommerce-product-collection .wc-block-product {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	gap: 0.35rem;
}

/* Button sits naturally just below the price — no auto-margin pushing it
   to the bottom of the card. Cards still align across the row because
   the title min-height (set below) reserves the same vertical space for
   every product, so the button position is consistent. */
ul.wp-block-woocommerce-product-template > li.wc-block-product > [data-block-name="woocommerce/product-button"],
ul.wp-block-woocommerce-product-template > li.wc-block-product > .wp-block-button,
.wp-block-woocommerce-product-collection .wc-block-product > [data-block-name="woocommerce/product-button"] {
	margin-top: 0.5rem !important;
	margin-bottom: 0 !important;
}

/* Title: clamps at 2 lines so very long names don't blow out card height,
   but does NOT reserve 2 lines as min-height. With the 1:1 image lock
   above keeping image heights uniform, the natural content height of
   each card is already consistent enough for row alignment — reserving
   a 2nd title line just created visible empty padding on cards with
   shorter names (and a massive dead-space gap on single-product pages
   like /shop/page/5/ where the product had a 1-line name and no price). */
ul.wp-block-woocommerce-product-template > li.wc-block-product > .wp-block-post-title,
ul.wp-block-woocommerce-product-template > li.wc-block-product > [data-block-name="woocommerce/product-title"],
ul.wp-block-woocommerce-product-template > li.wc-block-product h3 {
	margin: 0.5rem 0 0.2rem !important;
	font-size: 0.9375rem !important;
	line-height: 1.3 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

ul.wp-block-woocommerce-product-template > li.wc-block-product > [data-block-name="woocommerce/product-price"],
ul.wp-block-woocommerce-product-template > li.wc-block-product .wc-block-components-product-price {
	margin: 0 0 0.15rem !important;
	font-size: 0.875rem !important;
}

/* Compact product card button (used on shop archive + category pages).
   Less visual weight than the single-product-page Add to Cart button. */
ul.wp-block-woocommerce-product-template .wp-block-button__link,
ul.wp-block-woocommerce-product-template a.wc-block-components-product-button__button,
.wp-block-woocommerce-product-collection .wp-block-button__link,
ul.products li.product .button.add_to_cart_button,
ul.products li.product a.button {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.625rem 0.75rem !important;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	text-align: center !important;
	color: var(--wp--preset--color--black, #0d0d0d) !important;
	background-color: var(--wp--preset--color--gold, #c9a654) !important;
	border: 1px solid var(--wp--preset--color--gold, #c9a654) !important;
	border-radius: 3px !important;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color 150ms ease, color 150ms ease;
	white-space: normal !important;
}

ul.wp-block-woocommerce-product-template .wp-block-button__link:hover,
ul.wp-block-woocommerce-product-template a.wc-block-components-product-button__button:hover,
.wp-block-woocommerce-product-collection .wp-block-button__link:hover,
ul.products li.product .button.add_to_cart_button:hover,
ul.products li.product a.button:hover {
	background-color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	border-color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	color: var(--wp--preset--color--white, #ffffff) !important;
}

/* Even more compact on small screens where card width is ~180px */
@media (max-width: 768px) {
	ul.wp-block-woocommerce-product-template .wp-block-button__link,
	ul.wp-block-woocommerce-product-template a.wc-block-components-product-button__button,
	ul.products li.product .button.add_to_cart_button,
	ul.products li.product a.button {
		padding: 0.5625rem 0.5rem !important;
		font-size: 0.6875rem !important;
		letter-spacing: 0.06em !important;
	}

	/* Tighter title on mobile cards */
	ul.wp-block-woocommerce-product-template > li.wc-block-product > .wp-block-post-title,
	ul.wp-block-woocommerce-product-template > li.wc-block-product h3 {
		font-size: 0.8125rem !important;
		line-height: 1.25 !important;
	}

	ul.wp-block-woocommerce-product-template > li.wc-block-product .wc-block-components-product-price {
		font-size: 0.8125rem !important;
	}
}

/* Sale badge - brand gold pill instead of red */
.wc-block-components-product-sale-badge,
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.wp-block-post-featured-image .onsale {
	background-color: var(--wp--preset--color--gold, #c9a654) !important;
	color: var(--wp--preset--color--black, #0d0d0d) !important;
	border-radius: 2px !important;
	padding: 4px 10px !important;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.2 !important;
}

/* ---- SINGLE PRODUCT PAGE (PDP) ---- */

.single-product .product .product_title,
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0 0 1rem;
}

/* Price - prominent gold */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.single-product .product .price {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	margin: 0.75rem 0 1.25rem !important;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--wp--preset--color--stone, #7a7a7a);
	font-weight: 400;
	opacity: 0.7;
	margin-right: 0.5rem;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	background: none;
}

/* Star rating - gold instead of orange */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--wp--preset--color--gold, #c9a654);
}

/* Short description */
.woocommerce-product-details__short-description {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--smoke, #4a4a4a);
	margin-bottom: 1.5rem;
}

/* ===========================================================
   PDP — Visual variation swatches (replaces WC variation selects)
   The underlying <select> is hidden by inline style from JS; we
   show clickable swatch buttons that mirror its options.
   =========================================================== */

.bbh-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
	padding-top: 0.25rem;
}

.bbh-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.5rem 1rem;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink, #1a1a1a);
	background-color: #ffffff;
	border: 1.5px solid var(--wp--preset--color--fog, #ebebeb);
	border-radius: 4px;
	cursor: pointer;
	transition: all 150ms ease;
	user-select: none;
}

.bbh-swatch:hover {
	border-color: var(--wp--preset--color--gold-light, #e5d09a);
	transform: translateY(-1px);
}

.bbh-swatch.is-selected {
	border-color: var(--wp--preset--color--gold, #c9a654);
	background-color: var(--wp--preset--color--gold, #c9a654);
	color: var(--wp--preset--color--black, #0d0d0d);
	box-shadow: 0 2px 6px rgba( 201, 166, 84, 0.25 );
}

/* Color swatches: circular, color-filled. Made larger than the
   original 40px since the user noted they looked small. */
.bbh-swatch--color {
	width: 48px !important;
	height: 48px !important;
	min-height: 48px !important;
	min-width: 48px !important;
	border-radius: 50% !important;
	padding: 0 !important;
	border-width: 2px !important;
	border-color: var(--wp--preset--color--fog, #ebebeb) !important;
	position: relative;
	overflow: hidden;
}

.bbh-swatch--color.bbh-swatch--needs-border {
	border-color: var(--wp--preset--color--mist, #cfcfcf);
}

.bbh-swatch--color:hover {
	transform: scale( 1.05 );
}

.bbh-swatch--color.is-selected {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp--preset--color--gold, #c9a654);
	transform: none;
}

/* Color swatch with inner gold checkmark when selected */
.bbh-swatch--color.is-selected::after {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

/* Scent swatches: text pills with subtle tinted backgrounds */
.bbh-swatch--scent {
	background-color: var(--wp--preset--color--paper, #f7f6f3);
	min-width: 100px;
	text-transform: none;
	letter-spacing: 0;
}

/* Quantity swatches: bold numeric pills */
.bbh-swatch--quantity {
	min-width: 60px;
	padding: 0.625rem 1rem;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bbh-swatch--sample {
	background-color: var(--wp--preset--color--gold-light, #e5d09a);
	color: var(--wp--preset--color--black, #0d0d0d);
	border-color: var(--wp--preset--color--gold, #c9a654);
}

.bbh-swatch--text {
	min-width: 100px;
	text-transform: none;
	letter-spacing: 0;
}

/* Disable + dim swatch when option is unavailable (out of stock variation) */
.bbh-swatch[disabled],
.bbh-swatch.is-unavailable {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Mobile: smaller swatches but still tap-friendly */
@media (max-width: 600px) {
	.bbh-swatch {
		min-height: 36px;
		padding: 0.4375rem 0.75rem;
		font-size: 0.8125rem;
	}

	.bbh-swatch--color {
		width: 34px;
		height: 34px;
		min-height: 34px;
	}

	.bbh-swatch--quantity {
		min-width: 52px;
	}
}

/* ===========================================================
   PDP — Description tab icon-led sections
   JS adds .bbh-section-heading class to each h2/h3/h4/h5 inside
   the description tab + prepends a .bbh-section-icon span with
   SVG. CSS styles the result so each section feels like a card.
   =========================================================== */

.woocommerce-Tabs-panel--description .bbh-section-heading,
.woocommerce-product-details__short-description .bbh-section-heading,
.product .description .bbh-section-heading,
.woocommerce-Tabs-panel--description p.bbh-section-heading,
.woocommerce-product-details__short-description p.bbh-section-heading {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 2.25rem 0 1rem !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif) !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	border: none !important;
}

/* Inside p.bbh-section-heading, the <strong> wrapper inherits the heading look (not stronger bold) */
.woocommerce-Tabs-panel--description p.bbh-section-heading strong,
.woocommerce-product-details__short-description p.bbh-section-heading strong {
	font-weight: 600 !important;
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif) !important;
}

.woocommerce-Tabs-panel--description .bbh-section-heading:first-child {
	margin-top: 0;
}

/* Refined, understated subsection icon: ~33% smaller box + smaller glyph, a
   softer gold tint so the heading text stays the focus. */
.bbh-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background-color: rgba(201, 166, 84, 0.16);
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.bbh-section-icon svg {
	width: 13px;
	height: 13px;
	display: block;
	stroke: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-section-heading-text {
	flex: 1 1 auto;
	padding-top: 0;
}

/* Tighter spacing on description lists + paragraphs */
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol {
	margin: 0.75rem 0 1rem 1.25rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.woocommerce-Tabs-panel--description ul li,
.woocommerce-Tabs-panel--description ol li {
	margin-bottom: 0.375rem;
}

.woocommerce-Tabs-panel--description ul li strong,
.woocommerce-Tabs-panel--description p strong {
	color: var(--wp--preset--color--ink, #1a1a1a);
	font-weight: 600;
}

.woocommerce-Tabs-panel--description p {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--smoke, #4a4a4a);
	margin: 0.75rem 0;
}

/* Accordion subsection headings (.bbh-acc__panel) — give them the same flex
   icon+text layout the legacy description tab had (they were display:block, so
   the icon floated against the text). Centred, tight gap, heading-led. */
.bbh-acc__panel .bbh-section-heading {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 1.4rem 0 0.6rem !important;
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif) !important;
	font-size: 1.08rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

.bbh-acc__panel .bbh-section-heading:first-child {
	margin-top: 0 !important;
}

/* Collapse empty / unresolved media embeds inside accordion panels. One
   product's description has a YouTube embed whose oEmbed didn't resolve, leaving
   an empty figure that still reserves a 16:9 (~436px) box of whitespace. Hide
   only embeds with NO real media — ones that render an iframe/video are kept,
   so this never affects other products or sections. */
.bbh-acc__panel .wp-block-embed:not(:has(iframe)):not(:has(video)) {
	display: none !important;
}

/* Mobile: tighter icon sizing */
@media (max-width: 600px) {
	.bbh-section-icon {
		width: 20px;
		height: 20px;
	}

	.bbh-section-icon svg {
		width: 12px;
		height: 12px;
	}

	.woocommerce-Tabs-panel--description .bbh-section-heading,
	.bbh-acc__panel .bbh-section-heading {
		font-size: 1.02rem !important;
		gap: 0.45rem !important;
	}
}

/* ===========================================================
 * PDP VARIATION + ADD-ONS FORM — uniform field styling
 *
 * Three sources of fields render in the buy box:
 *   1. Native WC variation attributes (Select Bottle Color, etc.)
 *      → table.variations > tr > td.label > label + td.value > select
 *   2. WC Product Add-Ons plugin (Need product label designed?, etc.)
 *      → div.wc-pao-addon > h3.wc-pao-addon-name + select/input
 *   3. Other addon plugins (Yith / TC / WPC / etc.)
 *      → .product-addon, .product-addon-name, .tc-extra-product-options
 *
 * Each plugin renders its own markup with its own default styling. We
 * normalise everything here so labels read as the same small uppercase
 * tracked text, dropdowns share visual chrome, and helper text is
 * consistently calm and muted. Result: the buy box feels like ONE form.
 * =========================================================== */

/* ---- Field labels (uniform: small uppercase Rubik tracked) ----
 * Covers EVERY plugin label class variant we might encounter. Uses
 * !important because addon plugins often inline their own font-size
 * on h3 elements. */
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart table.variations .label label,
.woocommerce div.product form.cart .label label,
.product-addon-name,
.wc-pao-addon-name,
h3.wc-pao-addon-name,
.wc-pao-addon > h3,
.tc-extra-product-options .tcpa-title,
.tm-extra-product-options .tm-title-string,
.wcboost-addons-field__label {
	display: block !important;
	margin: 0 0 0.45rem !important;
	padding: 0 !important;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	line-height: 1.3 !important;
}

/* The "Required" indicator that addons append to the label. */
.wc-pao-addon-required,
.wc-pao-addon-name span,
.product-addon-name .required,
.tcpa-required-icon {
	color: #b43c3c;
	font-weight: 700;
	margin-left: 0.2rem;
	font-size: 0.9em;
}

/* ---- Helper text / description (small italic muted) ---- */
.wc-pao-addon-description,
.product-addon-description,
.tc-extra-product-options .tcpa-description,
.tm-extra-product-options-element-description {
	margin: 0 0 0.6rem !important;
	padding: 0 !important;
	font-family: 'Rubik', sans-serif !important;
	font-size: 0.82rem !important;
	font-style: italic !important;
	color: #6b6b6b !important;
	line-height: 1.5 !important;
}

/* ---- Dropdowns (uniform across all 3 sources) ---- */
.woocommerce div.product form.cart .variations select,
.single_variation_wrap select,
.product .gfield select,
.woocommerce .product .product-addon select,
.wc-pao-addon select,
.tc-extra-product-options select,
.tm-extra-product-options select {
	width: 100% !important;
	box-sizing: border-box;
	padding: 0.75rem 2.75rem 0.75rem 1rem !important;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 0.93rem !important;
	color: var(--wp--preset--color--ink, #1a1a1a);
	background-color: #ffffff;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb);
	border-radius: 8px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8893f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 14px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	line-height: 1.3;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.woocommerce div.product form.cart .variations select:focus,
.product .gfield select:focus,
.woocommerce .product .product-addon select:focus,
.wc-pao-addon select:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold, #c9a654);
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.18);
}

/* ---- BUGFIX: swatched variation selects must stay truly hidden ----
 * pdp-enhancements.js replaces each variation <select> with visual swatches
 * and hides the native select inline (width:0). But the "uniform dropdowns"
 * rule above forces `.variations select { width:100% !important }`, which beat
 * the inline width:0 — and because the hidden select is position:absolute it
 * then expanded to ~viewport width, pushing the page ~1000px wide (horizontal
 * overflow on every variable product / mobile). The attribute selector below
 * is more specific than that rule, so it wins and clamps the select to 1px,
 * visually-hidden but still focusable for WooCommerce. */
.woocommerce div.product form.cart .variations select[data-bbh-swatched="1"],
.bbh-pdp-buybox .variations select[data-bbh-swatched="1"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	pointer-events: none !important;
	background: none !important;
}

/* ---- File upload — replace ugly browser default with a clean button ---- */
.wc-pao-addon input[type="file"],
.product-addon input[type="file"],
.tc-extra-product-options input[type="file"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	font-family: 'Rubik', sans-serif;
	font-size: 0.9rem;
	color: #555;
	background: #fafaf6;
	border: 1.5px dashed #d8cda8;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}

.wc-pao-addon input[type="file"]:hover,
.product-addon input[type="file"]:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	background: #fdfbf3;
}

/* Style the actual "Choose File" / "Browse" button inside the file input.
 * Browsers expose this as ::file-selector-button (with ::-webkit-file-upload-button
 * fallback for older WebKit). */
.wc-pao-addon input[type="file"]::file-selector-button,
.product-addon input[type="file"]::file-selector-button {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1rem;
	margin-right: 0.85rem;
	font-family: 'Rubik', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--ink, #1a1a1a);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 150ms ease;
}

.wc-pao-addon input[type="file"]::file-selector-button:hover,
.product-addon input[type="file"]::file-selector-button:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654);
}

.wc-pao-addon input[type="file"]::-webkit-file-upload-button,
.product-addon input[type="file"]::-webkit-file-upload-button {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1rem;
	margin-right: 0.85rem;
	font-family: 'Rubik', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--ink, #1a1a1a);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

/* "(max file size 300 MB)" hint below file upload */
.wc-pao-addon small,
.product-addon small,
.wc-pao-addon-description ~ small {
	display: block;
	margin-top: 0.4rem;
	font-family: 'Rubik', sans-serif;
	font-size: 0.72rem;
	color: #888;
	font-style: normal;
}

/* ---- Spacing between sibling fields ---- */
.wc-pao-addon,
.product-addon,
.tc-extra-product-options-wrap,
.tm-extra-product-options {
	margin: 0 0 1.25rem !important;
	padding: 0 !important;
}

/* WC variation table rows — same spacing as addons for consistency */
.woocommerce div.product form.cart table.variations {
	border: 0;
	margin: 0 0 0.5rem;
}

.woocommerce div.product form.cart table.variations tr {
	display: block;
	margin: 0 0 1.25rem;
}

.woocommerce div.product form.cart table.variations td.label,
.woocommerce div.product form.cart table.variations td.value {
	display: block;
	padding: 0;
	background: transparent;
}

.woocommerce div.product form.cart table.variations td.value {
	margin-top: 0.45rem;
}

/* "Clear selection" link styling */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: 'Rubik', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	color: #888;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce div.product form.cart .reset_variations:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Quantity input */
.woocommerce .quantity input[type="number"],
.woocommerce .quantity input.qty {
	width: 70px;
	padding: 0.75rem 0.5rem;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 1rem;
	text-align: center;
	background-color: #ffffff;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb);
	border-radius: 6px;
	margin-right: 0.75rem;
}

.woocommerce .quantity input.qty:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold, #c9a654);
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.18);
}

/* Add to Cart button - main brand CTA */
.woocommerce button.button.alt,
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt {
	display: inline-block;
	padding: 0.85rem 2rem !important;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--black, #0d0d0d) !important;
	background-color: var(--wp--preset--color--gold, #c9a654) !important;
	border: 1px solid var(--wp--preset--color--gold, #c9a654) !important;
	border-radius: 4px !important;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(201, 166, 84, 0.25);
	transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 80ms ease;
}

.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover {
	background-color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	border-color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	color: var(--wp--preset--color--white, #ffffff) !important;
	box-shadow: 0 4px 12px rgba(168, 137, 63, 0.35);
}

.woocommerce button.button.alt:active,
.woocommerce .single_add_to_cart_button:active {
	transform: translateY(1px);
}

/* Secondary button (View Cart after add) */
.woocommerce a.added_to_cart,
.woocommerce .button:not(.alt) {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.75rem 1.5rem;
	background-color: transparent;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	border: 1px solid var(--wp--preset--color--gold, #c9a654);
	border-radius: 4px;
	text-decoration: none;
	transition: all 150ms ease;
}

.woocommerce a.added_to_cart:hover,
.woocommerce .button:not(.alt):hover {
	background-color: var(--wp--preset--color--gold, #c9a654);
	color: var(--wp--preset--color--black, #0d0d0d);
}

/* Product tabs (Description / Additional info / Reviews) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--fog, #ebebeb);
	padding: 0;
	margin: 3rem 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0.5rem 0 0 !important;
	box-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 1rem 1.5rem !important;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--stone, #7a7a7a) !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -1px !important;
	transition: color 150ms ease, border-color 150ms ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	border-bottom-color: var(--wp--preset--color--gold, #c9a654) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: 2rem 0 1rem;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

/* Related / Up-sell products section */
.related.products,
.upsells.products {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--wp--preset--color--fog, #ebebeb);
}

.related.products > h2,
.upsells.products > h2 {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 1.75rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 2rem;
}

/* Image gallery */
.woocommerce-product-gallery {
	border-radius: 6px;
}

.woocommerce-product-gallery__image img {
	border-radius: 6px;
}

.flex-control-thumbs li {
	padding: 0 4px 8px !important;
}

.flex-control-thumbs img {
	border-radius: 4px;
	transition: opacity 150ms ease;
}

/* ---- CART PAGE ---- */

.woocommerce-cart .woocommerce {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}

.woocommerce-cart table.shop_table {
	border: 1px solid var(--wp--preset--color--fog, #ebebeb);
	border-radius: 6px;
	border-collapse: separate;
	margin: 2rem 0;
	background-color: #ffffff;
}

.woocommerce-cart table.shop_table th {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone, #7a7a7a);
	padding: 1rem 1.25rem;
	background-color: var(--wp--preset--color--paper, #f7f6f3);
	border-bottom: 1px solid var(--wp--preset--color--fog, #ebebeb);
}

.woocommerce-cart table.shop_table td {
	padding: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--fog, #ebebeb);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table .product-thumbnail img {
	border-radius: 4px;
	max-width: 80px;
}

.woocommerce-cart table.shop_table .product-name a {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
	transition: color 150ms ease;
}

.woocommerce-cart table.shop_table .product-name a:hover {
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-subtotal {
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.woocommerce-cart .product-remove a.remove {
	color: var(--wp--preset--color--stone, #7a7a7a) !important;
	background: none !important;
	font-size: 1.5rem !important;
	font-weight: 400 !important;
}

.woocommerce-cart .product-remove a.remove:hover {
	color: #b00020 !important;
}

/* Coupon code field */
.woocommerce-cart .coupon input.input-text {
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.9375rem;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb);
	border-radius: 6px;
	margin-right: 0.5rem;
}

/* Cart totals box */
.woocommerce-cart .cart_totals {
	background-color: var(--wp--preset--color--paper, #f7f6f3);
	padding: 2rem;
	border-radius: 6px;
}

.woocommerce-cart .cart_totals h2 {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1.5rem;
}

.woocommerce-cart .cart_totals table.shop_table {
	background: none;
	border: none;
	margin: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	background: none;
	border-top: 1px solid var(--wp--preset--color--fog, #ebebeb);
	padding: 1rem 0;
}

.woocommerce-cart .cart_totals .order-total .amount {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 1.5rem;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	font-weight: 600;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding-top: 1.5rem;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	width: 100%;
	text-align: center;
	padding: 0.85rem 1.25rem !important;
	font-size: 0.9375rem !important;
	white-space: nowrap;
}

/* ---- Overflow containment ----
   These WooCommerce boxes default to box-sizing:content-box, so their padding
   was ADDED to width:100% and pushed past the viewport (.cart_totals computed
   343px width + 64px padding = 407px at a 390 viewport). Force border-box so
   padding is included, and cap every structural box at its container width. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals,
.woocommerce-cart .shop_table,
.woocommerce-cart .wc-proceed-to-checkout,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .coupon,
.woocommerce-cart .coupon input.input-text {
	box-sizing: border-box !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Secondary cart buttons (Apply coupon / Update cart) — natural size, never
   stretched full-width or wrapped to a tall block. */
.woocommerce-cart .coupon .button,
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
	width: auto !important;
	min-height: 48px;
	white-space: nowrap;
}

/* Cart mobile: stack columns */
@media (max-width: 768px) {
	.woocommerce-cart table.shop_table {
		display: block;
	}

	.woocommerce-cart table.shop_table thead {
		display: none;
	}

	.woocommerce-cart table.shop_table tbody {
		display: block;
	}

	.woocommerce-cart table.shop_table tr.cart_item {
		display: block;
		padding: 1.25rem;
		border-bottom: 1px solid var(--wp--preset--color--fog, #ebebeb);
	}

	.woocommerce-cart table.shop_table tr.cart_item td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 0;
		border-top: none;
		text-align: right;
	}

	.woocommerce-cart table.shop_table tr.cart_item td::before {
		content: attr(data-title);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wp--preset--color--stone, #7a7a7a);
	}

	.woocommerce-cart table.shop_table .product-thumbnail {
		justify-content: flex-start !important;
	}

	.woocommerce-cart table.shop_table .product-thumbnail::before {
		display: none;
	}

	/* Actions row (coupon + update cart): wrap cleanly, buttons keep natural
	   size instead of stretching to the full row width. */
	.woocommerce-cart table.shop_table td.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		padding: 1rem 0 0;
	}
	.woocommerce-cart table.shop_table td.actions::before { display: none !important; }
	.woocommerce-cart td.actions .coupon {
		display: flex;
		gap: 0.5rem;
		flex: 1 1 100%;
		flex-wrap: wrap;
		float: none;
	}
	.woocommerce-cart td.actions .coupon input.input-text { flex: 1 1 150px; margin: 0; }
	.woocommerce-cart td.actions .coupon .button,
	.woocommerce-cart td.actions button[name="update_cart"] {
		flex: 0 0 auto;
		float: none !important;
		margin: 0;
	}
}

/* ---- CHECKOUT PAGE ---- */

.woocommerce-checkout {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}

.woocommerce-checkout h3 {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
}

/* Checkout form field labels */
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label,
.woocommerce-checkout .woocommerce-additional-fields label {
	display: block;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin-bottom: 0.5rem;
}

.woocommerce-checkout label .required {
	color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	border: none !important;
	font-weight: 700;
	text-decoration: none;
}

/* All checkout form inputs.
   NB the select selectors EXCLUDE .select2-hidden-accessible — those are the
   native country/state selects that Select2 replaces and shrinks to 1px;
   without the exclusion our width:100% blew them back up to full width (offset
   by the form padding) and overflowed the page horizontally. */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select:not(.select2-hidden-accessible),
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select:not(.select2-hidden-accessible) {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.875rem 1rem !important;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif) !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	background-color: #ffffff !important;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb) !important;
	border-radius: 6px !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Re-hide the Select2-replaced native selects (belt-and-suspenders) and keep
   the visible Select2 container within its column. */
.woocommerce-checkout select.select2-hidden-accessible,
.woocommerce form .form-row select.select2-hidden-accessible {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}
.woocommerce-checkout .select2-container,
.woocommerce form .form-row .select2-container,
.woocommerce-checkout form.checkout,
.woocommerce-checkout #order_review,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce form .form-row .input-text:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--gold, #c9a654) !important;
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.18) !important;
}

/* Country/state Select2 dropdowns */
.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto !important;
	padding: 0.5rem !important;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb) !important;
	border-radius: 6px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
}

/* Order summary right column */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	background-color: var(--wp--preset--color--paper, #f7f6f3);
	padding: 1.5rem 2rem;
	border-radius: 6px;
}

.woocommerce-checkout #order_review_heading {
	margin-bottom: 0;
	padding-bottom: 0;
}

.woocommerce-checkout table.shop_table {
	background: none;
	border: none;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	border-color: var(--wp--preset--color--fog, #ebebeb);
	padding: 0.75rem 0;
}

.woocommerce-checkout .order-total .amount {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

/* Payment methods */
.woocommerce-checkout #payment {
	background: none !important;
	padding: 0 !important;
	border-radius: 6px;
	margin-top: 1rem;
}

.woocommerce-checkout #payment ul.payment_methods {
	background-color: var(--wp--preset--color--paper, #f7f6f3);
	border-radius: 6px;
	padding: 1rem 1.5rem !important;
	border: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--fog, #ebebeb);
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
	border-bottom: none;
}

.woocommerce-checkout #payment .payment_box {
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb) !important;
	border-radius: 4px !important;
	margin: 0.75rem 0 !important;
	padding: 1rem !important;
}

.woocommerce-checkout #payment .payment_box::before {
	display: none !important;
}

/* Place Order button - flagship CTA */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
	width: 100% !important;
	padding: 0.85rem 2rem !important;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--black, #0d0d0d) !important;
	background-color: var(--wp--preset--color--gold, #c9a654) !important;
	border: 1px solid var(--wp--preset--color--gold, #c9a654) !important;
	border-radius: 4px !important;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(201, 166, 84, 0.25);
	transition: all 150ms ease;
	margin-top: 1rem;
}

.woocommerce-checkout #place_order:hover {
	background-color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	color: var(--wp--preset--color--white, #ffffff) !important;
}

/* Coupon banner at top of checkout */
.woocommerce-checkout .woocommerce-info {
	background-color: var(--wp--preset--color--paper, #f7f6f3);
	border-left-color: var(--wp--preset--color--gold, #c9a654);
	color: var(--wp--preset--color--ink, #1a1a1a);
	border-radius: 6px;
	padding: 1rem 1.5rem;
}

.woocommerce-checkout .woocommerce-info::before {
	color: var(--wp--preset--color--gold, #c9a654);
}

/* Checkout: stack on mobile, fix billing/order columns */
@media (max-width: 768px) {
	.woocommerce-checkout .woocommerce-billing-fields .form-row,
	.woocommerce-checkout .woocommerce-shipping-fields .form-row {
		width: 100% !important;
		float: none !important;
		margin: 0 0 1rem !important;
	}

	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		padding: 1.25rem;
	}
}

/* ===========================================================
   HEADER SEARCH — Live product search panel
   Magnifying-glass icon opens a centered overlay panel below
   the header with autocomplete results.
   =========================================================== */

.bbh-search-panel {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-top: 80px; /* sit below the sticky header so logo + nav remain visible */
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms ease;
}

/* Logged-in admin: WP admin bar takes 32px (46px on mobile) */
.admin-bar .bbh-search-panel {
	padding-top: 112px;
}

@media (max-width: 782px) {
	.admin-bar .bbh-search-panel {
		padding-top: 126px;
	}
}

.bbh-search-panel.is-open {
	pointer-events: auto;
	opacity: 1;
}

.bbh-search-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
}

.bbh-search-panel__inner {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 760px;
	background: #ffffff;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	transform: translateY(-12px);
	transition: transform 220ms cubic-bezier(0.16, 0.84, 0.44, 1);
	z-index: 1;
}

.bbh-search-panel.is-animating-in .bbh-search-panel__inner {
	transform: translateY(0);
}

.bbh-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--wp--preset--color--fog, #ebebeb);
	background: var(--wp--preset--color--paper, #f7f6f3);
	border-radius: 0 0 0 0;
}

.bbh-search-form__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-search-form__input {
	flex: 1 1 auto;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 18px;
	font-weight: 400;
	color: var(--wp--preset--color--ink, #1a1a1a);
	padding: 4px 0;
	width: 100%;
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
}

.bbh-search-form__input::placeholder {
	color: var(--wp--preset--color--stone, #7a7a7a);
	font-weight: 400;
}

.bbh-search-form__input:focus {
	outline: none;
}

.bbh-search-form__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.bbh-search-form__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--wp--preset--color--smoke, #4a4a4a);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

.bbh-search-form__close:hover,
.bbh-search-form__close:focus {
	background: var(--wp--preset--color--fog, #ebebeb);
	color: var(--wp--preset--color--ink, #1a1a1a);
	outline: none;
}

.bbh-search-panel__body {
	overflow-y: auto;
	padding: 16px 0 8px;
	flex: 1 1 auto;
}

.bbh-search-hint,
.bbh-search-empty,
.bbh-search-loading {
	margin: 0;
	padding: 28px 24px;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--smoke, #4a4a4a);
	text-align: center;
}

.bbh-search-empty a {
	color: var(--wp--preset--color--gold-dark, #a8893f);
	text-decoration: underline;
}

.bbh-search-loading::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	border: 2px solid var(--wp--preset--color--fog, #ebebeb);
	border-top-color: var(--wp--preset--color--gold, #c9a654);
	border-radius: 50%;
	vertical-align: -2px;
	animation: bbh-search-spin 700ms linear infinite;
}

@keyframes bbh-search-spin {
	to { transform: rotate(360deg); }
}

.bbh-search-results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbh-search-result + .bbh-search-result {
	border-top: 1px solid var(--wp--preset--color--fog, #ebebeb);
}

.bbh-search-result__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 24px;
	text-decoration: none;
	color: inherit;
	transition: background 150ms ease;
}

.bbh-search-result__link:hover,
.bbh-search-result__link:focus {
	background: var(--wp--preset--color--paper, #f7f6f3);
	outline: none;
}

.bbh-search-result__thumb {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--wp--preset--color--paper, #f7f6f3);
}

.bbh-search-result__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bbh-search-result__thumb--empty {
	background: var(--wp--preset--color--fog, #ebebeb);
}

.bbh-search-result__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bbh-search-result__title {
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", Georgia, serif);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bbh-search-result__title mark {
	background: var(--wp--preset--color--gold-light, #e5d09a);
	color: var(--wp--preset--color--ink, #1a1a1a);
	padding: 0 1px;
	border-radius: 2px;
}

.bbh-search-result__price {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 13px;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	font-weight: 500;
}

.bbh-search-result__price del {
	color: var(--wp--preset--color--stone, #7a7a7a);
	font-weight: 400;
	margin-right: 4px;
	opacity: 0.7;
}

.bbh-search-result__price ins {
	text-decoration: none;
	background: none;
}

.bbh-search-more {
	display: block;
	padding: 14px 24px;
	margin-top: 4px;
	background: var(--wp--preset--color--paper, #f7f6f3);
	border-top: 1px solid var(--wp--preset--color--fog, #ebebeb);
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	text-align: center;
	text-decoration: none;
	transition: background 150ms ease;
}

.bbh-search-more:hover,
.bbh-search-more:focus {
	background: var(--wp--preset--color--fog, #ebebeb);
	color: var(--wp--preset--color--ink, #1a1a1a);
	outline: none;
}

.bbh-search-more strong {
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* Lock body scroll when search is open */
body.bbh-search-open {
	overflow: hidden;
}

/* Mobile: panel fills the screen */
@media (max-width: 600px) {
	.bbh-search-panel__inner {
		max-height: 100vh;
		max-height: 100dvh;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
	}

	.bbh-search-form {
		padding: 16px 16px;
	}

	.bbh-search-form__input {
		font-size: 16px; /* prevents iOS zoom on focus */
	}

	.bbh-search-result__link {
		padding: 12px 16px;
	}

	.bbh-search-result__thumb {
		width: 48px;
		height: 48px;
	}

	.bbh-search-result__title {
		font-size: 14px;
	}

	.bbh-search-more {
		padding: 14px 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Page + search results header treatment
 *
 * Standard WP pages (FAQ, Contact, etc.) and the search results page share
 * the same subtle eyebrow + medium-weight title pattern used throughout the
 * site. Overrides the giant default H1 that Twenty-Twenty-Four-ish templates
 * render. Inline block styles in the template handle most of it, but these
 * rules normalise the query-title block (which has limited block attributes)
 * and provide a safety net if the inline styles get scrubbed by sanitisers.
 *
 * NOTE (0.7.7): the .bbh-page-header eyebrow + class was removed from page.html
 * because users already know they're on the site. We keep the class selector
 * here for any page that still references it, but page.html no longer wraps
 * the title in that wrapper. */
.bbh-page-header .wp-block-post-title {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}

.bbh-search-page-header .wp-block-query-title,
.bbh-search-page-header h1.wp-block-query-title {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* The query-title block wraps the search term in quotes by default — keep
 * it visually distinct but not shouty. */
.bbh-search-page-header .wp-block-query-title strong,
.bbh-search-page-header .wp-block-query-title em {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

@media (max-width: 640px) {
	.bbh-page-header .wp-block-post-title {
		font-size: 1.5rem;
	}
	.bbh-search-page-header .wp-block-query-title {
		font-size: 1.25rem;
	}
}

/* ===========================================================================
 * Product filters bar
 *
 * Renders above the product grid on /shop/, product category archives, and
 * product search results. Desktop: horizontal row of pill buttons (each
 * opens a popover). Mobile: a single "Filters" button that opens a drawer.
 * Active filter chips sit below the bar.
 * ========================================================================= */
.bbh-filters {
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.bbh-filters__form {
	display: block;
}

.bbh-filters__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--fog, #ececec);
	border-bottom: 1px solid var(--wp--preset--color--fog, #ececec);
	padding: 0.75rem 0;
}

.bbh-filters__pills {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex: 1 1 auto;
}

/* Mobile trigger hidden on desktop */
.bbh-filters__trigger--mobile {
	display: none;
}

/* All filter-bar items share the EXACT same box + font shorthand. The
 * key insight: button/select/label all inherit different UA font metrics
 * (especially line-height), so we explicitly set `font:` shorthand which
 * forces font-size, line-height, weight, family in one rule — overriding
 * any UA stylesheet line-height the elements would otherwise apply.
 *
 * Why "appearance: none" — strips the browser's default form-control
 * chrome (rounded corners, inner padding, etc.) so buttons and labels
 * render text identically.
 *
 * Why the desktop trigger gets these too — it also lives on the bar at
 * the mobile breakpoint where it must visually match the sort dropdown. */
.bbh-filters__pill,
.bbh-filters__toggle,
.bbh-filters__trigger--mobile {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	box-sizing: border-box;
	height: 36px;
	padding: 0 0.95rem;
	margin: 0;
	background: #fff;
	border: 1px solid var(--wp--preset--color--fog, #ececec);
	border-radius: 999px;
	color: var(--wp--preset--color--ink, #1a1a1a);
	cursor: pointer;
	white-space: nowrap;
	vertical-align: middle;
	text-align: left;
	text-decoration: none;
	/* font: shorthand — order is [style] [variant] [weight] size/line-height family */
	font: 500 0.85rem/1 inherit;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.bbh-filters__pill:hover,
.bbh-filters__toggle:hover,
.bbh-filters__trigger--mobile:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Sort pill uses bbh-filters__pill directly (it's a real <button> now, not a
 * <select> wrapper) so it inherits perfect dimensions/font from the unified
 * rule above. The "Sort:" prefix is dimmed to read as a label rather than
 * the active value. */
.bbh-filters__pill-meta {
	color: #888;
	font-weight: 500;
	margin-right: 0.15rem;
}

.bbh-filters__pill-value {
	font-weight: 600;
}

/* Group containing the sort pill — pushed to the far right of the bar. */
.bbh-filters__group--sort {
	margin-left: auto;
}

/* Right-aligned popover variant (so the sort popover doesn't overflow off
 * the right edge of the viewport). */
.bbh-filters__popover--align-right {
	left: auto;
	right: 0;
}

/* Radio rows inside the sort popover */
.bbh-filters__radio {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.1rem;
	cursor: pointer;
	font-size: 0.9rem;
	line-height: 1.3;
	border-radius: 4px;
	transition: color 120ms ease;
}

.bbh-filters__radio input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--wp--preset--color--gold-dark, #c9a654);
	cursor: pointer;
	margin: 0;
}

.bbh-filters__radio:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-filters__radio.is-selected,
.bbh-filters__radio:has(input:checked) {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	font-weight: 600;
}

/* Mobile trigger MUST be hidden on desktop. The unified rule above sets
 * `display: inline-flex` for layout consistency, so we override it back to
 * `display: none` here as the default state. The mobile breakpoint below
 * flips it to inline-flex again. */
.bbh-filters__trigger--mobile {
	display: none;
}

.bbh-filters__pill svg {
	transition: transform 150ms ease;
	margin-left: 0.15rem;
}

.bbh-filters__group.is-open .bbh-filters__pill svg {
	transform: rotate(180deg);
}

.bbh-filters__pill.is-active,
.bbh-filters__toggle.is-active {
	background: var(--wp--preset--color--ink, #1a1a1a);
	border-color: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
}

/* Toggle pills — the hidden checkbox is now a SIBLING of the label
 * (not a child), so the label is a clean text-only container with the
 * exact same DOM profile as a <button>. The input is fully removed from
 * layout but still in the form so its value submits when checked. */
.bbh-filters__hidden-input {
	display: none;
}

/* Live checked state — checkbox is the SIBLING immediately before the label,
 * so the adjacent-sibling combinator picks it up the instant the user clicks
 * (no JS round-trip needed). The .is-active server-side class handles the
 * initial render before any user interaction. */
.bbh-filters__hidden-input:checked + .bbh-filters__toggle {
	background: var(--wp--preset--color--ink, #1a1a1a);
	border-color: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
}

.bbh-filters__count {
	background: var(--wp--preset--color--gold-dark, #c9a654);
	color: #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 700;
	padding: 0.05rem 0.4rem;
	line-height: 1.2;
	margin-left: 0.15rem;
}

.bbh-filters__pill.is-active .bbh-filters__count {
	background: var(--wp--preset--color--gold, #d9b96e);
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* Filter group + popover */
.bbh-filters__group {
	position: relative;
}

.bbh-filters__popover {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 50;
	min-width: 300px;
	max-width: 360px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--fog, #ececec);
	border-radius: 10px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
}

.bbh-filters__popover-inner {
	padding: 0.85rem 1rem;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	box-sizing: border-box;
}

.bbh-filters__popover-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--wp--preset--color--fog, #ececec);
}

.bbh-filters__link {
	background: none;
	border: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: underline;
	cursor: pointer;
	padding: 0.3rem 0;
}

.bbh-filters__apply,
.bbh-filters__drawer-apply {
	background: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.5rem 0.95rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.bbh-filters__apply:hover,
.bbh-filters__drawer-apply:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Checkboxes inside popover + drawer */
.bbh-filters__check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem 0;
	cursor: pointer;
	font-size: 0.9rem;
	line-height: 1.3;
}

.bbh-filters__check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--wp--preset--color--gold-dark, #c9a654);
	cursor: pointer;
	margin: 0;
}

.bbh-filters__check em {
	font-style: normal;
	color: #888;
	font-size: 0.8rem;
	margin-left: 0.15rem;
}

/* Price range
 *
 * Critical: every box uses `min-width: 0` + `box-sizing: border-box` so the
 * number inputs (which have a UA-stylesheet minimum width of ~120px) shrink
 * to fit their flex parent instead of overflowing horizontally. Without
 * these, the popover gets a scrollbar and the Max field is cut off. */
.bbh-filters__range {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.bbh-filters__range-field {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	box-sizing: border-box;
}

.bbh-filters__range-field span {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #888;
	font-weight: 600;
}

.bbh-filters__range-field input {
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--wp--preset--color--fog, #ececec);
	border-radius: 6px;
	font-size: 0.9rem;
	background: #fafafa;
	font-family: inherit;
}

/* Strip the up/down spinner that browsers add to number inputs — it adds
 * unwanted visual weight and steals horizontal space inside the popover. */
.bbh-filters__range-field input::-webkit-outer-spin-button,
.bbh-filters__range-field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bbh-filters__range-field input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.bbh-filters__range-field input:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	background: #fff;
}

.bbh-filters__range-sep {
	padding-bottom: 0.7rem;
	color: #999;
	flex-shrink: 0;
}

/* (Removed in 0.7.5: .bbh-filters__sort + .bbh-filters__sort select.
 * Sort is now a custom popover using bbh-filters__pill + bbh-filters__radio,
 * so the native <select> styling is no longer needed.) */

/* Active filter chips */
.bbh-filters__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	padding-top: 0.75rem;
}

.bbh-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #f6f1e6;
	color: var(--wp--preset--color--ink, #1a1a1a);
	border: 1px solid #ecdfc3;
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-size: 0.78rem;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.3;
	transition: background 120ms ease, border-color 120ms ease;
}

.bbh-filters__chip:hover {
	background: #ecdfc3;
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.bbh-filters__chip svg {
	opacity: 0.7;
}

.bbh-filters__clear {
	font-size: 0.78rem;
	color: #777;
	text-decoration: underline;
	margin-left: 0.35rem;
}

.bbh-filters__clear:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* Mobile drawer (hidden on desktop) */
.bbh-filters__drawer {
	display: none;
}

.bbh-filters-drawer-open {
	overflow: hidden;
}

/* --------------------------- Mobile breakpoint ------------------------- */
@media (max-width: 820px) {
	/* Hide the desktop pill row on mobile; replace with single trigger */
	.bbh-filters__pills {
		display: none;
	}

	/* Mobile trigger inherits its dimensions from the shared bar-item base.
	 * We only flip its display from `none` to `inline-flex` here. */
	.bbh-filters__trigger--mobile {
		display: inline-flex;
	}

	.bbh-filters__bar {
		justify-content: space-between;
		gap: 0.5rem;
	}

	/* On mobile the sort group still sits on the right of the bar (pushed by
	 * margin-left: auto from the desktop rule). We don't need to override it. */

	/* Drawer becomes a real drawer */
	.bbh-filters__drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9998;
		pointer-events: none;
	}

	.bbh-filters__drawer-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		transition: opacity 200ms ease;
	}

	.bbh-filters__drawer.is-open {
		pointer-events: auto;
	}

	.bbh-filters__drawer.is-open .bbh-filters__drawer-backdrop {
		opacity: 1;
	}

	.bbh-filters__drawer-panel {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(360px, 100vw);
		max-width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		transform: translateX(100%);
		transition: transform 220ms ease;
		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
	}

	.bbh-filters__drawer.is-open .bbh-filters__drawer-panel {
		transform: translateX(0);
	}

	.bbh-filters__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.1rem;
		border-bottom: 1px solid var(--wp--preset--color--fog, #ececec);
	}

	.bbh-filters__drawer-head h2 {
		margin: 0;
		font-size: 1.05rem;
		font-weight: 600;
	}

	.bbh-filters__drawer-close {
		background: none;
		border: 0;
		padding: 0.25rem;
		cursor: pointer;
		color: var(--wp--preset--color--ink, #1a1a1a);
	}

	.bbh-filters__drawer-body {
		flex: 1;
		overflow-y: auto;
		padding: 1rem 1.1rem;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.bbh-filters__fs {
		border: 0;
		padding: 0;
		margin: 0;
	}

	.bbh-filters__fs legend {
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		font-weight: 700;
		color: var(--wp--preset--color--gold-dark, #c9a654);
		margin-bottom: 0.6rem;
		padding: 0;
	}

	.bbh-filters__select {
		width: 100%;
		padding: 0.55rem 0.7rem;
		border: 1px solid var(--wp--preset--color--fog, #ececec);
		border-radius: 6px;
		font-size: 0.95rem;
		background: #fafafa;
		font-family: inherit;
	}

	.bbh-filters__drawer-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.9rem 1.1rem;
		border-top: 1px solid var(--wp--preset--color--fog, #ececec);
		background: #fff;
	}

	.bbh-filters__drawer-clear {
		font-size: 0.85rem;
		color: #777;
		text-decoration: underline;
	}

	.bbh-filters__drawer-apply {
		padding: 0.7rem 1.25rem;
		font-size: 0.9rem;
	}
}

/* ===========================================================================
 * Product archive pagination
 *
 * Replaces the default underlined "1 2 3 ... 5 Next Page" run-on with pill
 * buttons that share the same visual vocabulary as the filter bar above:
 * 36px circular pills, fog border, gold-on-hover, dark "ink" fill for the
 * current page. Previous / Next are slightly wider pills with the chevron
 * arrow inline.
 *
 * Applied to .bbh-pagination (className we added to the wp:query-pagination
 * block in archive-product.html, taxonomy-product_cat.html, and search.html).
 * Scoped to that class so the standard blog index pagination (index.html)
 * keeps the simpler space-between layout it has today.
 * ========================================================================= */
.wp-block-query-pagination.bbh-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.bbh-pagination .wp-block-query-pagination-numbers {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

/* All page links + the static current/dots span use the same base.
 * `min-width: 40px` keeps single-digit pages perfectly circular while
 * double-digit (10+) pages stretch the pill naturally. */
.bbh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--fog, #ececec);
	border-radius: 999px;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
	font: 500 0.9rem/1 inherit;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
	vertical-align: middle;
}

.bbh-pagination .page-numbers:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
}

/* Active page — solid dark fill, white text, no border. */
.bbh-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink, #1a1a1a);
	border-color: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
	font-weight: 600;
	cursor: default;
}

.bbh-pagination .page-numbers.current:hover {
	background: var(--wp--preset--color--ink, #1a1a1a);
	border-color: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
}

/* Ellipsis — no pill chrome, just dimmed text inline with the numbers. */
.bbh-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: #999;
	min-width: 1.5rem;
	padding: 0 0.2rem;
	cursor: default;
}

.bbh-pagination .page-numbers.dots:hover {
	background: transparent;
	border-color: transparent;
	color: #999;
}

/* Previous / Next — wider pills, chevron + label side by side. */
.bbh-pagination .wp-block-query-pagination-previous,
.bbh-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	box-sizing: border-box;
	height: 40px;
	padding: 0 1.1rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--fog, #ececec);
	border-radius: 999px;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
	font: 500 0.85rem/1 inherit;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
	vertical-align: middle;
}

.bbh-pagination .wp-block-query-pagination-previous:hover,
.bbh-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
}

/* Chevron arrows — WP renders these as a <span class="is-arrow-chevron">
 * containing « or ». We normalise the size + spacing. */
.bbh-pagination .wp-block-query-pagination-previous-arrow,
.bbh-pagination .wp-block-query-pagination-next-arrow {
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	line-height: 1;
	opacity: 0.85;
	transform: translateY(-1px); /* optical alignment with the label baseline */
}

/* Disabled state — WP renders these when on the first/last page. */
.bbh-pagination .wp-block-query-pagination-previous[aria-disabled="true"],
.bbh-pagination .wp-block-query-pagination-next[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

/* Mobile — slightly tighter dimensions so 5+ pills fit on one line. */
@media (max-width: 480px) {
	.wp-block-query-pagination.bbh-pagination {
		gap: 0.3rem;
	}

	.bbh-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		font-size: 0.85rem;
		padding: 0 0.5rem;
	}

	.bbh-pagination .wp-block-query-pagination-previous,
	.bbh-pagination .wp-block-query-pagination-next {
		height: 36px;
		padding: 0 0.85rem;
		font-size: 0.8rem;
	}

	/* On the smallest screens drop the visible "Previous" / "Next" label and
	 * keep just the chevron — saves horizontal space for the page numbers.
	 * font-size: 0 hides the text node without affecting layout/a11y. */
	@media (max-width: 380px) {
		.bbh-pagination .wp-block-query-pagination-previous,
		.bbh-pagination .wp-block-query-pagination-next {
			font-size: 0;
			padding: 0;
			min-width: 36px;
			justify-content: center;
		}
		.bbh-pagination .wp-block-query-pagination-previous-arrow,
		.bbh-pagination .wp-block-query-pagination-next-arrow {
			font-size: 1.1rem;
		}
	}
}

/* ===========================================================================
 * FAQ page (page-faq.html, slug "faq")
 *
 * Goal: turn a wall of text into a calm, scannable Q&A list. Each top-level
 * heading in the post content becomes a "question" with a subtle gold
 * left-side accent rail, generous spacing, and a hairline divider before the
 * next question. Lists used as answers lose their bullets and read as flowing
 * paragraphs. Hover on a question makes the gold rail extend.
 * ========================================================================= */

/* Decorative gold rule under the hero — a short centered line, not a
 * full-width divider. */
.bbh-faq-hero .bbh-gold-rule,
.bbh-contact-hero .bbh-gold-rule {
	border: 0;
	background: var(--wp--preset--color--gold-dark, #c9a654);
	height: 1px;
	width: 60px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.7;
}

/* Subtle entrance animation on initial paint for hero + content blocks.
 * Single keyframe, used sparingly. Pure CSS, no scroll listeners. */
@keyframes bbhFadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bbh-faq-hero,
.bbh-contact-hero,
.bbh-contact-cards,
.bbh-contact-form-section,
.bbh-faq-content,
.bbh-faq-cta {
	animation: bbhFadeUp 480ms ease both;
}

.bbh-contact-cards { animation-delay: 80ms; }
.bbh-faq-content,
.bbh-contact-form-section { animation-delay: 120ms; }
.bbh-faq-cta { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
	.bbh-faq-hero,
	.bbh-contact-hero,
	.bbh-contact-cards,
	.bbh-contact-form-section,
	.bbh-faq-content,
	.bbh-faq-cta {
		animation: none;
	}
}

/* Category eyebrow above each grouped FAQ section. Tiny gold uppercase label,
 * sits above the first question in each section. */
.bbh-faq-category {
	border-bottom: 1px solid #ececec;
	padding-bottom: 0.7rem;
	margin-bottom: 0 !important;
}

/* ---------- DETAILS / SUMMARY accordion treatment ---------- */
.bbh-faq-section .wp-block-details {
	border-bottom: 1px solid #ececec;
	padding: 0;
	margin: 0;
	transition: background 220ms ease;
}

.bbh-faq-section .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 2.5rem 1.1rem 0.25rem;
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.08rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #1a1a1a);
	letter-spacing: -0.005em;
	position: relative;
	transition: color 180ms ease, padding 180ms ease;
	user-select: none;
}

/* Remove default disclosure marker (the triangle/arrow). */
.bbh-faq-section .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.bbh-faq-section .wp-block-details > summary::marker {
	content: '';
}

/* Custom + / – icon on the right of each summary. Pure CSS — two crossed
 * pseudo-bars that rotate when open. */
.bbh-faq-section .wp-block-details > summary::before,
.bbh-faq-section .wp-block-details > summary::after {
	content: '';
	position: absolute;
	right: 0.3rem;
	top: 50%;
	width: 12px;
	height: 1.5px;
	background: var(--wp--preset--color--ink, #1a1a1a);
	border-radius: 1px;
	transition: transform 280ms ease, background 220ms ease;
}

.bbh-faq-section .wp-block-details > summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.bbh-faq-section .wp-block-details > summary::before {
	transform: translateY(-50%);
}

.bbh-faq-section .wp-block-details[open] > summary::after {
	transform: translateY(-50%) rotate(0deg);
}

/* Hover: bump padding left for a subtle slide-in feel + tint the icon gold. */
.bbh-faq-section .wp-block-details > summary:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-faq-section .wp-block-details > summary:hover::before,
.bbh-faq-section .wp-block-details > summary:hover::after {
	background: var(--wp--preset--color--gold-dark, #c9a654);
}

/* When open, summary gets a subtle accent on the left edge. */
.bbh-faq-section .wp-block-details[open] > summary {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-faq-section .wp-block-details[open] > summary::before,
.bbh-faq-section .wp-block-details[open] > summary::after {
	background: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Answer paragraphs — comfortable type, dim a notch from the question. */
.bbh-faq-section .wp-block-details > :not(summary) {
	padding: 0 1rem 1.25rem 0.25rem;
	margin: 0;
	color: #4a4a4a;
	font-size: 0.97rem;
	line-height: 1.65;
}

.bbh-faq-section .wp-block-details > p:not(:first-of-type) {
	padding-top: 0.6rem;
}

.bbh-faq-section .wp-block-details a {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.bbh-faq-section .wp-block-details a:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* ----------------------------- (Legacy block below) ----------------------- */

/* Q&A treatment inside .bbh-faq-content. We target the headings + the block
 * immediately following them so each pair reads as one card-like unit.
 *
 * NOTE: this rule set covers the OLD .bbh-faq-content wrapper which the
 * page-faq.html template no longer uses (the template renders categorized
 * Details blocks directly). Kept here as a fallback in case any other page
 * relies on the .bbh-faq-content class. */
.bbh-faq-content {
	font-size: 1rem;
	line-height: 1.65;
	color: #2a2a2a;
}

.bbh-faq-content h2,
.bbh-faq-content h3,
.bbh-faq-content h4 {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0 0 0.75rem;
	padding: 0 0 0 1.1rem;
	position: relative;
	letter-spacing: -0.005em;
}

/* Gold left accent rail on every question. Extends on hover via the pseudo. */
.bbh-faq-content h2::before,
.bbh-faq-content h3::before,
.bbh-faq-content h4::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 3px;
	height: 1em;
	background: var(--wp--preset--color--gold-dark, #c9a654);
	border-radius: 2px;
	transition: height 220ms ease, background 220ms ease;
}

.bbh-faq-content h2:hover::before,
.bbh-faq-content h3:hover::before,
.bbh-faq-content h4:hover::before {
	height: 1.5em;
	background: var(--wp--preset--color--gold, #d9b96e);
}

/* Hairline divider before the NEXT question (except the first). */
.bbh-faq-content h2 + *,
.bbh-faq-content h3 + *,
.bbh-faq-content h4 + * {
	margin-top: 0;
}

.bbh-faq-content > h2:not(:first-child),
.bbh-faq-content > h3:not(:first-child),
.bbh-faq-content > h4:not(:first-child) {
	margin-top: 2.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid #ececec;
}

.bbh-faq-content > h2:not(:first-child)::before,
.bbh-faq-content > h3:not(:first-child)::before,
.bbh-faq-content > h4:not(:first-child)::before {
	top: calc(2.25rem + 0.45em);
}

/* Strip the punchy bullet that was used for answers — read as paragraphs. */
.bbh-faq-content ul,
.bbh-faq-content ol {
	list-style: none;
	padding-left: 1.1rem;
	margin: 0.4rem 0 0;
}

.bbh-faq-content ul li,
.bbh-faq-content ol li {
	margin: 0.4rem 0;
	color: #4a4a4a;
}

.bbh-faq-content p {
	padding-left: 1.1rem;
	color: #4a4a4a;
	margin: 0.4rem 0;
}

.bbh-faq-content a {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.bbh-faq-content a:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* FAQ "Still have questions?" CTA card — black panel at the bottom. */
.bbh-faq-cta {
	background: var(--wp--preset--color--ink, #1a1a1a);
	background-image: radial-gradient(
		circle at 20% 0%,
		rgba(201, 166, 84, 0.18),
		transparent 55%
	);
}

/* The "We reply within 24 hours." heading had no explicit colour, so it
   inherited the theme's default heading colour (#1a1a1a) and rendered nearly
   invisible on this black card. Force it (and any supporting copy) light. */
.bbh-faq-cta .wp-block-heading {
	color: #ffffff !important;
}
.bbh-faq-cta p:not(.has-gold-color):not(.has-gold-dark-color) {
	color: #e7e3d8 !important;
}

.bbh-faq-cta .wp-block-button__link:hover {
	background-color: #fff !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
}

/* ===========================================================================
 * Contact page (page-contact-us.html, slug "contact-us")
 *
 * Four small icon cards in a responsive grid. Email card is clickable (turns
 * the whole tile into a mailto link). Hover lifts the card slightly with a
 * gold border edge — same accent vocabulary as the filter pills.
 * ========================================================================= */
/* auto-fit so the grid adapts to any card count (currently 3: Email,
 * Hours, Social — Location card was removed). Each card stays at least
 * 240px wide, so on a 1080px container we get 3 across cleanly. */
.bbh-contact-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

@media (max-width: 480px) {
	.bbh-contact-cards__grid {
		grid-template-columns: 1fr;
	}
}

.bbh-contact-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.5rem 1.25rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a1a);
	transition: transform 220ms ease, border-color 220ms ease,
		box-shadow 220ms ease;
	position: relative;
	overflow: hidden;
}

/* Soft gradient wash in the corner — gives each card a hint of warmth without
 * being decorative noise. */
.bbh-contact-card::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 90px;
	height: 90px;
	background: radial-gradient(
		circle at top right,
		rgba(201, 166, 84, 0.1),
		transparent 70%
	);
	pointer-events: none;
}

/* Only the mailto card (rendered as an <a>) gets the lift on hover. */
a.bbh-contact-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}

.bbh-contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(201, 166, 84, 0.12);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	margin-bottom: 0.4rem;
	flex-shrink: 0;
}

.bbh-contact-card__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-contact-card__value {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
	line-height: 1.35;
	word-break: break-word;
}

.bbh-contact-card__value a {
	color: inherit;
	text-decoration: none;
}

.bbh-contact-card__value a:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-contact-card__meta {
	font-size: 0.78rem;
	color: #888;
	line-height: 1.4;
	margin-top: 0.05rem;
}

/* When the contact post-content has the page's existing FAQ-style content,
 * apply the same calm Q&A treatment as the FAQ page so it doesn't look
 * jarring while you're moving content over to the actual FAQ page. */
.bbh-contact-form-section .wp-block-post-content {
	font-size: 1rem;
	line-height: 1.65;
	color: #2a2a2a;
}

.bbh-contact-form-section .wp-block-post-content h2,
.bbh-contact-form-section .wp-block-post-content h3,
.bbh-contact-form-section .wp-block-post-content h4 {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 1.75rem 0 0.65rem;
	letter-spacing: -0.005em;
}

.bbh-contact-form-section .wp-block-post-content > h2:first-child,
.bbh-contact-form-section .wp-block-post-content > h3:first-child,
.bbh-contact-form-section .wp-block-post-content > h4:first-child {
	margin-top: 0;
}

.bbh-contact-form-section .wp-block-post-content a {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* ===========================================================================
 * Contact page "Before you write" quicklinks
 *
 * Three side-by-side cards pointing to wholesale, FAQ, and account. Lets
 * visitors self-serve before writing an email. Each is a tall card with
 * title + description + arrow CTA — same vocabulary as the contact cards
 * above (white bg, fog border, gold accent on hover).
 * ========================================================================= */
.bbh-quicklinks__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	animation: bbhFadeUp 480ms ease both;
	animation-delay: 180ms;
}

@media (max-width: 820px) {
	.bbh-quicklinks__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbh-quicklinks__grid { animation: none; }
}

.bbh-quicklink {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1.4rem 1.4rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a1a);
	position: relative;
	overflow: hidden;
	transition: transform 220ms ease, border-color 220ms ease,
		box-shadow 220ms ease;
}

.bbh-quicklink::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 100px;
	background: radial-gradient(
		circle at top right,
		rgba(201, 166, 84, 0.1),
		transparent 70%
	);
	pointer-events: none;
}

.bbh-quicklink:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}

.bbh-quicklink__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.bbh-quicklink__desc {
	font-size: 0.9rem;
	color: #6b6b6b;
	line-height: 1.5;
	flex: 1;
}

.bbh-quicklink__cta {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #c9a654);
	margin-top: 0.25rem;
	transition: transform 220ms ease;
}

.bbh-quicklink:hover .bbh-quicklink__cta {
	transform: translateX(3px);
}

/* ===========================================================================
 * Contact email CTA (the dark "Still need a human?" panel at the bottom)
 * ========================================================================= */
.bbh-contact-email-cta {
	background: var(--wp--preset--color--ink, #1a1a1a);
	background-image: radial-gradient(
		circle at 80% 100%,
		rgba(201, 166, 84, 0.16),
		transparent 55%
	);
}

.bbh-contact-email-cta .wp-block-button__link:hover {
	background-color: #fff !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
}

/* ===========================================================================
 * MY ACCOUNT
 *
 * Compact redesign of WooCommerce's My Account:
 *   - 2-col flexbox layout (280px nav + flex-1 content)
 *   - Combined welcome+stats strip (one panel, not 4 separate ones)
 *   - Recent orders as the primary content
 *   - Quick links as low-key pills (not big cards)
 *   - Refined styling for the other endpoints (Orders list, Addresses,
 *     Account details, Payment methods)
 *
 * The post-content max-width constraint inherited from WP's is-layout-constrained
 * has to be killed here, otherwise the .woocommerce container collapses below
 * its grid breakpoint and the nav stacks above the content.
 * ========================================================================= */

/* ---- LAYOUT: release only the INNER post-content constraint ----
 * Background: the page template wraps post-content in a constrained group
 * with contentSize 1200px (good). Post-content itself has its own
 * is-layout-constrained which shrinks ITS children to global content-size
 * (~720px — bad, it crushes the dashboard).
 *
 * We need to release the INNER constraint without removing the OUTER one,
 * otherwise the dashboard expands to full browser width. Target only
 * `.is-layout-constrained > .woocommerce` so post-content itself keeps its
 * 1200px max-width from the page template. */
.woocommerce-account .wp-block-post-content.is-layout-constrained > .woocommerce {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 2rem;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 260px;
	width: 260px;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 0;
	min-width: 0; /* lets the content shrink past its intrinsic min-width */
}

/* Disable WC's default float-based layout (would conflict with our flex) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
}

/* Mobile: stack the nav above the content. */
@media (max-width: 880px) {
	.woocommerce-account .wp-block-post-content > .woocommerce {
		flex-wrap: wrap;
		gap: 1rem;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ---- SIDEBAR NAV ---- */
.bbh-account-nav {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 0.5rem;
	position: sticky;
	top: 90px;
}

/* WC ships a global `.woocommerce-MyAccount-navigation li { margin: 1em 0 0 }`
 * which adds ~16px of whitespace BETWEEN every item — comes out to a
 * massive vertical gap when stacked. We win the cascade with !important
 * because WC's rule has the same selector specificity but loads later. */
.bbh-account-nav ul,
.woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.2rem !important;
}

.bbh-account-nav li,
.woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
}

.bbh-account-nav a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
	position: relative;
}

.bbh-account-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(201, 166, 84, 0.1);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	flex-shrink: 0;
	transition: background 180ms ease, color 180ms ease;
}

.bbh-account-nav__label {
	flex: 1;
	line-height: 1.2;
}

.bbh-account-nav a:hover {
	background: #fafaf6;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
}

/* Active item — solid ink fill, gold icon chip stays warm against the dark */
.bbh-account-nav .is-active a,
.bbh-account-nav li.is-active > a,
.bbh-account-nav .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
}

.bbh-account-nav .is-active .bbh-account-nav__icon,
.bbh-account-nav li.is-active .bbh-account-nav__icon {
	background: rgba(201, 166, 84, 0.22);
	color: var(--wp--preset--color--gold, #d9b96e);
}

/* ---- DASHBOARD STACK ---- */
.bbh-account-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* ---- COMBINED HEADER STRIP (welcome left + stats right) ----
 * One panel instead of welcome + stat-cards row. Dark gradient base with
 * a gold radial wash. Stats sit inline on the right as a small unit list. */
.bbh-account-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.5rem 1.75rem;
	border-radius: 14px;
	background-image:
		radial-gradient(circle at 95% 10%, rgba(201, 166, 84, 0.22), transparent 55%),
		linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.bbh-account-header__main {
	flex: 1 1 auto;
	min-width: 180px;
}

.bbh-account-header__eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold, #d9b96e);
	margin: 0 0 0.35rem;
}

.bbh-account-header__name {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: clamp(1.5rem, 2.5vw, 1.85rem);
	font-weight: 500;
	color: #fff;
	margin: 0;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.bbh-account-header__stats {
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.bbh-account-header__stats li {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.bbh-account-header__stats strong {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.15rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.005em;
	line-height: 1;
}

.bbh-account-header__stats strong bdi {
	font-family: inherit;
}

.bbh-account-header__stats span {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 640px) {
	.bbh-account-header {
		padding: 1.25rem 1.4rem;
	}
	.bbh-account-header__stats {
		gap: 1.25rem;
	}
}

/* ---- PANEL (Recent orders) ---- */
.bbh-account-panel {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 1.4rem 1.5rem 1.5rem;
}

/* Gift Card Balance — PW Gift Cards form rendered inside the account endpoint.
   Higher specificity (panel id) overrides the plugin's inline <style>. */
.bbh-account-giftcard #pwgc-balance-container { text-align: center; padding: 0.5rem 0 0.25rem; }
.bbh-account-giftcard .fa-gift { color: var(--wp--preset--color--gold-dark, #a8893f); font-size: 2.6rem !important; }
.bbh-account-giftcard #pwgc-balance-title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', Georgia, serif);
	font-size: 1.25rem !important; font-weight: 500; color: var(--wp--preset--color--ink, #1a1a1a); margin: 0.8rem 0 1.3rem !important;
}
.bbh-account-giftcard #pwgc-balance-number-container { margin: 0 auto 0.5rem !important; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.bbh-account-giftcard #pwgc-balance-number {
	width: 320px !important; max-width: 100%; margin: 0 !important; padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--fog, #ebebeb); border-radius: 8px; font-size: 1rem;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}
.bbh-account-giftcard #pwgc-balance-number:focus { outline: none; border-color: var(--wp--preset--color--gold, #c9a654); box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.16); }
.bbh-account-giftcard #pwgc-balance-button {
	padding: 0.72rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--gold, #c9a654); color: var(--wp--preset--color--black, #0d0d0d);
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}
.bbh-account-giftcard #pwgc-balance-button:hover { background: var(--wp--preset--color--gold-dark, #a8893f); color: #fff; }
.bbh-account-giftcard #pwgc-balance-amount-value { color: var(--wp--preset--color--gold-dark, #a8893f) !important; }

.bbh-account-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 1rem;
	gap: 1rem;
}

.bbh-account-panel__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0;
	letter-spacing: -0.005em;
}

.bbh-account-panel__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
	transition: color 180ms ease;
}

.bbh-account-panel__more svg {
	transition: transform 180ms ease;
}

.bbh-account-panel__more:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
}

.bbh-account-panel__more:hover svg {
	transform: translateX(2px);
}

/* ---- RECENT ORDERS LIST ----
 * Flex-based row (not grid) so text wraps gracefully at narrow widths
 * instead of breaking mid-date. Order ID + date/items on the left, status
 * pill in the middle, total + chevron on the right. */
.bbh-account-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.bbh-account-orders li {
	margin: 0;
	padding: 0;
}

.bbh-account-order {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1rem;
	border: 1px solid #f0f0f0;
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a1a);
	transition: border-color 180ms ease, background 180ms ease;
}

.bbh-account-order:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	background: #fefdf9;
	text-decoration: none;
}

.bbh-account-order__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.bbh-account-order__id {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
}

.bbh-account-order__sub {
	font-size: 0.78rem;
	color: #7a7a7a;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
}

.bbh-account-order__dot {
	color: #c5c5c5;
}

.bbh-account-order__status {
	display: inline-flex;
	align-items: center;
	padding: 0.22rem 0.65rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: #f3f3f3;
	color: #555;
	white-space: nowrap;
	flex-shrink: 0;
}

.bbh-account-order__status--processing,
.bbh-account-order__status--on-hold,
.bbh-account-order__status--pending {
	background: rgba(201, 166, 84, 0.14);
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-account-order__status--completed {
	background: rgba(34, 139, 87, 0.12);
	color: #1f7a4d;
}

.bbh-account-order__status--cancelled,
.bbh-account-order__status--failed,
.bbh-account-order__status--refunded {
	background: rgba(180, 60, 60, 0.1);
	color: #b43c3c;
}

.bbh-account-order__total {
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.bbh-account-order__total bdi {
	font-family: inherit;
}

.bbh-account-order__chevron {
	color: #c0c0c0;
	flex-shrink: 0;
	transition: transform 180ms ease, color 180ms ease;
}

.bbh-account-order:hover .bbh-account-order__chevron {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	transform: translateX(2px);
}

@media (max-width: 560px) {
	.bbh-account-order {
		flex-wrap: wrap;
	}
	.bbh-account-order__meta {
		flex: 1 1 60%;
	}
	.bbh-account-order__sub {
		white-space: normal;
	}
	.bbh-account-order__status {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		margin-top: 0.25rem;
	}
	.bbh-account-order__chevron {
		display: none;
	}
}

/* ---- EMPTY STATE (no orders yet) — compact version ---- */
.bbh-account-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5rem 1rem;
	background: #fafaf6;
	border: 1px dashed #e0d8c4;
	border-radius: 10px;
}

.bbh-account-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(201, 166, 84, 0.12);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	margin-bottom: 0.75rem;
}

.bbh-account-empty h3 {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0 0 0.3rem;
}

.bbh-account-empty p {
	font-size: 0.88rem;
	color: #6b6b6b;
	line-height: 1.5;
	margin: 0 0 0.85rem;
	max-width: 32ch;
}

.bbh-account-empty__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.25rem;
	background: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 180ms ease;
}

.bbh-account-empty__cta:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
}

/* ---- QUICK LINKS (pill-style, not big cards) ----
 * Rendered as a small row of pill links below the orders panel.
 * Low visual weight on purpose — these aren't the primary action. */
.bbh-account-quicklinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bbh-account-quicklinks a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease,
		background 180ms ease;
}

.bbh-account-quicklinks a svg {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	opacity: 0.7;
	transition: transform 180ms ease, opacity 180ms ease;
}

.bbh-account-quicklinks a:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	background: #fefdf9;
	text-decoration: none;
}

.bbh-account-quicklinks a:hover svg {
	transform: translateX(2px);
	opacity: 1;
}

/* ===========================================================================
 * MY ACCOUNT — non-dashboard endpoints
 *
 * Lighter touch styling for the other tabs (Orders list, Addresses,
 * Account details, Payment methods, etc.) so they share the same visual
 * vocabulary without us having to override every template.
 * ========================================================================= */

/* Section titles inside any account endpoint — calm Playfair, not the
 * theme's display-size H2/H3 default. We target both the bare element
 * and the specific WC title classes used on Order Details / Customer
 * Details columns. */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3,
.woocommerce-MyAccount-content > h4,
.woocommerce-MyAccount-content article > header > h1,
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-customer-details__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	letter-spacing: -0.005em !important;
	margin: 1.5rem 0 1rem !important;
	line-height: 1.25 !important;
}

.woocommerce-MyAccount-content > h2:first-child,
.woocommerce-MyAccount-content > h3:first-child,
.woocommerce-MyAccount-content .woocommerce-order-details__title:first-child {
	margin-top: 0 !important;
}

/* Tables (orders list, downloads) */
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .shop_table {
	border: 1px solid #ececec;
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .shop_table th {
	background: #fafaf6;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6b6b6b;
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid #ececec;
}

.woocommerce-MyAccount-content .woocommerce-orders-table td,
.woocommerce-MyAccount-content .shop_table td {
	padding: 1rem;
	border-bottom: 1px solid #f3f3f3;
	font-size: 0.92rem;
	vertical-align: middle;
}

.woocommerce-MyAccount-content .woocommerce-orders-table tr:last-child td,
.woocommerce-MyAccount-content .shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-MyAccount-content .woocommerce-orders-table tr:hover td {
	background: #fafafa;
}

.woocommerce-MyAccount-content .woocommerce-orders-table .button,
.woocommerce-MyAccount-content .shop_table .button {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 180ms ease;
}

.woocommerce-MyAccount-content .woocommerce-orders-table .button:hover,
.woocommerce-MyAccount-content .shop_table .button:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Status pill inside the orders table — match our dashboard pills. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status mark {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #f3f3f3;
	color: #555;
}

/* ---- ADDRESS CARDS ----
 *
 * WC's My Addresses page outputs this:
 *   <div class="u-columns woocommerce-Addresses col2-set addresses">
 *     <div class="u-column1 col-1 woocommerce-Address">...billing</div>
 *     <div class="u-column2 col-2 woocommerce-Address">...shipping</div>
 *   </div>
 *
 * WC's default CSS gives `.col-1` / `.col-2` `float: left; width: 48%`,
 * which is why my earlier grid layout was being clobbered into narrow
 * floated boxes on the right. We have to explicitly release the floats
 * AND override the width before the grid can take over.
 *
 * Heads-up note: the title heading inside the card varies (h2 / h3 / h4)
 * across WC versions and plugin overrides, so the title rule below
 * targets every level with !important. */
.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .u-columns.woocommerce-Addresses,
.woocommerce-MyAccount-content .col2-set.addresses {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: 1.25rem !important;
	margin: 1rem 0 0 !important;
	width: 100% !important;
	max-width: none !important;
}

/* Reset the inner column wrappers — release floats and widths so the grid
 * cell sizes them. */
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-1,
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-2,
.woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1,
.woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2 {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

/* Clear the pseudo-table that WC's `.u-columns:before/:after` injects
 * (used as a float clearfix — irrelevant once floats are gone, and it
 * adds phantom whitespace). */
.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after {
	display: none !important;
}

.woocommerce-Address {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 1.5rem 1.6rem !important;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	box-sizing: border-box;
}

.woocommerce-Address:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.woocommerce-Address .woocommerce-Address-title,
.woocommerce-Address-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	margin: 0 0 1rem !important;
	padding: 0 0 0.85rem !important;
	border-bottom: 1px solid #f3f3f3;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
}

/* Force the title heading to a calm 1.05rem regardless of WC's element
 * choice (h2/h3/h4) or theme.json defaults. */
.woocommerce-Address-title h1,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3,
.woocommerce-Address-title h4,
.woocommerce-Address-title h5,
.woocommerce-Address-title .title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
}

.woocommerce-Address-title .edit {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	transition: color 180ms ease;
}

.woocommerce-Address-title .edit:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.woocommerce-Address address {
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #4a4a4a;
	margin: 0;
}

/* The intro line above the address cards ("The following addresses will be
 * used on the checkout page by default.") — calm it down. */
.woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-MyAccount-content > .woocommerce-Addresses + p,
.woocommerce-MyAccount-content > p:has(+ .woocommerce-Addresses) {
	font-size: 0.95rem;
	color: #6b6b6b;
	margin: 0 0 1.25rem;
	line-height: 1.55;
}

/* Forms (Account details, address edit) */
.woocommerce-MyAccount-content form .form-row {
	margin-bottom: 1rem;
}

.woocommerce-MyAccount-content form label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b6b6b;
	margin-bottom: 0.4rem;
}

.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form input[type="number"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	font-size: 0.95rem;
	border: 1px solid #ececec;
	border-radius: 8px;
	background: #fafafa;
	font-family: inherit;
	transition: border-color 180ms ease, background 180ms ease;
	box-sizing: border-box;
}

.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	background: #fff;
}

.woocommerce-MyAccount-content form .button,
.woocommerce-MyAccount-content button[name="save_account_details"],
.woocommerce-MyAccount-content button[name="save_address"] {
	display: inline-flex;
	align-items: center;
	padding: 0.8rem 1.6rem;
	background: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 180ms ease;
	font-family: inherit;
}

.woocommerce-MyAccount-content form .button:hover,
.woocommerce-MyAccount-content button[name="save_account_details"]:hover,
.woocommerce-MyAccount-content button[name="save_address"]:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Notice messages (errors, success, info) — soft tinted cards, no left rail.
 * Previously these used a 3px coloured left border that the brand owner
 * flagged as a "bracket" look. Now a fully-tinted background with matching
 * text colour and a 12px rounded corner. */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-notice {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.95rem 1.15rem;
	border: 0 !important;
	border-radius: 12px;
	font-size: 0.92rem;
	font-weight: 500;
	margin: 0 0 1.25rem;
	list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-message {
	background: rgba(34, 139, 87, 0.1);
	color: #1f7a4d;
}

.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-notice--info {
	background: rgba(201, 166, 84, 0.14);
	color: #8a7028;
}

.woocommerce-MyAccount-content .woocommerce-error {
	background: rgba(180, 60, 60, 0.1);
	color: #a73838;
}

/* Some WC notices use ::before pseudos for icons that look out of place
 * with our flat colour treatment — neutralise them. */
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-error::before {
	display: none !important;
}

/* ---- ORDER DETAILS PAGE (view-order endpoint) ----
 * The "Order #X was placed on... and is currently STATUS" intro line.
 * We bake it into a soft tinted "header" strip with the order # in larger
 * Playfair so it reads as a section banner, not a sentence. */
.woocommerce-MyAccount-content .woocommerce-order > p:first-child,
.woocommerce-MyAccount-content > p.woocommerce-order-overview,
.woocommerce-MyAccount-content > .woocommerce-order > p:first-child {
	background: #fafaf6;
	border: 1px solid #f0e9d8;
	border-radius: 12px;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	color: #3a3a3a;
	line-height: 1.55;
	margin: 0 0 1.5rem;
}

.woocommerce-MyAccount-content .woocommerce-order > p:first-child strong,
.woocommerce-MyAccount-content > .woocommerce-order > p:first-child strong {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* "Order Again" button — make it a solid dark pill, not the gold-outlined
 * mystery button it was. */
.woocommerce-MyAccount-content .order-again .button,
.woocommerce-MyAccount-content p.order-again .button,
.woocommerce-MyAccount-content .woocommerce-MyAccount-orders-table .button.order {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.5rem !important;
	background: var(--wp--preset--color--ink, #1a1a1a) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	margin: 1.5rem 0 !important;
}

.woocommerce-MyAccount-content .order-again .button:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654) !important;
	color: #fff !important;
}

/* Customer details columns — Billing + Shipping side by side on view-order */
.woocommerce-MyAccount-content .woocommerce-customer-details {
	margin-top: 1.5rem;
}

.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 640px) {
	.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr;
	}
}

.woocommerce-MyAccount-content .woocommerce-customer-details .col-1,
.woocommerce-MyAccount-content .woocommerce-customer-details .col-2 {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 1.4rem 1.5rem;
	width: auto !important;
	max-width: none !important;
	float: none !important;
}

.woocommerce-MyAccount-content .woocommerce-customer-details address {
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #4a4a4a;
	border: 0;
	padding: 0;
}

.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-customer-details--email {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: #4a4a4a;
	margin: 0.85rem 0 0;
	padding: 0.85rem 0 0;
	border-top: 1px solid #f3f3f3;
}

/* The order details table — refine column headers + cell padding so it
 * reads more like a receipt than a spreadsheet. */
.woocommerce-MyAccount-content .woocommerce-table--order-details,
.woocommerce-MyAccount-content table.shop_table.order_details {
	border: 1px solid #ececec;
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
	margin: 0 0 1.5rem;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details th,
.woocommerce-MyAccount-content table.shop_table.order_details th {
	background: #fafaf6;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a8a8a;
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid #ececec;
}

.woocommerce-MyAccount-content .woocommerce-table--order-details td,
.woocommerce-MyAccount-content table.shop_table.order_details td {
	padding: 1rem 1.1rem;
	border-bottom: 1px solid #f3f3f3;
	font-size: 0.93rem;
	vertical-align: top;
}

.woocommerce-MyAccount-content table.shop_table.order_details tfoot th {
	background: #fafafa;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: #6b6b6b;
	font-weight: 700;
}

.woocommerce-MyAccount-content table.shop_table.order_details tfoot td {
	font-weight: 600;
	background: #fafafa;
}

.woocommerce-MyAccount-content table.shop_table.order_details .product-name a {
	color: var(--wp--preset--color--ink, #1a1a1a);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-content table.shop_table.order_details .product-name a:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.woocommerce-MyAccount-content table.shop_table.order_details .wc-item-meta {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: #6b6b6b;
}

.woocommerce-MyAccount-content table.shop_table.order_details .wc-item-meta li {
	margin: 0.2rem 0;
	padding: 0;
}

.woocommerce-MyAccount-content table.shop_table.order_details .wc-item-meta strong {
	color: #4a4a4a;
	font-weight: 600;
}

/* ---- ACCOUNT DETAILS PAGE (edit-account endpoint) ----
 *
 * Flexbox-based form. Every row is a <p class="form-row"> in WC's output;
 * `.form-row-first` and `.form-row-last` are meant to be side-by-side at
 * 50% each, the rest are full width. We use flex-wrap so wide rows take
 * their own line and the first/last pair share one.
 *
 * inline-block doesn't work here because the form-row <p> elements get
 * margin-top from theme.json's block-level rule and the whitespace
 * between elements introduces 4px gaps that don't divide cleanly. Flexbox
 * + gap solves both. */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 1.75rem 1.85rem;
	max-width: 760px;
	box-sizing: border-box;
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm > p,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset {
	flex: 1 1 100%;
	margin: 0 !important;
	min-width: 0;
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-first,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-last {
	flex: 1 1 calc(50% - 0.5rem);
}

@media (max-width: 600px) {
	.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-first,
	.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row-last {
		flex: 1 1 100%;
	}
}

/* "Password change" fieldset — full-width divider above it, legend in
 * Playfair so it reads as a section header. */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset {
	margin-top: 0.5rem !important;
	padding: 1.5rem 0 0 !important;
	border: 0 !important;
	border-top: 1px solid #ececec !important;
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset legend {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	padding: 0 !important;
	margin: 0 0 0.85rem !important;
	letter-spacing: -0.005em !important;
}

/* Rows INSIDE the fieldset need to be vertical-stack, not inheriting the
 * outer flex layout. */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset .form-row {
	display: block;
	margin-bottom: 1rem;
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset .form-row:last-child {
	margin-bottom: 0;
}

/* Save Changes button — force the solid dark pill across every selector
 * variant WC might emit. Previously the button rendered as a thin gold
 * outline because my selectors lost to WC's default `.button` rule. */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button.woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content button.button[type="submit"],
.woocommerce-MyAccount-content button[name="save_account_details"],
.woocommerce-MyAccount-content button[name="save_address"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.85rem 1.75rem !important;
	background: var(--wp--preset--color--ink, #1a1a1a) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background 180ms ease !important;
	text-decoration: none !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content button[name="save_account_details"]:hover,
.woocommerce-MyAccount-content button[name="save_address"]:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654) !important;
	color: #fff !important;
}

/* Tighten the "leave blank to keep the same" hint inside the password fields */
.woocommerce-MyAccount-content em small,
.woocommerce-MyAccount-content .form-row span em {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.78rem;
	color: #8a8a8a;
	font-style: normal;
}

/* Mobile: nav scrolls horizontally so it's still usable. */
@media (max-width: 880px) {
	.bbh-account-nav {
		position: static;
		padding: 0.4rem;
	}
	.bbh-account-nav ul {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
	}
	.bbh-account-nav ul::-webkit-scrollbar {
		display: none;
	}
	.bbh-account-nav li {
		flex-shrink: 0;
	}
	.bbh-account-nav a {
		flex-direction: column;
		gap: 0.3rem;
		padding: 0.6rem 0.8rem;
		min-width: 80px;
		text-align: center;
	}
	.bbh-account-nav__label {
		font-size: 0.75rem;
		line-height: 1.2;
	}
	.bbh-account-welcome {
		padding: 1.75rem 1.5rem;
	}
}

/* ===========================================================================
 * RUBIK — UI font for small uppercase moments
 *
 * Type system at a glance:
 *   - Playfair Display: editorial headlines, product names, big H1/H2 moments
 *   - Inter: long-form body copy (FAQ answers, product descriptions, etc.)
 *   - Rubik (this section): UI labels, buttons, navigation, eyebrows,
 *     status pills, form labels, badges — anything that's tracked uppercase
 *     or short-form interactive text. Rubik's slightly-rounded geometry
 *     adds friendliness without competing with Playfair's serif elegance.
 *
 * Loaded via `family=Rubik:wght@300..900` in the Google Fonts URL in
 * functions.php and registered as the `rubik` font slug in theme.json.
 * ========================================================================= */

/* Eyebrow labels — the tiny gold uppercase tracked text used above headlines
 * (e.g. "HELP CENTER", "WELCOME BACK", "GET IN TOUCH", "SHOP", etc.).
 * Match by the typography fingerprint we use consistently for all eyebrows:
 * tiny font-size + heavy letter-spacing + uppercase. */
.has-gold-dark-color.has-text-color[style*="uppercase"],
.has-gold-color.has-text-color[style*="uppercase"],
.bbh-faq-category,
.bbh-account-header__eyebrow,
.bbh-account-stat__label,
.bbh-account-empty p,
.bbh-account-section__more,
.bbh-account-panel__more,
.bbh-filters__count,
.bbh-account-order__status,
.bbh-search-form__icon,
.bbh-quicklink__cta,
.bbh-contact-card__label {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Buttons everywhere — pill CTAs, WP buttons, WC buttons, GF submit, custom
 * .bbh-* buttons. All use uppercase tracked text already; Rubik tightens
 * them visually. */
.wp-block-button__link,
.wp-element-button,
.bbh-filters__apply,
.bbh-filters__drawer-apply,
.bbh-filters__pill,
.bbh-filters__toggle,
.bbh-filters__trigger--mobile,
.bbh-pagination .page-numbers,
.bbh-pagination .wp-block-query-pagination-previous,
.bbh-pagination .wp-block-query-pagination-next,
.bbh-account-empty__cta,
.bbh-quicklink,
.bbh-account-action,
.bbh-search-toggle,
.bbh-search-form__close,
.bbh-search-more,
.bbh-account-nav a,
.bbh-account-quicklinks a,
.bbh-account-order__status,
.bbh-account-order__id,
.bbh-account-order__sub,
.bbh-account-order__total,
.bbh-account-stat__label,
.bbh-account-header__stats span,
.bbh-account-header__stats strong,
.bbh-filters__chip,
.bbh-filters__sort select {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Header navigation — the WHOLESALE / SHOP / SAMPLES / FAQ / CONTACT menu */
.bbh-primary-nav,
.bbh-primary-nav a,
.bbh-primary-nav .wp-block-navigation-item__label {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Footer column titles (GET STARTED / HELPFUL PAGES / SOCIALS) and link
 * items — uppercase tracked, perfect for Rubik. */
.wp-block-site-footer,
footer .has-gold-color,
footer .has-gold-dark-color,
footer ul,
footer li,
footer a {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* WC My Account — labels, buttons, table headers, pills, side nav */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-content form label,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content .order-again .button,
.woocommerce-MyAccount-content table.shop_table.order_details th,
.woocommerce-MyAccount-content table.shop_table.order_details tfoot th,
.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table .button,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit,
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status mark,
.bbh-account-nav__label {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Form fields across the site — Gravity Forms labels + inputs, WC inputs.
 * Inputs get Rubik so typed-in values match the form chrome visually. */
.gform_wrapper .gfield_label,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea,
.gform_wrapper select,
.gform_wrapper button,
.gform_wrapper .gform_button,
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form input[type="number"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea,
.bbh-filters__range-field input,
.bbh-filters__range-field span,
.bbh-search-form__input {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Search results panel labels + meta */
.bbh-search-hint,
.bbh-search-loading,
.bbh-search-empty,
.bbh-search-result__title,
.bbh-search-result__price,
.bbh-search-more {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Stat values in the My Account dashboard header — Playfair was nice but
 * Rubik feels more "dashboard / metric" appropriate. Keeps the header
 * strip feeling like a stats panel rather than an editorial page. */
.bbh-account-header__stats strong {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
}

/* WC mini cart, product price labels, sale badges */
.wc-block-mini-cart__button,
.wc-block-mini-cart__title,
.bbh-account-stat__value,
.woocommerce-Price-amount,
.price ins .woocommerce-Price-amount,
.price del .woocommerce-Price-amount {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Reduced-motion users: no changes needed (font swap doesn't animate) */

/* ===========================================================================
 * SEARCH RESULTS PAGE — element suppression safety net
 *
 * Even with the PHP filters in functions.php (which remove WC's template
 * hijack + WC page title hook + Rank Math breadcrumb), some compat layers
 * or plugin updates can re-inject these. This CSS belt-and-braces ensures
 * they never appear on search results regardless of which plugin tries.
 *
 * Scoped strictly to body.search-results so it can't accidentally hide
 * breadcrumbs / titles on regular pages.
 * ========================================================================= */
body.search-results .rank-math-breadcrumb,
body.search-results .rank-math-breadcrumbs,
body.search-results nav[aria-label="Breadcrumbs"],
body.search-results nav.woocommerce-breadcrumb,
body.search-results .woocommerce-breadcrumb {
	display: none !important;
}

/* WC page title ("Search results for:") + the legacy products-header wrapper
 * if anything tries to render them. */
body.search-results .woocommerce-products-header,
body.search-results .woocommerce-products-header__title,
body.search-results h1.page-title,
body.search-results .entry-header h1.entry-title {
	display: none !important;
}

/* The legacy result count + sort dropdown above the grid — if WC's archive
 * template ever does render through (e.g. on a plugin compatibility issue),
 * these are the two strips above the products. We hide them on search
 * because our block template provides its own filter bar with sort. */
body.search-results .woocommerce-result-count,
body.search-results .woocommerce-ordering {
	display: none !important;
}

/* If a stale archive-product.php legacy template ever renders, the product
 * grid expands to the body width. Force it back into a constrained centered
 * column matching the rest of the search.html layout. */
body.search-results .woocommerce ul.products {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--40, 1.5rem);
	padding-right: var(--wp--preset--spacing--40, 1.5rem);
	box-sizing: border-box;
}

/* Brute-force restyle for the worst case where WC's legacy template still
 * gets rendered (the template_include filter race condition we keep losing).
 * These rules constrain ANY content on search results to a 1280px column
 * and tame the giant WC page title to match our subtle hero treatment from
 * search.html. */
body.search-results .woocommerce {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--wp--preset--spacing--40, 1.5rem) !important;
	padding-right: var(--wp--preset--spacing--40, 1.5rem) !important;
	box-sizing: border-box;
}

/* The huge WC default H1 ("Search results for: X") — calm it down to match
 * the page-faq.html / page-contact-us.html title treatment. Centered,
 * Playfair, ~2rem max. */
body.search-results h1.entry-title,
body.search-results h1.page-title,
body.search-results .woocommerce-products-header__title,
body.search-results .entry-header h1 {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
	font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	text-align: center !important;
	margin: var(--wp--preset--spacing--50, 2.5rem) auto var(--wp--preset--spacing--40, 1.5rem) !important;
	padding: 0 var(--wp--preset--spacing--40, 1.5rem) !important;
	max-width: 1280px;
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
}

/* Legacy WC products grid — force responsive 4-col grid layout (matches
 * the look of our archive-product.html). */
body.search-results .woocommerce ul.products.columns-4,
body.search-results .woocommerce ul.products.columns-3 {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 2rem !important;
	padding: 0 !important;
	margin: 0 auto var(--wp--preset--spacing--60, 3rem) !important;
	list-style: none !important;
}

body.search-results .woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* ===========================================================================
 * PRODUCT DETAIL PAGE (single-product.html)
 *
 * Inspired by Shoptimizer's information hierarchy but executed in our
 * brand vocabulary: Playfair display headlines, Rubik UI, gold accents.
 *
 * Three new sections:
 *   1. Trust signals strip directly under Add to Cart (3 items + payments)
 *   2. Brand values showcase (4 cards) between hero and product details
 *   3. Polished related products section header
 *
 * Plus hero refinements: tighter title-to-rating-to-price rhythm, breadcrumb
 * styling, and an in-stock indicator treatment so the buy-box reads like
 * a refined buying decision, not a database dump.
 * ========================================================================= */

/* ---- PDP breadcrumb — quiet by default, gold on hover ---- */
.bbh-pdp-breadcrumb,
.bbh-pdp-breadcrumb .wp-block-woocommerce-breadcrumbs {
	font-size: 0.78rem;
	color: #888;
	letter-spacing: 0.04em;
}

.bbh-pdp-breadcrumb a {
	color: #888;
	text-decoration: none;
	transition: color 180ms ease;
}

.bbh-pdp-breadcrumb a:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-pdp-breadcrumb .breadcrumb-separator {
	margin: 0 0.4rem;
	color: #ccc;
}

/* ---- HERO: gallery + buy box ---- */
.bbh-pdp-hero {
	align-items: flex-start;
}

/* Gallery — soften corners + add subtle background tint so product photos
 * don't float on a pure white void */
.bbh-pdp-gallery-col .wp-block-woocommerce-product-image-gallery img,
.bbh-pdp-gallery-col .woocommerce-product-gallery img {
	border-radius: 8px;
	background: #fafaf6;
}

/* Buy box: vertical rhythm */
.bbh-pdp-buybox .bbh-pdp-title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* ---- RATING (custom shortcode) ----
 *
 * Two layers: empty stars in background (light gold), filled stars
 * overlaid with `width: X%` to show fractional ratings cleanly. Whole
 * thing is a hover-linked anchor to #reviews. */
.bbh-pdp-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	min-height: 18px;
}

.bbh-pdp-rating__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none !important;
	color: var(--wp--preset--color--ink, #1a1a1a);
	transition: color 180ms ease;
	line-height: 1;
}

.bbh-pdp-rating__link:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-pdp-rating__count {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.82rem;
	font-weight: 500;
	color: #6b6b6b;
	line-height: 1;
	transition: color 180ms ease;
}

.bbh-pdp-rating__link:hover .bbh-pdp-rating__count {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Zero-review state — "Be the first to review" CTA */
.bbh-pdp-rating--empty {
	gap: 0.5rem;
}

.bbh-pdp-rating--empty .bbh-rating__empty {
	color: #e0d6b8;
}

.bbh-pdp-rating__cta {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	padding-bottom: 1px;
	line-height: 1;
	transition: color 180ms ease, border-color 180ms ease;
}

.bbh-pdp-rating__cta:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
	border-color: transparent;
}

/* The actual stars — two-layer system for half-star precision.
 * Empty layer = background (light gold outline color).
 * Filled layer = gold, clipped to a percentage width = rating/5 * 100%. */
.bbh-rating {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.bbh-rating__empty {
	display: inline-flex;
	gap: 1px;
	color: #e8dfc4;
}

.bbh-rating__filled {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	gap: 1px;
	color: var(--wp--preset--color--gold-dark, #c9a654);
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
}

.bbh-rating__star {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: block;
}

/* ---- PRICE (toned down) ---- */
.bbh-pdp-buybox .bbh-pdp-price {
	display: block;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.3rem !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.bbh-pdp-buybox .bbh-pdp-price del {
	color: #b0b0b0;
	font-weight: 400;
	margin-right: 0.5rem;
}

.bbh-pdp-buybox .bbh-pdp-price ins {
	text-decoration: none;
}

/* ---- Product descriptions in Rubik ----
 *
 * Short description (excerpt) in the buy box + long description in the
 * Description tab both render in Rubik per brand preference. Rubik's
 * slightly-rounded geometry pairs better with the cards/pills around it
 * than Inter does, even though Inter is technically a better long-form
 * body font.
 *
 * Heading elements (h2/h3/h4) inside the long description stay in
 * Playfair — they're editorial moments and shouldn't switch to UI font. */
.bbh-pdp-buybox .bbh-pdp-excerpt,
.bbh-pdp-buybox .bbh-pdp-excerpt p {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #5a5a5a;
	font-weight: 400;
}

/* Long description body text inside the Description / Additional Info / Reviews
 * tab panels. Target paragraph / list / link content but NOT headings,
 * price amounts, OR the star-rating widget (whose <span> needs WC's
 * custom "star" font to render the gold star glyphs — without it, you
 * see the raw letters "sssss" / "SSSSS"). */
.bbh-pdp-details .woocommerce-Tabs-panel p,
.bbh-pdp-details .woocommerce-Tabs-panel li,
.bbh-pdp-details .woocommerce-Tabs-panel strong,
.bbh-pdp-details .woocommerce-Tabs-panel em,
.bbh-pdp-details .woocommerce-Tabs-panel a,
.bbh-pdp-details .woocommerce-Tabs-panel span:not(.woocommerce-Price-amount):not(.woocommerce-Price-currencySymbol) {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Belt-and-braces: force WC's "star" font back onto the rating widget
 * with HIGHER specificity than the override above. WC's stars are
 * actually icon-font glyphs (lowercase `s` → empty star outline,
 * uppercase `S` → filled gold star). When font-family is anything other
 * than "star", you see raw letters. */
.bbh-pdp-details .woocommerce-Tabs-panel .star-rating,
.bbh-pdp-details .woocommerce-Tabs-panel .star-rating::before,
.bbh-pdp-details .woocommerce-Tabs-panel .star-rating span,
.bbh-pdp-details .woocommerce-Tabs-panel .star-rating span::before,
.bbh-pdp-details .woocommerce-Tabs-panel p.stars,
.bbh-pdp-details .woocommerce-Tabs-panel p.stars a,
.bbh-pdp-details .woocommerce-Tabs-panel p.stars a::before {
	font-family: star !important;
}

/* Tune readability of the long description: comfortable line-height, soft
 * ink color, generous spacing between paragraphs. */
.bbh-pdp-details .woocommerce-Tabs-panel p,
.bbh-pdp-details .woocommerce-Tabs-panel li {
	font-size: 0.97rem;
	line-height: 1.7;
	color: #3a3a3a;
}

.bbh-pdp-details .woocommerce-Tabs-panel p {
	margin: 0 0 1rem;
}

.bbh-pdp-details .woocommerce-Tabs-panel ul,
.bbh-pdp-details .woocommerce-Tabs-panel ol {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

.bbh-pdp-details .woocommerce-Tabs-panel li {
	margin: 0.4rem 0;
}

/* Headings inside the description — keep these in Playfair, our editorial
 * voice for section moments inside the long copy. */
.bbh-pdp-details .woocommerce-Tabs-panel h1,
.bbh-pdp-details .woocommerce-Tabs-panel h2,
.bbh-pdp-details .woocommerce-Tabs-panel h3,
.bbh-pdp-details .woocommerce-Tabs-panel h4,
.bbh-pdp-details .woocommerce-Tabs-panel h5 {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	letter-spacing: -0.005em;
	line-height: 1.3;
	margin: 1.5rem 0 0.75rem;
}

.bbh-pdp-details .woocommerce-Tabs-panel h2 { font-size: 1.25rem; }
.bbh-pdp-details .woocommerce-Tabs-panel h3 { font-size: 1.1rem; }
.bbh-pdp-details .woocommerce-Tabs-panel h4 { font-size: 1rem; }

/* ---- TRUST SIGNALS STRIP ---- */
.bbh-pdp-trust {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #f0f0f0;
}

.bbh-pdp-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
}

@media (max-width: 520px) {
	.bbh-pdp-trust__list {
		grid-template-columns: 1fr;
	}
}

.bbh-pdp-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
}

.bbh-pdp-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(201, 166, 84, 0.12);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	flex-shrink: 0;
}

.bbh-pdp-trust__text {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	min-width: 0;
	line-height: 1.25;
}

.bbh-pdp-trust__text strong {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
	letter-spacing: -0.005em;
}

.bbh-pdp-trust__text small {
	font-size: 0.72rem;
	color: #888;
	letter-spacing: 0;
}

/* Payment methods row */
.bbh-pdp-trust__pay {
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid #f0f0f0;
	font-size: 0.72rem;
	color: #888;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.bbh-pdp-trust__pay-label {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6b6b6b;
	font-size: 0.68rem;
}

.bbh-pdp-trust__pay-methods {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: #6b6b6b;
}

/* Product meta — SKU / cats / tags row at the very bottom of the buy box */
.bbh-pdp-meta {
	font-size: 0.78rem;
	color: #888;
}

.bbh-pdp-meta .sku_wrapper,
.bbh-pdp-meta .posted_in,
.bbh-pdp-meta .tagged_as {
	display: block;
	margin-bottom: 0.35rem;
}

.bbh-pdp-meta a {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
}

.bbh-pdp-meta a:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- BRAND VALUES SHOWCASE ---- */
.bbh-pdp-values__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 1000px) {
	.bbh-pdp-values__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.bbh-pdp-values__grid {
		grid-template-columns: 1fr;
	}
}

.bbh-pdp-value {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1.2rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	transition: border-color 220ms ease, transform 220ms ease,
		box-shadow 220ms ease;
}

.bbh-pdp-value::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 100px;
	background: radial-gradient(
		circle at top right,
		rgba(201, 166, 84, 0.1),
		transparent 70%
	);
	pointer-events: none;
}

.bbh-pdp-value:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}

.bbh-pdp-value__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(201, 166, 84, 0.12);
	color: var(--wp--preset--color--gold-dark, #c9a654);
	margin-bottom: 0.25rem;
}

.bbh-pdp-value__label {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-pdp-value__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	line-height: 1.25;
	letter-spacing: -0.005em;
	margin: 0;
}

.bbh-pdp-value__desc {
	font-size: 0.88rem;
	color: #6b6b6b;
	line-height: 1.55;
	margin: 0;
}

/* ---- PRODUCT DETAILS (description / additional info tabs) ---- */
.bbh-pdp-details .wp-block-woocommerce-product-details {
	border-top: 1px solid #ececec;
	padding-top: var(--wp--preset--spacing--50, 2rem);
}

/* Tab nav */
.bbh-pdp-details .wc-tabs,
.bbh-pdp-details ul.wc-tabs {
	display: flex !important;
	gap: 0;
	padding: 0 !important;
	margin: 0 0 1.5rem !important;
	border-bottom: 1px solid #ececec;
	list-style: none !important;
}

.bbh-pdp-details .wc-tabs li,
.bbh-pdp-details ul.wc-tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bbh-pdp-details .wc-tabs li::before,
.bbh-pdp-details .wc-tabs li::after {
	display: none !important;
}

.bbh-pdp-details .wc-tabs li a {
	display: inline-block;
	padding: 0.85rem 1.4rem !important;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.78rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #888 !important;
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 180ms ease, border-color 180ms ease;
}

.bbh-pdp-details .wc-tabs li a:hover {
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
}

.bbh-pdp-details .wc-tabs li.active a {
	color: var(--wp--preset--color--ink, #1a1a1a) !important;
	border-bottom-color: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Tab content */
.bbh-pdp-details .woocommerce-Tabs-panel > h2 {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 1rem;
	letter-spacing: -0.005em;
}

.bbh-pdp-details .woocommerce-Tabs-panel {
	font-size: 0.97rem;
	line-height: 1.65;
	color: #3a3a3a;
}

/* Reviews tab styling */
.bbh-pdp-details #reviews .commentlist {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.bbh-pdp-details #reviews .commentlist li.review {
	padding: 1.25rem 1.4rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	margin: 0 0 0.85rem;
}

.bbh-pdp-details #reviews .meta {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.78rem;
	color: #6b6b6b;
	margin-bottom: 0.5rem;
}

.bbh-pdp-details #reviews .meta strong {
	color: var(--wp--preset--color--ink, #1a1a1a);
	font-weight: 600;
}

.bbh-pdp-details #reviews .star-rating {
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

/* Review form */
.bbh-pdp-details #review_form_wrapper {
	background: #fafaf6;
	border-radius: 14px;
	padding: 1.75rem 1.85rem;
	margin-top: 1.5rem;
}

.bbh-pdp-details #review_form .comment-reply-title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	display: block;
	margin-bottom: 1rem;
}

/* ---- RELATED PRODUCTS section (custom shortcode renders these cards) ---- */
.bbh-pdp-related {
	/* outer container — provides vertical rhythm; cards are children of
	 * the [bbh_related_products] shortcode output */
}

/* Belt-and-braces: hide WC's default related products section in case any
 * plugin re-registers the hook we removed in functions.php. Our custom
 * section uses .bbh-related-grid, so we hide WC's legacy .related.products
 * blocks (which use a different markup structure entirely). */
.single-product .related.products:not(.bbh-related-grid) {
	display: none !important;
}

/* Same for the upsells default section, which WC also sometimes renders. */
.single-product .upsells.products {
	display: none !important;
}

/* ---- BBH related products grid ----
 *
 * Rendered by the [bbh_related_products] shortcode in functions.php.
 * Each card is a flex column so:
 *   - image at top (1:1 aspect ratio, soft background)
 *   - title with 2-line clamp + fixed min-height (so cards align even
 *     when product names are different lengths)
 *   - price below title
 *   - button at the bottom (margin-top: auto pushes it down)
 *
 * The flex column + margin-top:auto on the button is what guarantees
 * consistent card heights regardless of product name length. */
.bbh-related-grid {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

/* Tablet/phone: a single horizontally-scrollable row instead of a 2-row grid
   — keeps all related products one swipe away while removing a full row of
   page height. Self-contained scroll, so it never overflows the page. */
@media (max-width: 880px) {
	.bbh-related-grid {
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		max-width: 100%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
		scrollbar-width: thin;
	}
	.bbh-related-card {
		flex: 0 0 46%;
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {
	.bbh-related-card {
		flex: 0 0 62%;
	}
}

.bbh-related-card {
	display: flex !important;
	flex-direction: column !important;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	transition: border-color 220ms ease, box-shadow 220ms ease,
		transform 220ms ease;
}

.bbh-related-card:hover {
	border-color: var(--wp--preset--color--gold-dark, #c9a654);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
	transform: translateY(-2px);
}

/* Image area — square aspect ratio, soft tinted background so product
 * photos (often on white) don't disappear into the card. */
.bbh-related-card__image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #fafaf6;
	overflow: hidden;
	border-bottom: 1px solid #f3f3f3;
}

.bbh-related-card__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	padding: 1rem;
	box-sizing: border-box;
	transition: transform 320ms ease;
	display: block;
}

.bbh-related-card:hover .bbh-related-card__img {
	transform: scale(1.04);
}

/* Sale badge — gold pill, top-left */
.bbh-related-card__sale {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	background: var(--wp--preset--color--gold, #d9b96e);
	color: var(--wp--preset--color--ink, #1a1a1a);
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	line-height: 1;
	z-index: 1;
}

/* Body — flex column with button pushed to bottom */
.bbh-related-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1rem 1rem 1.1rem;
	flex: 1;
	text-align: center;
	min-width: 0;
}

/* Title — 2-line clamp + fixed min-height = cards always align */
.bbh-related-card__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em; /* reserves space for 2 lines so single-line titles
	                     don't collapse and break alignment */
	transition: color 180ms ease;
}

.bbh-related-card__title:hover {
	color: var(--wp--preset--color--gold-dark, #c9a654);
	text-decoration: none;
}

/* Price */
.bbh-related-card__price {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.88rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0;
	line-height: 1.3;
	min-height: 1.3em;
}

.bbh-related-card__price del {
	color: #b0b0b0;
	margin-right: 0.35rem;
	font-weight: 400;
	text-decoration: line-through;
}

.bbh-related-card__price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark, #c9a654);
}

.bbh-related-card__price .woocommerce-Price-amount {
	font-family: inherit;
}

/* Button — pushed to bottom with margin-top:auto, full width within body */
.bbh-related-card__button {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
	text-decoration: none;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 6px;
	transition: background 180ms ease, color 180ms ease;
	line-height: 1;
}

.bbh-related-card__button:hover {
	background: var(--wp--preset--color--gold-dark, #c9a654);
	color: #fff;
	text-decoration: none;
}

/* ===========================================================================
 * PDP REDESIGN v2 — design system for all single product pages
 *
 * Spacing system: major sections breathe with clamp(2.5rem, 5vw, 4rem)
 * (≈40px mobile → 64px desktop) instead of the old spacing|70 gaps.
 * Container widened to 1360px (set in templates/single-product.html).
 *
 * New components: vertical-thumb gallery, trust chip, per-unit price hint,
 * tier price cards, wholesale CTA, accordions, size comparison table,
 * reviews summary card, sticky add-to-cart bar, related-card ratings.
 * ========================================================================= */

/* ---- Section rhythm ---- */
.bbh-pdp-section {
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem) !important;
}

/* ---- PDP length condensation ----
   Tighten the rhythm so the page reads shorter without hiding content:
   smaller section-heading gaps, and a slimmer related-products block. */
.bbh-pdp-values .wp-block-heading,
.bbh-pdp-related .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--30, 1.25rem) !important;
}
.bbh-pdp-related {
	padding-top: var(--wp--preset--spacing--40, 1.5rem) !important;
}

/* ---- GALLERY: enlarged main image + vertical thumbnail rail ---- */
.bbh-pdp-gallery-col .woocommerce-product-gallery {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	/* Hard stop: FlexSlider sets the track to width:1800%; if its .flex-viewport
	 * ever fails to clip (JS error, odd timing), this keeps the page from
	 * scrolling sideways. clip is like hidden but never creates a scroll context. */
	overflow: clip;
}

/* Pre-init guard: before FlexSlider runs, all gallery images sit stacked in
 * __wrapper as a DIRECT child of the gallery — on mobile that's a 7000px-tall
 * column. Once FlexSlider runs it nests __wrapper inside .flex-viewport, so the
 * `>` direct-child selector below stops matching and every slide is shown again
 * for the slider. (Progressive enhancement: dropdownless but functional if JS
 * is disabled, since the first image still shows.) */
.bbh-pdp-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
	display: none;
}

/* Belt-and-braces: the slider viewport must clip its oversized track. */
.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-viewport {
	overflow: hidden !important;
	max-width: 100%;
}

.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-viewport,
.bbh-pdp-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

/* Single-image products: no thumb rail, image takes the full column */
.bbh-pdp-gallery-col .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
	grid-template-columns: minmax(0, 1fr);
}

.bbh-pdp-gallery-col .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .flex-viewport,
.bbh-pdp-gallery-col .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) > .woocommerce-product-gallery__wrapper {
	grid-column: 1;
}

.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li {
	width: 76px;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none !important;
}

.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1.5px solid #ececec;
	background: #fafaf6;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 180ms ease, border-color 180ms ease;
}

.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs img:hover,
.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--wp--preset--color--gold, #c9a654);
}

/* Main image — fill the column, square crop, soft tint behind transparent
 * product shots. This is what kills the old postage-stamp gallery. */
.bbh-pdp-gallery-col .woocommerce-product-gallery__image img,
.bbh-pdp-gallery-col .woocommerce-product-gallery__wrapper img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 12px;
	background: #fafaf6;
}

@media (min-width: 1024px) {
	.bbh-pdp-gallery-col .woocommerce-product-gallery {
		position: sticky;
		top: 96px;
	}
}

@media (max-width: 781px) {
	.bbh-pdp-gallery-col .woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr);
		position: static;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-viewport,
	.bbh-pdp-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 1;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li {
		width: 56px;
	}
}

/* ---- TRUST CHIP (rendered by [bbh_product_rating]) ---- */
.bbh-pdp-rating {
	flex-wrap: wrap;
	row-gap: 0.45rem;
}

.bbh-pdp-rating__chip {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #6b6b6b;
	background: #f7f6f3;
	border: 1px solid #eeeae0;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1;
}

/* ---- PER-UNIT PRICE HINT (injected by pdp-enhancements.js) ---- */
.bbh-price-hint {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	margin: -0.35rem 0 0.9rem;
}

/* ---- TIER PRICE CARDS (quantity swatches upgraded by JS) ---- */
.bbh-swatches--quantity {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 0.6rem;
	width: 100%;
	margin-top: 0.75rem;
	overflow: visible;
}

.bbh-swatch--tier {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.18rem;
	padding: 0.7rem 0.5rem !important;
	border: 1.5px solid #e3e3e3 !important;
	border-radius: 10px !important;
	background: #fff !important;
	position: relative;
	line-height: 1.2;
	min-height: 56px;
}

.bbh-swatch--tier:hover {
	border-color: var(--wp--preset--color--gold, #c9a654) !important;
}

.bbh-swatch--tier.is-selected {
	border-color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	background: rgba(201, 166, 84, 0.07) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-swatch--tier .bbh-swatch__name {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.bbh-swatch--tier .bbh-swatch__price {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem;
	color: #888;
}

.bbh-swatch__badge {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--gold, #c9a654);
	color: #1a1a1a;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.18rem 0.5rem;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.1;
	z-index: 1;
}

/* ---- WHOLESALE ESCAPE HATCH ---- */
.bbh-pdp-wholesale-cta {
	margin: 0.9rem 0 0;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.85rem;
}

.bbh-pdp-wholesale-cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	padding-bottom: 2px;
	transition: color 180ms ease;
}

.bbh-pdp-wholesale-cta a:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* ---- ACCORDIONS (rendered by [bbh_product_accordions]) ---- */
.bbh-acc {
	border: 1px solid #ececec;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}

.bbh-acc__item {
	border-top: 1px solid #ececec;
}

.bbh-acc__item:first-child {
	border-top: 0;
}

.bbh-acc__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.35rem;
	cursor: pointer;
	list-style: none;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a1a);
	transition: background 180ms ease, color 180ms ease;
	user-select: none;
}

.bbh-acc__summary::-webkit-details-marker {
	display: none;
}

.bbh-acc__summary:hover {
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-acc__item[open] > .bbh-acc__summary {
	background: #fafaf6;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--gold, #c9a654);
}

.bbh-acc__chevron {
	flex: none;
	color: #9a9a9a;
	transition: transform 200ms ease, color 200ms ease;
}

.bbh-acc__item[open] .bbh-acc__chevron {
	transform: rotate(180deg);
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-acc__panel {
	padding: 1.15rem 1.35rem 1.4rem;
}

.bbh-acc__panel > :last-child {
	margin-bottom: 0 !important;
}

/* Accordion body typography — same voice as the old description tab:
 * Rubik body, Playfair section subheads. */
.bbh-acc__panel p,
.bbh-acc__panel li,
.bbh-acc__panel strong,
.bbh-acc__panel em,
.bbh-acc__panel a {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.bbh-acc__panel p,
.bbh-acc__panel li {
	font-size: 0.97rem;
	line-height: 1.7;
	color: #3a3a3a;
}

.bbh-acc__panel p {
	margin: 0 0 1rem;
}

.bbh-acc__panel ul,
.bbh-acc__panel ol {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

.bbh-acc__panel li {
	margin: 0.4rem 0;
}

.bbh-acc__panel a {
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-acc__panel h2,
.bbh-acc__panel h3,
.bbh-acc__panel h4,
.bbh-acc__panel h5,
.bbh-acc__subhead {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	letter-spacing: -0.005em;
	line-height: 1.3;
	margin: 1.4rem 0 0.7rem;
	font-size: 1.1rem;
}

.bbh-acc__panel .bbh-acc__subhead:first-child,
.bbh-acc__panel h2:first-child,
.bbh-acc__panel h3:first-child,
.bbh-acc__panel h4:first-child {
	margin-top: 0;
}

/* Additional information attributes table */
.bbh-acc__panel table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.bbh-acc__panel table th,
.bbh-acc__panel table td {
	text-align: left;
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid #f3f3f3;
	font-style: normal;
}

.bbh-acc__panel table th {
	color: #888;
	font-weight: 600;
	width: 38%;
}

/* ---- REVIEWS-ONLY TABS — hide the now-redundant tab nav, always show
 * the (single) reviews panel even before WC's tabs JS runs ---- */
.bbh-pdp-details .wc-tabs,
.bbh-pdp-details ul.wc-tabs {
	display: none !important;
}

.bbh-pdp-details .woocommerce-Tabs-panel {
	display: block !important;
}

/* ---- DECISION RAIL (size comparison + reviews summary) ---- */
@media (min-width: 1024px) {
	.bbh-pdp-rail {
		position: sticky;
		top: 96px;
		align-self: flex-start;
	}
}

.bbh-compare,
.bbh-revsum {
	border: 1px solid #ececec;
	border-radius: 14px;
	padding: 1.25rem 1.35rem;
	background: #fff;
}

.bbh-revsum {
	margin-top: 1.25rem;
}

.bbh-compare__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0 0 0.85rem;
}

.bbh-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.84rem;
}

.bbh-compare__table th {
	text-align: left;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #999;
	padding: 0.35rem 0.5rem;
	border-bottom: 1px solid #ececec;
}

.bbh-compare__table td {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid #f5f5f5;
	color: #3a3a3a;
	vertical-align: middle;
}

.bbh-compare__table tr:last-child td {
	border-bottom: 0;
}

.bbh-compare__table tr.is-current td {
	background: #fbf8ef;
}

.bbh-compare__name {
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
}

a.bbh-compare__name:hover {
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-compare__badge {
	display: inline-block;
	margin-left: 0.4rem;
	background: var(--wp--preset--color--gold, #c9a654);
	color: #1a1a1a;
	font-size: 0.56rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	vertical-align: middle;
	line-height: 1.2;
}

/* ---- REVIEWS SUMMARY CARD ---- */
.bbh-revsum {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.bbh-revsum__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.bbh-revsum__avg {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.7rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	line-height: 1;
}

.bbh-revsum__count {
	font-size: 0.8rem;
	color: #888;
}

.bbh-revsum__bar-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.3rem 0;
	font-size: 0.74rem;
	color: #888;
}

.bbh-revsum__bar-label {
	width: 26px;
	color: #6b6b6b;
}

.bbh-revsum__bar {
	flex: 1;
	height: 6px;
	background: #f0ede3;
	border-radius: 3px;
	overflow: hidden;
}

.bbh-revsum__bar-fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--gold, #c9a654);
	border-radius: 3px;
}

.bbh-revsum__bar-n {
	width: 22px;
	text-align: right;
}

.bbh-revsum__quote {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	background: #fafaf6;
	border-left: 3px solid var(--wp--preset--color--gold, #c9a654);
	border-radius: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: #4a4a4a;
	font-style: italic;
}

.bbh-revsum__quote cite {
	display: block;
	margin-top: 0.4rem;
	font-style: normal;
	font-size: 0.76rem;
	color: #888;
}

.bbh-revsum__link {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	padding-bottom: 1px;
}

.bbh-revsum__link:hover {
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* ---- STICKY ADD-TO-CART BAR ----
 * One element, two positions: bottom sheet on mobile (thumb reach),
 * slide-down top bar on desktop. Hidden until the buy box scrolls
 * out of view. */
.bbh-sticky-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	background: #fff;
	border-top: 1px solid #ececec;
	box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.07);
	transform: translateY(110%);
	transition: transform 280ms ease;
}

.bbh-sticky-cart.is-visible {
	transform: translateY(0);
}

.bbh-sticky-cart__in {
	max-width: 1360px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.6rem 1rem;
}

.bbh-sticky-cart__thumb {
	width: 42px;
	height: 42px;
	object-fit: contain;
	border-radius: 8px;
	border: 1px solid #ececec;
	background: #fafaf6;
	flex: none;
}

.bbh-sticky-cart__info {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
	flex: 1;
}

.bbh-sticky-cart__name {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bbh-sticky-cart__price {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-sticky-cart__btn {
	flex: none;
	background: var(--wp--preset--color--gold, #c9a654);
	border: 1px solid var(--wp--preset--color--gold, #c9a654);
	color: #1a1a1a;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.8rem 1.5rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}

.bbh-sticky-cart__btn:hover {
	background: var(--wp--preset--color--gold-dark, #a8893f);
	border-color: var(--wp--preset--color--gold-dark, #a8893f);
	color: #fff;
}

@media (max-width: 1023px) {
	body.bbh-has-sticky-cart {
		padding-bottom: 72px;
	}
}

@media (min-width: 1024px) {
	.bbh-sticky-cart {
		top: 0;
		bottom: auto;
		border-top: 0;
		border-bottom: 1px solid #ececec;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
		transform: translateY(-110%);
	}
	.bbh-sticky-cart.is-visible {
		transform: translateY(0);
	}
	body.admin-bar .bbh-sticky-cart {
		top: 32px;
	}
}

/* ---- RELATED CARD RATING ROW ---- */
.bbh-related-card__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 15px;
}

.bbh-related-card__rating-count {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem;
	color: #999;
	line-height: 1;
}

/* ---- PDP v2 fixes ----
 * 1. The WC product-image-gallery BLOCK wrapper ships an inline
 *    max-width:512px — that is what kept the old gallery postage-stamp
 *    sized. Unlock it so the gallery fills its 55% column.
 * 2. WC renders variations as a <table>; the cell shrink-wraps to its
 *    content, collapsing the tier-card grid to one 96px column. Make the
 *    whole variations table block-level and full width. */
.bbh-pdp-gallery-col .wp-block-woocommerce-product-image-gallery {
	max-width: none !important;
	width: 100%;
}

.bbh-pdp-buybox table.variations,
.bbh-pdp-buybox table.variations tbody,
.bbh-pdp-buybox table.variations tr,
.bbh-pdp-buybox table.variations th,
.bbh-pdp-buybox table.variations td {
	display: block;
	width: 100% !important;
	max-width: 100%;
	padding: 0;
}

.bbh-pdp-buybox table.variations tr {
	margin-bottom: 0.85rem;
}

.bbh-pdp-buybox table.variations .label {
	margin-bottom: 0.2rem;
}

/* Size comparison footnote */
.bbh-compare__note {
	margin: 0.7rem 0 0;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem;
	color: #999;
}

/* WC core sets .woocommerce-product-gallery--columns-4 .flex-control-thumbs
 * li { width: 25% } — in our 76px vertical rail that yields 19px chips.
 * Full width of the rail, with !important to beat WC load order. */
.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li {
	width: 100% !important;
}

@media (max-width: 781px) {
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li {
		width: 56px !important;
	}
}

/* ===========================================================================
 * PDP REDESIGN v2.1 — configurator polish for private-label products
 *
 * 1. Compact color swatches + tighter option-group rhythm
 * 2. Cohesive selects / file upload / qty styled as one system
 * 3. Product Add-Ons totals redesigned as an "Order summary" card
 * 4. Reviews: avatars, Verified Buyer badge, cleaner meta
 * 5. Accordion icons + scanability
 * ========================================================================= */

/* ---- 1. CONFIG SECTION RHYTHM ---- */
.bbh-pdp-buybox table.variations tr {
	margin-bottom: 1rem !important;
}

/* One label voice for variations AND add-on groups */
.bbh-pdp-buybox .variations .label label,
.bbh-pdp-buybox .wc-pao-addon-name {
	display: block;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6b6b6b;
	margin: 0 0 0.4rem;
	padding: 0;
}

.bbh-swatches {
	margin-top: 0;
	padding-top: 0;
	gap: 0.45rem;
}

/* Color circles: 48px → 30px. Still a comfortable tap target inside the
 * 44px row, but no longer a row of poker chips. */
.bbh-swatch--color {
	width: 30px !important;
	height: 30px !important;
	min-height: 30px !important;
	min-width: 30px !important;
	border-width: 1.5px !important;
}

.bbh-swatch--color.is-selected {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--wp--preset--color--gold, #c9a654);
}

.bbh-swatch--color.is-selected::after {
	font-size: 0.8rem;
}

/* Scent pills: slimmer */
.bbh-swatch--scent {
	min-width: 0;
	min-height: 34px;
	padding: 0.4rem 0.85rem;
	font-size: 0.82rem;
	font-weight: 500;
}

/* Add-on groups: remove WooCommerce's form-row padding soup */
.bbh-pdp-buybox .wc-pao-addon-container {
	margin: 0 0 1.05rem !important;
	padding: 0 !important;
	border: 0 !important;
}

.bbh-pdp-buybox .wc-pao-addon-wrap {
	margin: 0 !important;
	padding: 0 !important;
}

.bbh-pdp-buybox .wc-pao-addon-description,
.bbh-pdp-buybox .wc-pao-addon-description p {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.76rem;
	color: #8a8a8a;
	line-height: 1.5;
	margin: 0.3rem 0 0;
}

/* ---- 2. FIELDS AS ONE SYSTEM ---- */
.bbh-pdp-buybox .wc-pao-addon-select,
.bbh-pdp-buybox .wc-pao-addon-field:not([type='file']),
.bbh-pdp-buybox form.cart .quantity input.qty {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
	background-color: #fff;
	border: 1.5px solid #e3e3e3;
	border-radius: 8px;
	padding: 0.6rem 0.85rem;
	width: 100%;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bbh-pdp-buybox .wc-pao-addon-select:focus,
.bbh-pdp-buybox .wc-pao-addon-field:focus,
.bbh-pdp-buybox form.cart .quantity input.qty:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold, #c9a654);
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.18);
}

/* File upload: branded drop-zone look, native input kept for a11y */
.bbh-pdp-buybox .wc-pao-addon-file-upload {
	width: 100%;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	color: #6b6b6b;
	background: #fcfbf7;
	border: 1.5px dashed #d9d2bd;
	border-radius: 10px;
	padding: 0.7rem 0.8rem;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease;
}

.bbh-pdp-buybox .wc-pao-addon-file-upload:hover {
	border-color: var(--wp--preset--color--gold, #c9a654);
	background: #fbf8ef;
}

.bbh-pdp-buybox .wc-pao-addon-file-upload::file-selector-button {
	background: var(--wp--preset--color--ink, #1a1a1a);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.55rem 1.05rem;
	margin-right: 0.85rem;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 160ms ease;
}

.bbh-pdp-buybox .wc-pao-addon-file-upload::file-selector-button:hover {
	background: var(--wp--preset--color--gold-dark, #a8893f);
}

/* Variation price line (shows under the tier cards once selected) */
.bbh-pdp-buybox .woocommerce-variation-price {
	margin: 0.35rem 0 0.2rem;
}

.bbh-pdp-buybox .woocommerce-variation-price .price {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-pdp-buybox .woocommerce-variation-price .price del {
	color: #b9b9b9;
	font-weight: 400;
	font-size: 0.88rem;
	margin-right: 0.4rem;
}

.bbh-pdp-buybox .woocommerce-variation-price .price ins {
	text-decoration: none;
}

.bbh-pdp-buybox .reset_variations {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.74rem;
	color: #9a9a9a;
}

/* Qty + Add to cart: one decisive row */
.bbh-pdp-buybox form.cart .woocommerce-variation-add-to-cart,
.bbh-pdp-buybox form.cart > .quantity {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
}

.bbh-pdp-buybox form.cart .quantity {
	margin: 0 !important;
	float: none !important;
}

.bbh-pdp-buybox form.cart .quantity input.qty {
	width: 70px;
	height: 50px;
	text-align: center;
	font-weight: 600;
	font-size: 1rem;
	padding: 0;
}

.bbh-pdp-buybox form.cart button[type='submit'] {
	flex: 1;
	min-height: 50px;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
}

.bbh-pdp-buybox form.cart button[type='submit'].disabled,
.bbh-pdp-buybox form.cart button[type='submit']:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---- 3. ORDER SUMMARY CARD (Product Add-Ons totals) ---- */
#product-addons-total {
	margin: 1.15rem 0 1rem !important;
	padding: 0 !important;
}

#product-addons-total .product-addon-totals {
	border: 1px solid #e8e3d4;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}

#product-addons-total .product-addon-totals > ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#product-addons-total .product-addon-totals > ul::before {
	content: 'Your order';
	display: block;
	padding: 0.75rem 1.15rem 0.6rem;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	background: #fafaf6;
	border-bottom: 1px solid #f0ece0;
}

#product-addons-total .product-addon-totals li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin: 0 !important;
	padding: 0.7rem 1.15rem;
	border-top: 1px solid #f5f2ea;
	list-style: none !important;
}

#product-addons-total .product-addon-totals li:first-of-type {
	border-top: 0;
}

#product-addons-total .wc-pao-col1 {
	flex: 1;
	min-width: 0;
	float: none !important;
	width: auto !important;
}

#product-addons-total .wc-pao-col2 {
	flex: none;
	float: none !important;
	width: auto !important;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

#product-addons-total .wc-pao-col1 strong,
#product-addons-total .wc-pao-col2 strong {
	font-weight: 500;
}

/* Product line (tagged by JS): the anchor row of the summary */
#product-addons-total .bbh-summary__product .wc-pao-col1 strong {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
	line-height: 1.4;
}

/* Add-on rows: label stacked over chosen value */
#product-addons-total .wc-pao-col1 .wc-pao-addon-name {
	display: block;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a3a3a3;
	margin: 0 0 0.18rem;
}

#product-addons-total .wc-pao-col1 .wc-pao-addon-value {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1a1a1a);
	overflow-wrap: anywhere;
}

#product-addons-total .amount {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Subtotal: black bar, gold figure — unmissable but on-brand */
#product-addons-total li.wc-pao-subtotal-line {
	display: block;
	background: var(--wp--preset--color--black, #0d0d0d);
	border-top: 0;
	padding: 0.85rem 1.15rem;
}

#product-addons-total .wc-pao-subtotal-line p.price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #cfcfcf;
}

#product-addons-total .wc-pao-subtotal-line .amount {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--gold, #c9a654);
}

/* ---- 4. REVIEWS ---- */
.bbh-pdp-details #reviews .commentlist li.review,
.bbh-pdp-details #reviews .commentlist li.comment {
	padding: 1.35rem 1.5rem;
}

.bbh-pdp-details #reviews .comment_container {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.bbh-pdp-details #reviews .comment_container > img.avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex: none;
	border: 2px solid #f0ece0;
	background: #fafaf6;
	padding: 0;
	position: static;
}

.bbh-pdp-details #reviews .comment-text {
	flex: 1;
	min-width: 0;
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
}

.bbh-pdp-details #reviews .comment-text .star-rating {
	float: none;
	margin: 0 0 0.35rem;
	font-size: 0.85em;
}

.bbh-pdp-details #reviews .meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 0.5rem;
}

.bbh-pdp-details #reviews .meta .woocommerce-review__author {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

.bbh-pdp-details #reviews .meta .woocommerce-review__dash {
	display: none;
}

.bbh-pdp-details #reviews .meta .woocommerce-review__published-date {
	font-size: 0.74rem;
	color: #9a9a9a;
}

/* Verified Buyer badge — soft green, the universal "checked" cue */
.bbh-pdp-details #reviews .woocommerce-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-style: normal;
	color: #2e7d4f;
	background: #ecf6f0;
	border: 1px solid #cfe8da;
	border-radius: 999px;
	padding: 0.22rem 0.6rem 0.2rem;
	line-height: 1;
}

.bbh-pdp-details #reviews .woocommerce-review__verified::before {
	content: '✓';
	font-size: 0.7rem;
	line-height: 1;
}

.bbh-pdp-details #reviews .description p {
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
	line-height: 1.65;
	color: #3a3a3a;
}

.bbh-pdp-details #reviews .description p:last-child {
	margin-bottom: 0;
}

.bbh-pdp-details #reviews .woocommerce-noreviews {
	background: #fafaf6;
	border: 1px dashed #e0d9c4;
	border-radius: 12px;
	padding: 1.1rem 1.3rem;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	color: #6b6b6b;
}

/* ---- 5. ACCORDION ICONS + SCANABILITY ---- */
.bbh-acc__summary {
	gap: 0.75rem;
}

.bbh-acc__ic {
	display: inline-flex;
	flex: none;
	color: var(--wp--preset--color--gold-dark, #a8893f);
}

.bbh-acc__label {
	flex: 1;
}

.bbh-acc__panel ul li::marker {
	color: var(--wp--preset--color--gold, #c9a654);
}

/* ===========================================================================
 * SHOP ARCHIVE IMPROVEMENTS (P3) — heading, card hierarchy, labels, per-unit
 * ========================================================================= */

/* ---- Context-aware shop heading ---- */
.bbh-shop-head {
	text-align: center;
}
.bbh-shop-head__eyebrow {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	margin: 0 0 0.5rem;
}
.bbh-shop-head__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-weight: 500;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #1a1a1a);
	margin: 0 0 0.8rem;
}
.bbh-shop-head__intro {
	font-size: 1.02rem;
	line-height: 1.6;
	color: #6b6b6b;
	max-width: 60ch;
	margin: 0 auto;
}

/* ---- CommerceKit wishlist heart ----
   The plugin renders a heart per product card with position:absolute;
   top:15px;right:15px. The block-theme card <li> was position:static, so each
   heart anchored to <main> and they all piled into the page's top-right corner
   (the "floating disconnected heart"). Making the card a positioning context
   re-anchors each heart to its own card's top-right — over the image, opposite
   the top-left badge rail. */
.bbh-shop-grid .wc-block-product,
.bbh-shop-grid ul.products li.product,
.wc-block-product-template li.wc-block-product {
	position: relative;
}
.bbh-shop-grid .commercekit-wishlist,
.wc-block-product-template .commercekit-wishlist {
	z-index: 4;
}

/* ---- Product card hierarchy ---- */
.wc-block-product .wp-block-woocommerce-product-image {
	position: relative;
	display: block;
}
.wc-block-product .wp-block-post-title {
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
	margin-bottom: 0.3rem;
}
.wc-block-product .wp-block-woocommerce-product-price {
	font-weight: 600 !important;
	color: var(--wp--preset--color--ink, #1a1a1a);
}

/* ---- Per-unit price line ---- */
.bbh-card-unit {
	text-align: center;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--wp--preset--color--gold-dark, #a8893f);
	margin: 0.15rem 0 0;
	line-height: 1.3;
}
.bbh-card-unit .woocommerce-Price-amount { font-family: inherit; }

/* ---- Category label badge (overlaid top-left of the image) ---- */
.bbh-card-label {
	position: absolute;
	top: 0.55rem;
	left: 0.55rem;
	z-index: 2;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	line-height: 1.1;
	backdrop-filter: blur(2px);
}
.bbh-card-label--wholesale { background: rgba(13, 13, 13, 0.88); color: #fff; }
.bbh-card-label--wig       { background: var(--wp--preset--color--gold, #c9a654); color: #1a1a1a; }
.bbh-card-label--sample    { background: #ecf6f0; color: #2e7d4f; border: 1px solid #cfe8da; }
.bbh-card-label--retail    { background: var(--wp--preset--color--paper, #f7f6f3); color: #6b6b6b; border: 1px solid #e5dfce; }

@media (max-width: 600px) {
	.bbh-card-label { font-size: 0.55rem; padding: 0.18rem 0.45rem; }
	.bbh-card-unit { font-size: 0.68rem; }
}

/* ===========================================================================
 * MOBILE CONVERSION (P4) — get image, title, reviews, price, options and
 * Add to Cart inside the first 1–2 mobile viewports; trim excess whitespace.
 * ========================================================================= */
@media (max-width: 781px) {

	/* Columns stack on mobile — kill the inter-column gap so the buy box sits
	 * right under the gallery instead of a full spacing-unit below it. */
	.bbh-pdp-hero.wp-block-columns {
		gap: 0.5rem !important;
		row-gap: 0.5rem !important;
	}

	.bbh-pdp-gallery-col { margin-bottom: 0.25rem; }

	/* Tighter buy-box vertical rhythm. */
	.bbh-pdp-buybox .bbh-pdp-rating { margin-bottom: 0.5rem; }
	.bbh-pdp-buybox .bbh-pdp-title { margin-bottom: 0.4rem !important; }
	.bbh-pdp-buybox .bbh-pdp-price { margin-top: 0 !important; margin-bottom: 0.5rem !important; }

	/* The short description repeats in the Description accordion below, so on
	 * mobile clamp it to 3 lines to reclaim ~130px above the fold. */
	.bbh-pdp-buybox .bbh-pdp-excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 0.8rem !important;
	}

	/* Tighten option groups + add-on rows. */
	.bbh-pdp-buybox table.variations tr { margin-bottom: 0.7rem !important; }
	.bbh-pdp-buybox .wc-pao-addon-container { margin-bottom: 0.7rem !important; }
	.bbh-swatches--quantity { margin-top: 0.5rem; gap: 0.4rem; }

	/* The trust strip and meta can breathe less on mobile. */
	.bbh-pdp-trust { margin-top: 0.9rem; padding-top: 0.9rem; }

	/* Belt-and-braces: nothing in the buy box may push the page sideways. */
	.bbh-pdp-buybox,
	.bbh-pdp-buybox .wc-pao-addon-container,
	.bbh-pdp-buybox form.cart { max-width: 100%; }
}

/* ===========================================================================
 * ACCESSIBILITY (P5) — visible keyboard focus + reduced-motion
 * ========================================================================= */

/* Clear, on-brand focus ring for keyboard users. :focus-visible keeps it from
 * showing on mouse clicks, so it never looks like a "stuck outline". */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.bbh-swatch:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.bbh-vote-card__btn:focus-visible,
.bbh-bar__cta:focus-visible,
.bbh-hero__cta:focus-visible,
.bbh-hero__arrow:focus-visible,
.bbh-hero__dot:focus-visible,
.flex-control-thumbs li:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #c9a654) !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* On the black header, use a lighter ring so it stays visible. */
.bbh-site-header a:focus-visible,
.bbh-site-header button:focus-visible,
.bbh-search-toggle:focus-visible,
.bbh-account-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light, #e5d09a) !important;
	outline-offset: 3px !important;
}

/* Summary should show a pointer + clear hit area. */
.wp-block-details summary,
.bbh-acc__summary {
	cursor: pointer;
}

/* Respect users who ask for less motion: neutralise carousels, accordions,
 * hover lifts, count bumps, and smooth scrolling site-wide. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.bbh-bar__track,
	.bbh-hero__track {
		transition: none !important;
	}
}

/* ===========================================================================
 * SHOP GRID v2 — row-aligned uniform cards + responsive columns
 * Scoped to .bbh-shop-grid (shop + category archives) so the homepage
 * bestsellers grid is untouched.
 * ========================================================================= */

/* ---- Responsive columns + compact, consistent gaps ---- */
.bbh-shop-grid .wc-block-product-template.is-flex-container {
	display: grid !important;
	gap: 12px !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* phones < 600 */
}
@media (min-width: 600px) {
	.bbh-shop-grid .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* tablet */
		gap: 14px !important;
	}
}
@media (min-width: 1100px) {
	.bbh-shop-grid .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* desktop */
		gap: 18px !important;
	}
}

/* ---- Card = flex column; action button pinned to the bottom so every
 * row's buttons line up regardless of title length or per-unit text. ---- */
.bbh-shop-grid .wc-block-product {
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
	min-width: 0;
	height: 100%;
}
.bbh-shop-grid .wc-block-product .wc-block-components-product-button,
.bbh-shop-grid .wc-block-product > .wp-block-button {
	margin-top: auto !important;
}
.bbh-shop-grid .wc-block-components-product-button .wp-block-button__link {
	width: 100%;
	box-sizing: border-box;
}

/* ---- Equal image box: square, warm-neutral bg, contain, minimal padding ---- */
.bbh-shop-grid .wp-block-woocommerce-product-image {
	position: relative;
	margin: 0 0 0.6rem !important;
}
.bbh-shop-grid .wp-block-woocommerce-product-image > a,
.bbh-shop-grid .wp-block-woocommerce-product-image .wc-block-components-product-image {
	display: block;
}
.bbh-shop-grid .wp-block-woocommerce-product-image img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	height: auto !important;
	object-fit: contain;
	background: #faf6ef; /* warm neutral so white bottles stay visible */
	border-radius: 8px;
	padding: 3%;
	box-sizing: border-box;
}

/* ---- Fixed-height badge rail: both badges overlay the image and never push
 * it down. Category label (mine) = top-left; WooCommerce sale badge = top-right
 * (forced out of flow — it ships position:static and was shifting content). ---- */
.bbh-shop-grid .wp-block-woocommerce-product-sale-badge,
.bbh-shop-grid .wc-block-components-product-sale-badge {
	position: absolute !important;
	top: 0.5rem !important;
	right: 0.5rem !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	z-index: 2;
}
.bbh-shop-grid .bbh-card-label { top: 0.5rem; left: 0.5rem; }

/* ---- Title: clamp to 2 lines, reserve the height so single-line titles
 * don't lift the price/button above their neighbours. ---- */
.bbh-shop-grid .wp-block-post-title {
	font-size: 0.95rem !important;
	line-height: 1.3;
	margin: 0 0 0.3rem !important;
	height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Price ---- */
.bbh-shop-grid .wp-block-woocommerce-product-price {
	margin: 0 0 0.05rem !important;
	font-weight: 600 !important;
}

/* ---- Per-unit line: ALWAYS present (placeholder is &nbsp;), so the row
 * below price is the same height on every card. ---- */
.bbh-shop-grid .bbh-card-unit {
	min-height: 1.15em;
	margin: 0 0 0.55rem !important;
}

/* ---- Compact mobile shop header — get the first product row up fast ---- */
@media (max-width: 781px) {
	.wp-block-group:has(> .bbh-shop-head) {
		margin-bottom: 1.1rem !important;
	}
	.bbh-shop-head__eyebrow { margin-bottom: 0.3rem; }
	.bbh-shop-head__title {
		font-size: clamp(1.45rem, 6.5vw, 1.85rem);
		margin-bottom: 0.45rem;
	}
	.bbh-shop-head__intro {
		font-size: 0.9rem;
		line-height: 1.5;
		/* No line-clamp: the intro must show in full on mobile (shop, samples,
		   and category descriptions all use this paragraph). */
	}
	/* trim the archive's big top padding on phones */
	body.post-type-archive-product main.wp-block-group,
	body.tax-product_cat main.wp-block-group,
	body.woocommerce-shop main.wp-block-group {
		padding-top: 1rem !important;
	}
}

@media (max-width: 600px) {
	.bbh-shop-grid .wp-block-post-title { font-size: 0.86rem !important; }
	.bbh-shop-grid .bbh-card-label { font-size: 0.52rem; }
}

/* Keep 2 columns up to 639px — at exactly 600 the 3-col layout is too tight
 * and long price ranges overflowed. "3 columns where space permits" → 640+. */
@media (max-width: 639px) {
	.bbh-shop-grid .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Belt-and-braces: never let a long price range or per-unit line push a tight
 * column sideways. */
.bbh-shop-grid .wc-block-product { overflow: visible; }
.bbh-shop-grid .wp-block-woocommerce-product-price,
.bbh-shop-grid .bbh-card-unit,
.bbh-shop-grid .wp-block-post-title {
	overflow-wrap: anywhere;
	max-width: 100%;
}
.bbh-shop-grid .woocommerce-Price-amount { white-space: normal; }

/* The closed WooCommerce mini-cart drawer is position:fixed and parked
 * off-screen to the right (left:625px, width:480px), which widened the page on
 * tablets (600–767px) and triggered horizontal scroll. Hide it fully while
 * closed; WooCommerce flips aria-hidden to "false" when it opens, which restores
 * display. Belt-and-braces: clip the overlay too. */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
	display: none !important;
}
.wc-block-components-drawer__screen-overlay {
	overflow: hidden;
	max-width: 100vw;
}

/* ===========================================================================
 * Global horizontal-overflow guard. Several closed off-canvas panels (the
 * mini-cart drawer, the mobile filters drawer) are position:fixed and parked
 * off-screen to the right; at tablet widths they widened the document and
 * produced a horizontal scrollbar. `overflow-x: clip` on the root clips that
 * without creating a scroll container, so position:sticky (header) and normal
 * vertical scrolling are unaffected — and it can never reopen as a sideways
 * scroll regardless of which panel misbehaves.
 * ========================================================================= */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/* ---- Header nav: hamburger up to 899px ----
 * WordPress reveals the full inline menu from 600px, but this nav (logo + 5
 * links + 3 action icons) needs ~717px and overflowed the header at 600–719px.
 * Keep the hamburger overlay until 900px, where the inline menu fits. */
@media (max-width: 899px) {
	.bbh-primary-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.bbh-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.bbh-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
}

/* ---- Filters mobile drawer: honour its hidden state ----
 * The closed drawer keeps display:block (a rule overrides the `hidden`
 * attribute) and its panel is parked off-screen right (position:fixed, so the
 * root overflow-x clip can't catch it). Force it back to display:none while
 * closed; the filter JS unhides it on open. */
.bbh-filters__drawer[hidden] {
	display: none !important;
}
.bbh-filters__drawer {
	overflow: hidden;
}

/* ===========================================================================
 * PDP GALLERY v2 — warm bg, compact tablet side-by-side, phone height cap,
 * and stable pre-init dimensions to cut FlexSlider layout shift.
 * ========================================================================= */

/* Warm-neutral image background so white bottles stay visible. */
.bbh-pdp-gallery-col .woocommerce-product-gallery__image img,
.bbh-pdp-gallery-col .woocommerce-product-gallery__wrapper img {
	background: #faf6ef !important;
}

/* Reserve a stable square box for the active image BEFORE FlexSlider runs so
 * the page doesn't jump when the slider collapses the stacked images into one
 * viewport (cumulative layout shift). */
.bbh-pdp-gallery-col .woocommerce-product-gallery__image,
.bbh-pdp-gallery-col .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child,
.bbh-pdp-gallery-col .flex-viewport {
	aspect-ratio: 1 / 1;
}

/* --- Tablet / iPad portrait (768–1023): compact side-by-side instead of a
 * tall stacked gallery above the info. --- */
@media (min-width: 768px) and (max-width: 1023px) {
	.bbh-pdp-hero.wp-block-columns {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 1.25rem !important;
		align-items: flex-start;
	}
	.bbh-pdp-hero .bbh-pdp-gallery-col {
		flex: 0 0 42% !important;
		max-width: 42%;
		position: sticky;
		top: 84px;
	}
	.bbh-pdp-hero .bbh-pdp-buybox {
		flex: 1 1 58% !important;
		max-width: 58%;
	}
	/* Image on top, thumbnails in a row beneath, image fills the column. */
	.bbh-pdp-gallery-col .woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-viewport,
	.bbh-pdp-gallery-col .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 1 !important;
		grid-row: 2 !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		margin-top: 8px !important;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li {
		width: 52px !important;
	}
}

/* --- Phones (≤767): stacked, primary gallery capped at ~320px tall so the
 * title, rating, price, options and Add to Cart surface much earlier. --- */
@media (max-width: 767px) {
	.bbh-pdp-gallery-col .woocommerce-product-gallery__image img,
	.bbh-pdp-gallery-col .woocommerce-product-gallery__wrapper img {
		aspect-ratio: auto !important;
		height: 320px !important;
		max-height: 340px;
		object-fit: contain;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery__image,
	.bbh-pdp-gallery-col .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child,
	.bbh-pdp-gallery-col .flex-viewport {
		aspect-ratio: auto !important;
		height: 320px !important;
		max-height: 340px;
	}
}

/* Phone: keep the thumbnail strip to a single horizontal scroll row (products
 * with 9 images were wrapping into a ~165px-tall block and pushing the buy box
 * down). One compact scrollable row surfaces options + Add to Cart earlier. */
@media (max-width: 767px) {
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}
	.bbh-pdp-gallery-col .woocommerce-product-gallery .flex-control-thumbs li {
		width: 48px !important;
		flex: 0 0 48px;
	}
}

/* ===========================================================================
 * CONTACT PAGE v2 — premium, conversion-focused, email-primary
 * ========================================================================= */

.bbh-contact { --bbh-r: 14px; }

/* ---- Trust strip ---- */
.bbh-contact-trust {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 1.05rem 1.4rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.4rem;
	background: #faf8f3;
	border: 1px solid #efe9db;
	border-radius: var(--bbh-r);
}
.bbh-contact-trust__item { display: flex; align-items: center; gap: 0.7rem; }
.bbh-contact-trust__ic {
	flex: none; width: 38px; height: 38px; border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(201, 166, 84, 0.15);
	color: var(--wp--preset--color--gold-dark, #a8893f);
}
.bbh-contact-trust__t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bbh-contact-trust__t strong {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.86rem; font-weight: 600; color: var(--wp--preset--color--ink, #1a1a1a);
}
.bbh-contact-trust__t small { font-size: 0.74rem; color: #8a8a8a; }

/* ---- Two-column: email primary (left) + form (right) ---- */
.bbh-contact-main {
	display: grid;
	grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

/* ---- Email — the primary channel, strongest emphasis ---- */
.bbh-contact-reach__eyebrow {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #a8893f); margin: 0 0 0.6rem;
}
.bbh-contact-primary {
	display: block; text-decoration: none;
	background: linear-gradient(180deg, #fffdf8 0%, #fcf8ef 100%);
	border: 1.5px solid var(--wp--preset--color--gold, #c9a654);
	border-radius: var(--bbh-r);
	padding: 1.5rem 1.5rem 1.4rem;
	box-shadow: 0 8px 22px rgba(201, 166, 84, 0.10);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.bbh-contact-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(201, 166, 84, 0.18); }
.bbh-contact-primary__ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 11px;
	background: var(--wp--preset--color--gold, #c9a654); color: #1a1a1a; margin-bottom: 0.75rem;
}
.bbh-contact-primary__label {
	display: block;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9a8c66;
	margin-bottom: 0.25rem;
}
.bbh-contact-primary__value {
	display: block;
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #1a1a1a); line-height: 1.25; overflow-wrap: anywhere;
}
.bbh-contact-primary__meta {
	display: block; margin-top: 0.5rem; font-size: 0.82rem; color: #6b6b6b;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Secondary channels — supporting, understated ---- */
.bbh-contact-secondary { list-style: none; margin: 1rem 0 0; padding: 0; }
.bbh-contact-secondary__item { border-top: 1px solid #efece4; }
.bbh-contact-secondary__item:first-child { border-top: 0; }
.bbh-contact-secondary__item > a,
.bbh-contact-secondary__item > span,
.bbh-contact-secondary__item span:has(> strong) { }
.bbh-contact-secondary__item a,
.bbh-contact-secondary__item > span:first-child {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.7rem 0.2rem; text-decoration: none; color: inherit;
}
.bbh-contact-secondary__item a { transition: color 160ms ease; }
.bbh-contact-secondary__item a:hover { color: var(--wp--preset--color--gold-dark, #a8893f); }
.bbh-contact-secondary__ic {
	flex: none; width: 32px; height: 32px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--paper, #f7f6f3); color: #6b6b6b;
}
.bbh-contact-secondary__item span:not(.bbh-contact-secondary__ic) { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bbh-contact-secondary__item strong {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.86rem; font-weight: 600; color: var(--wp--preset--color--ink, #1a1a1a);
}
.bbh-contact-secondary__item small { font-size: 0.74rem; color: #8a8a8a; }

/* ---- Form wrap ---- */
.bbh-contact-formwrap {
	background: #fff; border: 1px solid #ececec; border-radius: 16px;
	padding: 1.6rem 1.7rem 1.7rem;
}
.bbh-contact-formwrap__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.35rem;
	color: var(--wp--preset--color--ink, #1a1a1a);
}
.bbh-contact-formwrap__sub { font-size: 0.9rem; line-height: 1.55; color: #6b6b6b; margin: 0 0 1.25rem; }

/* ---- Gravity Forms styling (scoped) ---- */
.bbh-contact-formwrap .gform_wrapper { margin: 0; }
.bbh-contact-formwrap .gform_validation_errors {
	border-radius: 10px; border: 1px solid #f0c9c9; background: #fcebeb;
	font-size: 0.85rem; padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.bbh-contact-formwrap .gform_fields { display: grid; gap: 1.05rem; }
.bbh-contact-formwrap .gfield_label,
.bbh-contact-formwrap legend.gfield_label {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: #6b6b6b; margin-bottom: 0.4rem; display: block;
}
.bbh-contact-formwrap .gfield_required { color: var(--wp--preset--color--gold-dark, #a8893f); }
.bbh-contact-formwrap input[type="text"],
.bbh-contact-formwrap input[type="email"],
.bbh-contact-formwrap select,
.bbh-contact-formwrap textarea {
	width: 100% !important; box-sizing: border-box;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.92rem; color: var(--wp--preset--color--ink, #1a1a1a);
	background: #fff; border: 1.5px solid #e3e3e3; border-radius: 9px;
	padding: 0.7rem 0.9rem; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.bbh-contact-formwrap textarea { min-height: 120px; resize: vertical; }
.bbh-contact-formwrap input:focus,
.bbh-contact-formwrap select:focus,
.bbh-contact-formwrap textarea:focus {
	outline: none; border-color: var(--wp--preset--color--gold, #c9a654);
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.18);
}

/* Inquiry-type radios → selectable pills */
.bbh-contact-formwrap .gfield_radio { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.bbh-contact-formwrap .gfield_radio li { margin: 0 !important; padding: 0 !important; }
.bbh-contact-formwrap .gfield_radio li input[type="radio"] {
	position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.bbh-contact-formwrap .gfield_radio li label {
	display: inline-block; margin: 0 !important;
	padding: 0.55rem 1.05rem; border: 1.5px solid #e3e3e3; border-radius: 999px;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.85rem; font-weight: 500; color: #5a5a5a; cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.bbh-contact-formwrap .gfield_radio li label:hover { border-color: var(--wp--preset--color--gold-light, #e5d09a); }
.bbh-contact-formwrap .gfield_radio li input:checked + label {
	border-color: var(--wp--preset--color--gold, #c9a654);
	background: rgba(201, 166, 84, 0.12);
	color: var(--wp--preset--color--gold-dark, #a8893f); font-weight: 600;
}
.bbh-contact-formwrap .gfield_radio li input:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--gold, #c9a654); outline-offset: 2px;
}

/* Submit button — gold pill, full-width, large touch target */
.bbh-contact-formwrap .gform_footer { margin: 1.2rem 0 0; padding: 0; }
.bbh-contact-formwrap .gform_button {
	width: 100%; min-height: 50px; cursor: pointer;
	background: var(--wp--preset--color--gold, #c9a654);
	border: 1px solid var(--wp--preset--color--gold, #c9a654); color: #1a1a1a;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	border-radius: 999px; transition: background 160ms ease, color 160ms ease;
}
.bbh-contact-formwrap .gform_button:hover {
	background: var(--wp--preset--color--gold-dark, #a8893f);
	border-color: var(--wp--preset--color--gold-dark, #a8893f); color: #fff;
}
.bbh-contact-formwrap .gform_confirmation_message {
	background: #f1f8f3; border: 1px solid #cfe8da; border-radius: 12px;
	padding: 1.1rem 1.3rem; font-size: 0.95rem; line-height: 1.6; color: #2e6b46;
}
.bbh-contact-formwrap .validation_message { color: #cc1818; font-size: 0.78rem; margin-top: 0.3rem; }

/* ---- Quick-answer links — now with icons + stronger interactivity ---- */
.bbh-quicklinks__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem;
}
.bbh-quicklink {
	display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none;
	background: #fff; border: 1px solid #ececec; border-radius: var(--bbh-r);
	padding: 1.35rem 1.4rem;
	transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.bbh-quicklink:hover {
	transform: translateY(-3px); border-color: var(--wp--preset--color--gold, #c9a654);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
}
.bbh-quicklink:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #c9a654); outline-offset: 3px;
}
.bbh-quicklink__ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px; margin-bottom: 0.35rem;
	background: rgba(201, 166, 84, 0.13); color: var(--wp--preset--color--gold-dark, #a8893f);
	transition: background 200ms ease, color 200ms ease;
}
.bbh-quicklink:hover .bbh-quicklink__ic { background: var(--wp--preset--color--gold, #c9a654); color: #1a1a1a; }
.bbh-quicklink__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
	font-size: 1.08rem; font-weight: 500; color: var(--wp--preset--color--ink, #1a1a1a); line-height: 1.3;
}
.bbh-quicklink__desc { font-size: 0.86rem; line-height: 1.55; color: #6b6b6b; flex: 1; }
.bbh-quicklink__cta {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #a8893f); margin-top: 0.3rem;
}

/* ---- Closing CTA — CONTRAST FIX + flows into footer ---- */
.bbh-contact-final { position: relative; }
/* Breathing room between the quick-answer cards and the full-bleed black CTA.
   Applied as padding on the contact <main> (top-level block margins are reset
   to 0 by WP's layout styles, and they'd collapse anyway — padding is immune
   to both). */
main.bbh-contact { padding-bottom: 3.5rem !important; }
/* Flow the black CTA straight into the (also-black) site footer. The footer
   group carries an ~81px block-gap margin that collapses up through the
   transparent template-part wrapper and shows as a dead white band only when
   the preceding section is full-bleed (i.e. here). Scoped to the contact page
   via .bbh-contact-final so other pages keep their normal footer spacing. */
.bbh-contact-final + footer > .wp-block-group { margin-block-start: 0 !important; }
/* The theme's default heading colour (#1a1a1a) was rendering this on black =
   invisible. Force white so it's immediately readable. */
.bbh-contact-final .wp-block-heading,
.bbh-contact-final__title { color: #ffffff !important; }
.bbh-contact-final__sub { color: #d4d4d4 !important; }
.bbh-contact-final__eyebrow { color: var(--wp--preset--color--gold, #c9a654) !important; }
/* A hairline gold rule separates the CTA band from the footer below without a
   jarring white gap. */
.bbh-contact-final::after {
	content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 64px; height: 2px; background: rgba(201, 166, 84, 0.5);
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
	.bbh-contact-main { grid-template-columns: 1fr; gap: 1.4rem; }
	.bbh-contact-trust { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.bbh-quicklinks__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.bbh-contact-trust { grid-template-columns: 1fr; padding: 1rem 1.1rem; }
	.bbh-contact-formwrap { padding: 1.25rem 1.15rem 1.35rem; }
	.bbh-contact-primary { padding: 1.25rem; }
}

/* "What happens next" trust block in the contact aside */
.bbh-contact-next {
	margin-top: 1.4rem;
	padding: 1.2rem 1.3rem;
	background: var(--wp--preset--color--paper, #f7f6f3);
	border: 1px solid #efece4;
	border-radius: 14px;
}
.bbh-contact-next__title {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #a8893f); margin: 0 0 0.75rem;
}
.bbh-contact-next__steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.bbh-contact-next__steps li {
	display: flex; align-items: flex-start; gap: 0.6rem;
	font-size: 0.86rem; line-height: 1.5; color: #5a5a5a; margin: 0 0 0.65rem;
}
.bbh-contact-next__steps li:last-child { margin-bottom: 0; }
.bbh-contact-next__steps li span {
	flex: none; width: 22px; height: 22px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--gold, #c9a654); color: #1a1a1a;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem; font-weight: 700;
}

/* ===========================================================================
 * CONTACT v2.1 — form-first mobile, form-primary desktop, tighter heights
 * ========================================================================= */

/* Mobile-first: form directly under the intro; the whole info column (email,
 * hours, Instagram, "what happens next") drops below it. */
.bbh-contact-main { grid-template-columns: 1fr !important; }
.bbh-contact-formwrap { order: -1; }
.bbh-contact-reach { order: 0; }

@media (min-width: 881px) {
	/* Desktop: keep two columns — info left, form right (the larger, primary
	 * column). Explicit grid placement overrides the mobile order. */
	.bbh-contact-main { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) !important; align-items: start; }
	.bbh-contact-reach { grid-column: 1; order: 0; }
	.bbh-contact-formwrap { grid-column: 2; order: 0; }
}

/* Form is now the primary action — give it a touch more presence. */
.bbh-contact-formwrap { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05); border-color: #e7e1d3; }

/* Direct-email card → secondary: flat, lighter, smaller than the form. */
.bbh-contact-primary {
	background: #fff !important;
	border: 1px solid #ececec !important;
	box-shadow: none !important;
	padding: 1.15rem 1.25rem !important;
}
.bbh-contact-primary:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--gold, #c9a654) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}
.bbh-contact-primary__ic {
	width: 38px !important; height: 38px !important; border-radius: 10px !important;
	background: rgba(201, 166, 84, 0.14) !important;
	color: var(--wp--preset--color--gold-dark, #a8893f) !important;
	margin-bottom: 0.55rem !important;
}
.bbh-contact-primary__value { font-size: 1.02rem !important; }

/* Shorter message box (was ~260px / 10 rows). */
.bbh-contact-formwrap textarea {
	min-height: 160px !important;
	height: 160px !important;
}

/* Privacy reassurance under the submit button. */
.bbh-contact-privacy {
	font-size: 0.78rem; line-height: 1.5; color: #9a9a9a; text-align: center;
	margin: 0.9rem 0 0;
}

/* Inquiry pills on small screens — tighten side padding (user spec). */
@media (max-width: 480px) {
	.bbh-contact-formwrap .gfield_radio li label {
		padding-inline: 18px !important;
	}
}

/* Mobile: form directly under the introduction. Reorder so the credibility
 * trust strip drops below the form (it stays for trust, just not in the way of
 * the submit), bringing the form + Send button much earlier in the journey. */
@media (max-width: 880px) {
	.bbh-contact { display: flex; flex-direction: column; }
	.bbh-contact > .bbh-contact-hero { order: 1; }
	.bbh-contact > .bbh-contact-main { order: 2; }
	.bbh-contact > .bbh-contact-trust {
		order: 3;
		margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40) !important;
	}
	.bbh-contact > .bbh-contact-quicklinks { order: 4; margin-top: 0 !important; }
}

/* Keep the trust items compact on phones (2-up, not a tall single column). */
@media (max-width: 560px) {
	.bbh-contact-trust { grid-template-columns: 1fr 1fr !important; gap: 0.85rem !important; }
}

/* ===========================================================================
 * CONTACT FORM REFINEMENT — editorial/luxury, not plugin-default.
 * Gravity Forms' own stylesheet was winning the cascade and forcing ~20px
 * labels / inputs / button; these !important rules restore the site's
 * restrained type scale, hairline fields, and a proportional CTA.
 * ========================================================================= */

.bbh-contact-formwrap { padding: 1.5rem 1.6rem 1.55rem; }
.bbh-contact-formwrap__title { font-size: 1.25rem !important; margin: 0 0 0.3rem !important; }
.bbh-contact-formwrap__sub { font-size: 0.84rem !important; color: #7a7a7a !important; line-height: 1.55; margin: 0 0 1.15rem !important; }

/* Field rhythm */
.bbh-contact-formwrap .gform_fields { gap: 0.9rem !important; }
.bbh-contact-formwrap .gfield { margin: 0 !important; }

/* Refined micro-labels — smaller, medium weight, gentler tracking */
.bbh-contact-formwrap .gfield_label,
.bbh-contact-formwrap legend.gfield_label {
	font-size: 0.66rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	color: #6b6b6b !important;
	line-height: 1.3 !important;
	margin: 0 0 0.4rem !important;
}
.bbh-contact-formwrap .gfield_required { color: var(--wp--preset--color--gold-dark, #a8893f) !important; font-weight: 600 !important; }

/* Slimmer fields — hairline border, smaller radius, less padding, site type */
.bbh-contact-formwrap input[type="text"],
.bbh-contact-formwrap input[type="email"],
.bbh-contact-formwrap select,
.bbh-contact-formwrap textarea {
	font-size: 0.9rem !important;
	line-height: 1.4 !important;
	border: 1px solid #e3ddd1 !important;
	border-radius: 7px !important;
	padding: 0.58rem 0.8rem !important;
	box-shadow: none !important;
}
.bbh-contact-formwrap textarea {
	min-height: 144px !important;
	height: 144px !important;
	padding: 0.7rem 0.8rem !important;
}
.bbh-contact-formwrap input:focus,
.bbh-contact-formwrap select:focus,
.bbh-contact-formwrap textarea:focus {
	border-color: var(--wp--preset--color--gold, #c9a654) !important;
	box-shadow: 0 0 0 3px rgba(201, 166, 84, 0.16) !important;
}

/* Inquiry pills — refined segmented control, not a button group.
   Single-line (no "Existing Order" wrap), shorter, tighter, with the
   selected state carried by colour + weight rather than size. */
/* User-specified pill spec, adapted to this GF version's markup
   (li.gchoice_X instead of .gchoice; .bbh-contact-formwrap is the page hook).
   !important throughout because GF's own stylesheet wins the cascade here. */
.bbh-contact-formwrap .gfield_radio {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}
.bbh-contact-formwrap .gfield_radio li { margin: 0 !important; padding: 0 !important; }
.bbh-contact-formwrap .gfield_radio li label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 8px 24px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 999px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}
.bbh-contact-formwrap .gfield_radio li input:checked + label {
	border-color: #c9a44d !important;
	background: #fffaf0 !important;
	color: #9a741b !important;
}
.bbh-contact-formwrap .gfield_radio li input:focus-visible + label {
	outline: 2px solid #111 !important;
	outline-offset: 3px !important;
}

/* Balanced, proportional submit — auto-width pill, left-aligned (not a block) */
.bbh-contact-formwrap .gform_footer {
	margin: 1.2rem 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
	display: block !important;
}
.bbh-contact-formwrap .gform_button {
	display: inline-block !important;
	width: auto !important;
	min-height: 0 !important;
	padding: 0.72rem 1.85rem !important;
	font-size: 0.74rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.09em !important;
	border-radius: 999px !important;
}

/* Privacy note — align under the (now left-aligned) button */
.bbh-contact-privacy {
	font-size: 0.74rem !important;
	text-align: left !important;
	margin: 0.85rem 0 0 !important;
}

/* =========================================================================
 * ORDER RECEIVED / THANK YOU  (woocommerce/checkout/thankyou.php override)
 * A premium final touchpoint: hero greeting, order facts, "what happens
 * next" timeline, restyled order/customer tables, support + social, buttons.
 * ========================================================================= */
.bbh-thankyou { max-width: 860px; margin: 0 auto; padding: 0.5rem 0 1rem; }
.bbh-ty-hero { text-align: center; padding: 1rem 0 1.6rem; }
.bbh-ty-crest {
	display: inline-flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; border-radius: 50%; margin-bottom: 1rem;
	background: rgba(201, 166, 84, 0.12); color: var(--wp--preset--color--gold-dark, #a8893f);
	border: 1px solid rgba(201, 166, 84, 0.4);
	animation: bbhTyPop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes bbhTyPop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.bbh-ty-eyebrow {
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark, #a8893f); margin: 0 0 0.6rem;
}
.bbh-ty-eyebrow--center { text-align: center; }
.bbh-ty-title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', Georgia, serif);
	font-weight: 500; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #1a1a1a); margin: 0 0 0.8rem;
}
.bbh-ty-lede { max-width: 60ch; margin: 0 auto; color: #5f5f5f; line-height: 1.65; font-size: 1.02rem; }
.bbh-ty-lede strong { color: var(--wp--preset--color--ink, #1a1a1a); font-weight: 600; }

/* Block Order Confirmation: status block styled as the hero lede, with the
   personalised greeting (.bbh-ty-greet, injected via woocommerce_order_received_text)
   rendered as the big Playfair heading. */
.bbh-thankyou .wc-block-order-confirmation-status,
.bbh-thankyou .woocommerce-order-received__text {
	text-align: center; max-width: 60ch; margin: 0 auto; color: #5f5f5f; line-height: 1.65; font-size: 1.02rem;
}
.bbh-thankyou .bbh-ty-greet {
	display: block;
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', Georgia, serif);
	font-weight: 500; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #1a1a1a); margin-bottom: 0.7rem;
}
.bbh-thankyou .wc-block-order-confirmation-status strong { color: var(--wp--preset--color--ink, #1a1a1a); font-weight: 600; }
/* Summary (order facts) as a calm paper card, centered */
.bbh-thankyou .wc-block-order-confirmation-summary {
	background: var(--wp--preset--color--paper, #f7f6f3); border: 1px solid #ece7da; border-radius: 14px;
	padding: 1.1rem 1.3rem; margin: 1.6rem auto 0; max-width: 680px;
}
.bbh-thankyou h2, .bbh-thankyou h3, .bbh-thankyou .wc-block-components-order-confirmation__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', Georgia, serif);
}
.bbh-ty-facts {
	list-style: none; margin: 1.6rem auto 0; padding: 1.1rem 1.2rem;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.4rem; max-width: 680px;
	background: var(--wp--preset--color--paper, #f7f6f3); border: 1px solid #ece7da; border-radius: 14px;
}
.bbh-ty-facts li { display: flex; flex-direction: column; gap: 0.15rem; text-align: center; }
.bbh-ty-facts span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9a8c66; }
.bbh-ty-facts strong { font-size: 1.02rem; font-weight: 600; color: var(--wp--preset--color--ink, #1a1a1a); }

/* What happens next — timeline */
.bbh-ty-next { margin: 2.6rem 0 0; text-align: center; }
.bbh-ty-timeline {
	list-style: none; margin: 1.3rem 0 0; padding: 0; position: relative;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.bbh-ty-timeline::before { content: ''; position: absolute; top: 11px; left: 12.5%; right: 12.5%; height: 2px; background: #e7e1d2; z-index: 0; }
.bbh-ty-timeline li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0 0.3rem; text-align: center; }
.bbh-ty-step { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid #d9d2c0; margin-bottom: 0.3rem; position: relative; }
.bbh-ty-timeline li.is-done .bbh-ty-step { background: var(--wp--preset--color--gold, #c9a654); border-color: var(--wp--preset--color--gold, #c9a654); }
.bbh-ty-timeline li.is-done .bbh-ty-step::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bbh-ty-timeline li.is-active .bbh-ty-step { border-color: var(--wp--preset--color--gold, #c9a654); box-shadow: 0 0 0 4px rgba(201, 166, 84, 0.18); }
.bbh-ty-timeline li.is-active .bbh-ty-step::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--wp--preset--color--gold, #c9a654); }
.bbh-ty-timeline b { font-size: 0.9rem; color: var(--wp--preset--color--ink, #1a1a1a); }
.bbh-ty-step-text { font-size: 0.8rem; color: #6f6f6f; line-height: 1.45; max-width: 18ch; }

/* Standard WooCommerce order + customer tables, restyled to match */
.bbh-thankyou .woocommerce-order-details,
.bbh-thankyou .woocommerce-customer-details { margin-top: 2.6rem; }
.bbh-thankyou .woocommerce-order-details__title,
.bbh-thankyou .woocommerce-column__title {
	font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', Georgia, serif);
	font-weight: 500; font-size: 1.3rem; margin: 0 0 1rem; color: var(--wp--preset--color--ink, #1a1a1a);
}
.bbh-thankyou table.woocommerce-table { width: 100%; border-collapse: collapse; }
.bbh-thankyou table.woocommerce-table th,
.bbh-thankyou table.woocommerce-table td { padding: 0.7rem 0.2rem; border-bottom: 1px solid #eee; text-align: left; font-size: 0.94rem; }
.bbh-thankyou table.woocommerce-table tfoot th { font-weight: 600; }
.bbh-thankyou .woocommerce-customer-details address {
	border: 1px solid #ece7da; border-radius: 12px; padding: 1rem 1.2rem; font-style: normal; line-height: 1.6;
	background: var(--wp--preset--color--paper, #f7f6f3);
}

/* Support + social cards */
.bbh-ty-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.8rem 0 0; }
.bbh-ty-card { background: #fff; border: 1px solid #ece7da; border-radius: 14px; padding: 1.3rem 1.4rem; }
.bbh-ty-card h3 { margin: 0 0 0.35rem; font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', Georgia, serif); font-weight: 500; font-size: 1.15rem; color: var(--wp--preset--color--ink, #1a1a1a); }
.bbh-ty-card p { margin: 0 0 0.7rem; color: #6f6f6f; font-size: 0.92rem; line-height: 1.55; }
.bbh-ty-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.bbh-ty-links a { color: var(--wp--preset--color--gold-dark, #a8893f); font-weight: 600; font-size: 0.9rem; text-decoration: none; border-bottom: 1px solid transparent; }
.bbh-ty-links a:hover { border-bottom-color: currentColor; }
.bbh-ty-socials { display: flex; gap: 0.6rem; }
.bbh-ty-socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e3ddd0; color: var(--wp--preset--color--ink, #1a1a1a); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.bbh-ty-socials a:hover { background: var(--wp--preset--color--ink, #1a1a1a); color: #fff; border-color: var(--wp--preset--color--ink, #1a1a1a); }

/* Buttons */
.bbh-ty-continue { text-align: center; margin: 2.6rem 0 0; }
.bbh-ty-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.bbh-ty-btn {
	display: inline-block; padding: 0.85rem 2rem; border-radius: 999px;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
	background: var(--wp--preset--color--gold, #c9a654); color: var(--wp--preset--color--black, #0d0d0d);
	border: 1px solid var(--wp--preset--color--gold, #c9a654); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bbh-ty-btn:hover { background: var(--wp--preset--color--gold-dark, #a8893f); border-color: var(--wp--preset--color--gold-dark, #a8893f); color: #fff; }
.bbh-ty-btn--ghost { background: transparent; color: var(--wp--preset--color--gold-dark, #a8893f); }
.bbh-ty-btn--ghost:hover { background: var(--wp--preset--color--gold, #c9a654); color: var(--wp--preset--color--black, #0d0d0d); }

@media (max-width: 680px) {
	.bbh-ty-timeline { grid-template-columns: 1fr; gap: 0; }
	.bbh-ty-timeline::before { left: 11px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
	.bbh-ty-timeline li { display: grid; grid-template-columns: 24px 1fr; gap: 0.1rem 0.8rem; align-items: start; padding: 0.55rem 0; text-align: left; }
	.bbh-ty-step { grid-row: 1 / 3; grid-column: 1; margin: 0; }
	.bbh-ty-timeline li b { grid-column: 2; grid-row: 1; }
	.bbh-ty-step-text { grid-column: 2; grid-row: 2; max-width: none; }
	.bbh-ty-foot { grid-template-columns: 1fr; }
	.bbh-ty-facts { gap: 0.8rem 1.6rem; }
}