/* ==========================================================================
   Emily H&B — Components
   --------------------------------------------------------------------------
   One block per Figma component on page "01 · Components". Every value is
   transcribed from the component set; nothing here is invented. Where the
   Figma file used an ad-hoc size instead of a named text style, that is called
   out in a comment so it can be reconciled with anh Phil rather than quietly
   standardised away.

   These are the primitives. assets/css/woocommerce.css maps WooCommerce and
   Kadence markup onto them.
   ========================================================================== */

/* ==========================================================================
   Button — Figma "Button", 3 variants x 3 sizes x 4 states
   Primary rests on brand/orchid and moves to rose-plum on hover and press.
   ========================================================================== */

.ehb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

/* Sizes. Padding and size come straight from the variants; the tracking is
   Label/Button at every size, with the trailing space cancelled so the label
   sits optically centred inside the pill. */
.ehb-btn--lg {
	padding: 17px 30px;
	font-size: 14px;
	line-height: 1;
	letter-spacing: var(--ehb-ls-label-button);
	text-indent: var(--ehb-ls-label-button);
}

.ehb-btn--md {
	padding: 14px 24px;
	font-size: var(--ehb-size-label-button);
	line-height: 1;
	letter-spacing: var(--ehb-ls-label-button);
	text-indent: var(--ehb-ls-label-button);
}

.ehb-btn--sm {
	padding: 11px 18px;
	font-size: var(--ehb-size-label-button-compact);
	line-height: 1;
	letter-spacing: var(--ehb-ls-label-button-compact);
	text-indent: var(--ehb-ls-label-button-compact);
}

/* Primary */
.ehb-btn--primary {
	background: var(--ehb-brand-orchid);
	color: var(--ehb-text-on-dark);
}

.ehb-btn--primary:hover,
.ehb-btn--primary:focus-visible {
	background: var(--ehb-brand-rose-plum);
	color: var(--ehb-text-on-dark);
}

.ehb-btn--primary:active {
	background: var(--ehb-brand-rose-plum);
}

.ehb-btn--primary:disabled,
.ehb-btn--primary[aria-disabled='true'] {
	background: var(--ehb-line-strong);
	color: var(--ehb-text-muted);
	cursor: not-allowed;
}

/* Secondary — outlined. The 1.5px border is inset so the pill does not grow
   between states. */
.ehb-btn--secondary {
	background: transparent;
	color: var(--ehb-brand-rose-plum);
	box-shadow: inset 0 0 0 1.5px var(--ehb-brand-rose-plum);
}

.ehb-btn--secondary:hover,
.ehb-btn--secondary:focus-visible,
.ehb-btn--secondary:active {
	background: var(--ehb-surface-blush);
	color: var(--ehb-brand-rose-plum);
}

.ehb-btn--secondary:disabled,
.ehb-btn--secondary[aria-disabled='true'] {
	background: transparent;
	color: var(--ehb-text-muted);
	box-shadow: inset 0 0 0 1.5px var(--ehb-line-strong);
	cursor: not-allowed;
}

/* Ghost — no ground, no border; only the label colour moves. */
.ehb-btn--ghost {
	background: transparent;
	color: var(--ehb-text-ink);
}

.ehb-btn--ghost:hover,
.ehb-btn--ghost:focus-visible,
.ehb-btn--ghost:active {
	background: transparent;
	color: var(--ehb-brand-orchid);
}

.ehb-btn--ghost:disabled,
.ehb-btn--ghost[aria-disabled='true'] {
	color: var(--ehb-text-muted);
	cursor: not-allowed;
}

.ehb-btn:focus-visible {
	outline: 2px solid var(--ehb-brand-magenta);
	outline-offset: 2px;
}

/* ==========================================================================
   Badge — Figma "Badge", 6 types
   Three filled promotional types, three outlined stock types.
   ========================================================================== */

.ehb-badge-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--ehb-space-4) var(--ehb-space-8);
	border-radius: var(--ehb-radius-pill);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: var(--ehb-size-label-badge);
	line-height: var(--ehb-lh-label-badge);
	letter-spacing: var(--ehb-ls-label-badge);
	text-indent: var(--ehb-ls-label-badge);
	text-transform: uppercase;
	white-space: nowrap;
}

