/*
 * BDx design-system stylesheet.
 *
 * Phase 7.1: visual refinement onto the official BDx brand palette.
 * Hand-written, dependency-free CSS — no framework, no build step, no
 * remote fonts (see docs/BDX-SPECIFICATION.md §15 "minimal frontend
 * JavaScript" / "no unused framework CSS" and §22's small, disciplined
 * token set).
 *
 * Organization:
 *   1. Design tokens (custom properties)
 *   2. Base reset / typography
 *   3. Layout / containers
 *   4. Buttons / links
 *   5. Forms
 *   6. Cards (generic, product, category)
 *   7. Badges
 *   8. Notices (incl. WooCommerce's own notice classes)
 *   9. Header / navigation
 *  10. Footer
 *  11. Homepage sections
 *  12. Utilities
 *  13. Accessibility (focus states, reduced motion, skip link)
 *  14. Responsive breakpoints
 *
 * Breakpoints — the full BDX design-system reference is
 * docs/BDX-DESIGN-SYSTEM.md; documented here too since CSS custom
 * properties cannot be used inside @media conditions, so these are
 * applied as literal values throughout, mobile-first. Five conceptual
 * tiers are recognized (per the design system's viewport range), but
 * only three actually get a structural @media rule — "large mobile /
 * small tablet" intentionally shares mobile's layout, since the
 * clamp()-based typography tokens and flexible grid/flexbox layouts
 * already adapt smoothly across that range without a layout change;
 * adding a breakpoint there would be responsive complexity with no
 * layout benefit ("use breakpoints only where the layout actually
 * needs structural adaptation"):
 *   - mobile:                  <480px  — base styles, no media query
 *   - large mobile/small tablet: 480–767px — same base styles (no
 *                               dedicated media query; see above)
 *   - tablet:                  min-width: 600px
 *   - desktop:                 min-width: 1024px
 *   - large desktop:           min-width: 1440px
 *
 * Color contrast was verified against WCAG 2.1 AA using the standard
 * relative-luminance formula before these values were chosen/applied —
 * see the comments beside each color token below for the specific
 * ratios. Two of the eight official BDx tokens do NOT reach 4.5:1 as
 * small/normal TEXT on light backgrounds (Primary Blue #0A84FF: 3.65:1
 * on white; Success #34C759: ~2.2:1 on white) — this is a property of
 * the exact mandated hex values themselves, not something a different
 * shade would be invented to "fix" (the brief prohibits inventing
 * replacement brand colors). Both are therefore used only in contexts
 * WCAG holds to a lower bar or exempts entirely: Primary Blue for
 * button fills (paired with bold, adequately-sized white text — see
 * .bdx-btn--primary), hover/focus states, and non-text accents, never
 * as the resting color of small body/nav links; Success strictly as a
 * decorative icon/dot/badge-background accent, never as text color
 * itself (this "never color alone" rule already predates this pass).
 */

/* ==========================================================================
   1. Design tokens — official BDx brand palette (Phase 7.1)
   ========================================================================== */

:root {
	/* Color — light surface (default). BDx "White" / "Light Gray". */
	--bdx-color-bg: #ffffff; /* BDx White — primary background */
	--bdx-color-bg-alt: #f5f5f7; /* BDx Light Gray — section backgrounds */
	--bdx-color-surface: #ffffff;
	--bdx-color-ink: #111111; /* BDx Dark — main headings; 18.88:1 on white */
	--bdx-color-ink-secondary: #333333; /* BDx Gray 700 — secondary headings; 12.63:1 on white */
	--bdx-color-ink-muted: #6b7280; /* BDx Gray 500 — body text; 4.83:1 on white (AA) */
	--bdx-color-border: #e5e7eb; /* BDx Gray 200 — decorative dividers/cards only */
	--bdx-color-border-strong: #6b7280; /* reuses Gray 500 — 4.83:1 on white, well past the 3:1 UI-component minimum for form inputs */

	/* Color — accent. BDx "Primary Blue" — the one official brand blue,
	   used verbatim (no darker "strong" derivative invented) per the
	   brief's exact-token requirement. See the file-level comment above
	   for where it can/can't be used as TEXT. */
	--bdx-color-accent: #0a84ff; /* BDx Primary Blue — buttons, links (non-resting), highlights */
	--bdx-color-accent-hover: #0a6fd1; /* hover-state shade of the same blue, not a second brand color */
	--bdx-color-accent-ink: #ffffff;

	/* Color — status (always paired with an icon/label, never color
	   alone — success in particular fails text-contrast on its own,
	   see file-level comment). */
	--bdx-color-success: #34c759; /* BDx Success — decorative accents only (icon/dot/badge bg), not text */
	--bdx-color-success-bg: #eaf9ee;
	--bdx-color-error: #b3261e;
	--bdx-color-error-bg: #fbebea;
	--bdx-color-info: #0a84ff; /* aligned to the one brand blue rather than a second, competing blue */
	--bdx-color-info-bg: #e8f2ff;

	/* Focus ring — 3.65:1 on white / 3.35:1 on --bdx-color-bg-alt,
	   meeting WCAG 1.4.11's 3:1 non-text UI-component minimum (the
	   relevant rule for focus indicators, distinct from the 4.5:1 text
	   rule that doesn't apply here). */
	--bdx-color-focus: #0a84ff;

	/* Typography — raw size scale. Prefer the semantic role tokens
	   below (--bdx-font-display, --bdx-font-h1, etc.) in component CSS;
	   this raw scale exists for cases a semantic role doesn't cover. */
	--bdx-font-sans:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--bdx-font-size-xs: 0.75rem;
	--bdx-font-size-sm: 0.875rem;
	--bdx-font-size-base: 1rem;
	--bdx-font-size-md: 1.125rem;
	--bdx-font-size-lg: 1.375rem;
	--bdx-font-size-xl: 1.75rem;
	--bdx-font-size-2xl: 2.25rem;
	--bdx-font-size-3xl: 3rem;
	--bdx-font-size-4xl: 3.75rem;
	--bdx-line-height-tight: 1.15;
	--bdx-line-height-snug: 1.35;
	--bdx-line-height-base: 1.6;
	--bdx-font-weight-normal: 400;
	--bdx-font-weight-medium: 500;
	--bdx-font-weight-semibold: 600;
	--bdx-font-weight-bold: 700;

	/* Typography — semantic scale (docs/BDX-DESIGN-SYSTEM.md §4). Each
	   role is one clamp(min, preferred, max) declaration spanning
	   mobile → large desktop, so type scales smoothly with viewport
	   width instead of jumping at breakpoints. The "preferred" middle
	   value is viewport-relative (vw), clamped at both ends so it never
	   goes below the mobile minimum or above the desktop maximum — this
	   is what makes one token correct at every width, replacing the
	   old pattern of separate mobile-default + @media desktop-override
	   font-size rules per element. New components should reference
	   these roles rather than the raw size scale or a one-off value. */
	--bdx-font-display: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	--bdx-font-h1: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
	--bdx-font-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
	--bdx-font-h3: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
	--bdx-font-body: clamp(1rem, 0.94rem + 0.25vw, 1.0625rem);
	--bdx-font-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--bdx-font-label: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
	--bdx-font-button: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	--bdx-font-nav: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	--bdx-font-product-title: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	--bdx-font-price: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--bdx-font-metadata: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);

	/* Spacing — canonical scale (docs/BDX-DESIGN-SYSTEM.md §5):
	   4=space-1, 8=space-2, 12=space-3, 16=space-4, 24=space-5,
	   32=space-6, 40=space-10, 48=space-7, 64=space-8, 80=space-11,
	   96=space-9. space-10/space-11 were added later to fill the
	   40px/80px gaps in the original space-1..9 sequence; kept as their
	   own names rather than renumbering the whole scale (and every
	   existing reference to it) for a cosmetic reorder. */
	--bdx-space-1: 0.25rem;
	--bdx-space-2: 0.5rem;
	--bdx-space-3: 0.75rem;
	--bdx-space-4: 1rem;
	--bdx-space-5: 1.5rem;
	--bdx-space-6: 2rem;
	--bdx-space-7: 3rem;
	--bdx-space-8: 4rem;
	--bdx-space-9: 6rem;
	--bdx-space-10: 2.5rem;
	--bdx-space-11: 5rem;

	/* Shape */
	--bdx-radius-sm: 6px;
	--bdx-radius-md: 10px;
	--bdx-radius-lg: 16px;
	--bdx-radius-full: 999px;

	/* Elevation */
	--bdx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--bdx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

	/* Layout */
	--bdx-container-max: 1200px;
	--bdx-container-padding: var(--bdx-space-4);

	/* Component sizing — shared so variants of the same component (e.g.
	   primary/secondary buttons at different font sizes) stay
	   proportionally aligned rather than each sizing itself off padding
	   + font-size alone. */
	--bdx-btn-height-sm: 2.25rem;
	--bdx-btn-height: 3rem;
	--bdx-btn-height-lg: 3.5rem;

	/* Motion */
	--bdx-transition-fast: 150ms ease;
	--bdx-transition-base: 220ms ease;
}

@media (min-width: 600px) {
	:root {
		--bdx-container-padding: var(--bdx-space-6);
	}
}

@media (min-width: 1024px) {
	:root {
		--bdx-container-padding: var(--bdx-space-7);
	}
}

