/*!
 * BuildBarn Native Home — home.css
 *
 * The ONE stylesheet the native homepage depends on.  Covers:
 *   - CSS custom properties (BuildBarn tokens, with fallbacks so it works
 *     independently of `buildbarn-tokens.css` if that ever disappears)
 *   - Native header (single-line, dropdown mega menu, mobile drawer)
 *   - All 7 home sections (hero, services, categories, featured,
 *     testimonials, faq, blog)
 *   - Native footer (newsletter, 5-col grid, payment, copyright)
 *
 * Mobile-first; desktop overrides gated behind `@media (min-width: ...)`.
 * No framework, no resets (we include a small one inline below).
 * Font stack leans on our self-hosted Plus Jakarta Sans + Fraunces with
 * metric-matched Fallback faces declared elsewhere.
 */

/* ------------------------------------------------------------------
 * 1.  Tokens — mapped to BuildBarn SSOT palette from `buildbarn-tokens.css`
 *    (warm brown / cream coffee theme, matches Porto 812 baseline).
 *    Every var() has a hard-coded hex fallback so the homepage still
 *    renders correctly if the site-wide tokens file fails to load.
 * ------------------------------------------------------------------ */
:root {
	--bb-color-primary:     var(--bb-brand-accent-strong, #6c4f36);
	--bb-color-primary-700: var(--bb-text-primary,        #2e2118);
	/* 2026-04-19 Accessibility: darkened from #9a7657 (3.48:1 contrast
	 * on the cream page bg) to #855d3b (5.23:1 on cream, 6.10:1 on
	 * white) so small-uppercase eyebrow labels —
	 *   .bb-native-hero-eyebrow, .bb-native-cat-edit-eyebrow,
	 *   .bb-native-service-eyebrow, .bb-native-product-card-cat,
	 *   .bb-native-section-eyebrow
	 * — pass WCAG AA 4.5:1 for normal text.  Still visibly warmer than
	 * --bb-color-primary (#6c4f36) so eyebrow vs primary keep their
	 * existing hierarchy. */
	--bb-color-accent-warm: #855d3b;
	--bb-color-ink:         var(--bb-text-primary,        #2e2118);
	--bb-color-ink-soft:    var(--bb-text-secondary,      #6c5645);
	--bb-color-muted:       var(--bb-text-muted,          #6f574a);
	--bb-color-line:        var(--bb-border-soft,         #d8cbbf);
	--bb-color-line-strong: var(--bb-border-strong,       #c7b4a3);
	--bb-color-bg:          var(--bb-bg-page,             #f3efe6);
	--bb-color-bg-card:     var(--bb-bg-card,             #fbf8f1);
	--bb-color-bg-soft:     var(--bb-bg-soft,             #ece4d7);
	--bb-color-accent:      #d4a04a;

	--bb-color-footer-bg:        var(--bb-footer-bg,       #5f4632);
	--bb-color-footer-text:      var(--bb-footer-text,     #f7f0e8);
	--bb-color-footer-link:      var(--bb-footer-link,     #f3e6d8);
	--bb-color-footer-link-hover:var(--bb-footer-link-hover,#ffffff);
	--bb-color-footer-muted:     var(--bb-footer-muted,    rgba(245,245,243,.78));
	--bb-color-footer-accent:    var(--bb-footer-accent,   #d2b293);
	--bb-color-footer-divider:   var(--bb-footer-divider,  rgba(255,255,255,.14));

	/* Hero gradient — aligned to the footer tone (#5f4632) so all dark
	 * brown surfaces across the site feel like one family.  We keep a
	 * small 2-stop gradient (not a 3-stop plunge into near-black) so the
	 * page reads warm rather than muddy.  Top stop is one step lighter
	 * than footer, bottom stop one step deeper so the gradient still has
	 * direction.  White text on either stop passes WCAG AAA.  */
	--bb-color-hero-from:        #6e5640;
	--bb-color-hero-to:          #4c3525;

	--bb-font-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bb-font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;

	--bb-radius-sm: 6px;
	--bb-radius:    12px;
	--bb-radius-lg: 20px;
	--bb-radius-xl: 28px;

	--bb-shadow-sm: 0 1px 2px rgba(95,70,50,.08);
	--bb-shadow:    0 10px 22px rgba(95,70,50,.10);

	--bb-container: 1200px;
	--bb-gap:       24px;
	--bb-gap-sm:    12px;
	--bb-gap-lg:    40px;
}

/* ------------------------------------------------------------------
 * 2.  Reset & base
 * ------------------------------------------------------------------ */
.bb-native-body {
	margin: 0;
	padding: 0;
	background: var(--bb-color-bg);
	color: var(--bb-color-ink);
	font-family: var(--bb-font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.bb-native-body *,
.bb-native-body *::before,
.bb-native-body *::after { box-sizing: border-box; }
.bb-native-body img { max-width: 100%; height: auto; display: block; }
/* Reset UA link styling without bumping specificity: `:where()` contributes
 * 0 to the selector's specificity, so any `.bb-native-*-btn` class rule
 * later in the file wins the cascade on its own color.  Previously this
 * was `.bb-native-body a`, specificity (0,1,1), which silently overrode
 * class-only button colors — the About page bottom CTA's primary button
 * rendered near-white on white as a result ("这部分看不清"). */
.bb-native-body :where(a) { text-decoration: none; color: currentColor; }
.bb-native-body :where(a):hover { color: var(--bb-color-accent-warm); }
.bb-native-body ul,
.bb-native-body ol { margin: 0; padding: 0; list-style: none; }
.bb-native-body h1, .bb-native-body h2,
.bb-native-body h3, .bb-native-body h4,
.bb-native-body h5, .bb-native-body h6 {
	font-family: var(--bb-font-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.bb-native-body button { font: inherit; cursor: pointer; }
.bb-native-body .screen-reader-text {
	position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------------------------
 * <article> reset (2026-04-20)
 *
 * Porto's parent theme paints every <article>, .post and .hentry with
 * a bordered white "post card" at zero-padding — fine on the default
 * blog, but on our native templates we use <article> for
 *   (a) plain narrative prose  → About story body, single-post body
 *   (b) hand-styled cards      → contact form, location card, promo
 * Case (a) inherits the Porto frame but never had internal padding of
 * its own, so paragraphs butt against the border.  User feedback:
 * "类似这个页面 内容会紧贴着 框上 不好看".
 *
 * Fix: strip Porto's card styling from every <article> inside our
 * native bodies, excluding the articles that we DO want to look like
 * cards (those set their own bg/border/padding).  The intentional
 * cards use specific classes and stay frames; everything else reverts
 * to plain flow text.
 * ------------------------------------------------------------------ */
.bb-native-body article:not(.bb-native-contact-form-card):not(.bb-native-loc-card):not(.bb-native-promo-card) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	/* Margin stays controllable; Porto's default is 0 0 30px which is
	 * fine on single-post but adds a phantom bottom gap on the About
	 * story body where our parent <section> already owns spacing.
	 * Zero it and let parent layout rules handle spacing. */
	margin: 0 !important;
}

/* Same for Porto's page-level <div class="post"> / .hentry wrappers
 * that sometimes get emitted around the_content() on pages the header
 * unify plugin doesn't take over fully. */
.bb-native-body .post:not(.bb-native-contact-form-card):not(.bb-native-loc-card):not(.bb-native-promo-card):not([class*="bb-native-about-pillar"]),
.bb-native-body .hentry:not(.bb-native-contact-form-card):not(.bb-native-loc-card):not(.bb-native-promo-card):not([class*="bb-native-about-pillar"]) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.bb-native-container {
	max-width: var(--bb-container);
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 768px) {
	.bb-native-container { padding: 0 24px; }
}
/* 2026-04-20: Match the internal-page responsive ladder that
 * `.bb-unify-width` applies on category/shop pages via
 * `body.bb-unify-width #main > .container { 1200 → 1440 → 1520 }`.
 * Without this, the homepage nav + all home sections cap at 1200px
 * while the shop/category pages stretch to 1440/1520, leaving the
 * homepage visibly narrower on ≥1440px monitors. */
@media (min-width: 1440px) {
	.bb-native-container { max-width: 1440px; }
}
@media (min-width: 1900px) {
	.bb-native-container { max-width: 1520px; }
}

/* ------------------------------------------------------------------
 * 3.  Header
 * ------------------------------------------------------------------ */
.bb-native-topbar {
	background: #ffffff;
	border-bottom: 1px solid var(--bb-color-line);
	font-size: 13px;
}
/* 2026-04-20 (nav v5): switched `justify-content: center` -> `space-between`
 * and split the two-link row into left/right groups.  Left stays primary
 * yard + phone; right gains hours + email so the topbar's whitespace
 * finally carries information instead of reading as filler. */
.bb-native-topbar-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 10px 16px;
	flex-wrap: wrap;
	color: var(--bb-color-ink-soft);
}
.bb-native-topbar-group {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
@media (max-width: 767px) {
	/* Hide the secondary (hours + email) group on mobile so the topbar
	 * stays one compact line.  Primary info (address + phone) survives. */
	.bb-native-topbar-group--right { display: none; }
	.bb-native-topbar-inner { justify-content: center; gap: 20px; }
}
.bb-native-topbar-link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--bb-color-ink-soft);
	/* A11y 2026-04-19: WCAG 2.2 target-size wants tappable area >= 24x24px
	 * with >= 24px spacing to neighbours.  Topbar links were bare 13px
	 * inline text (~16px tall) which Lighthouse flagged.  padding gives
	 * a 24px minimum height; min-width:24 covers the icon-only scenario.
	 * The parent .bb-native-topbar-inner already sets gap:24px so the two
	 * links are already 24px apart horizontally. */
	min-height: 24px;
	min-width: 24px;
	padding: 4px 2px;
}
.bb-native-topbar-link:hover { color: var(--bb-color-primary); }
.bb-native-topbar-phone { font-weight: 600; color: var(--bb-color-ink); }
/* Hours is an informational `<span>` (not a link) so it shouldn't shift
 * colour on hover and shouldn't show a pointer cursor. */
.bb-native-topbar-hours { cursor: default; }
.bb-native-topbar-hours:hover { color: var(--bb-color-ink-soft); }
.bb-native-header {
	background: #fff;
	border-bottom: 1px solid var(--bb-color-line);
	position: sticky; top: 0; z-index: 100;
	min-height: 70px;    /* CLS reservation */
}
.bb-native-header-row-1 {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 11px 16px;
	min-height: 70px;    /* matches reservation above */
}
.bb-native-menu-toggle {
	background: transparent; border: 0; color: var(--bb-color-ink);
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--bb-radius-sm);
}
.bb-native-menu-toggle:hover { background: var(--bb-color-bg-soft); }
@media (min-width: 992px) {
	.bb-native-menu-toggle { display: none; }
}
.bb-native-brand {
	display: inline-flex; align-items: center;
	flex-shrink: 0;
	/* 2026-04-20 (nav v5.2): dropped the cream badge wrapper (padding +
	 * bg + border-radius).  The user reported "logo 不要框起来" — the
	 * padded card read as a button/ad, not brand art.  The tint from
	 * the #bb-logo-tint SVG filter now sits directly on the header
	 * background, which is cleaner and matches how most WooCommerce
	 * storefronts present their wordmark. */
}
.bb-native-brand img {
	height: 44px; width: auto;
	max-width: 170px;
	/* Tint to brand primary 2026-04-19: the supplied logo.webp has a baked-in
	 * near-white background (no alpha channel), so a mask-image swap would
	 * paint a solid-colour rectangle.  Two-stage compositing:
	 *   1. `filter: url(#bb-logo-tint)` — an inline SVG filter defined in
	 *      templates/header.php that uses feComponentTransfer with a 3-stop
	 *      table per channel.  Unlike CSS `sepia() hue-rotate()` (which is
	 *      anchored to sepia's yellow ~40° base and shifts uniformly), the
	 *      table gives us exact stop values:
	 *        gray 0 (black)   → rgb(13, 8, 5)    near-black warm brown
	 *        gray 0.5 (mid)   → rgb(108, 79, 54) exact brand primary #6c4f36
	 *        gray 1 (white)   → rgb(255,255,255) pure white, preserved
	 *      This fixes the earlier sepia-based chain that the user flagged
	 *      as "变成黄色了" — sepia's yellow cast made the logo read tan
	 *      rather than red-brown even after `hue-rotate(-20deg)`.
	 *   2. `mix-blend-mode: multiply` — because step 1 kept pure white
	 *      pure white, multiply collapses the logo's baked-in background
	 *      into the page cream (#faf7f2) so only the now-warm-brown
	 *      barn/monogram artwork remains visible.
	 * The same rule covers the mobile drawer copy (`.bb-native-drawer-header
	 * .bb-native-brand img`) because it re-uses `.bb-native-brand`. */
	mix-blend-mode: multiply;
	filter: url(#bb-logo-tint);
}

/* ------------------------------------------------------------------
 * Unified search pill (2026-04-20, nav v5 / "plan B")
 *
 * Old layout shipped two separate "All Categories" controls: an inline
 * <select> filter inside the search form (rarely used, squashed to
 * 168px) AND a 250px nav-row button that opened a category panel.
 * Users read them as duplicates; the two-control split also forced a
 * second nav row.
 *
 * New layout: one pill, three segments.
 *
 *   [ .bb-native-allcats  |  .bb-native-search (input)  |  submit ]
 *          Shop ▾                 "Search timber…"         🔍
 *
 * The pill owns the 1px border + the focus-within glow; inner segments
 * are transparent and separated by 1px right-borders.  The heavy 2px
 * primary-colour frame from v4 is gone — primary colour is now earned
 * only by the submit button and the focus/hover ring.
 * ------------------------------------------------------------------ */
.bb-native-search-wrap {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 760px;
	margin: 0 20px;
	display: flex;
	align-items: stretch;
	height: 44px;
	background: #fff;
	border: 1px solid var(--bb-color-line);
	border-radius: 999px;
	/* `overflow: visible` is required so the .bb-native-allcats-panel
	 * (absolutely positioned, hangs below the Shop segment) isn't
	 * clipped.  Inner segments clip themselves via border-radius. */
	overflow: visible;
	transition: border-color .15s ease, box-shadow .15s ease;
	position: relative;
}
.bb-native-search-wrap:hover,
.bb-native-search-wrap:focus-within {
	border-color: var(--bb-color-primary);
	box-shadow: 0 0 0 3px rgba(122, 90, 63, 0.12);
}
/* Tablet (768–991): restore a compact search (previously `display:none`).
 * Hide the Shop segment here so the pill fits the narrower row — the
 * hamburger drawer already exposes full category navigation on tablet. */
@media (min-width: 768px) and (max-width: 991px) {
	.bb-native-search-wrap { max-width: 420px; margin: 0 12px; height: 40px; }
	.bb-native-search-wrap .bb-native-allcats { display: none; }
}
/* Mobile (≤767): header row hides search entirely — the toggle drawer
 * is the primary navigation surface, and a third row would push the
 * logo off-screen on 360px devices. */
@media (max-width: 767px) {
	.bb-native-search-wrap { display: none; }
}

/* Shop segment — was the row-2 "All Categories" cell */
.bb-native-search .bb-native-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 0 16px;
	font-size: 14px;
	background: transparent;
	color: var(--bb-color-ink);
}
.bb-native-search {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	background: transparent;
	border: 0;
	border-radius: 0;
	height: auto;
	overflow: hidden;
}
/* Outline removed — the wrap owns the focus state.  Input itself stays
 * borderless so the pill reads as a single surface. */
.bb-native-search-input:focus-visible {
	outline: none;
	box-shadow: none;
}
.bb-native-search-submit {
	background: var(--bb-color-primary); color: #fff; border: 0;
	padding: 0 22px;
	border-radius: 0 999px 999px 0;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease;
	flex-shrink: 0;
}
.bb-native-search-submit:hover { background: var(--bb-color-primary-700); }

/* Meta (address + phone) */
.bb-native-meta {
	display: none;
	flex-direction: column;
	font-size: 12px;
	line-height: 1.2;
	gap: 4px;
	color: var(--bb-color-ink-soft);
}
@media (min-width: 1280px) {
	.bb-native-meta { display: flex; }
}
.bb-native-meta-link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--bb-color-ink-soft);
	/* A11y 2026-04-19: same WCAG 2.2 target-size guardrail as
	 * .bb-native-topbar-link above. */
	min-height: 24px;
	min-width: 24px;
	padding: 4px 2px;
}
.bb-native-meta-link:hover { color: var(--bb-color-primary); }
.bb-native-meta-phone { font-weight: 600; color: var(--bb-color-ink); font-size: 13px; }

/* Actions: account / wishlist / cart */
.bb-native-actions {
	display: flex; align-items: center; gap: 12px;
	margin-left: auto;
}
.bb-native-action {
	position: relative;
	display: inline-flex; flex-direction: column; align-items: center;
	color: var(--bb-color-ink);
	padding: 4px 6px;
	font-size: 11px; line-height: 1.1;
	min-width: 48px;
}
.bb-native-action svg { display: block; }
.bb-native-action-label { margin-top: 2px; color: var(--bb-color-ink-soft); }
.bb-native-action:hover { color: var(--bb-color-primary); }
.bb-native-action:hover .bb-native-action-label { color: var(--bb-color-primary); }
.bb-native-cart { }
/* 2026-04-20 (nav v5): cart markup now wraps the icon + count badge in
 * `.bb-native-cart-icon-wrap` so the absolute-positioned badge anchors
 * to the icon alone rather than the whole link (which, with the
 * subtotal line added below the icon, would place the badge far from
 * the icon it's labelling).  The wrap becomes the new positioning
 * context for the count. */
.bb-native-cart-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bb-native-cart-count {
	position: absolute;
	top: -6px; right: -10px;
	min-width: 18px; height: 18px;
	background: var(--bb-color-primary); color: #fff;
	font-size: 10px; font-weight: 700; line-height: 18px;
	border-radius: 50%;
	text-align: center; padding: 0 4px;
}
/* Cart subtotal pinned beneath the "Cart" label.  Shows only when
 * WooCommerce is active AND the cart has items — empty string from
 * bb_home_native_cart_subtotal() collapses via :empty. */
.bb-native-cart-label {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	line-height: 1.1;
}
.bb-native-cart-word {
	font-size: 11px;
	font-weight: 600;
	color: var(--bb-color-ink-soft);
}
.bb-native-cart-subtotal {
	font-size: 12px;
	font-weight: 700;
	color: var(--bb-color-primary);
	letter-spacing: .01em;
	/* WC renders the amount with nested markup; strip stray whitespace. */
	white-space: nowrap;
}
.bb-native-cart-subtotal:empty { display: none; }
/* When subtotal is present, it replaces the role of the "Cart" word as
 * the prominent text; keep Cart as a secondary hint by shrinking it. */
.bb-native-cart-label:has(.bb-native-cart-subtotal:not(:empty)) .bb-native-cart-word {
	font-size: 10px;
	opacity: .75;
}
/* Tight screens: we've never shown the subtotal on mobile — the action
 * label is visually-hidden there already (see the visually-hidden block
 * in the media query below), so subtotal stays in the a11y tree only. */
@media (max-width: 575px) {
	.bb-native-cart-subtotal { display: none !important; }
}
@media (max-width: 575px) {
	/* Visually hide the action label on narrow screens, but keep it in
	 * the accessibility tree so screen readers and Lighthouse can still
	 * read "Account" / "Wishlist" / "Cart" as the link's accessible
	 * name.  `display: none` would strip it from the a11y tree entirely
	 * and leave us with icon-only links that fail `link-name`. */
	.bb-native-action-label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.bb-native-actions { gap: 4px; }
	.bb-native-action { min-width: 40px; }
}

/* ------------------------------------------------------------------
 * Nav row — desktop only (≥992px)
 *
 * 2026-04-20 (v4, softened + click-to-open):
 *
 * Shift from the solid-primary "Porto shop-with-sidebar" block to a
 * quieter, rounded shelf that reads as part of the cream page, not a
 * chrome-bar stuck onto it:
 *
 *   - Nav row: transparent, no top/bottom hairlines.  A single soft
 *     shadow under the row visually separates it from the content
 *     below without the harsh double-line look.
 *   - "All Categories" button: cream card with a 1px line + 8px radius,
 *     matching the rest of the homepage's card system.  Primary color
 *     is earned — it only fills in on hover / when the panel is open.
 *   - Panel: hangs 6px below the button (no longer flush), 10px radius,
 *     large soft shadow.  Opening is now CLICK-ONLY (.open class added
 *     by home.js).  The previous :hover / :focus-within triggers were
 *     removed because the 6px gap between button and panel made the
 *     panel disappear as soon as the cursor travelled between them.
 *   - Horizontal items: hover keeps a subtle 2px primary underline but
 *     the bar is now 60% opaque so it feels less buzzy.
 * ------------------------------------------------------------------ */
.bb-native-nav {
	display: none;
	background: transparent;
	position: relative;
}
.bb-native-nav::after {
	/* single soft separator line, replacing the old top+bottom 1px hairlines */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--bb-color-line);
	opacity: .6;
}
@media (min-width: 992px) {
	.bb-native-nav { display: block; }
}
.bb-native-nav-inner {
	display: flex;
	align-items: center;
	gap: 0;
	/* 2026-04-20 (nav v5): trimmed from 56px -> 48px min-height and 8px
	 * -> 4px vertical padding.  The 250px "All Categories" cell that
	 *  used to live here is gone (now the Shop segment in the row-1
	 *  search pill), so this row carries only the horizontal menu and
	 *  doesn't need the old sidebar-equivalent height. */
	min-height: 48px;
	padding: 4px 0;
}

/* ---------- Shop segment (previously "All Categories" 250px left cell) ----
 *
 * 2026-04-20 (nav v5): the block is now the LEFT segment of the unified
 * search pill inside row-1.  It no longer floats as a 250px sidebar on
 * row-2.  Visuals change accordingly:
 *
 *   - `flex: 0 0 250px` -> `flex: 0 0 auto` (button shrinks to content).
 *   - No own border / radius (the wrap pill carries both).
 *   - Right hairline separator via `border-right` so the Shop segment
 *     visually parts from the search input the same way the submit
 *     button parts on the right.
 *   - `border-radius: 999px 0 0 999px` on the button to match the pill
 *     on the left edge.
 *   - Hover / open state uses the cream soft background (not solid
 *     primary fill) so it reads as "highlighting this segment" rather
 *     than "filling a button".  Primary colour stays reserved for the
 *     submit action.
 *   - Panel hangs from `.bb-native-allcats` (the segment), anchored
 *     to its bottom-left corner, 8px gap below the pill.
 * ---------------------------------------------------------------------- */
.bb-native-allcats {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	border-right: 1px solid var(--bb-color-line);
}
.bb-native-allcats-btn {
	background: transparent;
	color: var(--bb-color-ink);
	border: 0;
	border-radius: 999px 0 0 999px;
	height: 100%;
	padding: 0 14px 0 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bb-font-sans);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: .2px;
	text-transform: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.bb-native-allcats-btn > span {
	min-width: 32px;
	text-align: left;
}
.bb-native-allcats-btn:hover,
.bb-native-allcats-btn:focus-visible,
.bb-native-allcats.open .bb-native-allcats-btn {
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-primary);
}
.bb-native-allcats-btn svg:last-child {
	flex-shrink: 0;
	opacity: .8;
	transition: transform .2s ease;
}
.bb-native-allcats.open .bb-native-allcats-btn svg:last-child {
	transform: rotate(180deg);
}

.bb-native-allcats-panel {
	position: absolute;
	/* Anchor to the bottom of the search pill (segment's parent), not
	 * the Shop segment alone — `calc(100% + 10px)` on the segment lines
	 * up visually with the pill's bottom edge since the segment is
	 * pill-height. */
	top: calc(100% + 10px);
	left: -1px;
	width: 280px;
	background: #fff;
	border: 1px solid var(--bb-color-line);
	border-radius: 12px;
	box-shadow: 0 18px 38px -10px rgba(60, 40, 20, 0.22);
	padding: 6px 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s, max-height .2s, transform .2s ease;
	transform: translateY(-4px);
	z-index: 110;
}
/* Click-only: no :hover / :focus-within.  home.js toggles .open. */
.bb-native-allcats.open .bb-native-allcats-panel {
	opacity: 1;
	visibility: visible;
	/* 2026-04-20 (nav v5.1): was `max-height: 75vh; overflow-y: auto`.
	 * With level-2/3 flyouts opening to the right of this panel, any
	 * scroll/clip on this container also clips the flyout card (per
	 * spec, setting one overflow axis to auto forces the other off
	 * `visible`).  Drop the scroll and let the panel size to content.
	 * ~15 top-level categories × 40px = ~600px, fine on any laptop.
	 * If the tree grows past viewport later, we can reintroduce an
	 * inner wrapper that scrolls while keeping the panel itself at
	 * `overflow: visible`. */
	max-height: none;
	overflow: visible;
	transform: translateY(0);
}

/* ---------- Shared menu structure ---------- */
.bb-native-menu {
	display: flex;
	gap: 0;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bb-native-menu-horizontal {
	flex: 1 1 auto;
	min-width: 0;
	/* 2026-04-20 (nav v5): was `margin-left: 20px` to clear the 250px
	 * "All Categories" block.  That block no longer lives here, so the
	 * menu starts flush with the container edge and gets the full width
	 * for top-level items. */
	margin-left: 0;
}
.bb-native-menu-vertical {
	flex-direction: column;
	gap: 0;
}
.bb-native-menu-item {
	position: relative;
	list-style: none;
	min-width: 0;
}

/* ---------- Top-level horizontal items ----------
 * 2026-04-20 (nav v5): bumped item height 40 -> 44, font 13.5 -> 14,
 * padding 16 -> 18.  The hover underline is the biggest change:
 *
 *   v4: `left:16px right:16px bottom:6px; height:1px; opacity:.6`
 *        — thin, faint, inset, fade-in.  Read as "this might be clickable".
 *   v5: `left:18px bottom:0; width: 0 -> full; height: 2px; opacity: 1`
 *        — slides in from the left, pins to the bar bottom, full primary.
 *        Reads as "this IS a nav link".
 */
.bb-native-menu-horizontal > .bb-native-menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 18px;
	height: 44px;
	font-family: var(--bb-font-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--bb-color-ink);
	white-space: nowrap;
	position: relative;
	transition: color .15s ease;
}
.bb-native-menu-horizontal > .bb-native-menu-item > a > span {
	display: inline-block;
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Bottom accent bar — width animates from 0 to full, creating a
 * left-to-right slide-in cue.  `right: auto` is required so the `width`
 * animation anchors to the left edge. */
.bb-native-menu-horizontal > .bb-native-menu-item > a::after {
	content: "";
	position: absolute;
	left: 18px; right: auto; bottom: 0;
	width: 0;
	height: 2px;
	background: var(--bb-color-primary);
	opacity: 1;
	transition: width .22s cubic-bezier(.2, .7, .2, 1);
}
.bb-native-menu-horizontal > .bb-native-menu-item:hover > a,
.bb-native-menu-horizontal > .bb-native-menu-item:focus-within > a,
.bb-native-menu-horizontal > .bb-native-menu-item.active > a {
	color: var(--bb-color-primary);
}
.bb-native-menu-horizontal > .bb-native-menu-item:hover > a::after,
.bb-native-menu-horizontal > .bb-native-menu-item:focus-within > a::after,
.bb-native-menu-horizontal > .bb-native-menu-item.active > a::after {
	/* 100% - (left:18 + right:18) = full link width minus padding */
	width: calc(100% - 36px);
}
.bb-native-menu-horizontal .bb-native-chev {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	opacity: .6;
}

/* ---------- Vertical items (used inside allcats panel + mobile drawer) ---------- */
.bb-native-menu-vertical .bb-native-menu-item > a {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	height: auto;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bb-color-ink);
	text-transform: none;
	white-space: normal;
	border-bottom: 1px solid var(--bb-color-line);
	transition: background .15s ease, color .15s ease;
}
.bb-native-menu-vertical .bb-native-menu-item:last-child > a {
	border-bottom: 0;
}
.bb-native-menu-vertical .bb-native-menu-item > a:hover,
.bb-native-menu-vertical .bb-native-menu-item:focus-within > a {
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-primary);
}
.bb-native-menu-vertical .bb-native-menu-item.active > a {
	color: var(--bb-color-primary);
}

/* ---------- Submenu (dropdown from horizontal items) ---------- */
.bb-native-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--bb-color-line);
	box-shadow: var(--bb-shadow);
	padding: 6px 0;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .2s ease, visibility .2s, transform .2s ease;
	z-index: 120;
	flex-direction: column;
	display: flex;
	gap: 0;
}
.bb-native-menu-horizontal > .bb-native-menu-item:hover > .bb-native-submenu,
.bb-native-menu-horizontal > .bb-native-menu-item:focus-within > .bb-native-submenu,
.bb-native-menu-horizontal > .bb-native-menu-item.open > .bb-native-submenu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.bb-native-submenu .bb-native-menu-item > a {
	display: block;
	padding: 9px 18px;
	width: 100%;
	height: auto;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bb-color-ink);
	white-space: normal;
	border-bottom: 0;
}
.bb-native-submenu .bb-native-menu-item > a > span {
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}
.bb-native-submenu .bb-native-menu-item > a:hover {
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-primary);
}
.bb-native-submenu .bb-native-menu-item > a::after {
	display: none;
}
/* Vertical contexts collapse submenus inline (under parent, no floating card) */
.bb-native-menu-vertical .bb-native-menu-item.has-children > .bb-native-submenu {
	position: static;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	background: var(--bb-color-bg-soft);
	opacity: 1; visibility: visible; transform: none;
	display: none;
	padding: 0;
}
.bb-native-menu-vertical .bb-native-menu-item.has-children:hover > .bb-native-submenu,
.bb-native-menu-vertical .bb-native-menu-item.has-children.open > .bb-native-submenu {
	display: flex;
}
/* Third-level submenu (nested) stays inline */
.bb-native-submenu .bb-native-submenu {
	position: static;
	box-shadow: none;
	border: 0;
	background: var(--bb-color-bg-soft);
	opacity: 1; visibility: visible; transform: none;
	padding: 0;
}
.bb-native-chev { flex-shrink: 0; opacity: .7; }

/* All-categories panel reuses the walker's vertical menu */
.bb-native-allcats-panel .bb-native-menu-vertical { display: flex; }

/* ------------------------------------------------------------------
 * Shop panel: 2-level flyout (2026-04-20, nav v5.1)
 *
 * The generic `.bb-native-menu-vertical` rules above collapse second-
 * and third-level items *inline* — hovering a parent just pushes the
 * rest of the list down.  That reads as "accordion" and breaks the
 * mental model of a category browser, which users expect to cascade
 * rightwards (mega-menu / "fly-out" pattern, e.g. classic Porto).
 *
 * These overrides apply ONLY inside `.bb-native-allcats-panel` so the
 * mobile drawer (which genuinely wants vertical accordion behaviour)
 * and other vertical-menu contexts are untouched.  Specificity chain
 * `.bb-native-allcats-panel .bb-native-menu-vertical .has-children…`
 * beats the generic `.bb-native-menu-vertical .has-children…` rules.
 *
 * Layout:
 *   level-1 panel  →  280px, hangs from Shop segment
 *       level-2 submenu  →  flyout right, top-aligned with parent <li>
 *           level-3 submenu  →  flyout right again from its parent
 * ------------------------------------------------------------------ */

/* Right-pointing caret on parent rows to signal "has flyout".  We use a
 * CSS triangle via rotated border so we don't depend on the walker
 * emitting any specific SVG chev for these levels. */
.bb-native-allcats-panel .bb-native-menu-vertical .bb-native-menu-item.has-children > a::after,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children > a::after {
	content: "";
	display: inline-block;
	margin-left: auto;
	margin-right: 2px;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
	flex-shrink: 0;
	transition: opacity .15s ease, transform .15s ease;
	background: transparent;
}
.bb-native-allcats-panel .bb-native-menu-vertical .bb-native-menu-item.has-children:hover > a::after,
.bb-native-allcats-panel .bb-native-menu-vertical .bb-native-menu-item.has-children:focus-within > a::after,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children:hover > a::after,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children:focus-within > a::after {
	opacity: 1;
}

/* Parent row gets a cream highlight while hovered so the user can see
 * which column they're in when the flyout appears. */
.bb-native-allcats-panel .bb-native-menu-vertical .bb-native-menu-item.has-children:hover > a,
.bb-native-allcats-panel .bb-native-menu-vertical .bb-native-menu-item.has-children:focus-within > a,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children:hover > a,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children:focus-within > a {
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-primary);
}

/* Level-2 flyout (second level) — overrides the generic
 *   `.bb-native-menu-vertical .has-children > .submenu { position: static; display: none }`
 * to float to the right as a card. */
.bb-native-allcats-panel .bb-native-menu-vertical > .bb-native-menu-item.has-children > .bb-native-submenu {
	position: absolute;
	top: -8px;
	left: 100%;
	margin-left: 6px;
	min-width: 260px;
	max-width: 320px;
	background: #fff;
	border: 1px solid var(--bb-color-line);
	border-radius: 12px;
	box-shadow: 0 18px 38px -10px rgba(60, 40, 20, 0.22);
	padding: 6px 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	/* 2026-04-20 (nav v5.2): delay the HIDE transition by 140ms so the
	 * flyout stays open long enough for the pointer to cross into it /
	 * across to a sibling column.  The :hover rule below resets the
	 * delay to 0 so showing still feels instant. */
	transition: opacity .2s ease .14s, visibility .2s .14s, transform .2s ease .14s;
	z-index: 130;
}
.bb-native-allcats-panel .bb-native-menu-vertical > .bb-native-menu-item.has-children:hover > .bb-native-submenu,
.bb-native-allcats-panel .bb-native-menu-vertical > .bb-native-menu-item.has-children:focus-within > .bb-native-submenu,
.bb-native-allcats-panel .bb-native-menu-vertical > .bb-native-menu-item.has-children.open > .bb-native-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition-delay: 0s;
}

/* Level-3 flyout (third level) — same flyout pattern, anchored to its
 * level-2 <li> so it cascades one more step rightwards. */
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children > .bb-native-submenu {
	position: absolute;
	top: -8px;
	left: 100%;
	margin-left: 6px;
	min-width: 240px;
	max-width: 300px;
	background: #fff;
	border: 1px solid var(--bb-color-line);
	border-radius: 12px;
	box-shadow: 0 18px 38px -10px rgba(60, 40, 20, 0.22);
	padding: 6px 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity .2s ease .14s, visibility .2s .14s, transform .2s ease .14s;
	z-index: 140;
}
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children:hover > .bb-native-submenu,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children:focus-within > .bb-native-submenu,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children.open > .bb-native-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition-delay: 0s;
}

/* ------------------------------------------------------------------
 * Hover-bridge (2026-04-20, nav v5.2)
 *
 * The flyout cards sit 6px to the right of their parent <li> (via
 * `margin-left: 6px`) — a tiny visual gap that looks airy but, by
 * default, breaks `:hover` the moment the pointer crosses it: the
 * parent <a> loses hover, the flyout isn't hit yet, so the sub-level
 * flyout collapses mid-slide.  User symptom: "二级菜单 鼠标滑动就可以
 * 展开后续的内容" (sliding the mouse should keep expanding further
 * levels, but it closes).
 *
 * Fix: each flyout card gets a transparent `::before` pseudo-element
 * 12px wide, pinned to its own left edge via `right: 100%`, which
 * extends the flyout's hit area backwards across the gap.  The pointer
 * is now *always* on either the parent <li> or the flyout (bridge
 * included), so hover stays continuous and descendants open/stay open
 * naturally.  12px is 2× the gap for a little forgiveness on diagonal
 * slides.
 * ------------------------------------------------------------------ */
.bb-native-allcats-panel .bb-native-menu-vertical > .bb-native-menu-item.has-children > .bb-native-submenu::before,
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item.has-children > .bb-native-submenu::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	width: 12px;
	height: 100%;
	background: transparent;
	/* Bridges don't need pointer events beyond hover; leaving default
	 * `auto` so the flyout's :hover (and thus `:focus-within` on its
	 * parent) is preserved while the cursor is in the gap. */
}

/* Flyout <a> rows look like the level-1 rows (full-width hit area, no
 * cream-fill accordion background that the inline rule forced).  Keep
 * the bottom-bar hint off since we're inside a floating card. */
.bb-native-allcats-panel .bb-native-submenu {
	background: #fff;
}
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item > a {
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--bb-color-ink);
	display: flex;
	align-items: center;
	gap: 6px;
	border-bottom: 0;
}
.bb-native-allcats-panel .bb-native-submenu .bb-native-menu-item > a:hover {
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-primary);
}

/* Fallback <ul class="bb-native-cat-list"> */
.bb-native-cat-list li { border-bottom: 1px solid var(--bb-color-line); }
.bb-native-cat-list li:last-child { border: 0; }
.bb-native-cat-list a { display: block; padding: 10px 16px; font-size: 14px; }
.bb-native-cat-list a:hover { background: var(--bb-color-bg-soft); color: var(--bb-color-primary); }

/* Mobile drawer */
.bb-native-drawer {
	position: fixed; top: 0; left: 0;
	width: min(85vw, 360px); height: 100vh;
	background: #fff;
	box-shadow: var(--bb-shadow);
	transform: translateX(-100%);
	transition: transform .25s ease;
	z-index: 1001;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.bb-native-drawer.open { transform: translateX(0); }
.bb-native-drawer-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--bb-color-line);
	min-height: 64px;
}
.bb-native-drawer-close {
	background: transparent; border: 0;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--bb-radius-sm);
}
.bb-native-drawer-close:hover { background: var(--bb-color-bg-soft); }
.bb-native-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 24px;
}
.bb-native-drawer-body .bb-native-menu-drawer {
	flex-direction: column;
	gap: 0;
}
.bb-native-drawer-body .bb-native-menu-drawer > li > a {
	/* 2026-04-20 (nav UX fix): right padding bumped 16 -> 8 so the
	 * chevron tap zone (styled below) can claim the full right-edge
	 * of the row without squishing the label.  `position: relative`
	 * anchors the absolutely-positioned chevron.  */
	position: relative;
	height: auto;
	padding: 14px 56px 14px 16px;
	width: 100%;
	justify-content: flex-start;
	border-bottom: 1px solid var(--bb-color-line);
}
/*
 * 2026-04-20 (nav UX fix): the chevron is the "expand submenu" tap
 * target inside the drawer.  Previously a naked 14x14 SVG glued to the
 * end of the label, it was indistinguishable from a decoration — users
 * tapped the row expecting to navigate, got the submenu expand instead,
 * and felt the drawer was broken.  We now give it:
 *   • a 48x full-row absolutely positioned hit box (easy thumb target)
 *   • a faint left divider so it *reads* as a separate button
 *   • a 180deg rotation when `.open` as visual feedback
 * The underlying <a href> still navigates; home.js only intercepts when
 * the click actually lands inside this chevron zone.
 */