.ehb-badge-pill--sale {
	background: var(--ehb-status-sale);
	color: var(--ehb-text-on-dark);
}

.ehb-badge-pill--new {
	background: var(--ehb-brand-rose-plum);
	color: var(--ehb-text-on-dark);
}

.ehb-badge-pill--bestseller {
	background: var(--ehb-brand-orchid);
	color: var(--ehb-text-on-dark);
}

.ehb-badge-pill--low-stock {
	background: transparent;
	color: var(--ehb-text-ink);
	box-shadow: inset 0 0 0 1px var(--ehb-line-strong);
}

.ehb-badge-pill--in-stock {
	background: transparent;
	color: var(--ehb-status-in-stock);
	box-shadow: inset 0 0 0 1px var(--ehb-line-subtle);
}

.ehb-badge-pill--out-of-stock {
	background: var(--ehb-line-strong);
	color: var(--ehb-text-muted);
	box-shadow: inset 0 0 0 1px var(--ehb-line-subtle);
}

/* ==========================================================================
   Price Block — Figma "Price Block", Regular / Sale
   ========================================================================== */

.ehb-price-block {
	display: flex;
	flex-direction: column;
	gap: var(--ehb-space-2);
}

.ehb-price-block__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.ehb-price-block__amount {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-semibold);
	font-size: var(--ehb-size-price);
	line-height: var(--ehb-lh-price);
	font-variant-numeric: tabular-nums;
	color: var(--ehb-text-ink);
}

/* On sale the live price turns magenta and the old price sits beside it,
   struck through in muted. */
.ehb-price-block--sale .ehb-price-block__amount {
	color: var(--ehb-status-sale);
}

.ehb-price-block__was {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-muted);
	text-decoration: line-through;
}

/* "incl. GST" is required context on an Australian storefront, not a caption
   that can be dropped for space. */
.ehb-price-block__gst {
	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);
}

/* ==========================================================================
   Rating Stars — Figma "Rating Stars"
   ========================================================================== */

.ehb-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--ehb-space-8);
}

.ehb-rating__stars {
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-brand-magenta);
	letter-spacing: 1px;
}

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

/* ==========================================================================
   Qty Stepper — Figma "Qty Stepper", M 114x48 / S 112x38
   ========================================================================== */

.ehb-qty {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-pill);
	overflow: hidden;
}

.ehb-qty--sm {
	height: 38px;
}

.ehb-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 39px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-body-base);
	color: var(--ehb-text-body);
	cursor: pointer;
}

.ehb-qty--sm .ehb-qty__btn {
	width: 38px;
	font-weight: 400;
	font-size: var(--ehb-size-body-small);
}

.ehb-qty__value {
	width: 36px;
	padding: 0 var(--ehb-space-4);
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-body-base);
	color: var(--ehb-text-ink);
	-moz-appearance: textfield;
}

.ehb-qty__value::-webkit-outer-spin-button,
.ehb-qty__value::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ehb-qty--sm .ehb-qty__value {
	font-weight: 400;
	font-size: var(--ehb-size-body-small);
}

/* ==========================================================================
   Section Head — Figma "Section Head", Left / Center
   ========================================================================== */

/* Align=Left is the design's default. Stated explicitly because Kadence
   centres block headings inside page content, which silently turned every
   section head on the homepage into the Align=Center variant. */
/* Figma section heads are 30px ExtraBold UPPERCASE with an 8px gap to the
   link beneath — not Display/D3 (28px Bold). Measured on nodes 18:124,
   20:234 and 108:321. */
.ehb-section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	text-align: start;
}

.ehb-section-head--center {
	text-align: center;
	align-items: center;
}

.ehb-section-head__title,
.ehb-section-head__link {
	text-align: inherit;
}