/* ==========================================================================
   2. Base reset / typography
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--bdx-color-bg);
	color: var(--bdx-color-ink);
	font-family: var(--bdx-font-sans);
	font-size: var(--bdx-font-body);
	line-height: var(--bdx-line-height-base);
	font-weight: var(--bdx-font-weight-normal);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--bdx-space-4);
	font-weight: var(--bdx-font-weight-semibold);
	line-height: var(--bdx-line-height-tight);
	letter-spacing: -0.01em;
}

h1 {
	font-size: var(--bdx-font-h1);
}

h2 {
	font-size: var(--bdx-font-h2);
}

/* Homepage section headings only (Categories, Featured Products,
   Why-BDX, Testimonials, Newsletter, Final CTA all share this bare h2)
   — --bdx-font-h2 computes to ~24-25px at phone widths, meaningfully
   larger than a density-focused reference needs and repeated on every
   section, so it's the single biggest lever for the page reading as
   oversized overall. Scoped to .bdx-content (front-page.php/index.php
   only) rather than the bare h2 element, so this never touches the
   product page's Description/Specifications headings or the shop
   merchandising section headings (Related Gadgets, Frequently Bought
   Together, Complete Your Setup), which also use a plain <h2> but
   live outside .bdx-content. Footer headings are unaffected regardless
   — .bdx-footer__heading already sets its own font-size, which wins on
   specificity. Fixed (not fluid) since this is a phone-only override;
   tablet/desktop keep the existing --bdx-font-h2 clamp() token
   untouched. */
@media (max-width: 599px) {
	.bdx-content h2 {
		font-size: 22px;
	}
}

h3 {
	font-size: var(--bdx-font-h3);
}

p {
	margin: 0 0 var(--bdx-space-4);
	color: var(--bdx-color-ink);
}

.bdx-text-muted {
	color: var(--bdx-color-ink-muted);
}

/* Default link color is the dark/gray-700 ink, not the raw brand blue —
   #0A84FF only reaches 3.65:1 as small text on white (below the 4.5:1
   AA minimum), so resting link text stays compliant and blue is used as
   the interactive hover/focus accent instead ("buttons, links,
   highlights" — the highlight/interaction role, not static body text). */
a {
	color: var(--bdx-color-ink-secondary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--bdx-color-accent);
}

/* ==========================================================================
   3. Layout / containers
   ========================================================================== */

.bdx-container {
	width: 100%;
	max-width: var(--bdx-container-max);
	margin-inline: auto;
	padding-inline: var(--bdx-container-padding);
}

/* Mobile-first section rhythm: tighter on small screens, opening up at
   tablet/desktop rather than using one fixed value everywhere — mobile
   shouldn't just be a scaled-down desktop layout. */
.bdx-section {
	padding-block: var(--bdx-space-7);
}

@media (min-width: 600px) {
	.bdx-section {
		padding-block: var(--bdx-space-8);
	}
}

@media (min-width: 1024px) {
	.bdx-section {
		padding-block: var(--bdx-space-9);
	}
}

.bdx-section--tight {
	padding-block: var(--bdx-space-5);
}

@media (min-width: 600px) {
	.bdx-section--tight {
		padding-block: var(--bdx-space-6);
	}
}

/* border-top gives every alt-background section a deliberate seam
   rather than an abrupt flat-color change — .bdx-final-cta relied on
   its own copy of this rule before; now inherited once, here. */
.bdx-section--alt {
	background-color: var(--bdx-color-bg-alt);
	border-top: 1px solid var(--bdx-color-border);
}

/* Gray-500 (--bdx-color-ink-muted) only reaches 4.44:1 on the
   --bdx-color-bg-alt (#F5F5F7) background — just under the 4.5:1 AA
   minimum. Bump muted text specifically inside alt-background sections
   to gray-700, which clears 11.6:1 there; regular (non-muted) text is
   unaffected since it already uses the much higher-contrast ink color. */
.bdx-section--alt .bdx-text-muted {
	color: var(--bdx-color-ink-secondary);
}

.bdx-section__head {
	max-width: 640px;
	margin-bottom: var(--bdx-space-6);
}

.bdx-section__head--center {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.bdx-section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bdx-space-4);
	max-width: none;
}

/* Fixed 15px rather than the shared --bdx-font-label token (which
   tops out at 13px even at its widest fluid value): a mobile-only
   override used to bump this to 15px below 600px, which meant the
   eyebrow actually got smaller from 600px up — a wider screen
   producing smaller text. Fixed at every width instead of just
   mobile, so size never drops as the viewport grows. The token itself
   is untouched (still used elsewhere) — this only changes .bdx-eyebrow. */
.bdx-eyebrow {
	display: block;
	color: var(--bdx-color-accent);
	font-size: 15px;
	font-weight: var(--bdx-font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--bdx-space-2);
}

.bdx-eyebrow--on-dark {
	color: rgba(255, 255, 255, 0.7);
}

.bdx-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--bdx-space-1);
	color: var(--bdx-color-accent);
	font-weight: var(--bdx-font-weight-semibold);
	font-size: var(--bdx-font-size-sm);
	text-decoration: none;
	white-space: nowrap;
}

.bdx-link-arrow svg {
	width: 16px;
	height: 16px;
	transition: transform var(--bdx-transition-fast);
}

.bdx-link-arrow:hover svg {
	transform: translateX(2px);
}

.bdx-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Buttons / links
   ========================================================================== */

/* min-height (not just padding) keeps every button variant the same
   height regardless of its own font-size — e.g. the bold 22px primary
   CTA and the 16px secondary CTA that sit side by side in the hero
   would otherwise be visibly mismatched heights. */
.bdx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bdx-space-2);
	min-height: var(--bdx-btn-height);
	padding-inline: var(--bdx-space-5);
	border-radius: var(--bdx-radius-full);
	font-size: var(--bdx-font-button);
	font-weight: var(--bdx-font-weight-semibold);
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--bdx-transition-fast),
		color var(--bdx-transition-fast),
		border-color var(--bdx-transition-fast),
		box-shadow var(--bdx-transition-fast),
		transform var(--bdx-transition-fast);
}

.bdx-btn:hover {
	transform: translateY(-1px);
}

.bdx-btn:active {
	transform: translateY(0);
}

/* Primary CTA: the exact brand blue, filled, with bold white text sized
   to qualify for WCAG's "large text" 3:1 allowance (>=18.66px bold) —
   see .bdx-btn font-weight/size below — rather than the stricter 4.5:1
   normal-text minimum the raw 3.65:1 ratio would otherwise miss. */
.bdx-btn--primary {
	background-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent-ink);
	font-weight: var(--bdx-font-weight-bold);
	/* 22px bold clears WCAG's 18.66px("14pt")-bold "large text" 3:1
	   threshold with margin; 18px would fall just short of it. */
	font-size: var(--bdx-font-size-lg);
}

.bdx-btn--primary:hover {
	background-color: var(--bdx-color-accent-hover);
	color: var(--bdx-color-accent-ink);
	box-shadow: 0 4px 14px rgba(10, 132, 255, 0.28);
}

.bdx-btn--secondary {
	background-color: transparent;
	color: var(--bdx-color-ink);
	border-color: var(--bdx-color-border-strong);
}

.bdx-btn--secondary:hover {
	border-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent);
}

/* Dark/premium variant — for use on light surfaces where a button
   needs more visual weight than the outlined secondary style without
   competing with the primary blue CTA on the same screen (e.g. a
   product page's "Buy Now" next to an "Add to Cart"). Not used on the
   homepage today; established here as part of the button system. */
.bdx-btn--dark {
	background-color: var(--bdx-color-ink);
	color: #fff;
	border-color: var(--bdx-color-ink);
}

.bdx-btn--dark:hover {
	background-color: var(--bdx-color-ink-secondary);
	border-color: var(--bdx-color-ink-secondary);
	color: #fff;
}

.bdx-btn--ghost {
	background-color: transparent;
	color: var(--bdx-color-ink-secondary);
	padding-inline: 0;
	border-radius: 0;
}

.bdx-btn--ghost:hover {
	color: var(--bdx-color-ink);
}

.bdx-btn--block {
	width: 100%;
}

.bdx-btn--sm {
	min-height: var(--bdx-btn-height-sm);
	padding-inline: var(--bdx-space-4);
	font-size: var(--bdx-font-size-xs);
}

.bdx-btn--lg {
	min-height: var(--bdx-btn-height-lg);
	padding-inline: var(--bdx-space-6);
}

/* ==========================================================================
   5. Forms
   ========================================================================== */

.bdx-field {
	display: block;
	margin-bottom: var(--bdx-space-4);
}

.bdx-field__label {
	display: block;
	margin-bottom: var(--bdx-space-2);
	font-size: var(--bdx-font-label);
	font-weight: var(--bdx-font-weight-medium);
	color: var(--bdx-color-ink);
}

.bdx-input,
.bdx-select,
.bdx-textarea {
	width: 100%;
	padding: var(--bdx-space-3) var(--bdx-space-4);
	font-family: inherit;
	font-size: var(--bdx-font-size-base);
	color: var(--bdx-color-ink);
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border-strong);
	border-radius: var(--bdx-radius-md);
	transition: border-color var(--bdx-transition-fast);
}

.bdx-input:hover,
.bdx-select:hover,
.bdx-textarea:hover {
	border-color: var(--bdx-color-ink);
}

/* ==========================================================================
   6. Cards
   ========================================================================== */

.bdx-card {
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border);
	border-radius: var(--bdx-radius-lg);
	padding: var(--bdx-space-5);
	box-shadow: var(--bdx-shadow-sm);
	transition:
		box-shadow var(--bdx-transition-base),
		transform var(--bdx-transition-base),
		border-color var(--bdx-transition-base);
}

.bdx-grid {
	display: grid;
	gap: var(--bdx-space-5);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.bdx-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bdx-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.bdx-grid--6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.bdx-grid--4,
	.bdx-grid--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Testimonial quotes need more width than a category/product card to
	   stay readable, so this stays 1-column through phone widths (unlike
	   --cards above) — but a 768px-wide tablet canvas is plenty for two
	   side by side rather than sitting at 1-column all the way to 1024px. */
	.bdx-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --cards: for compact-content grids (category/product cards — a small
   image/icon, a short title, one line of metadata) where a single
   mobile column wastes most of the viewport width. Content-heavier
   grids (paragraph-length copy, testimonials) keep the plain .bdx-grid
   1-column mobile default instead — see docs/BDX-DESIGN-SYSTEM.md §2
   for which sections use which. Below 360px, a 2-up card gets tight
   enough (roughly 130px per card after gap/padding) that 1 column
   reads better; --grid-gap-sm keeps that narrowest tier's gap tighter
   too, so the two columns that remain aren't crowded further by
   full-size spacing. */
.bdx-grid--cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bdx-space-3) var(--bdx-space-4);
}

