/* ==========================================================================
   Emily H&B — WooCommerce mapping
   --------------------------------------------------------------------------
   assets/css/components.css defines the primitives. This file points
   WooCommerce and Kadence markup at them, so the shop renders as designed
   without rebuilding any Woo template.

   SCOPE NOTE, from the Figma file (four separate frames carry this warning):

     Cart and Checkout are built with WooCommerce's standard Cart/Checkout
     Blocks. Block order, field placement, step flow and grid structure are
     platform defaults.
       Customisable:     colour, type, corner radius, spacing, copy, icons
       NOT customisable: block order, field structure, step flow

   Everything below stays inside that line. If a rule here starts reordering
   or restructuring Woo blocks, it is out of scope and belongs in a
   conversation with the client, not in this file.

   Selectors are written against WooCommerce 8.x/9.x block and classic markup.
   They have not been verified against the live staging install — check them
   in the browser during the QA pass and adjust rather than adding !important.
   ========================================================================== */

/* ==========================================================================
   Buttons
   Every Woo and Gutenberg button takes the primary pill.
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	background: var(--ehb-brand-orchid);
	border: 0;
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-button);
	line-height: 1;
	letter-spacing: var(--ehb-ls-label-button);
	text-indent: var(--ehb-ls-label-button);
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	text-decoration: none;
	transition: background-color 150ms ease-out;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.wc-block-components-button:focus-visible {
	background: var(--ehb-brand-rose-plum);
	color: var(--ehb-text-on-dark);
}

.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.wc-block-components-button:disabled {
	background: var(--ehb-line-strong);
	color: var(--ehb-text-muted);
	cursor: not-allowed;
}

/* Woo's secondary actions — "Continue shopping", "Update cart" — take the
   outlined variant so the primary action on the page stays singular. */
.woocommerce a.button.wc-backward,
.woocommerce button[name='update_cart'],
.wc-block-components-button.outlined {
	background: transparent;
	color: var(--ehb-brand-rose-plum);
	box-shadow: inset 0 0 0 1.5px var(--ehb-brand-rose-plum);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button[name='update_cart']:hover,
.wc-block-components-button.outlined:hover {
	background: var(--ehb-surface-blush);
	color: var(--ehb-brand-rose-plum);
}

/* ==========================================================================
   Product loop card — Figma "Product Card"
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-post-template li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: var(--ehb-radius-lg);
	overflow: hidden;
	position: relative;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover,
.wp-block-post-template li.product:hover {
	border-color: var(--ehb-line-strong);
	box-shadow: 0 8px 28px rgba(36, 18, 31, 0.1);
}

/* The tinted well behind the packshot. Lilac is the Health default; the
   Beauty tint is applied by product category — see the body/term class
   below, which must be emitted by the archive template. */
.woocommerce ul.products li.product a.woocommerce-loop-image-link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:first-child,
.wc-block-grid__product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 5;
	flex-shrink: 0;
	/* Figma card image well 360×450 */
	background: var(--ehb-surface-lilac);
	padding: var(--ehb-space-12);
	box-sizing: border-box;
	margin: 0;
	position: relative;
	overflow: hidden;
}

.woocommerce ul.products li.product a.woocommerce-loop-image-link img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:first-child img,
.wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	background: transparent;
	padding: 0;
	margin: 0;
	object-fit: contain;
}

/* Two-sided product-card flip. The main packshot is the front; the first
   gallery image is a full-bleed back face. Both faces remain opaque through
   the turn, so the tinted image-well never flashes through.
   Only applied to product cards that actually contain a gallery hover image (.ehb-hover-img). */
:is(.woocommerce ul.products li.product a.woocommerce-loop-image-link,
	.woocommerce ul.products li.product a.woocommerce-loop-product__link,
	.wc-block-grid__product-image,
	.wc-block-components-product-image):has(.ehb-hover-img) {
	perspective: 900px;
	transform-style: preserve-3d;
}

:is(.woocommerce ul.products li.product a.woocommerce-loop-image-link,
	.woocommerce ul.products li.product a.woocommerce-loop-product__link,
	.wc-block-grid__product-image,
	.wc-block-components-product-image):has(.ehb-hover-img) img:not(.ehb-hover-img) {
	transform: rotateY(0deg);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
}

:is(.woocommerce ul.products li.product a.woocommerce-loop-image-link,
	.woocommerce ul.products li.product a.woocommerce-loop-product__link,
	.wc-block-grid__product-image,
	.wc-block-components-product-image) img.ehb-hover-img {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--ehb-space-12);
	box-sizing: border-box;
	object-fit: contain;
	object-position: center;
	background: transparent;
	opacity: 1;
	transform: rotateY(180deg);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;
}

:is(.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:focus-within,
	.wc-block-grid__product:hover,
	.wc-block-grid__product:focus-within,
	.wp-block-post:hover,
	.wp-block-post:focus-within) :is(.woocommerce-loop-image-link,
	.woocommerce-loop-product__link,
	.wc-block-grid__product-image,
	.wc-block-components-product-image):has(.ehb-hover-img) img:not(.ehb-hover-img) {
	transform: rotateY(-180deg);
}

:is(.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:focus-within,
	.wc-block-grid__product:hover,
	.wc-block-grid__product:focus-within,
	.wp-block-post:hover,
	.wp-block-post:focus-within) :is(.woocommerce-loop-image-link,
	.woocommerce-loop-product__link,
	.wc-block-grid__product-image,
	.wc-block-components-product-image):has(.ehb-hover-img) img.ehb-hover-img {
	transform: rotateY(0deg);
}

@media (prefers-reduced-motion: reduce) {

	:is(.woocommerce ul.products li.product a.woocommerce-loop-image-link,
		.woocommerce ul.products li.product a.woocommerce-loop-product__link,
		.wc-block-grid__product-image,
		.wc-block-components-product-image):has(.ehb-hover-img) img {
		transition: none;
	}
}

/* Out of stock packshot is dimmed in Figma (opacity 0.45) */
.woocommerce ul.products li.product.outofstock a img,
.woocommerce ul.products li.product.outofstock .attachment-woocommerce_thumbnail {
	opacity: 0.45;
}

:is(.woocommerce ul.products li.product.ehb-beauty,
	.woocommerce ul.products li.product.ehb-product--skincare,
	.woocommerce ul.products li.product.product_cat-skincare,
	.woocommerce ul.products li.product.product_cat-beauty,
	.woocommerce ul.products li.product.product_cat-beauty-skin,
	ul.products li.product.ehb-product--skincare,
	ul.products li.product.product_cat-skincare,
	ul.products li.product.product_cat-beauty,
	ul.products li.product.product_cat-beauty-skin,
	li.product.ehb-product--skincare,
	li.product.product_cat-skincare) :is(a.woocommerce-loop-image-link,
	a.woocommerce-LoopProduct-link,
	a.woocommerce-loop-product__link:first-child,
	.wc-block-grid__product-image) {
	background: var(--ehb-surface-blush);
}

:is(.woocommerce ul.products li.product.ehb-product--vitamins,
	.woocommerce ul.products li.product.product_cat-vitamins,
	ul.products li.product.ehb-product--vitamins,
	ul.products li.product.product_cat-vitamins,
	li.product.ehb-product--vitamins,
	li.product.product_cat-vitamins) :is(a.woocommerce-loop-image-link,
	a.woocommerce-LoopProduct-link,
	a.woocommerce-loop-product__link:first-child,
	.wc-block-grid__product-image) {
	background: var(--ehb-surface-lilac);
}

.woocommerce ul.products li.product .product-details {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 7px;
	padding: 16px 16px 18px;
	background: transparent;
	margin: 0;
}

.woocommerce ul.products li.product .ehb-card-eyebrow {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--ehb-brand-rose-plum);
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product>.ehb-card-eyebrow {
	padding: 16px 16px 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: var(--ehb-text-ink);
	text-decoration: none;
}

.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--ehb-space-8);
	padding: 0;
	margin: 0;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-semibold);
	font-size: 16px;
	line-height: 22px;
	font-variant-numeric: tabular-nums;
	color: var(--ehb-text-ink);
}

.woocommerce ul.products li.product .price del {
	display: inline;
	font-weight: var(--ehb-weight-regular);
	color: var(--ehb-text-muted);
	opacity: 1;
}

.woocommerce ul.products li.product .price ins {
	background: transparent;
	color: var(--ehb-text-ink);
	text-decoration: none;
}

/* Canonical product-card rhythm for both classic Woo loops (Shop/related)
   and Product Query blocks (Home/Centres). These render different markup but
   must look like one component. */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li.product {
	padding-bottom: 18px;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid :is(.ehb-product-card__concern, .wp-block-post-title) {
	padding-inline: 16px;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button {
	width: 100%;
	padding-inline: 16px;
	margin-top: auto;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button__button {
	width: 100%;
	min-height: 41px;
	padding: 13px 8px;
	border-radius: var(--ehb-radius-pill);
}

:is(.woocommerce ul.products li.product, .ehb-product-grid li.product) :is(.price, .wc-block-components-product-price) del {
	font-weight: var(--ehb-weight-regular);
	color: var(--ehb-text-muted);
	opacity: 1;
}

:is(.woocommerce ul.products li.product, .ehb-product-grid li.product) :is(.price, .wc-block-components-product-price) ins {
	font-weight: var(--ehb-weight-semibold);
	color: var(--ehb-text-ink);
	background: transparent;
	text-decoration: none;
}

.woocommerce ul.products li.product .price .ehb-price-suffix {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
}

/* Hide card excerpt on product grid */
.woocommerce ul.products li.product .product-excerpt {
	display: none;
}

/* Product action button — always visible pill */
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap,
.woocommerce ul.products li.product .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .product-action-wrap {
	display: block;
	position: static;
	opacity: 1;
	visibility: visible;
	bottom: auto;
	margin-top: auto;
	padding: 8px 0 0;
	width: 100%;
	transform: none;
}

.woocommerce ul.products.woo-archive-action-on-hover li.product .entry-content-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .entry-content-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:focus-within .entry-content-wrap,
.woocommerce ul.products li.product .entry-content-wrap {
	transform: none;
	transition: none;
}

.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap .button,
.woocommerce ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 13px var(--ehb-space-8);
	margin: 0;
	background: var(--ehb-brand-orchid);
	border: 0;
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.48px;
	text-indent: 0.48px;
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

/* Prevent Kadence from resetting font-size to 0 or showing checkmark SVG on .added */
body.woocommerce ul.products.woo-archive-btn-button li.product .button.added,
body.woocommerce ul.products li.woo-archive-btn-button .button.added,
body.woocommerce ul.products li.product .button.added {
	font-size: 12px;
	line-height: 15px;
	height: auto;
	padding: 13px var(--ehb-space-8);
	opacity: 1;
}

body.woocommerce ul.products li.product .button .kadence-spinner-svg,
body.woocommerce ul.products li.product .button .kadence-check-svg,
body.woocommerce ul.products li.product .button .kadence-svg-iconset {
	display: none;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible {
	background: var(--ehb-brand-rose-plum);
	color: var(--ehb-text-on-dark);
}

/* Out of stock card button variant: Raised pill with subtle border and muted text — Figma 192:863 */
.woocommerce ul.products.woo-archive-action-on-hover li.product.outofstock .product-action-wrap .button,
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap .button.ehb-button--outofstock,
.woocommerce ul.products li.product.outofstock .button,
.woocommerce ul.products li.product .button.ehb-button--outofstock {
	background: var(--ehb-surface-raised);
	border: 1px solid var(--ehb-line-subtle);
	color: var(--ehb-text-muted);
}

.woocommerce ul.products.woo-archive-action-on-hover li.product.outofstock .product-action-wrap .button:hover,
.woocommerce ul.products.woo-archive-action-on-hover li.product.outofstock .product-action-wrap .button:focus-visible,
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap .button.ehb-button--outofstock:hover,
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap .button.ehb-button--outofstock:focus-visible,
.woocommerce ul.products li.product.outofstock .button:hover,
.woocommerce ul.products li.product.outofstock .button:focus-visible,
.woocommerce ul.products li.product .button.ehb-button--outofstock:hover,
.woocommerce ul.products li.product .button.ehb-button--outofstock:focus-visible {
	background: var(--ehb-surface-blush);
	border-color: var(--ehb-brand-rose-plum);
	color: var(--ehb-brand-rose-plum);
}

/* Hide Kadence inline SVG icons inside loop button */
.woocommerce ul.products li.product .button .kadence-svg-iconset {
	display: none;
}

/* ==========================================================================
   Badges — Figma "Badge"
   Woo only ships the sale flash. The other five states are emitted by the
   theme in the component pass that follows; the classes are defined here so
   both sources land on the same pill.
   ========================================================================== */

.woocommerce ul.products li.product span.onsale,
.woocommerce ul.products li.product .ehb-stock-badge,
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	position: absolute;
	top: var(--ehb-space-12);
	left: var(--ehb-space-12);
	right: auto;
	inset-inline-start: var(--ehb-space-12);
	inset-inline-end: auto;
	min-height: 0;
	min-width: 0;
	padding: var(--ehb-space-4) var(--ehb-space-8);
	background: var(--ehb-status-sale);
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-badge);
	line-height: var(--ehb-lh-label-badge);
	letter-spacing: var(--ehb-ls-label-badge);
	text-indent: var(--ehb-ls-label-badge);
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	margin: 0;
	z-index: 2;
}

/* ==========================================================================
   Star rating & Card Review row — Figma 192:835
   ========================================================================== */

.woocommerce ul.products li.product .star-rating {
	display: none;
}

.ehb-card-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
	text-align: left;
}

.ehb-card-rating .ehb-card-rating__stars {
	font-size: 12px;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--ehb-text-muted);
}

.ehb-card-rating .ehb-card-rating__text {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
	white-space: nowrap;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--ehb-brand-magenta);
}

.woocommerce .woocommerce-review-link {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-caption);
	color: var(--ehb-text-muted);
	text-decoration: none;
}

/* ==========================================================================
   Single Product (PDP) — Figma 194:81 (Desktop 1440) & 212:726 (Mobile 390)
   ========================================================================== */

/* Outer container resets for full-bleed sections */
.single-product .content-container.site-container {
	max-width: 100%;
	width: 100%;
	padding-inline: 0;
}

.single-product #primary.content-area {
	max-width: 100%;
	width: 100%;
	padding-inline: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.single-product div.product {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Hide floating sale flash and default meta */
.single-product span.onsale,
.single-product .onsale,
.single-product .product_meta,
.single-product p.stock {
	display: none;
}

/* Product Top row: fixed 480px buy box, gallery takes whatever the container
   leaves. The old 660 + 480 pair was sized for the 1200px container; once the
   site moved to 1440 (AGENTS.md §7 "Container: một con số duy nhất") the two
   fixed columns stopped reaching the edges and left ~300px dead in the middle. */
.single-product .ehb-pdp-top-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
	align-items: start;
	gap: 60px;
	width: 100%;
	/* Gutter included in the cap, unconditionally: with a bare 1440 max-width
	   and no padding, a 1497 window gave this row 28px sides while every other
	   section had the page's 40px gutter. */
	max-width: calc(var(--ehb-content-width, 1200px) + 2 * var(--ehb-gutter));
	margin-inline: auto;
	padding-inline: var(--ehb-gutter);
	padding-top: 56px;
	padding-bottom: 0;
	box-sizing: border-box;
}

/* .woocommerce-product-gallery.images: WooCommerce core's own
   ".woocommerce div.product div.images { width: 48% }" is (0,3,2); without the
   extra .images qualifier the 48% wins and the gallery keeps only half its
   grid column (measured 355px of 740). Same trap as the tablet block below. */