.bb-native-drawer-body .bb-native-menu-drawer > li > a > .bb-native-chev {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bb-color-ink-mute, #7a6f64);
	border-left: 1px solid var(--bb-color-line);
	transition: transform .2s ease, color .15s ease;
}
.bb-native-drawer-body .bb-native-menu-drawer .bb-native-menu-item.open > a > .bb-native-chev {
	transform: rotate(180deg);
	color: var(--bb-color-primary);
}
.bb-native-drawer-body .bb-native-menu-drawer .bb-native-submenu {
	position: static;
	box-shadow: none;
	border: 0;
	padding: 0 0 0 16px;
	opacity: 1; visibility: visible; transform: none;
	display: none;
	background: var(--bb-color-bg-soft);
}
.bb-native-drawer-body .bb-native-menu-drawer .bb-native-menu-item.open > .bb-native-submenu {
	display: flex;
	flex-direction: column;
}
.bb-native-drawer-meta {
	padding: 16px;
	display: flex; flex-direction: column; gap: 8px;
	font-size: 14px;
	border-top: 1px solid var(--bb-color-line);
}
.bb-native-drawer-meta a {
	display: inline-flex; align-items: center; gap: 8px;
}
.bb-native-drawer-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.4);
	opacity: 0; visibility: hidden;
	transition: opacity .25s, visibility .25s;
	z-index: 1000;
}
.bb-native-drawer-backdrop.open { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------
 * 4.  Main section shell
 * ------------------------------------------------------------------ */
.bb-native-main { display: block; }
.bb-native-section {
	padding: 48px 0;
}
@media (max-width: 767px) {
	.bb-native-section { padding: 32px 0; }
}
.bb-native-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 32px;
	gap: 24px;
	flex-wrap: wrap;
}
.bb-native-section-head--center {
	justify-content: center;
	text-align: center;
}
.bb-native-section-head--center > div { max-width: 640px; margin: 0 auto; }
.bb-native-section-head > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bb-native-section-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	font-weight: 600;
	color: var(--bb-color-accent-warm);
	display: inline-flex; align-items: center; gap: 8px;
}
.bb-native-section-eyebrow::before {
	content: '';
	width: 22px; height: 1px;
	background: var(--bb-color-accent-warm);
	display: inline-block;
}
.bb-native-section-head--center .bb-native-section-eyebrow {
	justify-content: center;
}
.bb-native-section-head--center .bb-native-section-eyebrow::before { display: none; }
.bb-native-section-title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-family: var(--bb-font-display);
	font-weight: 700;
	color: var(--bb-color-ink);
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.01em;
}
.bb-native-section-sub {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--bb-color-ink-soft);
	max-width: 56ch;
	line-height: 1.55;
}
a.bb-native-section-link,
.bb-native-section-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-color-primary);
	padding: 10px 18px;
	border: 1px solid var(--bb-color-line-strong);
	border-radius: 999px;
	background: var(--bb-color-bg-card);
	transition: background .2s, border-color .2s, color .2s, transform .2s;
	flex-shrink: 0;
}
a.bb-native-section-link:hover,
.bb-native-section-link:hover {
	background: var(--bb-color-primary-700);
	color: #ffffff;
	border-color: var(--bb-color-primary-700);
	transform: translateY(-1px);
}
a.bb-native-section-link svg,
.bb-native-section-link svg { transition: transform .2s; }
a.bb-native-section-link:hover svg,
.bb-native-section-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------
 * 5.  Hero
 * ------------------------------------------------------------------ */
