/* ==========================================================================
   Emily H&B — Page sections
   --------------------------------------------------------------------------
   Layout for the eleven homepage patterns in /patterns/. Component-level
   styling lives in components.css; this file only positions things.

   Desktop frames are 1440 wide with a 120px gutter, so the content column is
   1200. The header is the exception at 48px — see header.css.

   TWO THINGS THAT BIT, BOTH FOUND BY MEASURING RATHER THAN BY EYE:

   1. Kadence ships
        .entry-content .alignfull { padding-left: 0; padding-right: 0 }
      at (0,2,0), which outranked `.ehb-section` and silently zeroed the
      horizontal gutter on EVERY full-width section. The content still looked
      right because .ehb-section > * is capped at 1200 and centred, so the
      bug only showed on full-bleed children. Every gutter rule below is
      written at (0,3,0) to clear it.

   2. Each section has its own vertical rhythm in Figma — 64, 80, 88 and 104
      are all in use. A single 88 default was wrong for five of them.

   3. Found 22/09/2026 auditing mobile/tablet: EVERY .alignfull section (hero,
      bands, breadcrumb bar, footer strip — anything full-bleed) sat a few px
      short of each screen edge on mobile/tablet, with a matching slice cut
      off the other side. Kadence core computes full-bleed width as
      `--global-vw: calc(100vw - 0.5 * var(--scrollbar-offset))` on
      `.wp-site-blocks` (content.min.css — vendor, not ours to edit), where
      `--scrollbar-offset` is a JS-measured scrollbar width applied as a flat
      constant everywhere. Whether a real layout scrollbar exists (and how
      wide it is) varies by browser/device, so a hardcoded correction is
      wrong in one direction or the other depending on context — confirmed by
      measuring both ways: forcing it to 0px undercorrected on a real
      reserved-scrollbar viewport. Redefine it as a self-measuring value
      instead of guessing a constant: `100vw - 100%` is exactly the gap
      between viewport width and true available width in the CURRENT
      context (0 when nothing reserves scrollbar space, whatever pixel
      amount otherwise) — doubled because the vendor formula only takes
      half of it.
   ========================================================================== */

.wp-site-blocks {
	--scrollbar-offset: calc(2 * (100vw - 100%));
}

.ehb-section {
	/* Was 88px (Figma). Tightened after the 1440 container went in: two stacked sections put
	   88 + 104 = 192px of dead space between the last card of one and the heading of the next,
	   which read as a gap rather than a break. healthpost.com.au runs 30-40px here. */
	padding-block: 64px;
	background: var(--ehb-surface-paper);
}

.entry-content .ehb-section.alignfull,
.entry-content .ehb-deal-strip.alignfull,
.entry-content .ehb-bundles.alignfull,
.entry-content .ehb-payment-strip.alignfull,
.entry-content .ehb-newsletter.alignfull {
	padding-inline: var(--ehb-gutter);
}

/* Figma vertical padding, per section — scaled down with .ehb-section above (was 104px). */
.entry-content .ehb-concerns.alignfull,
.entry-content .ehb-why.alignfull,
.entry-content .ehb-reviews.alignfull {
	padding-block: 72px;
}

.entry-content .ehb-payment-strip.alignfull {
	padding-block: 64px;
}

.entry-content .ehb-newsletter.alignfull {
	padding-block: 80px;
}

/* Shop by Concern matches the standard 1200px column on desktop.
   On mobile, it bleeds right for swipe (see mobile media query below). */
.entry-content .ehb-concerns.alignfull {
	padding-inline: var(--ehb-gutter);
}

.entry-content .ehb-concerns.alignfull>* {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
}

.ehb-concerns__band .ehb-section-head {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
}

/* ==========================================================================
   Block margin reset inside section containers
   --------------------------------------------------------------------------
   Kadence gives every block a vertical margin —
     .single-content p { margin-bottom: var(--global-md-spacing) }
   plus heading margins — and those stack ON TOP of the flex `gap` these
   containers use. In the hero caption that added 132px to a 198px block and
   pushed the packshot out of the top of the section.

   Every container listed here sets its own rhythm with `gap`, so the block
   margins must go. Long-form article content is untouched: none of these
   selectors reach it.
   ========================================================================== */

/* Each selector is prefixed with .entry-content to reach (0,2,0). Kadence's
   `.single-content p` is (0,1,1) and beat the unprefixed (0,1,0) version. */
.entry-content .ehb-deal-strip__inner>*,
.entry-content .ehb-hero__half>*,
.entry-content .ehb-hero__caption>*,
.entry-content .ehb-bundles__offer>*,
.entry-content .ehb-section-head>*,
.entry-content .ehb-payment-strip>*,
.entry-content .ehb-why__statement>*,
.entry-content .ehb-why__item>*,
.entry-content .ehb-reviews__head>*>*,
.entry-content .ehb-review>*,
.entry-content .ehb-centres__col>*,
.entry-content .ehb-newsletter>*,
.entry-content .ehb-tier>* {
	margin-block: 0;
}

/* The buttons wrapper is a block too. */
.entry-content .ehb-section .wp-block-buttons,
.entry-content .ehb-hero .wp-block-buttons,
.entry-content .ehb-bundles .wp-block-buttons,
.entry-content .ehb-deal-strip .wp-block-buttons {
	margin-block: 0;
}

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

.entry-content .ehb-section--raised.alignfull,
.ehb-section--raised {
	background: var(--ehb-surface-raised);
}

/* Centre hub bands use two tinted grounds beyond --raised: blush (#f7eaf1) and
   lilac (#f0e8f6). Figma 203:1475 / 205:1711 — the contextual-product band is
   blush on Health, lilac on Beauty. */
.entry-content .ehb-section--blush.alignfull,
.ehb-section--blush {
	background: var(--ehb-surface-blush);
}

.entry-content .ehb-section--lilac.alignfull,
.ehb-section--lilac {
	background: var(--ehb-surface-lilac);
}

.ehb-section .ehb-section-head {
	margin-bottom: var(--ehb-space-32);
}

@media (max-width: 1023px) {

	.ehb-section,
	.entry-content .ehb-concerns.alignfull,
	.entry-content .ehb-why.alignfull,
	.entry-content .ehb-reviews.alignfull {
		padding-block: var(--ehb-space-56);
	}
}

/* ==========================================================================
   Hot Deals promo strip
   ========================================================================== */

/* Figma: 1440x59, content horizontally centred, 28px gaps. The 59 is a fixed
   height — the 18px padding in the frame is nominal, and the 33px CTA is
   simply centred inside it. Setting 18px block padding on top of the content
   made the strip 98 tall. */
.ehb-deal-strip {
	display: flex;
	align-items: center;
	min-height: 59px;
	padding-block: 0;
	padding-inline: var(--ehb-gutter);
	background: var(--ehb-surface-ink);
}

.ehb-deal-strip__inner {
	width: 100%;
	max-width: var(--ehb-content-width);
	margin-inline: auto;
	gap: 28px;
}

/* Centred, as in Figma 107:391: label + copy + CTA run x 374–1066 in the 1440
   frame, centre 720. The saved block's justifyContent:"center" already does this;
   restated here so a stale block attribute cannot pull it left. Mobile stacks it
   left-aligned (Figma 160:257, rules further down). */
.ehb-deal-strip .ehb-deal-strip__inner.is-layout-flex {
	justify-content: center;
}

.ehb-deal-strip__label {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: 17px;
	line-height: 18px;
	letter-spacing: 0.02em;
	/* Figma sets textCase UPPER on this node — the layer reads "Hot Deals" but
	   renders "HOT DEALS". Missing it was why the label measured 86px against
	   the design's 104. */
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	white-space: nowrap;
}

.ehb-deal-strip__copy {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 17px;
	color: var(--ehb-text-muted-on-dark);
}

/* The strip CTA is magenta, not the orchid primary: it is an interruption,
   and it is the only magenta button on the page. Figma gives it its own
   metrics — 127x33, 10/22 padding, 11.5px at 8% tracking — which are not any
   of the three Button sizes, so it does not reuse .ehb-btn-sm. */
/* Three classes deep so it also wins over .wp-block-button.ehb-btn-sm on any
   page saved before that class was removed from the pattern. */
.ehb-deal-strip .wp-block-button .wp-block-button__link {
	padding: 10px 22px;
	font-size: 11.5px;
	line-height: 13px;
	letter-spacing: 0.08em;
	text-indent: 0.08em;
	background: var(--ehb-brand-magenta);
	color: var(--ehb-text-on-dark);
}

.ehb-deal-strip .wp-block-button .wp-block-button__link:hover,
.ehb-deal-strip .wp-block-button .wp-block-button__link:focus-visible {
	background: var(--ehb-brand-rose-plum);
	color: var(--ehb-text-on-dark);
}

@media (max-width: 767px) {
	.ehb-deal-strip__copy {
		font-size: var(--ehb-size-body-caption);
	}
}

/* ==========================================================================
   Hero — 50/50 split
   --------------------------------------------------------------------------
   Figma (node 14:78): each half is 720x700 FIXED, vertical layout with both
   axes CENTRE and clipsContent on. The 72px padding is nominal — the real
   rule is that a 400px image and a 198px caption are centred as a block in
   700px, which is why the packshot sits at y=51.

   The image is 520x400 with scaleMode FILL, NOT the full content width. A
   full-width auto-height image made the section 949px instead of 700.
   ========================================================================== */

.ehb-hero {
	gap: 0;
}

.ehb-hero__half {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 700px;
	padding: 72px;
	overflow: hidden;
	background: var(--ehb-surface-lilac);
	text-align: center;
}

/* The two halves bleed to the viewport edge (that is the design), but their contents belong in
   the same 1440 column as the header and everything below: the outer edge of each half gets the
   container's own inset, so the hero stops starting 20px left of the logo above it. Inner edges
   keep the 72px so the two halves still breathe apart at the centre line.
   The floor is the page gutter, not 72px, so at 1440 the packshot lands on the logo's edge too. */
/* Percentage, not 100vw: 100vw counts the scrollbar, so on a 1840px window the
   inset came out 200px against the column's real 192.5px and the packshot sat
   7.5px inside the logo above it (AGENTS.md §7, --scrollbar-offset). % resolves
   against the full-bleed row, which is already the width without the scrollbar. */
.ehb-hero__half--health {
	align-items: flex-start;
	padding-left: max(var(--ehb-gutter), calc((100% - var(--ehb-content-width)) / 2));
}

.ehb-hero__half--beauty {
	align-items: flex-end;
	background: var(--ehb-surface-blush);
	padding-right: max(var(--ehb-gutter), calc((100% - var(--ehb-content-width)) / 2));
}