.single-product .ehb-pdp-top-wrapper .woocommerce-product-gallery.images,
.single-product .ehb-pdp-top-wrapper .summary.entry-summary {
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

/* Gallery main image (660x560px, blush #f7eaf1, radius 14px, centered packshot 300x382px) */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Height stays fixed on purpose — content.css pins every slide to 560 so the
	   page does not jump when a square infographic is selected. */
	width: 100%;
	height: 560px;
	min-height: 560px;
	background: var(--ehb-surface-lilac, #f0e8f6);
	border-radius: 14px;
	overflow: hidden;
	box-sizing: border-box;
}

/* Skincare PDP gallery image well */
:is(body.ehb-pdp--skincare,
	body.product_cat-skincare,
	body.product_cat-beauty,
	body.product_cat-beauty-skin,
	.single-product .product.product_cat-skincare,
	.single-product .product.ehb-product--skincare) :is(.woocommerce-product-gallery .woocommerce-product-gallery__image,
	.ehb-pdp-top-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__image) {
	background: var(--ehb-surface-blush, #f7eaf1);
}

/* Vitamins PDP gallery image well */
:is(body.ehb-pdp--vitamins,
	body.product_cat-vitamins,
	.single-product .product.product_cat-vitamins,
	.single-product .product.ehb-product--vitamins) :is(.woocommerce-product-gallery .woocommerce-product-gallery__image,
	.ehb-pdp-top-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__image) {
	background: var(--ehb-surface-lilac, #f0e8f6);
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	/* Figma packshot is 300 of a 660 well; as a ratio it keeps that proportion
	   now the well grows with the column. */
	max-width: 45%;
	max-height: 382px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: auto;
	display: block;
}

.single-product .woocommerce-product-gallery__trigger {
	display: none;
}

/* Thumbnails (Figma 194:157: 4 items, 100px height, radius 8px, active border 2px solid magenta) */
.ehb-pdp-thumbnails {
	display: flex;
	gap: 14px;
	width: 660px;
	margin-top: 16px;
	margin-bottom: 0;
	padding: 0;
	box-sizing: border-box;
}

.ehb-pdp-thumb {
	flex: 0 0 calc((660px - 42px) / 4);
	width: calc((660px - 42px) / 4);
	max-width: 155px;
	height: 100px;
	background: var(--ehb-surface-raised, #fbf7fa);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color 150ms ease;
}

.ehb-pdp-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ehb-pdp-thumb--active {
	border: 2px solid var(--ehb-brand-magenta, #b93c7b);
	background: #ffffff;
}

/* Buy box styling */
.single-product div.summary .ehb-pdp-eyebrow {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--ehb-brand-magenta, #b93c7b);
	margin: 0 0 10px 0;
}

.single-product div.summary .product_title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.6px;
	color: var(--ehb-text-ink);
	margin: 0 0 16px 0;
}

.single-product div.summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px 0;
	font-size: 14px;
	color: var(--ehb-brand-magenta, #b93c7b);
}

.single-product div.summary .woocommerce-product-rating .star-rating {
	color: var(--ehb-brand-magenta, #b93c7b);
	font-size: 14px;
}

.single-product div.summary .woocommerce-product-rating .woocommerce-review-link {
	font-family: var(--ehb-font-body);
	font-size: 12px;
	color: var(--ehb-text-muted);
}

.single-product div.summary p.price,
.single-product div.summary span.price {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.28px;
	font-variant-numeric: tabular-nums;
	color: var(--ehb-text-ink);
	margin: 0 0 4px 0;
}

.single-product div.summary p.price del {
	font-weight: 400;
	font-size: var(--ehb-size-body-small);
	color: var(--ehb-text-muted);
}

.single-product div.summary p.price ins {
	background: transparent;
	color: var(--ehb-status-sale);
	text-decoration: none;
}

.single-product div.summary .ehb-pdp-tax-note {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	margin: 0 0 20px 0;
}

.single-product div.summary .ehb-tiered-offer {
	background: var(--ehb-surface-lilac, #f0e8f6);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: 8px;
	padding: 16px 18px;
	margin: 0 0 20px 0;
	box-sizing: border-box;
}

:is(body.ehb-pdp--skincare,
	body.product_cat-skincare,
	body.product_cat-beauty,
	body.product_cat-beauty-skin,
	.single-product .product.product_cat-skincare,
	.single-product .product.ehb-product--skincare) div.summary .ehb-tiered-offer {
	background: var(--ehb-surface-blush, #f7eaf1);
}

:is(body.ehb-pdp--vitamins,
	body.product_cat-vitamins,
	.single-product .product.product_cat-vitamins,
	.single-product .product.ehb-product--vitamins) div.summary .ehb-tiered-offer {
	background: var(--ehb-surface-lilac, #f0e8f6);
}

.single-product div.summary .ehb-tiered-offer__title {
	display: block;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
	margin: 0 0 6px 0;
}

.single-product div.summary .ehb-tiered-offer__copy {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body, #3d2c36);
	margin: 0;
}

/* Quantity Stepper & Add to Cart button row. Capped: the buy box column is
   fluid now, and an unbounded ADD TO CART reads as a banner, not a button. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	max-width: 520px;
	margin: 0 0 16px 0;
}

/* "Simple Tiered Pricing Table" (anhqui-tiermatrix-for-woocommerce, F3, 29/09/2026)
   injects its table via woocommerce_before_add_to_cart_button, which lands
   inside this exact <form>, alongside the qty stepper and button — this row
   was never meant to hold anything but that pair, so the table got squeezed
   into it as a flex item and clipped the button ("D TO CA"). Force it onto its
   own full-width line above them regardless of where in the form it renders. */
.woocommerce div.product form.cart .stp-pricing-wrapper {
	order: -1;
	flex: 1 0 100%;
	max-width: none;
	margin-block-end: 6px;
}

/* Tier table: equal cell insets and a full-width row above the buy controls.
   Leave the plugin's tier selection, prices and selected-summary state intact. */
.woocommerce div.product form.cart .stp-table-wrap {
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce div.product form.cart .stp-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-family: var(--ehb-font-body);
}

.woocommerce div.product form.cart .stp-table :is(th, td) {
	padding: 12px 16px;
	vertical-align: middle;
	border-inline: 0;
}

.woocommerce div.product form.cart .stp-table :is(th, td):first-child {
	text-align: left;
}

.woocommerce div.product form.cart .stp-table :is(th, td):last-child {
	text-align: right;
}

/* "✓ You Save $X per unit" badge next to qty — client asked to remove it (08/10/2026),
   the Mức đã chọn / Giá của bạn row in .stp-selected-summary already says the same thing. */
.woocommerce div.product form.cart .stp-you-save {
	display: none;
}

.woocommerce div.product form.cart .stp-selected-summary {
	padding: 12px 16px;
	gap: 16px;
}

.woocommerce div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	height: 48px;
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-strong, #d3c3cf);
	border-radius: var(--ehb-radius-pill);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.woocommerce div.product form.cart .quantity .ehb-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 100%;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-medium);
	font-size: 16px;
	color: var(--ehb-text-body, #3d2c36);
	cursor: pointer;
	user-select: none;
	transition: color 150ms ease;
}

.woocommerce div.product form.cart .quantity .ehb-qty-btn:hover {
	color: var(--ehb-brand-magenta, #b93c7b);
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 38px;
	height: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	text-align: center;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-medium);
	font-size: 16px;
	color: var(--ehb-text-ink);
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 0 0;
	min-width: 0;
	width: auto;
	height: 48px;
	padding: 0 30px;
	background: var(--ehb-brand-orchid);
	border-radius: var(--ehb-radius-pill);
	border: none;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 14px;
	line-height: 48px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 150ms ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--ehb-brand-rose-plum, #944c72);
}

/* Shipping & Stock meta row */
.single-product div.summary .ehb-pdp-meta-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	margin-bottom: 0;
}

/* Out of stock: the badge keeps its design and "— Contact us about availability" continues on the same line. */
.single-product div.summary .ehb-pdp-stock-wrap:has(.ehb-pdp-oos-note) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	row-gap: 4px;
}

.single-product div.summary .ehb-pdp-stock-wrap .ehb-pdp-oos-note::before {
	content: "\2014\00a0";
	text-decoration: none;
}

.single-product div.summary .ehb-pdp-stock-wrap .ehb-pdp-oos-note {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--ehb-text-muted);
}

.single-product div.summary .ehb-pdp-stock-wrap .ehb-pdp-oos-note a {
	color: var(--ehb-brand-rose-plum);
	text-decoration: none;
}

.single-product div.summary .ehb-pdp-stock-wrap .ehb-pdp-oos-note a:hover,
.single-product div.summary .ehb-pdp-stock-wrap .ehb-pdp-oos-note a:focus-visible {
	text-decoration: underline;
}

.single-product div.summary .ehb-stock-badge--pill {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	align-self: flex-start;
	padding: 4px 8px;
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 9px;
	line-height: 11px;
	letter-spacing: 0.54px;
	text-transform: uppercase;
	color: var(--ehb-status-in-stock, #2f6b52);
}

.single-product div.summary .ehb-afterpay-note {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	margin: 0;
}

/* Product tabs (Figma 195:157 & 213:791) */
.woocommerce div.product .woocommerce-tabs {
	display: block;
	width: 100%;
	max-width: calc(var(--ehb-content-width, 1200px) + 2 * var(--ehb-gutter));
	margin-inline: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--ehb-space-24, 24px);
	padding-bottom: var(--ehb-space-72, 72px);
	padding-inline: var(--ehb-gutter);
	box-sizing: border-box;
}

@media (max-width: 1248px) {

	.single-product .ehb-pdp-top-wrapper,
	.woocommerce div.product .woocommerce-tabs {
		padding-inline: var(--ehb-gutter, 24px);
	}
}

/* Tablet 768–1199: the desktop row below is a fixed 660px gallery + 480px
   summary (1140px content, no shrink) — it only fits once the viewport has
   room for 1140px plus gutters. Below that it still renders side by side but
   with no room, so the gallery keeps its full width and the summary (buy
   box) is squeezed to whatever pixels are left, wrapping text one letter per
   line. Stack the same way the <768px rule already does, until there is
   really enough width for two columns. */
@media (min-width: 768px) and (max-width: 1199px) {
	.woocommerce div.product form.cart {
		max-width: none;
	}

	.single-product .ehb-pdp-top-wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* .woocommerce-product-gallery.images: the extra .images qualifier (the
	   element carries it already) matches WooCommerce core's own
	   ".woocommerce div.product div.images" rule (0,3,2) on specificity —
	   plain ".woocommerce-product-gallery" alone (0,3,0) loses to it and the
	   48% width leaks through. */
	.single-product .ehb-pdp-top-wrapper .woocommerce-product-gallery.images,
	.single-product .ehb-pdp-top-wrapper .summary.entry-summary {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	.single-product .ehb-pdp-top-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__image {
		width: 100%;
		max-width: 100%;
	}
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--ehb-space-32, 32px);
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ehb-line-subtle, #e7dce5);
	list-style: none;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 0 -1px;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 14px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-medium);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.28px;
	color: var(--ehb-text-muted);
	text-decoration: none;
	transition: color 150ms ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--ehb-brand-magenta, #b93c7b);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ehb-text-ink);
}

/* Mobile responsive (390px) */
@media (max-width: 767px) {
	.woocommerce div.product form.cart {
		max-width: none;
	}

	.single-product .content-container.site-container {
		padding-inline: 0;
		max-width: 100%;
	}

	.single-product div.product {
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.single-product .ehb-pdp-top-wrapper {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
		padding-top: 0;
		padding-bottom: 32px;
		gap: 0;
	}

	.single-product .ehb-pdp-top-wrapper .woocommerce-product-gallery.images {
		flex: none;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		float: none;
	}

	.single-product .ehb-pdp-top-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__image {
		width: 100%;
		height: auto;
		min-height: unset;
		aspect-ratio: 1 / 1;
		border-radius: 0;
	}

	.single-product .ehb-pdp-top-wrapper .woocommerce-product-gallery .woocommerce-product-gallery__image img {
		max-width: 220px;
		max-height: 280px;
	}

	.ehb-pdp-thumbnails {
		display: none;
	}

	.single-product .ehb-pdp-top-wrapper .summary.entry-summary {
		flex: none;
		width: 100%;
		max-width: 100%;
		padding: 24px var(--ehb-gutter) 32px;
		margin: 0;
		box-sizing: border-box;
		float: none;
	}

	.single-product div.summary .product_title {
		font-size: 30px;
		line-height: 38px;
		letter-spacing: -0.3px;
		margin-bottom: 12px;
	}

	.single-product div.summary p.price,
	.single-product div.summary span.price {
		font-size: 30px;
		line-height: 38px;
		letter-spacing: -0.3px;
		margin-bottom: 2px;
	}

	.single-product div.summary .ehb-pdp-tax-note {
		font-size: 14px;
		line-height: 22px;
		margin-bottom: 16px;
	}

	.single-product div.summary .ehb-tiered-offer {
		padding: 14px 16px;
		margin-bottom: 16px;
	}

	.woocommerce div.product form.cart {
		gap: 12px;
		margin-bottom: 16px;
	}

	.woocommerce div.product form.cart .stp-pricing-wrapper {
		flex-basis: 100%;
		width: 100%;
	}

	.single-product div.summary .ehb-afterpay-note {
		font-size: 12px;
		line-height: 18px;
	}

	.woocommerce div.product .woocommerce-tabs {
		padding-top: var(--ehb-space-8, 8px);
		padding-bottom: var(--ehb-space-40, 40px);
		padding-inline: var(--ehb-gutter, 16px);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: flex;
		flex-direction: column;
		gap: 0;
		border-bottom: 0;
		width: 100%;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--ehb-line-subtle, #e7dce5);
		border-radius: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16px 0;
		font-family: var(--ehb-font-display);
		font-weight: var(--ehb-weight-semibold, 600);
		font-size: 16px;
		line-height: 22px;
		color: var(--ehb-text-ink);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
		content: '+';
		font-family: var(--ehb-font-body);
		font-weight: 400;
		font-size: 16px;
		color: var(--ehb-text-muted);
		margin-left: auto;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
		border-bottom-color: var(--ehb-line-subtle, #e7dce5);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
		content: '−';
	}

	/* Sticky Add to Cart Bar (Figma 213:933, height 73px) */
	.ehb-sticky-bar--pdp {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		height: 73px;
		padding: 12px 16px;
		background: var(--ehb-surface-paper, #ffffff);
		border-top: 1px solid var(--ehb-line-subtle, #e7dce5);
		box-shadow: 0 -4px 16px rgba(36, 19, 32, 0.08);
		box-sizing: border-box;
	}

	.ehb-sticky-bar--pdp .ehb-sticky-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.ehb-sticky-bar--pdp .ehb-sticky-bar__price {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
	}

	.ehb-sticky-bar--pdp .ehb-sticky-bar__amount {
		font-family: var(--ehb-font-body);
		font-weight: var(--ehb-weight-semibold, 600);
		font-size: 18px;
		line-height: 26px;
		color: var(--ehb-text-ink);
	}

	.ehb-sticky-bar--pdp .ehb-sticky-bar__tax {
		font-family: var(--ehb-font-body);
		font-size: 12px;
		line-height: 18px;
		color: var(--ehb-text-muted);
	}

	.ehb-sticky-bar--pdp .ehb-sticky-bar__action {
		flex: 1 0 0;
		min-width: 0;
		height: 48px;
		padding: 0 24px;
		background: var(--ehb-brand-orchid);
		border: none;
		border-radius: var(--ehb-radius-pill);
		font-family: var(--ehb-font-display);
		font-weight: var(--ehb-weight-bold);
		font-size: 14px;
		letter-spacing: 1.12px;
		text-transform: uppercase;
		color: #ffffff;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Replace bottom nav on PDP on mobile (Figma node 213:933) */
	.single-product #mobile-footer-nav,
	.single-product .kadence-mobile-bottom-nav {
		display: none;
	}

	body.single-product {
		padding-bottom: 73px;
	}
}

@media (max-width: 479px) {
	.woocommerce div.product form.cart .stp-selected-summary {
		padding: 10px 12px;
	}

	.woocommerce div.product form.cart .quantity {
		flex: 0 0 92px;
	}

	.woocommerce div.product form.cart .quantity .ehb-qty-btn,
	.woocommerce div.product form.cart .quantity input.qty {
		width: 30px;
	}

	.woocommerce div.product form.cart .single_add_to_cart_button {
		min-width: 150px;
		padding-inline: 14px;
	}
}

/* ==========================================================================
   Archive toolbar — Figma "Toolbar"
   ========================================================================== */

.woocommerce .woocommerce-result-count {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-muted);
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	padding: 9px 14px;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	color: var(--ehb-text-ink);
}

/* ==========================================================================
   Pagination — Figma "Pagination"
   ========================================================================== */

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: var(--ehb-space-8);
	padding: var(--ehb-space-8) 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	color: var(--ehb-text-body);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current {
	background: var(--ehb-brand-magenta);
	border-color: var(--ehb-brand-magenta);
	color: var(--ehb-text-on-dark);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--ehb-brand-magenta);
	color: var(--ehb-brand-magenta);
	background: var(--ehb-surface-paper);
}

/* ==========================================================================
   Breadcrumb — Figma "Breadcrumb"
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb,
.kadence-breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--ehb-space-8);
	padding: 18px var(--ehb-gutter);
	border-bottom: 1px solid var(--ehb-line-subtle);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-muted);
}

.woocommerce .woocommerce-breadcrumb a,
.kadence-breadcrumbs a {
	color: var(--ehb-text-muted);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.kadence-breadcrumbs a:hover {
	color: var(--ehb-brand-magenta);
	text-decoration: underline;
}

.woocommerce .woocommerce-breadcrumb [aria-current='page'],
.woocommerce .woocommerce-breadcrumb .breadcrumb_last,
.kadence-breadcrumbs [aria-current='page'],
.kadence-breadcrumbs .breadcrumb_last {
	color: var(--ehb-text-body);
}

/* ==========================================================================
   Cart and Checkout blocks
   Colour, type, radius and spacing only — see the scope note at the top.
   ========================================================================== */

/* Form controls — Figma "Form Field". */
.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='tel'],
.wc-block-components-text-input input[type='number'],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
	padding: 14px var(--ehb-space-16);
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-ink);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	outline: 0;
	border-width: 2px;
	border-color: var(--ehb-brand-magenta);
	padding: 13px 15px;
	box-shadow: none;
}

/* Woo 11 renders the field <input> with NO class inside .wc-block-components-text-input,
   and its own packages-style.css sets radius 4px + a dark rgb border via
   `.wc-block-components-form .wc-block-components-text-input input[type="email"]`
   — specificity (0,3,1), which outranks the base "Form Field" rule above. Re-assert the
   Figma field spec (radius 8, 1px #d3c3cf border — checkout frame 199:1197 "Input") one
   class higher (0,4,1) via the `input[type]` attribute, scoped to the cart/checkout
   blocks so nothing else is touched. Style-only, within the Scope Note. */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type],
.wp-block-woocommerce-cart .wc-block-components-form .wc-blocks-components-select__select {
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
}

.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type]:focus,
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type]:focus {
	border-color: var(--ehb-brand-magenta);
}