.bb-native-hero {
	padding: 20px 0 20px;
	background: var(--bb-color-bg);
}
.bb-native-hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius-xl);
	padding: 32px 28px;
}
@media (min-width: 768px) {
	.bb-native-hero-inner { padding: 48px 48px; }
}
@media (min-width: 992px) {
	.bb-native-hero-inner {
		grid-template-columns: 1.15fr 1fr;
		gap: 56px;
		padding: 64px 64px;
	}
}
.bb-native-hero-eyebrow {
	margin: 0 0 18px;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bb-color-accent-warm);
	display: inline-flex; align-items: center; gap: 12px;
}
.bb-native-hero-eyebrow-line {
	width: 28px; height: 1px;
	background: var(--bb-color-accent-warm);
	display: inline-block;
}
.bb-native-hero-title {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-family: var(--bb-font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--bb-color-ink);
	margin: 0 0 16px;
	min-height: 1.15em;  /* reserve height so font-face swap doesn't cause CLS */
}
.bb-native-hero-sub {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--bb-color-ink-soft);
	max-width: 56ch;
	margin: 0 0 24px;
}
.bb-native-hero-ctas {
	display: flex; flex-wrap: wrap; gap: 12px;
	margin: 0 0 24px;
}
.bb-native-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: 10px;
	border: 1.5px solid transparent;
	text-transform: none;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
	min-height: 50px;
	font-family: var(--bb-font-sans);
}
.bb-native-btn svg { transition: transform .2s; flex-shrink: 0; }
.bb-native-btn:hover svg { transform: translateX(3px); }
.bb-native-btn.bb-native-btn-primary {
	background: var(--bb-color-primary-700);
	color: #ffffff;
	border-color: var(--bb-color-primary-700);
}
.bb-native-btn.bb-native-btn-primary:hover {
	background: var(--bb-color-primary);
	border-color: var(--bb-color-primary);
	color: #ffffff;
}
.bb-native-btn.bb-native-btn-ghost {
	background: transparent;
	color: var(--bb-color-ink);
	border-color: var(--bb-color-line-strong);
}
.bb-native-btn.bb-native-btn-ghost:hover {
	background: var(--bb-color-ink);
	color: #ffffff;
	border-color: var(--bb-color-ink);
}
.bb-native-hero-badges {
	display: flex; flex-direction: column; gap: 12px;
	font-size: 14.5px;
	color: var(--bb-color-ink-soft);
	margin: 0;
}
.bb-native-hero-badges li {
	display: inline-flex; align-items: center; gap: 10px;
}
.bb-native-hero-badges li svg {
	color: var(--bb-color-primary);
	flex-shrink: 0;
	background: rgba(108, 79, 54, .12);
	border-radius: 50%;
	padding: 5px;
	box-sizing: content-box;
}
.bb-native-hero-art img {
	width: 100%; height: auto;
	border-radius: var(--bb-radius-lg);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ------------------------------------------------------------------
 * 6.  Services — premium 4-up card strip with eyebrow + monoline icons
 * ------------------------------------------------------------------ */
.bb-native-services {
	padding: 20px 0 20px;
}
.bb-native-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 576px) {
	.bb-native-services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 992px) {
	.bb-native-services-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}