.ehb-hero__packshot {
	flex: 0 0 auto;
	width: 520px;
	max-width: 100%;
	height: 400px;
	margin: 0;
}

.ehb-hero__packshot img {
	width: 100%;
	height: 100%;
	/* scaleMode FILL in Figma. */
	object-fit: cover;
}

/* Matches the packshot width so the centred caption text sits under the image
   rather than drifting off the column edge the half is now pinned to. */
.ehb-hero__caption {
	flex: 0 0 auto;
	width: 520px;
	max-width: 100%;
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ehb-space-12);
}

.ehb-hero__eyebrow {
	margin: 0;
	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-rose-plum);
}

/* 34px in Figma — between Display/D2 (40) and Display/D3 (28). Clamped to the
   mobile measurement rather than pinned, so it survives 390px. */
.ehb-hero__title {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: clamp(25px, calc(25px + 9 * (100vw - 390px) / 1050), 34px);
	line-height: 1.1;
	letter-spacing: var(--ehb-ls-d2);
	text-transform: uppercase;
	color: var(--ehb-text-ink);
}

.ehb-hero__lede {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	line-height: 26px;
	color: var(--ehb-text-muted);
}

.ehb-hero .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 1023px) {
	.ehb-hero__half {
		height: auto;
		padding: var(--ehb-space-32) var(--ehb-space-16);
	}

	.ehb-hero__packshot {
		width: 100%;
		height: auto;
		aspect-ratio: 520 / 400;
	}
}

/* ==========================================================================
   Bundles promo
   ========================================================================== */

.ehb-bundles {
	padding-block: 88px;
	background: var(--ehb-brand-rose-plum);
	color: var(--ehb-text-on-dark);
}

.entry-content .ehb-bundles__inner {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
	/* core/columns ships a 32px bottom margin; that was the whole +32. */
	margin-block: 0;
	gap: 80px;
	align-items: center;
}

.ehb-bundles__offer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.ehb-bundles__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-text-on-dark);
}

.ehb-bundles__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: clamp(30px, calc(30px + 14 * (100vw - 390px) / 1050), 44px);
	line-height: 1.1;
	letter-spacing: var(--ehb-ls-d2);
	color: var(--ehb-text-on-dark);
}

.ehb-bundles__copy {
	font-family: var(--ehb-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ehb-text-on-dark);
}

.ehb-tier {
	padding: var(--ehb-space-32) 28px;
	background: var(--ehb-surface-ink);
	border-radius: var(--ehb-radius-lg);
}

.ehb-tier {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ehb-tier__qty {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: 40px;
	line-height: 1;
	color: var(--ehb-text-on-dark);
}

.ehb-tier__save {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 19px;
	line-height: 1.3;
	color: var(--ehb-text-on-dark);
}

.ehb-tier__note {
	font-family: var(--ehb-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ehb-text-on-dark);
	opacity: 0.8;
}

/* ==========================================================================
   Payment strip — Figma node 312:2074 (Desktop) & 312:3736 (Mobile)
   ========================================================================== */

.entry-content .ehb-payment-strip.alignfull,
.ehb-payment-strip {
	background: var(--ehb-surface-paper);
	padding-block: 64px;
	padding-inline: var(--ehb-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
}

.ehb-payment-strip__label {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.54px;
	text-transform: uppercase;
	color: var(--ehb-brand-rose-plum);
	white-space: nowrap;
}

.ehb-payment-strip .ehb-payment-row {
	justify-content: center;
	margin-inline: auto;
}

@media (max-width: 767px) {

	.entry-content .ehb-payment-strip.alignfull,
	.ehb-payment-strip {
		padding-block: 40px;
		gap: 16px;
	}
}

/* ==========================================================================
   Shop by Concern
   ========================================================================== */

.ehb-concerns__band+.ehb-concerns__band {
	margin-top: 64px;
}

/*
 * Horizontal scroll with snap, 1.4 cards visible at 390 so the cut-off card
 * signals there is more (Figma · 04 Motion, behaviour 03). No JavaScript
 * carousel: it adds weight and hurts INP.
 *
 * The negative inline-end margin lets the track bleed to the viewport edge
 * while the heading above it stays on the 1200 column.
 */
.ehb-concerns__band .ehb-section-head {
	margin-bottom: 26px;
}

.ehb-carousel-wrapper {
	position: relative;
	width: 100%;
}

.entry-content .ehb-concerns .ehb-concerns__track,
.entry-content .ehb-concerns__track.is-layout-flow,
.entry-content .ehb-concerns__track,
.ehb-concerns__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--ehb-space-24);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--ehb-gutter);
	padding-bottom: var(--ehb-space-16);
	-webkit-overflow-scrolling: touch;
	/* Plain native scroll, no JS-driven arrows: a thin visible scrollbar is the only affordance. */
	scrollbar-width: thin;
	scrollbar-color: var(--ehb-brand-orchid, #944c72) transparent;
}

.entry-content .ehb-concerns .ehb-concerns__track::-webkit-scrollbar,
.ehb-concerns__track::-webkit-scrollbar {
	height: 6px;
}

.entry-content .ehb-concerns .ehb-concerns__track::-webkit-scrollbar-thumb,
.ehb-concerns__track::-webkit-scrollbar-thumb {
	background: var(--ehb-brand-orchid, #944c72);
	border-radius: 999px;
}

/* Mobile/tablet keep compact fixed cards. Desktop is four-up in content.css;
   any fifth card continues in the same shared carousel track. */
.entry-content .ehb-concerns .ehb-concerns__track>*,
.entry-content .ehb-concerns__track.is-layout-flow>*,
.entry-content .ehb-concerns__track>*,
.ehb-concerns__track>* {
	flex: 0 0 200px;
	width: 200px;
	max-width: 200px;
	scroll-snap-align: start;
	margin-block: 0;
}

@media (min-width: 1024px) {
	.entry-content .ehb-concerns .ehb-concerns__track>* ,
	.entry-content .ehb-concerns__track.is-layout-flow>* ,
	.entry-content .ehb-concerns__track>* ,
	.ehb-concerns__track>* {
		flex: 0 0 calc((100% - 3 * var(--ehb-space-24)) / 4);
		width: calc((100% - 3 * var(--ehb-space-24)) / 4);
		max-width: calc((100% - 3 * var(--ehb-space-24)) / 4);
	}

	.entry-content .ehb-concerns .ehb-concerns__track,
	.ehb-concerns__track {
		scrollbar-width: none;
	}

	.entry-content .ehb-concerns .ehb-concerns__track::-webkit-scrollbar,
	.ehb-concerns__track::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 767px) {
	.entry-content .ehb-concerns.alignfull {
		padding-inline-start: var(--ehb-gutter);
		padding-inline-end: 0;
	}

	.entry-content .ehb-concerns__track,
	.entry-content .ehb-concerns__track.is-layout-flow,
	.ehb-concerns__track {
		gap: 12px;
		scroll-padding-inline-start: var(--ehb-gutter);
		padding-bottom: var(--ehb-space-8);
	}

	.entry-content .ehb-concerns .ehb-concerns__track>*,
	.entry-content .ehb-concerns__track.is-layout-flow>*,
	.entry-content .ehb-concerns__track>*,
	.ehb-concerns__track>* {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		max-width: var(--ehb-carousel-card);
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Product grids (Query Loop output)
   ========================================================================== */

.ehb-product-grid .wp-block-post-template {
	gap: var(--ehb-space-32);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {

	/* Hot Deals & Shop Featured: 4 columns on desktop, while the row still fits
	   in one. From the fifth card the shared carousel rule below takes over. */
	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:not(:has(> :nth-child(5))) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

}


.ehb-product-grid .wp-block-post-template>li {
	display: flex;
	flex-direction: column;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: var(--ehb-radius-lg);
	overflow: hidden;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

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

.ehb-product-grid .wc-block-components-product-image {
	margin: 0;
	padding: var(--ehb-space-12);
	background: var(--ehb-surface-lilac);
}

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

.ehb-product-grid :is(
	.ehb-product--vitamins,
	.product_cat-vitamins
) .wc-block-components-product-image,
.ehb-product-grid .wc-block-components-product-image.ehb-well--vitamins {
	background: var(--ehb-surface-lilac);
}

/* Body padding is applied once, on the <li>'s direct children (see "Product
   card body" below). This rule used to add it again on the inner Woo
   components, which indented the price 32px instead of 16. */
.ehb-product-grid .wc-block-components-product-price,
.ehb-product-grid .wc-block-components-product-rating {
	padding-inline: 0;
	margin-block: 0;
}

.ehb-product-grid .wp-block-post-title {
	padding-top: var(--ehb-space-16);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: var(--ehb-size-h4);
	line-height: var(--ehb-lh-h4);
}

.ehb-product-grid .wp-block-post-title a {
	color: var(--ehb-text-ink);
	text-decoration: none;
}

.ehb-product-grid .wp-block-button__link,
.ehb-product-grid .wc-block-components-product-button a {
	margin: var(--ehb-space-4) var(--ehb-space-16) 18px;
}

/* ==========================================================================
   Why Emily H&B
   ========================================================================== */

.ehb-why__inner {
	gap: var(--ehb-space-56);
}

.ehb-why__statement>* {
	margin-block: 0 22px;
}

.ehb-why__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-rose-plum);
}

.ehb-why__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: clamp(25px, calc(25px + 9 * (100vw - 390px) / 1050), 34px);
	line-height: 1.15;
	letter-spacing: var(--ehb-ls-d2);
	color: var(--ehb-text-ink);
}

.ehb-why__copy {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-muted);
}

.ehb-why__cluster {
	max-width: 410px;
	margin: 0;
}

.ehb-why__cluster img {
	width: 100%;
	height: auto;
	display: block;
}

.ehb-why__item {
	padding-block: var(--ehb-space-20);
	margin-block: 0;
}

.ehb-why__item:first-child {
	padding-top: 0;
}

.ehb-why__item:last-child {
	padding-bottom: 0;
}

.ehb-why__item+.ehb-why__item {
	border-top: 1px solid var(--ehb-line-subtle, #e7dce5);
}

.ehb-why__item-title {
	margin: 0 0 9px;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 19px;
	line-height: 1.3;
	color: var(--ehb-text-ink);
}

.ehb-why__item-copy {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ehb-text-muted);
}

@media (max-width: 1023px) {
	.ehb-why__inner {
		gap: var(--ehb-space-40);
	}
}

/* ==========================================================================
   Our Two Centres
   The two columns are equal by design — see the pattern's header comment.
   ========================================================================== */

.entry-content .ehb-centres>.ehb-section-head {
	margin-bottom: var(--ehb-space-32);
}

.ehb-centres__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ehb-space-32);
}