.wc-block-components-validation-error {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-caption);
	line-height: var(--ehb-lh-body-caption);
	color: var(--ehb-brand-magenta);
}

/* Checkbox and radio — Figma "Checkbox" / "Radio". */
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type='checkbox'],
.wc-block-components-checkbox .wc-block-components-checkbox__input[type='checkbox'],
.wc-block-components-checkbox input[type='checkbox'] {
	width: 20px;
	height: 20px;
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-sm);
	background: var(--ehb-surface-paper);
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	cursor: pointer;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type='checkbox']:checked,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type='checkbox']:checked,
.wc-block-components-checkbox input[type='checkbox']:checked {
	background: var(--ehb-brand-magenta);
	border-color: var(--ehb-brand-magenta);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark,
.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: #ffffff;
}

.wc-block-components-radio-control input[type='radio'].wc-block-components-radio-control__input,
input[type='radio'].wc-block-components-radio-control__input {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--ehb-line-strong);
	border-radius: 50%;
	background: var(--ehb-surface-paper);
	box-shadow: none;
	cursor: pointer;
}

.wc-block-components-radio-control input[type='radio'].wc-block-components-radio-control__input:checked,
input[type='radio'].wc-block-components-radio-control__input:checked {
	border-color: var(--ehb-brand-magenta);
	background: var(--ehb-brand-magenta);
	box-shadow: none;
}

.wc-block-components-radio-control input[type='radio'].wc-block-components-radio-control__input:checked::before,
input[type='radio'].wc-block-components-radio-control__input:checked::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	margin: 0;
	border: none;
	box-shadow: none;
}

/* Note: Cart & Checkout styles are consolidated authoritatively under Section: Cart & Checkout Flow below */

/* ==========================================================================
   Stock states
   ========================================================================== */

/* Figma 194:188: IN STOCK is a bordered pill badge, not plain text. */
.woocommerce div.product .stock.in-stock {
	display: inline-flex;
	align-items: center;
	padding: var(--ehb-space-4) var(--ehb-space-8);
	border-radius: var(--ehb-radius-pill);
	box-shadow: inset 0 0 0 1px var(--ehb-line-subtle);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-badge);
	line-height: var(--ehb-lh-label-badge);
	letter-spacing: var(--ehb-ls-label-badge);
	text-transform: uppercase;
	color: var(--ehb-status-in-stock);
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--ehb-text-muted);
}

/* The buy box shows the theme's own stock badge (.ehb-pdp-stock-wrap, which also carries "Only N left"). WooCommerce's
   <p class="stock"> repeats it, and with Manage stock on it prints the exact quantity ("144 in stock"). The pill rules
   above out-rank the earlier `.single-product p.stock { display:none }`, so hide it again here with enough specificity. */
.woocommerce div.product div.summary p.stock {
	display: none;
}

/* Out-of-stock cards dim the packshot (opacity 0.45, single rule at the top of this file, scoped to the card's own li).
   Never scope this to a bare .product.outofstock: on an out-of-stock PDP that wrapper contains the related-products cards. */

/* ==========================================================================
   TGA compliance strip
   Required on every product page. Not decorative: it is the Therapeutic Goods
   Administration wording for a site selling supplements in Australia.
   ========================================================================== */

.ehb-compliance {
	padding: var(--ehb-space-20) var(--ehb-space-24);
	background: var(--ehb-surface-raised);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: var(--ehb-radius-md);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-body);
}

/* ==========================================================================
   Shop landing and product archives
   ========================================================================== */

/* Product archives inject a full-bleed hero (.ehb-catalog-hero / .ehb-shop-hero)
   directly under the breadcrumb bar. Kadence's content-area carries an 80px top
   margin (body class content-vertical-padding-show), which leaves an empty white
   band between the breadcrumb and the hero — the gap flagged against the Figma
   archive frames, where the hero sits flush. Drop it on product archives only;
   single product and blog keep their breathing room. */
.tax-product_cat .content-area,
.tax-product_tag .content-area,
.post-type-archive-product .content-area,
.woocommerce-shop .content-area {
	margin-top: 0;
}

.tax-product_cat .content-container,
.tax-product_tag .content-container,
.post-type-archive-product .content-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.ehb-shop-hero,
.ehb-catalog-hero {
	padding: 72px var(--ehb-gutter) 64px;
	background: var(--ehb-surface-blush);
}

.ehb-shop-hero>*,
.ehb-catalog-hero__inner {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
}

.ehb-shop-hero h1,
.ehb-catalog-hero h1 {
	margin: 0 0 18px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.6px;
	color: var(--ehb-text-ink);
}

.ehb-shop-hero p,
.ehb-catalog-hero__description {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: 18px;
	line-height: 30px;
	color: var(--ehb-text-body);
}

.ehb-shop-band {
	padding: 88px var(--ehb-gutter);
}

.ehb-shop-band--raised {
	background: var(--ehb-surface-raised);
}

.ehb-shop-band>* {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
}

:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .woocommerce-shop) :is(.ehb-shop-hero, .ehb-shop-band, .ehb-shop-all, .ehb-shop-seo),
:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag, .woocommerce-shop) .ehb-catalog-hero {
	padding-inline: var(--ehb-gutter) !important;
}

.ehb-shop-band__title {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color: var(--ehb-text-ink);
}

.ehb-shop-band__intro {
	margin-top: 0;
	margin-bottom: 36px;
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-shop-cards,
.ehb-shop-cards {
	gap: 24px;
	margin-block: 0;
}

.ehb-shop-route {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 32px 36px;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 14px;
	box-sizing: border-box;
}

.ehb-shop-cards--two .ehb-shop-route {
	min-height: 240px;
}

.ehb-shop-cards--need .ehb-shop-route {
	min-height: 190px;
}

.ehb-shop-cards--three .ehb-shop-route {
	min-height: 200px;
}

.ehb-shop-route--health {
	background: var(--ehb-surface-blush);
	border-color: transparent;
}

.ehb-shop-route--beauty {
	background: var(--ehb-surface-lilac);
	border-color: transparent;
}

.ehb-shop-route>* {
	margin-top: 0;
}

.ehb-shop-route h3 {
	margin-bottom: 10px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -0.2px;
	text-transform: uppercase;
	color: var(--ehb-text-ink);
}

.ehb-shop-cards--two .ehb-shop-route h3 {
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -0.24px;
}

.ehb-shop-cards--need .ehb-shop-route h3 {
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.22px;
}

.ehb-shop-route p {
	margin-bottom: 16px;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-body);
}

.ehb-shop-route p:last-child {
	margin-bottom: 0;
}

.ehb-shop-route p.ehb-shop-route__eyebrow {
	margin-bottom: 10px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-eyebrow);
	line-height: var(--ehb-lh-label-eyebrow);
	letter-spacing: var(--ehb-ls-label-eyebrow);
	text-transform: uppercase;
	color: var(--ehb-brand-magenta);
}

.ehb-shop-route a {
	display: inline-flex;
	align-items: center;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-button);
	line-height: var(--ehb-lh-label-button);
	letter-spacing: var(--ehb-ls-label-button);
	text-transform: uppercase;
	color: var(--ehb-text-ink);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.ehb-shop-route a:hover,
.ehb-shop-route a:focus-visible {
	color: var(--ehb-brand-magenta);
}

.ehb-shop-all {
	padding: 72px var(--ehb-gutter);
	text-align: center;
}

.ehb-shop-all h2 {
	margin: 0 0 18px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-h2);
	line-height: var(--ehb-lh-h2);
	letter-spacing: var(--ehb-ls-h2);
	color: var(--ehb-text-ink);
}

.ehb-shop-all p {
	margin: 0 auto 28px;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-body);
}

.ehb-shop-all .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 228px;
	height: 49px;
	padding: 14px 30px;
	background-color: var(--ehb-brand-orchid);
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	text-decoration: none;
	transition: background-color 150ms ease-out;
}

.ehb-shop-all .wp-block-button__link:hover,
.ehb-shop-all .wp-block-button__link:focus-visible {
	background-color: var(--ehb-brand-rose-plum);
}

.ehb-shop-seo {
	padding: 80px var(--ehb-gutter);
	background: var(--ehb-surface-blush);
}

.ehb-shop-seo .ehb-shop-seo__inner,
.entry-content .ehb-shop-seo .ehb-shop-seo__inner,
.entry-content .ehb-shop-seo>* {
	width: min(100%, var(--ehb-content-width));
	max-width: var(--ehb-content-width);
	margin-inline: auto;
	text-align: left;
}

.ehb-shop-seo h2,
.entry-content .ehb-shop-seo h2 {
	margin: 0 0 20px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-h2);
	line-height: var(--ehb-lh-h2);
	letter-spacing: var(--ehb-ls-h2);
	color: var(--ehb-text-ink);
	text-align: left;
}

.ehb-shop-seo p,
.entry-content .ehb-shop-seo p {
	max-width: 880px;
	margin: 0 0 16px;
	margin-inline-start: 0;
	margin-inline-end: auto;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-body);
	text-align: left;
}

.ehb-shop-seo p:last-child,
.entry-content .ehb-shop-seo p:last-child {
	margin-bottom: 0;
}

.ehb-catalog-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	column-gap: var(--ehb-space-40);
	width: 100%;
	max-width: calc(var(--ehb-content-width) + 2 * var(--ehb-gutter));
	margin: var(--ehb-space-56) auto 80px;
	/* Gutter always on: with the 1440px content column (52a25b7) the filters sat at x=0 and the grid ran to the
	   viewport edge at every desktop width — same regression the cart/checkout container had. The max-width adds
	   the gutter back so border-box does not inset the filters 40px from the header edge above 1440 (1905: 273 vs 233). */
	padding: 0 var(--ehb-gutter);
	box-sizing: border-box;
}

.ehb-catalog-filters h2 {
	margin: 0 0 24px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--ehb-text-ink);
}

/* ==========================================================================
   Filter Group & Facets — Figma "Filter sidebar" (192:157)
   ========================================================================== */

.ehb-filter-widget {
	margin-bottom: 20px;
}

.ehb-filter-widget__title {
	margin: 0 0 16px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

.ehb-filter-group {
	border-bottom: 1px solid var(--ehb-line-subtle);
	padding: 14px 0;
	box-sizing: border-box;
}

.ehb-filter-group[open] {
	padding-bottom: 18px;
}

.ehb-filter-group summary.ehb-filter-group__header,
.ehb-filter-group summary.wp-block-details__summary,
.ehb-filter-group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	user-select: none;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 15px;
	line-height: 22px;
	color: var(--ehb-text-ink);
	transition: color 120ms ease;
}

.ehb-filter-group summary.ehb-filter-group__header:hover,
.ehb-filter-group summary.wp-block-details__summary:hover,
.ehb-filter-group summary:hover {
	color: var(--ehb-brand-rose-plum);
}

.ehb-filter-group summary::-webkit-details-marker {
	display: none;
}

.ehb-filter-group summary::marker {
	display: none;
	content: "";
}

.ehb-filter-group summary.ehb-filter-group__header::after,
.ehb-filter-group summary.wp-block-details__summary::after,
.ehb-filter-group summary::after {
	content: "+";
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 18px;
	line-height: 1;
	color: var(--ehb-text-ink);
}

.ehb-filter-group[open] summary.ehb-filter-group__header::after,
.ehb-filter-group[open] summary.wp-block-details__summary::after,
.ehb-filter-group[open] summary::after {
	content: "−";
	font-size: 18px;
}

.ehb-filter-group__options,
.ehb-filter-group ul.wp-block-list,
.ehb-filter-group ul.ehb-filter-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.ehb-filter-group ul.wp-block-list li,
.ehb-filter-group ul.ehb-filter-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 14px;
	line-height: 20px;
	color: var(--ehb-text-body);
	cursor: pointer;
	user-select: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ehb-filter-group ul.wp-block-list li::before,
.ehb-filter-group ul.ehb-filter-list li::before {
	content: "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: #ffffff;
	border: 1px solid #d3c3cf;
	border-radius: 3px;
	box-sizing: border-box;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.ehb-filter-group ul.wp-block-list li:hover::before,
.ehb-filter-group ul.ehb-filter-list li:hover::before {
	border-color: var(--ehb-brand-rose-plum);
}

.ehb-filter-group ul.wp-block-list li.is-checked::before,
.ehb-filter-group ul.ehb-filter-list li.is-checked::before,
.ehb-filter-group ul.wp-block-list li[aria-checked="true"]::before,
.ehb-filter-group ul.ehb-filter-list li[aria-checked="true"]::before {
	background-color: var(--ehb-brand-rose-plum);
	border-color: var(--ehb-brand-rose-plum);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7L5.5 10L11.5 4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
}

.ehb-filter-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
	margin: 0;
}

.ehb-filter-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.ehb-filter-checkbox__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: #ffffff;
	border: 1px solid #d3c3cf;
	border-radius: 3px;
	box-sizing: border-box;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.ehb-filter-checkbox input[type="checkbox"]:focus-visible+.ehb-filter-checkbox__control {
	outline: 2px solid var(--ehb-brand-rose-plum);
	outline-offset: 2px;
}

.ehb-filter-checkbox input[type="checkbox"]:checked+.ehb-filter-checkbox__control {
	background: var(--ehb-brand-rose-plum);
	border-color: var(--ehb-brand-rose-plum);
}

.ehb-filter-checkbox input[type="checkbox"]:checked+.ehb-filter-checkbox__control::after {
	content: "";
	display: block;
	width: 4px;
	height: 8px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-0.5px, -0.5px);
}

.ehb-filter-checkbox__label {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 14px;
	line-height: 20px;
	color: var(--ehb-text-body);
}

.ehb-filter-checkbox:hover .ehb-filter-checkbox__control {
	border-color: var(--ehb-brand-rose-plum);
}

.ehb-filter-group__options a {
	display: flex;
	justify-content: space-between;
	gap: var(--ehb-space-8);
	font-size: var(--ehb-size-body-small);
	color: var(--ehb-text-body);
	text-decoration: none;
}

.ehb-filter-group__options a:hover,
.ehb-filter-group__options a:focus-visible {
	color: var(--ehb-brand-magenta);
}

/* ==========================================================================
   Catalogue Results & Toolbar — Figma 192:197, 192:198
   ========================================================================== */

.ehb-catalog-results {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: 100%;
}

.ehb-catalog-results .kadence-shop-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border-bottom: 1px solid var(--ehb-line-subtle);
	padding-block: 14px;
	margin-bottom: 28px;
}