.bb-native-service {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 24px;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bb-native-service:hover {
	transform: translateY(-2px);
	box-shadow: var(--bb-shadow);
	border-color: var(--bb-color-primary);
}
.bb-native-service-icon {
	width: 52px; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--bb-color-primary-700);
	background: linear-gradient(135deg, var(--bb-color-bg-soft) 0%, rgba(208,178,147,.35) 100%);
	border-radius: 14px;
	flex-shrink: 0;
	transition: background .25s ease, color .25s ease;
}
.bb-native-service:hover .bb-native-service-icon {
	background: linear-gradient(135deg, var(--bb-color-primary-700) 0%, var(--bb-color-primary) 100%);
	color: #ffffff;
}
.bb-native-service-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bb-native-service-eyebrow {
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bb-color-accent-warm);
}
.bb-native-service-title { font-size: 15px; font-weight: 700; color: var(--bb-color-ink); font-family: var(--bb-font-sans); line-height: 1.3; }
.bb-native-service-desc { font-size: 13.5px; color: var(--bb-color-ink-soft); line-height: 1.5; }

/* ------------------------------------------------------------------
 * 6b. Promo banner — featured-collection split card
 * ------------------------------------------------------------------ */
.bb-native-promo {
	padding: 16px 0 24px;
}
.bb-native-promo-card {
	display: grid;
	grid-template-columns: 1fr;
	/* Shares the footer-aligned hero gradient so the homepage promo
	 * card lives in the same warm medium-brown family as every other
	 * dark brown surface on the site (heroes + footer).  Previously
	 * this started at --bb-color-primary-700 (#2e2118, near-black
	 * espresso) which read as a heavy slab next to the cream page
	 * background. */
	background: linear-gradient(135deg, var(--bb-color-hero-from) 0%, var(--bb-color-hero-to) 100%);
	color: #f7f0e8;
	border-radius: var(--bb-radius-xl);
	overflow: hidden;
	box-shadow: var(--bb-shadow);
	position: relative;
}
@media (min-width: 768px) {
	.bb-native-promo-card { grid-template-columns: 1fr 1fr; min-height: 360px; }
}
@media (min-width: 1080px) {
	.bb-native-promo-card { grid-template-columns: 1.1fr 1fr; min-height: 420px; }
}
.bb-native-promo-copy {
	padding: 32px 28px;
	display: flex; flex-direction: column;
	gap: 14px;
	position: relative;
	z-index: 1;
}
@media (min-width: 768px) {
	.bb-native-promo-copy { padding: 48px 44px; gap: 16px; justify-content: center; }
}
@media (min-width: 1080px) {
	.bb-native-promo-copy { padding: 56px 56px; }
}
.bb-native-promo-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	font-weight: 600;
	color: var(--bb-color-footer-accent);
}
.bb-native-promo-tag {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--bb-color-footer-accent);
	color: var(--bb-color-primary-700);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px; font-weight: 700;
	letter-spacing: .02em;
	width: fit-content;
}
.bb-native-promo-title {
	font-family: var(--bb-font-display);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: #ffffff;
	margin: 4px 0 4px;
}
.bb-native-promo-sub {
	font-size: 15.5px;
	line-height: 1.55;
	color: rgba(247, 240, 232, .82);
	margin: 0;
	max-width: 46ch;
}
a.bb-native-promo-cta,
.bb-native-promo-cta {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px;
	background: var(--bb-color-footer-accent);
	color: var(--bb-color-primary-700);
	border-radius: 10px;
	font-weight: 600; font-size: 14.5px;
	border: 1.5px solid var(--bb-color-footer-accent);
	transition: background .2s, color .2s, transform .2s;
	width: fit-content;
	margin-top: 4px;
}
a.bb-native-promo-cta:hover,
.bb-native-promo-cta:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--bb-color-primary-700);
	transform: translateY(-1px);
}
a.bb-native-promo-cta svg,
.bb-native-promo-cta svg { transition: transform .2s; }
a.bb-native-promo-cta:hover svg,
.bb-native-promo-cta:hover svg { transform: translateX(4px); }
.bb-native-promo-badge {
	margin: 6px 0 0;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px;
	color: rgba(247, 240, 232, .72);
}
.bb-native-promo-badge svg {
	color: var(--bb-color-footer-accent);
	flex-shrink: 0;
}
.bb-native-promo-art {
	position: relative;
	min-height: 240px;
	overflow: hidden;
	background: rgba(0,0,0,.18);
}
.bb-native-promo-art img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.bb-native-promo-caption {
	position: absolute;
	right: 16px; bottom: 16px;
	background: rgba(46, 33, 24, .82);
	color: #f7f0e8;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	display: flex; flex-direction: column; gap: 2px;
	backdrop-filter: blur(6px);
}
.bb-native-promo-caption em {
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	color: var(--bb-color-footer-accent);
}

/* ------------------------------------------------------------------
 * 7.  Categories — editorial 6-card layout
 * ------------------------------------------------------------------ */
.bb-native-cat-edit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 576px) { .bb-native-cat-edit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bb-native-cat-edit-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.bb-native-cat-edit-card {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius-lg);
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
	list-style: none;
}
.bb-native-cat-edit-card:hover {
	border-color: var(--bb-color-primary);
	box-shadow: var(--bb-shadow);
	transform: translateY(-3px);
}
.bb-native-cat-edit-link {
	display: flex; flex-direction: column;
	color: var(--bb-color-ink);
	height: 100%;
}
.bb-native-cat-edit-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bb-color-bg-soft);
	position: relative;
}
.bb-native-cat-edit-thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.bb-native-cat-edit-card:hover .bb-native-cat-edit-thumb img {
	transform: scale(1.06);
}
.bb-native-cat-edit-thumb::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(46,33,24,0) 55%, rgba(46,33,24,.25) 100%);
	pointer-events: none;
}
.bb-native-cat-edit-body {
	display: flex; flex-direction: column; gap: 8px;
	padding: 22px 24px 26px;
	flex: 1;
}
.bb-native-cat-edit-eyebrow {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
	color: var(--bb-color-accent-warm);
}
.bb-native-cat-edit-title {
	font-family: var(--bb-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bb-color-ink);
	letter-spacing: -.01em;
}
.bb-native-cat-edit-desc {
	font-size: 14.5px;
	color: var(--bb-color-ink-soft);
	line-height: 1.55;
	margin: 2px 0 8px;
}
.bb-native-cat-edit-cta {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13.5px; font-weight: 600;
	color: var(--bb-color-primary-700);
	padding-top: 6px;
	border-top: 1px solid var(--bb-color-line);
}
.bb-native-cat-edit-cta svg { transition: transform .2s ease; }
.bb-native-cat-edit-card:hover .bb-native-cat-edit-cta svg { transform: translateX(4px); }

/* Legacy small-icon grid — kept for fallback use only */
.bb-native-category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 576px) { .bb-native-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .bb-native-category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .bb-native-category-grid { grid-template-columns: repeat(7, 1fr); } }
.bb-native-category-card { text-align: center; }
.bb-native-category-card a {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: var(--bb-color-ink);
}
.bb-native-category-thumb {
	width: 100%; aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	overflow: hidden;
	transition: transform .2s, border-color .2s, box-shadow .2s;
}
.bb-native-category-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bb-native-category-card a:hover .bb-native-category-thumb {
	transform: translateY(-2px);
	border-color: var(--bb-color-primary);
	box-shadow: var(--bb-shadow-sm);
}
.bb-native-category-name {
	font-size: 13.5px; font-weight: 600; line-height: 1.3;
	color: var(--bb-color-ink);
}

/* ------------------------------------------------------------------
 * 8.  Featured products
 * ------------------------------------------------------------------ */
.bb-native-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
@media (min-width: 576px) { .bb-native-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .bb-native-product-grid { grid-template-columns: repeat(4, 1fr); } }
.bb-native-product-card {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.bb-native-product-card:hover { border-color: var(--bb-color-primary); }
.bb-native-product-card:hover { box-shadow: var(--bb-shadow); transform: translateY(-2px); }
.bb-native-product-card-link {
	display: flex; flex-direction: column;
	color: var(--bb-color-ink);
}
.bb-native-product-card-thumb {
	position: relative;
	display: block;
	background: var(--bb-color-bg-soft);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.bb-native-product-card-thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.bb-native-product-card:hover .bb-native-product-card-thumb img {
	transform: scale(1.06);
}
.bb-native-product-card-badge {
	position: absolute; top: 12px; left: 12px;
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--bb-color-accent-warm); color: #fff;
	font-size: 11px; font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	z-index: 2;
}
.bb-native-product-card-badge svg { flex-shrink: 0; }
.bb-native-product-card-overlay {
	position: absolute; inset: 0;
	display: flex; align-items: flex-end; justify-content: center;
	padding: 16px;
	background: linear-gradient(180deg, rgba(46,33,24,0) 40%, rgba(46,33,24,.55) 100%);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
.bb-native-product-card:hover .bb-native-product-card-overlay {
	opacity: 1;
}
.bb-native-product-card-overlay-cta {
	display: inline-flex; align-items: center; gap: 6px;
	background: #ffffff;
	color: var(--bb-color-primary-700);
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	box-shadow: 0 2px 12px rgba(0,0,0,.14);
	transform: translateY(8px);
	transition: transform .25s ease;
}
.bb-native-product-card:hover .bb-native-product-card-overlay-cta {
	transform: translateY(0);
}
.bb-native-product-card-body {
	display: flex; flex-direction: column; gap: 4px;
	padding: 16px 14px 8px;
}
.bb-native-product-card-cat {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bb-color-accent-warm);
	margin-bottom: 2px;
}
.bb-native-product-card-title {
	font-size: 14.5px; font-weight: 600;
	line-height: 1.35;
	color: var(--bb-color-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	font-family: var(--bb-font-sans);
}
.bb-native-product-card-price {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--bb-color-primary-700);
	font-family: var(--bb-font-display);
}
.bb-native-product-card-price .woocommerce-Price-amount { color: var(--bb-color-primary-700); }
.bb-native-product-card-price del { color: var(--bb-color-muted); font-weight: 400; margin-right: 6px; font-size: 13px; }
.bb-native-product-card-price ins { text-decoration: none; color: var(--bb-color-accent-warm); }
a.bb-native-product-card-atc,
.bb-native-product-card-atc {
	margin: 4px 14px 14px;
	padding: 11px 12px;
	background: transparent;
	color: var(--bb-color-primary-700);
	border: 1.5px solid var(--bb-color-line-strong);
	border-radius: 8px;
	font-size: 13px; font-weight: 600;
	text-align: center;
	text-transform: none;
	letter-spacing: .01em;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	transition: background .2s, color .2s, border-color .2s;
}
a.bb-native-product-card-atc:hover,
.bb-native-product-card-atc:hover {
	background: var(--bb-color-primary-700);
	color: #ffffff;
	border-color: var(--bb-color-primary-700);
}
.bb-native-product-card-atc.loading { opacity: .7; pointer-events: none; }
.bb-native-product-card-atc.added { background: #28a745; }

/* ------------------------------------------------------------------
 * 9.  Testimonials
 * ------------------------------------------------------------------ */
.bb-native-testimonials { background: var(--bb-color-bg-soft); }
.bb-native-testimonial-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) { .bb-native-testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.bb-native-testimonial {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius-lg);
	padding: 32px 28px 28px;
	box-shadow: var(--bb-shadow-sm);
	display: flex; flex-direction: column; gap: 16px;
	position: relative;
	transition: border-color .25s, transform .25s, box-shadow .25s;
}
.bb-native-testimonial:hover {
	border-color: var(--bb-color-primary);
	transform: translateY(-2px);
	box-shadow: var(--bb-shadow);
}
.bb-native-testimonial-quotemark {
	position: absolute;
	top: 8px; right: 22px;
	font-family: var(--bb-font-display);
	font-size: 72px;
	line-height: 1;
	color: var(--bb-color-accent-warm);
	opacity: .18;
	pointer-events: none;
	user-select: none;
}
.bb-native-testimonial-stars {
	display: inline-flex; gap: 3px;
	color: var(--bb-color-accent-warm);
}
.bb-native-testimonial-stars svg { fill: var(--bb-color-accent-warm); stroke: var(--bb-color-accent-warm); }
.bb-native-testimonial-quote {
	margin: 0;
	font-size: 15px;
	color: var(--bb-color-ink);
	line-height: 1.6;
	font-family: var(--bb-font-display);
	font-weight: 400;
	font-style: italic;
}
.bb-native-testimonial-cite {
	display: flex; align-items: center; gap: 12px;
	font-size: 13px;
	color: var(--bb-color-muted);
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--bb-color-line);
}
.bb-native-testimonial-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bb-color-primary-700), var(--bb-color-primary));
	color: #ffffff;
	font-weight: 700;
	font-family: var(--bb-font-display);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}