.ehb-centres__title {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: var(--ehb-size-h3);
	line-height: var(--ehb-lh-h3);
	color: var(--ehb-text-ink);
}

.ehb-centres__meta {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-caption);
	line-height: var(--ehb-lh-body-caption);
	color: var(--ehb-text-muted);
}

.ehb-centres__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ehb-centres__card {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: var(--ehb-space-20);
	margin-bottom: 0;
	background: var(--ehb-surface-paper);
	border-radius: 12px;
	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);
	text-decoration: none;
	transition: box-shadow 150ms ease-out;
}

.ehb-centres__card:hover,
.ehb-centres__card:focus-visible {
	box-shadow: 0 6px 20px rgba(36, 18, 31, 0.09);
	color: var(--ehb-brand-magenta);
}

@media (max-width: 767px) {
	.ehb-centres__row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Customer reviews
   The pattern ships with empty slots on purpose — see its header comment.
   ========================================================================== */

.ehb-reviews__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--ehb-space-24);
	margin-bottom: var(--ehb-space-40);
}

.entry-content .ehb-reviews__head .ehb-section-head__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	color: var(--ehb-text-ink);
	margin: 0 0 10px;
}

.entry-content .ehb-reviews__head .ehb-section-head__link {
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ehb-text-muted);
	margin: 0;
}

.ehb-reviews__score {
	text-align: end;
	flex: 0 0 auto;
}

.ehb-reviews__score-value {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.3px;
	color: var(--ehb-brand-rose-plum);
}

.ehb-reviews__score-count {
	margin: 2px 0 0;
	font-family: var(--ehb-font-body);
	font-size: 12px;
	line-height: 1.2;
	color: var(--ehb-text-muted);
}

.ehb-reviews__body {
	display: flex;
	gap: 28px;
}

.ehb-reviews__secondary {
	display: flex;
	flex-direction: column;
	gap: 28px;
	flex: 0 0 400px;
	max-width: 400px;
}

/* The featured column is saved with width:"64%", and core sets flex-grow:0 on
   any column carrying an inline flex-basis. 64% + 28 gap + a fixed 400 left the
   row ~82px short of the container, so the score above it (which does sit on
   the edge) read as misaligned with the cards below. Let it take the slack. */
.entry-content .ehb-reviews__body.wp-block-columns>.ehb-review--featured {
	flex-grow: 1;
}

/* …and the quote column stays rigid, or the growing featured card eats into it
   (measured 400 -> 241 the first time round). */
.entry-content .ehb-reviews__body.wp-block-columns>.ehb-reviews__secondary {
	flex: 0 0 400px;
	max-width: 400px;
}

@media (max-width: 1023px) {
	.ehb-reviews__body {
		flex-direction: column;
	}

	.ehb-reviews__secondary {
		flex: 1 1 auto;
		max-width: none;
	}
}

.ehb-review {
	padding: 28px;
	background: var(--ehb-surface-raised);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: var(--ehb-radius-lg);
}

.ehb-review--featured {
	padding: 44px;
	background: var(--ehb-brand-rose-plum);
	border: 0;
	color: var(--ehb-text-on-dark);
}

.ehb-review__stars {
	margin: 0 0 var(--ehb-space-12);
	font-size: 14px;
	line-height: 1;
	color: var(--ehb-brand-rose-plum);
}

.ehb-review--featured .ehb-review__stars {
	font-size: 17px;
	color: var(--ehb-text-on-dark);
}

.ehb-review__quote {
	margin: 0 0 var(--ehb-space-12);
	font-family: var(--ehb-font-body);
	font-size: 15.5px;
	line-height: 26px;
	color: var(--ehb-text-body);
}

.ehb-review--featured .ehb-review__quote {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: clamp(17px, calc(17px + 6 * (100vw - 390px) / 1050), 23px);
	line-height: 36px;
	color: var(--ehb-text-on-dark);
}

.ehb-review__attrib {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ehb-text-muted);
}

.ehb-review--featured .ehb-review__attrib {
	font-size: 13px;
	color: var(--ehb-text-on-dark);
	opacity: 0.85;
}

.ehb-review__product {
	width: 96px;
	height: 116px;
	margin-top: 20px;
}

.ehb-review__product img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Make an unfilled slot obvious in the editor, so it cannot be published by
   accident. Front end shows nothing at all. */
.block-editor-block-list__layout .ehb-review__quote:empty::after,
.block-editor-block-list__layout .ehb-reviews__score-value:empty::after {
	content: '\26A0 Empty — fill from real verified reviews only';
	display: block;
	padding: var(--ehb-space-8) var(--ehb-space-12);
	background: var(--ehb-surface-blush);
	border: 1px dashed var(--ehb-brand-magenta);
	border-radius: var(--ehb-radius-sm);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-caption);
	color: var(--ehb-brand-magenta);
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.ehb-newsletter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	background: var(--ehb-surface-blush);
	text-align: center;
}

/* The homepage newsletter is a blush band (Figma 14:2). The Health Centre
   reuses this same pattern, but its Figma (204:1680) draws the band on the
   ink ground with white heading and muted-on-dark copy. Only the hub pages
   carry .ehb-page-hero, so scope the ink treatment to them — the homepage,
   which uses .ehb-hero, keeps the blush. */
.entry-content:has(.ehb-page-hero) .ehb-newsletter {
	background: var(--ehb-surface-ink);
	padding-block: 72px;
	gap: var(--ehb-space-18, 18px);
}

.entry-content:has(.ehb-page-hero) .ehb-newsletter__title {
	color: var(--ehb-text-on-dark);
}

.entry-content:has(.ehb-page-hero) .ehb-newsletter__copy {
	color: var(--ehb-text-muted-on-dark);
}

.ehb-newsletter__title {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: clamp(21px, calc(21px + 7 * (100vw - 390px) / 1050), 28px);
	line-height: 1.07;
	letter-spacing: var(--ehb-ls-d3);
	/* Figma sets textCase UPPER on this node. */
	text-transform: uppercase;
	color: var(--ehb-text-ink);
}

.ehb-newsletter__copy {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ehb-text-muted);
}

.ehb-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ehb-space-12);
}

.ehb-newsletter__input,
.entry-content .ehb-newsletter .ehb-newsletter__input,
.entry-content input[type="email"].ehb-newsletter__input,
input#ehb-newsletter-email.ehb-newsletter__input {
	width: 380px;
	max-width: 100%;
	padding: 17px 22px;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong, #d3c3cf) !important;
	border-radius: 999px !important;
	font-family: var(--ehb-font-body);
	font-size: 15px;
	line-height: 1.2;
	color: var(--ehb-text-ink);
	box-sizing: border-box;
}

.ehb-newsletter__input::placeholder {
	color: var(--ehb-text-muted);
	opacity: 1;
}

.ehb-newsletter__input:focus {
	outline: 0;
	border-color: var(--ehb-brand-magenta) !important;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   display:none fields but fill anything they can read. */
.ehb-newsletter__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ehb-newsletter__result {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: var(--ehb-space-16) auto 0;
	padding: 10px 20px;
	border-radius: var(--ehb-radius-pill);
	background: #e6f4ec;
	/* own background: the strip is blush on some pages and near-black on others */
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	text-align: center;
	color: #1d5a3c;
}

.ehb-newsletter__result--error {
	background: #fbe6ef;
	color: #8a1f57;
}


/* ==========================================================================
   Product card body — Figma "Product Card"
   --------------------------------------------------------------------------
   Image well is 4:5 (379x473 at three-up, 276x345 at four-up). Body padding
   16/16/18/16 with a 7px gap between: concern eyebrow, title, price, rating,
   Add to cart. Every card child is a direct child of the <li>, so the body
   padding is applied per child and the gap is the flex gap on the <li>.
   ========================================================================== */

.ehb-product-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ehb-font-body);
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted);
	margin: 0;
}

.ehb-product-card__rating-stars {
	color: var(--ehb-brand-rose-plum);
	font-size: 13px;
	letter-spacing: 1px;
}

