/* ==========================================================================
   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 {
	padding-block: 88px;
	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. */
.entry-content .ehb-concerns.alignfull,
.entry-content .ehb-why.alignfull,
.entry-content .ehb-reviews.alignfull {
	padding-block: 104px;
}

.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;
}

.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;
}

.ehb-hero__half--beauty {
	background: var(--ehb-surface-blush);
}

.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;
}

.ehb-hero__caption {
	flex: 0 0 auto;
	width: 576px;
	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);
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

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

.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 282px;
	width: 282px;
	max-width: 282px;
	scroll-snap-align: start;
	margin-block: 0;
}

@media (min-width: 1024px) {

	/* When a band has 4 or fewer items (e.g. Skin Concern with 4 items), render as a clean static 4-column grid with zero horizontal scroll or carousel */
	.entry-content .ehb-concerns .ehb-concerns__band .ehb-concerns__track:has(.ehb-concern-tile--beauty),
	.entry-content .ehb-concerns .ehb-concerns__band .ehb-concerns__track:not(:has(:nth-child(5))),
	.entry-content .ehb-concerns .ehb-concerns__track:has(.ehb-concern-tile--beauty),
	.entry-content .ehb-concerns .ehb-concerns__track:not(:has(:nth-child(5))),
	.entry-content .ehb-concerns .ehb-concerns__track.ehb-track--grid,
	.ehb-concerns__track:has(.ehb-concern-tile--beauty),
	.ehb-concerns__track:not(:has(:nth-child(5))),
	.ehb-concerns__track.ehb-track--grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ehb-space-24);
		overflow-x: visible;
		padding-bottom: 0;
	}

	.entry-content .ehb-concerns .ehb-concerns__band .ehb-concerns__track:has(.ehb-concern-tile--beauty)>*,
	.entry-content .ehb-concerns .ehb-concerns__band .ehb-concerns__track:not(:has(:nth-child(5)))>*,
	.entry-content .ehb-concerns .ehb-concerns__track:has(.ehb-concern-tile--beauty)>*,
	.entry-content .ehb-concerns .ehb-concerns__track:not(:has(:nth-child(5)))>*,
	.entry-content .ehb-concerns .ehb-concerns__track.ehb-track--grid>*,
	.ehb-concerns__track:has(.ehb-concern-tile--beauty)>*,
	.ehb-concerns__track:not(:has(:nth-child(5)))>*,
	.ehb-concerns__track.ehb-track--grid>*,
	.entry-content .ehb-concerns .ehb-concerns__track:has(.ehb-concern-tile--beauty) .ehb-concern-tile,
	.entry-content .ehb-concerns .ehb-concerns__track:not(:has(:nth-child(5))) .ehb-concern-tile,
	.entry-content .ehb-concerns .ehb-concerns__track.ehb-track--grid .ehb-concern-tile {
		flex: none;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
}

@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 140px;
		width: 140px;
		max-width: 140px;
		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 */
	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	/* Best Sellers splits into 2 columns per half */
	.entry-content .ehb-best-sellers .ehb-product-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 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 {
	background: var(--ehb-surface-blush);
}

/* 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: 96px;
}

.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: 28px;
}

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

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

.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;
}

@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);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li:nth-child(odd) .wc-block-components-product-image {
	background: var(--ehb-surface-lilac);
}

:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li:nth-child(even) .wc-block-components-product-image {
	background: var(--ehb-surface-blush);
}

/* 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;
	width: 300px;
	min-width: 300px;
	flex: 0 0 300px;
	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;
	aspect-ratio: 300 / 340;
	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: 300 / 340;
	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;
		padding-inline: 16px;
	}

	.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;
	}

	.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: 140px;
		min-width: 140px;
		flex: 0 0 140px;
		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;
	}

	:is(.entry-content, .woocommerce, .site-main) .ehb-product-grid .wp-block-post-template>li {
		flex: 0 0 140px;
		width: 140px;
		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 140px;
		width: 140px;
		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);
}

.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);
}

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

.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 140px;
		width: 140px;
		min-width: 140px;
		max-width: 140px;
		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 140px;
		width: 140px;
		min-width: 140px;
		max-width: 140px;
		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. */
@media (max-width: 767px) {
	.ehb-about-pillars .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: 20px;
}

.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: 36px 36px 40px;
	box-sizing: border-box;
	box-shadow: 0 4px 24px rgba(36, 19, 32, 0.04);
}

.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; }
	.entry-content .ehb-why .ehb-why__cluster { 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; }
}