.bb-native-testimonial-cite-text { display: flex; flex-direction: column; gap: 1px; }
.bb-native-testimonial-cite-text strong { color: var(--bb-color-ink); font-size: 14px; font-weight: 700; }

/* ------------------------------------------------------------------
 * 10.  FAQ
 * ------------------------------------------------------------------ */
.bb-native-faq-list {
	max-width: 860px;
	margin: 0 auto;
	display: flex; flex-direction: column; gap: 12px;
}
.bb-native-faq-item {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	transition: border-color .2s, box-shadow .2s;
}
.bb-native-faq-item[open] {
	border-color: var(--bb-color-primary);
	box-shadow: var(--bb-shadow-sm);
}
.bb-native-faq-q {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-size: 15.5px; font-weight: 600;
	color: var(--bb-color-ink);
	cursor: pointer;
	list-style: none;
	font-family: var(--bb-font-sans);
}
.bb-native-faq-q::-webkit-details-marker { display: none; }
.bb-native-faq-chev {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-primary-700);
	transition: transform .25s ease, background .2s ease;
	flex-shrink: 0;
}
.bb-native-faq-item[open] .bb-native-faq-chev {
	transform: rotate(180deg);
	background: var(--bb-color-primary-700);
	color: #ffffff;
}
.bb-native-faq-a {
	padding: 0 24px 22px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--bb-color-ink-soft);
}

/* ------------------------------------------------------------------
 * 11.  Blog teaser + /blog/ archive + single post
 *
 * 2026-04-20 (v4): Full editorial system.  Shared card component with
 * three variants (featured / grid / compact) drives:
 *   - the homepage teaser (1 featured + 3 compact editorial list + 3 grid)
 *   - the /blog/ archive (1 featured + N-in-grid + pagination)
 *   - related-articles block on single posts
 *
 * All three pages pull from the same bb_home_native_render_post_card()
 * helper so a tweak here reaches the whole editorial surface at once.
 * ------------------------------------------------------------------ */

/* ---------- Shared card component ---------- */
.bb-native-blog-card {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	display: block;
	height: 100%;
}
.bb-native-blog-card:hover {
	box-shadow: var(--bb-shadow);
	transform: translateY(-2px);
	border-color: var(--bb-color-primary);
}
.bb-native-blog-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}
.bb-native-blog-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--bb-color-bg-soft);
	overflow: hidden;
}
.bb-native-blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.bb-native-blog-card:hover .bb-native-blog-card-thumb img { transform: scale(1.04); }

/* --------------------------------------------------------------
 * Auto-generated magazine cover for posts without a featured image.
 *
 * Every post in BuildBarn's "Expert Guides" family is auto-classified
 * into one of 8 topic buckets (decking / fencing / timber / pergola /
 * retaining / steel / permits / delivery).  Each topic owns a distinct
 * 2-stop gradient, icon, and typographic lockup — the result is a
 * branded cover that reads as "designed", not "placeholder", even
 * though 100% of it is CSS + SVG.
 *
 * Structure (emitted from bb_home_native_render_post_card):
 *   <span.bb-native-cover bb-native-cover--decking>
 *     <span.bb-native-cover-grid>    <- faint diagonal pattern
 *     <span.bb-native-cover-icon>    <- big centered SVG icon
 *     <span.bb-native-cover-label>
 *       <span.bb-native-cover-label-topic>DECKING</span>
 *       <span.bb-native-cover-label-sub>PLANNING</span>   (first word of title)
 *     </span>
 *     <span.bb-native-cover-mark>BuildBarn</span>          <- corner watermark
 *   </span>
 * -------------------------------------------------------------- */
.bb-native-blog-card-thumb-placeholder {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.bb-native-cover {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	/* Defaults get overridden by the per-palette modifier below. */
	--cover-from: #6c4f36;
	--cover-to:   #3e2c1e;
	--cover-accent: rgba(255, 255, 255, 0.16);
	--cover-motif: rgba(255, 255, 255, 0.55);
	background: linear-gradient(135deg, var(--cover-from) 0%, var(--cover-to) 100%);
}
/* Full-bleed SVG topic motif (planks, pickets, rings, brick, mesh…).
 * `color` feeds `currentColor` inside the SVG so each palette controls
 * the motif tint. */
.bb-native-cover-motif {
	position: absolute;
	inset: 0;
	pointer-events: none;
	color: var(--cover-motif);
	opacity: .85;
	mix-blend-mode: soft-light;
}
.bb-native-cover-motif svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* Overlay texture layer — radial warm-light accent + light diagonal sheen. */
.bb-native-cover-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 88% 12%, var(--cover-accent) 0%, transparent 60%),
		radial-gradient(circle at 8% 92%, rgba(0, 0, 0, 0.28) 0%, transparent 55%),
		linear-gradient(135deg, transparent 0%, transparent 48%, rgba(255, 255, 255, 0.06) 50%, transparent 52%, transparent 100%);
	mix-blend-mode: overlay;
	opacity: .95;
}
/* Thin corner frame lines — blueprint / editorial feel.  Implemented
 * with two pseudo-elements on the cover itself, one for TL and one
 * for BR, each drawn as an L-shape via border-top + border-left. */
.bb-native-cover::before,
.bb-native-cover::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0.35);
	border-style: solid;
	border-width: 0;
}
.bb-native-cover::before {
	top: 10px;
	left: 10px;
	border-top-width: 1px;
	border-left-width: 1px;
}
.bb-native-cover::after {
	right: 10px;
	bottom: 10px;
	border-bottom-width: 1px;
	border-right-width: 1px;
}
.bb-native-cover-icon {
	position: absolute;
	top: 18px;
	right: 22px;
	color: rgba(255, 255, 255, 0.42);
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}
.bb-native-cover-icon svg {
	stroke-width: 1.1;
}
.bb-native-cover-label {
	position: absolute;
	left: 20px;
	bottom: 18px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	line-height: 1;
}
.bb-native-cover-label-topic {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	color: rgba(255, 255, 255, 0.78);
	text-transform: uppercase;
	/* Small decorative rule to the left of the topic label. */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
}
.bb-native-cover-label-topic::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	background: rgba(255, 255, 255, 0.6);
}
.bb-native-cover-label-sub {
	font-size: clamp(22px, 3.6vw, 30px);
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
	/* Clip long words that would blow out a narrow card. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bb-native-cover-mark {
	position: absolute;
	top: 14px;
	left: 22px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}
.bb-native-cover-num {
	position: absolute;
	top: 14px;
	right: 22px;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	/* Nudge the icon down so it doesn't collide with the pill. */
}
/* When the num pill is present, shift the top-right icon DOWN so both
 * can coexist in the same corner without overlap. */
.bb-native-cover-num + .bb-native-cover-icon {
	top: 46px;
}

/* Compact variant (horizontal list rows) — tighter layout, no sub-label. */
.bb-native-blog-card--compact .bb-native-cover-label { left: 12px; bottom: 10px; right: 12px; }
.bb-native-blog-card--compact .bb-native-cover-label-topic { font-size: 9.5px; letter-spacing: .18em; }
.bb-native-blog-card--compact .bb-native-cover-label-topic::before { width: 14px; }
.bb-native-blog-card--compact .bb-native-cover-mark { display: none; }
.bb-native-blog-card--compact .bb-native-cover-num { display: none; }
.bb-native-blog-card--compact .bb-native-cover-icon { top: 8px; right: 10px; opacity: .9; }
.bb-native-blog-card--compact .bb-native-cover::before,
.bb-native-blog-card--compact .bb-native-cover::after { width: 18px; height: 18px; }

/* Featured variant (homepage hero card) — bigger lockup. */
.bb-native-blog-card--featured .bb-native-cover-label { left: 34px; bottom: 32px; right: 34px; gap: 10px; }
.bb-native-blog-card--featured .bb-native-cover-label-topic { font-size: 13px; letter-spacing: .26em; }
.bb-native-blog-card--featured .bb-native-cover-label-topic::before { width: 32px; }
.bb-native-blog-card--featured .bb-native-cover-label-sub { font-size: clamp(32px, 4.6vw, 48px); }
.bb-native-blog-card--featured .bb-native-cover-icon { top: 32px; right: 36px; }
.bb-native-blog-card--featured .bb-native-cover-num + .bb-native-cover-icon { top: 62px; }
.bb-native-blog-card--featured .bb-native-cover-mark { top: 28px; left: 36px; font-size: 11.5px; }
.bb-native-blog-card--featured .bb-native-cover-num { top: 28px; right: 36px; padding: 4px 10px; font-size: 10.5px; }
.bb-native-blog-card--featured .bb-native-cover::before { top: 18px; left: 18px; width: 44px; height: 44px; }
.bb-native-blog-card--featured .bb-native-cover::after  { right: 18px; bottom: 18px; width: 44px; height: 44px; }

