/* ==========================================================================
   Aura Vita — Design Tokens
   ========================================================================== */
:root {
	--sale-red: #D93025;
	--bloom-forest: #3F4A32;
	--bloom-forest-light: #566848;
	--bloom-sage: #B5C997;
	--bloom-sage-dark: #8CA86B;
	--bloom-sage-light: #D3E0BE;
	--bloom-rose: #C98B82;
	--bloom-rose-light: #E7A9B6;
	--bloom-blush: #FEF5EF;
	--bloom-blush-2: #FBE7DA;
	--bloom-ivory: #FFFDFB;
	--bloom-text: #3A3F32;
	--bloom-text-muted: #7C8571;
	--bloom-border: #E4E2D6;
	--bloom-danger: #B5423A;
	--bloom-success: #5C7A4C;
	--font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--container-w: 1240px;
	--radius: 10px;
	--radius-lg: 18px;
	--shadow-sm: 0 2px 10px rgba(63, 74, 50, 0.07);
	--shadow-md: 0 10px 30px rgba(63, 74, 50, 0.14);
	--transition: 0.25s ease;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Sitewide keyboard-focus ring, in the brand color instead of the browser default blue.
   :focus-visible (not :focus) so it only shows for keyboard/programmatic focus, not every
   mouse click — elements with their own focus treatment (form inputs, checkout fields,
   etc.) already set outline:none in a more specific rule and are unaffected by this. */
:focus-visible { outline: 2px solid var(--bloom-sage-dark); outline-offset: 2px; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--bloom-text);
	background: var(--bloom-ivory);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--bloom-forest);
	line-height: 1.25;
	margin: 0 0 0.5em;
	font-weight: 600;
}
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
	position: fixed;
	top: -100px;
	left: 0;
	background: var(--bloom-forest);
	color: #fff;
	padding: 12px 20px;
	z-index: 10000;
	transition: top var(--transition);
}
.skip-link:focus { top: 0; position: fixed; clip: auto; width: auto; height: auto; }

.bloom-container {
	max-width: var(--container-w);
	margin: 0 auto;
	padding: 30px 24px;
}
/* The theme's own breadcrumb (rendered on every non-shop/category/product/front page —
   About Us, Contact Us, 404, search, Cart, Checkout) sits in its own .bloom-container
   right above .page-content-wrap, which has its own top padding. Without this, the two
   paddings stack into a much bigger gap above the page title than shop/category archives
   get (those render their breadcrumb + title inside one shared container). */
.breadcrumb-wrap { padding-bottom: 0; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	border: 2px solid transparent;
	transition: all var(--transition);
	cursor: pointer;
}
.btn-primary {
	background: var(--bloom-forest);
	color: #fff;
	border-color: var(--bloom-forest);
}
.btn-primary:hover { background: var(--bloom-sage-dark); border-color: var(--bloom-sage-dark); color: var(--bloom-forest); }
.btn-outline {
	background: transparent;
	color: var(--bloom-forest);
	border-color: var(--bloom-forest);
}
.btn-outline:hover { background: var(--bloom-forest); color: #fff; }

.section-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	color: var(--bloom-rose);
	font-weight: 600;
	margin-bottom: 0.6em;
}
.section-heading { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-heading h2 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.section-heading-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 640px;
	margin: 0 auto 32px;
	gap: 12px;
}
.link-arrow { color: var(--bloom-forest); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arrow:hover { color: var(--bloom-rose); }

/* ==========================================================================
   Top bar
   ========================================================================== */
.bloom-topbar {
	background: var(--bloom-forest);
	color: #eef2e6;
	font-size: 0.82rem;
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 24px;
	gap: 16px;
}
.topbar-message { margin: 0; opacity: 0.9; }
.topbar-contact { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.topbar-contact a:hover { color: var(--bloom-sage-light); }
.topbar-sep { opacity: 0.4; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	background: var(--bloom-ivory);
	border-bottom: 1px solid var(--bloom-border);
	position: sticky;
	top: 0;
	z-index: 500;
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 16px 24px;
	position: relative;
}
.site-branding { flex: 0 0 auto; }
.site-title-link { display: flex; flex-direction: column; }
.site-title {
	font-family: var(--font-heading);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--bloom-forest);
}
.custom-logo-link { display: block; line-height: 0; }
.custom-logo-link img { max-height: 84px; width: auto; }

.main-navigation { flex: 1 1 auto; }
.primary-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	justify-content: center;
	flex-wrap: wrap;
}
.primary-menu > li > a {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--bloom-text);
	padding: 8px 2px;
	position: relative;
}
.primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--bloom-sage-dark);
	transform: scaleX(0);
	transition: transform var(--transition);
}
.primary-menu > li > a:hover::after,
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current-menu-parent > a::after { transform: scaleX(1); }

/* Submenus */
.primary-menu li { position: relative; }
.primary-menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--bloom-ivory);
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 10px;
	min-width: 210px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all var(--transition);
	z-index: 50;
}
.primary-menu li:hover > ul.sub-menu,
.primary-menu li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu ul.sub-menu li a { display: block; padding: 8px 12px; border-radius: 6px; }
.primary-menu ul.sub-menu li a:hover { background: var(--bloom-blush); }
/* Caret on items that open a submenu: down on the top bar, right inside dropdowns. */
.primary-menu > li.menu-item-has-children > a { padding-right: 16px; }
.primary-menu > li.menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
}
.primary-menu ul.sub-menu li.menu-item-has-children > a { position: relative; padding-right: 28px; }
.primary-menu ul.sub-menu li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(-45deg);
	opacity: 0.5;
}
/* Third level (Shop > Category > Subcategory) flies out to the side of its parent dropdown. */
.primary-menu ul.sub-menu ul.sub-menu { top: -11px; left: 100%; margin-left: 6px; transform: translateX(-6px); }
.primary-menu ul.sub-menu li:hover > ul.sub-menu,
.primary-menu ul.sub-menu li:focus-within > ul.sub-menu { transform: translateX(0); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	color: var(--bloom-forest);
	background: transparent;
	border: none;
	transition: background var(--transition);
}
.icon-btn:hover { background: var(--bloom-blush-2); }
.cart-toggle .cart-count {
	position: absolute;
	top: 2px; right: 2px;
	background: var(--bloom-sage-dark);
	color: var(--bloom-forest);
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 40px; height: 40px;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
}
.menu-toggle span { width: 22px; height: 2px; background: var(--bloom-forest); transition: all var(--transition); }

.nav-overlay, .nav-close { display: none; }

.header-search-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	background: var(--bloom-ivory);
	border-bottom: 1px solid var(--bloom-border);
	box-shadow: var(--shadow-md);
	padding: 20px 24px;
}
.header-search-panel.is-open { display: block; }
.search-form { display: flex; max-width: 600px; margin: 0 auto; gap: 10px; }
.search-field {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--bloom-border);
	border-radius: 999px;
	font-family: inherit;
}
.search-submit {
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--bloom-forest);
	color: #fff;
	border: none;
}

/* Breadcrumb */
.bloom-breadcrumb, .woocommerce-breadcrumb {
	padding: 16px 0;
	font-size: 0.85rem;
	color: var(--bloom-text-muted);
}
.bloom-breadcrumb a, .woocommerce-breadcrumb a { color: var(--bloom-text-muted); }
.bloom-breadcrumb a:hover, .woocommerce-breadcrumb a:hover { color: var(--bloom-rose); }
.crumb-sep { margin: 0 4px; opacity: 0.6; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--bloom-forest);
	color: #fff;
}
/* All slides share one grid cell, so the hero is as tall as its tallest slide and never jumps. */
.hero-slides { display: grid; }
.hero-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	padding: 110px 0 90px;
}
/* Brand-green overlay keeps the white headline readable over the photo. */
.hero-slide--brand {
	background: linear-gradient(135deg, rgba(63, 74, 50, 0.88) 0%, rgba(63, 74, 50, 0.72) 50%, rgba(86, 104, 72, 0.55) 100%),
		url("../images/home/hero.jpg") center 40% / cover no-repeat,
		var(--bloom-forest);
}
.hero-slide--brand .hero-inner { width: 100%; }
.hero-bg {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: 0.5;
}
.hero-inner { position: relative; max-width: 760px; text-align: center; margin: 0 auto; }
.hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.8rem;
	color: var(--bloom-sage-light);
	font-weight: 600;
	margin-bottom: 20px;
}
.hero-title {
	color: #fff;
	font-size: clamp(1.9rem, 5vw, 3.6rem);
	margin-bottom: 22px;
}
.hero-subtitle { font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 36px; }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero .btn-outline:hover { background: #fff; color: var(--bloom-forest); border-color: #fff; }

.usp-strip { background: var(--bloom-blush); padding: 40px 0; border-bottom: 1px solid var(--bloom-border); }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.usp-item { display: flex; align-items: center; gap: 14px; color: var(--bloom-forest); }
.usp-item svg { flex-shrink: 0; color: var(--bloom-rose); }
.usp-item p { margin: 0; font-weight: 500; font-size: 0.92rem; }

/* ==========================================================================
   Home: featured categories
   ========================================================================== */
/* Occasion / Style / Color are three closely-related sections in a row — a full 90px
   between each (the default section rhythm) read as an oversized dead gap, so the two
   internal transitions are tightened to 50px; the top of Occasion and the bottom of
   Color (where it hands off to New Arrivals on a different background) keep the full 90px. */
.home-shop-by { padding: 50px 0 50px; }
.home-shop-by-alt { padding: 0 0 50px; background: var(--bloom-blush); }
.home-shop-by-color { padding: 0 0 90px; background: var(--bloom-blush); }
.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}
.category-card {
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bloom-blush);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.category-card-media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--bloom-sage) 0%, var(--bloom-forest) 100%);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.category-card-placeholder {
	font-family: var(--font-heading);
	font-size: 3rem;
	color: #fff;
	opacity: 0.85;
}
.category-card-body { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }
.category-card-body h3 { margin: 0; font-size: 1.1rem; }
.category-count { font-size: 0.8rem; color: var(--bloom-text-muted); white-space: nowrap; }

.color-swatch-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.color-swatch-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px 10px;
	border-radius: var(--radius-lg);
	background: var(--bloom-ivory);
	border: 1px solid var(--bloom-border);
	transition: transform var(--transition), box-shadow var(--transition);
}
.color-swatch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.color-swatch-dot {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 3px solid var(--bloom-ivory);
	box-shadow: 0 0 0 1px var(--bloom-border);
}
.color-swatch-label { font-size: 0.85rem; font-weight: 500; color: var(--bloom-forest); }

/* ==========================================================================
   Home: featured products / product cards (WooCommerce loop)
   ========================================================================== */
.home-featured { padding: 0 0 90px; }
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin: 0 !important;
	padding: 0 !important;
}
/* WooCommerce's own woocommerce.css adds a clearfix ::before/::after (content:" "; display:table)
   for its legacy float-based grid. Once the container is display:grid, that pseudo-element becomes
   a real grid item and silently occupies the first cell, shifting every product over by one slot. */