.ehb-catalog-results .kadence-shop-top-row .kadence-shop-top-item {
	display: flex;
	align-items: center;
}

.ehb-catalog-results .kadence-shop-top-row .kadence-woo-results-count,
.ehb-catalog-results .kadence-shop-top-row .woocommerce-result-count {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	margin: 0;
}

.ehb-catalog-results .kadence-shop-top-row .kadence-woo-ordering,
.ehb-catalog-results .kadence-shop-top-row .woocommerce-ordering {
	margin: 0;
}

.ehb-catalog-results .kadence-shop-top-row .woocommerce-ordering select.orderby {
	display: inline-flex;
	align-items: center;
	height: 42px;
	box-sizing: border-box;
	background-color: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
	padding: 9px 36px 9px 14px;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-ink);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B5A65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 6px;
	transition: border-color 150ms ease-out;
}

.ehb-catalog-results .kadence-shop-top-row .woocommerce-ordering select.orderby:hover,
.ehb-catalog-results .kadence-shop-top-row .woocommerce-ordering select.orderby:focus-visible {
	border-color: var(--ehb-brand-magenta);
	outline: none;
}

.ehb-catalog-results .kadence-shop-top-row .kadence-woo-toggle {
	display: none;
}

.ehb-catalog-results .products,
.ehb-catalog-results .woocommerce-pagination {
	width: 100%;
	flex: 0 0 auto;
}

.ehb-catalog-results ul.products {
	display: grid;
	/* 4 across on desktop: the column is 1440 now, so 3 made each card ~357px — far wider
	   than the 4-up cards on the homepage and on healthpost.com.au. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 28px;
	margin: 0 0 28px;
}

.ehb-catalog-results ul.products::before,
.ehb-catalog-results ul.products::after {
	display: none;
}

.ehb-catalog-results ul.products li.product {
	width: auto;
	margin: 0;
}

.woocommerce ul.products li.product .ehb-stock-badge--muted,
.ehb-stock-badge--muted {
	background: var(--ehb-line-strong);
	border: 1px solid var(--ehb-line-subtle);
	/* Ink, not muted: muted on line-strong was 3.8:1 at 9px (WCAG 1.4.3 needs 4.5). Ink is 10.5:1. */
	color: var(--ehb-text-ink);
}

/* Low stock — Figma Badge Pill "Low stock" (components.css .ehb-badge-pill--low-stock): paper, ink, strong line. */
.woocommerce ul.products li.product .ehb-stock-badge--low,
.single-product div.summary .ehb-stock-badge--pill.ehb-stock-badge--low {
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-strong);
	color: var(--ehb-text-ink);
}

.ehb-catalog-filter-drawer,
.ehb-result-count--mobile {
	display: none;
}

/* ==========================================================================
   Pagination — Figma "Pagination" (188:92)
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: var(--ehb-space-8) 0;
	margin-top: 28px;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--ehb-space-8);
	border: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-regular);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body);
	text-decoration: none;
	transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
	background: var(--ehb-brand-magenta);
	border-color: var(--ehb-brand-magenta);
	color: var(--ehb-text-on-dark);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	background: var(--ehb-surface-blush);
	border-color: var(--ehb-brand-magenta);
	color: var(--ehb-brand-magenta);
}

/* The Shop landing supplies its own curated product loop. */
.woocommerce-shop:not(.search) .ehb-shop-default-loop,
.woocommerce-shop:not(.search) .woocommerce-result-count,
.woocommerce-shop:not(.search) .woocommerce-ordering,
.woocommerce-shop:not(.search) .woocommerce-pagination,
.woocommerce-shop:not(.search) .kadence-shop-top-row,
.woocommerce-shop:not(.search) .kadence-product-toggle-container,
.woocommerce-shop:not(.search) .kadence-shop-top-item,
.woocommerce-shop:not(.search) ul.products:not(.ehb-product-grid *),
.woocommerce-shop:not(.search) div.products:not(.ehb-product-grid *),
.post-type-archive-product:not(.search):not(.tax-product_cat):not(.tax-product_tag) .kadence-shop-top-row,
.post-type-archive-product:not(.search):not(.tax-product_cat):not(.tax-product_tag) .kadence-product-toggle-container,
.post-type-archive-product:not(.search):not(.tax-product_cat):not(.tax-product_tag) .kadence-shop-top-item,
.post-type-archive-product:not(.search):not(.tax-product_cat):not(.tax-product_tag) .ehb-shop-default-loop,
.post-type-archive-product:not(.search):not(.tax-product_cat):not(.tax-product_tag) .woocommerce-pagination {
	display: none;
}