@media (max-width: 359px) {
	.bdx-grid--cards {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (min-width: 600px) {
	.bdx-grid--cards {
		gap: var(--bdx-space-5);
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.bdx-grid--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bdx-grid--cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Category card */

.bdx-category-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bdx-space-3);
	text-decoration: none;
	color: inherit;
}

/* .bdx-card's base padding (--bdx-space-5, 24px on every side) is tuned
   for a full-width card, not a 2-up ~160px-wide mobile category card —
   at that width it eats a disproportionate share of the card for
   padding alone. Scoped to this card type only, not .bdx-card itself,
   which product/testimonial cards also use at their own (wider) sizes. */
@media (max-width: 599px) {
	.bdx-category-card {
		padding: var(--bdx-space-4);
		gap: var(--bdx-space-2);
	}
}

.bdx-category-card:hover {
	box-shadow: var(--bdx-shadow-md);
	transform: translateY(-2px);
	border-color: var(--bdx-color-accent);
}

/* Title stays the fully-compliant ink color even on hover (18.88:1) —
   the lift, shadow, and border/icon-tint shift below are the hover
   affordance, rather than recoloring base-size text into the brand
   blue, which would drop below the 4.5:1 text minimum. */
.bdx-category-card:hover .bdx-category-card__icon {
	background-color: rgba(10, 132, 255, 0.12);
}

.bdx-category-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bdx-radius-md);
	background-color: var(--bdx-color-bg-alt);
	color: var(--bdx-color-accent);
	transition: background-color var(--bdx-transition-fast);
}

@media (max-width: 599px) {
	.bdx-category-card__icon {
		width: 36px;
		height: 36px;
	}
}

.bdx-category-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--bdx-radius-md);
	overflow: hidden;
	background-color: var(--bdx-color-bg-alt);
	box-shadow: inset 0 0 0 1px var(--bdx-color-border);
}

.bdx-category-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bdx-transition-base);
}

.bdx-category-card:hover .bdx-category-card__image img {
	transform: scale(1.05);
}

/* Fixed sizes rather than the shared --bdx-font-product-title/
   --bdx-font-metadata tokens (left untouched — still used as-is on
   product cards): those tokens compute smaller at tablet widths than
   the mobile-only override this used to have, so title/count actually
   shrank from 600px up — a wider screen producing smaller text. Fixed
   at every width instead, so category cards never get quieter as the
   viewport grows. */
.bdx-category-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: var(--bdx-font-weight-bold);
	color: var(--bdx-color-ink);
	transition: color var(--bdx-transition-fast);
}

.bdx-category-card__count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--bdx-color-ink-muted);
}

/* Product card */

.bdx-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.bdx-product-card:hover {
	box-shadow: var(--bdx-shadow-md);
	transform: translateY(-2px);
}

/* Badge reflects only real product state (on sale / featured flag) —
   see bdx_get_product_badge(), never an invented label. */
.bdx-product-card__badge {
	position: absolute;
	top: var(--bdx-space-3);
	left: var(--bdx-space-3);
	z-index: 2;
	padding: var(--bdx-space-1) var(--bdx-space-3);
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent-ink);
	font-size: var(--bdx-font-size-xs);
	font-weight: var(--bdx-font-weight-semibold);
}

/* 40px, not the visually-tighter 32px this was originally — a small
   icon overlaid on a product photo is exactly the kind of control
   that's easy to mis-tap if sized purely for appearance; this stays
   close to the 44px best-practice touch target without visually
   dominating a compact card thumbnail. */
.bdx-product-card__wishlist {
	position: absolute;
	top: var(--bdx-space-3);
	right: var(--bdx-space-3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-surface);
	box-shadow: var(--bdx-shadow-sm);
	color: var(--bdx-color-ink-muted);
	cursor: pointer;
	transition: color var(--bdx-transition-fast);
}

.bdx-product-card__wishlist svg {
	width: 16px;
	height: 16px;
}

.bdx-product-card__wishlist:hover {
	color: var(--bdx-color-accent);
}

/* Filled heart via currentColor + fill once saved — no separate
   filled/outline icon asset needed. */
.bdx-product-card__wishlist.is-active {
	color: var(--bdx-color-error);
}

.bdx-product-card__wishlist.is-active svg path {
	fill: currentColor;
}

.bdx-product-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.bdx-product-card__image-wrap {
	background-color: var(--bdx-color-bg-alt);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bdx-product-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bdx-transition-base);
}

.bdx-product-card:hover .bdx-product-card__image-wrap img {
	transform: scale(1.05);
}

/* Homepage Featured Products only, on phones. Measured root cause of the
   335-348px mobile card height: the 1:1 image container alone is 154-189px
   (44-50% of total card height) — by far the largest single contributor,
   roughly double the next largest (the 56px cart area). 4:3 keeps the
   product photo clearly framed (object-fit: cover already handles the
   crop) while cutting ~37-46px per card, a meaningfully denser grid
   without touching typography or spacing. Scoped to .bdx-content (see the
   h2 override above) rather than the bare .bdx-product-card__image-wrap
   class, since that class is also shared by the Shop grid, Related
   Gadgets, Frequently Bought Together and Complete Your Setup — none of
   which are in scope here and none of which render inside .bdx-content.
   Tablet/desktop keep the base 1:1 ratio untouched. */
@media (max-width: 599px) {
	.bdx-content .bdx-product-card__image-wrap {
		aspect-ratio: 4 / 3;
	}
}

.bdx-product-card__body {
	padding: var(--bdx-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--bdx-space-2);
	flex: 1;
}

.bdx-product-card__title {
	margin: 0;
	font-size: var(--bdx-font-product-title);
	font-weight: var(--bdx-font-weight-medium);
	color: var(--bdx-color-ink);
}

.bdx-product-card__rating {
	display: block;
}

.bdx-product-card__price {
	margin: 0;
	font-size: var(--bdx-font-price);
	font-weight: var(--bdx-font-weight-semibold);
	color: var(--bdx-color-ink);
}

.bdx-product-card__price del {
	color: var(--bdx-color-ink-muted);
	font-weight: var(--bdx-font-weight-normal);
	margin-right: var(--bdx-space-2);
}

.bdx-product-card__price ins {
	text-decoration: none;
}

.bdx-product-card__cart {
	padding: 0 var(--bdx-space-4) var(--bdx-space-4);
}

/* Reuses WooCommerce's own loop add-to-cart output/AJAX behavior — the
   button itself keeps WooCommerce's class names for that JS to attach
   to, this just aligns it with the BDx button system visually. */
.bdx-product-card__cart .add_to_cart_button,
.bdx-product-card__cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.5rem;
	padding-inline: var(--bdx-space-4);
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-bg-alt);
	color: var(--bdx-color-ink);
	border: 1px solid var(--bdx-color-border-strong);
	font-weight: var(--bdx-font-weight-semibold);
	font-size: var(--bdx-font-size-sm);
	text-decoration: none;
	transition: background-color var(--bdx-transition-fast), color var(--bdx-transition-fast), border-color var(--bdx-transition-fast);
}

.bdx-product-card__cart .add_to_cart_button:hover,
.bdx-product-card__cart .button:hover {
	background-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent-ink);
	border-color: var(--bdx-color-accent);
}

/* ==========================================================================
   7. Badges
   ========================================================================== */

.bdx-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bdx-space-1);
	padding: var(--bdx-space-1) var(--bdx-space-3);
	border-radius: var(--bdx-radius-full);
	font-size: var(--bdx-font-size-xs);
	font-weight: var(--bdx-font-weight-semibold);
	line-height: 1.4;
	background-color: var(--bdx-color-bg-alt);
	color: var(--bdx-color-ink);
	border: 1px solid var(--bdx-color-border);
}

/* Badge text uses ink-secondary rather than the raw brand blue/green —
   at badge (xs) text size neither #0A84FF (3.65:1) nor #34C759 (~2.2:1)
   reach the 4.5:1 AA text minimum; the brand color instead tints the
   background and (for success) a small decorative dot — see .bdx-badge__dot. */
.bdx-badge--accent {
	background-color: rgba(10, 132, 255, 0.1);
	color: var(--bdx-color-ink-secondary);
	border-color: transparent;
}

.bdx-badge--success {
	background-color: var(--bdx-color-success-bg);
	color: var(--bdx-color-ink-secondary);
	border-color: transparent;
}

.bdx-badge__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--bdx-color-success);
	flex-shrink: 0;
}

/* ==========================================================================
   8. Notices (also styles WooCommerce's own notice markup)
   ========================================================================== */

/* Notice text uses ink-secondary against each variant's tinted
   background, not the raw status color: Primary Blue (3.65:1) and
   Success (~2.2:1) both fail 4.5:1 as text at this size — ink-secondary
   (12.63:1+ on every tint below) stays legible while the tint itself
   still communicates info/success/error. Error's own dark red already
   passes on its own (6.54:1) and is kept as-is. */
.bdx-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: block;
	padding: var(--bdx-space-4) var(--bdx-space-5);
	border-radius: var(--bdx-radius-md);
	background-color: var(--bdx-color-info-bg);
	color: var(--bdx-color-ink-secondary);
	border: 1px solid transparent;
	list-style: none;
	margin: 0 0 var(--bdx-space-4);
}