/*
 * When the section head is a core/group with a constrained layout, WordPress
 * gives every child "max-width: <content-size>; margin-left: auto;
 * margin-right: auto" — which centres the heading no matter what align-items
 * says on the flex container. align-items governs the cross axis; an explicit
 * auto margin on the child wins over it.
 *
 * Undo it on the children. Do not swap the pattern to layout "default"
 * instead: pages already saved carry the constrained markup in post content,
 * and changing the pattern would not reach them.
 */
.ehb-section-head.is-layout-constrained>*,
.ehb-section-head>.ehb-section-head__title,
.ehb-section-head>.ehb-section-head__link {
	/*
	 * !important is unavoidable here: core's rule is
	 *   .is-layout-constrained > :where(...) { margin-left: auto !important }
	 * and nothing without !important can beat it. The patterns themselves now
	 * use layout "default" so this never fires on a freshly built page — this
	 * is the safety net for content someone saves with a constrained group.
	 */
	margin-inline: 0 !important;
	max-width: none;
}

.ehb-section-head--center.is-layout-constrained>* {
	margin-inline: auto !important;
}

.ehb-section-head__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-extrabold);
	font-size: clamp(21px, calc(21px + 9 * (100vw - 390px) / 1050), 30px);
	line-height: 1.1;
	letter-spacing: var(--ehb-ls-d2);
	text-transform: uppercase;
	color: var(--ehb-text-ink);
	margin: 0;
}

/* Figma: 14px on a 17px line box, not Body/Small's 22px — the section head is
   58 tall only if the link is 17. */
.ehb-section-head__link {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: 17px;
	color: var(--ehb-text-muted);
	text-decoration: none;
}

.ehb-section-head__link:hover,
.ehb-section-head__link:focus-visible {
	color: var(--ehb-brand-magenta);
	text-decoration: underline;
}

/* ==========================================================================
   Form Field — Figma "Form Field", Text / Select / Textarea x 4 states
   The focus ring is a 2px magenta border, not an outline, because the design
   shows the border itself thickening and changing colour.
   ========================================================================== */

.ehb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

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

.ehb-field__control,
.ehb-field input[type='text'],
.ehb-field input[type='email'],
.ehb-field input[type='tel'],
.ehb-field input[type='number'],
.ehb-field input[type='password'],
.ehb-field input[type='search'],
.ehb-field select,
.ehb-field textarea {
	width: 100%;
	padding: 14px var(--ehb-space-16);
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-md);
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-ink);
	/* The border grows from 1px to 2px on focus. Without this the control
	   would jump 1px and shift everything below it. */
	box-sizing: border-box;
}

.ehb-field textarea {
	min-height: 100px;
	padding-bottom: 60px;
	resize: vertical;
}

.ehb-field select {
	appearance: none;
	padding-right: 44px;
	/* The chevron is drawn in CSS rather than shipped as an icon — it is two
	   lines, and an extra request is not worth it. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ehb-text-muted) 50%),
		linear-gradient(135deg, var(--ehb-text-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 22px) calc(50% + 1px),
		calc(100% - 17px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.ehb-field__control:focus,
.ehb-field input:focus,
.ehb-field select:focus,
.ehb-field textarea:focus {
	outline: 0;
	border-width: 2px;
	border-color: var(--ehb-brand-magenta);
	padding: 13px 15px;
}

.ehb-field textarea:focus {
	padding-bottom: 59px;
}

/* Error looks identical to focus, which is intentional in the design: the
   border is the alarm and the message below carries the meaning. */
.ehb-field--error .ehb-field__control,
.ehb-field--error input,
.ehb-field--error select,
.ehb-field--error textarea {
	border-width: 2px;
	border-color: var(--ehb-brand-magenta);
	padding: 13px 15px;
}

.ehb-field__error {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-caption);
	line-height: var(--ehb-lh-body-caption);
	color: var(--ehb-brand-magenta);
}

.ehb-field--disabled .ehb-field__label,
.ehb-field :disabled {
	color: var(--ehb-text-muted);
}

.ehb-field :disabled {
	background: var(--ehb-surface-raised);
	cursor: not-allowed;
}

/* ==========================================================================
   Checkbox and Radio — Figma "Checkbox" / "Radio", 20x20 controls
   The native input is kept and restyled rather than hidden behind a span, so
   keyboard behaviour, form submission and screen readers all keep working.
   ========================================================================== */