@media (max-width: 767px) {

	:is(.post-type-archive-product, .woocommerce-shop) :is(.ehb-shop-hero, .ehb-shop-band, .ehb-shop-all, .ehb-shop-seo),
	:is(.tax-product_cat, .tax-product_tag) .ehb-catalog-hero {
		padding-inline: 16px !important;
	}

	.ehb-shop-hero,
	.entry-content .ehb-shop-hero {
		padding: 44px 16px 40px !important;
	}

	.ehb-shop-hero h1,
	.entry-content .ehb-shop-hero h1 {
		margin: 0 0 12px;
		font-size: 30px;
		line-height: 38px;
		letter-spacing: -0.4px;
	}

	.ehb-shop-hero p,
	.entry-content .ehb-shop-hero p {
		font-size: 16px;
		line-height: 26px;
		max-width: 100%;
	}

	.ehb-shop-band,
	.entry-content .ehb-shop-band {
		padding: 52px var(--ehb-gutter);
	}

	.ehb-shop-band__title,
	.entry-content .ehb-shop-band__title {
		margin-top: 0;
		margin-bottom: 6px;
		font-size: 28px;
		line-height: 34px;
		letter-spacing: -0.28px;
		text-transform: uppercase;
	}

	.ehb-shop-band__intro,
	.entry-content .ehb-shop-band__intro {
		margin-top: 0;
		margin-bottom: 24px;
		font-size: 14px;
		line-height: 20px;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-shop-cards,
	.ehb-shop-cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ehb-shop-route,
	.entry-content .ehb-shop-route,
	.ehb-shop-cards--two .ehb-shop-route,
	.ehb-shop-cards--need .ehb-shop-route,
	.ehb-shop-cards--three .ehb-shop-route {
		min-height: auto;
		padding: 22px 20px;
		gap: 8px;
		border-radius: 14px;
	}

	.ehb-shop-route h3,
	.entry-content .ehb-shop-route h3,
	.ehb-shop-cards--two .ehb-shop-route h3,
	.ehb-shop-cards--need .ehb-shop-route h3,
	.ehb-shop-cards--three .ehb-shop-route h3 {
		margin-bottom: 0;
		font-size: 20px;
		line-height: 27px;
		letter-spacing: -0.1px;
		text-transform: none;
	}

	.ehb-shop-route p,
	.entry-content .ehb-shop-route p {
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
	}

	.ehb-shop-route p.ehb-shop-route__eyebrow,
	.entry-content .ehb-shop-route p.ehb-shop-route__eyebrow {
		margin-bottom: 4px;
		font-size: 11px;
		line-height: 14px;
		letter-spacing: 1.2px;
	}

	.ehb-shop-route a,
	.entry-content .ehb-shop-route a {
		margin-top: 4px;
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 0.8px;
		font-weight: var(--ehb-weight-bold);
	}

	.ehb-shop-band .ehb-product-grid .wp-block-post-template {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.ehb-shop-band .ehb-product-grid .wp-block-post {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		max-width: var(--ehb-carousel-card);
		min-width: var(--ehb-carousel-card);
		scroll-snap-align: start;
	}

	.ehb-shop-band .ehb-product-grid .wp-block-post a img {
		padding: 8px;
	}

	.ehb-shop-band .ehb-product-grid .wp-block-post .woocommerce-loop-product__title {
		font-size: 13px;
		line-height: 18px;
		padding: 0 10px;
		margin: 0 0 4px;
	}

	.ehb-shop-band .ehb-product-grid .wp-block-post .price {
		font-size: 14px;
		line-height: 18px;
		padding: 0 10px;
		margin-bottom: 8px;
	}

	.ehb-shop-all,
	.entry-content .ehb-shop-all {
		padding: 48px var(--ehb-gutter);
	}

	.ehb-shop-all h2,
	.entry-content .ehb-shop-all h2 {
		margin: 0 0 12px;
		font-size: 20px;
		line-height: 27px;
	}

	.ehb-shop-all p,
	.entry-content .ehb-shop-all p {
		margin: 0 auto 20px;
		font-size: 14px;
		line-height: 22px;
	}

	.ehb-shop-all .wp-block-buttons {
		width: 100%;
	}

	.ehb-shop-all .wp-block-button,
	.ehb-shop-all .wp-block-button__link {
		width: 100%;
		min-width: 0;
		display: flex;
		justify-content: center;
	}

	.ehb-shop-seo,
	.entry-content .ehb-shop-seo {
		padding: 52px var(--ehb-gutter);
	}

	.ehb-shop-seo h2,
	.entry-content .ehb-shop-seo h2 {
		margin: 0 0 12px;
		font-size: 20px;
		line-height: 27px;
	}

	.ehb-shop-seo p,
	.entry-content .ehb-shop-seo p {
		margin: 0 0 12px;
		font-size: 14px;
		line-height: 22px;
	}

	/* PLP Archive mobile */
	.ehb-catalog-hero {
		padding: 40px 16px 36px;
		background: var(--ehb-surface-blush);
		box-sizing: border-box;
		width: 100%;
	}

	.ehb-catalog-hero h1 {
		margin: 0 0 12px;
		font-size: 30px;
		line-height: 38px;
		letter-spacing: -0.3px;
	}

	.ehb-catalog-hero h1:last-child {
		margin-bottom: 0;
	}

	.ehb-catalog-hero__description {
		font-size: 14px;
		line-height: 22px;
	}
}

/* Tablet (768px–1023px): Shop Landing */
@media (min-width: 768px) and (max-width: 1023px) {

	:is(.post-type-archive-product, .woocommerce-shop) :is(.ehb-shop-hero, .ehb-shop-band, .ehb-shop-all, .ehb-shop-seo),
	:is(.tax-product_cat, .tax-product_tag) .ehb-catalog-hero {
		padding-inline: var(--ehb-gutter) !important;
	}

	.ehb-shop-hero,
	.entry-content .ehb-shop-hero {
		padding: 56px var(--ehb-gutter) 48px !important;
	}

	.ehb-shop-hero h1,
	.entry-content .ehb-shop-hero h1 {
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -0.4px;
		margin-bottom: 14px;
	}

	.ehb-shop-hero p,
	.entry-content .ehb-shop-hero p {
		font-size: 17px;
		line-height: 28px;
	}

	.ehb-shop-band,
	.entry-content .ehb-shop-band {
		padding: 64px var(--ehb-gutter);
	}

	.ehb-shop-band__title,
	.entry-content .ehb-shop-band__title {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: -0.32px;
		margin-bottom: 8px;
	}

	.ehb-shop-band__intro,
	.entry-content .ehb-shop-band__intro {
		font-size: 15px;
		line-height: 22px;
		margin-bottom: 28px;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-shop-cards,
	.ehb-shop-cards {
		gap: 20px;
	}

	.ehb-shop-cards--two {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ehb-shop-cards--three {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.ehb-shop-cards--need {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ehb-shop-route,
	.entry-content .ehb-shop-route {
		padding: 24px 20px;
		border-radius: 14px;
	}

	.ehb-shop-route h3,
	.entry-content .ehb-shop-route h3 {
		font-size: 20px;
		line-height: 27px;
	}

	.ehb-shop-band .ehb-product-grid .wp-block-post-template {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.ehb-shop-band .ehb-product-grid .wp-block-post {
		width: auto;
		max-width: none;
		min-width: 0;
		flex: 1 1 auto;
	}

	.ehb-shop-all,
	.entry-content .ehb-shop-all {
		padding: 60px var(--ehb-gutter);
	}

	.ehb-shop-all .wp-block-button {
		max-width: 320px;
		margin-inline: auto;
	}

	.ehb-shop-seo,
	.entry-content .ehb-shop-seo {
		padding: 64px var(--ehb-gutter);
	}
}

/* Tablet & Mobile (<=1023px): PLP Archive layout & sticky filter bar.
   Full-width bleed with zero horizontal overflow, 16px mobile / 24px tablet gutters. */
@media (max-width: 1023px) {

	.tax-product_cat .content-container,
	.tax-product_tag .content-container,
	.post-type-archive-product .content-container {
		max-width: none;
		padding-inline: 0;
	}

	.ehb-catalog-hero {
		padding: 56px var(--ehb-gutter) 48px;
		background: var(--ehb-surface-blush);
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.ehb-catalog-hero h1 {
		margin: 0 0 14px;
		font-size: 34px;
		line-height: 42px;
		letter-spacing: -0.34px;
	}

	.ehb-catalog-hero h1:last-child {
		margin-bottom: 0;
	}

	.ehb-catalog-hero__description {
		font-size: 16px;
		line-height: 26px;
	}

	.ehb-catalog-layout {
		display: block;
		width: 100%;
		margin-block: 0 40px;
		padding: 0;
	}

	.ehb-catalog-filters {
		display: none;
	}

	.ehb-result-count--desktop {
		display: none;
	}

	.ehb-result-count--mobile {
		display: inline;
	}

	.ehb-catalog-results {
		display: block;
		width: 100%;
	}

	.ehb-catalog-results .kadence-shop-top-row {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 40;
		background: var(--ehb-surface-paper);
		border-bottom: 1px solid var(--ehb-line-subtle);
		padding: 14px var(--ehb-gutter);
		margin: 0 0 32px;
		box-sizing: border-box;
		width: 100%;
	}

	.ehb-catalog-filter-drawer {
		display: block;
		position: static;
		margin: 0;
		order: 1;
	}

	.ehb-catalog-filter-drawer>summary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 9px 16px;
		background: var(--ehb-brand-magenta);
		border: 1px solid var(--ehb-brand-magenta);
		border-radius: var(--ehb-radius-pill);
		font-family: var(--ehb-font-body);
		font-size: 14px;
		line-height: 20px;
		color: var(--ehb-text-on-dark);
		cursor: pointer;
		list-style: none;
		user-select: none;
		white-space: nowrap;
	}

	.ehb-catalog-filter-drawer>summary::-webkit-details-marker {
		display: none;
	}

	.ehb-catalog-filter-drawer>summary::marker {
		display: none;
		content: "";
	}

	.ehb-catalog-results .kadence-shop-top-row .kadence-woo-ordering {
		order: 2;
		margin: 0;
	}

	.ehb-catalog-results .kadence-shop-top-row .woocommerce-ordering select.orderby {
		height: 40px;
		padding: 8px 32px 8px 14px;
		font-size: 14px;
		line-height: 22px;
		border-radius: var(--ehb-radius-pill);
		border: 1px solid var(--ehb-line-strong);
		background-color: var(--ehb-surface-paper);
		background-position: right 12px center;
	}

	.ehb-catalog-results .kadence-shop-top-row .kadence-woo-results-count {
		order: 3;
		margin-left: auto;
	}

	.ehb-catalog-results .kadence-shop-top-row .woocommerce-result-count {
		font-size: 12px;
		line-height: 18px;
		color: var(--ehb-text-muted);
		text-align: right;
		white-space: nowrap;
		margin: 0;
	}

	.ehb-catalog-filter-drawer__body {
		position: absolute;
		top: calc(100% + 6px);
		left: var(--ehb-gutter);
		right: var(--ehb-gutter);
		z-index: 100;
		max-height: 75vh;
		overflow-y: auto;
		background: var(--ehb-surface-paper);
		border: 1px solid var(--ehb-line-subtle);
		border-radius: var(--ehb-radius-md);
		box-shadow: 0 12px 36px rgba(36, 18, 31, 0.15);
		padding: 20px;
	}

	/* Tablet 3 columns */
	.ehb-catalog-results ul.products {
		clear: both;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		padding-inline: var(--ehb-gutter);
		box-sizing: border-box;
		margin: 0 0 32px;
	}

	.woocommerce nav.woocommerce-pagination {
		padding: 0 var(--ehb-gutter) 48px;
		margin: 0;
	}

	.woocommerce .woocommerce-breadcrumb,
	.kadence-breadcrumbs {
		padding: 14px var(--ehb-gutter);
	}

	.ehb-catalog-seo {
		padding: 64px var(--ehb-gutter);
		margin-top: 0;
		background: var(--ehb-surface-blush);
	}

	.ehb-catalog-seo h2 {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.15px;
		margin-bottom: 16px;
	}

	.ehb-catalog-seo p {
		font-size: 15px;
		line-height: 24px;
		margin-bottom: 14px;
	}
}

/* Mobile (<=767px): PLP Archive 2 columns matching Figma 211:535 */
@media (max-width: 767px) {
	.ehb-catalog-hero {
		padding: 40px 16px 36px !important;
	}

	.ehb-catalog-hero h1 {
		margin: 0 0 12px;
		font-size: 30px;
		line-height: 38px;
		letter-spacing: -0.3px;
	}

	.ehb-catalog-hero h1:last-child {
		margin-bottom: 0;
	}

	.ehb-catalog-hero__description {
		font-size: 14px;
		line-height: 22px;
	}

	.ehb-catalog-results .kadence-shop-top-row {
		padding: 12px 16px;
		min-height: 64px;
		margin-bottom: 24px;
		gap: 10px;
	}

	.ehb-catalog-results .kadence-shop-top-row .woocommerce-ordering select.orderby {
		padding: 6px 30px 6px 14px;
		font-size: 13px;
	}

	/* Mobile 2 columns (Figma 211:605) */
	.ehb-catalog-results ul.products {
		clear: both;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		padding-inline: 16px;
		box-sizing: border-box;
		margin: 0 0 28px;
	}

	.ehb-catalog-results ul.products li.product {
		border-radius: 14px;
	}

	.ehb-catalog-results ul.products li.product a.woocommerce-loop-image-link {
		padding: 12px;
		aspect-ratio: 4 / 5;
	}

	.ehb-catalog-results ul.products li.product a img {
		padding: 0 !important;
	}

	.ehb-catalog-results ul.products li.product .product-details {
		padding: 16px 16px 18px;
		gap: 7px;
	}

	.ehb-catalog-results ul.products li.product .ehb-card-eyebrow {
		font-size: 11px;
		line-height: 14px;
		letter-spacing: 1.32px;
		font-weight: 700;
	}

	.ehb-catalog-results ul.products li.product .woocommerce-loop-product__title {
		font-size: 16px;
		line-height: 22px;
		font-weight: 600;
		padding: 0;
		margin: 0;
	}

	.ehb-catalog-results ul.products li.product .price {
		font-size: 16px;
		line-height: 22px;
		font-weight: 600;
		padding: 0;
		margin: 0;
	}

	.ehb-catalog-results ul.products li.product .price .ehb-price-suffix {
		font-size: 12px;
		line-height: 18px;
		font-weight: 400;
	}

	.woocommerce ul.products li.product .product-action-wrap,
	.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap,
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap .button {
		display: none;
	}

	.ehb-card-rating__reviews-word {
		display: none;
	}

	.woocommerce nav.woocommerce-pagination {
		padding: 0 16px 40px;
		margin: 0;
	}

	.woocommerce .woocommerce-breadcrumb,
	.kadence-breadcrumbs {
		padding: 12px 16px;
	}

	.ehb-catalog-seo {
		padding: 52px 16px;
		margin-top: 0;
	}

	.ehb-catalog-seo h2 {
		font-size: 20px;
		line-height: 27px;
		letter-spacing: -0.1px;
		margin-bottom: 14px;
	}

	.ehb-catalog-seo p {
		font-size: 14px;
		line-height: 22px;
		margin-bottom: 12px;
	}
}

/* ==========================================================================
   PLP Enhancements — Category Archive & Filter
   ========================================================================== */

.woocommerce a.button.ehb-button--secondary {
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	color: var(--ehb-text-ink);
	box-shadow: none;
}

.woocommerce a.button.ehb-button--secondary:hover {
	background: var(--ehb-surface-blush);
	border-color: var(--ehb-brand-magenta);
	color: var(--ehb-brand-magenta);
}

.ehb-catalog-seo {
	width: 100%;
	box-sizing: border-box;
	padding: 80px var(--ehb-gutter);
	background: var(--ehb-surface-blush);
	margin-top: 0;
}

.ehb-catalog-seo__inner {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
}

.ehb-catalog-seo h2 {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 30px;
	line-height: 38px;
	letter-spacing: -0.3px;
	color: var(--ehb-text-ink);
	margin-bottom: 20px;
}

.ehb-catalog-seo p {
	font-family: var(--ehb-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--ehb-text-body);
	max-width: 880px;
	margin-bottom: 16px;
}

.ehb-catalog-seo p:last-child {
	margin-bottom: 0;
}

.ehb-catalog-seo__placeholder {
	color: var(--ehb-text-muted);
	font-style: italic;
}

/* ==========================================================================
   PDP (Single Product) Buy Box, Tabs & TGA Strip
   ========================================================================== */

.woocommerce div.product .ehb-pdp-eyebrow {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-eyebrow);
	letter-spacing: var(--ehb-ls-label-eyebrow);
	text-transform: uppercase;
	color: var(--ehb-brand-magenta);
	margin-bottom: var(--ehb-space-8);
}

.woocommerce div.product .ehb-pdp-tax-note {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-muted);
	margin-top: -6px;
	margin-bottom: var(--ehb-space-20);
}

.ehb-tiered-offer {
	background: var(--ehb-surface-lilac, #f0e8f6);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: var(--ehb-radius-md);
	padding: var(--ehb-space-16) var(--ehb-space-20);
	margin-bottom: var(--ehb-space-24);
}

:is(body.ehb-pdp--skincare,
	body.product_cat-skincare,
	body.product_cat-beauty,
	body.product_cat-beauty-skin,
	.single-product .product.product_cat-skincare,
	.single-product .product.ehb-product--skincare) .ehb-tiered-offer {
	background: var(--ehb-surface-blush, #f7eaf1);
}

:is(body.ehb-pdp--vitamins,
	body.product_cat-vitamins,
	.single-product .product.product_cat-vitamins,
	.single-product .product.ehb-product--vitamins) .ehb-tiered-offer {
	background: var(--ehb-surface-lilac, #f0e8f6);
}

.ehb-tiered-offer__title {
	display: block;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-body-base);
	color: var(--ehb-text-ink);
	margin-bottom: var(--ehb-space-4);
}

.ehb-tiered-offer__copy {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-body);
	margin: 0;
}

.ehb-afterpay-note {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-caption);
	color: var(--ehb-text-muted);
	margin-top: var(--ehb-space-12);
}

.ehb-afterpay-note span.amount {
	font-weight: var(--ehb-weight-semibold);
	color: var(--ehb-text-ink);
}


/* TGA Strip — Full width dark disclaimer band (Figma 195:172) */
.ehb-tga-strip {
	background: var(--ehb-text-ink);
	color: var(--ehb-text-on-dark);
	padding: var(--ehb-space-28) var(--ehb-gutter);
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}

.ehb-tga-strip__inner {
	max-width: var(--ehb-content-width);
	width: 100%;
	margin-inline: auto;
}

.ehb-tga-strip__main {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: var(--ehb-size-body-base);
	line-height: 22px;
	color: var(--ehb-text-on-dark);
	margin: 0 0 6px;
}

.ehb-tga-strip__sub {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: 22px;
	color: var(--ehb-text-muted-on-dark);
	margin: 0;
}

.ehb-tga-strip__link {
	color: #e5a4c5;
	text-decoration: underline;
	font-weight: 500;
	transition: color 150ms ease;
}

.ehb-tga-strip__link:hover {
	color: #ffffff;
}

@media (max-width: 767px) {
	.ehb-tga-strip {
		padding: 22px var(--ehb-gutter);
	}
}

/* ==========================================================================
   Single Product — Tabs Content, Ingredients Table, Directions & Shipping
   ========================================================================== */

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	margin-top: var(--ehb-space-32);
	margin-bottom: 0;
	padding: 0;
	max-width: 880px;
	box-sizing: border-box;
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel>h2:first-child {
	display: none;
}

.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel p {
	font-family: var(--ehb-font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--ehb-text-body, #3d2c36);
	margin-top: 0;
	margin-bottom: var(--ehb-space-16, 16px);
}

.ehb-pdp-lead {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -0.1px;
	color: var(--ehb-text-ink);
	margin-bottom: var(--ehb-space-16);
}

.ehb-tab-lead {
	font-family: var(--ehb-font-display);
	font-size: 16px;
	line-height: 24px;
	color: var(--ehb-text-ink);
	margin-bottom: var(--ehb-space-12);
}

.ehb-tab-placeholder {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	font-style: italic;
	margin-top: var(--ehb-space-16);
}

.ehb-ingredients-table {
	width: 100%;
	max-width: 680px;
	border-collapse: collapse;
	margin: var(--ehb-space-16) 0 var(--ehb-space-20);
}

.ehb-ingredients-table tr {
	border-bottom: 1px solid var(--ehb-line-subtle);
}

.ehb-ingredients-table td {
	padding: 12px 0;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-body);
	vertical-align: middle;
}

.ehb-ingredients-table__name {
	font-weight: var(--ehb-weight-medium);
	color: var(--ehb-text-ink);
}

.ehb-ingredients-table__qty {
	text-align: right;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	color: var(--ehb-brand-rose-plum);
	white-space: nowrap;
	padding-left: var(--ehb-space-16);
}

.ehb-ingredients-disclaimer {
	font-family: var(--ehb-font-body);
	font-size: 13px;
	line-height: 20px;
	color: var(--ehb-text-muted);
	margin: 0;
}

.ehb-directions-content,
.ehb-shipping-content {
	max-width: 680px;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: 1.6;
	color: var(--ehb-text-body);
}

.ehb-directions-content p,
.ehb-shipping-content p {
	margin-bottom: var(--ehb-space-12);
}

.ehb-directions-warning {
	margin-top: var(--ehb-space-16);
	padding: 12px 16px;
	background: var(--ehb-surface-blush);
	border-left: 3px solid var(--ehb-brand-magenta);
	border-radius: 4px;
	color: var(--ehb-brand-rose-plum);
	font-size: 13px;
	line-height: 20px;
}

/* ==========================================================================
   Single Product — Related Products ("YOU MAY ALSO LIKE", Figma 194:81 / 195:175)
   ========================================================================== */

.woocommerce div.product .related.products {
	background: var(--ehb-surface-raised);
	padding: var(--ehb-space-80) var(--ehb-gutter);
	margin-top: 0;
	margin-bottom: 0;
	border-top: 0;
}

.woocommerce div.product .related.products .ehb-related-products__inner {
	max-width: var(--ehb-content-width);
	width: 100%;
	margin-inline: auto;
	padding-inline: 0;
}

.woocommerce div.product .related.products .ehb-section-head {
	margin-bottom: var(--ehb-space-36);
}

.woocommerce div.product .related.products .ehb-section-head__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color: var(--ehb-text-ink);
	margin: 0 0 10px;
}

.woocommerce div.product .related.products .ehb-section-head__subtitle {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	margin: 0;
}

.woocommerce div.product .related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ehb-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

/* Tablet: four across like desktop (two 350px-wide cards were 600px tall), with the mobile card's type. */
@media (min-width: 768px) and (max-width: 1023px) {
	.woocommerce div.product .related.products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ehb-space-16);
		align-items: stretch;
	}

	.woocommerce div.product .related.products ul.products li.product .product-details {
		padding: 16px 12px 18px;
		gap: 7px;
	}

	.woocommerce div.product .related.products .woocommerce-loop-product__title {
		font-size: 15px;
		line-height: 21px;
	}

	.woocommerce div.product .related.products .ehb-card-eyebrow {
		font-size: 10px;
		line-height: 14px;
	}

	.woocommerce div.product .related.products .price {
		font-size: 15px;
		line-height: 21px;
	}

	.woocommerce div.product .related.products .price .ehb-price-suffix {
		display: inline-block;
		font-size: 12px;
		line-height: 18px;
	}

	.woocommerce div.product .related.products ul.products li.product .product-action-wrap {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1024px) {
	.woocommerce div.product .related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.woocommerce div.product .related.products {
		padding: var(--ehb-space-48) 0;
	}

	.woocommerce div.product .related.products .ehb-related-products__inner {
		padding-inline: var(--ehb-gutter);
	}

	.woocommerce div.product .related.products ul.products {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--ehb-space-16);
		padding-bottom: var(--ehb-space-12);
		margin-inline: calc(-1 * var(--ehb-gutter));
		padding-inline: var(--ehb-gutter);
		scroll-padding-inline: var(--ehb-gutter);
	}

	.woocommerce div.product .related.products ul.products li.product {
		flex: 0 0 78vw;
		max-width: 280px;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Single Product — Related Articles ("READ BEFORE YOU BUY", Figma 194:81 / 195:236)
   ========================================================================== */

.ehb-pdp-articles {
	background: var(--ehb-surface-paper);
	padding: var(--ehb-space-80) var(--ehb-gutter);
	margin-top: 0;
	margin-bottom: 0;
	border-top: 0;
}

.ehb-pdp-articles__inner {
	max-width: var(--ehb-content-width);
	width: 100%;
	margin-inline: auto;
	padding-inline: 0;
}

.ehb-pdp-articles .ehb-section-head {
	margin-bottom: var(--ehb-space-36);
}

.ehb-pdp-articles .ehb-section-head__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color: var(--ehb-text-ink);
	margin: 0 0 10px;
}

.ehb-pdp-articles__hub-link {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	text-decoration: none;
	display: inline-block;
	transition: color 0.15s ease;
}

.ehb-pdp-articles__hub-link:hover {
	color: var(--ehb-brand-magenta);
	text-decoration: underline;
}

.ehb-pdp-articles__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ehb-space-24);
}

.ehb-pdp-article-card {
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ehb-pdp-article-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(36, 19, 32, 0.06);
}

.ehb-pdp-article-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 380 / 200;
	background: var(--ehb-surface-lilac);
	overflow: hidden;
	position: relative;
}

.ehb-pdp-article-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ehb-pdp-article-card__placeholder {
	width: 100%;
	height: 100%;
	background: var(--ehb-surface-lilac);
}

.ehb-pdp-article-card__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.ehb-pdp-article-card__badge {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--ehb-brand-magenta);
}

.ehb-pdp-article-card__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -0.1px;
	color: var(--ehb-text-ink);
	margin: 0;
}

.ehb-pdp-article-card__title a {
	color: inherit;
	text-decoration: none;
}

.ehb-pdp-article-card__title a:hover {
	color: var(--ehb-brand-magenta);
}

.ehb-pdp-article-card__excerpt {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body);
	margin: 0;
	flex: 1;
}

.ehb-pdp-article-card__time {
	font-family: var(--ehb-font-body);
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
	margin-top: 4px;
}

@media (max-width: 991px) {
	.ehb-pdp-articles__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.ehb-pdp-articles {
		padding: var(--ehb-space-48) 0;
	}

	.ehb-pdp-articles__inner {
		padding-inline: var(--ehb-gutter);
	}

	.ehb-pdp-articles__grid {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--ehb-space-16);
		padding-bottom: var(--ehb-space-12);
		margin-inline: calc(-1 * var(--ehb-gutter));
		padding-inline: var(--ehb-gutter);
		scroll-padding-inline: var(--ehb-gutter);
	}

	.ehb-pdp-article-card {
		flex: 0 0 82vw;
		max-width: 320px;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Cart Flow — Figma 196:86 (Desktop 1440) & 214:892 (Mobile 390)
   Scope Note: Native WooCommerce Cart Block structure preserved.
   ========================================================================== */

.entry-content .wp-block-woocommerce-cart.alignwide,
.entry-content .wp-block-woocommerce-cart.alignfull,
.entry-content .wp-block-woocommerce-checkout.alignwide,
.entry-content .wp-block-woocommerce-checkout.alignfull {
	max-width: 100% !important;
	width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	box-sizing: border-box;
}

/* Page container: the global content column (tokens.css), gutter always on. The
   gutter used to be added only below 1248px, which assumed a 1200px column; with
   the 1440px column the cart and checkout ran edge to edge at 1280–1440. The
   max-width adds the gutter back: border-box would otherwise take it out of the
   column and inset the content 40px from the header edge above 1440 (1905: 273 vs 233). */
.woocommerce-cart #primary .entry-content,
.woocommerce-checkout #primary .entry-content,
.woocommerce-cart.content-title-style-hide #primary .entry-content,
.woocommerce-checkout.content-title-style-hide #primary .entry-content {
	max-width: calc(var(--ehb-content-width) + 2 * var(--ehb-gutter));
	margin-inline: auto;
	padding-inline: var(--ehb-gutter);
	box-sizing: border-box;
}