.bdx-notice--success,
.woocommerce-message {
	background-color: var(--bdx-color-success-bg);
	color: var(--bdx-color-ink-secondary);
}

.bdx-notice--error,
.woocommerce-error {
	background-color: var(--bdx-color-error-bg);
	color: var(--bdx-color-error);
}

/* ==========================================================================
   9. Header / navigation
   ========================================================================== */

/* Homepage-only promotional strip above the header — see the note in
   header.php on why this isn't shown site-wide. Not sticky (scrolls
   away with the page), kept deliberately quiet (small text, no icons
   beyond the optional social row) so it reads as a thin utility strip,
   not a second header. */
.bdx-topbar {
	background-color: var(--bdx-color-ink);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--bdx-font-size-xs);
}

.bdx-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bdx-space-4);
	padding-block: var(--bdx-space-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.bdx-topbar__list {
	list-style: none;
	display: flex;
	gap: var(--bdx-space-5);
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

/* Each item snaps into place while swiping on mobile, where the full
   list is wider than the viewport — a deliberate swipeable strip
   rather than an item just happening to get cut off mid-word. */
.bdx-topbar__list li {
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.bdx-topbar__inner {
		scroll-behavior: auto;
	}
}

.bdx-topbar__social {
	list-style: none;
	display: flex;
	gap: var(--bdx-space-3);
	margin: 0;
	padding: 0;
	flex-shrink: 0;
}

.bdx-topbar__social a {
	color: inherit;
	text-decoration: none;
}

.bdx-topbar__social a:hover {
	color: var(--bdx-color-accent);
}

.bdx-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--bdx-color-border);
}

.bdx-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bdx-space-3) var(--bdx-space-4);
	padding-block: var(--bdx-space-3);
}

/* Slightly tighter vertical padding on phones — the header is sticky
   and stacks a second row for search, so a little less breathing room
   here goes a long way toward not eating the viewport before any real
   content appears. Tablet/desktop keep the original --bdx-space-3. */
@media (max-width: 599px) {
	.bdx-header__inner {
		padding-block: var(--bdx-space-2);
		gap: var(--bdx-space-2) var(--bdx-space-3);
	}
}

/* Search wraps to its own full-width row on mobile (order + flex-basis)
   rather than being tucked inside the hamburger menu — it stays always
   visible and needs no coupling with the nav-toggle mechanism, so it
   can't risk the mobile nav-collapse behavior fixed in an earlier
   phase. It moves back inline at the 1024px nav breakpoint. */
.bdx-header__search {
	order: 10;
	flex-basis: 100%;
	display: flex;
	align-items: center;
	position: relative;
}

.bdx-header__search-input {
	width: 100%;
	padding: var(--bdx-space-2) var(--bdx-space-8) var(--bdx-space-2) var(--bdx-space-4);
	font-family: inherit;
	font-size: var(--bdx-font-size-sm);
	color: var(--bdx-color-ink);
	background-color: var(--bdx-color-bg-alt);
	border: 1px solid var(--bdx-color-border);
	border-radius: var(--bdx-radius-full);
	transition: border-color var(--bdx-transition-fast);
}

.bdx-header__search-input:hover,
.bdx-header__search-input:focus {
	border-color: var(--bdx-color-ink);
	outline: none;
}

.bdx-header__search-submit {
	position: absolute;
	right: var(--bdx-space-2);
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--bdx-radius-full);
	color: var(--bdx-color-ink-muted);
	cursor: pointer;
}

.bdx-header__search-submit:hover {
	color: var(--bdx-color-accent);
}

.bdx-header__search-submit svg {
	width: 16px;
	height: 16px;
}

.bdx-header__logo {
	display: inline-block;
	text-decoration: none;
	flex-shrink: 0;
	transition: opacity var(--bdx-transition-fast);
}

/* Two-line lockup: bold "BDX" (final letter in the one official accent
   blue) with the small-caps store name beneath — a fixed brand
   treatment, not a hover-state color (a logo that flashes fully blue
   on :hover reads as a plain text link rather than a mark); hover
   instead uses a light opacity dip, applied to the whole lockup. */
.bdx-logo {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.bdx-logo__mark {
	font-size: var(--bdx-font-size-xl);
	font-weight: var(--bdx-font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--bdx-color-ink);
}

/* A 28px wordmark is sized for a full desktop header; on a sticky
   mobile header it's the single biggest contributor to header height
   after the tap-target actions. Still clearly legible/branded at 22px. */
@media (max-width: 599px) {
	.bdx-logo__mark {
		font-size: 1.375rem;
	}
}

.bdx-logo__accent {
	color: var(--bdx-color-accent);
}

.bdx-logo__store {
	font-size: 0.625rem;
	font-weight: var(--bdx-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdx-color-ink-muted);
}

.bdx-header__logo:hover {
	opacity: 0.75;
}

.bdx-nav__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--bdx-color-border-strong);
	border-radius: var(--bdx-radius-md);
	cursor: pointer;
	transition: border-color var(--bdx-transition-fast), background-color var(--bdx-transition-fast);
}

.bdx-nav__toggle:hover {
	background-color: var(--bdx-color-bg-alt);
	border-color: var(--bdx-color-accent);
}

.bdx-nav__toggle[aria-expanded="true"] {
	border-color: var(--bdx-color-accent);
}

.bdx-nav__toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	background-color: var(--bdx-color-ink);
	transition: transform var(--bdx-transition-fast), opacity var(--bdx-transition-fast);
}

.bdx-nav__toggle[aria-expanded="true"] .bdx-nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.bdx-nav__toggle[aria-expanded="true"] .bdx-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.bdx-nav__toggle[aria-expanded="true"] .bdx-nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.bdx-nav--primary {
	display: flex;
	align-items: center;
}

.bdx-nav__list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bdx-space-1);

	position: absolute;
	inset-inline: 0;
	top: 100%;
	background-color: var(--bdx-color-bg);
	padding-inline: var(--bdx-container-padding);
	padding-block: 0;
	border-bottom: 0 solid var(--bdx-color-border);
	max-height: 0;
	overflow: hidden;
	box-shadow: none;
	transition:
		max-height var(--bdx-transition-base),
		padding-block var(--bdx-transition-base),
		box-shadow var(--bdx-transition-base);
}

/* Closed state relies on max-height: 0 + overflow: hidden alone to clip
   the list — but padding-block and border-bottom are zeroed here too
   (rather than left in place and only relying on the clip) because at
   least one tested browser renders the closed flex list's box at
   padding-block + border-bottom tall regardless of max-height: 0, which
   left a visible sliver of the first nav item under the header. Zeroing
   both when closed removes the box entirely instead of depending on
   clipping to hide it. */
.bdx-nav__list.is-open {
	max-height: 480px;
	padding-block: var(--bdx-space-3) var(--bdx-space-5);
	border-bottom: 1px solid var(--bdx-color-border);
	box-shadow: var(--bdx-shadow-md);
}

.bdx-nav__list a {
	display: block;
	padding: var(--bdx-space-3) 0;
	color: var(--bdx-color-ink);
	text-decoration: none;
	font-size: var(--bdx-font-nav);
	font-weight: var(--bdx-font-weight-medium);
	border-bottom: 1px solid var(--bdx-color-border);
}

.bdx-nav__list a:hover {
	color: var(--bdx-color-accent);
}

/* Account/Wishlist links relocated here only at the same <375px tier
   where the header hides those two action icons (see
   .bdx-header__action above) — invisible everywhere else, since the
   header icons already cover that functionality at every wider width.
   Keeps mobile functionally complete without duplicating the controls. */
.bdx-nav__item--mobile-only {
	display: none;
}

@media (max-width: 374px) {
	.bdx-nav__item--mobile-only {
		display: block;
	}
}

/* .current-menu-item is applied by wp_nav_menu() itself (and mirrored
   manually in bdx_primary_nav_fallback() below) — a subtle color +
   underline, not a background fill, so the active state reads as
   restrained wayfinding rather than a competing button. */
.bdx-nav__list .current-menu-item > a,
.bdx-nav__list .current_page_item > a {
	color: var(--bdx-color-accent);
}

.bdx-header__actions {
	display: flex;
	align-items: center;
	gap: var(--bdx-space-3);
	flex-shrink: 0;
}

/* Resting background tint (not hover-only) so each action reads as a
   tappable control at a glance. Shared by account/wishlist/cart so all
   three feel like one consistent control group. */
.bdx-header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-bg-alt);
	color: var(--bdx-color-ink);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color var(--bdx-transition-fast), transform var(--bdx-transition-fast);
}

/* Below ~360px the full logo + toggle + account + wishlist + cart set
   wraps the header onto a second row (measured: wraps at 340px, fits
   at 360px) — an unintentional-looking squeeze, not a designed
   composition. Account and Wishlist (the two less time-critical
   actions — Cart is the one a shopper needs visible at a glance) move
   into the mobile nav dropdown instead of disappearing entirely; see
   .bdx-nav__item--mobile-only below, shown at exactly this breakpoint
   so the functionality relocates rather than vanishes. */
@media (max-width: 374px) {
	.bdx-header__action:not(.bdx-header__action--cart) {
		display: none;
	}
}

.bdx-header__action:hover {
	background-color: rgba(10, 132, 255, 0.1);
	color: var(--bdx-color-accent);
	transform: translateY(-1px);
}

.bdx-header__action[aria-pressed="true"],
.bdx-header__action.is-active {
	color: var(--bdx-color-accent);
}