.ehb-product-card__rating-text {
	color: var(--ehb-text-muted);
	font-size: 12px;
	line-height: 18px;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-bottom: 18px;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li>* {
	margin-block: 0;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-image {
	position: relative;
	aspect-ratio: 4 / 5;
	/* 16px from the well to the first body line, less the 7px flex gap. */
	margin-bottom: 9px;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid li> :not(.wc-block-components-product-image) {
	padding-inline: var(--ehb-space-16);
}

.ehb-product-card__concern {
	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);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-title {
	padding-top: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-title a {
	color: var(--ehb-text-ink);
	text-decoration: none;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-price {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-semibold);
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-price .woocommerce-Price-amount {
	font-weight: var(--ehb-weight-semibold);
	color: var(--ehb-text-ink);
}

/* The Add to cart wrapper measured 71px: button 41 plus Woo's own margins. */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-button,
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button {
	margin: 0;
	padding-top: 0;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button .wp-block-button__link,
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button__button {
	width: 100%;
	margin: 0;
	padding: 13px 6px;
	background: var(--ehb-brand-orchid);
	color: var(--ehb-text-on-dark);
	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-compact);
	line-height: 15px;
	letter-spacing: var(--ehb-ls-label-button-compact);
	text-transform: uppercase;
	transition: background var(--ehb-motion-hover);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button .wp-block-button__link:hover,
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button__button:hover {
	background: var(--ehb-brand-rose-plum);
}

/* Card image well category background: Skincare = Blush, Vitamins/All others = Lilac */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-image {
	background: var(--ehb-surface-lilac);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid :is(
	li.ehb-product--skincare,
	li.product_cat-skincare,
	li.product_cat-beauty,
	li.product_cat-beauty-skin
) .wc-block-components-product-image,
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-image.ehb-well--skincare {
	background: var(--ehb-surface-blush);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid :is(
	li.ehb-product--vitamins,
	li.product_cat-vitamins
) .wc-block-components-product-image,
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-image.ehb-well--vitamins {
	background: var(--ehb-surface-lilac);
}

/* Sale badge — Figma "Badge / Type=Sale": a filled magenta pill, top-LEFT of
   the image well, 12px inset, Label/Badge type. */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: var(--ehb-space-12);
	left: var(--ehb-space-12);
	right: auto;
	bottom: auto;
	z-index: 2;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-sale-badge {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: var(--ehb-space-4) var(--ehb-space-8);
	background: var(--ehb-status-sale);
	border: 0;
	border-radius: var(--ehb-radius-pill);
	white-space: nowrap;
	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);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-sale-badge span,
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-sale-badge__text {
	background: transparent;
	color: var(--ehb-text-on-dark);
	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;
	white-space: nowrap;
}

/* ==========================================================================
   No gaps between sections
   --------------------------------------------------------------------------
   Kadence gives every top-level block in page content
     margin-bottom: var(--global-md-spacing)   (32px)
   so each full-width section was followed by a 32px white band. In Figma the
   sections butt directly against each other — every ground colour change is a
   hard edge. The class is doubled to reach (0,3,0) and clear Kadence's rule
   regardless of which of its selectors matches.
   ========================================================================== */

.entry-content>.alignfull.alignfull {
	margin-block: 0;
}

/* Hide empty notice and filter wrappers that inject spacing before content */
.woocommerce-notices-wrapper:empty,
.wpc-custom-selected-terms,
.wpc-custom-selected-terms:empty,
.wpc-empty-chips-container {
	margin: 0;
	padding: 0;
}

.wpc-custom-selected-terms:empty,
.wpc-custom-selected-terms:has(.wpc-empty-chips-container),
.woocommerce-notices-wrapper:empty {
	display: none;
}

/* Ensure the first element in entry content has zero margin-top */
.entry-content>*:first-child,
.entry-content>.alignfull:first-child,
.entry-content>.ehb-deal-strip:first-child {
	margin-top: 0;
}

.entry-content .ehb-concerns .ehb-concern-tile,
.ehb-concerns__track .ehb-concern-tile {
	display: flex;
	flex-direction: column;
	/* 200px, matching the concern row above — the four-tile skin band used to sit at 300px and
	   read as a different component from the six-tile health band right above it. */
	width: 200px;
	min-width: 200px;
	flex: 0 0 200px;
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
	box-sizing: border-box;
}

.entry-content .ehb-concerns .ehb-concern-tile:hover,
.ehb-concern-tile:hover {
	border-color: var(--ehb-brand-rose-plum, #944c72);
	box-shadow: 0 6px 20px rgba(36, 18, 31, 0.09);
}

.entry-content .ehb-concerns .ehb-concern-tile.wp-block-group {
	gap: 0;
}

.entry-content .ehb-concerns .ehb-concern-tile .wp-block-image,
.ehb-concern-tile__well {
	margin: 0;
	padding: 0;
	/* Square, like the quick-link tiles on healthpost.com.au (measured 140x140). */
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.entry-content .ehb-concerns .ehb-concern-tile .wp-block-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.entry-content .ehb-concerns .ehb-concern-tile .wp-block-image img,
.entry-content .ehb-concerns .ehb-concern-tile img,
.ehb-concern-tile__well img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.ehb-concern-tile__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 16px 16px 18px;
}

.entry-content .ehb-concerns .ehb-concern-tile:not(:has(.ehb-concern-tile__body)) p {
	margin: 0;
	padding-inline: 16px;
	text-align: center;
}

.entry-content .ehb-concerns .ehb-concern-tile:not(:has(.ehb-concern-tile__body)) p.ehb-concern-tile__title,
.entry-content .ehb-concerns .ehb-concern-tile:not(:has(.ehb-concern-tile__body)) .ehb-concern-tile__title,
.ehb-concern-tile:not(:has(.ehb-concern-tile__body)) .ehb-concern-tile__title {
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 24px;
	color: var(--ehb-text-ink, #241320);
	margin: 0;
	padding-top: 16px;
	padding-inline: 16px;
	padding-bottom: 4px;
	text-align: center;
}

.entry-content .ehb-concerns .ehb-concern-tile:not(:has(.ehb-concern-tile__body)) p.ehb-concern-tile__meta,
.entry-content .ehb-concerns .ehb-concern-tile:not(:has(.ehb-concern-tile__body)) .ehb-concern-tile__meta,
.ehb-concern-tile:not(:has(.ehb-concern-tile__body)) .ehb-concern-tile__meta {
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted, #6b5a65);
	margin: 0;
	padding-inline: 16px;
	padding-bottom: 18px;
	text-align: center;
}

.ehb-concern-tile__body>* {
	padding: 0;
	margin: 0;
}

.entry-content .ehb-concerns .ehb-concern-tile__title a,
.ehb-concern-tile__title a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 767px) {

	/* --- Hot Deals Promo Strip Mobile (Figma 160:257) --- */
	.entry-content .ehb-deal-strip.alignfull,
	.ehb-deal-strip {
		min-height: 55px;
		padding-block: 10px;
		/* The page gutter, not a 16px of its own — the strip has to start on the
		   same edge as the header and every section under it. */
		padding-inline: var(--ehb-gutter);
	}

	.entry-content .ehb-deal-strip__inner,
	.ehb-deal-strip__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.ehb-deal-strip__label {
		font-size: 12px;
		line-height: 14px;
	}

	.ehb-deal-strip__copy {
		font-size: 11px;
		line-height: 13px;
	}

	.ehb-deal-strip .ehb-deal-strip__cta,
	.ehb-deal-strip .wp-block-buttons {
		display: none !important;
	}

	/* --- Hero 50/50 Mobile (Figma 29:40) --- */
	.entry-content .ehb-hero.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}

	.entry-content .ehb-hero .ehb-hero__half {
		height: 380px;
		padding: 20px 10px 22px;
	}

	/* Outer edges follow the page gutter like every other section; the inner pair stays at 10px
	   so the two halves still fit side by side on a 390 screen. */
	.entry-content .ehb-hero .ehb-hero__half--health {
		padding-left: var(--ehb-gutter);
	}

	.entry-content .ehb-hero .ehb-hero__half--beauty {
		padding-right: var(--ehb-gutter);
	}

	.entry-content .ehb-hero .ehb-hero__packshot {
		width: 155px;
		max-width: 100%;
		height: 190px;
		aspect-ratio: auto;
	}

	.entry-content .ehb-hero .ehb-hero__caption {
		padding-top: 14px;
		gap: 6px;
	}

	.entry-content .ehb-hero .ehb-hero__eyebrow {
		display: block;
		font-size: 8.5px;
		line-height: 11px;
		letter-spacing: 0.08em;
	}

	.entry-content .ehb-hero .ehb-hero__title {
		font-size: 17px;
		line-height: 20px;
		letter-spacing: 0;
	}

	.entry-content .ehb-hero .ehb-hero__lede {
		font-size: 11px;
		line-height: 15px;
	}

	.entry-content .ehb-hero .wp-block-button__link {
		padding: 9px 12px;
		font-size: 10px;
		line-height: 12px;
		letter-spacing: 0.04em;
	}

	/* --- Bundles & Specials Promo Mobile (Figma 30:9) --- */
	.entry-content .ehb-bundles.alignfull {
		padding-block: 56px;
	}

	.entry-content .ehb-bundles__inner {
		flex-direction: column;
		gap: var(--ehb-space-32);
		align-items: stretch;
	}

	.ehb-bundles__tiers .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.ehb-tier {
		padding: 18px 14px;
		gap: 6px;
	}

	.ehb-tier__qty {
		font-size: 28px;
	}

	.ehb-tier__save {
		font-size: 15px;
	}

	.ehb-tier__note {
		font-size: 11px;
		line-height: 1.35;
	}

	/* --- Shop by Concern Mobile (Figma 30:48) --- */
	.entry-content .ehb-concerns .ehb-concern-tile,
	.entry-content .ehb-concerns__track .ehb-concern-tile {
		width: var(--ehb-carousel-card);
		min-width: var(--ehb-carousel-card);
		flex: 0 0 var(--ehb-carousel-card);
		border-radius: 10px;
	}

	.ehb-concern-tile__body {
		padding: 10px 8px 12px;
		gap: 2px;
	}

	.entry-content .ehb-concerns .ehb-concern-tile p.ehb-concern-tile__title,
	.entry-content .ehb-concerns .ehb-concern-tile .ehb-concern-tile__title {
		font-size: 13px;
		line-height: 16px;
		padding-top: 10px;
		padding-inline: 8px;
		padding-bottom: 2px;
	}

	.entry-content .ehb-concerns .ehb-concern-tile p.ehb-concern-tile__meta,
	.entry-content .ehb-concerns .ehb-concern-tile .ehb-concern-tile__meta {
		font-size: 11px;
		line-height: 14px;
		padding-inline: 8px;
		padding-bottom: 12px;
	}

	/* --- Product Grids (Hot Deals, Best Sellers & Shop Featured) Mobile (Figma 32:81 & 32:130) --- */
	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--ehb-gutter);
		scrollbar-width: thin;
	}

	/* ~1.5 cards visible: --ehb-carousel-card, tokens.css. */
	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		scroll-snap-align: start;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button {
		display: none;
	}

	/* Product card on mobile = the desktop card at 140px wide (Figma 210:440: body padding 16, eyebrow 11/14, title 16/22, price 16/22),
	   so the type is not shrunk here any more. */

	/* Rating row was the one child of this 140px card with no mobile size of
	   its own (found 22/09/2026): stars + "4.9 (86 reviews)" at desktop size
	   need ~180px, so on a product that actually has reviews the row
	   shrank to a few px and wrapped every word onto its own line — the
	   same flex min-content collapse as the checkout/PDP/About bugs. Let the
	   text drop to its own line under the stars instead of forcing one row. */
	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .ehb-product-card__rating {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .ehb-product-card__rating-stars {
		font-size: 11px;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .ehb-product-card__rating-text {
		font-size: 10px;
		line-height: 14px;
	}

	/* --- Best Sellers Continuous Horizontal Track Mobile --- */
	.entry-content .ehb-best-sellers.wp-block-columns {
		display: flex;
		flex-direction: row;
		/* Saved Columns block disables mobile stacking in the editor. */
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--ehb-gutter);
		gap: 12px;
		padding-bottom: var(--ehb-space-8);
		scrollbar-width: thin;
		margin-bottom: 0;
	}

	.entry-content .ehb-best-sellers>.wp-block-column,
	.entry-content .ehb-best-sellers>.wp-block-query {
		flex: 0 0 auto;
		width: max-content;
		margin: 0;
	}

	.entry-content .ehb-best-sellers .wp-block-post-template {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: visible;
	}

	.entry-content .ehb-best-sellers .wp-block-post-template>li {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		scroll-snap-align: start;
	}

	/* --- Why Emily & Two Centres Mobile (Figma 33:174 & 33:199) --- */
	.ehb-why__cluster {
		max-width: 272px;
		margin-inline: auto;
	}

	.ehb-centres__card {
		min-height: 45px;
		padding: 12px 16px;
		font-size: 13px;
	}

	/* --- Customer Reviews Mobile (Figma 35:260) --- */
	.ehb-reviews__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ehb-space-12);
		margin-bottom: var(--ehb-space-24);
	}

	.ehb-reviews__score {
		text-align: start;
	}

	.ehb-review--featured {
		padding: 24px 18px;
	}

	.ehb-review {
		padding: 18px 16px;
	}

	/* --- Newsletter Mobile (Figma 36:300) --- */
	.ehb-newsletter__form {
		width: 100%;
		max-width: 380px;
		flex-direction: column;
		gap: var(--ehb-space-12);
	}

	.ehb-newsletter__input {
		width: 100%;
	}

	.ehb-newsletter__form .ehb-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Content Centres — Health & Wellness / Beauty & Skin Health hubs
   --------------------------------------------------------------------------
   Figma 04 · Health & Wellness Centre (203:1475) and 05 · Beauty & Skin
   Health Centre (205:1711); mobile 216:1196 / 218:1411. Both pages compose
   the shared components (concern tile, article card, product grid, section
   head, newsletter) into stacked full-width bands, so this block only
   positions them — the card styling lives in components.css.
   ========================================================================== */

/* Figma centre intro: 76px top / 68px bottom padding, 120px gutter. The ground
   differs per Centre — Beauty is lilac (#f0e8f6, Figma 205:1711), Health is
   blush (#f7eaf1, Figma 203:1475) — so the base is lilac and Health adds
   --blush. */
.ehb-page-hero {
	padding-block: 76px 68px;
	background: var(--ehb-surface-lilac);
}

.ehb-page-hero--blush {
	background: var(--ehb-surface-blush);
}

.ehb-page-hero--lilac {
	background: var(--ehb-surface-lilac);
}

/* (0,3,0) to clear Kadence's `.entry-content .alignfull { padding-inline: 0 }`,
   the same trap documented for .ehb-section at the top of this file. */
.entry-content .ehb-page-hero.alignfull {
	padding-inline: var(--ehb-gutter);
}

/* Inner column: the group is full-bleed for the lilac ground; this caps the
   content at 1200 and centres it, while the text inside stays left-aligned —
   a plain div, so WordPress's constrained-layout auto-margins never reach the
   lede and pull it to centre (the trap the section head documents). */
.ehb-page-hero__inner {
	max-width: var(--ehb-content-width);
	margin-inline: auto;
}

.ehb-page-hero__title {
	margin: 0 0 var(--ehb-space-20);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: var(--ehb-size-h1);
	line-height: var(--ehb-lh-h1);
	letter-spacing: var(--ehb-ls-h1);
	color: var(--ehb-text-ink);
}

.entry-content .ehb-page-hero__inner > * {
	margin-top: 0;
}

.ehb-page-hero__lede {
	max-width: 640px;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-large);
	line-height: var(--ehb-lh-body-large);
	color: var(--ehb-text-body);
	margin-bottom: 0;
}

.ehb-page-hero__link {
	margin: 0 0 var(--ehb-space-16);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
}

@media (max-width: 767px) {
	.entry-content .ehb-page-hero.alignfull {
		padding-block: 40px;
	}

}

/* A sparse concern result should size to its cards instead of presenting a
   large empty pseudo-grid. */
.ehb-concern-products .wp-block-post-template:not(:has(> :nth-child(2))) {
	grid-template-columns: minmax(0, 288px) !important;
}

.ehb-page-hero__link a {
	color: var(--ehb-brand-magenta);
	text-decoration: none;
}

.ehb-page-hero__link a:hover,
.ehb-page-hero__link a:focus-visible {
	text-decoration: underline;
}

/* Hub grids: static, non-scrolling. Three-up for the six health concerns and
   the three pillar guides; four-up for the four skin concerns, the four
   article clusters and the eight-entry ingredient glossary. */
.ehb-hub-grid {
	display: grid;
	width: 100%;
	column-gap: var(--ehb-space-24, 24px);
	row-gap: 36px;
	box-sizing: border-box;
}

.ehb-hub-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ehb-hub-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) and (min-width: 768px) {

	.ehb-hub-grid--3,
	.ehb-hub-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Clear Kadence (0,2,0) .single-content margins and resets for Hub components */
:is(.entry-content, .single-content, .site-main) .ehb-hub .wp-block-group,
:is(.entry-content, .single-content, .site-main) .ehb-hub .wp-block-paragraph,
:is(.entry-content, .single-content, .site-main) .ehb-hub .wp-block-image,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-section-head,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-section-head>*,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-hub-grid,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-hub-grid>*,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__well,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__body,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__title,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__meta,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__thumb,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__body,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__eyebrow,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__title,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__excerpt,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__meta,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-hub-note {
	margin-block: 0;
	margin-inline: 0;
}

/* Section Head: 36px margin-bottom to grid on desktop, 10px gap between heading & sub */
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-section-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 36px;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-section-head__title {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 28px;
	line-height: 34px;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color: var(--ehb-text-ink, #241320);
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-section-head__sub {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted, #6b5a65);
}

/* Concern Tile internal geometry: zero gap between well and body, no double padding */
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
	box-sizing: border-box;
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ehb-surface-paper, #ffffff);
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__well {
	aspect-ratio: 300 / 340;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__well .wp-block-image,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__well .wp-block-image a {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__well img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 16px 16px 18px;
	margin: 0;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__body .ehb-concern-tile__title,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__title {
	margin: 0;
	padding: 0;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 24px;
	color: var(--ehb-text-ink, #241320);
	text-align: center;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__body .ehb-concern-tile__meta,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__meta {
	margin: 0;
	padding: 0;
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted, #6b5a65);
	text-align: center;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__title a {
	color: inherit;
	text-decoration: none;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-concern-tile__title a:hover {
	text-decoration: underline;
}

/* Article Card geometry: zero gap between thumb and body, clean 10px flex gap */
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
	box-sizing: border-box;
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: 14px;
	overflow: hidden;
	background: var(--ehb-surface-paper, #ffffff);
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__thumb {
	aspect-ratio: 380 / 200;
	width: 100%;
	background: var(--ehb-surface-lilac, #f0e8f6);
	margin: 0;
	padding: 0;
	overflow: hidden;
	flex-shrink: 0;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__thumb .wp-block-image,
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 24px;
	margin: 0;
	flex-grow: 1;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__body>* {
	margin: 0;
	padding: 0;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__eyebrow {
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--ehb-brand-magenta, #b93c7b);
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__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, #241320);
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__title a {
	color: inherit;
	text-decoration: none;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__title a:hover {
	text-decoration: underline;
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__excerpt {
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-body, #3d2c36);
}

:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-article-card__meta {
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--ehb-text-muted, #6b5a65);
}

/* TGA Compliance Note: 36px space above on desktop, max-width 880px */
:is(.entry-content, .single-content, .site-main) .ehb-hub .ehb-hub-note,
:is(.entry-content, .single-content, .site-main) .ehb-hub p.ehb-hub-note {
	margin-top: 36px;
	margin-bottom: 0;
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted, #6b5a65);
}

/* Recommended Products Grid: 24px gap between cards */
:is(.entry-content, .single-content, .woocommerce, .site-main) .ehb-hub .ehb-product-grid .wp-block-post-template {
	gap: 24px;
	margin-block: 0;
}

:is(.entry-content, .single-content, .woocommerce, .site-main) .ehb-hub .ehb-product-grid .wp-block-post-template>li {
	margin-block: 0;
}

@media (max-width:767px) {
	.ehb-page-hero {
		padding-block: 44px 40px;
	}

	.ehb-page-hero__inner {
		gap: 14px;
	}

	.ehb-page-hero__title {
		font-size: 30px;
		line-height: 38px;
	}

	.ehb-page-hero__lede {
		font-size: 14px;
		line-height: 22px;
	}

	.entry-content .ehb-hub.alignfull {
		padding-block: 52px;
		padding-inline-start: var(--ehb-gutter);
		padding-inline-end: 0;
	}

	.ehb-hub .ehb-section-head {
		gap: 6px;
		margin-bottom: 20px;
		padding-inline-end: var(--ehb-gutter);
	}

	.ehb-hub .ehb-section-head__title {
		font-size: 28px;
		line-height: 34px;
	}

	.ehb-hub .ehb-hub-note {
		margin-top: 20px;
		padding-inline-end: var(--ehb-gutter);
		font-size: 14px;
		line-height: 22px;
	}

	:is(.entry-content, .site-main) .ehb-hub .ehb-hub-grid:not(:has(.ehb-article-card--ingredient)),
	.ehb-hub-grid:not(:has(.ehb-article-card--ingredient)) {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--ehb-gutter);
		padding-inline-end: var(--ehb-gutter);
		padding-bottom: 8px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		align-items: stretch;
	}

	:is(.entry-content, .site-main) .ehb-hub .ehb-hub-grid:not(:has(.ehb-article-card--ingredient))::-webkit-scrollbar,
	.ehb-hub-grid:not(:has(.ehb-article-card--ingredient))::-webkit-scrollbar {
		display: none;
	}

	:is(.entry-content, .site-main) .ehb-hub .ehb-hub-grid>.ehb-concern-tile,
	.ehb-hub-grid>.ehb-concern-tile {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		min-width: var(--ehb-carousel-card);
		max-width: var(--ehb-carousel-card);
		scroll-snap-align: start;
		border-radius: 12px;
	}

	:is(.entry-content, .site-main) .ehb-hub .ehb-hub-grid>.ehb-article-card--guide,
	.ehb-hub-grid>.ehb-article-card--guide {
		flex: 0 0 270px;
		width: 270px;
		min-width: 270px;
		max-width: 270px;
		scroll-snap-align: start;
		border-radius: 14px;
	}

	:is(.entry-content, .site-main) .ehb-hub .ehb-hub-grid>.ehb-article-card:not(.ehb-article-card--guide):not(.ehb-article-card--ingredient),
	.ehb-hub-grid>.ehb-article-card:not(.ehb-article-card--guide):not(.ehb-article-card--ingredient) {
		flex: 0 0 270px;
		width: 270px;
		min-width: 270px;
		max-width: 270px;
		scroll-snap-align: start;
		border-radius: 14px;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-hub .ehb-product-grid .wp-block-post-template {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--ehb-gutter);
		padding-inline-end: var(--ehb-gutter);
		padding-bottom: 8px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-hub .ehb-product-grid .wp-block-post-template::-webkit-scrollbar {
		display: none;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-hub .ehb-product-grid .wp-block-post-template>li {
		flex: 0 0 var(--ehb-carousel-card);
		width: var(--ehb-carousel-card);
		min-width: var(--ehb-carousel-card);
		max-width: var(--ehb-carousel-card);
		scroll-snap-align: start;
		border-radius: 14px;
	}

	.ehb-hub-grid:has(.ehb-article-card--ingredient) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ehb-hub .ehb-concern-tile__well {
		aspect-ratio: 300 / 340;
		width: 100%;
	}

	.ehb-hub .ehb-concern-tile__body {
		padding: 16px 16px 18px;
		gap: 4px;
		text-align: center;
	}

	.ehb-hub .ehb-concern-tile__body .ehb-concern-tile__title,
	.ehb-hub .ehb-concern-tile__title,
	.ehb-hub .ehb-concern-tile__title a {
		font-size: 17px;
		line-height: 24px;
		padding: 0;
		margin: 0;
	}

	.ehb-hub .ehb-concern-tile__body .ehb-concern-tile__meta,
	.ehb-hub .ehb-concern-tile__meta {
		font-size: 12px;
		line-height: 18px;
		padding: 0;
		margin: 0;
	}

	.entry-content:has(.ehb-page-hero) .ehb-newsletter.alignfull {
		padding-block: 48px;
	}

	.entry-content:has(.ehb-page-hero) .ehb-newsletter__title {
		font-size: 20px;
		line-height: 27px;
	}

	.ehb-hub .ehb-article-card--ingredient .ehb-article-card__body {
		padding: 16px 14px;
	}

	.ehb-hub .ehb-article-card--ingredient .ehb-article-card__title {
		font-size: 16px;
		line-height: 22px;
	}

	.ehb-hub .ehb-article-card--ingredient .ehb-article-card__excerpt {
		font-size: 13px;
		line-height: 20px;
	}
}

/* Build your routine: approved presentation only, Figma 205:1816 / 218:1505.
   Kadence owns the responsive row; each blank well contains an editable Image. */
.ehb-routine .ehb-routine__content>.kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.ehb-routine .ehb-routine__content>.kt-inside-inner-col>*,
.ehb-routine .ehb-routine__head>*,
.ehb-routine .ehb-routine__step,
.ehb-routine .ehb-routine__step>.kt-inside-inner-col>*,
.ehb-routine .ehb-routine__text>*,
.ehb-routine .ehb-routine__image>* {
	margin: 0;
}

.ehb-routine .ehb-routine__head,
.ehb-routine .ehb-routine__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ehb-routine .ehb-routine__cards {
	width: 100%;
}

.ehb-routine .ehb-routine__heading {
	font: 700 28px/34px var(--ehb-font-display);
	letter-spacing: -.28px;
	text-transform: uppercase;
	color: var(--ehb-text-ink);
}

.ehb-routine .ehb-routine__subtitle,
.ehb-routine .ehb-routine__description {
	font: 400 14px/22px var(--ehb-font-body);
	color: var(--ehb-text-muted);
}

.ehb-routine .ehb-routine__step>.kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border-radius: var(--ehb-radius-lg);
	background: var(--ehb-surface-paper);
	box-shadow: inset 0 0 0 1px var(--ehb-line-subtle);
	height: 100%;
}

.ehb-routine .ehb-routine__number {
	font: 700 11px/14px var(--ehb-font-display);
	white-space: nowrap;
	letter-spacing: 1.32px;
	color: var(--ehb-brand-magenta);
}

.ehb-routine .ehb-routine__text {
	gap: 8px;
	min-width: 0;
}

.ehb-routine .ehb-routine__title {
	font: 600 20px/27px var(--ehb-font-display);
	letter-spacing: -.1px;
	color: var(--ehb-text-ink);
}

.ehb-routine .ehb-routine__image {
	height: 120px;
	border-radius: var(--ehb-radius-md);
	background: var(--ehb-surface-blush);
	overflow: hidden;
}

.ehb-routine .ehb-routine__image figure,
.ehb-routine .ehb-routine__image a,
.ehb-routine .ehb-routine__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ehb-routine .ehb-routine__image img:not([src]) {
	display: none;
}

@media (max-width: 767px) {
	.ehb-routine .ehb-routine__content>.kt-inside-inner-col {
		gap: 18px;
	}

	.ehb-routine .ehb-routine__subtitle {
		display: none;
	}

	.ehb-routine .ehb-routine__step>.kt-inside-inner-col {
		display: grid;
		grid-template-columns: 15px minmax(0, 1fr) 52px;
		align-items: center;
		gap: 14px;
		padding: 16px;
		min-height: 84px;
	}

	.ehb-routine .ehb-routine__text {
		gap: 2px;
	}

	.ehb-routine .ehb-routine__title {
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0;
	}

	.ehb-routine .ehb-routine__description {
		font-size: 12px;
		line-height: 18px;
	}

	.ehb-routine .ehb-routine__image {
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================================
   Editorial, Concern SEO & About page modules
   ========================================================================== */

.ehb-editorial {
	margin-inline: auto;
	box-sizing: border-box;
}

.entry-content .ehb-editorial h2,
.ehb-editorial h2 {
	margin: 0 0 var(--ehb-space-20);
	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);
}

.entry-content .ehb-editorial h3,
.ehb-editorial h3 {
	margin: var(--ehb-space-28, 28px) 0 var(--ehb-space-12, 12px);
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.15px;
	color: var(--ehb-text-ink);
}

.entry-content .ehb-editorial p,
.ehb-editorial p {
	margin: 0 0 var(--ehb-space-16);
	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);
}

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

/* Placeholder notification box */
.ehb-placeholder-box {
	background: var(--ehb-surface-blush, #f8eff4);
	border: 1px dashed var(--ehb-brand-magenta, #944c72);
	border-radius: var(--ehb-radius-md, 8px);
	padding: 18px 24px;
	margin-block: 24px;
	box-sizing: border-box;
}

.entry-content .ehb-placeholder-box p,
.ehb-placeholder-box p {
	margin: 0;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-brand-rose-plum, #6c2d52);
	font-style: italic;
}

/* FAQ Accordion List (native details / summary) */
.ehb-faq-list {
	margin-inline: auto;
	box-sizing: border-box;
}

.ehb-faq-item {
	border-bottom: 1px solid var(--ehb-line-subtle, #e7dce5);
}

.ehb-faq-item:first-child {
	border-top: 1px solid var(--ehb-line-subtle, #e7dce5);
}

.ehb-faq-item summary {
	padding-block: 18px;
	cursor: pointer;
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: var(--ehb-text-ink, #241320);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: color 150ms ease-out;
}

.ehb-faq-item summary::-webkit-details-marker {
	display: none;
}

.ehb-faq-item summary::after {
	content: '+';
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--ehb-brand-magenta, #944c72);
	margin-inline-start: 16px;
	flex-shrink: 0;
	transition: transform 150ms ease-out;
}

.ehb-faq-item[open] summary::after {
	content: '−';
}

.ehb-faq-item summary:hover {
	color: var(--ehb-brand-magenta, #944c72);
}

.ehb-faq-item summary:focus-visible {
	outline: 2px solid var(--ehb-brand-magenta, #944c72);
	outline-offset: 4px;
	border-radius: 4px;
}

.ehb-faq-answer {
	padding-bottom: 20px;
	box-sizing: border-box;
}

.entry-content .ehb-faq-answer p,
.ehb-faq-answer p {
	margin: 0 0 12px;
	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);
}

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

/* About Pillars Cards */
.ehb-about-pillar {
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-lg, 12px);
	padding: 32px 28px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.entry-content .ehb-about-pillar h3,
.ehb-about-pillar h3 {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 18px;
	line-height: 24px;
	color: var(--ehb-text-ink);
}

.entry-content .ehb-about-pillar p,
.ehb-about-pillar p {
	margin: 0;
	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-about-pillar reuses .ehb-hub-grid, whose <768px rule turns the grid
   into a horizontal-scroll strip for image tiles/article cards (with fixed
   px widths per child type). Pillars are plain text cards with no matching
   width rule, so flexbox's min-content shrink took them down to near zero,
   wrapping every word (a letter at a time) onto its own line. Pillars were
   never meant to scroll — stack them full width instead, one per row.
   Contact's three info cards (.ehb-contact-card) had the same bug. */
@media (max-width: 767px) {
	.ehb-about-pillars .ehb-hub-grid.ehb-hub-grid--3,
	.ehb-contact-pillars-wrap .ehb-hub-grid.ehb-hub-grid--3 {
		display: grid;
		grid-template-columns: 1fr;
		overflow-x: visible;
	}
}

/* Anchor offset for sticky header */
#australian-sourcing {
	scroll-margin-top: calc(var(--ehb-header-height, 72px) + 24px);
}

/* ==========================================================================
   Legal & Policy Pages (Privacy, Terms, Shipping, Returns)
   ========================================================================== */

/* Legal Sub-Navigation Tabs */
.ehb-legal-nav {
	margin: 0 auto 36px;
	padding: 0;
	box-sizing: border-box;
}

.ehb-legal-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ehb-legal-nav__list li {
	margin: 0;
	padding: 0;
}

.ehb-legal-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--ehb-surface-blush, #f8eff4);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	color: var(--ehb-text-ink, #241320);
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ehb-legal-nav__link:hover {
	background: #ffffff;
	border-color: var(--ehb-brand-magenta, #944c72);
	color: var(--ehb-brand-magenta, #944c72);
}

.ehb-legal-nav__link.is-active {
	background: var(--ehb-brand-magenta, #944c72);
	border-color: var(--ehb-brand-magenta, #944c72);
	color: #ffffff;
	cursor: default;
}

/* Legal Policy Callout */
.ehb-policy-callout {
	background: var(--ehb-surface-blush, #f8eff4);
	border-left: 3px solid var(--ehb-brand-magenta, #944c72);
	border-radius: 0 var(--ehb-radius-md, 8px) var(--ehb-radius-md, 8px) 0;
	padding: 20px 24px;
	margin-block: 24px;
	box-sizing: border-box;
}

.entry-content .ehb-policy-callout p,
.ehb-policy-callout p {
	margin: 0 0 10px;
	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, #241320);
}

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

/* Legal / Shipping Table */
.ehb-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: 24px;
}

.entry-content .ehb-table-wrap table,
.ehb-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-md, 8px);
	overflow: hidden;
}

.entry-content .ehb-table-wrap th,
.ehb-table-wrap th {
	background: var(--ehb-surface-blush, #f8eff4);
	color: var(--ehb-text-ink, #241320);
	font-family: var(--ehb-font-display);
	font-weight: 700;
	text-align: left;
	padding: 14px 18px;
	border-bottom: 2px solid var(--ehb-line-subtle, #e7dce5);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.2px;
}

.entry-content .ehb-table-wrap td,
.ehb-table-wrap td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--ehb-line-subtle, #e7dce5);
	color: var(--ehb-text-body);
	font-size: 14px;
	line-height: 22px;
}

.entry-content .ehb-table-wrap tr:last-child td,
.ehb-table-wrap tr:last-child td {
	border-bottom: none;
}

/* Legal Help Box */
.ehb-help-card {
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-lg, 12px);
	padding: 28px 32px;
	margin-top: 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.entry-content .ehb-help-card h3,
.ehb-help-card h3 {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: var(--ehb-text-ink);
}

.entry-content .ehb-help-card p,
.ehb-help-card p {
	margin: 0;
	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-help-card a {
	color: var(--ehb-brand-magenta, #944c72);
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.ehb-legal-nav {
		margin-bottom: 24px;
	}

	.ehb-legal-nav__list {
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.ehb-legal-nav__link {
		white-space: nowrap;
		padding: 6px 14px;
		font-size: 12px;
	}

	.ehb-policy-callout {
		padding: 16px;
	}

	.ehb-help-card {
		padding: 20px;
	}
}

/* ==========================================================================
   Contact Page Layout & Kadence Form Styling
   ========================================================================== */

.ehb-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: start;
	margin-block: 0;
}

.ehb-contact-col-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ehb-contact-col-left .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.entry-content .ehb-contact-col-left h2,
.ehb-contact-col-left h2 {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	color: var(--ehb-text-ink, #241320);
}

.ehb-contact-intro {
	margin: 0 0 4px;
	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-contact-col-left .kb-google-maps-container {
	border-radius: var(--ehb-radius-lg, 12px);
	overflow: hidden;
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	box-shadow: 0 2px 12px rgba(36, 19, 32, 0.04);
}

.ehb-contact-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ehb-contact-card {
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-lg, 12px);
	padding: 24px 28px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.entry-content .ehb-contact-card h3,
.ehb-contact-card h3 {
	margin: 0;
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: var(--ehb-text-ink, #241320);
	display: flex;
	align-items: center;
	gap: 8px;
}

.entry-content .ehb-contact-card p,
.ehb-contact-card p {
	margin: 0;
	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-contact-card a {
	color: var(--ehb-brand-magenta, #944c72);
	text-decoration: underline;
	font-weight: 500;
}

.ehb-contact-card small,
.ehb-contact-card .has-small-font-size {
	font-size: 13px;
	color: var(--ehb-text-muted, #6b5f69);
	margin: 0;
}

.ehb-contact-form-card {
	background: var(--ehb-surface-paper, #ffffff);
	border: 1px solid var(--ehb-line-subtle, #e7dce5);
	border-radius: var(--ehb-radius-lg, 12px);
	padding: 28px 32px 32px;
	box-sizing: border-box;
	box-shadow: 0 4px 24px rgba(36, 19, 32, 0.04);
}

.entry-content .ehb-contact-section.alignfull {
	padding-block: 48px;
}

.ehb-contact-form-card__head {
	margin-bottom: 24px;
}

.entry-content .ehb-contact-form-card h2,
.ehb-contact-form-card h2,
.entry-content .ehb-contact-form-card__head h2,
.ehb-contact-form-card__head h2 {
	margin: 0 0 8px;
	font-family: var(--ehb-font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	color: var(--ehb-text-ink, #241320);
}

.entry-content .ehb-contact-form-card p,
.ehb-contact-form-card p,
.entry-content .ehb-contact-form-card__head p,
.ehb-contact-form-card__head p {
	margin: 0 0 20px;
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--ehb-text-muted, #6b5f69);
}

/* Kadence Form Field & Input Polish */
.wp-block-kadence-advanced-form .kb-advanced-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wp-block-kadence-advanced-form .kb-adv-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.wp-block-kadence-advanced-form .kb-adv-form-label {
	font-family: var(--ehb-font-display);
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	color: var(--ehb-text-ink, #241320);
}

.wp-block-kadence-advanced-form .kb-adv-form-required {
	color: var(--ehb-brand-magenta, #944c72);
	margin-left: 3px;
}

.wp-block-kadence-advanced-form input[type="text"],
.wp-block-kadence-advanced-form input[type="email"],
.wp-block-kadence-advanced-form input[type="tel"],
.wp-block-kadence-advanced-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;
}

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

.wp-block-kadence-advanced-form textarea {
	min-height: 120px;
	resize: vertical;
}

.wp-block-kadence-advanced-form .kb-adv-form-submit-button {
	width: 100%;
	padding: 14px 28px;
	background: var(--ehb-brand-magenta, #944c72);
	color: #ffffff;
	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;
	cursor: pointer;
	transition: background-color 150ms ease, transform 100ms ease;
	margin-top: 8px;
}

.wp-block-kadence-advanced-form .kb-adv-form-submit-button:hover {
	background: var(--ehb-brand-rose-plum, #6c2d52);
}

.wp-block-kadence-advanced-form .kb-adv-form-submit-button:focus-visible {
	outline: 2px solid var(--ehb-brand-magenta, #944c72);
	outline-offset: 3px;
}

.wp-block-kadence-advanced-form .kb-adv-form-message {
	padding: 16px 20px;
	border-radius: var(--ehb-radius-md, 8px);
	font-family: var(--ehb-font-body);
	font-size: 14px;
	line-height: 20px;
	margin-top: 16px;
}

.wp-block-kadence-advanced-form .kb-adv-form-success {
	background: #edf7ed;
	border: 1px solid #c8e6c9;
	color: #1e4620;
}

.wp-block-kadence-advanced-form .kb-adv-form-warning {
	background: #fdf2f2;
	border: 1px solid #f8b4b4;
	color: #9b1c1c;
}

@media (max-width: 900px) {
	.ehb-contact-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.ehb-contact-form-card {
		padding: 24px 20px;
	}
}

/* Mobile references, Figma page 1:4. Keep saved editor content and desktop layout. */
@media (max-width: 767px) {

	/* The existing desktop offer column includes the CTA. Flatten only its
	   layout so mobile can place pricing before the CTA, as in node 32:195. */
	.entry-content .ehb-bundles.alignfull {
		padding: 44px 24px;
	}

	.entry-content .ehb-bundles .ehb-bundles__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		margin: 0;
	}

	.entry-content .ehb-bundles .ehb-bundles__offer {
		display: contents;
	}

	.entry-content .ehb-bundles .ehb-bundles__offer>* {
		margin: 0;
	}

	.entry-content .ehb-bundles .ehb-bundles__offer>.wp-block-buttons {
		order: 2;
	}

	.entry-content .ehb-bundles .ehb-bundles__tiers {
		order: 1;
	}

	.entry-content .ehb-bundles .ehb-bundles__tiers .wp-block-columns {
		margin: 0;
	}

	.entry-content .ehb-bundles .ehb-bundles__eyebrow {
		font-size: 11px;
		line-height: 14px;
	}

	.entry-content .ehb-bundles .ehb-bundles__title {
		font-size: 30px;
		line-height: 34px;
	}

	.entry-content .ehb-bundles .ehb-bundles__copy {
		font-size: 14px;
		line-height: 22px;
	}

	.entry-content .ehb-bundles .ehb-tier {
		padding: 20px 18px;
		gap: 6px;
	}

	.entry-content .ehb-bundles .ehb-tier__qty {
		font-size: 36px;
		line-height: 36px;
	}

	.entry-content .ehb-bundles .ehb-tier__save {
		font-size: 20px;
		line-height: 24px;
	}

	.entry-content .ehb-bundles .ehb-tier__note {
		font-size: 12px;
		line-height: 17px;
	}

	/* Long-form copy remains fluid; remove the extra core Columns/Group margins. */
	.entry-content .ehb-why .ehb-why__inner {
		margin-bottom: 0;
		gap: 20px;
	}

	.entry-content .ehb-why .ehb-why__statement {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.entry-content .ehb-why .ehb-why__title {
		font-size: 25px;
		line-height: 32px;
	}

	.entry-content .ehb-why .ehb-why__copy {
		font-size: 14px;
		line-height: 23px;
	}

	/* Full content width on mobile (client request 30/09/2026), not Figma's 272px:
	   at 272 the packshots read too small on a phone. */
	.entry-content .ehb-why .ehb-why__cluster {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.entry-content .ehb-why .ehb-why__item {
		margin: 0;
		padding-block: 20px;
	}

	.entry-content .ehb-why .ehb-why__item-title {
		margin-bottom: 8px;
		font-size: 17px;
		line-height: 24px;
	}

	.entry-content .ehb-why .ehb-why__item-copy {
		font-size: 14px;
		line-height: 22px;
	}

	.entry-content .ehb-newsletter.alignfull {
		padding-block: 48px;
	}

	.entry-content .ehb-newsletter .ehb-newsletter__copy {
		font-size: 12.5px;
		line-height: 19px;
	}

	/* The glossary is a contained two-column grid, unlike the adjacent swipe rows. */
	.entry-content .ehb-hub .ehb-hub-grid:has(.ehb-article-card--ingredient) {
		width: calc(100% - var(--ehb-gutter));
		gap: 16px 12px;
	}

	.entry-content .ehb-hub .ehb-section-head {
		gap: 6px;
		margin-bottom: 20px;
	}

	.entry-content .ehb-hub .ehb-hub-note {
		margin-top: 20px;
	}
}

/* ==========================================================================
   Kadence rows built at the old 1248px container
   ==========================================================================
   "Build your routine" and the Contact form are kadence/rowlayout blocks whose
   maxWidth:1248 is baked into the saved page, so they sit ~240px narrower than
   every hand-built section once the site moved to 1440 (AGENTS.md §7). The
   attribute cannot be reached from the theme, but Kadence prints its own
   width as ".kb-row-layout-id… > .kt-row-column-wrap" (0,2,0) — the extra
   .wp-block-kadence-rowlayout qualifier is what wins here. */
.ehb-routine.wp-block-kadence-rowlayout > .kt-row-column-wrap,
.ehb-contact-section .wp-block-kadence-rowlayout > .kt-row-column-wrap {
	max-width: var(--ehb-content-width);
}

.ehb-contact-section .kb-row-layout-idehb_contact_row > .kt-row-column-wrap {
	column-gap: 64px;
}

@media (min-width: 1024px) {
	.ehb-contact-section .kb-row-layout-idehb_contact_row > .kt-row-column-wrap {
		column-gap: 80px;
	}
}

.ehb-routine.wp-block-kadence-rowlayout>.kt-row-column-wrap {
	width: 100%;
	max-width: calc(var(--ehb-content-width) + 2 * var(--ehb-gutter));
	padding-inline: var(--ehb-gutter);
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.entry-content .ehb-why.alignfull {
		padding-block: var(--ehb-space-48);
	}
}

/* ==========================================================================
   Card rows that scroll — five across (healthpost.com.au)
   ==========================================================================
   One rule for every product and article row on the site. A row keeps its
   static grid until it holds a fifth card; from there it becomes a scroll
   track whose cards are a fixed fraction of the row, so the fifth sits flush
   at the edge and the sixth peeks. carousel.js hangs prev/next off the
   section head, and decides on measured overflow rather than a card count, so
   it agrees with this rule at every breakpoint.

   Measured on healthpost.com.au at a 2269px viewport: their content column is
   1440 like ours, but the track itself runs 0 → 2269 with the first card on
   the 1440 column's left edge (x=415) and a fixed card width, so extra cards
   spill past the right edge instead of the row stopping short and leaving the
   screen empty. That is what the "canh cố định mép trái rồi carousel" note
   asks for, and what the two rules below reproduce:

   1. the wrapper that clamps the row to 1440 is released to the full-width
      section it sits in — no 100vw anywhere, so the scrollbar cannot cause a
      horizontal overflow (AGENTS.md §7, --scrollbar-offset);
   2. the track pads its start by half the slack, putting card one back on the
      column edge, and sizes cards against min(1440, 100%) so five still fit
      the column exactly.

   Only rows whose wrapper is released in (1) may take the inset in (2) — the
   two belong together. A track that is still inside the 1440 column measures
   100% = 1440, so the inset is 0 and nothing moves; but a track inside some
   other full-width parent (the Centre hub grids) would be shoved right while
   its heading stayed put. And where the section heading shares the released
   wrapper (PDP), the heading needs the same inset or it slides out to the
   section's padding edge while the cards stay on the column. */
@media (min-width: 768px) {

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid:has(.wp-block-post-template > :nth-child(5)),
	/* Woo core's own ".woocommerce div.product .related.products .ehb-related-products__inner" is (0,5,2). */
	.woocommerce div.product .related.products .ehb-related-products__inner:has(ul.products > :nth-child(5)),
	.ehb-pdp-articles__inner:has(.ehb-pdp-articles__grid > :nth-child(5)),
	/* Best Sellers' track is the Columns block itself, so the wrapper carousel.js
	   puts around it is what the constrained layout clamps to 1440. */
	.entry-content .ehb-carousel-wrapper:has(> .ehb-best-sellers) {
		max-width: none;
		width: auto;
	}

	/* Heading of a released wrapper, back onto the column edge. */
	.woocommerce div.product .related.products .ehb-related-products__inner:has(ul.products > :nth-child(5))>.ehb-section-head,
	.ehb-pdp-articles__inner:has(.ehb-pdp-articles__grid > :nth-child(5))>.ehb-section-head {
		padding-inline-start: max(0px, calc((100% - var(--ehb-content-width)) / 2));
		padding-inline-end: max(0px, calc((100% - var(--ehb-content-width)) / 2));
	}


	/* Tracks in a released wrapper: inset to the column edge, bleed right. */
	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:has(> :nth-child(5)),
	.ehb-pdp-articles__grid:has(> :nth-child(5)),
	.woocommerce div.product .related.products ul.products:has(> :nth-child(5)) {
		padding-inline-start: max(0px, calc((100% - var(--ehb-content-width)) / 2));
		scroll-padding-inline-start: max(0px, calc((100% - var(--ehb-content-width)) / 2));
		/* No padding-inline-end: it comes out of the track's content box, which is
		   what the card width is measured against, so two rows whose wrappers
		   differ by a gutter ended up with cards 10px apart. The row bleeds to
		   the viewport edge like healthpost's; nothing needs padding there. */
		/* Explicit width, not just the negative margin: a track whose parent pins
		   it to width:100% (the Query Loop list) kept the parent width while one
		   that did not (Best Sellers' Columns block) grew by the gutter, so the two
		   rows sized their cards off different numbers — 310 vs 320 at 1393. */
		width: calc(100% + var(--ehb-gutter));
		max-width: none;
		margin-inline-end: calc(-1 * var(--ehb-gutter));
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:has(> :nth-child(5)),
	.ehb-hub-grid:not(:has(.ehb-article-card--ingredient)):has(> :nth-child(5)),
	.ehb-editorial-grid:has(> :nth-child(5)),
	.ehb-pdp-articles__grid:has(> :nth-child(5)),
	.woocommerce div.product .related.products ul.products:has(> :nth-child(5)) {
		--ehb-track-cols: 2;
		--ehb-track-gap: var(--ehb-space-24, 24px);
		display: grid !important;
		grid-auto-flow: column;
		grid-template-columns: none !important;
		grid-auto-columns: calc((min(var(--ehb-content-width), 100%) - (var(--ehb-track-cols) - 1) * var(--ehb-track-gap)) / var(--ehb-track-cols));
		column-gap: var(--ehb-track-gap);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding-bottom: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:has(> :nth-child(5))::-webkit-scrollbar,
	.ehb-hub-grid:not(:has(.ehb-article-card--ingredient)):has(> :nth-child(5))::-webkit-scrollbar,
	.ehb-editorial-grid:has(> :nth-child(5))::-webkit-scrollbar,
	.ehb-pdp-articles__grid:has(> :nth-child(5))::-webkit-scrollbar,
	.woocommerce div.product .related.products ul.products:has(> :nth-child(5))::-webkit-scrollbar {
		display: none;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:has(> :nth-child(5))>*,
	.ehb-hub-grid:not(:has(.ehb-article-card--ingredient)):has(> :nth-child(5))>*,
	.ehb-editorial-grid:has(> :nth-child(5))>*,
	.ehb-pdp-articles__grid:has(> :nth-child(5))>*,
	.woocommerce div.product .related.products ul.products:has(> :nth-child(5))>* {
		min-width: 0;
		max-width: none;
		scroll-snap-align: start;
	}
}

@media (min-width: 1024px) {

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:has(> :nth-child(5)),
	.ehb-hub-grid:not(:has(.ehb-article-card--ingredient)):has(> :nth-child(5)),
	.ehb-editorial-grid:has(> :nth-child(5)),
	.ehb-pdp-articles__grid:has(> :nth-child(5)),
	.woocommerce div.product .related.products ul.products:has(> :nth-child(5)) {
		--ehb-track-cols: 3;
	}
}

@media (min-width: 1200px) {

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:has(> :nth-child(5)),
	.ehb-hub-grid:not(:has(.ehb-article-card--ingredient)):has(> :nth-child(5)),
	.ehb-editorial-grid:has(> :nth-child(5)),
	.ehb-pdp-articles__grid:has(> :nth-child(5)),
	.woocommerce div.product .related.products ul.products:has(> :nth-child(5)) {
		--ehb-track-cols: 4;
	}
}

/* Best Sellers is the one row built from two Query blocks: content.css makes
   the columns, the query wrappers and the lists display:contents so all the
   cards land in one grid. The track therefore belongs on the Columns block
   itself — the rule above would otherwise turn each list back into a grid of
   its own and squeeze its half of the cards into 48px. */
@media (min-width: 768px) {

	.entry-content .ehb-best-sellers .ehb-product-grid .wp-block-post-template {
		display: contents !important;
	}

	.entry-content .ehb-best-sellers.wp-block-columns:has(.wp-block-post:nth-child(5)) {
		--ehb-track-cols: 2;
		--ehb-track-gap: var(--ehb-space-24, 24px);
		max-width: none;
		width: auto;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((min(var(--ehb-content-width), 100%) - (var(--ehb-track-cols) - 1) * var(--ehb-track-gap)) / var(--ehb-track-cols));
		column-gap: var(--ehb-track-gap);
		padding-inline-start: max(0px, calc((100% - var(--ehb-content-width)) / 2));
		scroll-padding-inline-start: max(0px, calc((100% - var(--ehb-content-width)) / 2));
		/* Explicit width, not just the negative margin: a track whose parent pins
		   it to width:100% (the Query Loop list) kept the parent width while one
		   that did not (Best Sellers' Columns block) grew by the gutter, so the two
		   rows sized their cards off different numbers — 310 vs 320 at 1393. */
		width: calc(100% + var(--ehb-gutter));
		max-width: none;
		margin-inline-end: calc(-1 * var(--ehb-gutter));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding-bottom: 12px;
		scrollbar-width: none;
	}

	.entry-content .ehb-best-sellers.wp-block-columns::-webkit-scrollbar {
		display: none;
	}

	.entry-content .ehb-best-sellers.wp-block-columns>.wp-block-column .wp-block-post {
		scroll-snap-align: start;
	}
}

@media (min-width: 1024px) {
	.entry-content .ehb-best-sellers.wp-block-columns:has(.wp-block-post:nth-child(5)) {
		--ehb-track-cols: 3;
	}
}

@media (min-width: 1200px) {
	.entry-content .ehb-best-sellers.wp-block-columns:has(.wp-block-post:nth-child(5)) {
		--ehb-track-cols: 5;
	}
}

/* Desktop card counts only. Preserve Home's right bleed, snapping, arrows
   and mobile/tablet tracks; article rows remain four across. */
@media (min-width: 1200px) {

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:has(> :nth-child(5)),
	.woocommerce div.product .related.products ul.products:has(> :nth-child(5)) {
		--ehb-track-cols: 5;
	}

	.entry-content .ehb-hub-grid:has(> .ehb-article-card--guide):not(:has(> :nth-child(5))) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template:not(:has(> :nth-child(5))),
	.woocommerce div.product .related.products ul.products:not(:has(> :nth-child(5))) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Out-of-stock block cards (homepage rows): same treatment as the PLP cards —
   dimmed packshot, muted "View product" pill, muted badge (Figma 192:863). */
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid li.outofstock .wc-block-components-product-image img {
	opacity: 0.45;
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button__button.ehb-button--outofstock {
	background: var(--ehb-surface-raised);
	border: 1px solid var(--ehb-line-subtle);
	color: var(--ehb-text-muted);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button__button.ehb-button--outofstock:hover,
:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-button__button.ehb-button--outofstock:focus-visible {
	background: var(--ehb-surface-blush);
	border-color: var(--ehb-brand-rose-plum);
	color: var(--ehb-brand-rose-plum);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-sale-badge.ehb-oos-badge {
	background: var(--ehb-line-strong);
	border: 1px solid var(--ehb-line-subtle);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wc-block-components-product-sale-badge.ehb-oos-badge span {
	color: var(--ehb-text-ink);
}