/* ==========================================================================
   Cart Block — Figma 196:86 (1440) / 214:892 (390)
   Visual only (SCOPE NOTE). Font family, colour and the pill button come from
   tokens.css / components.css (Kadence palette), so only the deltas from those
   defaults are written here. Woo's cart.css nests its rules under
   .wc-block-cart (and `table.wc-block-cart-items`); selectors below repeat that
   chain plus .woocommerce-cart to outrank it — no !important.
   ========================================================================== */

/* Title + free-shipping notice (Figma 196:150 / 196:152) */
.woocommerce-cart .ehb-cart-title {
	margin: 0;
	padding: 56px 0 24px;
}

.woocommerce-cart .ehb-free-shipping-bar {
	margin: 8px 0 24px;
	padding: 18px 24px;
	background: var(--ehb-surface-blush);
	border-radius: 8px;
}

.woocommerce-cart .ehb-free-shipping-bar[hidden] {
	display: none;
}

.woocommerce-cart .ehb-free-shipping-bar__message {
	margin: 0 0 12px;
	font-weight: 500;
	color: var(--ehb-text-ink);
}

.ehb-free-shipping-bar__track {
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--ehb-line-subtle);
}

.ehb-free-shipping-bar__fill {
	height: 100%;
	border-radius: 999px;
	background: var(--ehb-brand-magenta);
	transition: width 300ms ease;
}

/* Cart body: 24px above, 88px below (Figma 196:86 "Cart body") */
.woocommerce-cart .wp-block-woocommerce-cart {
	padding: 24px 0 88px;
}

/* Columns: line items + 40px gap + 400px totals. Desktop only; Woo stacks them
   on mobile. The totals card hugs its content instead of stretching. */
@media (min-width: 1000px) {
	.woocommerce-cart .wc-block-cart {
		gap: 40px;
		flex-wrap: nowrap;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart__main,
	.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
		margin: 0;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart__main {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		padding-right: 0;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
		flex: 0 0 400px;
		max-width: 400px;
		align-self: flex-start;
	}
}

/* Tablet 768–999: Woo Blocks default makes the cart sidebar ~35% width (252px),
   which is too narrow for totals rows, payment marks and checkout button.
   Force single-column stack on tablet, same as Checkout. */
@media (min-width: 768px) and (max-width: 999px) {
	.woocommerce-cart .wc-block-cart {
		flex-direction: column;
		gap: 32px;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart__main,
	.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}
}

/* Line items table (Figma 196:86 "Table header" + rows) */
.woocommerce-cart .wc-block-cart table.wc-block-cart-items {
	margin: 0;
	border-collapse: collapse;
	width: 100%;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header {
	border-bottom: 1px solid var(--ehb-line-strong);
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header th {
	padding: 0 0 12px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--ehb-text-muted);
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: 116px;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	border-bottom: 1px solid var(--ehb-line-subtle);
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	padding-right: 20px;
	vertical-align: top;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: 8px;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 26px;
	color: var(--ehb-text-ink);
	text-decoration: none;
}

/* Unit price is hidden: Figma shows the price only in the Total column. Woo
   renders it in a hidden-on-desktop slot already; this covers the mobile one. */
.woocommerce-cart .wc-block-cart .wc-block-cart-item__product .wc-block-cart-item__prices {
	display: none;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
}

/* Stepper 112×38 (38 + 36 + 38) and the plain-text Remove link, 18px apart */
.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	align-items: center;
	gap: 18px;
	margin-top: 4px;
}

.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector {
	width: 112px;
	height: 38px;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: 999px;
	overflow: hidden;
}

.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	flex: 0 0 36px;
	width: 36px;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	flex: 0 0 38px;
	padding: 0;
	font-size: 14px;
	line-height: 38px;
	color: var(--ehb-text-body);
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-flex;
	width: auto;
	height: auto;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	text-decoration: none;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link svg {
	display: none;
}

/* CSS-drawn labels never reach TranslatePress, so each published language sets its own words. */
.woocommerce-cart .wc-block-cart {
	--ehb-label-remove: 'Remove';
	--ehb-label-incl-gst: 'incl. GST';
}

.woocommerce-cart .wc-block-cart:lang(vi) {
	--ehb-label-remove: 'Xóa';
	--ehb-label-incl-gst: 'đã gồm GST';
}

.woocommerce-cart .wc-block-cart:lang(zh-CN) {
	--ehb-label-remove: '删除';
	--ehb-label-incl-gst: '含 GST';
}

.woocommerce-cart .wc-block-cart:lang(zh-TW) {
	--ehb-label-remove: '刪除';
	--ehb-label-incl-gst: '含 GST';
}

.woocommerce-cart .wc-block-cart:lang(th) {
	--ehb-label-remove: 'ลบ';
	--ehb-label-incl-gst: 'รวม GST';
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link::after {
	content: var(--ehb-label-remove);
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link:hover {
	color: var(--ehb-brand-magenta);
}

/* Total column: Inter 18/600 + "incl. GST", no sale badge */
.woocommerce-cart .wc-block-cart .wc-block-cart-item__total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-left: 20px;
	text-align: right;
	white-space: nowrap;
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price {
	font-weight: 600;
	font-size: 18px;
	line-height: 26px;
	color: var(--ehb-text-ink);
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__total::after {
	content: var(--ehb-label-incl-gst);
	margin-top: 2px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
}

.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-sale-badge,
.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-badge {
	display: none;
}

/* Totals card (Figma 197:228). 27px + the 1px border = the 28px padding. */
.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
	padding: 27px;
	background: var(--ehb-surface-raised);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 14px;
	box-sizing: border-box;
}

.woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -0.1px;
	text-transform: none;
	color: var(--ehb-text-ink);
}

/* Rows sit 10px apart with no dividers except the one above Total. Shared with
   Checkout's order summary (both blocks carry .wc-block-components-sidebar-layout). */
.woocommerce-cart .wc-block-cart .wc-block-components-totals-wrapper {
	padding: 0;
	border: 0;
}

.wc-block-components-sidebar-layout .wc-block-components-totals-coupon {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
}

.wc-block-components-sidebar-layout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-brand-magenta);
	text-decoration: none;
	background: none;
	border: 0;
}

.wc-block-components-sidebar-layout .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
	display: none;
}

.wc-block-components-sidebar-layout .wc-block-components-totals-item {
	padding-block: 10px;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body);
}

.wc-block-components-sidebar-layout .ehb-fig-subtotal,
.wc-block-components-sidebar-layout .wc-block-components-totals-item--subtotal {
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	color: var(--ehb-text-ink);
}

.wc-block-components-sidebar-layout .wc-block-components-totals-shipping .wc-block-components-totals-item__description {
	margin-top: 4px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
}

.wc-block-components-sidebar-layout .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	display: none;
}

.wc-block-components-sidebar-layout .wc-block-components-totals-footer-item {
	margin-top: 6px;
	padding-block: 16px;
	border-top: 1px solid var(--ehb-line-subtle);
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

/* Checkout button 344×49: colour, pill and type come from the global button
   rule (components.css / .wc-block-components-button); only size is set here. */
.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button {
	width: 100%;
	height: auto;
	padding: 17px 30px;
	font-size: 14px;
	line-height: 15px;
}

/* Payment marks under the button — Figma 197:250 */
.ehb-cart-payment-marks {
	padding-top: 14px;
}

/* Figma's row (344px wide) was designed with 5 marks (incl. PayPal) filling
   ~333 of those 344px. With PayPal hidden (F… PayPal task, 29/09/2026) the 4
   remaining marks only span ~249px, so flex-start left them lopsided with a
   large dead gap on the right that the approved design never had. Centering
   rebalances it; revisit (back to flex-start reads fine again) once PayPal
   returns and the row is wide enough to fill the row on its own. */
.ehb-cart-payment-marks .ehb-payment-row {
	flex-wrap: nowrap;
	justify-content: center;
	gap: 14px;
	max-width: none;
	margin: 0;
}

.ehb-cart-payment-marks .ehb-payment-row img {
	height: 19px;
	width: auto;
}

.ehb-cart-payment-marks .ehb-payment-row img[alt*='Mastercard' i],
.ehb-cart-payment-marks .ehb-payment-row img[alt*='Afterpay' i] {
	height: 26px;
}

.ehb-cart-payment-marks .ehb-payment-row img[alt*='Afterpay' i] {
	border-radius: 4px;
}

.ehb-cart-payment-marks .ehb-payment-row img[alt*='Visa' i] {
	height: 16px;
}

/* Cross-sells (Woo's product-collection inside the cart; Figma 197:196).
   Card type sizes come from the theme now that the template's preset font
   sizes are dropped in Emily_HB_Commerce::cart_cross_sell_font_sizes(). */
.woocommerce-cart .wp-block-woocommerce-product-collection {
	padding-top: 36px;
}

.woocommerce-cart .wp-block-woocommerce-product-collection>.wc-block-components-notices {
	margin: 0;
}

.woocommerce-cart .wp-block-woocommerce-product-collection>.wp-block-heading {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product-template {
	gap: 20px;
	margin: 0;
	padding: 0;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product {
	display: flex;
	flex-direction: column;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 14px;
	overflow: hidden;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product:empty {
	display: none;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image {
	position: relative;
	aspect-ratio: 4 / 5;
	padding: 12px;
	background: var(--ehb-surface-lilac);
}

.woocommerce-cart .wp-block-woocommerce-product-collection :is(.ehb-product--skincare,
	.product_cat-skincare,
	.product_cat-beauty,
	.product_cat-beauty-skin) .wc-block-components-product-image,
.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image.ehb-well--skincare {
	background: var(--ehb-surface-blush);
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image a,
.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	padding: 0;
	aspect-ratio: auto;
	object-fit: contain;
	background: none;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge {
	background: var(--ehb-brand-magenta);
	border: 0;
	border-radius: 999px;
	padding: 4px 8px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 9px;
	line-height: 11px;
	letter-spacing: 0.54px;
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
}

.woocommerce-cart .wp-block-woocommerce-product-collection .ehb-product-card__concern {
	margin: 0;
	padding: 16px 16px 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--ehb-brand-rose-plum);
}

.woocommerce-cart .wp-block-woocommerce-product-collection .ehb-product-card__title {
	margin: 0;
	padding: 7px 16px 0;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
	margin: 0;
	padding: 7px 16px 0;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .wc-block-components-product-price {
	margin: 0;
	font-size: inherit;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .ehb-price-suffix {
	margin-left: 8px;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price del {
	display: none;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .ehb-product-card__rating {
	margin: 0;
	padding: 7px 16px 0;
}

/* Add to cart 338×41: full-width pill, 12/700 (global button rule = colour) */
.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button {
	display: block;
	padding: 7px 16px 18px;
}

.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button .wp-block-button__link {
	width: 100%;
	padding: 13px 6px;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.48px;
	white-space: nowrap;
}

/* Mobile 390 (Figma 214:892) */
@media (max-width: 767px) {
	.woocommerce-cart .ehb-cart-title {
		padding-block: 36px 16px;
		font-size: 30px;
		line-height: 38px;
		letter-spacing: -0.3px;
	}

	.woocommerce-cart .ehb-free-shipping-bar {
		margin: 0 0 20px;
		padding: 14px 16px;
	}

	.woocommerce-cart .ehb-free-shipping-bar__message {
		margin-bottom: 10px;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart {
		padding: 0 0 32px;
	}

	/* Row: 72px thumbnail + 14px gap; name, stepper and Remove stack in the
	   right column and the line total sits level with the stepper. */
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		position: relative;
		grid-template-columns: 72px 1fr;
		column-gap: 14px;
	}

	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		padding-right: 0;
	}

	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
		width: 72px;
		height: 72px;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata {
		display: none;
	}

	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		flex-wrap: wrap;
		gap: 11px 18px;
		margin-top: 3px;
	}

	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		flex-basis: 100%;
		font-size: 12px;
		line-height: 18px;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart-item__total {
		position: absolute;
		right: 0;
		bottom: 42px;
		padding-left: 0;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart-item__total::after {
		margin-top: 0;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
		margin-top: 28px;
		padding: 19px;
	}

	.woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
		display: block;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0;
	}

	.ehb-cart-payment-marks .ehb-payment-row {
		gap: 10px;
	}

	/* The sticky bar below (total + CHECKOUT) replaces Woo's own submit button. */
	.woocommerce-cart .wc-block-cart .wc-block-cart__submit-container {
		display: none;
	}

	/* Cross-sells scroll sideways, ~1.5 cards visible (--ehb-carousel-card) */
	.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product-template {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.woocommerce-cart .wp-block-woocommerce-product-collection .wc-block-product {
		flex: 0 0 var(--ehb-carousel-card);
		scroll-snap-align: start;
	}

	.woocommerce-cart .wp-block-woocommerce-product-collection .ehb-price-suffix {
		display: block;
		margin-left: 0;
	}
}

/* ==========================================================================
   Checkout Block — Figma 199:1197 (1440) / 215:1047 (390)
   Visual only (SCOPE NOTE): field order, floating labels and the step flow are
   Woo's. What lives in the editor instead of here: the Terms tick and text,
   the "Place order · $total" label, the "Return to cart" link (block
   settings), the guest / account / phone / company fields (Woo settings) and
   the delivery estimate (shipping rates). Type family, colour and the pill
   button come from tokens.css / components.css (Kadence palette).
   ========================================================================== */

/* Minimal header: Kadence Free has no per-page header, so the top and nav rows
   are hidden and the main row becomes logo + "Secure checkout" (Figma 93px). */
.ehb-checkout-minimal #masthead .site-top-header-wrap,
.ehb-checkout-minimal #masthead .site-bottom-header-wrap,
.ehb-checkout-minimal .kadence-breadcrumbs,
.ehb-checkout-minimal .ehb-breadcrumbs {
	display: none;
}

/* The fixed contact stack and back-to-top sit in the bottom-right corner, which on
   checkout is the order total (desktop) and the form fields above the sticky
   Place order bar (mobile). Checkout is distraction-free, so both go. */
.ehb-checkout-minimal .c123-floating-stack,
.ehb-checkout-minimal .ehb-back-to-top {
	display: none !important;
}

.ehb-checkout-minimal #masthead .site-main-header-wrap .site-header-row-container-inner {
	background: var(--ehb-surface-ink);
}

.ehb-checkout-minimal #masthead .site-main-header-wrap .site-container {
	position: relative;
	padding: 22px max(var(--ehb-gutter), calc((100% - var(--ehb-content-width)) / 2));
}

.ehb-checkout-minimal #masthead .site-main-header-wrap .site-main-header-inner-wrap {
	min-height: 0;
	padding-inline: 0;
}

.ehb-checkout-minimal #masthead .site-main-header-wrap .site-header-item:not(:has(.site-branding)) {
	display: none;
}

.ehb-checkout-minimal #masthead .site-main-header-wrap .site-branding img {
	width: auto;
	max-width: none;
	height: 49px;
}

.ehb-checkout-minimal #masthead .site-main-header-wrap .site-container::after {
	content: '🔒\00a0 Secure checkout';
	position: absolute;
	top: 50%;
	right: max(var(--ehb-gutter), calc((100% - var(--ehb-content-width)) / 2));
	transform: translateY(-50%);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-on-dark);
}

/* Returning-customer strip (Figma "Returning customer"), full-bleed */
.woocommerce-checkout .ehb-checkout-login {
	padding: 16px 0;
	background: var(--ehb-surface-blush);
	box-shadow: 0 0 0 100vmax var(--ehb-surface-blush);
	clip-path: inset(0 -100vmax);
	font-size: 14px;
	line-height: 26px;
	color: var(--ehb-text-body);
}

.woocommerce-checkout .ehb-checkout-login a {
	margin-left: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ehb-brand-magenta);
	text-decoration: none;
}

/* Body: fields 760 + 40 gap + summary 400 */
.woocommerce-checkout .wp-block-woocommerce-checkout {
	padding: 56px 0 88px;
}