.ehb-check {
	display: inline-flex;
	align-items: center;
	gap: var(--ehb-space-12);
}

.ehb-check input[type='checkbox'],
.ehb-check input[type='radio'] {
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-strong);
	border-radius: var(--ehb-radius-sm);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
}

.ehb-check input[type='radio'] {
	border-radius: var(--ehb-radius-pill);
}

.ehb-check input[type='checkbox']:checked,
.ehb-check input[type='radio']:checked {
	background: var(--ehb-brand-magenta);
	border-color: var(--ehb-brand-magenta);
}

.ehb-check input[type='checkbox']:checked::before {
	content: '';
	width: 10px;
	height: 6px;
	border-inline-start: 2px solid var(--ehb-text-on-dark);
	border-block-end: 2px solid var(--ehb-text-on-dark);
	transform: translateY(-1px) rotate(-45deg);
}

.ehb-check input[type='radio']:checked::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: var(--ehb-radius-pill);
	background: var(--ehb-text-on-dark);
}

.ehb-check input:focus-visible {
	outline: 2px solid var(--ehb-brand-magenta);
	outline-offset: 2px;
}

.ehb-check input:disabled {
	background: var(--ehb-surface-raised);
	border-color: var(--ehb-line-strong);
	cursor: not-allowed;
}

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

.ehb-check input:disabled+.ehb-check__label {
	color: var(--ehb-text-muted);
}

/* ==========================================================================
   Summary Row — Figma "Summary Row", Normal / Bold / Total
   ========================================================================== */

.ehb-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ehb-space-16);
	padding: 10px 0;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-body);
}

.ehb-summary-row--bold {
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-ink);
}

.ehb-summary-row--total {
	padding: var(--ehb-space-16) 0;
	border-top: 1px solid var(--ehb-line-subtle);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: var(--ehb-size-h4);
	line-height: var(--ehb-lh-h4);
	color: var(--ehb-text-ink);
}

.ehb-summary-row> :last-child {
	font-variant-numeric: tabular-nums;
}

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

.ehb-breadcrumb-bar {
	background: var(--ehb-breadcrumb-bg, var(--ehb-surface-paper));
	border-top: 1px solid var(--ehb-line-subtle);
	border-bottom: 1px solid var(--ehb-line-subtle);
	width: 100%;
	padding: 18px var(--ehb-gutter);
	box-sizing: border-box;
}

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

.ehb-breadcrumb-bar .ehb-breadcrumb,
.ehb-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ehb-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-breadcrumb-color, var(--ehb-text-muted));
}

.ehb-breadcrumb li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.ehb-breadcrumb a {
	color: var(--ehb-breadcrumb-color, var(--ehb-text-muted));
	text-decoration: none;
	transition: color 150ms ease-out;
}

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

.ehb-breadcrumb__separator {
	color: var(--ehb-breadcrumb-sep-color, var(--ehb-text-muted));
	user-select: none;
	font-size: 14px;
	line-height: 1;
}

/* The current page is the only item at full body strength. */
.ehb-breadcrumb [aria-current='page'],
.ehb-breadcrumb .breadcrumb_last {
	color: var(--ehb-breadcrumb-current, var(--ehb-text-body));
	font-weight: var(--ehb-weight-regular);
}

@media (max-width: 767px) {
	.ehb-breadcrumb-bar {
		padding: 12px var(--ehb-gutter);
	}
}

/* ==========================================================================
   Toolbar — Figma "Toolbar", result count + sort select
   ========================================================================== */

.ehb-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ehb-space-16);
	padding: 14px 0;
	border-top: 1px solid var(--ehb-line-subtle);
	border-bottom: 1px solid var(--ehb-line-subtle);
}

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

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

/* ==========================================================================
   Pagination — Figma "Pagination", 40x40 cells
   ========================================================================== */

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

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

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

.ehb-pagination .current {
	background: var(--ehb-brand-magenta);
	border-color: var(--ehb-brand-magenta);
	color: var(--ehb-text-on-dark);
}