.bdx-header__action-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: var(--bdx-radius-full);
	/* Ink, not the brand blue: at 0.65rem (~10px) this count badge is far
	   too small for blue-on-white (3.65:1) to stay legible; ink-on-white
	   (18.88:1) keeps a tiny numeral readable. */
	background-color: var(--bdx-color-ink);
	color: var(--bdx-color-bg);
	font-size: 0.65rem;
	font-weight: var(--bdx-font-weight-bold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* [hidden] otherwise ties on specificity with the class rule above and
   loses (author stylesheet order beats the UA stylesheet) — this
   explicit override keeps the wishlist count badge actually hidden at
   zero, toggled by main.js. */
.bdx-header__action-count[hidden] {
	display: none;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

/* Light footer, not a dark one — the official palette has no dark
   surface token, and the brief is explicit that BDx should not become
   "an overly dark ecommerce website." */
.bdx-footer {
	background-color: var(--bdx-color-bg-alt);
	color: var(--bdx-color-ink-secondary);
	border-top: 1px solid var(--bdx-color-border);
	padding-block: var(--bdx-space-8) var(--bdx-space-6);
}

/* Grouped 2-column grid from the base mobile width, not a 1-column
   stack — tested empirically (not assumed): the previous mobile default
   stacked all 5 groups (brand + 4 link lists, each 3-4 links) into one
   very long single-file column, roughly double the scroll length of
   this grouped version, with no readability benefit. The brand group
   spans the full row on its own (it carries a paragraph of copy + social
   icons — visually heavier than the four short link-list groups, so
   pairing it with just one of them in a naive 2-column split would
   leave a mismatched-height row); the four link lists sit below it as a
   clean 2x2 grid. Confirmed readable down to 320px — the odd longer
   label ("Delivery Information") wraps to two lines, nothing breaks. */
.bdx-footer__grid {
	display: grid;
	gap: var(--bdx-space-6) var(--bdx-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-bottom: var(--bdx-space-7);
	border-bottom: 1px solid var(--bdx-color-border);
}

.bdx-footer__grid > :first-child {
	grid-column: 1 / -1;
}

@media (min-width: 600px) {
	.bdx-footer__grid {
		gap: var(--bdx-space-7);
	}
}

/* Tablet gets its own composition rather than inheriting mobile's 2x2
   all the way to 1024px: brand still spans its own full-width row
   (unchanged — it's visually heavier than the four link lists, same
   reasoning as the mobile 2x2 above), but the four link groups get a
   genuine single row of their own instead of stacking as two rows of
   two, since 600-1023px has the width to spare. Desktop's 5-column
   single row (brand + 4 groups together) below is unchanged. */
@media (min-width: 600px) and (max-width: 1023px) {
	.bdx-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bdx-footer__grid {
		grid-template-columns: 1.4fr repeat(4, 1fr);
	}

	.bdx-footer__grid > :first-child {
		grid-column: auto;
	}
}

.bdx-footer__brand {
	display: inline-block;
	text-decoration: none;
	margin-bottom: var(--bdx-space-3);
	transition: opacity var(--bdx-transition-fast);
}

.bdx-footer__brand .bdx-logo__mark {
	font-size: var(--bdx-font-size-lg);
}

.bdx-footer__brand:hover {
	opacity: 0.75;
}

.bdx-footer__tagline {
	max-width: 32ch;
	color: var(--bdx-color-ink-secondary);
	margin-bottom: var(--bdx-space-4);
}

.bdx-footer__social {
	list-style: none;
	display: flex;
	gap: var(--bdx-space-3);
	margin: 0;
	padding: 0;
}

.bdx-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-bg);
	border: 1px solid var(--bdx-color-border);
	color: var(--bdx-color-ink-secondary);
	font-size: var(--bdx-font-size-xs);
	font-weight: var(--bdx-font-weight-semibold);
	text-decoration: none;
}

.bdx-footer__social a:hover {
	color: var(--bdx-color-accent);
	border-color: var(--bdx-color-accent);
}

.bdx-footer__heading {
	color: var(--bdx-color-ink);
	font-size: var(--bdx-font-label);
	font-weight: var(--bdx-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--bdx-space-4);
}

.bdx-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bdx-space-3);
}

.bdx-footer__list a {
	color: var(--bdx-color-ink-secondary);
	text-decoration: none;
}

.bdx-footer__list a:hover {
	color: var(--bdx-color-accent);
}

.bdx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bdx-space-3);
	padding-top: var(--bdx-space-5);
	font-size: var(--bdx-font-size-sm);
}

.bdx-footer__legal {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bdx-space-4);
	margin: 0;
	padding: 0;
}

.bdx-footer__legal a {
	color: var(--bdx-color-ink-secondary);
	text-decoration: none;
}

.bdx-footer__legal a:hover {
	color: var(--bdx-color-accent);
}

/* ==========================================================================
   11. Homepage sections
   ========================================================================== */

/* Hero — light canvas (white → light gray), not a dark banner. Two
   states: the original centered, no-product static hero (the CSS
   radial "glow" stands in for product photography, honest about not
   depicting a real device) used whenever no "Hero" category products
   are configured; and .bdx-hero--carousel, a left-aligned two-column
   layout with a real WooCommerce product carousel on the right, used
   whenever they are. See hero.php for the fallback logic. */

/* Mobile-first hero padding — a deliberately smaller, tighter composition
   on small screens, opening up at desktop rather than scaling one fixed
   value down. */
.bdx-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--bdx-color-bg) 0%, var(--bdx-color-bg-alt) 100%);
	color: var(--bdx-color-ink);
	padding-block: var(--bdx-space-6);
	text-align: center;
}

.bdx-hero--carousel {
	text-align: left;
}

/* Restrained radial glow, sized down on mobile (see the 1024px override
   below) so it reads as a deliberate accent rather than an oversized
   shape fighting the smaller viewport. Two soft stops (not one flat
   fade) give it a touch more depth without adding a second element.
   Only shown on the static (no-carousel) hero — a real product photo
   on the right doesn't need a stand-in visual anchor competing with it. */
.bdx-hero:not(.bdx-hero--carousel)::before {
	content: "";
	position: absolute;
	top: -22%;
	left: 50%;
	width: 34rem;
	height: 34rem;
	transform: translateX(-50%);
	background: radial-gradient(
		closest-side,
		rgba(10, 132, 255, 0.16) 0%,
		rgba(10, 132, 255, 0.07) 55%,
		rgba(10, 132, 255, 0) 75%
	);
	pointer-events: none;
	z-index: 0;
}

@media (min-width: 1024px) {
	.bdx-hero:not(.bdx-hero--carousel)::before {
		top: -18%;
		width: 60rem;
		height: 60rem;
	}
}

.bdx-hero > .bdx-container {
	position: relative;
	z-index: 1;
}

.bdx-hero__grid {
	display: grid;
	gap: var(--bdx-space-6);
	align-items: center;
}

/* Carousel hero goes 2-column from 600px (tablet) rather than waiting
   until 1024px (desktop) — below 600px, text above image/carousel
   stacked is still the right call (not enough width for two columns
   to read comfortably), but from 600px up there's plenty of room, and
   staying single-column through the whole 600-1023px tablet range was
   the main reason the hero ran to 1000px+ tall there (full-width
   image stacked under full-width text, each claiming their own row).
   Reuses the existing 600px tier rather than adding a new one. */
@media (min-width: 600px) {
	.bdx-hero--carousel .bdx-hero__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.bdx-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--bdx-space-2);
	color: var(--bdx-color-ink-secondary);
	font-size: var(--bdx-font-size-sm);
	font-weight: var(--bdx-font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--bdx-space-5);
}

.bdx-hero--carousel .bdx-hero__eyebrow {
	color: var(--bdx-color-accent);
}

.bdx-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--bdx-color-accent);
}

.bdx-hero--carousel .bdx-hero__eyebrow::before {
	display: none;
}

.bdx-hero__title {
	color: var(--bdx-color-ink);
	font-size: var(--bdx-font-display);
	font-weight: var(--bdx-font-weight-bold);
	letter-spacing: -0.02em;
	line-height: var(--bdx-line-height-tight);
	max-width: 16ch;
	margin-inline: auto;
	margin-bottom: var(--bdx-space-5);
}

.bdx-hero--carousel .bdx-hero__title {
	margin-inline: 0;
}

/* Wider line-wrap once the carousel hero's own column has room for it
   (600px 2-column switch above) — line-wrap only, font-size still
   comes from the fluid --bdx-font-display token untouched. */
@media (min-width: 600px) {
	.bdx-hero--carousel .bdx-hero__title {
		max-width: 20ch;
	}
}

.bdx-hero__subtitle {
	color: var(--bdx-color-ink-muted);
	font-size: var(--bdx-font-body);
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--bdx-space-5);
}

.bdx-hero--carousel .bdx-hero__subtitle {
	margin-inline: 0;
}

.bdx-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--bdx-space-3);
}

.bdx-hero__actions .bdx-btn {
	width: 100%;
}

/* Product carousel (right side, .bdx-hero--carousel only) */

.bdx-hero-carousel {
	position: relative;
}

/* 4:3 rather than a full square at every width — on mobile in
   particular (single-column, full container width), a 1:1 image was
   as tall as it was wide, a major contributor to the hero running
   well past one screen height before any other content appeared. */
.bdx-hero-carousel__viewport {
	position: relative;
	aspect-ratio: 4 / 3;
}

.bdx-hero-carousel__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bdx-transition-base);
	pointer-events: none;
}

.bdx-hero-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.bdx-hero__image-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bdx-color-bg-alt);
	border-radius: var(--bdx-radius-lg);
	overflow: hidden;
}

.bdx-hero__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--bdx-space-6);
}

/* Compact, right-aligned floating card at every width (never stretched
   edge-to-edge) — an earlier full-width mobile version overlapped the
   carousel's prev/next arrows and clipped the product name; this stays
   clear of them at 375px and up. */
.bdx-hero__product-card {
	position: absolute;
	left: auto;
	right: var(--bdx-space-3);
	bottom: var(--bdx-space-3);
	max-width: 168px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bdx-space-1);
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border);
	border-radius: var(--bdx-radius-lg);
	box-shadow: var(--bdx-shadow-md);
	padding: var(--bdx-space-3);
	text-align: left;
	font-size: var(--bdx-font-size-sm);
}