@media (min-width: 1000px) {
	.woocommerce-checkout .wc-block-checkout {
		gap: 40px;
		flex-wrap: nowrap;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__main {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		padding-right: 0;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar {
		flex: 0 0 400px;
		width: 400px;
		max-width: 400px;
		align-self: flex-start;
	}
}

/* Step titles: Archivo 20/600 */
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__title {
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -0.1px;
	color: var(--ehb-text-ink);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step {
	margin-bottom: 36px;
}

/* Fields: 8px radius, strong line; focus ring from the brand colour */
.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox .components-combobox-control input,
.woocommerce-checkout .wc-block-checkout .wc-block-components-country-input select,
.woocommerce-checkout .wc-block-checkout .wc-block-components-state-input select,
.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea {
	border: 1px solid var(--ehb-line-strong);
	border-radius: 8px;
	color: var(--ehb-text-ink);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea:focus {
	border-color: var(--ehb-brand-magenta);
	outline: 0;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ehb-brand-magenta) 25%, transparent);
}

/* Shipping + payment options: plain one-line radio rows, not boxes (Figma
   "Radio"): "Standard — AusPost eParcel · $9.95 · about 7 business days".
   Woo draws the frame with ::after on the group and stacks name / price /
   delivery time in two rows, so those are flattened here. */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control::after,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option::after,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option::after {
	display: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
	padding-left: 32px;
	min-height: 22px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option-layout,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__label-group,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__description-group {
	display: contents;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control input[type='radio'].wc-block-components-radio-control__input {
	position: absolute;
	top: 1px;
	left: 0;
	margin: 0;
	transform: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--ehb-line-strong);
	border-radius: 50%;
	background: var(--ehb-surface-paper);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control input[type='radio'].wc-block-components-radio-control__input:checked {
	background: var(--ehb-brand-magenta);
	border-color: var(--ehb-brand-magenta);
	box-shadow: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control input[type='radio'].wc-block-components-radio-control__input:checked::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	margin: 0;
	border: none;
	box-shadow: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-label,
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__description {
	flex: 0 0 auto;
	width: auto;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-label::before,
.woocommerce-checkout .wc-block-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__description::before {
	content: '\00a0·\00a0';
}

/* "Free shipping" needs no price in the line */
.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-label:has(.wc-block-checkout__shipping-option--free) {
	display: none;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-content {
	padding: 0 0 0 32px;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
}

/* Place order 49px tall and full width, "Return to cart" beside it (Figma
   "Actions"). The link and the label are block settings, not CSS. */
@media (min-width: 768px) {
	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row {
		flex-direction: row-reverse;
		align-items: center;
		gap: 20px;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
		flex: 1 1 0;
		width: auto;
	}
}

/* Place order 49px tall; the label and "Return to cart" come from the block */
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button {
	height: auto;
	padding: 17px 30px;
	font-size: 14px;
	line-height: 15px;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted);
	text-decoration: none;
}

/* Tablet 768–1023: Woo Blocks' own container-query on
   .wc-block-components-sidebar-layout measures ITS width, not the viewport,
   and still reports "is-large" (2-column, side by side) down to ~700px. At
   this site's content width that leaves the sidebar column ~190-250px wide —
   too narrow for image + product name + price, so names wrap one letter per
   line. Force single-column stacking through the tablet band, same as the
   <768px behaviour, until the container is wide enough for a real 2nd column. */
@media (min-width: 768px) and (max-width: 1023px) {
	.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout.is-large {
		flex-direction: column;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout.is-large .wc-block-checkout__main,
	.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout.is-large .wc-block-checkout__sidebar {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}
}

/* Order summary card (Figma 199:1197): the sidebar is the card, Woo's inner
   frame and row dividers go. Row/coupon/total type is the shared totals rule. */
.woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar {
	padding: 27px;
	background: var(--ehb-surface-raised);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 14px;
	box-sizing: border-box;
}

.woocommerce-checkout .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title,
.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__content {
	padding: 0;
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -0.1px;
	color: var(--ehb-text-ink);
}

.wc-block-components-sidebar-layout .wc-block-components-totals-wrapper {
	padding: 0;
	border: 0;
}

/* Mobile 390 (Figma 215:1047) */
@media (max-width: 767px) {

	.ehb-checkout-minimal #masthead .site-mobile-header-wrap .site-top-header-wrap,
	.ehb-checkout-minimal #masthead .site-mobile-header-wrap .site-bottom-header-wrap {
		display: none;
	}

	.ehb-checkout-minimal #masthead .site-mobile-header-wrap .site-main-header-wrap .site-header-row-container-inner {
		background: var(--ehb-surface-ink);
	}

	.ehb-checkout-minimal #masthead .site-mobile-header-wrap .site-main-header-wrap .site-container {
		position: relative;
		padding: 14px var(--ehb-gutter);
	}

	.ehb-checkout-minimal #masthead .site-mobile-header-wrap .site-main-header-wrap .site-header-item:not(:has(.site-branding)) {
		display: none;
	}

	.ehb-checkout-minimal #masthead .site-mobile-header-wrap .site-main-header-wrap .site-branding img {
		width: auto;
		height: 37px;
	}

	.ehb-checkout-minimal #masthead .site-mobile-header-wrap .site-main-header-wrap .site-container::after {
		content: '🔒\00a0 Secure checkout';
		position: absolute;
		top: 50%;
		right: var(--ehb-gutter);
		transform: translateY(-50%);
		font-size: 12px;
		line-height: 18px;
		color: var(--ehb-text-on-dark);
	}

	.woocommerce-checkout .ehb-checkout-login {
		padding: 12px 0;
	}

	.woocommerce-checkout .wp-block-woocommerce-checkout {
		padding: 32px 0 48px;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__title {
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar {
		padding: 15px;
	}

	/* Figma 215:1047: full width place order button, stacked with return link */
	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
		width: 100%;
		display: flex;
		justify-content: center;
		text-align: center;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
		text-align: center;
		display: block;
		margin-inline: auto;
	}
}

/* ==========================================================================
   Mobile Sticky Bottom Bars (PDP & Cart)
   ========================================================================== */

.ehb-sticky-bar,
.ehb-sticky-bar[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.ehb-sticky-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 120;
		display: block;
		background: var(--ehb-surface-paper);
		border-top: 1px solid var(--ehb-line-subtle);
		box-shadow: 0 -4px 16px rgba(36, 19, 32, 0.08);
		padding: 12px var(--ehb-gutter);
	}

	.ehb-sticky-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ehb-space-16);
		max-width: var(--ehb-content-width);
		margin-inline: auto;
	}

	.ehb-sticky-bar__price {
		display: flex;
		flex-direction: column;
	}

	.ehb-sticky-bar__amount {
		font-family: var(--ehb-font-body);
		font-weight: var(--ehb-weight-bold);
		font-size: var(--ehb-size-price-compact);
		color: var(--ehb-text-ink);
	}

	.ehb-sticky-bar__tax {
		font-family: var(--ehb-font-body);
		font-size: var(--ehb-size-body-caption);
		color: var(--ehb-text-muted);
	}

	.ehb-sticky-bar__action {
		height: 48px;
		padding: 0 var(--ehb-space-24);
		font-size: var(--ehb-size-label-button-compact);
		margin: 0;
	}

	/* Add-to-cart feedback on the sticky button (assets/js/add-to-cart.js). */
	.ehb-sticky-bar.ehb-sticky-bar--pdp .ehb-sticky-bar__action.loading {
		opacity: 0.7;
		cursor: progress;
	}

	.ehb-sticky-bar.ehb-sticky-bar--pdp .ehb-sticky-bar__action.added {
		background: var(--ehb-surface-ink);
	}

	/* PDP specific sticky bar (Figma 213:933, height 73px) */
	.ehb-sticky-bar.ehb-sticky-bar--pdp,
	.ehb-sticky-bar.ehb-sticky-bar--cart {
		display: flex;
		align-items: center;
		height: 73px;
		padding: 12px 16px;
		box-sizing: border-box;
		z-index: 999;
	}

	.ehb-sticky-bar.ehb-sticky-bar--pdp .ehb-sticky-bar__inner,
	.ehb-sticky-bar.ehb-sticky-bar--cart .ehb-sticky-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
	}

	.ehb-sticky-bar.ehb-sticky-bar--pdp .ehb-sticky-bar__amount,
	.ehb-sticky-bar.ehb-sticky-bar--cart .ehb-sticky-bar__amount {
		font-family: var(--ehb-font-body);
		font-weight: 600;
		font-size: 18px;
		line-height: 26px;
		color: var(--ehb-text-ink);
	}

	.ehb-sticky-bar.ehb-sticky-bar--pdp .ehb-sticky-bar__tax,
	.ehb-sticky-bar.ehb-sticky-bar--cart .ehb-sticky-bar__tax {
		font-family: var(--ehb-font-body);
		font-size: 12px;
		line-height: 18px;
		color: var(--ehb-text-muted);
	}

	.ehb-sticky-bar.ehb-sticky-bar--pdp .ehb-sticky-bar__action,
	.ehb-sticky-bar.ehb-sticky-bar--cart .ehb-sticky-bar__action {
		flex: 1 0 0;
		min-width: 0;
		height: 48px;
		padding: 0 24px;
		background: var(--ehb-brand-orchid);
		border: none;
		border-radius: var(--ehb-radius-pill);
		font-family: var(--ehb-font-display);
		font-weight: var(--ehb-weight-bold);
		font-size: 14px;
		letter-spacing: 1.12px;
		text-transform: uppercase;
		color: var(--ehb-text-on-dark);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Replace bottom nav on PDP on mobile (Figma node 213:933) */
	.single-product #mobile-footer-nav,
	.single-product .kadence-mobile-bottom-nav {
		display: none;
	}

	/* Prevent content from hiding behind mobile sticky bars */
	body.single-product {
		padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px));
	}

	.ehb-sticky-bar.ehb-sticky-bar--cart[hidden] {
		display: none;
	}

	body.woocommerce-cart {
		padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px));
	}
}

/* Native Woo gallery and accessible mobile panels. */
.woocommerce div.product .woocommerce-tabs ul.tabs[hidden] {
	display: none;
}

.ehb-product-accordion details {
	border-bottom: 1px solid var(--ehb-line-subtle);
}

.ehb-product-accordion summary {
	padding-block: 16px;
	cursor: pointer;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	list-style: none;
}

.ehb-product-accordion summary::-webkit-details-marker {
	display: none;
}

.ehb-product-accordion summary::after {
	content: '+';
	float: right;
}

.ehb-product-accordion details[open] summary::after {
	content: '−';
}

.woocommerce .ehb-product-accordion .woocommerce-Tabs-panel {
	display: block !important;
	margin: 0;
	padding: 0 0 16px;
}

.ehb-product-accordion summary:focus-visible {
	outline: 2px solid var(--ehb-brand-magenta);
	outline-offset: 4px;
}

/* ==========================================================================
   Order received — Figma 201:1362 (1440) / 222:1634 (390)
   Layout is the editable order-confirmation wp_block (see
   tools/wp-cli/setup-checkout.php); this styles its blocks. Delivery line,
   GST row and total note come from Emily_HB_Commerce.
   ========================================================================== */

/* Confirmation band: full-bleed blush, H1 + status line + order meta */
.woocommerce-order-received .ehb-order-hero {
	padding: 72px 0 56px;
	background: var(--ehb-surface-blush);
	box-shadow: 0 0 0 100vmax var(--ehb-surface-blush);
	clip-path: inset(0 -100vmax);
}

.woocommerce-order-received .ehb-order-hero h1,
.woocommerce-order-received .ehb-order-hero .woocommerce-thankyou-order-received {
	margin: 0 0 14px;
}

.woocommerce-order-received .ehb-order-hero .wc-block-order-confirmation-status-description {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 30px;
	color: var(--ehb-text-body);
}

.woocommerce-order-received .ehb-order-hero .wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body);
}

.woocommerce-order-received .ehb-order-hero .wc-block-order-confirmation-summary-list-item__key {
	font-weight: 600;
}

/* Body: cards 760 + 40 + totals 400 */
.woocommerce-order-received .ehb-order-body {
	flex-wrap: nowrap;
	gap: 40px;
	margin: 0;
	padding: 56px 0 88px;
}

.woocommerce-order-received .ehb-order-body>.wp-block-column:first-child {
	flex: 1 1 0;
	min-width: 0;
}

.woocommerce-order-received .ehb-order-body>.wp-block-column:last-child {
	flex: 0 0 400px;
}

.ehb-order-body .wc-block-order-confirmation-shipping-wrapper,
.ehb-order-body .wc-block-order-confirmation-billing-wrapper,
.ehb-order-body .wc-block-order-confirmation-additional-information,
.ehb-order-body .wc-block-order-confirmation-totals-wrapper {
	margin: 0 0 28px;
	padding: 22px 24px;
	background: var(--ehb-surface-raised);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 14px;
}

.ehb-order-body .wc-block-order-confirmation-totals-wrapper {
	padding: 28px;
}

.ehb-order-body h2 {
	margin: 0 0 10px;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0;
	color: var(--ehb-text-ink);
}

.ehb-order-body .wc-block-order-confirmation-totals-wrapper h2 {
	margin-bottom: 6px;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: -0.1px;
}

.ehb-order-body address,
.ehb-order-body p {
	margin: 0;
	font-style: normal;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body);
}

/* Woo frames each address in its own bordered box; the card already does that */
.ehb-order-body .wc-block-order-confirmation-shipping-address,
.ehb-order-body .wc-block-order-confirmation-billing-address {
	padding: 0;
	border: 0;
}

/* GST invoice table: item rows, then Shipping / Taxes / Total. Woo scopes its
   cell padding under .wc-block-order-confirmation-totals, so this does too. */
.ehb-order-body .wc-block-order-confirmation-totals table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.ehb-order-body .wc-block-order-confirmation-totals table th,
.ehb-order-body .wc-block-order-confirmation-totals table td {
	padding: 10px 0;
	border: 0;
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: var(--ehb-text-body);
	overflow-wrap: anywhere;
}

.ehb-order-body .wc-block-order-confirmation-totals table thead th {
	padding-top: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--ehb-text-muted);
}

.ehb-order-body .wc-block-order-confirmation-totals table td:last-child,
.ehb-order-body .wc-block-order-confirmation-totals table th:last-child {
	text-align: right;
	white-space: nowrap;
}

.ehb-order-body .wc-block-order-confirmation-totals table a {
	color: var(--ehb-text-ink);
	text-decoration: none;
}

.ehb-order-body .wc-block-order-confirmation-totals table tfoot tr:last-child th,
.ehb-order-body .wc-block-order-confirmation-totals table tfoot tr:last-child td {
	padding-block: 16px;
	border-top: 1px solid var(--ehb-line-subtle);
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--ehb-text-ink);
}

.ehb-order-body .ehb-order-abn {
	margin-top: 8px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
}