/* ==========================================================================
   Tab Bar — Figma "Tab Bar", underline on the active tab
   ========================================================================== */

.ehb-tabs {
	display: flex;
	gap: var(--ehb-space-32);
	border-bottom: 1px solid var(--ehb-line-subtle);
}

.ehb-tabs__tab {
	padding-bottom: 14px;
	border-bottom: 2px solid transparent;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-label-nav);
	line-height: var(--ehb-lh-label-nav);
	letter-spacing: var(--ehb-ls-label-nav);
	color: var(--ehb-text-muted);
	text-decoration: none;
	/* The 1px container rule and the 2px active rule must overlap, not stack,
	   or the active tab sits a pixel lower than the rest. */
	margin-bottom: -1px;
}

.ehb-tabs__tab:hover,
.ehb-tabs__tab:focus-visible {
	color: var(--ehb-text-ink);
}

.ehb-tabs__tab[aria-selected='true'],
.ehb-tabs__tab.is-active {
	border-bottom-color: var(--ehb-brand-magenta);
	color: var(--ehb-text-ink);
}

/* ==========================================================================
   Filter Group — Figma "Filter Group", Expanded / Collapsed
   Built on details/summary so the collapse works without JavaScript.
   ========================================================================== */

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

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

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

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

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

/* The +/− is generated, so the markup carries no throwaway glyph. */
.ehb-filter-group__header::after {
	content: '+';
	font-family: var(--ehb-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	color: var(--ehb-text-ink);
}

.ehb-filter-group[open]>.ehb-filter-group__header::after {
	content: '\2212';
	/* true minus sign, not a hyphen */
	font-size: 18px;
	line-height: 1;
	color: var(--ehb-text-ink);
}

.ehb-filter-group__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
}

/* ==========================================================================
   Product Card — Figma "Product Card", Health / Beauty x Default / Hover
   The two categories differ only in the well colour behind the packshot.
   ========================================================================== */

.ehb-product-card {
	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-card:hover,
.ehb-product-card:focus-within {
	border-color: var(--ehb-line-strong);
	box-shadow: 0 8px 28px rgba(36, 18, 31, 0.1);
}

.ehb-product-card__well {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ehb-space-8);
	padding: var(--ehb-space-12);
	background: var(--ehb-surface-lilac);
	/* Health */
}

.ehb-product-card--beauty .ehb-product-card__well {
	background: var(--ehb-surface-blush);
}

.ehb-product-card__well img {
	width: 100%;
	height: auto;
	/* The packshots are transparent PNGs on a tinted well; contain keeps the
	   bottle whole rather than cropping it to the box. */
	object-fit: contain;
}

.ehb-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: var(--ehb-space-16) var(--ehb-space-16) 18px;
}

/*
 * The concern eyebrow is 11px Bold in rose-plum. In Figma this is an ad-hoc
 * size, not the Label/Eyebrow style — Label/Eyebrow is also 11px Bold but
 * carries 12% tracking and magenta. Transcribed as drawn; worth reconciling
 * with anh Phil so the card and the article card use one eyebrow.
 */
.ehb-product-card__concern {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 11px;
	line-height: var(--ehb-lh-label-eyebrow);
	text-transform: uppercase;
	color: var(--ehb-brand-rose-plum);
}

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

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

/* The card's add-to-cart is full width and slightly tighter than a normal
   medium button, so it is a modifier rather than the base size. */
.ehb-product-card .ehb-btn {
	width: 100%;
	padding: 13px var(--ehb-space-8);
	margin-top: var(--ehb-space-4);
}

/* ==========================================================================
   Concern Tile — Figma "Concern Tile"
   ========================================================================== */