@media (min-width: 600px) {
	.bdx-hero__product-card {
		right: var(--bdx-space-5);
		bottom: var(--bdx-space-5);
		max-width: 220px;
		padding: var(--bdx-space-4);
		font-size: var(--bdx-font-size-base);
	}
}

.bdx-hero__product-name {
	font-weight: var(--bdx-font-weight-bold);
	color: var(--bdx-color-ink);
	text-decoration: none;
}

.bdx-hero__product-name:hover {
	color: var(--bdx-color-accent);
}

.bdx-hero__product-price {
	font-size: var(--bdx-font-price);
	font-weight: var(--bdx-font-weight-bold);
	color: var(--bdx-color-ink);
}

.bdx-hero__product-card .bdx-btn {
	margin-top: var(--bdx-space-2);
	width: 100%;
}

.bdx-hero-carousel__control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border);
	color: var(--bdx-color-ink);
	cursor: pointer;
	z-index: 2;
}

.bdx-hero-carousel__control:hover {
	border-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent);
}

/* Inset inside the image on narrow viewports (no room to safely bleed
   into the container's padding gutter without risking edge overflow);
   only pushed outside the image bounds from 600px up, where there's
   enough surrounding whitespace for it. */
.bdx-hero-carousel__control--prev {
	left: var(--bdx-space-3);
}

.bdx-hero-carousel__control--next {
	right: var(--bdx-space-3);
}

@media (min-width: 600px) {
	.bdx-hero-carousel__control--prev {
		left: -12px;
	}

	.bdx-hero-carousel__control--next {
		right: -12px;
	}
}

.bdx-hero-carousel__control svg {
	width: 18px;
	height: 18px;
}

.bdx-hero-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--bdx-space-2);
	margin-top: var(--bdx-space-4);
}

.bdx-hero-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--bdx-color-border-strong);
	cursor: pointer;
}

.bdx-hero-carousel__dot.is-active {
	background-color: var(--bdx-color-accent);
	width: 20px;
	border-radius: var(--bdx-radius-full);
	transition: width var(--bdx-transition-fast);
}

/* Compact rating used in hero/product cards — real stars + real
   numeric average + real review count, or the whole element simply
   isn't rendered when a product has zero reviews (see
   bdx_get_product_rating_html()). */
.bdx-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--bdx-space-1);
	font-size: var(--bdx-font-metadata);
}

.bdx-rating__stars {
	color: #f5a623;
	letter-spacing: 1px;
}

.bdx-rating__value {
	font-weight: var(--bdx-font-weight-semibold);
	color: var(--bdx-color-ink);
}

.bdx-rating__count {
	color: var(--bdx-color-ink-muted);
}

/* Category / product / why-BDx / delivery / track-order / final-CTA sections
   reuse .bdx-section, .bdx-grid, .bdx-card and its variants above — no
   additional section-specific selectors needed beyond small tweaks below. */

.bdx-why__item {
	display: flex;
	flex-direction: column;
	gap: var(--bdx-space-2);
}

.bdx-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bdx-radius-md);
	background-color: rgba(10, 132, 255, 0.1);
	color: var(--bdx-color-accent);
	margin-bottom: var(--bdx-space-3);
}

/* Smaller icon + tighter icon-to-heading gap below 600px only — the
   scroll-snap cards are compact by design, and a 44px icon with a 24px
   gap under it reads as oversized inside a 168px-wide card. Desktop's
   card-less grid (600px+ override further down) is untouched. */
@media (max-width: 599px) {
	.bdx-why__icon {
		width: 36px;
		height: 36px;
		margin-bottom: var(--bdx-space-2);
	}
}

.bdx-why__item h3 {
	margin-bottom: var(--bdx-space-2);
}

/* Global h3 is already fluid (--bdx-font-h3), but at phone widths it
   lands under 19px — fine for a full-width heading, a little quiet as
   a card title inside a compact scroll-snap card. Fixed (not clamped)
   since the card width itself is fixed below 600px. */
@media (max-width: 599px) {
	.bdx-why__item h3 {
		font-size: 1.25rem;
	}
}

/* Below 600px, .bdx-grid--4 has no column tier of its own (it falls
   back to the plain .bdx-grid single-column default, deliberately, for
   content-heavier grids — see the note above .bdx-grid--cards). For
   four short icon+title+sentence items that reads as a long vertical
   wall of text rather than a scannable section, so phone widths get
   their own compact treatment instead: the same horizontal scroll-snap
   row already used for the merchandising rows (.bdx-merch-row), reused
   rather than a new pattern, with each item promoted to a small card
   (reusing the .bdx-card tokens) so adjacent items stay visually
   separated while scrolling. The existing .bdx-grid--4 tiers (3 columns
   600-1023px, 4 columns 1024px+) already give tablet/desktop a
   reasonable grid, so this only overrides below 600px — tablet/desktop
   stay exactly as before. */
.bdx-why__grid {
	display: flex;
	gap: var(--bdx-space-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	margin-inline: calc(var(--bdx-container-padding) * -1);
	padding-inline: var(--bdx-container-padding);
	padding-bottom: var(--bdx-space-2);
}

.bdx-why__grid .bdx-why__item {
	flex: 0 0 auto;
	width: 168px;
	scroll-snap-align: start;
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border);
	border-radius: var(--bdx-radius-lg);
	box-shadow: var(--bdx-shadow-sm);
	padding: var(--bdx-space-3);
}

@media (min-width: 600px) {
	.bdx-why__grid {
		display: grid;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.bdx-why__grid .bdx-why__item {
		width: auto;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bdx-why__grid {
		scroll-behavior: auto;
	}
}

.bdx-delivery {
	display: grid;
	gap: var(--bdx-space-6);
	align-items: center;
}

@media (min-width: 1024px) {
	.bdx-delivery {
		grid-template-columns: 1fr 1fr;
	}
}

.bdx-delivery__panel {
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border);
	border-radius: var(--bdx-radius-lg);
	padding: var(--bdx-space-6);
	box-shadow: var(--bdx-shadow-sm);
}

/* Small icon paired with a section heading (Delivery, Track Order) —
   the same icon-plus-text language as .bdx-why__icon, so those two
   sections don't read as bare text blocks next to the icon-led ones. */
.bdx-section-icon-heading {
	display: inline-flex;
	align-items: center;
	gap: var(--bdx-space-3);
	justify-content: center;
}

.bdx-section-icon-heading--left {
	justify-content: flex-start;
}

.bdx-section-icon-heading__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--bdx-radius-md);
	background-color: rgba(10, 132, 255, 0.1);
	color: var(--bdx-color-accent);
	flex-shrink: 0;
}

.bdx-delivery__note {
	font-size: var(--bdx-font-size-sm);
	color: var(--bdx-color-ink-muted);
	margin-top: var(--bdx-space-3);
	margin-bottom: 0;
}

.bdx-track-order {
	text-align: center;
}

.bdx-final-cta {
	text-align: center;
}

.bdx-final-cta p {
	max-width: 48ch;
	margin-inline: auto;
}

.bdx-empty-state {
	text-align: center;
	padding: var(--bdx-space-7) var(--bdx-space-4);
	border: 1px dashed var(--bdx-color-border);
	border-radius: var(--bdx-radius-lg);
	/* ink-secondary, not ink-muted: this component is used inside
	   alt-background sections where gray-500 falls just under 4.5:1. */
	color: var(--bdx-color-ink-secondary);
}

/* Compact trust/service benefits bar, directly under the hero */

.bdx-benefits {
	border-bottom: 1px solid var(--bdx-color-border);
	padding-block: var(--bdx-space-5);
}

/* 2 columns from the base mobile width, not 1 — tested empirically
   (not assumed): a horizontal icon+2-line-text row reads fine at 2-up
   even at 375px, with only the longest label ("Secure Payment")
   occasionally wrapping to two lines, and it's meaningfully more
   scannable/compact than a full-width single-column stack. Drops to 1
   column only below 360px, matching the same narrow-mobile threshold
   used for .bdx-grid--cards. */
.bdx-benefits__grid {
	display: grid;
	gap: var(--bdx-space-4) var(--bdx-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 359px) {
	.bdx-benefits__grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: var(--bdx-space-4);
	}
}

@media (min-width: 600px) {
	.bdx-benefits__grid {
		gap: var(--bdx-space-5);
	}
}

@media (min-width: 1024px) {
	.bdx-benefits__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bdx-benefits__item {
	display: flex;
	align-items: center;
	gap: var(--bdx-space-3);
}

.bdx-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--bdx-radius-md);
	background-color: var(--bdx-color-bg-alt);
	color: var(--bdx-color-accent);
	flex-shrink: 0;
}

.bdx-benefits__title {
	display: block;
	font-weight: var(--bdx-font-weight-semibold);
	color: var(--bdx-color-ink);
	font-size: var(--bdx-font-size-sm);
}

.bdx-benefits__body {
	display: block;
	color: var(--bdx-color-ink-muted);
	font-size: var(--bdx-font-size-xs);
}

/* Testimonials */

.bdx-testimonial-card {
	display: flex;
	flex-direction: column;
	gap: var(--bdx-space-3);
}

.bdx-testimonial-card__head {
	display: flex;
	align-items: center;
	gap: var(--bdx-space-3);
}

.bdx-testimonial-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--bdx-radius-full);
	object-fit: cover;
}

.bdx-testimonial-card__name {
	margin: 0;
	font-weight: var(--bdx-font-weight-semibold);
	color: var(--bdx-color-ink);
}

.bdx-testimonial-card__location {
	margin: 0;
	font-size: var(--bdx-font-size-xs);
	color: var(--bdx-color-ink-muted);
}

.bdx-testimonial-card__body {
	margin: 0;
	color: var(--bdx-color-ink-secondary);
}