ul.products::before, ul.products::after { content: none !important; display: none !important; }
ul.products li.product {
	display: block;
	list-style: none;
	background: var(--bloom-ivory);
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
	transition: transform var(--transition), box-shadow var(--transition);
}
ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
ul.products li.product a.woocommerce-LoopProduct-link { display: block; padding-bottom: 4px; }
ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	background: var(--bloom-blush);
}
ul.products li.product .product-cat-label,
/* Same badge, injected server-side (see bloom_wc_block_grid_category_label in
   inc/woocommerce.php) as the first child of .wc-block-grid__product-image on the classic
   Products block ("New in store", etc.) — that div is already position:relative in WC's
   own CSS, so top/left here read the same as on the Shop page without any offset for the
   transparent border-based gutter .wc-block-grid__product uses elsewhere on that card. */
.wc-block-grid__product-image .product-cat-label {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255,255,255,0.92);
	color: var(--bloom-forest);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 999px;
	z-index: 2;
}
ul.products li.product .onsale {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--bloom-danger);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 5px 10px;
	border-radius: 999px;
	z-index: 2;
}
/* WooCommerce's own woocommerce.css targets these same elements with selectors that are
   MORE specific than ours (it prefixes with a `.woocommerce` ancestor class), so its margins
   silently win the cascade without !important here — confirmed via computed-style inspection:
   title margin was being reset to 0 entirely, price margin-bottom and button margin-top were
   being partially overridden too. !important guarantees our spacing actually renders. */
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	line-height: 1.3;
	margin: 16px 18px 6px !important;
	/* WooCommerce's own woocommerce.css also sets "padding: .5em 0" on this element —
	   that extra padding-bottom sat inside the line-clamp box's own clipping region, so
	   on a 3-line title the hidden 3rd line's letter-tops peeked through the padding
	   instead of being fully clipped, reading as a stray mark under the truncated text. */
	padding: 0 !important;
	color: var(--bloom-forest);
	/* Reserve space for two lines so cards with short vs. long titles keep price/button aligned. */
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
ul.products li.product .star-rating { margin: 0 18px 6px !important; font-size: 0.85rem; color: var(--bloom-rose); }
ul.products li.product .price {
	margin: 0 18px 10px !important;
	font-size: 1rem;
	/* WooCommerce's own woocommerce.css has a same-element `.price` rule prefixed with an
	   extra `.woocommerce` ancestor class, edging out ours by one class of specificity and
	   silently repainting the price in its own olive-gold --wc-highlight instead of this
	   green — the other declarations here don't need !important because WC's rule doesn't
	   set them, only `color` collides. */
	color: var(--bloom-forest) !important;
	font-weight: 600;
}
ul.products li.product .price del { color: var(--bloom-text-muted); font-weight: 400; opacity: 0.7; margin-right: 8px; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .button, ul.products li.product a.add_to_cart_button, ul.products li.product a.added_to_cart {
	display: block;
	margin: 0 18px 16px !important;
	text-align: center;
	padding: 11px 16px;
	border-radius: 999px;
	background: var(--bloom-forest);
	color: #fff !important;
	font-size: 0.85rem;
	font-weight: 500;
	transition: background var(--transition);
	width: calc(100% - 36px);
}
ul.products li.product .button:hover, ul.products li.product a.add_to_cart_button:hover { background: var(--bloom-sage-dark); color: var(--bloom-forest) !important; }
ul.products li.product .added_to_cart { margin-top: -8px; margin-bottom: 20px; font-size: 0.78rem; text-decoration: underline; background: transparent; color: var(--bloom-forest) !important; padding: 0 20px; }

/* "New in store" / related-products grid (the classic Products block, e.g. on the
   empty-cart page) uses different markup (.wc-block-grid__product) than the Shop page's
   product loop (ul.products li.product) — matched card-for-card here (same card chrome,
   title clamp, price, forest pill button) so it doesn't look like a different site inside
   the same page. !important mirrors the pattern above: wc-blocks.css/woocommerce.css both
   carry their own same-or-higher-specificity rules for these same elements.

   The card background/border/radius live on .wc-block-grid__product-inner (a wrapper div
   injected server-side, see bloom_wc_block_grid_card_wrapper in inc/woocommerce.php) rather
   than on the <li> itself. wc-blocks.css gives that <li> its OWN transparent borders (8px
   left/right, 16px bottom, 0 top) as the actual gutter between cards in this flex-wrap
   grid — painting a real border straight onto the <li> traces that same lopsided inset:
   flush against the photo's own edge on the sides/top (invisible) but sitting in blank
   space below the button at the bottom (the only place it read as a visible line — a
   border that looked like it belonged to the text, not the card). The inner div fills the
   <li>'s padding-box exactly, i.e. inside those transparent spacer borders, so its border
   wraps the whole visible card evenly instead. */
.wc-block-grid__product-inner {
	background: var(--bloom-ivory);
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 100%;
	transition: transform var(--transition), box-shadow var(--transition);
}
.wc-block-grid__product-inner:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.wc-block-grid__product .wc-block-grid__product-image,
.wc-block-grid__product .wc-block-grid__product-link { display: block !important; text-decoration: none !important; }
.wc-block-grid__product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	background: var(--bloom-blush);
}
.wc-block-grid__product-title,
.wc-block-grid__product .wc-block-grid__product-title {
	font-family: var(--font-heading) !important;
	font-size: 1.1rem !important;
	line-height: 1.3;
	font-weight: 600;
	margin: 16px 18px 6px !important;
	color: var(--bloom-forest) !important;
	text-decoration: none;
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wc-block-grid__product-price.price,
.wc-block-grid__product .wc-block-grid__product-price {
	margin: 0 18px 12px !important;
	font-size: 1rem !important;
	color: var(--bloom-forest);
	font-weight: 600;
}
.wc-block-grid__product-price .woocommerce-Price-amount { font-family: inherit; font-size: inherit; }
.wc-block-grid__product-price del { color: var(--bloom-text-muted); font-weight: 400; opacity: 0.7; margin-right: 8px; }
.wc-block-grid__product-price ins { text-decoration: none; }
.wc-block-grid__product .wc-block-grid__product-add-to-cart {
	margin: 0 18px 16px !important;
}
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.add_to_cart_button {
	display: block;
	text-align: center;
	padding: 11px 16px;
	border-radius: 999px;
	background: var(--bloom-forest);
	color: #fff !important;
	font-size: 0.85rem;
	font-weight: 500;
	transition: background var(--transition);
	width: 100%;
}
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.add_to_cart_button:hover {
	background: var(--bloom-sage-dark);
	color: var(--bloom-forest) !important;
}

/* ==========================================================================
   Home: about teaser + testimonials
   ========================================================================== */
.home-about { padding: 90px 0; background: var(--bloom-blush); }
.about-teaser-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about-teaser-media { position: relative; }
.about-teaser-frame {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	background: url("../images/home/about.jpg") center / cover no-repeat, var(--bloom-sage);
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}
.about-teaser-frame::after {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: calc(var(--radius-lg) - 6px);
}
.about-teaser-copy p { color: var(--bloom-text-muted); }
.about-teaser-copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }

.home-testimonials { padding: 90px 0; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial-card {
	margin: 0;
	background: var(--bloom-ivory);
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	padding: 32px;
}
.testimonial-card p { font-style: italic; color: var(--bloom-text); }
.testimonial-card cite { font-style: normal; font-weight: 600; color: var(--bloom-rose); }

/* ==========================================================================
   Home: closing CTA banner
   ========================================================================== */
/* Rounded split card with a gap above the footer, so it no longer runs into the footer's green. */
.home-cta { padding: 20px 0 100px; }
.home-cta-card {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bloom-forest);
	box-shadow: var(--shadow-md);
}
.home-cta-inner { padding: 64px 56px; text-align: left; }
.home-cta .section-eyebrow { color: var(--bloom-sage-light); }
.home-cta-inner h2 { color: #fff; margin: 0 0 16px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; }
.home-cta-text { color: rgba(255, 255, 255, 0.82); margin: 0 0 28px; max-width: 460px; }
.home-cta .hero-actions { justify-content: flex-start; }
.home-cta-media {
	min-height: 340px;
	background: url("../images/home/cta.jpg") center / cover no-repeat, var(--bloom-sage-light);
}
@media (max-width: 860px) {
	.home-cta { padding-bottom: 70px; }
	.home-cta-card { grid-template-columns: 1fr; }
	.home-cta-media { order: -1; min-height: 200px; }
	.home-cta-inner { padding: 40px 28px; text-align: center; }
	.home-cta-text { margin-left: auto; margin-right: auto; }
	.home-cta .hero-actions { justify-content: center; }
}
.home-cta .btn-primary { background: #fff; color: var(--bloom-forest); border-color: #fff; }
.home-cta .btn-primary:hover { background: var(--bloom-sage); border-color: var(--bloom-sage); }

/* ==========================================================================
   Page banner (About / Contact)
   ========================================================================== */
.page-banner {
	background: linear-gradient(135deg, var(--bloom-forest), var(--bloom-forest-light));
	color: #fff;
	padding: 80px 0 70px;
	text-align: center;
}
.page-banner h1 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.8rem); }
.page-banner-lead { max-width: 620px; margin: 0 auto; color: rgba(255,255,255,0.88); }
.page-banner .section-eyebrow { color: var(--bloom-sage-light); }

/* ==========================================================================
   About page
   ========================================================================== */