/* Tablet 768–1023: stack order body columns so address cards and totals aren't squeezed */
@media (min-width: 768px) and (max-width: 1023px) {
	.woocommerce-order-received .ehb-order-body {
		flex-direction: column;
		gap: 28px;
	}

	.woocommerce-order-received .ehb-order-body>.wp-block-column:last-child {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.woocommerce-order-received .ehb-order-hero {
		padding: 44px 0 36px;
	}

	.woocommerce-order-received .ehb-order-hero h1 {
		font-size: 30px;
		line-height: 38px;
	}

	.woocommerce-order-received .ehb-order-body {
		flex-direction: column;
		gap: 20px;
		padding: 32px 0 40px;
	}

	.woocommerce-order-received .ehb-order-body>.wp-block-column:last-child {
		flex-basis: auto;
	}

	.ehb-order-body .wc-block-order-confirmation-totals-wrapper {
		padding: 20px;
	}

	/* Figma 222:1717: full-width CONTINUE SHOPPING button */
	.ehb-order-body .wp-block-buttons,
	.ehb-order-body .wp-block-button,
	.ehb-order-body .wp-block-button__link {
		width: 100%;
		display: flex;
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   WooCommerce My Account Page Styles (Emily H&B Design System)
   ========================================================================== */

.woocommerce-account .site-main {
	padding-block: var(--ehb-space-48, 48px);
}

.woocommerce-account .entry-content {
	max-width: var(--ehb-content-width, 1140px);
	margin-inline: auto;
	width: 100%;
}

.woocommerce-account h2,
.woocommerce-account h3 {
	font-family: var(--ehb-font-display);
	font-weight: 700;
	color: var(--ehb-text-ink, #241320);
}

.woocommerce-account a {
	color: var(--ehb-brand-magenta, #944c72);
	text-decoration: underline;
}

.woocommerce-account a:hover {
	color: var(--ehb-brand-rose-plum, #6c2d52);
}

/* --- Logged-out Login / Register Cards --- */

.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-top: 16px;
}

.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2,
.woocommerce-account form.woocommerce-form-login {
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-xl, 16px);
	padding: 36px 32px;
	box-shadow: 0 4px 20px rgba(36, 19, 32, 0.04);
	box-sizing: border-box;
}

/* Single login form when registration is disabled */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 480px;
	margin: 0 auto;
}

.woocommerce-account:not(.logged-in) .woocommerce:has(#customer_login) {
	max-width: 960px;
}

.woocommerce-account:not(.logged-in) .woocommerce>h2 {
	text-align: center;
	margin: 0 0 24px;
	font-family: var(--ehb-font-display);
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	color: var(--ehb-text-ink, #241320);
}

.woocommerce-account:not(.logged-in) .woocommerce>form.woocommerce-form-login {
	width: 100%;
	margin: 0 auto;
}

.woocommerce-account form .form-row {
	margin-bottom: 18px;
	padding: 0;
}

.woocommerce-account form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--ehb-text-ink, #241320);
}

.woocommerce-account form .form-row .required {
	color: var(--ehb-brand-magenta, #944c72);
	margin-left: 2px;
}

.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form select,
.woocommerce-account form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-md, 8px);
	font-family: var(--ehb-font-body);
	font-size: 15px;
	line-height: 22px;
	color: var(--ehb-text-ink, #241320);
	background: #ffffff;
	box-sizing: border-box;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.woocommerce-account form input[type="text"]:focus,
.woocommerce-account form input[type="email"]:focus,
.woocommerce-account form input[type="password"]:focus,
.woocommerce-account form input[type="tel"]:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
	outline: none;
	border-color: var(--ehb-brand-magenta, #944c72);
	box-shadow: 0 0 0 3px rgba(148, 76, 114, 0.15);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--ehb-text-body, #241320);
	margin-bottom: 20px;
	cursor: pointer;
}

.woocommerce-account form button.woocommerce-Button,
.woocommerce-account form button[type="submit"],
.woocommerce-account .woocommerce-Button.button {
	width: 100%;
	padding: 14px 28px;
	background: var(--ehb-brand-magenta, #944c72);
	color: #ffffff !important;
	border: none;
	border-radius: 999px;
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: background-color 150ms ease, transform 100ms ease;
}

.woocommerce-account form button.woocommerce-Button:hover,
.woocommerce-account form button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button.button:hover {
	background: var(--ehb-brand-rose-plum, #6c2d52);
	color: #ffffff !important;
}

.woocommerce-account .woocommerce-LostPassword {
	margin-top: 16px;
	text-align: center;
	font-size: 13.5px;
}

/* --- Logged-in Dashboard Layout --- */

.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
	width: 240px;
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-lg, 12px);
	padding: 16px 12px;
	box-shadow: 0 2px 12px rgba(36, 19, 32, 0.03);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 10px 16px;
	border-radius: 8px;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--ehb-text-ink, #241320);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--ehb-surface-blush, #fbf7fa);
	color: var(--ehb-brand-magenta, #944c72);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--ehb-brand-magenta, #944c72);
	color: #ffffff !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 0;
	min-width: 0;
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-xl, 16px);
	padding: 36px;
	box-shadow: 0 2px 12px rgba(36, 19, 32, 0.03);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content p {
	font-family: var(--ehb-font-body);
	font-size: 15px;
	line-height: 24px;
	color: var(--ehb-text-body, #241320);
	margin-bottom: 18px;
}

/* Orders Table */
.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
	box-sizing: border-box;
}

.woocommerce-account table.woocommerce-orders-table th {
	padding: 12px 16px;
	border-bottom: 2px solid var(--ehb-line-subtle, #e7dce5);
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ehb-text-muted, #6b5f69);
	text-align: left;
}

.woocommerce-account table.woocommerce-orders-table td {
	padding: 16px;
	border-bottom: 1px solid var(--ehb-line-subtle, #e7dce5);
	font-size: 14px;
	line-height: 20px;
	color: var(--ehb-text-ink, #241320);
}

.woocommerce-account table.woocommerce-orders-table .woocommerce-button {
	display: inline-block;
	width: auto;
	padding: 6px 16px;
	background: var(--ehb-surface-blush, #fbf7fa);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ehb-brand-magenta, #944c72) !important;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.woocommerce-account table.woocommerce-orders-table .woocommerce-button:hover {
	background: var(--ehb-brand-magenta, #944c72);
	border-color: var(--ehb-brand-magenta, #944c72);
	color: #ffffff !important;
}

/* Addresses Section */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 20px;
}

.woocommerce-account .woocommerce-Address {
	background: var(--ehb-surface-blush, #fbf7fa);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-Address .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address .title h3 {
	margin: 0;
	font-size: 16px;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body, #241320);
}

/* Notices & Alerts */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	padding: 16px 20px;
	border-radius: 10px;
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 24px;
	box-sizing: border-box;
}

.woocommerce-notices-wrapper .woocommerce-message {
	background: #edf7ed;
	border: 1px solid #c8e6c9;
	color: #1e4620;
}

.woocommerce-notices-wrapper .woocommerce-info {
	background: var(--ehb-surface-blush, #fbf7fa);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	color: var(--ehb-text-ink, #241320);
}

.woocommerce-notices-wrapper .woocommerce-error {
	background: #fdf2f2;
	border: 1px solid #f8b4b4;
	color: #9b1c1c;
	list-style: none;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 1023px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		flex-direction: column;
		gap: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 100%;
		flex: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		white-space: nowrap;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 24px 20px;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.woocommerce-account:not(.logged-in) .u-column1,
	.woocommerce-account:not(.logged-in) .u-column2,
	.woocommerce-account form.woocommerce-form-login {
		padding: 24px 18px;
	}

	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.single-product .ehb-pdp-top-wrapper {
		padding-inline: 0;
	}

	.single-product .ehb-pdp-top-wrapper .woocommerce-product-gallery {
		flex-basis: auto;
	}

	.single-product .ehb-pdp-top-wrapper .summary.entry-summary {
		flex-basis: auto;
	}

	.woocommerce div.product .related.products {
		padding-block: 52px;
	}

	.woocommerce div.product .related.products .ehb-section-head {
		gap: 6px;
		margin-bottom: 20px;
	}

	.woocommerce div.product .related.products .ehb-section-head__title {
		margin: 0;
	}

	.woocommerce div.product .related.products ul.products {
		gap: 12px;
		margin-inline: 0;
		padding-inline: 0;
	}

	.woocommerce div.product .related.products ul.products li.product {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		min-width: var(--ehb-carousel-card);
	}

	.woocommerce div.product .related.products ul.products {
		align-items: stretch;
	}

	.woocommerce div.product .related.products ul.products li.product {
		height: auto;
	}

	.woocommerce div.product .related.products ul.products li.product .product-details {
		padding: 16px 16px 18px;
		gap: 7px;
	}

	.woocommerce div.product .related.products .woocommerce-loop-product__title {
		font-size: 16px;
		line-height: 22px;
	}

	.woocommerce div.product .related.products .ehb-card-eyebrow {
		font-size: 11px;
		line-height: 14px;
	}

	.woocommerce div.product .related.products .price {
		font-size: 16px;
		line-height: 22px;
	}

	.woocommerce div.product .related.products .price .ehb-price-suffix {
		display: inline-block;
		font-size: 12px;
		line-height: 18px;
	}

	.woocommerce div.product .related.products .ehb-card-rating {
		flex-wrap: wrap;
		font-size: 12px;
		line-height: 18px;
	}

	.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel p {
		font-size: 14px;
		line-height: 22px;
	}

	/* Keep Woo's actual submit button and validation; only fix its position. */
	.ehb-checkout-minimal #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start),
	.ehb-checkout-minimal #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner {
		background: var(--ehb-surface-ink) !important;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row::before {
		content: '';
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(73px + env(safe-area-inset-bottom, 0px));
		background: var(--ehb-surface-paper);
		border-top: 1px solid var(--ehb-line-subtle);
		z-index: 99;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		width: calc(100% - 32px);
		min-height: 49px;
		margin: 0;
		z-index: 100;
	}

	/* Keyboard open (see add-to-cart.js): hide the bar instead of letting iOS Safari float it over the form. */
	.ehb-typing.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row::before,
	.ehb-typing.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
		opacity: 0;
		pointer-events: none;
	}

	/* "PLACE ORDER · $total" (Figma 215:1262); the total is copied onto data-ehb-total by add-to-cart.js */
	.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button[data-ehb-total]::after {
		content: '· ' attr(data-ehb-total);
		margin-left: .4em;
		letter-spacing: inherit;
	}

	.woocommerce-checkout:not(.woocommerce-order-received) #colophon {
		padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px));
	}
}

/* Checkout mobile (Figma 215:1047): 54px fields, 14/22 checkbox copy, 16/26 recap rows */
@media (max-width: 767px) {
	.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input[type] {
		min-height: 54px;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__label {
		font-size: 14px;
		line-height: 22px;
	}

	.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label,
	.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value {
		font-size: 16px;
		line-height: 26px;
		font-weight: 500;
		color: var(--ehb-text-ink);
	}
}

/* Mobile/tablet filter drawer: group headers are plain rows (not the pill trigger); reset link sits in the gutter */
@media (max-width: 1023px) {
	.ehb-catalog-results .ehb-clear-filters-btn {
		padding: 16px var(--ehb-gutter, 16px) 0;
		font-size: 14px !important;
		line-height: 20px;
	}
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	scrollbar-width: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

/* Breadcrumb on one line (long product names truncate instead of wrapping into a second row) */
@media (max-width: 767px) {
	.ehb-breadcrumb-bar .ehb-breadcrumb {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.ehb-breadcrumb-bar .ehb-breadcrumb li {
		flex: 0 0 auto;
	}

	.ehb-breadcrumb-bar .ehb-breadcrumb li:last-child {
		flex: 0 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}
}

/* Thumb well sits on the li so the img's multiply blends against blush, not the white page */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	background: var(--ehb-surface-lilac, #f0e8f6);
	border-radius: 8px;
	overflow: hidden;
}

:is(body.ehb-pdp--skincare,
	body.product_cat-skincare,
	body.product_cat-beauty,
	body.product_cat-beauty-skin,
	.single-product .product.product_cat-skincare,
	.single-product .product.ehb-product--skincare) div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	background: var(--ehb-surface-blush, #f7eaf1);
}

:is(body.ehb-pdp--vitamins,
	body.product_cat-vitamins,
	.single-product .product.product_cat-vitamins,
	.single-product .product.ehb-product--vitamins) div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	background: var(--ehb-surface-lilac, #f0e8f6);
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
	background: transparent;
}

/* Checkout address card: "Edit" link shrank to 2px and wrapped per character (flex item, no basis) */
.wc-block-components-address-card .wc-block-components-address-card__edit {
	flex: 0 0 auto;
	white-space: nowrap;
	margin-left: 16px;
}

.wc-block-components-address-card {
	gap: 16px;
}

.wc-block-components-address-card address {
	min-width: 0;
	flex: 1 1 auto;
}

/* ==========================================================================
   Back-in-stock form (Back In Stock Notifier for WooCommerce, F9) on out-of-stock PDPs.
   The plugin ships a Bootstrap "panel-primary" (blue header bar, centred light-blue button). Restyled as the
   same card as "Buy more, pay less" (.ehb-tiered-offer): lilac surface, ink title, the PDP's pill button.
   !important only where the plugin writes inline style="text-align:center".
   ========================================================================== */
.single-product .cwginstock-subscribe-form {
	margin: 0 0 20px;
}

.single-product .cwginstock-subscribe-form .cwginstock-panel-primary {
	margin: 0;
	padding: 16px 18px 18px;
	background: var(--ehb-surface-lilac, #f0e8f6);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: var(--ehb-radius-md);
	box-shadow: none;
}

/* Plugin colours the bar via .panel-primary > .panel-heading — match that chain to outrank it. */
.single-product .cwginstock-subscribe-form .cwginstock-panel-primary>.cwginstock-panel-heading {
	padding: 0;
	background: none;
	border: 0;
}

.single-product .cwginstock-subscribe-form .cwginstock-panel-heading h4 {
	margin: 0 0 12px;
	padding: 0;
	background: none;
	text-align: left !important;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

.single-product .cwginstock-subscribe-form .cwginstock-panel-body,
.single-product .cwginstock-subscribe-form .row,
.single-product .cwginstock-subscribe-form [class*="col-md-"] {
	margin: 0;
	padding: 0;
}

.single-product .cwginstock-subscribe-form .form-group {
	margin: 0;
	text-align: left !important;
}

.single-product .cwginstock-subscribe-form .cwgstock_email {
	box-sizing: border-box;
	height: 48px;
	padding: 0 16px;
	text-align: left !important;
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
	font-size: 15px;
	color: var(--ehb-text-ink);
}

.single-product .cwginstock-subscribe-form .cwg_iagree_checkbox {
	margin: 12px 0 14px;
	font-size: 13px;
	line-height: 20px;
	color: var(--ehb-text-body);
}

.single-product .cwginstock-subscribe-form .cwg_iagree_checkbox label {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 28px;
	font-weight: 400;
}

/* Not flex: the label's text and link are separate nodes and would become separate columns. */
.single-product .cwginstock-subscribe-form .cwg_iagree_checkbox input {
	position: absolute;
	top: 1px;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ehb-brand-orchid);
}

.single-product .cwginstock-subscribe-form .cwgstock_button {
	width: 100%;
	height: 48px;
	padding: 0 30px;
	background: var(--ehb-brand-orchid);
	border: 0;
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 14px;
	line-height: 48px;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: #ffffff;
	cursor: pointer;
}

.single-product .cwginstock-subscribe-form .cwgstock_button:hover,
.single-product .cwginstock-subscribe-form .cwgstock_button:focus-visible {
	background: var(--ehb-brand-rose-plum);
}

.single-product .cwginstock-subscribe-form .cwgstock_output:not(:empty) {
	margin-top: 12px;
	font-size: 14px;
	line-height: 20px;
}

/* Checkout/cart selects (Country, State): Woo floats the label inside the box at 10px / 6px, but the shared Form
   Field rule gave the select 14px 16px padding, so the value sat 7px right of its label and its descenders were
   clipped. Same box as the text inputs (54px, label row on top). The checkout-scoped 1px border above also
   outranked the :focus rule, leaving no visible focus (WCAG 2.4.7). */
.wp-block-woocommerce-checkout .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select {
	height: 54px;
	padding: 24px 9px 8px;
	line-height: 22px;
}

.wp-block-woocommerce-checkout .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-cart .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--ehb-brand-magenta);
	box-shadow: inset 0 0 0 1px var(--ehb-brand-magenta);
}

/* My Account "show password" eye: 21.6px → 24px target (WCAG 2.5.8). */
.woocommerce form .show-password-input {
	min-width: 24px;
	min-height: 24px;
}
/* Extended delivery ("up to 14 business days"): products carrying the extended-delivery shipping class
   (Emily_HB_Commerce::EXTENDED_CLASS). Product page line under the stock badge; cart/checkout notice. */
.single-product div.summary .ehb-pdp-delivery-note {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ehb-text-ink);
	margin: 0;
}

.ehb-delivery-notice {
	margin: 0 0 24px;
	padding: 14px 20px;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-subtle);
	border-left: 4px solid var(--ehb-brand-rose-plum);
	border-radius: 8px;
	color: var(--ehb-text-ink);
	font-size: 15px;
	line-height: 24px;
}

.ehb-delivery-notice[hidden] {
	display: none;
}

.ehb-delivery-notice p {
	margin: 0;
}

.woocommerce-checkout .ehb-delivery-notice {
	margin: 24px 0 0;
}

/* "Business days after we lodge the parcel…" — under the shipping options (cart.js part 3). */
/* React mounts the fill before or after the rates depending on which loads first; pin it below them. */
.wc-block-components-shipping-rates-control:has(> .ehb-lodge-note) {
	display: flex;
	flex-direction: column;
}

.ehb-lodge-note {
	order: 99;
	margin: 12px 0 0;
	color: var(--ehb-text-muted);
	font-size: 13px;
	line-height: 20px;
}

@media (max-width: 767px) {
	.single-product div.summary .ehb-pdp-delivery-note {
		font-size: 13px;
		line-height: 20px;
	}

	.ehb-delivery-notice {
		padding: 12px 16px;
		font-size: 14px;
		line-height: 22px;
	}
}