/* Newsletter — the one deliberately dark section on the site (see
   docs/BDX-SPECIFICATION.md — the palette otherwise avoids a dark
   surface), used here only because it matches the approved reference's
   closing promotional band, not as a general direction shift. */
.bdx-newsletter {
	background-color: var(--bdx-color-ink);
	color: #fff;
	padding-block: var(--bdx-space-8);
}

.bdx-newsletter__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bdx-space-5);
}

.bdx-newsletter__title {
	color: #fff;
	margin: 0 0 var(--bdx-space-2);
	max-width: 26ch;
}

.bdx-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--bdx-space-3);
	width: 100%;
	max-width: 420px;
}

@media (min-width: 600px) {
	.bdx-newsletter__form {
		flex-direction: row;
	}
}

.bdx-newsletter__form .bdx-input {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.bdx-newsletter__form .bdx-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.bdx-newsletter__form .bdx-btn {
	flex-shrink: 0;
}

/* ==========================================================================
   11b. Shop & single product (WooCommerce's own template classes,
   restyled — see theme/woocommerce/ for the two template overrides
   this section supports: content-product.php and
   content-single-product.php. Everything here reuses existing BDX
   tokens; no new colors/spacing/type scale introduced.
   ========================================================================== */

/* WooCommerce's own default archive/product wrapper — contained like
   every other page instead of stretching full-bleed, since no
   archive-product.php override exists (deliberately: restyling these
   native classes is lower-risk than replacing WooCommerce's own
   toolbar/pagination/hook structure for a page that doesn't need a
   different structure, only different styling).

   Scoped to the Shop archive, single-product page, and product
   category/tag archives specifically (WooCommerce's own body classes:
   woocommerce-shop, single-product, tax-product_cat, tax-product_tag)
   — the bare .woocommerce class is not Shop/Product-specific, it's
   also the wrapper WooCommerce uses on Cart (woocommerce-cart),
   Checkout (woocommerce-checkout), My Account (woocommerce-account)
   and the mini-cart widget, none of which this phase touches or has
   reviewed; an unscoped rule here would silently change their
   container width too. body.woocommerce-shop alone (is_shop()) does
   NOT cover category/tag archives — those need their own tax-* body
   classes listed explicitly. */
body.woocommerce-shop .woocommerce,
body.single-product .woocommerce,
body.tax-product_cat .woocommerce,
body.tax-product_tag .woocommerce {
	max-width: var(--bdx-container-max);
	margin-inline: auto;
	padding-inline: var(--bdx-container-padding);
}

.woocommerce-breadcrumb,
.bdx-breadcrumb {
	font-size: var(--bdx-font-metadata);
	color: var(--bdx-color-ink-muted);
	margin-block: var(--bdx-space-4) var(--bdx-space-6);
}

.woocommerce-breadcrumb a,
.bdx-breadcrumb a {
	color: var(--bdx-color-ink-muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.bdx-breadcrumb a:hover {
	color: var(--bdx-color-accent);
}

.woocommerce-products-header__title.page-title {
	font-size: var(--bdx-font-h1);
	margin-bottom: var(--bdx-space-2);
}

.term-description {
	color: var(--bdx-color-ink-muted);
	max-width: 640px;
	margin-bottom: var(--bdx-space-6);
}

.woocommerce-notices-wrapper {
	margin-bottom: var(--bdx-space-4);
}

.woocommerce-result-count,
.woocommerce-ordering {
	font-size: var(--bdx-font-small);
	color: var(--bdx-color-ink-muted);
}

.woocommerce-result-count {
	margin: 0 0 var(--bdx-space-5);
}

.woocommerce-ordering {
	margin: 0 0 var(--bdx-space-5);
}

.woocommerce-ordering select {
	padding: var(--bdx-space-2) var(--bdx-space-3);
	font-family: inherit;
	font-size: var(--bdx-font-small);
	color: var(--bdx-color-ink);
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border-strong);
	border-radius: var(--bdx-radius-md);
}

/* Shop/category grid — same responsive behavior as the homepage's
   compact-content grids (.bdx-grid--cards), applied directly to
   WooCommerce's own `ul.products` rather than requiring an
   archive-product.php override just to swap a class name. */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bdx-space-3) var(--bdx-space-4);
	list-style: none;
	margin: 0 0 var(--bdx-space-8);
	padding: 0;
}

@media (max-width: 359px) {
	ul.products {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (min-width: 600px) {
	ul.products {
		gap: var(--bdx-space-5);
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* WooCommerce core ships THREE layered rules for li.product, not one —
   confirmed live via computed-style inspection, not just reading the
   source:
     1. woocommerce-layout.css:      .woocommerce ul.products li.product,
                                      .woocommerce-page ul.products li.product
                                      { float: left; width: 22.05%; }        — specificity (0,3,2)
     2. woocommerce-layout.css:      .woocommerce ul.products.columns-3 li.product,
                                      .woocommerce-page ul.products.columns-3 li.product
                                      { width: 30.75%; }                     — specificity (0,4,2)
     3. woocommerce-smallscreen.css: .woocommerce ul.products[class*="columns-"] li.product,
                                      .woocommerce-page ul.products[class*="columns-"] li.product
                                      { float: left; width: 48%; }           — specificity (0,4,2)
   ul.products always carries a real columns-N class (WooCommerce adds
   it itself, from the catalog columns setting), so #2 and #3 are not
   edge cases — they're the ones actually in effect. Both have one more
   class-level selector than a bare `ul.products li.product` reset
   (0,3,2), so a same-specificity fix only ever beat rule #1: float
   stayed "left" below ~768px (rule #3 still won) and card width stayed
   wrong at every width, including desktop (rule #2 still won there).
   Matching the same `[class*="columns-"]` attribute-selector pattern
   used by WooCommerce's own smallscreen rule reaches (0,4,2) too — an
   attribute selector counts in the same specificity bucket as a class,
   regardless of the exact columns-N value, so this beats rules #2 and
   #3 without hard-coding specific column counts (robust if the catalog
   columns setting ever changes) and without !important — combined with
   main.css loading after WooCommerce's own stylesheets (confirmed via
   network order), equal specificity resolves in our favor by source
   order alone. The plain (non-columns) selectors are kept too, as a
   defensive fallback for the rare context where WooCommerce doesn't
   add a columns-N class. Reset every box-model property WooCommerce's
   float layout depends on so the grid fully owns placement instead. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	list-style: none;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

.woocommerce-pagination {
	display: flex;
	justify-content: center;
}

.woocommerce-pagination ul {
	display: flex;
	align-items: center;
	gap: var(--bdx-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--bdx-space-2);
	border-radius: var(--bdx-radius-md);
	color: var(--bdx-color-ink);
	text-decoration: none;
	font-size: var(--bdx-font-small);
	font-weight: var(--bdx-font-weight-medium);
}

.woocommerce-pagination .page-numbers.current {
	background-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent-ink);
}

.woocommerce-pagination a.page-numbers:hover {
	background-color: var(--bdx-color-bg-alt);
}

/* Long imported/scraped product titles must not create uneven card
   heights across a grid — clamped to 2 lines everywhere the compact
   card component is used, full title always available on the actual
   product page. */
.bdx-product-card__title,
.bdx-category-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Single product page */

.bdx-product-page {
	padding-block: var(--bdx-space-6) var(--bdx-space-8);
}

.bdx-product-page__grid {
	display: grid;
	gap: var(--bdx-space-6);
	margin-bottom: var(--bdx-space-8);
}

@media (min-width: 600px) {
	.bdx-product-page__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.bdx-product-page__grid {
		gap: var(--bdx-space-8);
	}
}

/* Gallery */

.bdx-product-gallery {
	position: relative;
}

.bdx-product-gallery__main {
	aspect-ratio: 1 / 1;
	background-color: var(--bdx-color-bg-alt);
	border-radius: var(--bdx-radius-lg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bdx-product-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bdx-product-gallery__viewport {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--bdx-color-bg-alt);
	border-radius: var(--bdx-radius-lg);
	overflow: hidden;
}

.bdx-product-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bdx-transition-base);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bdx-product-gallery__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.bdx-product-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bdx-product-gallery__control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border);
	box-shadow: var(--bdx-shadow-sm);
	color: var(--bdx-color-ink);
	cursor: pointer;
	z-index: 2;
}

.bdx-product-gallery__control:hover {
	border-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent);
}

.bdx-product-gallery__control--prev {
	left: var(--bdx-space-3);
}

.bdx-product-gallery__control--next {
	right: var(--bdx-space-3);
}

/* JS (bdxInitProductGallery()) creates each dot with the existing
   .bdx-hero-carousel__dot class from the hero carousel — same
   component, same styling, no duplicate CSS needed here. */
.bdx-product-gallery__dots {
	display: flex;
	justify-content: center;
	gap: var(--bdx-space-2);
	margin-top: var(--bdx-space-3);
}

/* Thumbnail rail: a horizontal scroll strip on mobile (touch-friendly,
   no layout reflow needed), a vertical-feeling row under the main
   image on larger screens where there's width to spare. */