.about-story { padding: 90px 0; }
.about-values { padding: 0 0 90px; background: var(--bloom-blush); padding-top: 90px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card {
	background: var(--bloom-ivory);
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	padding: 30px 26px;
	text-align: center;
}
.value-card svg { color: var(--bloom-rose); margin-bottom: 14px; }
.value-card h3 { font-size: 1.05rem; }
.value-card p { color: var(--bloom-text-muted); font-size: 0.92rem; margin: 0; }

.about-stats { padding: 70px 0; background: var(--bloom-forest); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-item { color: #fff; }
.stat-number { display: block; font-family: var(--font-heading); font-size: 2.4rem; color: var(--bloom-sage-light); }
.stat-label { font-size: 0.85rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.78); }

.about-cta { padding: 90px 0 50px; text-align: center; }
.about-cta-inner h2 { margin-bottom: 28px; font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-section { padding: 90px 0; }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-info-card {
	display: flex;
	gap: 16px;
	background: var(--bloom-blush);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
}
.contact-info-card svg { flex-shrink: 0; color: var(--bloom-rose); margin-top: 2px; }
.contact-info-card h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-info-card p { margin: 0; color: var(--bloom-text-muted); }
.contact-info-card a:hover { color: var(--bloom-rose); }

.contact-form-wrap {
	background: var(--bloom-ivory);
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	padding: 40px;
}
.contact-form-wrap h2 { font-size: clamp(1.4rem, 2.6vw, 1.7rem); }
.form-honeypot { position: absolute; left: -9999px; }
.form-row { margin-bottom: 20px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-row-split .form-row { margin-bottom: 0; }
.bloom-contact-form label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.9rem; }
.bloom-contact-form .req { color: var(--bloom-danger); }
.bloom-contact-form input[type=text], .bloom-contact-form input[type=email], .bloom-contact-form input[type=tel], .bloom-contact-form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--bloom-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.95rem;
	background: var(--bloom-ivory);
}
.bloom-contact-form input:focus, .bloom-contact-form textarea:focus { border-color: var(--bloom-sage-dark); }
.form-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; }
.form-notice-success { background: #eaf1e4; color: var(--bloom-success); border: 1px solid #cfe0c2; }
.form-notice-error { background: #fbeae7; color: var(--bloom-danger); border: 1px solid #f0c8bd; }

.contact-map { padding: 0 0 90px; margin-bottom: 60px; }
/* Wrapped in .bloom-container (like every other section) so left/right spacing stays
   consistent at every width — the previous margin:0 24px here was fully overwritten by
   the margin-left/margin-right:auto below it in the same rule, so the map had zero side
   inset except when it happened to be narrower than the viewport. */
.map-embed {
	height: 340px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Generic page / blog / 404 / search
   ========================================================================== */
/* padding-top/bottom only (not shorthand) so this doesn't clobber the 24px left/right
   padding .bloom-container already sets on this same element — the checkout/cart/page
   templates apply both classes to one div, and a shorthand override here previously
   zeroed the horizontal padding, leaving content flush against the viewport edge. */
.page-content-wrap { padding-top: 60px; padding-bottom: 90px; margin-bottom: 60px; max-width: var(--container-w); }
/* Cart/checkout reuse the generic page template but need the full container width for the
   two-column layout below — the 860px cap is meant for long-form policy-page text only.
   They also drop the extra 60px title padding-top the generic page template adds above:
   shop/category archives render their title through WooCommerce's own wrapper (no
   .page-content-wrap involved) with just .bloom-container's normal 30px, so cart/checkout
   were sitting noticeably lower than the shop title under the same breadcrumb row. */
.woocommerce-cart .page-content-wrap,
.woocommerce-checkout .page-content-wrap { max-width: var(--container-w); padding-top: 30px; }
.page-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.page-body :where(h2, h3) { margin-top: 1.6em; }
.page-body p { color: var(--bloom-text); }
.page-body ul, .page-body ol { margin: 0 0 1.4em; padding-left: 1.4em; list-style: revert; }
/* :not(.wp-element-button, .wp-block-button__link) keeps this scoped to genuine inline
   text links (e.g. the Privacy/Refund policy prose) — without it, this was also matching
   WooCommerce block buttons that happen to render as <a> tags (Cart's "Proceed to
   Checkout" uses .wp-element-button; the cart-empty upsell products' "Add to Cart" uses
   .wp-block-button__link — both are WP core's default-button classes), overriding their
   white button text with dark green and leaving low-contrast text on a dark background. */
.page-body a:not(.wp-element-button):not(.wp-block-button__link) { color: var(--bloom-forest); font-weight: 600; text-decoration: underline; }
.page-body a:not(.wp-element-button):not(.wp-block-button__link):hover { color: var(--bloom-rose); }

/* Empty cart: swap WC's plain currentColor icon (mask-image on ::before, no backdrop)
   for a soft circle behind a basket glyph. Both pseudo-elements are taken out of the H2's
   normal flow (position:absolute) and stacked above the real heading text via padding-top
   on the H2 — an earlier in-flow attempt (::before circle, ::after icon pulled up with a
   negative margin) dragged the icon down onto the heading/subtitle text below it, because
   ::after renders AFTER the H2's own text node in flow, not adjacent to ::before. Selector
   specificity matches WC's own `.wc-block-cart__empty-cart__title.with-empty-cart-icon:before`
   (two classes) so this reliably wins the cascade without !important. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon {
	position: relative;
	padding-top: 116px;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	mask-image: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--bloom-blush);
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin: 0;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::after {
	content: "";
	position: absolute;
	top: 28px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	background-color: var(--bloom-sage-dark);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.5 10.5a2 2 0 0 1-2 1.5H8.5a2 2 0 0 1-2-1.5L5 8Z'/%3E%3Cpath d='M8 8V6a4 4 0 0 1 8 0v2'/%3E%3Cpath d='M9 8v11'/%3E%3Cpath d='M15 8v11'/%3E%3Cpath d='M5 8l7 3 7-3'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}
.wc-block-cart__empty-cart__title {
	margin-top: 40px !important;
	margin-bottom: 8px !important;
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--bloom-text);
}
.empty-cart-subtitle {
	margin: 0 0 32px;
	color: var(--bloom-text-muted);
	font-size: 0.95rem;
}

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 20px 0 50px; }
.blog-card { background: var(--bloom-ivory); border: 1px solid var(--bloom-border); border-radius: var(--radius-lg); overflow: hidden; }
.blog-card-media img { aspect-ratio: 4/3; object-fit: cover; }
.blog-card-body { padding: 20px; }
.entry-meta { font-size: 0.8rem; color: var(--bloom-text-muted); }

/* padding-top/bottom only — a shorthand `padding: 100px 0` here previously zeroed out
   the 24px left/right padding .bloom-container already sets on this same element (the
   same bug already fixed once on .page-content-wrap), leaving the 404 heading running
   edge-to-edge on narrow screens. */
.error-404-wrap { text-align: center; padding-top: 100px; padding-bottom: 100px; margin-bottom: 60px; }
.error-404-wrap h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.error-code { font-family: var(--font-heading); font-size: clamp(2.6rem, 12vw, 5rem); color: var(--bloom-rose); margin: 0; }

/* ==========================================================================
   WooCommerce: shop layout
   ========================================================================== */
.woo-main { padding-bottom: 40px; }
.woocommerce-breadcrumb, .woocommerce-products-header { padding-top: 10px; }

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 32px;
}
/* The body's 1.7 line-height (fine for paragraphs) inflates plain toolbar text into a
   taller line-box than the sort button, whose own height comes from its padding — so
   even with align-items:center the two visually sit off from each other. Tightening
   line-height here keeps every toolbar item's box the same rough height, in sync. */
/* Same `.woocommerce .woocommerce-result-count { margin: 0 0 1em }` specificity war as
   .woocommerce-ordering below — !important for the same reason. */
.woocommerce-result-count { margin: 0 !important; line-height: 1.4; color: var(--bloom-text-muted); }
.shop-toolbar-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* WooCommerce's own woocommerce.css sets `.woocommerce .woocommerce-ordering { margin:
   0 0 1em }` — a two-class selector that outranks our single-class one regardless of
   load order, leaving a 16px bottom margin that threw off the toolbar's vertical
   centering against the per-page selector next to it. !important settles it for good. */
.woocommerce-ordering { margin: 0 !important; position: relative; }
.woocommerce-ordering select {
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--bloom-border);
	font-family: inherit;
	background: var(--bloom-ivory);
}
/* Once main.js builds the custom dropdown below, the native <select> is only kept
   around to hold form state and drive WooCommerce's own onchange-submit handler —
   visually hidden rather than display:none so it stays keyboard/screen-reader reachable. */
.woocommerce-ordering select.orderby-enhanced {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.custom-select-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: var(--radius);
	border: 1px solid var(--bloom-border);
	background: var(--bloom-ivory);
	font-family: inherit;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--bloom-text);
}
.custom-select-toggle svg {
	flex-shrink: 0;
	color: var(--bloom-text-muted);
	transition: transform var(--transition);
}
.custom-select-wrap.is-open .custom-select-toggle svg { transform: rotate(180deg); }

.custom-select-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	max-width: calc(100vw - 48px);
	background: var(--bloom-ivory);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 10px;
	z-index: 60;
}
.custom-select-wrap.is-open .custom-select-menu { display: block; }

/* .shop-toolbar-right wraps the per-page selector and the sort toggle onto their own
   row once they no longer fit side by side — on that stacked row the toggle sits at
   the far left rather than the far right, so right:0 pushed the menu off-screen to
   the left. Anchoring to the toggle's left edge instead keeps it on-screen there. */
@media (max-width: 600px) {
	.custom-select-menu { left: 0; right: auto; min-width: 200px; }
}
.custom-select-menu li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 0.92rem;
	color: var(--bloom-text);
	cursor: pointer;
	white-space: nowrap;
}
.custom-select-menu li:hover { background: var(--bloom-blush); }
/* Every row reserves the same icon slot (empty by default) so option text lines up
   whether or not that row is the selected one. */
.custom-select-menu li::before {
	content: "";
	width: 14px;
	flex-shrink: 0;
	color: var(--bloom-forest);
	font-weight: 700;
}
/* Forest green, not the rose accent — matches how "currently active" is shown
   elsewhere on the site (e.g. the active per-page-selector number). */
.custom-select-menu li.is-selected {
	color: var(--bloom-forest);
	font-weight: 600;
}
.custom-select-menu li.is-selected::before { content: "\2713"; }
.per-page-selector {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--bloom-text-muted);
}
.per-page-selector a { color: var(--bloom-text-muted); }
.per-page-selector a.is-active { color: var(--bloom-forest); font-weight: 600; }
.per-page-selector a:hover { color: var(--bloom-rose); }
.per-page-sep { opacity: 0.4; }

/* Reset WooCommerce's own (now-dequeued-CSS-but-just-in-case) float layout so cards fill their grid cell. */
ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce-pagination, .pagination, .navigation.pagination { margin-top: 40px; }
/* Reset WooCommerce's own bordered/floated pagination list before applying our styling. */
.woocommerce-pagination ul.page-numbers {
	display: flex !important;
	gap: 8px;
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	justify-content: center;
}
nav.navigation .nav-links { display: flex; gap: 8px; list-style: none; padding: 0; justify-content: center; }
.woocommerce-pagination ul.page-numbers li {
	display: inline-block;
	float: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span,
.page-numbers a, .page-numbers span, nav.navigation .page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px !important;
	border-radius: 8px;
	border: 1px solid var(--bloom-border);
	background: transparent !important;
	color: var(--bloom-text) !important;
	font-size: 1em;
	line-height: 1;
}
.woocommerce-pagination ul.page-numbers li span.current,
.page-numbers.current {
	background: var(--bloom-forest) !important;
	color: #fff !important;
	border-color: var(--bloom-forest);
}
.woocommerce-pagination ul.page-numbers li a:hover,
.page-numbers:hover {
	background: transparent !important;
	border-color: var(--bloom-rose) !important;
	color: var(--bloom-forest) !important;
}

/* ==========================================================================
   WooCommerce: single product
   ========================================================================== */
.single-product .woo-main { padding-top: 20px; }
/* Two-column layout: gallery on the left, summary on the right — WooCommerce's own
   float-based layout.css handled this, but we dequeued that stylesheet (it fights our
   CSS Grid elsewhere), so without an explicit grid here the gallery and summary stack
   full-width and a tall portrait photo ends up dominating the whole page. */
div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
div.product div.images {
	grid-column: 1;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bloom-blush);
}
/* Square crop keeps every product photo (portrait or landscape) a consistent, contained
   size instead of stretching the column to the source image's native aspect ratio. */
div.product div.images .woocommerce-product-gallery__image,
div.product div.images .woocommerce-product-gallery__image a,
div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}
/* Square per slide, not on the wrapper: with several photos FlexSlider makes the wrapper
   one wide strip of all slides, and a square wrapper then grows as tall as it is wide. */
div.product div.images .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; }
div.product div.images .woocommerce-product-gallery__image a { display: block; }
div.product div.images img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
div.product div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px; right: 16px;
	width: 40px; height: 40px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	z-index: 3;
}
div.product div.images .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px; height: 38px;
	background: #fff;
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	text-indent: -9999px;
	overflow: hidden;
	z-index: 3;
}
div.product div.images .flex-direction-nav a::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px; height: 8px;
	border-top: 2px solid var(--bloom-forest);
	border-right: 2px solid var(--bloom-forest);
}
div.product div.images .flex-direction-nav a.flex-prev { left: 16px; }
div.product div.images .flex-direction-nav a.flex-prev::after { transform: rotate(-135deg) translate(1px, -1px); }
div.product div.images .flex-direction-nav a.flex-next { right: 16px; }
div.product div.images .flex-direction-nav a.flex-next::after { transform: rotate(45deg) translate(-2px, 2px); }
div.product div.images ol.flex-control-thumbs {
	display: flex;
	gap: 12px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
}
div.product div.images ol.flex-control-thumbs li {
	width: 72px; height: 72px;
	list-style: none;
}
div.product div.images ol.flex-control-thumbs img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid transparent;
	opacity: 0.7;
	transition: all var(--transition);
}
div.product div.images ol.flex-control-thumbs img.flex-active,
div.product div.images ol.flex-control-thumbs img:hover { opacity: 1; border-color: var(--bloom-sage-dark); }
div.product div.summary {
	grid-column: 2;
	padding-top: 0;
}
div.product .product_title { font-size: clamp(1.4rem, 3vw, 2.2rem); }
div.product p.price { font-size: 1.4rem; color: var(--bloom-forest); font-weight: 600; }
div.product p.price del { opacity: 0.6; font-weight: 400; }
div.product .woocommerce-product-rating { margin-bottom: 18px; }
div.product .star-rating { color: var(--bloom-rose); }
div.product .woocommerce-product-details__short-description { color: var(--bloom-text-muted); }
div.product .stock {
	display: inline-block;
	margin: 4px 0 0;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--bloom-success);
}
div.product .stock.out-of-stock { color: var(--bloom-danger); }
div.product form.cart { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
div.product .product_meta {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--bloom-border);
	font-size: 0.85rem;
	color: var(--bloom-text-muted);
}
div.product .product_meta > span { display: block; margin-bottom: 4px; }
div.product .product_meta a { color: var(--bloom-text-muted); }
div.product .product_meta a:hover { color: var(--bloom-rose); }

@media (max-width: 860px) {
	div.product { grid-template-columns: 1fr; gap: 28px; }
	div.product div.images, div.product div.summary { grid-column: 1; }
}
div.product .quantity input.qty {
	width: 70px;
	padding: 12px;
	border: 1px solid var(--bloom-border);
	border-radius: 8px;
	font-family: inherit;
	margin-right: 10px;
}
div.product .single_add_to_cart_button {
	background: var(--bloom-forest) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 15px 40px !important;
	border: none !important;
	font-weight: 500 !important;
}
div.product .single_add_to_cart_button:hover { background: var(--bloom-sage-dark) !important; color: var(--bloom-forest) !important; }
.same-day-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--bloom-blush);
	color: var(--bloom-forest);
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: 0.88rem;
	font-weight: 500;
	margin: 20px 0 0;
}
.same-day-notice svg { flex-shrink: 0; color: var(--bloom-rose); }
/* .woocommerce-tabs is a child of div.product's two-column grid but was never given a
   grid-column, so grid auto-placement put it in column 1 only (the same width as the
   product image) — centering the tab labels inside that narrow slot instead of across
   the full width below both columns. */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 20px; padding-top: 20px; }
/* WooCommerce's own woocommerce.css draws these as boxed "folder" tabs — bordered/
   background li's with little corner-notch ::before/::after pseudo-elements and its own
   full-width ul.tabs::before underline. All of that has to be stripped out (with
   !important, since its selectors match ours in specificity) to get plain centered,
   bold text with a simple underline on the active tab. */
.woocommerce-tabs ul.tabs {
	display: flex;
	justify-content: flex-start;
	gap: 48px;
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--bloom-border);
	overflow: visible;
}
.woocommerce-tabs ul.tabs::before { display: none; }
/* WooCommerce indents the tab row by 1em; drop it so tabs line up with the panel content. */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding-left: 0; }
.woocommerce-tabs ul.tabs li {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 0 16px !important;
	border-bottom: 2px solid transparent !important;
	cursor: pointer;
}
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { content: none !important; }
.woocommerce-tabs ul.tabs li a { font-weight: 700; color: var(--bloom-text) !important; padding: 0 !important; text-decoration: none; }
.woocommerce-tabs ul.tabs li:hover a { color: var(--bloom-forest) !important; }
.woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--bloom-sage-dark) !important; }
.woocommerce-tabs ul.tabs li.active a { color: var(--bloom-text) !important; }
.related.products, .upsells.products { grid-column: 1 / -1; margin-top: 70px; }
.related.products > h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 30px; }

/* ==========================================================================
   WooCommerce: cart / checkout / account
   ========================================================================== */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 30px;
}
.shop_table th, .shop_table td { padding: 16px 12px; border-bottom: 1px solid var(--bloom-border); text-align: left; }
.shop_table thead th { font-family: var(--font-heading); font-weight: 600; color: var(--bloom-forest); }
.cart-collaterals, .woocommerce-cart-form { margin-bottom: 20px; }
.cart_totals, .woocommerce-checkout-review-order {
	background: var(--bloom-blush);
	border-radius: var(--radius-lg);
	padding: 28px;
}
.cart_totals h2, .woocommerce-checkout-review-order-table caption { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }

/* Two-column layout: cart items / checkout billing form on the left, totals on the right. */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 40px;
	align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin-bottom: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; margin-bottom: 0; }

.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 48px;
	align-items: start;
}
.woocommerce-checkout form.checkout .col2-set { grid-column: 1; }
.woocommerce-checkout form.checkout .checkout-order-review-col { grid-column: 2; }
.checkout-order-review-col #order_review_heading { margin-top: 0; }

@media (max-width: 960px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
}
#coupon_code { padding: 12px; border: 1px solid var(--bloom-border); border-radius: 8px; font-family: inherit; }
.checkout_coupon .button, button.button, input.button, a.button, #place_order {
	background: var(--bloom-forest) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 13px 28px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}
button.button:hover, input.button:hover, a.button:hover, #place_order:hover { background: var(--bloom-sage-dark) !important; color: var(--bloom-forest) !important; }
.woocommerce-checkout input[type=text], .woocommerce-checkout input[type=email], .woocommerce-checkout input[type=tel], .woocommerce-checkout textarea, .woocommerce-checkout select,
.woocommerce-account input[type=text], .woocommerce-account input[type=email], .woocommerce-account input[type=password] {
	padding: 12px 14px;
	border: 1px solid var(--bloom-border);
	border-radius: 8px;
	font-family: inherit;
	width: 100%;
}
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-ResetPassword label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.9rem; color: var(--bloom-text); }
/* Account pages: sidebar nav + content side by side, sidebar as a bordered card of
   stacked links (active page filled solid) instead of the browser-default bullet list. */
/* Scoped to :has(nav) — when logged out, WooCommerce's shortcode wrapper still renders
   the same ".woocommerce" div, but with the login/register card as its only child
   instead of nav+content. Without this scoping, that one child was still being auto-
   placed into the 260px "nav" column track, squeezing the login card into a narrow
   260px-wide box instead of the centered card its own CSS (below) already sets up. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; }
@media (max-width: 860px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; }
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	background: var(--bloom-ivory);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--bloom-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 16px 20px;
	border-radius: 0;
	font-weight: 600;
	color: var(--bloom-text);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--bloom-sage-light); color: var(--bloom-forest); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover { background: var(--bloom-forest); color: #fff; }

/* Account details: single card, First/Last name side by side, then Display name, Email,
   and Password change stacked below. */
.account-details-card {
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	background: var(--bloom-ivory);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.account-section-body { padding: 32px; }
.account-section-body .woocommerce-form-row:last-child { margin-bottom: 0; }
.account-name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 24px;
}
@media (max-width: 600px) {
	.account-name-row { grid-template-columns: 1fr; }
}
.account-password-fields { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--bloom-border); }
/* Reset the browser's default <fieldset> border/padding — without this, the fieldset
   drew its own box around the password fields on top of our own border-top divider. */
.account-password-fields fieldset { border: none; margin: 0; padding: 0; }
.account-password-legend {
	padding: 0;
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--bloom-text);
}
/* Outlined instead of the site's usual solid-green button, to read as a secondary action
   next to "Change Password" — narrower override than the sitewide button rule above so
   only this specific submit button (not #place_order, Add to Cart, etc.) is affected. */
.woocommerce-EditAccountForm button.account-save-btn {
	background: transparent !important;
	color: var(--bloom-forest) !important;
	border: 2px solid var(--bloom-forest) !important;
}
.woocommerce-EditAccountForm button.account-save-btn:hover {
	background: var(--bloom-forest) !important;
	color: #fff !important;
}

/* ==========================================================================
   WooCommerce: Login / Register (My Account)
   WooCommerce renders Login and Register as two columns of the same
   #customer_login element. We show them as two single-card panels (uppercase
   header bar, bordered body) and let JS (main.js) toggle which one is visible
   via the "Register" / "Sign in" switch links, instead of the native
   side-by-side two-column layout.
   ========================================================================== */
#customer_login.u-columns { display: block; max-width: 460px; margin: 0 auto; }
.u-column1.col-1, .u-column2.col-2 {
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	background: var(--bloom-ivory);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
#customer_login .u-column2.col-2 { display: none; }
#customer_login.show-register .u-column1.col-1 { display: none; }
#customer_login.show-register .u-column2.col-2 { display: block; }

.u-column1.col-1 h2, .u-column2.col-2 h2 {
	margin: 0;
	padding: 18px 32px;
	background: var(--bloom-sage-light);
	border-bottom: 1px solid var(--bloom-border);
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--bloom-forest);
}
.u-column1.col-1 form, .u-column2.col-2 form { padding: 32px; }

/* My Addresses: a plain heading above a simple bordered box (edit link + address details
   inside) instead of a colored header-bar card. */
.woocommerce-Address + .woocommerce-Address { margin-top: 32px; }
.woocommerce-Address-heading {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--bloom-text);
}
.woocommerce-Address-box {
	border: 1px solid var(--bloom-border);
	padding: 20px 24px;
}
.woocommerce-Address-box .edit {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--bloom-rose);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-Address-box .edit:hover { color: var(--bloom-forest); }
.woocommerce-Address address { font-style: normal; color: var(--bloom-text); }
/* WooCommerce's own woocommerce.css puts a second border/box treatment directly on the
   login/register <form> itself (".woocommerce form.login, .woocommerce form.register")
   — redundant now that the whole .u-column card already has one, and it read as a
   double-nested border. */
.woocommerce form.login, .woocommerce form.register { border: none !important; margin: 0 !important; }
/* Reference has no "Remember me" checkbox — just a full-width Sign In button on its own
   row directly under the password field. WooCommerce's own woocommerce.css sets
   `.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {display:
   inline-block}` (3 classes), which outranks a single-class override here. */
.woocommerce-form-login__rememberme { display: none !important; }
.woocommerce-form-login .woocommerce-form-login__submit { width: 100%; }
.woocommerce-LostPassword.lost_password { margin-top: 16px; }
.woocommerce-LostPassword.lost_password a { color: var(--bloom-text-muted); text-decoration: underline; }
.account-switch { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--bloom-border); color: var(--bloom-text-muted); }
.account-switch-link { color: var(--bloom-forest); font-weight: 600; text-decoration: underline; margin-left: 4px; }

/* Password show/hide toggle — WooCommerce's own woocommerce.js already wraps every
   password field in span.password-input and appends button.show-password-input with
   the click-to-reveal behaviour wired up; it just ships with no visual styling at all
   (an empty ~0px button) until a theme supplies one. Eye icons are baked into the
   button as background images since data-URI SVGs can't inherit currentColor. */
.password-input { position: relative; display: block; }
.password-input input[type="password"], .password-input input[type="text"] { padding-right: 44px; }
.show-password-input {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	border: none;
	padding: 0;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237C8571' stroke-width='1.8'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233F4A32' stroke-width='1.8'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a20.6 20.6 0 0 1 5.06-5.94M9.9 4.24A10.4 10.4 0 0 1 12 4c7 0 11 8 11 8a20.7 20.7 0 0 1-3.22 4.55M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Lost password page: no card wrapper in the reference, just the fields restyled to
   match the rest of the site (narrow column instead of full page width). */
.woocommerce-ResetPassword.lost_reset_password { max-width: 460px; }
/* WooCommerce's own woocommerce.css reserves room for its notice icon (an absolutely
   positioned ::before, "left: 1.5em" from the box) via "padding: 1em 2em 1em 3.5em" —
   our own padding here was overriding that with a flat 20px all round, leaving no room
   for the icon, so it sat on top of the first few letters instead of beside them. Keep
   our colors/radius but restore a left inset wide enough to clear the icon. */
/* WooCommerce's own woocommerce.css also puts a 3px "border-top" on these notices, color-
   coded per type (blue for info, red for error, green for message/success) — left over
   underneath our own border-left accent, so the box showed two different, clashing
   accent colors at once. Neutralize it so the left border is the only accent color. */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	background: var(--bloom-blush);
	border-top: none !important;
	border-left: 4px solid var(--bloom-rose);
	padding: 16px 20px 16px 48px;
	border-radius: 8px;
	list-style: none;
	margin-bottom: 24px;
	/* A notice's action button (e.g. "Browse products", "Confirm email address") is
	   plain text in the same paragraph as the message, floated right by WooCommerce's
	   own woocommerce.css — when the message text is long enough to wrap, it wraps
	   AROUND the floated button instead of past it, reading as cramped. WooCommerce
	   places the button before OR after the message text depending on which notice it
	   is, so flex + "order" (below) is used instead of relying on source order — it
	   puts the button on its own line under the message either way. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.woocommerce-error { border-left-color: var(--bloom-danger); }
/* Recolor the notice icon itself too — WooCommerce's defaults (blue info, green
   success, red error) are its own brand colors and don't belong to this palette. */
.woocommerce-message::before { color: var(--bloom-forest); }
.woocommerce-error::before { color: var(--bloom-danger); }
.woocommerce-info::before, .woocommerce-notice::before { color: var(--bloom-sage-dark); }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button, .woocommerce-notice .button {
	float: none;
	margin-top: 0;
	order: 2;
}

/* ==========================================================================
   WooCommerce: Blocks Checkout
   Our Checkout page uses the block-based [woocommerce/checkout] (Cart & Checkout
   Blocks), not the classic [woocommerce_checkout] shortcode — its markup is entirely
   different (wc-block-* classes) from the rules above, which only apply if a store
   ever switches back to the classic shortcode template. Colors/spacing/radius only —
   font-family and font-size are left exactly as WooCommerce Blocks render them.
   ========================================================================== */
.wc-block-components-text-input input,
.wc-blocks-components-select__select {
	border-color: var(--bloom-border) !important;
	border-radius: var(--radius) !important;
	background: var(--bloom-ivory) !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--bloom-sage-dark) !important;
}
.wc-blocks-components-select__expand { color: var(--bloom-text-muted); }
/* WooCommerce's own checkout.css sets `.wc-block-components-form .wc-block-components-
   checkout-step .wc-block-components-country-input { margin-top: 0 }` — a three-class
   descendant selector that outranks our single-class one no matter the load order,
   which is why the first attempt at this spacing fix had no effect. !important settles
   the same specificity war we've hit before with WooCommerce's own stylesheet. */
.wc-block-components-address-form__country { margin-top: 12px !important; }
.wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__guest-checkout-notice { color: var(--bloom-text-muted); }

/* Checkbox: recolor the checkmark + its box to the brand green instead of default blue. */
.wc-block-components-checkbox svg.wc-block-components-checkbox__mark { fill: var(--bloom-forest); }
.wc-block-components-checkbox input[type="checkbox"] { accent-color: var(--bloom-forest); }
.wc-block-components-checkbox input[type="checkbox"]:focus + svg,
.wc-block-components-checkbox input[type="checkbox"]:focus ~ svg { outline: 2px solid var(--bloom-sage-dark); }

/* Payment method card — bordered box per option, brand-green when its radio is selected. */
.wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius) !important;
	margin-bottom: 10px;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--bloom-forest);
}
.wc-block-components-radio-control__input { accent-color: var(--bloom-forest); }
.wc-block-components-radio-control-accordion-content { color: var(--bloom-text-muted); }

/* Coupon accordion row. */
.wc-block-components-panel__button { color: var(--bloom-text); }
.wc-block-components-panel__button:hover { color: var(--bloom-forest); }
.wc-block-components-panel__button-icon { color: var(--bloom-text-muted); }

/* Hide each product's short description under its name in cart/checkout line items —
   same component/class on both the Cart page's item rows and the Checkout order
   summary, so one rule covers both. */
.wc-block-components-product-metadata__description { display: none; }

/* On narrow layouts WooCommerce Blocks renders the order summary twice: a compact total
   preview fill placed near the Place Order button (.checkout-order-summary-block-fill-
   wrapper) in addition to the full itemized card in the sidebar below. Both share the
   .wp-block-woocommerce-checkout-order-summary-block class, so the compact one was
   picking up the same card styling and reading as a second, redundant summary. Hide the
   compact preview and keep the one full card. */
.wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper { display: none !important; }

/* WooCommerce Blocks switches the checkout from stacked to a fixed 65/35 main/sidebar
   split the instant the checkout block's own width (a container query on
   .wp-block-woocommerce-checkout, not the viewport) crosses 700px, and that 35% never
   grows relative to the sidebar's actual needs. Right after the switch the sidebar is
   only ~35% of ~700px — too narrow for the order summary's thumbnail + product name +
   price to sit on one line, so the name wraps mid-word. Keep the stacked layout until
   there's real room (1080px) for two columns, then give the sidebar a wider share
   (42% instead of 35%) so a normal two/three-word product name still fits. */
@container (min-width: 700px) and (max-width: 1079.98px) {
	.wc-block-components-sidebar-layout {
		flex-direction: column;
		margin: 0 auto 16px;
	}
	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		padding: 0;
		width: 100%;
	}
	.wc-block-checkout__sidebar { margin-bottom: 24px; order: 0; }
	.wc-block-checkout__main { order: 1; }
}
@container (min-width: 1080px) {
	.wc-block-components-sidebar-layout .wc-block-components-main { width: 58%; }
	.wc-block-components-sidebar-layout .wc-block-components-sidebar { width: 42%; }
}

/* Order summary — give it the same card treatment used elsewhere on the site (e.g.
   the contact form card). Scoped to the actual content block, not every child of
   .wc-block-checkout__sidebar — that also includes a couple of always-empty notice
   wrapper divs which would otherwise get boxed as their own stray empty cards. */
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius-lg);
	background: var(--bloom-ivory);
	box-shadow: var(--shadow-sm);
	padding: 28px;
}
.wc-block-components-totals-item__label { color: var(--bloom-text); }
.wc-block-components-totals-footer-item { border-top: 1px solid var(--bloom-border); padding-top: 14px !important; margin-top: 6px !important; }

/* WooCommerce Blocks hard-codes the item name and variation/qty text in cart and order-
   summary rows at a fixed 14px (12.25px for the variation line) with no viewport-based
   scaling at all — unlike the rest of the site's type, it stays exactly that size on a
   27" desktop as on a phone, which reads as too small once the surrounding layout grows.
   Step it up at wider breakpoints to match. */
.wc-block-components-product-name,
.wc-block-components-product-metadata {
	font-size: 0.95rem !important;
}
.wc-block-components-product-metadata__variation-data {
	font-size: 0.85rem !important;
}
@media (min-width: 600px) {
	.wc-block-components-product-name,
	.wc-block-components-product-metadata {
		font-size: 1rem !important;
	}
	.wc-block-components-product-metadata__variation-data {
		font-size: 0.9rem !important;
	}
}
@media (min-width: 1024px) {
	.wc-block-components-product-name,
	.wc-block-components-product-metadata {
		font-size: 1.05rem !important;
	}
	.wc-block-components-product-metadata__variation-data {
		font-size: 0.92rem !important;
	}
}

/* Place Order button — same pill shape and brand color as the rest of the site's
   primary buttons instead of the plugin's default dark, square button. */
.wc-block-components-checkout-place-order-button {
	background: var(--bloom-forest) !important;
	border-radius: 999px !important;
	border: none !important;
	transition: background var(--transition) !important;
}
.wc-block-components-checkout-place-order-button:hover {
	background: var(--bloom-sage-dark) !important;
	color: var(--bloom-forest) !important;
}
.wc-block-checkout__terms a { color: var(--bloom-forest); text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--bloom-forest); color: rgba(255,255,255,0.85); }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding: 60px 24px 40px;
}
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.78); }
.footer-col a:hover { color: var(--bloom-sage-light); }
.footer-about p { color: rgba(255,255,255,0.72); font-size: 0.92rem; }
.footer-brand { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; }
.footer-logo { margin-bottom: 16px; }
.footer-logo img { max-height: 96px; width: auto; display: block; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
}
.footer-social a:hover { background: var(--bloom-sage); color: var(--bloom-forest); }
.footer-contact-list li { color: rgba(255,255,255,0.78); }
.footer-locations li strong { color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding: 22px 0; }
.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 0.85rem;
	text-align: center;
	padding-top: 0; /* .bloom-container's own 30px vertical padding stacked with .footer-bottom's 22px, doubling the gap */
	padding-bottom: 0;
}
.footer-copyright { margin: 0; color: rgba(255,255,255,0.72); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.category-grid { grid-template-columns: repeat(2, 1fr); }
	.color-swatch-grid { grid-template-columns: repeat(3, 1fr); }
	ul.products { grid-template-columns: repeat(3, 1fr) !important; }
	.values-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Header switches to the off-canvas hamburger menu for tablet and below — below this
   width there usually isn't room for the full horizontal menu with dropdowns. */
@media (max-width: 1024px) {
	.topbar-message { display: none; }
	.header-inner { flex-wrap: nowrap; gap: 12px; }
	.site-branding { flex: 1 1 auto; min-width: 0; }
	.site-title-link { max-width: 100%; }
	.site-title { font-size: 1.15rem; white-space: normal; line-height: 1.25; }
	.custom-logo-link img { max-height: 64px; }
	.header-actions { flex: 0 0 auto; }
	.main-navigation {
		position: fixed;
		top: 0; right: -100%;
		width: min(320px, 85%);
		height: 100vh;
		background: var(--bloom-ivory);
		box-shadow: var(--shadow-md);
		padding: 90px 24px 24px;
		transition: right var(--transition);
		z-index: 900;
		overflow-y: auto;
	}
	.main-navigation.is-open { right: 0; }
	.primary-menu { flex-direction: column; align-items: flex-start; gap: 4px; }
	.primary-menu > li { width: 100%; }
	.primary-menu > li > a { display: block; padding: 12px 0; }
	/* The animated hover underline (.primary-menu > li > a::after) is a desktop-only nav
	   treatment. On mobile, tapping a parent item to expand its submenu can leave that
	   underline visually "on" (WebKit's sticky :hover-after-tap), and since the expanded
	   submenu sits directly below in flow with its own opaque background, it painted over
	   the middle of the underline — leaving only its two ends visible as stray marks. */
	.primary-menu > li > a::after { display: none; }
	.primary-menu ul.sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 12px; display: none; }
	.primary-menu ul.sub-menu ul.sub-menu { margin-left: 0; transform: none; }
	.primary-menu ul.sub-menu li.menu-item-has-children > a::after { transform: translateY(-70%) rotate(45deg); }
	.primary-menu ul.sub-menu li.menu-open > a::after { transform: translateY(-30%) rotate(-135deg); }
	.primary-menu li.menu-open > ul.sub-menu { display: block; }
	.menu-toggle { display: flex; }
	.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
	.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Backdrop behind the slide-out nav — tapping it closes the menu, same as the close button. */
	.nav-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(63, 74, 50, 0.45);
		z-index: 890;
	}
	.nav-overlay.is-open { display: block; }

	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 40px; height: 40px;
		border-radius: 50%;
		background: var(--bloom-blush);
		border: none;
	}
	.nav-close span {
		position: absolute;
		width: 18px; height: 2px;
		background: var(--bloom-forest);
	}
	.nav-close span:first-child { transform: rotate(45deg); }
	.nav-close span:last-child { transform: rotate(-45deg); }
}

@media (max-width: 860px) {
	.about-teaser-grid, .contact-grid { grid-template-columns: 1fr; }
	.usp-grid { grid-template-columns: repeat(2, 1fr); }
	.category-grid, .testimonial-grid, .values-grid, .stats-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
	.color-swatch-grid { grid-template-columns: repeat(3, 1fr); }
	ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
	/* Shrink the icon buttons (rather than letting them wrap to a second row) so the
	   logo and search/account/cart/menu icons all stay on one line on narrow phones. */
	.header-inner { flex-wrap: nowrap; gap: 8px; }
	.header-actions { gap: 2px; }
	.icon-btn, .menu-toggle { width: 32px; height: 32px; }
	.icon-btn svg { width: 17px; height: 17px; }
	.cart-toggle .cart-count { width: 14px; height: 14px; font-size: 0.6rem; top: 0; right: 0; }
	.menu-toggle span { width: 18px; }
	.site-title { font-size: 1rem; }
	.custom-logo-link img { max-height: 56px; }
	.category-grid, .testimonial-grid, .values-grid, .stats-grid, .blog-grid, .usp-grid { grid-template-columns: 1fr; }
	.color-swatch-grid { grid-template-columns: repeat(2, 1fr); }
	ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
	.form-row-split { grid-template-columns: 1fr; }
	.footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Aura Vita: featured categories, wholesale teaser, policy pages, FAQ
   ========================================================================== */
.home-shop-by { padding: 90px 0; }
.home-shop-by .section-heading p,
.home-wholesale .section-heading p,
.about-values .section-heading p { color: var(--bloom-text-muted); }
.category-card-icon { color: #fff; opacity: 0.9; }
.category-card-body--stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.category-card-body--stack p { margin: 0; font-size: 0.9rem; color: var(--bloom-text-muted); }

.testimonial-card h3 { font-size: 1.2rem; }
.testimonial-card:not(blockquote) p { font-style: normal; color: var(--bloom-text-muted); margin: 0; }
.home-wholesale-action { text-align: center; margin: 40px 0 0; }
.home-cta .hero-actions { margin-top: 8px; }
.home-cta .home-cta-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.home-cta .home-cta-outline:hover { background: #fff; color: var(--bloom-forest); border-color: #fff; }
.about-cta .hero-actions { margin-top: 0; }

.bloom-contact-form select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--bloom-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.95rem;
	background: var(--bloom-ivory);
	color: var(--bloom-text);
}
.bloom-contact-form select:focus { border-color: var(--bloom-sage-dark); }

.policy-page .page-content-wrap { padding-top: 50px; }
.policy-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	padding: 16px 20px;
	margin: 0 0 32px;
	background: var(--bloom-blush);
	border-radius: var(--radius);
	font-size: 0.9rem;
	color: var(--bloom-text-muted);
}
.policy-meta strong { color: var(--bloom-forest); }
.policy-page .page-body > h2:first-child { margin-top: 0; }
.policy-page .page-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }

.faq-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 1.4em; }
.faq-item {
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius);
	background: var(--bloom-ivory);
}
.faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 48px 16px 20px;
	font-weight: 500;
	color: var(--bloom-forest);
	position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	color: var(--bloom-rose);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 20px 4px; }
.faq-answer p { color: var(--bloom-text-muted); }
.faq-more { margin-top: 2em; }
.home-featured { padding: 90px 0; }
.nowrap { white-space: nowrap; }

/* Variable products: option selector styled like the theme's other form fields. */
div.product form.cart table.variations { width: 100%; margin: 0 0 18px; border: 0; border-collapse: collapse; }
div.product form.cart table.variations tr { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
div.product form.cart table.variations th,
div.product form.cart table.variations td { padding: 0; border: 0; text-align: left; background: none; }
div.product form.cart table.variations th label { font-weight: 600; color: var(--bloom-forest); font-size: 0.95rem; }
div.product form.cart table.variations select {
	width: 100%;
	max-width: 420px;
	padding: 13px 44px 13px 16px;
	border: 1px solid var(--bloom-border);
	border-radius: 8px;
	background: var(--bloom-ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233F4A32' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--bloom-text);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
div.product form.cart table.variations select:focus { outline: none; border-color: var(--bloom-sage-dark); }
div.product form.cart .reset_variations { display: inline-block; margin-top: 8px; font-size: 0.85rem; color: var(--bloom-text-muted); }
div.product .single_variation_wrap .woocommerce-variation-price { margin: 0 0 14px; }
div.product .single_variation_wrap .woocommerce-variation-price .price { font-size: 1.3rem; font-weight: 600; color: var(--bloom-forest); }

/* About Us page uses its own story photo so it doesn't repeat the homepage teaser. */
.about-page .about-story .about-teaser-frame { background-image: url("../images/home/about-page.jpg"); }


/* ==========================================================================
   Hero slider: product slides (Hot Selling / Special Offer)
   ========================================================================== */
.hero--slider .hero-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0.7s;
	padding-bottom: 110px; /* room for the dots */
}
.hero--slider .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide--product {
	background: radial-gradient(circle at 78% 40%, rgba(254, 245, 239, 0.16), transparent 42%),
		linear-gradient(120deg, var(--bloom-forest) 0%, var(--bloom-forest-light) 100%);
}
.hero-slide--offer {
	background: radial-gradient(circle at 78% 40%, rgba(231, 169, 182, 0.22), transparent 45%),
		linear-gradient(120deg, #3a4330 0%, var(--bloom-forest) 55%, #5d4a42 100%);
}
.hero-product-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 60px;
	align-items: center;
	width: 100%;
}
.hero-product-copy { max-width: 560px; }
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 18px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
}
.hero-slide--offer .hero-badge { background: var(--bloom-rose); border-color: var(--bloom-rose); }
.hero-slide--hot .hero-badge svg { color: #F2B58C; }
.hero-product-title {
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.15;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hero-product-title a { color: inherit; text-decoration: none; }
.hero-product-cat {
	margin: 0 0 22px;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bloom-sage-light);
}
.hero-product-price { font-size: 1.9rem; font-weight: 600; color: #fff; margin: 0 0 6px; }
.hero-product-price del { font-size: 1.05rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); margin-right: 10px; }
.hero-product-price ins { text-decoration: none; }
.hero-product-price .woocommerce-Price-amount { color: inherit; }
.hero-product-ends { margin: 0 0 4px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.hero-product-copy .hero-actions { justify-content: flex-start; margin-top: 26px; }
/* Brand-green button would vanish on the green slide background: use white, like the CTA banner. */
.hero-slide--product .btn-primary { background: #fff; border-color: #fff; color: var(--bloom-forest); }
.hero-slide--product .btn-primary:hover { background: var(--bloom-sage-light); border-color: var(--bloom-sage-light); color: var(--bloom-forest); }
.hero-slide--product .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.hero-slide--product .btn-outline:hover { background: #fff; color: var(--bloom-forest); border-color: #fff; }
.hero-product-media {
	position: relative;
	justify-self: center;
	width: min(100%, 420px);
	aspect-ratio: 1 / 1;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 30px 60px rgba(20, 26, 15, 0.35);
	padding: 22px;
	display: block;
	transform: rotate(-2deg);
	transition: transform 0.5s ease;
}
.hero-product-media:hover { transform: rotate(0) scale(1.02); }
.hero-product-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; display: block; }
.hero-discount {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--sale-red);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
	transform: rotate(8deg);
}
.hero-discount span { font-size: 1.6rem; font-weight: 700; }
.hero-discount small { font-size: 0.72rem; letter-spacing: 0.18em; margin-top: 4px; }

/* Controls */
.hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--transition);
}
.hero-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.hero-arrow--prev { left: 24px; }
.hero-arrow--next { right: 24px; }
.hero-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 36px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.hero-dots { display: flex; gap: 10px; }
.hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 999px;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: width var(--transition), background var(--transition);
}
.hero-dot.is-active { width: 28px; background: #fff; }
.hero-pause {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.hero-pause .icon-play { display: none; }
.hero-pause.is-paused .icon-play { display: block; }
.hero-pause.is-paused .icon-pause { display: none; }

@media (max-width: 1024px) {
	.hero-arrow { display: none; }
	.hero-product-grid { gap: 36px; }
}
@media (max-width: 760px) {
	.hero-slide { padding: 56px 0 96px; }
	.hero--slider .hero-slide { padding-bottom: 96px; }
	.hero-product-grid { grid-template-columns: 1fr; gap: 26px; text-align: center; }
	.hero-product-media { order: -1; width: min(58%, 220px); padding: 12px; border-radius: 20px; }
	.hero-product-title { -webkit-line-clamp: 2; font-size: 1.7rem; }
	.hero-product-cat { margin-bottom: 14px; }
	.hero-discount { width: 70px; height: 70px; top: -12px; right: -14px; }
	.hero-discount span { font-size: 1.2rem; }
	.hero-product-copy { max-width: none; }
	.hero-product-copy .hero-actions { justify-content: center; }
	.hero-product-price { font-size: 1.5rem; }
	.hero-controls { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero--slider .hero-slide { transition: none; }
	.hero-product-media { transform: none; }
}


/* ==========================================================================
   Sale badges + prices — WooCommerce's woocommerce.css positions .onsale half outside
   the card (top/right -0.5em) as a 3.236em circle in olive #958e09, and colours prices
   the same olive. These selectors outrank it so badges sit inside the image as a
   brand-rose pill and prices use the brand green.
   ========================================================================== */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale,
ul.products li.product .onsale,
.woocommerce div.product span.onsale,
.woocommerce-page div.product span.onsale {
	position: absolute;
	top: 14px;
	right: 14px;
	left: auto;
	bottom: auto;
	margin: 0;
	min-width: 0;
	min-height: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--sale-red); /* white text on this red is about 4.6:1 */
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(63, 74, 50, 0.18);
	z-index: 3;
}
/* Single product: badge sits on the main gallery image, clear of the zoom icon (top right). */
.woocommerce div.product span.onsale,
.woocommerce-page div.product span.onsale {
	top: 18px;
	left: 18px;
	right: auto;
	font-size: 0.9rem;
	padding: 8px 14px;
}
div.product div.images.woocommerce-product-gallery { position: relative; }

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--bloom-forest);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce ul.products li.product .price del {
	color: var(--bloom-text-muted);
	opacity: 1;
	font-weight: 400;
	margin-right: 6px;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--bloom-forest);
	font-weight: 600;
}

/* ==========================================================================
   Store merchandising: compact product cards, promo tags, home product sections,
   category showcases and the shop category sidebar.
   ========================================================================== */
/* Denser cards: more products per screen, the way a busy store reads. */
ul.products { gap: 20px; }
ul.products li.product { border-radius: var(--radius); }
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 12px 14px 6px !important;
	min-height: calc(1.35em * 2);
	color: var(--bloom-text);
}
ul.products li.product .price { margin: 0 14px 10px !important; font-size: 1rem; }
ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins { color: var(--sale-red) !important; }
ul.products li.product .price del { font-size: 0.82rem; }
ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.added_to_cart {
	margin: 0 14px 14px !important;
	width: calc(100% - 28px);
	padding: 9px 14px;
	font-size: 0.82rem;
}
ul.products li.product .product-cat-label { font-size: 0.62rem; padding: 4px 9px; top: 10px; left: 10px; }

.promo-tag {
	display: inline-block;
	margin: 0 14px 6px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--sale-red);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.3;
}
.promo-tag--hot { background: #E8772E; }
.woocommerce div.product .single-promo-tag { margin: 0 0 10px; }

/* Out of stock: grey strip across the bottom of the card image. */
ul.products li.product .soldout-strip {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 0;
	pointer-events: none;
	z-index: 2;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: linear-gradient(transparent calc(100% - 30px), rgba(58, 63, 50, 0.78) calc(100% - 30px));
	line-height: 30px;
}

/* Home product sections */
.home-merch { padding: 80px 0 0; }
.home-merch + .home-merch { padding-top: 70px; }
.home-offers { padding-bottom: 10px; }
.home-merch .section-heading-row { align-items: center; margin-bottom: 28px; }
.home-merch h2 { margin-bottom: 0; }
.merch-flame { font-size: 0.85em; }
.merch-countdown {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: #FDECEA;
	color: #A3241B;
	font-size: 0.85rem;
	font-weight: 600;
}
.merch-countdown-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sale-red);
	animation: merch-pulse 1.6s ease-in-out infinite;
}
@keyframes merch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .merch-countdown-dot { animation: none; } }

/* Category showcases: photo tile + 4 products per row */
.home-showcases { padding: 90px 0 30px; }
.cat-showcase {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) 4fr;
	gap: 20px;
	margin-bottom: 26px;
}
.cat-showcase-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bloom-forest) center / cover no-repeat;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
.cat-showcase-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(63, 74, 50, 0) 30%, rgba(63, 74, 50, 0.92) 100%);
	transition: opacity var(--transition);
}
.cat-showcase-tile:hover::before { opacity: 0.85; }
.cat-showcase-copy { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; }
.cat-showcase-count { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bloom-sage-light); }
.cat-showcase-name { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.1; }
.cat-showcase-desc { font-size: 0.85rem; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.cat-showcase-cta { margin-top: 8px; font-size: 0.85rem; font-weight: 600; }

/* Shop & category archives: sidebar + products */
.shop-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.shop-sidebar { position: sticky; top: 110px; }
.shop-cats { border: 1px solid var(--bloom-border); border-radius: var(--radius); background: var(--bloom-ivory); }
.shop-cats summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 18px;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	color: var(--bloom-forest);
	border-bottom: 1px solid var(--bloom-border);
}
.shop-cats summary::-webkit-details-marker { display: none; }
.shop-cat-list, .shop-cat-children { list-style: none; margin: 0; padding: 0; }
.shop-cat-list { padding: 8px 0 12px; }
.shop-cat-list a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 18px;
	color: var(--bloom-text);
	text-decoration: none;
	font-size: 0.92rem;
	border-left: 3px solid transparent;
}
.shop-cat-list a:hover { background: var(--bloom-blush); color: var(--bloom-forest); }
.shop-cat-list .count { color: var(--bloom-text-muted); font-size: 0.8rem; }
.shop-cat-parent > a { font-weight: 600; }
.shop-cat-children a { padding-left: 32px; font-size: 0.88rem; }
.shop-cat-children { display: none; }
.shop-cat-parent.is-open > .shop-cat-children,
.shop-cat-parent.is-current > .shop-cat-children { display: block; }
.shop-cat-list li.is-current > a { background: var(--bloom-blush); color: var(--bloom-forest); font-weight: 600; border-left-color: var(--bloom-sage-dark); }
.shop-cat-offers > a { color: var(--sale-red); font-weight: 600; }
.shop-main ul.products { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) {
	.shop-main ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.cat-showcase { grid-template-columns: 1fr; }
	.cat-showcase-tile { min-height: 200px; }
	.cat-showcase-products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
	.shop-layout { grid-template-columns: 1fr; gap: 20px; }
	.shop-sidebar { position: static; }
	.shop-cats summary { display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; }
	.shop-cats summary::after { content: "+"; font-family: var(--font-body); font-size: 1.3rem; }
	.shop-cats[open] summary::after { content: "–"; }
	.shop-main ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	ul.products { gap: 12px; }
	ul.products li.product .woocommerce-loop-product__title { font-size: 0.85rem; margin: 10px 10px 4px !important; }
	ul.products li.product .price { margin: 0 10px 8px !important; font-size: 0.92rem; }
	.promo-tag { margin: 0 10px 5px; }
	ul.products li.product .button, ul.products li.product a.add_to_cart_button { margin: 0 10px 10px !important; width: calc(100% - 20px); }
	.home-merch .section-heading-row { align-items: center; gap: 10px; }
}

/* Cards as a column: details grow, so "Add to Cart" lines up along the bottom of every row. */
ul.products li.product { display: flex !important; flex-direction: column; }
ul.products li.product a.woocommerce-LoopProduct-link { flex: 1 1 auto; display: flex; flex-direction: column; }
ul.products li.product a.woocommerce-LoopProduct-link .price { margin-top: auto !important; }
/* Promo tag on its own line, directly above the price. */
ul.products li.product .promo-tag { display: table; align-self: flex-start; }
/* Long category names stop short of the discount badge instead of running under it. */
ul.products li.product .product-cat-label {
	max-width: calc(100% - 20px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
ul.products li.product:has(.onsale) .product-cat-label { max-width: calc(100% - 84px); }
@media (max-width: 560px) {
	ul.products li.product .onsale { top: 8px !important; right: 8px !important; padding: 4px 8px !important; font-size: 0.68rem !important; }
	ul.products li.product .product-cat-label { top: 8px; left: 8px; font-size: 0.58rem; }
	ul.products li.product:has(.onsale) .product-cat-label { max-width: calc(100% - 66px); }
}


/* Value / trust card icons: consistent size inside a soft round badge (About + homepage). */
.value-card svg {
	width: 28px;
	height: 28px;
	box-sizing: content-box;
	padding: 16px;
	margin: 0 auto 18px;
	display: block;
	border-radius: 50%;
	background: var(--bloom-blush-2);
	color: var(--bloom-rose);
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.value-card:hover svg { background: var(--bloom-forest); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   My Account refresh: menu icons, dashboard cards, address cards, form fields,
   and the logged-out welcome panel beside the Login / Register card.
   ========================================================================== */
.woocommerce-account .woocommerce a { text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content p a:not(.button):not(.btn) { text-decoration: underline; }

/* Menu: icon + label, no underline, clear active state */
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	font-weight: 500;
	text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background: currentColor;
	opacity: 0.8;
	-webkit-mask: var(--acct-icon) center / contain no-repeat;
	mask: var(--acct-icon) center / contain no-repeat;
}
.woocommerce-MyAccount-navigation-link--dashboard { --acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders { --acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address { --acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account { --acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout { --acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--bloom-text-muted); }

/* Dashboard */
.account-welcome {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 28px 32px;
	margin-bottom: 24px;
	border-radius: var(--radius-lg);
	background: linear-gradient(120deg, var(--bloom-forest), var(--bloom-forest-light));
	color: #fff;
}
.account-welcome .section-eyebrow { color: var(--bloom-sage-light); margin-bottom: 6px; }
.account-welcome h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.account-welcome p { margin: 0; color: rgba(255, 255, 255, 0.82); }
.account-welcome .account-logout { flex-shrink: 0; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.account-welcome .account-logout:hover { background: #fff; color: var(--bloom-forest); }
.account-last-order {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	margin-bottom: 24px;
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius);
	background: var(--bloom-ivory);
}
.account-last-order > div { display: flex; flex-direction: column; gap: 2px; }
.account-last-order-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bloom-text-muted); }
.account-order-status { padding: 5px 12px; border-radius: 999px; background: var(--bloom-sage-light); color: var(--bloom-forest); font-size: 0.8rem; font-weight: 600; }
.account-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.account-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	padding: 20px 22px;
	border: 1px solid var(--bloom-border);
	border-radius: var(--radius);
	background: var(--bloom-ivory);
	color: var(--bloom-text);
	text-decoration: none !important;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.account-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--bloom-sage); }
.account-card-icon {
	grid-row: span 2;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bloom-blush-2);
	color: var(--bloom-rose);
}
.account-card-title { font-weight: 600; color: var(--bloom-forest); align-self: end; }
.account-card-text { font-size: 0.88rem; color: var(--bloom-text-muted); align-self: start; }
.account-card--offer .account-card-icon { background: #FDECEA; color: var(--sale-red); }

/* Form fields: one consistent style across login, register, account details, addresses */
.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce form select,
.woocommerce-account .woocommerce form textarea,
.woocommerce-account .woocommerce form input[type="email"],
.woocommerce-account .woocommerce form input[type="password"],
.woocommerce-account .woocommerce form input[type="tel"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bloom-border) !important;
	border-radius: 8px;
	background: #fff;
	color: var(--bloom-text);
	font-family: inherit;
	font-size: 0.95rem;
	box-shadow: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.woocommerce-account .woocommerce form .input-text:focus,
.woocommerce-account .woocommerce form select:focus,
.woocommerce-account .woocommerce form textarea:focus {
	outline: none;
	border-color: var(--bloom-sage-dark) !important;
	box-shadow: 0 0 0 3px rgba(140, 168, 107, 0.18);
}
.woocommerce-account .woocommerce form label { font-size: 0.88rem; font-weight: 500; color: var(--bloom-text); margin-bottom: 6px; display: block; }
.woocommerce-account .woocommerce form .required { color: var(--sale-red); text-decoration: none; }
.woocommerce-account .woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce-account #account_display_name_description,
.woocommerce-account .woocommerce form em { display: block; margin-top: 6px; font-size: 0.8rem; font-style: normal; color: var(--bloom-text-muted); }

/* Account details: solid primary Save button, spaced below the card */
.woocommerce-EditAccountForm button.account-save-btn {
	margin-top: 20px;
	padding: 13px 34px !important;
	background: var(--bloom-forest) !important;
	color: #fff !important;
	border: 2px solid var(--bloom-forest) !important;
	border-radius: 999px;
}
.woocommerce-EditAccountForm button.account-save-btn:hover { background: var(--bloom-forest-light) !important; border-color: var(--bloom-forest-light) !important; }

/* Addresses: two cards side by side */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.woocommerce-account .woocommerce-Addresses::before, .woocommerce-account .woocommerce-Addresses::after { content: none; }
.woocommerce-Address + .woocommerce-Address { margin-top: 0; }
.woocommerce-Address { border: 1px solid var(--bloom-border); border-radius: var(--radius); background: var(--bloom-ivory); overflow: hidden; }
.woocommerce-Address-heading { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--bloom-border); background: var(--bloom-blush); font-size: 1.15rem; }
.woocommerce-Address-box { border: 0; padding: 18px 20px 20px; }
.woocommerce-Address-box .edit {
	display: inline-flex;
	margin: 0 0 12px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--bloom-forest);
	color: var(--bloom-forest);
	font-size: 0.85rem;
}
.woocommerce-Address-box .edit:hover { background: var(--bloom-forest); color: #fff; }
.woocommerce-Address-box p, .woocommerce-Address address { margin: 0; color: var(--bloom-text-muted); }

/* Notices inside account content */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button { text-decoration: none !important; }

/* Logged out: welcome panel + Login / Register card */
.account-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	max-width: 1120px;
	margin: 24px auto 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--bloom-ivory);
}
.account-auth-intro {
	padding: 56px 48px;
	color: #fff;
	background: linear-gradient(180deg, rgba(63, 74, 50, 0.72), rgba(63, 74, 50, 0.92)),
		url("../images/home/tile-skincare.jpg") center / cover no-repeat,
		var(--bloom-forest);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.account-auth-intro .section-eyebrow { color: var(--bloom-sage-light); }
.account-auth-intro h2 { color: #fff; margin: 0 0 12px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.15; }
.account-auth-intro p { color: rgba(255, 255, 255, 0.85); margin: 0 0 22px; }
.account-auth-benefits { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 12px; }
.account-auth-benefits li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; }
.account-auth-benefits li::before {
	content: "";
	flex: 0 0 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.account-auth-forms { display: flex; align-items: center; padding: 40px; }
.account-auth-forms #customer_login.u-columns { width: 100%; max-width: none; }
.account-auth-forms .u-column1.col-1,
.account-auth-forms .u-column2.col-2 { border: 0; box-shadow: none; background: transparent; }
.account-auth-forms .u-column1.col-1 h2,
.account-auth-forms .u-column2.col-2 h2 {
	padding: 0 0 4px;
	background: none;
	border: 0;
	font-family: var(--font-heading);
	font-size: 1.9rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bloom-forest);
}
.account-auth-forms .u-column1.col-1 form,
.account-auth-forms .u-column2.col-2 form { padding: 18px 0 0; }
.woocommerce-LostPassword.lost_password { margin: 14px 0 0; text-align: center; }
.woocommerce-LostPassword.lost_password a { font-size: 0.88rem; }
.account-switch { text-align: center; }
.woocommerce-privacy-policy-text { font-size: 0.8rem; color: var(--bloom-text-muted); }

@media (max-width: 860px) {
	.account-auth { grid-template-columns: 1fr; }
	.account-auth-intro { padding: 36px 28px; }
	.account-auth-forms { padding: 28px 24px 32px; }
	.account-cards { grid-template-columns: 1fr; }
	.account-welcome { flex-direction: column; align-items: flex-start; padding: 24px; }
	.account-last-order { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}
/* Account polish: these links are buttons, so no underline and fixed colours. */
.woocommerce-account .account-welcome a.account-logout { color: #fff !important; text-decoration: none !important; }
.woocommerce-account .account-welcome a.account-logout:hover { color: var(--bloom-forest) !important; }
.woocommerce-account .woocommerce-Address-box a.edit { text-decoration: none !important; }
.woocommerce-account .woocommerce-Address + .woocommerce-Address { margin-top: 16px; }

/* Footer on phones: one column, and long email/address lines wrap instead of running off-screen. */
.footer-contact-list li, .footer-contact-list a { overflow-wrap: anywhere; }
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr !important; gap: 32px; }
}

/* Cart / checkout blocks: discounted prices in sale red, matching the shop cards */
.wc-block-components-product-price__value.is-discounted,
.wc-block-cart-item__total .wc-block-components-product-price__value,
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price__value { color: var(--sale-red); font-weight: 600; }
.wc-block-components-product-price__regular { color: var(--bloom-text-muted); opacity: 1; }
.wc-block-components-sale-badge {
	color: var(--sale-red) !important;
	background: #FDECEA !important;
	border: 1px solid rgba(217, 48, 37, 0.25) !important;
	border-radius: 999px !important;
	font-weight: 600;
	padding: 2px 10px !important;
}

/* Homepage "Why Choose Aura Vita?": same cards as "Partner With Aura Vita", four across */
.home-why { padding: 90px 0; background: transparent; }
.home-why .testimonial-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .home-why .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-why .testimonial-grid { grid-template-columns: 1fr; } }

/* Inner-page banner v2: breadcrumb inside, left-aligned copy, optional photo card + info chips */
.page-banner {
	position: relative;
	overflow: hidden;
	text-align: left;
	padding: 56px 0 64px;
	background:
		radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.08), transparent 38%),
		linear-gradient(120deg, #343e2b 0%, var(--bloom-forest) 55%, var(--bloom-forest-light) 100%);
}
.page-banner::after { /* soft concentric rings, decorative */
	content: "";
	position: absolute;
	right: -140px;
	bottom: -220px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	pointer-events: none;
}
.page-banner::before {
	content: "";
	position: absolute;
	right: -240px;
	bottom: -320px;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.07);
	pointer-events: none;
}
.page-banner-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.page-banner--media .page-banner-grid { grid-template-columns: 1.15fr 0.85fr; }
.page-banner .bloom-breadcrumb { padding: 0 0 36px; color: rgba(255, 255, 255, 0.6); }
.page-banner .bloom-breadcrumb a { color: rgba(255, 255, 255, 0.75); }
.page-banner .bloom-breadcrumb a:hover { color: #fff; }
.page-banner .section-eyebrow { color: var(--bloom-sage-light); margin-bottom: 12px; }
.page-banner h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; margin: 0 0 18px; }
.page-banner .page-banner-lead { max-width: 560px; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; line-height: 1.7; }
.page-banner-chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.page-banner-chips li {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 0.86rem;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
}
.page-banner-chips svg { color: var(--bloom-sage-light); flex: 0 0 auto; }
.page-banner-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	background: center / cover no-repeat var(--bloom-sage);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	outline: 1px solid rgba(255, 255, 255, 0.18);
	outline-offset: 10px;
}
@media (max-width: 860px) {
	.page-banner { padding: 36px 0 48px; }
	.page-banner--media .page-banner-grid { grid-template-columns: 1fr; gap: 36px; }
	.page-banner .bloom-breadcrumb { padding-bottom: 24px; }
	.page-banner-media { aspect-ratio: 16 / 9; outline-offset: 6px; }
}

/* Hero campaign slides: three-product collage beside the copy */
.hero-slide--product .hero-product-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.hero-product-title { -webkit-line-clamp: unset; display: block; }
.hero-product-title em { font-style: normal; color: #FFC9BD; }
.hero-product-lead { color: rgba(255, 255, 255, 0.82); font-size: 1.02rem; line-height: 1.7; margin: 0 0 16px; max-width: 470px; }
.hero-product-ends { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.18); font-size: 0.86rem; }
.hero-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.hero-pcard-price { margin-top: auto; }
.hero-collage--1 { grid-template-columns: minmax(0, 260px); justify-content: center; }
.hero-collage--2 { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; }
.hero-pcard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 12px 16px;
	border-radius: 20px;
	background: #fff;
	color: var(--bloom-forest);
	text-decoration: none;
	box-shadow: 0 24px 50px rgba(15, 20, 10, 0.32);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.hero-collage--3 .hero-pcard:nth-child(2) { transform: translateY(-22px); }
.hero-pcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(15, 20, 10, 0.4); }
.hero-collage--3 .hero-pcard:nth-child(2):hover { transform: translateY(-28px); }
.hero-pcard-img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: 6px; }
.hero-pcard-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-pcard-off {
	position: absolute; top: 8px; left: 8px;
	padding: 4px 9px; border-radius: 999px;
	background: var(--sale-red); color: #fff;
	font-size: 0.78rem; font-weight: 700; line-height: 1.2;
}
.hero-pcard-name {
	font-size: 0.86rem; line-height: 1.35; font-weight: 500; color: var(--bloom-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.7em;
}
.hero-pcard-price { font-size: 0.98rem; font-weight: 600; color: var(--bloom-forest); }
.hero-pcard-price del { font-size: 0.8rem; font-weight: 400; color: var(--bloom-text-muted); margin-right: 4px; }
.hero-pcard-price ins { text-decoration: none; color: var(--sale-red); }
.hero-pcard-price .woocommerce-Price-amount { color: inherit; }
@media (max-width: 860px) {
	.hero-slide--product .hero-product-grid { grid-template-columns: 1fr; gap: 30px; }
	.hero-collage { order: -1; gap: 10px; }
	.hero-collage--3 .hero-pcard:nth-child(2) { transform: translateY(-10px); }
	.hero-pcard { padding: 8px 8px 10px; border-radius: 14px; }
	.hero-pcard-name { font-size: 0.74rem; }
	.hero-pcard-price { font-size: 0.82rem; }
	.hero-pcard-price del { display: none; }
	.hero-product-lead { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-pcard, .hero-pcard:hover { transition: none; }
}