/* ----- 9 topic palettes — each defines from/to/accent/motif tone ----- */
.bb-native-cover--decking { --cover-from: #8a5a33; --cover-to: #3a2414; --cover-accent: rgba(255, 206, 140, 0.28); --cover-motif: rgba(255, 210, 160, 0.5); }
.bb-native-cover--fencing { --cover-from: #2f3a46; --cover-to: #15202e; --cover-accent: rgba(120, 180, 220, 0.22); --cover-motif: rgba(180, 210, 240, 0.55); }
.bb-native-cover--timber  { --cover-from: #a06e3c; --cover-to: #3d2611; --cover-accent: rgba(255, 220, 140, 0.3);  --cover-motif: rgba(255, 230, 180, 0.55); }
.bb-native-cover--pergola { --cover-from: #6b3a2a; --cover-to: #2b1410; --cover-accent: rgba(255, 180, 140, 0.24); --cover-motif: rgba(255, 200, 170, 0.5); }
.bb-native-cover--retain  { --cover-from: #5e5248; --cover-to: #241d16; --cover-accent: rgba(220, 210, 200, 0.2);  --cover-motif: rgba(230, 220, 205, 0.48); }
.bb-native-cover--steel   { --cover-from: #3c4651; --cover-to: #181e26; --cover-accent: rgba(180, 200, 220, 0.22); --cover-motif: rgba(200, 220, 235, 0.55); }
.bb-native-cover--permit  { --cover-from: #3f4a2e; --cover-to: #15190d; --cover-accent: rgba(200, 220, 160, 0.22); --cover-motif: rgba(220, 230, 180, 0.5); }
.bb-native-cover--service { --cover-from: #6c4f36; --cover-to: #2b1a0d; --cover-accent: rgba(255, 220, 180, 0.26); --cover-motif: rgba(255, 225, 190, 0.52); }
.bb-native-cover--default { --cover-from: #6c4f36; --cover-to: #3e2c1e; --cover-accent: rgba(255, 255, 255, 0.18); --cover-motif: rgba(255, 255, 255, 0.42); }

/* Category chip, sits on the thumb top-left. */
.bb-native-blog-card-chip {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--bb-color-primary);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(95, 70, 50, 0.08);
}

.bb-native-blog-card-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}
.bb-native-blog-card-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--bb-color-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.bb-native-blog-card-meta-dot { opacity: .6; }
.bb-native-blog-card-title {
	font-size: 1.1rem;
	line-height: 1.3;
	margin: 0;
	color: var(--bb-color-ink);
	/* 2-line clamp so titles stay consistent across a row. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bb-native-blog-card:hover .bb-native-blog-card-title { color: var(--bb-color-primary); }
.bb-native-blog-card-excerpt {
	margin: 0;
	font-size: 13.5px;
	color: var(--bb-color-ink-soft);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bb-native-blog-card-cta {
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--bb-color-primary);
}

/* ---------- Variant: featured (magazine lead) ---------- */
.bb-native-blog-card--featured .bb-native-blog-card-link {
	display: grid;
	grid-template-columns: 1fr;
}
.bb-native-blog-card--featured .bb-native-blog-card-thumb {
	aspect-ratio: 16 / 10;
}
.bb-native-blog-card--featured .bb-native-blog-card-title {
	font-size: 1.6rem;
	-webkit-line-clamp: 3;
	line-height: 1.22;
}
.bb-native-blog-card--featured .bb-native-blog-card-excerpt {
	font-size: 15px;
	-webkit-line-clamp: 4;
}
.bb-native-blog-card--featured .bb-native-blog-card-body {
	padding: 24px 26px 26px;
	gap: 10px;
}
@media (min-width: 768px) {
	.bb-native-blog-card--featured .bb-native-blog-card-link {
		grid-template-columns: 1.15fr 1fr;
	}
	.bb-native-blog-card--featured .bb-native-blog-card-thumb {
		aspect-ratio: auto;
		height: 100%;
		min-height: 320px;
	}
}

/* ---------- Variant: compact (horizontal list row) ---------- */
.bb-native-blog-card--compact {
	background: transparent;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--bb-color-line);
	box-shadow: none !important;
	transform: none !important;
}
.bb-native-blog-card--compact:last-child { border-bottom: 0; }
.bb-native-blog-card--compact .bb-native-blog-card-link {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 14px;
	padding: 14px 0;
}
.bb-native-blog-card--compact .bb-native-blog-card-thumb {
	aspect-ratio: 1 / 1;
	border-radius: var(--bb-radius-sm);
	align-self: start;
}
.bb-native-blog-card--compact .bb-native-blog-card-chip { display: none; }
.bb-native-blog-card--compact .bb-native-blog-card-body {
	padding: 0;
	gap: 6px;
}
.bb-native-blog-card--compact .bb-native-blog-card-title {
	font-size: 0.98rem;
	-webkit-line-clamp: 3;
	line-height: 1.35;
}

/* ---------- Homepage teaser layout (1 featured + 3 compact + 3 grid) ---------- */
.bb-native-blog-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
@media (min-width: 1024px) {
	.bb-native-blog-layout {
		grid-template-columns: 1.45fr 1fr;
		gap: 32px;
		align-items: stretch;
	}
}
.bb-native-blog-layout-featured { display: flex; }
.bb-native-blog-layout-featured > .bb-native-blog-card { width: 100%; }
.bb-native-blog-layout-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	padding: 6px 18px;
}
.bb-native-blog-layout-list > li { list-style: none; }

/* ---------- Grid used under the teaser + on /blog/ archive ---------- */
.bb-native-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bb-native-blog-grid > li { list-style: none; }
@media (min-width: 768px)  { .bb-native-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1024px) { .bb-native-blog-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

/* ==================================================================
 * /blog/ archive — hero banner + filter bar + grid
 *
 * Hero rebuilt 2026-04-20 for contrast:
 *   - base is a deeper 2-stop warm-brown ramp (was 135° 0.92 → 0.95 on
 *     primary, which flattened on small screens and washed out the
 *     sub-copy).
 *   - a decorative pattern layer (diagonal hatch + corner radial
 *     highlight) sits beneath the text, giving white copy something
 *     to visually anchor against without needing a photo background.
 *   - all text is now opaque #fff (no more rgba dimming) with a weak
 *     text-shadow for extra clarity on the lightest hero stripe; the
 *     eyebrow/crumb uppercase text is sized & tracked to hit AA at
 *     sub-14px sizes.
 * ================================================================== */
.bb-native-blog-hero {
	position: relative;
	isolation: isolate;
	/* Warm medium-brown, aligned to the footer palette so the page
	 * visually opens and closes with the same tone. */
	background: linear-gradient(135deg, var(--bb-color-hero-from) 0%, var(--bb-color-hero-to) 100%);
	color: #fff;
	padding: 88px 0 96px;
	text-align: center;
	overflow: hidden;
}
.bb-native-blog-hero::before,
.bb-native-blog-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.bb-native-blog-hero::before {
	/* Overlay strength tuned for the lighter footer-aligned base:
	 * the top-right warm highlight stays at the same opacity so the
	 * hero keeps its "sunlit" feel, but the bottom-left dark well is
	 * halved (.55 -> .28) so it no longer reads as a near-black bruise
	 * against the new medium-brown gradient. */
	background-image:
		radial-gradient(circle at 90% 10%, rgba(255, 200, 140, 0.22) 0%, transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(50, 32, 18, 0.28) 0%, transparent 55%);
}
.bb-native-blog-hero::after {
	background-image: repeating-linear-gradient(135deg,
		rgba(255, 255, 255, 0.04) 0 1px,
		transparent 1px 26px);
	opacity: .55;
}
.bb-native-blog-hero > * { position: relative; z-index: 1; }
.bb-native-blog-hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	opacity: .92;
	margin: 0 0 14px;
}
.bb-native-blog-hero-title {
	font-size: clamp(2.1rem, 4.8vw, 3.25rem);
	line-height: 1.08;
	margin: 0 0 16px;
	color: #fff;
	font-weight: 700;
	letter-spacing: -.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.bb-native-blog-hero-sub {
	max-width: 680px;
	margin: 0 auto;
	font-size: 1.06rem;
	line-height: 1.6;
	color: #fff;
	opacity: .94;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.bb-native-blog-crumbs {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	opacity: .88;
}
.bb-native-blog-crumbs li { display: inline-flex; align-items: center; }
.bb-native-blog-crumbs li::after { content: "/"; margin-left: 10px; opacity: .55; }
.bb-native-blog-crumbs li:last-child::after { content: none; }
.bb-native-blog-crumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 1px;
	transition: border-color .15s ease;
}
.bb-native-blog-crumbs a:hover { border-color: #fff; }

.bb-native-blog-toolbar {
	/* Floats on top of the hero bottom edge via a negative top margin.
	 * Needs position + z-index: because .bb-native-blog-hero is a
	 * positioned stacking context (position: relative + isolation:
	 * isolate), its background and ::before/::after decoration would
	 * otherwise paint ABOVE this non-positioned sibling and visually
	 * swallow the search box. position:relative + z-index:2 lifts the
	 * toolbar back above the hero in the parent's stacking order. */
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	margin: -32px 0 28px;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
}
.bb-native-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bb-native-blog-filter > li { list-style: none; }
.bb-native-blog-filter a {
	display: inline-block;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--bb-color-ink);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bb-native-blog-filter a:hover {
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-primary);
}
.bb-native-blog-filter a.is-active {
	background: var(--bb-color-primary);
	color: #fff;
	border-color: var(--bb-color-primary);
}
.bb-native-blog-search {
	display: flex;
	align-items: center;
	gap: 0;
	min-width: 220px;
}
.bb-native-blog-search input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--bb-color-line);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	font-size: 13.5px;
	background: #fff;
	color: var(--bb-color-ink);
}
.bb-native-blog-search input:focus {
	outline: 2px solid var(--bb-color-primary);
	outline-offset: -1px;
}
.bb-native-blog-search button {
	padding: 8px 16px;
	background: var(--bb-color-primary);
	color: #fff;
	border: 0;
	border-radius: 0 8px 8px 0;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}
.bb-native-blog-search button:hover { background: var(--bb-color-primary-700); }

.bb-native-blog-archive-featured { margin-bottom: 36px; }
.bb-native-blog-archive-empty {
	text-align: center;
	padding: 80px 20px;
	color: var(--bb-color-ink-soft);
}

/* Pagination reuses the existing bb-native-pagination styles. */

/* ==================================================================
 * Single article page
 * ================================================================== */
.bb-native-article-hero {
	background: var(--bb-color-bg-card);
	border-bottom: 1px solid var(--bb-color-line);
	padding: 40px 0 32px;
}
.bb-native-article-hero-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.bb-native-article-crumbs {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bb-color-muted);
}
.bb-native-article-crumbs li::after { content: "/"; margin-left: 8px; opacity: .5; }
.bb-native-article-crumbs li:last-child::after { content: none; }
.bb-native-article-crumbs a { color: inherit; }
.bb-native-article-crumbs a:hover { color: var(--bb-color-primary); }
.bb-native-article-hero-chip {
	display: inline-block;
	padding: 5px 14px;
	margin-bottom: 14px;
	background: var(--bb-color-primary);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.bb-native-article-hero-title {
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.12;
	margin: 0 0 18px;
	color: var(--bb-color-ink);
}
.bb-native-article-hero-meta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--bb-color-ink-soft);
	font-size: 14px;
}
.bb-native-article-hero-meta-dot { opacity: .5; }
.bb-native-article-hero-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bb-color-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}
.bb-native-article-hero-image {
	margin: 28px auto 0;
	max-width: 1120px;
	padding: 0 20px;
}
.bb-native-article-hero-image img {
	width: 100%;
	height: auto;
	border-radius: var(--bb-radius-lg);
	box-shadow: var(--bb-shadow);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bb-native-article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding: 48px 0 60px;
}
@media (min-width: 1024px) {
	.bb-native-article-layout {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 56px;
	}
}

/* ---------- Article body prose (WP the_content) ---------- */
.bb-native-article-body {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--bb-color-ink);
}
.bb-native-article-body > :first-child { margin-top: 0; }
.bb-native-article-body > :last-child  { margin-bottom: 0; }
.bb-native-article-body p {
	margin: 0 0 1.4em;
}
.bb-native-article-body h2 {
	scroll-margin-top: 90px;
	margin: 2.4em 0 .9em;
	font-size: 1.75rem;
	line-height: 1.22;
	padding-bottom: .35em;
	border-bottom: 1px solid var(--bb-color-line);
	color: var(--bb-color-ink);
}
.bb-native-article-body h3 {
	scroll-margin-top: 90px;
	margin: 2em 0 .6em;
	font-size: 1.3rem;
	line-height: 1.3;
	color: var(--bb-color-ink);
}
.bb-native-article-body h4 {
	margin: 1.6em 0 .5em;
	font-size: 1.08rem;
	color: var(--bb-color-ink);
}
.bb-native-article-body a {
	color: var(--bb-color-primary);
	text-decoration: underline;
	text-decoration-color: rgba(108, 79, 54, 0.35);
	text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
.bb-native-article-body a:hover {
	color: var(--bb-color-accent-warm);
	text-decoration-color: currentColor;
}
.bb-native-article-body ul,
.bb-native-article-body ol {
	margin: 0 0 1.4em;
	padding-left: 1.6em;
}
.bb-native-article-body li { margin: 0 0 .5em; }
.bb-native-article-body blockquote {
	margin: 1.6em 0;
	padding: .4em 1.4em;
	border-left: 3px solid var(--bb-color-primary);
	color: var(--bb-color-ink-soft);
	font-style: italic;
	font-size: 1.05em;
}
.bb-native-article-body img,
.bb-native-article-body figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	margin: 1.4em 0;
}
.bb-native-article-body figure {
	margin: 1.6em 0;
}
.bb-native-article-body figcaption {
	margin-top: .6em;
	font-size: .85em;
	color: var(--bb-color-muted);
	text-align: center;
}
.bb-native-article-body pre {
	background: var(--bb-color-bg-soft);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius-sm);
	padding: 1em 1.2em;
	overflow-x: auto;
	font-size: .9em;
}
.bb-native-article-body code {
	background: var(--bb-color-bg-soft);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .88em;
}
.bb-native-article-body pre code { background: transparent; padding: 0; }
.bb-native-article-body hr {
	border: 0;
	border-top: 1px solid var(--bb-color-line);
	margin: 2.4em 0;
}

/* ---------- Sidebar (TOC + share) ---------- */
.bb-native-article-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 1024px) {
	.bb-native-article-sidebar {
		position: sticky;
		top: 90px;
		align-self: start;
	}
}
.bb-native-article-toc,
.bb-native-article-share {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	padding: 18px 20px;
}
.bb-native-article-toc-title {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bb-color-muted);
}
.bb-native-article-toc-list,
.bb-native-article-toc-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: bb-toc;
}
.bb-native-article-toc-sublist {
	margin: 6px 0 8px 14px;
	padding-left: 10px;
	border-left: 1px solid var(--bb-color-line);
}
.bb-native-article-toc-item {
	margin: 0;
	line-height: 1.4;
}
.bb-native-article-toc-item--h2 { counter-increment: bb-toc; }
.bb-native-article-toc-item--h2 > a {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-color-ink);
}
.bb-native-article-toc-item--h2 > a::before {
	content: counter(bb-toc, decimal-leading-zero) ".";
	color: var(--bb-color-primary);
	font-weight: 700;
	margin-right: 8px;
}
.bb-native-article-toc-item--h3 > a {
	display: block;
	padding: 4px 0;
	font-size: 13px;
	color: var(--bb-color-ink-soft);
}
.bb-native-article-toc a:hover { color: var(--bb-color-primary); }

.bb-native-article-share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.bb-native-article-share-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bb-color-muted);
	margin-right: 4px;
}
.bb-native-article-share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bb-color-bg-soft);
	color: var(--bb-color-ink);
	border: 0;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	position: relative;
}
.bb-native-article-share-link:hover {
	background: var(--bb-color-primary);
	color: #fff;
}
.bb-native-article-share-copy-hint {
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bb-color-ink);
	color: #fff;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.bb-native-article-share-link.is-copied .bb-native-article-share-copy-hint { opacity: 1; }

/* ---------- Post-article engagement stack ---------- */
.bb-native-article-after {
	padding: 20px 0 60px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.bb-native-article-cta {
	background: linear-gradient(135deg, var(--bb-color-primary) 0%, var(--bb-color-primary-700) 100%);
	color: #fff;
	border-radius: var(--bb-radius-lg);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
	box-shadow: var(--bb-shadow);
}
@media (min-width: 768px) {
	.bb-native-article-cta {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		padding: 36px 40px;
	}
}
.bb-native-article-cta h3 { margin: 0; font-size: 1.4rem; color: #fff; line-height: 1.25; }
.bb-native-article-cta p  { margin: 6px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 14.5px; }
.bb-native-article-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bb-native-article-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	border-radius: 999px;
	background: #fff;
	color: var(--bb-color-primary);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	transition: transform .15s ease, background .15s ease;
}
.bb-native-article-cta-btn:hover { transform: translateY(-2px); background: var(--bb-color-bg-card); }
.bb-native-article-cta-btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.bb-native-article-cta-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.bb-native-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.bb-native-article-tags-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bb-color-muted);
	margin-right: 4px;
}
.bb-native-article-tags a {
	display: inline-block;
	padding: 5px 12px;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: 999px;
	font-size: 12.5px;
	color: var(--bb-color-ink);
}
.bb-native-article-tags a:hover {
	background: var(--bb-color-primary);
	color: #fff;
	border-color: var(--bb-color-primary);
}

.bb-native-article-related-head {
	margin: 0 0 20px;
}
.bb-native-article-related-head .bb-native-section-title {
	font-size: 1.6rem;
}

.bb-native-article-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bb-color-primary);
	font-weight: 600;
}
.bb-native-article-back:hover { color: var(--bb-color-accent-warm); }

/* ------------------------------------------------------------------
 * 12.  Footer
 * ------------------------------------------------------------------ */