.bdx-product-gallery__thumbs {
	display: flex;
	gap: var(--bdx-space-2);
	margin-top: var(--bdx-space-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.bdx-product-gallery__thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: var(--bdx-radius-md);
	overflow: hidden;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	scroll-snap-align: start;
}

.bdx-product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bdx-product-gallery__thumb.is-active {
	border-color: var(--bdx-color-accent);
}

/* Summary */

.bdx-product-summary__title {
	font-size: var(--bdx-font-h1);
	margin-bottom: var(--bdx-space-3);
}

.bdx-product-summary__rating {
	margin-bottom: var(--bdx-space-3);
}

.bdx-product-summary__price {
	font-size: var(--bdx-font-h2);
	font-weight: var(--bdx-font-weight-bold);
	color: var(--bdx-color-ink);
	margin-bottom: var(--bdx-space-4);
}

.bdx-product-summary__price del {
	color: var(--bdx-color-ink-muted);
	font-weight: var(--bdx-font-weight-normal);
	margin-right: var(--bdx-space-2);
	font-size: 0.7em;
}

.bdx-product-summary__short-desc {
	color: var(--bdx-color-ink-secondary);
	max-width: 60ch;
	margin-bottom: var(--bdx-space-4);
}

.bdx-product-summary__short-desc p:last-child {
	margin-bottom: 0;
}

/* WooCommerce's own add-to-cart templates render the .stock message
   themselves (see content-single-product.php) as the first child inside
   .bdx-product-summary__cart, rather than a separate element this theme
   builds — styled here instead of a dedicated wrapper class. */
.bdx-product-summary__cart .stock {
	display: block;
	font-size: var(--bdx-font-small);
	margin-bottom: var(--bdx-space-3);
}

.bdx-product-summary__cart .stock.in-stock {
	color: var(--bdx-color-success);
}

.bdx-product-summary__cart .stock.out-of-stock {
	color: var(--bdx-color-error);
}

/* Reuses WooCommerce's own real add-to-cart form (quantity input +
   submit button + nonce) — restyled only, never reimplemented. */
.bdx-product-summary__cart {
	margin-bottom: var(--bdx-space-6);
}

.bdx-product-summary__cart .quantity {
	display: inline-block;
	margin-right: var(--bdx-space-3);
	margin-bottom: var(--bdx-space-3);
}

.bdx-product-summary__cart .qty {
	width: 4.5rem;
	padding: var(--bdx-space-3);
	font-family: inherit;
	font-size: var(--bdx-font-body);
	color: var(--bdx-color-ink);
	background-color: var(--bdx-color-surface);
	border: 1px solid var(--bdx-color-border-strong);
	border-radius: var(--bdx-radius-md);
	min-height: var(--bdx-btn-height);
}

.bdx-product-summary__cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bdx-btn-height);
	padding-inline: var(--bdx-space-6);
	border-radius: var(--bdx-radius-full);
	background-color: var(--bdx-color-accent);
	color: var(--bdx-color-accent-ink);
	font-weight: var(--bdx-font-weight-bold);
	font-size: var(--bdx-font-size-lg);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--bdx-transition-fast), box-shadow var(--bdx-transition-fast);
}

.bdx-product-summary__cart .single_add_to_cart_button:hover {
	background-color: var(--bdx-color-accent-hover);
	box-shadow: 0 4px 14px rgba(10, 132, 255, 0.28);
}

.bdx-product-summary__cart .single_add_to_cart_button.disabled {
	background-color: var(--bdx-color-border-strong);
	cursor: not-allowed;
}

.bdx-product-summary__meta {
	font-size: var(--bdx-font-metadata);
	color: var(--bdx-color-ink-muted);
}

.bdx-product-summary__meta p {
	margin: 0;
}

/* Description / specifications */

.bdx-product-details {
	border-top: 1px solid var(--bdx-color-border);
	padding-top: var(--bdx-space-8);
	display: grid;
	gap: var(--bdx-space-8);
}

@media (min-width: 1024px) {
	.bdx-product-details {
		grid-template-columns: 1.5fr 1fr;
	}
}

.bdx-product-details__section h2 {
	margin-bottom: var(--bdx-space-4);
}

/* Real product descriptions may contain scraped/imported HTML (lists,
   bold text, paragraphs) — this gives that real content a consistent
   BDX typographic treatment without altering the HTML itself. */
.bdx-prose {
	color: var(--bdx-color-ink-secondary);
	max-width: 65ch;
}

.bdx-prose p {
	margin: 0 0 var(--bdx-space-4);
}

.bdx-prose ul,
.bdx-prose ol {
	margin: 0 0 var(--bdx-space-4);
	padding-left: 1.25em;
}

.bdx-prose li {
	margin-bottom: var(--bdx-space-2);
}

.bdx-prose li:last-child {
	margin-bottom: 0;
}

.bdx-spec-list {
	margin: 0;
	border-top: 1px solid var(--bdx-color-border);
}

.bdx-spec-list__row {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: var(--bdx-space-4);
	padding-block: var(--bdx-space-3);
	border-bottom: 1px solid var(--bdx-color-border);
	font-size: var(--bdx-font-small);
}

.bdx-spec-list__row dt {
	color: var(--bdx-color-ink-muted);
	font-weight: var(--bdx-font-weight-medium);
}

.bdx-spec-list__row dd {
	margin: 0;
	color: var(--bdx-color-ink);
}

/* Merchandising rows (Related Gadgets / Frequently Bought Together /
   Complete Your Setup) — a horizontal, swipeable scroll-snap row on
   every width. No JS carousel needed: native overflow-x + scroll-snap
   gives touch/trackpad swipe, momentum scrolling, and snap-to-card for
   free, with none of the accessibility/reduced-motion complexity a
   custom carousel would add. Card width is content-driven
   (min/max-width), not a fixed column count, so it naturally shows
   "more exists" via a partially-visible next card. */
.bdx-merch-row {
	display: flex;
	gap: var(--bdx-space-4);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--bdx-space-2);
	margin-inline: calc(var(--bdx-container-padding) * -1);
	padding-inline: var(--bdx-container-padding);
}

.bdx-merch-row__item {
	flex: 0 0 auto;
	width: 168px;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.bdx-merch-row__item {
		width: 220px;
	}
}

@media (min-width: 1024px) {
	.bdx-merch-row {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.bdx-merch-row__item {
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bdx-merch-row {
		scroll-behavior: auto;
	}
}

.bdx-merch-section + .bdx-merch-section {
	border-top: 1px solid var(--bdx-color-border);
}

/* ==========================================================================
   12. Utilities
   ========================================================================== */

.bdx-flex {
	display: flex;
}

.bdx-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bdx-gap-3 {
	gap: var(--bdx-space-3);
}

.bdx-mt-0 {
	margin-top: 0;
}

/* ==========================================================================
   13. Accessibility
   ========================================================================== */

.bdx-skip-link {
	position: absolute;
	left: var(--bdx-space-3);
	top: -100px;
	z-index: 100;
	background-color: var(--bdx-color-ink);
	color: #fff;
	padding: var(--bdx-space-3) var(--bdx-space-4);
	border-radius: var(--bdx-radius-md);
	text-decoration: none;
	transition: top var(--bdx-transition-fast);
}

.bdx-skip-link:focus {
	top: var(--bdx-space-3);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.bdx-btn:focus-visible,
.bdx-nav__toggle:focus-visible {
	outline: 2px solid var(--bdx-color-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   14. Responsive — tablet / desktop / large desktop
   ========================================================================== */

/* h1/h2/h3 no longer need a breakpoint override here — they use the
   clamp()-based --bdx-font-h1/h2/h3 tokens (§1 Design tokens), which
   already scale smoothly across the full viewport range. */
@media (min-width: 600px) {
	.bdx-hero__actions {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.bdx-hero__actions .bdx-btn {
		width: auto;
	}
}

@media (min-width: 1024px) {
	.bdx-header__inner {
		padding-block: var(--bdx-space-4);
	}

	.bdx-nav__toggle {
		display: none;
	}

	.bdx-nav--primary {
		position: static;
	}

	.bdx-nav__list {
		position: static;
		flex-direction: row;
		max-height: none;
		overflow: visible;
		padding: 0;
		border: 0;
		gap: var(--bdx-space-6);
	}

	.bdx-nav__list a {
		padding: var(--bdx-space-2) 0;
		border-bottom: 0;
	}

	.bdx-header__search {
		order: 0;
		flex-basis: auto;
		flex: 1 1 240px;
		max-width: 320px;
		margin-inline: var(--bdx-space-4);
	}

	.bdx-hero {
		padding-block: 7rem 6rem;
	}

	/* Only max-width (line-wrap) changes here now — font-size is handled
	   by the clamp()-based --bdx-font-display token, which already
	   reaches its full desktop size at this width. */
	.bdx-hero__title {
		max-width: 22ch;
	}
}

@media (min-width: 1440px) {
	:root {
		--bdx-container-padding: var(--bdx-space-8);
	}

	.bdx-hero__title {
		max-width: 26ch;
	}
}

/* ==========================================================================
   Checkout — BDx contact fields (WhatsApp / alternative phone / marketing
   consent), added by the plugin's Bdx_Checkout_Contact_Fields. Scoped
   narrowly to these three field wrappers only — the rest of the checkout
   page (name/address/email fields, order-review table, payment box) is
   unstyled WooCommerce default by design in this phase; a full
   Cart/Checkout restyle is a separate, larger, not-yet-approved task.
   Existing tokens only, no new colors/spacing/type introduced. */

.bdx-checkout-field--whatsapp .description,
.bdx-checkout-field--alt-phone .description {
	display: block;
	margin-top: var(--bdx-space-1);
	font-size: var(--bdx-font-size-xs);
	color: var(--bdx-color-ink-muted);
}

.bdx-checkout-field--marketing-consent label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--bdx-space-2);
	font-size: var(--bdx-font-size-sm);
	color: var(--bdx-color-ink);
	cursor: pointer;
}

.bdx-checkout-field--marketing-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

/* Marketing consent reads as a distinct, separate opt-in — not just
   another field in the contact-info cluster above it — via a divider
   and its own top spacing, on every width. */
.bdx-checkout-field--marketing-consent {
	margin-top: var(--bdx-space-4);
	padding-top: var(--bdx-space-4);
	border-top: 1px solid var(--bdx-color-border);
}

@media (max-width: 599px) {
	.bdx-checkout-field--whatsapp,
	.bdx-checkout-field--alt-phone,
	.bdx-checkout-field--marketing-consent {
		margin-bottom: var(--bdx-space-3);
	}
}