.ehb-concern-tile {
	display: flex;
	flex-direction: column;
	background: var(--ehb-surface-paper);
	border: 1px solid var(--ehb-line-subtle);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.ehb-concern-tile:hover,
.ehb-concern-tile:focus-visible {
	border-color: var(--ehb-brand-rose-plum);
	box-shadow: 0 6px 20px rgba(36, 18, 31, 0.09);
}

.ehb-concern-tile__well {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 300 / 340;
	background: var(--ehb-surface-lilac);
	/* Health */
	overflow: hidden;
}

.ehb-concern-tile--beauty .ehb-concern-tile__well {
	background: var(--ehb-surface-blush);
}

.ehb-concern-tile__well img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* 17px SemiBold is between Heading/H4 (16) and Heading/H3 (20) — another
   ad-hoc size in the Figma file. Drawn as specified. */
.ehb-concern-tile__title {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-semibold);
	font-size: 17px;
	line-height: 1.3;
	color: var(--ehb-text-ink);
	margin: 0;
}

.ehb-concern-tile__meta {
	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);
}

/* ==========================================================================
   Article Card — Figma "Article Card", Guide / Article / Ingredient
   The Ingredient type has no thumbnail: it is a glossary entry, and the
   design deliberately gives it type only.
   ========================================================================== */

.ehb-article-card {
	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;
	text-decoration: none;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

/* The whole card is often an anchor (hub grids); keep its text unadorned and
   let the title carry the hover, matching the Figma card. */
a.ehb-article-card,
a.ehb-article-card:hover,
a.ehb-article-card:focus-within {
	text-decoration: none;
}

a.ehb-article-card:hover .ehb-article-card__title,
a.ehb-article-card:focus-visible .ehb-article-card__title {
	color: var(--ehb-brand-magenta);
}

.ehb-article-card:hover,
.ehb-article-card:focus-within {
	border-color: var(--ehb-line-strong);
	box-shadow: 0 8px 28px rgba(36, 18, 31, 0.1);
}

.ehb-article-card__thumb {
	aspect-ratio: 380 / 200;
	background: var(--ehb-surface-lilac);
}

.ehb-article-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ehb-article-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px var(--ehb-space-24) var(--ehb-space-24);
}

.ehb-article-card__eyebrow {
	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-indent: var(--ehb-ls-label-eyebrow);
	text-transform: uppercase;
	color: var(--ehb-brand-magenta);
}

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

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

.ehb-article-card__excerpt {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-body);
}

.ehb-article-card__meta {
	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);
}

/* Ingredient glossary entry: type only, no thumbnail well. The heading is the
   ingredient name and the meta line links through to the glossary entry. */
.ehb-article-card--ingredient .ehb-article-card__body {
	padding-block: var(--ehb-space-24);
	gap: var(--ehb-space-8);
}

.ehb-article-card--ingredient .ehb-article-card__meta {
	margin-top: var(--ehb-space-4);
	color: var(--ehb-brand-magenta);
}

/* ==========================================================================
   Cart Line Item — Figma "Cart Line Item"
   ========================================================================== */

.ehb-cart-line {
	display: flex;
	align-items: flex-start;
	gap: var(--ehb-space-20);
	padding: var(--ehb-space-20) 0;
	border-bottom: 1px solid var(--ehb-line-subtle);
}

.ehb-cart-line__thumb {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	background: var(--ehb-surface-blush);
	border-radius: var(--ehb-radius-md);
	overflow: hidden;
}

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

.ehb-cart-line__meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--ehb-space-8);
	min-width: 0;
}

.ehb-cart-line__title {
	font-family: var(--ehb-font-body);
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-body-base);
	line-height: var(--ehb-lh-body-base);
	color: var(--ehb-text-ink);
}

/* The bulk-pricing note is how the tiered discount is explained at the line
   level — see the Bundles banner: pricing is applied automatically at the
   cart with no codes. Do not hide it to save space. */
.ehb-cart-line__note {
	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-cart-line__controls {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ehb-cart-line__remove {
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-muted);
	text-decoration: none;
}

.ehb-cart-line__remove:hover,
.ehb-cart-line__remove:focus-visible {
	color: var(--ehb-brand-magenta);
	text-decoration: underline;
}

.ehb-cart-line__total {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--ehb-space-2);
	align-items: flex-end;
	text-align: end;
}