.bb-native-footer {
	background: var(--bb-color-footer-bg);
	color: var(--bb-color-footer-text);
	margin-top: 40px;
}
.bb-native-footer a { color: var(--bb-color-footer-link); }
.bb-native-footer a:hover { color: var(--bb-color-footer-link-hover); }
.bb-native-footer-newsletter {
	padding: 48px 0 36px;
	border-bottom: 1px solid var(--bb-color-footer-divider);
}
.bb-native-footer-newsletter-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}
@media (min-width: 992px) {
	.bb-native-footer-newsletter-inner {
		grid-template-columns: 1fr 2fr;
		gap: 40px;
	}
}
.bb-native-footer-newsletter-copy {
	display: flex; align-items: center; gap: 16px;
	color: var(--bb-color-footer-text);
}
.bb-native-footer-newsletter-icon {
	color: var(--bb-color-footer-accent);
	flex-shrink: 0;
}
.bb-native-footer-newsletter-title {
	font-family: var(--bb-font-display);
	font-size: 20px; font-weight: 700; margin: 0 0 4px;
	color: var(--bb-color-footer-text);
}
.bb-native-footer-newsletter-sub {
	font-size: 13.5px;
	color: var(--bb-color-footer-muted);
	margin: 0;
}
.bb-native-footer-newsletter-form .wpcf7-form,
.bb-native-footer-newsletter-fallback {
	display: flex;
	gap: 0;
	height: 48px;
}
.bb-native-footer-newsletter-form .wysija-paragraph {
	flex: 1;
}
.bb-native-footer-newsletter-form input[type=email],
.bb-native-footer-newsletter-fallback input[type=email] {
	width: 100%;
	height: 48px;
	border: 1px solid rgba(255,255,255,.22);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	padding: 0 16px;
	font-size: 14px;
	background: rgba(255,255,255,.08);
	color: var(--bb-color-footer-text);
}
.bb-native-footer-newsletter-form input[type=email]::placeholder,
.bb-native-footer-newsletter-fallback input[type=email]::placeholder {
	color: var(--bb-color-footer-muted);
}
.bb-native-footer-newsletter-form input[type=email]:focus,
.bb-native-footer-newsletter-fallback input[type=email]:focus {
	outline: none;
	border-color: var(--bb-color-footer-accent);
	background: rgba(255,255,255,.14);
}
.bb-native-footer-newsletter-form input[type=submit],
.bb-native-footer-newsletter-form button[type=submit],
.bb-native-footer-newsletter-fallback button[type=submit] {
	height: 48px;
	background: var(--bb-color-footer-accent);
	color: var(--bb-color-primary-700);
	border: 0;
	padding: 0 28px;
	font-weight: 600;
	font-size: 14px;
	border-radius: 0 8px 8px 0;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.bb-native-footer-newsletter-form input[type=submit]:hover,
.bb-native-footer-newsletter-form button[type=submit]:hover,
.bb-native-footer-newsletter-fallback button[type=submit]:hover {
	background: #ffffff;
	color: var(--bb-color-primary-700);
}
.bb-native-footer-newsletter-form .wpcf7-response-output,
.bb-native-footer-newsletter-form .wpcf7-not-valid-tip {
	font-size: 12px; color: #a00; margin: 8px 0 0;
}

.bb-native-footer-grid-section { padding: 48px 0; }
.bb-native-footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
@media (min-width: 768px) { .bb-native-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .bb-native-footer-grid { grid-template-columns: repeat(5, 1fr); } }
.bb-native-footer-col {
	display: flex; flex-direction: column; gap: 12px;
}
.bb-native-footer-col-about { grid-column: 1 / -1; }
@media (min-width: 1080px) { .bb-native-footer-col-about { grid-column: auto; } }
.bb-native-footer-address {
	font-family: var(--bb-font-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--bb-color-footer-text);
	margin: 0 0 4px;
	line-height: 1.45;
}
.bb-native-footer-phone {
	margin: 0 0 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bb-color-footer-accent);
}
.bb-native-footer-phone a { color: var(--bb-color-footer-accent); }
.bb-native-footer-phone a:hover { color: var(--bb-color-footer-link-hover); }
.bb-native-footer-badge {
	width: 180px; height: auto; max-width: 100%;
	filter: brightness(0) invert(1) opacity(.85);
}
.bb-native-footer-heading {
	font-family: var(--bb-font-display);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bb-color-footer-accent);
	margin: 0 0 4px;
	letter-spacing: .08em;
}
.bb-native-footer-list {
	display: flex; flex-direction: column; gap: 8px;
	font-size: 13.5px;
	color: var(--bb-color-footer-link);
}
.bb-native-footer-list a:hover { color: var(--bb-color-footer-link-hover); }
.bb-native-footer-hours li { font-size: 13px; color: var(--bb-color-footer-muted); }
.bb-native-footer-social {
	display: flex; gap: 8px;
	flex-wrap: wrap;
}
.bb-native-footer-social a {
	width: 40px; height: 40px;
	border: 1px solid rgba(255,255,255,.20);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--bb-color-footer-link);
	transition: background .2s, color .2s, border-color .2s;
}
.bb-native-footer-social a:hover {
	background: var(--bb-color-footer-accent);
	color: var(--bb-color-primary-700);
	border-color: var(--bb-color-footer-accent);
}
.bb-native-footer-payment-section {
	border-top: 1px solid var(--bb-color-footer-divider);
	padding: 24px 0;
	color: var(--bb-color-footer-muted);
}
.bb-native-footer-payment {
	display: flex; align-items: center; justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}
.bb-native-footer-payment-icons {
	display: flex; gap: 8px; flex-wrap: wrap;
}
.bb-native-footer-payment-icons li {
	display: inline-flex;
	filter: brightness(0) invert(1) opacity(.72);
}
.bb-native-footer-copy {
	background: rgba(0,0,0,.18);
	padding: 28px 0;
	text-align: center;
	border-top: 1px solid var(--bb-color-footer-divider);
}
.bb-native-footer-copy p {
	margin: 0; font-size: 13px; color: var(--bb-color-footer-muted);
}
.bb-native-footer-copy a { color: var(--bb-color-footer-link); }

/* ------------------------------------------------------------------
 * A11y guardrails — homepage version.
 *
 *   - Site-wide visible keyboard focus ring on any interactive element
 *     we didn't already style with a custom ring.  Scoped to
 *     `body.bb-native-body` so it doesn't spill into admin/Porto.
 *   - `prefers-reduced-motion` honours the OS setting and flattens our
 *     hover transforms / fade-ins.
 * ------------------------------------------------------------------ */

body.bb-native-body a:focus-visible,
body.bb-native-body button:focus-visible,
body.bb-native-body input:focus-visible,
body.bb-native-body select:focus-visible,
body.bb-native-body textarea:focus-visible,
body.bb-native-body [tabindex]:focus-visible,
body.bb-native-body summary:focus-visible {
	outline: 2px solid var(--bb-color-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

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

/* ==================================================================
 * Melbourne Location Sitemap ( /locations/melbourne-location-sitemap/ )
 * Native takeover layout (see templates/page-locations-sitemap.php)
 *   - Reuses .bb-native-blog-hero as the header band for visual
 *     consistency with /blog/.  A `--loc-hero` modifier adjusts the
 *     color story: this page is about logistics, not editorial, so
 *     the gradient is slightly cooler.
 *   - Stats strip + toolbar + tier sections + bottom CTA.
 * ================================================================== */
.bb-native-loc-hero {
	/* Shares the site-wide hero gradient (--bb-color-hero-from/to)
	 * so /blog/, /locations/, /contact/ all feel like one family
	 * and visually rhyme with the footer strip. */
	background: linear-gradient(135deg, var(--bb-color-hero-from) 0%, var(--bb-color-hero-to) 100%);
	padding: 72px 0 80px;
}

/* Stats strip: 4 equal-width cards sitting just under the hero. */
.bb-native-loc-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: -36px 0 36px;
	position: relative;
	z-index: 2;
}
.bb-native-loc-stat {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 96px;
}
.bb-native-loc-stat-num {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	line-height: 1;
	color: var(--bb-color-ink);
	letter-spacing: -.01em;
}
.bb-native-loc-stat-num small {
	font-size: .6em;
	font-weight: 600;
	color: var(--bb-color-muted);
	margin-left: 2px;
}
.bb-native-loc-stat-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bb-color-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}
@media (max-width: 900px) {
	.bb-native-loc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
	.bb-native-loc-stats { grid-template-columns: 1fr; }
}

/* Search / filter toolbar. */
.bb-native-loc-toolbar {
	margin: 0 0 28px;
}
.bb-native-loc-search {
	display: block;
	position: relative;
}
.bb-native-loc-search input {
	width: 100%;
	padding: 14px 20px 14px 48px;
	font-size: 16px;
	font-weight: 500;
	color: var(--bb-color-ink);
	background: var(--bb-color-bg-card)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806a56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>")
		no-repeat 16px center / 20px 20px;
	border: 1px solid var(--bb-color-line);
	border-radius: 999px;
	box-shadow: var(--bb-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bb-native-loc-search input:focus {
	outline: none;
	border-color: var(--bb-color-primary);
	box-shadow: 0 0 0 4px rgba(122, 90, 63, 0.12);
}
.bb-native-loc-toolbar-hint {
	margin: 12px 4px 0;
	font-size: 13px;
	color: var(--bb-color-muted);
}
.bb-native-loc-toolbar-hint a { color: var(--bb-color-primary); font-weight: 600; }

/* Tier section. */
.bb-native-loc-tier { margin: 0 0 40px; }
.bb-native-loc-tier-head {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: end;
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--bb-color-line);
}
.bb-native-loc-tier-title {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bb-color-ink);
}
.bb-native-loc-tier-sub {
	grid-column: 1;
	grid-row: 2;
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--bb-color-muted);
	line-height: 1.5;
}
.bb-native-loc-tier-count {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-color-primary);
	background: rgba(122, 90, 63, 0.08);
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Suburb card grid. */
.bb-native-loc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.bb-native-loc-grid > li { list-style: none; }
.bb-native-loc-card {
	height: 100%;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bb-native-loc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(60, 40, 20, 0.10);
	border-color: rgba(122, 90, 63, 0.45);
}
.bb-native-loc-card-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 16px;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.bb-native-loc-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.bb-native-loc-card-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--bb-color-ink);
	letter-spacing: -.01em;
}
.bb-native-loc-card-distance {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--bb-color-primary);
	background: rgba(122, 90, 63, 0.1);
	border: 1px solid rgba(122, 90, 63, 0.18);
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}
.bb-native-loc-card-lga {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--bb-color-muted);
	letter-spacing: .02em;
}
.bb-native-loc-card-focus {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bb-native-loc-card-focus li {
	list-style: none;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bb-color-ink);
	background: rgba(122, 90, 63, 0.06);
	border: 1px solid rgba(122, 90, 63, 0.14);
	border-radius: 4px;
	padding: 3px 8px;
}
.bb-native-loc-card-batch {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bb-color-muted);
}
.bb-native-loc-card-cta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--bb-color-primary);
	border-top: 1px dashed var(--bb-color-line);
	padding-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bb-native-loc-card:hover .bb-native-loc-card-cta span {
	transform: translateX(2px);
	transition: transform .18s ease;
}
.bb-native-loc-card-cta span { display: inline-block; transition: transform .18s ease; }

/* Client-side filter state — rows with [hidden] disappear, tier
 * sections whose every card is hidden get their header dimmed. */
.bb-native-loc-card[hidden],
.bb-native-loc-grid > li[hidden] { display: none !important; }
.bb-native-loc-tier[data-bb-empty="1"] { opacity: .35; }
.bb-native-loc-tier[data-bb-empty="1"] .bb-native-loc-grid { display: none; }

/* Bottom CTA band. */
.bb-native-loc-bottom-cta {
	margin: 48px 0 60px;
	padding: 32px 36px;
	background: linear-gradient(135deg, #fbf6ee 0%, #f2eadc 100%);
	border: 1px solid rgba(122, 90, 63, 0.16);
	border-radius: var(--bb-radius);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
}
.bb-native-loc-bottom-cta-body h2 {
	margin: 0 0 8px;
	font-size: clamp(22px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bb-color-ink);
}
.bb-native-loc-bottom-cta-body p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bb-color-muted);
	max-width: 56ch;
}
.bb-native-loc-bottom-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.bb-native-loc-bottom-cta-primary,
.bb-native-loc-bottom-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: var(--bb-radius);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.bb-native-loc-bottom-cta-primary {
	background: var(--bb-color-primary);
	color: #fff;
	border: 1px solid var(--bb-color-primary);
}
.bb-native-loc-bottom-cta-primary:hover {
	background: var(--bb-color-primary-700);
	border-color: var(--bb-color-primary-700);
	transform: translateY(-1px);
}
.bb-native-loc-bottom-cta-secondary {
	background: transparent;
	color: var(--bb-color-primary);
	border: 1px solid rgba(122, 90, 63, 0.35);
}
.bb-native-loc-bottom-cta-secondary:hover {
	background: rgba(122, 90, 63, 0.08);
	border-color: var(--bb-color-primary);
}
@media (max-width: 720px) {
	.bb-native-loc-bottom-cta {
		grid-template-columns: 1fr;
		padding: 24px 22px;
	}
}

/* ==================================================================
 * /contact/ native takeover (see templates/page-contact.php)
 *   - Reuses the warm-brown hero gradient (.bb-native-blog-hero) with
 *     a --contact-hero override so the page feels kin to /blog/ and
 *     /locations/ sitemap but not identical.
 *   - Quick-action tiles -> split form+office grid -> map -> FAQ ->
 *     service-area -> trust strip.
 * ================================================================== */
.bb-native-contact-hero {
	/* Shares the site-wide hero gradient token — see .bb-native-blog-hero
	 * for the rationale (footer-aligned warm medium-brown, never plunges
	 * into near-black). */
	background: linear-gradient(135deg, var(--bb-color-hero-from) 0%, var(--bb-color-hero-to) 100%);
	padding: 72px 0 80px;
}

/* -- Quick-action tile strip -- */
.bb-native-contact-quick {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: -36px 0 40px;
	position: relative;
	z-index: 2;
}
.bb-native-contact-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 22px 22px;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	color: var(--bb-color-ink);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bb-native-contact-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(60, 40, 20, 0.10);
	border-color: rgba(122, 90, 63, 0.45);
}
.bb-native-contact-tile-icon {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(122, 90, 63, 0.1);
	color: var(--bb-color-primary);
	margin-bottom: 6px;
}
.bb-native-contact-tile-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bb-color-muted);
}
.bb-native-contact-tile-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--bb-color-ink);
	letter-spacing: -.005em;
	word-break: break-word;
}
.bb-native-contact-tile-note {
	font-size: 12.5px;
	color: var(--bb-color-muted);
	line-height: 1.4;
}
@media (max-width: 1000px) {
	.bb-native-contact-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.bb-native-contact-quick { grid-template-columns: 1fr; }
}

/* -- Split layout: form (wide) + office info (narrow) -- */
.bb-native-contact-split {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: 28px;
	margin: 0 0 36px;
	align-items: start;
}
@media (max-width: 960px) {
	.bb-native-contact-split { grid-template-columns: 1fr; }
}

/* FORM CARD */
.bb-native-contact-form-card {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	padding: 32px 34px 34px;
}
.bb-native-contact-form-head h2 {
	margin: 0 0 8px;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bb-color-ink);
}
.bb-native-contact-form-head p {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--bb-color-muted);
}