@media (max-width: 767px) {
	.ehb-cart-line {
		flex-wrap: wrap;
	}

	.ehb-cart-line__total {
		align-items: flex-start;
		text-align: start;
		width: 100%;
		padding-inline-start: calc(96px + var(--ehb-space-20));
	}
}

/* ==========================================================================
   Payment Row — Figma "Payment Row", Desktop / Mobile
   The marks are trademarked assets in assets/img/payment/. They are sized,
   never recoloured. Apple Pay in particular is governed by the Apple Pay
   Identity Guidelines.
   ========================================================================== */

.ehb-payment-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 48px;
	margin: 0 auto;
}

.ehb-payment-row .ehb-payment-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ehb-payment-row img,
.ehb-payment-row .ehb-payment-mark img {
	display: block;
	width: auto;
	height: 26px;
}

/* Exact optical heights from Figma node 312:2074 */
.ehb-payment-row img[alt*='PayPal' i],
.ehb-payment-row .ehb-payment-mark--paypal img {
	height: 26px;
}

.ehb-payment-row img[alt*='Visa' i],
.ehb-payment-row .ehb-payment-mark--visa img {
	height: 22px;
}

.ehb-payment-row img[alt*='Mastercard' i],
.ehb-payment-row .ehb-payment-mark--mastercard img {
	height: 36px;
}

.ehb-payment-row picture,
.ehb-payment-row .ehb-payment-mark--afterpay {
	display: inline-flex;
	align-items: center;
}

.ehb-payment-row img[alt*='Afterpay' i],
.ehb-payment-row .ehb-payment-mark--afterpay img {
	height: 36px;
	border-radius: 5px;
}

.ehb-payment-row img[alt*='Apple Pay' i],
.ehb-payment-row .ehb-payment-mark--apple-pay img {
	height: 26px;
}

@media (max-width: 767px) {
	.ehb-payment-row {
		max-width: 220px;
		gap: 14px 22px;
	}

	.ehb-payment-row img,
	.ehb-payment-row .ehb-payment-mark img {
		height: 19px;
	}

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

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

	.ehb-payment-row img[alt*='Afterpay' i],
	.ehb-payment-row .ehb-payment-mark--afterpay img {
		height: 26px;
		border-radius: 4px;
	}

	.ehb-payment-row img[alt*='Apple Pay' i],
	.ehb-payment-row .ehb-payment-mark--apple-pay img {
		height: 19px;
	}
}

/* ==========================================================================
   core/button — mapped onto the Button component
   --------------------------------------------------------------------------
   A bare core/button is the primary pill, because that is the button the
   design uses almost everywhere. The other two variants are registered block
   styles (see inc/class-emily-hb-blocks.php), which put an is-style-* class
   on the wrapper — core/button will not let a pattern class the <a> itself.

   Size is a plain class on the wrapper, set in the pattern.
   ========================================================================== */

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

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

.wp-block-button.is-style-ehb-secondary .wp-block-button__link {
	background: transparent;
	color: var(--ehb-brand-rose-plum);
	box-shadow: inset 0 0 0 1.5px var(--ehb-brand-rose-plum);
}

.wp-block-button.is-style-ehb-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-ehb-secondary .wp-block-button__link:focus-visible {
	background: var(--ehb-surface-blush);
	color: var(--ehb-brand-rose-plum);
}

.wp-block-button.is-style-ehb-ghost .wp-block-button__link {
	background: transparent;
	color: var(--ehb-text-ink);
}

.wp-block-button.is-style-ehb-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ehb-ghost .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--ehb-brand-orchid);
}

/* Sizes */
.wp-block-button.ehb-btn-lg .wp-block-button__link {
	padding: 17px 30px;
	font-size: 14px;
}

.wp-block-button.ehb-btn-sm .wp-block-button__link {
	padding: 11px 18px;
	font-size: var(--ehb-size-label-button-compact);
	letter-spacing: var(--ehb-ls-label-button-compact);
	text-indent: var(--ehb-ls-label-button-compact);
}

/* On a dark or magenta ground the primary pill inverts to paper. */
.ehb-on-dark .wp-block-button__link {
	background: var(--ehb-surface-paper);
	color: var(--ehb-brand-rose-plum);
}

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