.bb-native-contact-flash {
	padding: 16px 18px;
	border-radius: calc(var(--bb-radius) - 2px);
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
}
.bb-native-contact-flash strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.bb-native-contact-flash p { margin: 0; }
.bb-native-contact-flash--ok {
	background: #e6f4ea;
	color: #1f6b3a;
	border: 1px solid #b6dcc3;
}
.bb-native-contact-flash--ok a { color: #14552c; text-decoration: underline; font-weight: 600; }
.bb-native-contact-flash--err {
	background: #fdecec;
	color: #8a2323;
	border: 1px solid #f3c5c5;
}

.bb-native-contact-form { display: flex; flex-direction: column; gap: 16px; }
.bb-native-contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 600px) {
	.bb-native-contact-row { grid-template-columns: 1fr; }
}
.bb-native-contact-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bb-color-ink);
}
.bb-native-contact-field > span em {
	color: var(--bb-color-primary);
	font-style: normal;
	margin-left: 2px;
}
.bb-native-contact-field > span small {
	font-weight: 500;
	color: var(--bb-color-muted);
	margin-left: 4px;
}
.bb-native-contact-field input,
.bb-native-contact-field select,
.bb-native-contact-field textarea {
	font: inherit;
	font-weight: 500;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bb-color-line);
	border-radius: calc(var(--bb-radius) - 2px);
	background: #fff;
	color: var(--bb-color-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bb-native-contact-field textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.55;
}
.bb-native-contact-field input:focus,
.bb-native-contact-field select:focus,
.bb-native-contact-field textarea:focus {
	outline: none;
	border-color: var(--bb-color-primary);
	box-shadow: 0 0 0 4px rgba(122, 90, 63, 0.12);
}
.bb-native-contact-hint {
	font-size: 12px;
	font-weight: 500;
	color: var(--bb-color-muted);
	line-height: 1.4;
}
/* Honeypot — visually hidden but still in DOM so bots fill it. */
.bb-native-contact-hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.bb-native-contact-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}
.bb-native-contact-submit {
	align-self: flex-start;
	padding: 13px 28px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: var(--bb-color-primary);
	border: 1px solid var(--bb-color-primary);
	border-radius: var(--bb-radius);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bb-native-contact-submit:hover {
	background: var(--bb-color-primary-700);
	border-color: var(--bb-color-primary-700);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(122, 90, 63, 0.25);
}
.bb-native-contact-legal {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bb-color-muted);
	font-weight: 500;
}
.bb-native-contact-legal a { color: var(--bb-color-primary); font-weight: 600; }

/* OFFICE CARD */
.bb-native-contact-office {
	position: sticky;
	top: 24px;
	padding: 28px 28px 26px;
	background: linear-gradient(180deg, #fbf6ee 0%, #f5ecdd 100%);
	border: 1px solid rgba(122, 90, 63, 0.16);
	border-radius: var(--bb-radius);
}
.bb-native-contact-office h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--bb-color-ink);
	letter-spacing: -.005em;
}
.bb-native-contact-address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bb-color-ink);
	line-height: 1.5;
}
.bb-native-contact-office-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}
.bb-native-contact-office-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: calc(var(--bb-radius) - 2px);
	background: var(--bb-color-primary);
	color: #fff;
	text-decoration: none;
	border: 1px solid var(--bb-color-primary);
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.bb-native-contact-office-btn:hover {
	background: var(--bb-color-primary-700);
	border-color: var(--bb-color-primary-700);
	transform: translateY(-1px);
}
.bb-native-contact-office-btn--ghost {
	background: transparent;
	color: var(--bb-color-primary);
	border-color: rgba(122, 90, 63, 0.35);
}
.bb-native-contact-office-btn--ghost:hover {
	background: rgba(122, 90, 63, 0.08);
	color: var(--bb-color-primary-700);
	border-color: var(--bb-color-primary);
}
.bb-native-contact-office-sub {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-color-primary);
}
.bb-native-contact-hours {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 18px;
}
.bb-native-contact-hours th,
.bb-native-contact-hours td {
	padding: 8px 0;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	border-bottom: 1px dashed rgba(122, 90, 63, 0.16);
}
.bb-native-contact-hours th { color: var(--bb-color-ink); font-weight: 600; width: 45%; }
.bb-native-contact-hours td { color: var(--bb-color-muted); text-align: right; }
.bb-native-contact-hours-row--appt td { font-style: italic; color: var(--bb-color-muted); }
.bb-native-contact-hours tr:last-child th,
.bb-native-contact-hours tr:last-child td { border-bottom: 0; }
.bb-native-contact-office-note {
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(122, 90, 63, 0.2);
	border-radius: calc(var(--bb-radius) - 4px);
	font-size: 13px;
	line-height: 1.55;
	color: var(--bb-color-ink);
}
.bb-native-contact-office-note a { color: var(--bb-color-primary); font-weight: 600; }
@media (max-width: 960px) {
	.bb-native-contact-office { position: static; }
}

/* -- Map -- */
.bb-native-contact-map-wrap { margin: 0 0 40px; }
.bb-native-contact-map {
	display: block;
	width: 100%;
	height: 380px;
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	background: #f2ead9;
}
.bb-native-contact-map-caption {
	margin: 10px 4px 0;
	font-size: 13px;
	color: var(--bb-color-muted);
}
.bb-native-contact-map-caption a { color: var(--bb-color-primary); font-weight: 600; }

/* -- FAQ accordion -- */
.bb-native-contact-faq { margin: 0 0 44px; }
.bb-native-contact-faq-head { margin: 0 0 18px; }
.bb-native-contact-faq-eyebrow {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bb-color-primary);
}
.bb-native-contact-faq-head h2 {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bb-color-ink);
}
.bb-native-contact-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bb-native-contact-faq-item {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bb-native-contact-faq-item[open] {
	border-color: rgba(122, 90, 63, 0.35);
	box-shadow: var(--bb-shadow-sm);
}
.bb-native-contact-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 16px;
	font-weight: 700;
	color: var(--bb-color-ink);
}
.bb-native-contact-faq-item summary::-webkit-details-marker { display: none; }
.bb-native-contact-faq-chev {
	display: inline-flex;
	color: var(--bb-color-primary);
	transition: transform .2s ease;
}
.bb-native-contact-faq-item[open] .bb-native-contact-faq-chev {
	transform: rotate(180deg);
}
.bb-native-contact-faq-body {
	padding: 0 22px 20px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--bb-color-muted);
}
.bb-native-contact-faq-body a { color: var(--bb-color-primary); font-weight: 600; }
.bb-native-contact-faq-body strong { color: var(--bb-color-ink); }

/* -- Service-area reminder card -- */
.bb-native-contact-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	margin: 0 0 40px;
	padding: 28px 32px;
	background: linear-gradient(135deg, #fbf6ee 0%, #f2eadc 100%);
	border: 1px solid rgba(122, 90, 63, 0.16);
	border-radius: var(--bb-radius);
}
.bb-native-contact-area-eyebrow {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-color-primary);
}
.bb-native-contact-area-body h2 {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.2vw, 24px);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--bb-color-ink);
}
.bb-native-contact-area-body p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--bb-color-muted);
	max-width: 60ch;
}
.bb-native-contact-area-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: var(--bb-color-primary);
	border: 1px solid var(--bb-color-primary);
	border-radius: var(--bb-radius);
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.bb-native-contact-area-btn:hover {
	background: var(--bb-color-primary-700);
	border-color: var(--bb-color-primary-700);
	transform: translateY(-1px);
}
.bb-native-contact-area-btn span { transition: transform .18s ease; }
.bb-native-contact-area-btn:hover span { transform: translateX(3px); }
@media (max-width: 700px) {
	.bb-native-contact-area { grid-template-columns: 1fr; padding: 22px 20px; }
}

/* -- Trust strip -- */
.bb-native-contact-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 56px;
}
.bb-native-contact-trust-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 24px;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
}
.bb-native-contact-trust-icon {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(122, 90, 63, 0.1);
	color: var(--bb-color-primary);
	margin-bottom: 4px;
}
.bb-native-contact-trust-item strong {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--bb-color-ink);
}
.bb-native-contact-trust-item span {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--bb-color-muted);
}
@media (max-width: 800px) {
	.bb-native-contact-trust { grid-template-columns: 1fr; }
}

/* ==================================================================
 * /about/ native takeover (see templates/page-about.php)
 *   - Reuses .bb-native-blog-hero / .bb-native-contact-hero gradient,
 *     .bb-native-loc-stats stat tiles, .bb-native-contact-trust row
 *     and .bb-native-contact-area service-area strip.
 *   - Adds: extended stat note, two-column story (prose + fact card),
 *     6-pillar product grid, 4-step "how we work" ladder, bottom
 *     triple-CTA strip.
 * ================================================================== */

/* Stat tiles on /about/ carry a short supporting note under the label
 * — /locations/ doesn't use that slot, so we scope the extra line. */
.bb-native-about-stat-note {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bb-color-muted);
	letter-spacing: 0;
	text-transform: none;
}

/* Shared section headers inside the about page. */
.bb-native-about-section-head {
	text-align: center;
	max-width: 720px;
	margin: 8px auto 28px;
}
.bb-native-about-section-head h2 {
	margin: 4px 0 10px;
	font-size: clamp(22px, 2.8vw, 30px);
	letter-spacing: -.01em;
	color: var(--bb-color-ink);
}
.bb-native-about-section-head p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bb-color-muted);
}
.bb-native-about-eyebrow {
	margin: 0 0 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-color-primary);
}

/* -- Story section (prose + fact card) -- */
.bb-native-about-story {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 40px;
	margin: 16px 0 56px;
	align-items: start;
}
.bb-native-about-story-body .bb-native-about-story-eyebrow {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bb-color-primary);
}
.bb-native-about-story-body h2 {
	margin: 0 0 16px;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--bb-color-ink);
}
.bb-native-about-story-body p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.72;
	color: var(--bb-color-ink-soft, #433023);
}
.bb-native-about-story-body p:last-child { margin-bottom: 0; }

.bb-native-about-facts {
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	padding: 26px 26px 22px;
	box-shadow: var(--bb-shadow-sm);
	position: sticky;
	top: 104px;
}
.bb-native-about-facts h3 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bb-color-primary);
}
.bb-native-about-facts dl {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bb-native-about-fact {
	display: grid;
	grid-template-columns: 38% 62%;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(122, 90, 63, 0.18);
}
.bb-native-about-fact:last-child { border-bottom: 0; }
.bb-native-about-fact dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bb-color-muted);
	margin: 0;
}
.bb-native-about-fact dd {
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-color-ink);
	margin: 0;
	line-height: 1.45;
}
.bb-native-about-facts-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	background: var(--bb-color-primary);
	border: 1px solid var(--bb-color-primary);
	border-radius: var(--bb-radius);
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.bb-native-about-facts-cta:hover {
	background: var(--bb-color-primary-700);
	border-color: var(--bb-color-primary-700);
	color: #fff;
	transform: translateY(-1px);
}
@media (max-width: 900px) {
	.bb-native-about-story { grid-template-columns: 1fr; gap: 28px; }
	.bb-native-about-facts { position: static; }
}

/* -- Product pillars grid -- */
.bb-native-about-pillars-wrap { margin: 0 0 56px; }
.bb-native-about-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.bb-native-about-pillar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 22px 20px;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
	color: var(--bb-color-ink);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bb-native-about-pillar:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(60, 40, 20, 0.1);
	border-color: rgba(122, 90, 63, 0.45);
	color: var(--bb-color-ink);
}
.bb-native-about-pillar-icon {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(122, 90, 63, 0.1);
	color: var(--bb-color-primary);
	margin-bottom: 4px;
}
.bb-native-about-pillar-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--bb-color-ink);
	letter-spacing: -.005em;
}
.bb-native-about-pillar-blurb {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bb-color-muted);
}
.bb-native-about-pillar-cta {
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--bb-color-primary);
	text-transform: none;
}
.bb-native-about-pillar:hover .bb-native-about-pillar-cta {
	text-decoration: underline;
}
@media (max-width: 900px) {
	.bb-native-about-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.bb-native-about-pillars { grid-template-columns: 1fr; }
}

/* -- How-we-work step ladder -- */
.bb-native-about-how-wrap { margin: 0 0 56px; }
.bb-native-about-how {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	counter-reset: bb-about-step;
	padding: 0;
	margin: 0;
	list-style: none;
}
.bb-native-about-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 22px 22px;
	background: var(--bb-color-bg-card);
	border: 1px solid var(--bb-color-line);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-sm);
}
.bb-native-about-step-num {
	font-family: var(--bb-font-display);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: rgba(122, 90, 63, 0.25);
	letter-spacing: -.02em;
}
.bb-native-about-step-icon {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(122, 90, 63, 0.1);
	color: var(--bb-color-primary);
	margin-top: -4px;
}
.bb-native-about-step-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--bb-color-ink);
	letter-spacing: -.005em;
}
.bb-native-about-step-body {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bb-color-muted);
}
@media (max-width: 1000px) {
	.bb-native-about-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.bb-native-about-how { grid-template-columns: 1fr; }
}

/* -- Values strip (reuses .bb-native-contact-trust, only resets margin) -- */
.bb-native-about-values-wrap { margin: 0 0 48px; }
.bb-native-about-values { margin: 0; }

/* -- Bottom triple-CTA strip -- */
.bb-native-about-cta {
	margin: 0 0 64px;
}
.bb-native-about-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	padding: 36px 40px;
	background: linear-gradient(135deg, var(--bb-color-hero-from) 0%, var(--bb-color-hero-to) 100%);
	color: #f7f0e8;
	border-radius: var(--bb-radius-xl, 20px);
	box-shadow: var(--bb-shadow);
}
.bb-native-about-cta-eyebrow {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 240, 220, 0.8);
}
.bb-native-about-cta-copy h2 {
	margin: 0 0 8px;
	font-size: clamp(22px, 2.6vw, 28px);
	color: #fff;
	letter-spacing: -.01em;
}
.bb-native-about-cta-copy p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 240, 220, 0.88);
	max-width: 55ch;
}
.bb-native-about-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
/* Bottom-CTA buttons.  Selectors use `a.bb-native-about-cta-btn…`
 * instead of just the class so the specificity reaches (0,1,1) —
 * otherwise the global `.bb-native-body a { color: currentColor }`
 * (0,1,1) wins the cascade and `color: currentColor` collapses to the
 * inherited dark/white, washing out "1800 979 678" on white pill
 * ("这部分看不清" — 2026-04-20 feedback). */
a.bb-native-about-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
	border-radius: var(--bb-radius);
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
a.bb-native-about-cta-btn--primary {
	background: #fff;
	color: var(--bb-color-primary-700, #2e2118);
	border-color: #fff;
}
a.bb-native-about-cta-btn--primary:hover {
	background: #fbf2e5;
	color: var(--bb-color-primary-700, #2e2118);
	transform: translateY(-1px);
}
a.bb-native-about-cta-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}
a.bb-native-about-cta-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
	transform: translateY(-1px);
}
@media (max-width: 820px) {
	.bb-native-about-cta-inner {
		grid-template-columns: 1fr;
		padding: 28px 24px;
	}
	.bb-native-about-cta-actions { justify-content: flex-start; }
}