/* ==========================================================================
 * CATEGORY PAGE — the design's own numbers.
 *
 * Design: `PRODUCT CATEGORY PAGE` 33399:117139 (frame 33399:116166, 1512×5028.7).
 * Every value below is read from the Figma node tree or its variable set, not
 * sampled off the export — the connector was authorised partway through this
 * build, so for once these are the design's numbers rather than my pixels.
 *
 * ⚠ THIS SHEET LOADS AFTER `pdp-redesign.css`, which is enqueued on these pages
 *   too. That is where the tokens live, and where `.bc-pdp-endorsement` and
 *   `.bc-pdp-reasons` are styled — both of which this page renders. Only the
 *   differences are here.
 *
 * ⚠ TABLET AND MOBILE ARE BUILT, at the foot of this file. The frames arrived
 *   on 2026-09-07 (`33399:118428` at 744 and `33399:120110` at 428) and the
 *   breakpoints are 1000 and 600, the same two `pdp-redesign.css` uses. An
 *   earlier version of this note said the sheet was desktop only and that
 *   narrow widths inherited the desktop grid — they no longer do.
 * ========================================================================== */

/* The band the hero sits on. `Gold Light/70` in the design's variables — the
 * only place the redesign uses a light ground, which is why it is not already a
 * token in pdp-redesign.css. */
.bc-cat {
	--bc-cat-gold-70: #d9c2ad;
	--bc-cat-gold-100: #a4866c;   /* Gold/100 — the filter and sort controls */
	--bc-cat-gutter: 64px;   /* Layout/Horizontal-Padding */
	--bc-cat-content: 1384px;

	background-color: var(--pdp-c7);
}

/* ── Clearing the fixed site header ────────────────────────────────────────
 * ⚠ THE HERO WAS RENDERING UNDERNEATH THE HEADER. Measured at 1512: the
 *   breadcrumb sat at document y=64 and the H1 at y=102, while
 *   `.header-alert` (fixed, top 0, 52 tall) and `#myHeader` (fixed, top 51,
 *   82 tall) paint 0..133. The breadcrumb was invisible and the H1 was sliced
 *   in half.
 *
 * ⚠ THE THEME OFFSETS NOTHING ITSELF — `body` has no padding-top, and its
 *   `pt-12 md:pt-20` classes resolve to no rule at all. Every template clears
 *   the header on its own, through an id:
 *
 *       style.css:69     #all-page-header-space            margin-top: 139px
 *       style.css:78     body.margin #all-page-header-space           88px
 *       style.css:7699   @media(min-width:768px)          132px !important
 *       style.css:7707   @media(min-width:768px) .margin   82px !important
 *       style.css:9070   @media(max-width:767px)          131px
 *       style.css:9074   @media(max-width:767px) .margin   80px
 *
 *   The values are mirrored here rather than the id being adopted, because
 *   that id also carries `padding-bottom: 64px` and a deep descendant rule
 *   aimed at the PDP's Yotpo mount, neither of which belongs on this page.
 *   The 139/88 pair is unreachable in practice — a viewport is either ≥768 or
 *   ≤767 — so only the two real pairs are reproduced.
 *
 * ⚠ `body.margin` IS NOT DEAD CODE. `footer.php:348` adds it when the visitor
 *   dismisses the `$25 Off` alert, which removes 51px from the header. Without
 *   the second rule in each pair the hero would leave a 50px gap the moment
 *   anyone closes that bar.
 *
 * ⚠ THE SELECTOR NAMES THE ID ON PURPOSE (Mitz, 2026-09-07). `#topback` and
 *   `.bc-cat` are the SAME element — `template-parts/category-page.php:47` is
 *   `<div class="bc-cat" id="topback">` — so this was already working from the
 *   class alone. Carrying the id takes it to (1,1,0), which no class-only
 *   theme rule can outrank, so the offset cannot be lost to a later edit
 *   somewhere in this theme's 18k-line `style.css`.
 *
 * ⚠ AND `.bc-cat` STAYS IN THE SELECTOR, which is not redundant. Five other
 *   templates reuse `id="topback"` — `page-shop-2.php`, `shop-2.php`,
 *   `shop.php`, `shop2.php` and `test-shop.php`. This stylesheet is gated on
 *   `bc_cat_slug()` so it does not load on any of them today, but requiring
 *   the class as well makes that structural rather than circumstantial: if
 *   the sheet ever loads wider, a bare `#topback` would push those pages down
 *   by 132px and nothing would say why.
 * ---------------------------------------------------------------------- */
/*
 * ⚠ ONE VARIABLE, FOUR STATES, AND BOTH ELEMENTS READ IT. The offset is
 *   declared on `#topback.bc-cat` and `.bc-cat-hero` carries it too (Mitz,
 *   2026-09-07), which means it CANNOT be hardcoded in either place:
 *   `.bc-cat-hero` is `#topback`'s first child and `#topback` establishes no
 *   BFC, so their top margins are adjoining and collapse to the LARGER of the
 *   two. A literal `132px` on the hero therefore pins the pair at 132 and the
 *   `body.margin` reduction below can never take effect — measured, the
 *   dismissed-alert state kept the hero at 132 against a header bottom of 82
 *   and opened a **50px gap**.
 *
 *   So the number lives in `--bc-cat-header-offset` once per state and both
 *   margins resolve from it. They then always collapse to the same value and
 *   every state stays correct.
 */
#topback.bc-cat {
	--bc-cat-header-offset: 132px;

	margin-top: var(--bc-cat-header-offset);
}

body.margin #topback.bc-cat {
	--bc-cat-header-offset: 82px;
}

@media (max-width: 767px) {
	#topback.bc-cat {
		--bc-cat-header-offset: 131px;
	}

	body.margin #topback.bc-cat {
		--bc-cat-header-offset: 80px;
	}
}

/* ── Hero ──────────────────────────────────────────────────────────────────
 * Node I33399:117139;33381:102319, first child. 1512 wide; height comes from
 * the text column's own padding — 64 top and bottom around a 154-tall block.
 *
 * ⚠ THE BACKGROUND IMAGE IN THE DESIGN IS NOT USED. The node carries a photo
 *   under an OPAQUE `Gold Light/70` fill at `inset: 0`, so it never shows; the
 *   reference render is a flat band. Shipping a 2.1MB invisible asset would be
 *   the wrong kind of faithful.
 * ---------------------------------------------------------------------- */
.bc-cat-hero {
	position: relative;
	box-sizing: border-box;
	/*
	 * ⚠ 282 IS A FLOOR, BECAUSE THE FIVE PAGES SHARE THIS BAND AND THE INTRO
	 *   COPY IS NOT THE SAME LENGTH ON ANY TWO OF THEM. The band's height is
	 *   otherwise its text column's own — 64 top and bottom around the crumbs
	 *   and the intro — so `/combo-boxes/` came out at the design's 282 on a
	 *   three-line intro while `/treats/` came out at 258 on a two-line one.
	 *
	 *   Measured across the set, not assumed from one page. Two reasons it is
	 *   pinned rather than left to the content: the pill row invites clicking
	 *   between all five, and a band that changes height as you do reads as a
	 *   fault; and the dogs photo is absolutely positioned at a fixed 409 tall,
	 *   so a shorter band silently lengthens the overhang onto the gate bar and
	 *   changes the composition the design draws.
	 *
	 *   A floor, not a fixed height, so a longer intro on a category added later
	 *   grows the band instead of overflowing it.
	 */
	min-height: 282px;
	/*
	 * ⚠ CLIP ON ONE AXIS ONLY. This was `overflow: hidden`, which stopped the
	 *   page scrolling sideways at narrow widths but also sliced the dogs off
	 *   dead level with the band. The design has the paws hanging BELOW it, over
	 *   the gate bar: the photo frame is 517×409 and its image runs y 40..352.8,
	 *   while the band is only 282 tall.
	 *
	 * ⚠ `overflow-y: visible` only survives beside `clip`, never beside `hidden`.
	 *   With `hidden` on one axis the other computes to `auto` and clips too,
	 *   which is the whole reason this is `clip`.
	 *
	 * The photo is `position: absolute` and the gate bar is static, so the
	 *   overhang paints OVER the bar, as the design draws it; and it carries
	 *   `pointer-events: none`, so it cannot swallow a click on the postcode
	 *   field beneath. The field ends at x=922 and the photo starts at 954, so
	 *   they do not overlap in any case.
	 */
	overflow-x: clip;
	overflow-y: visible;
	background-color: var(--bc-cat-gold-70);
	/*
	 * ⚠ The SAME offset as `#topback.bc-cat`, from the one variable. A
	 *   literal here collapses with the parent’s margin and pins both at
	 *   this value — see the note on that rule.
	 */
	margin-top: var(--bc-cat-header-offset);
}

.bc-cat-hero__inner {
	box-sizing: border-box;
	/*
	 * ⚠ 500 IS THE FRAME, NOT THE CONTENT — this was 628 and the comment here
	 *   said "max-w-[500px] on the design's text column, inside 64px padding",
	 *   which read the design's 500 as the inner width and then added the
	 *   padding on top of it.
	 *
	 *   `Frame 1261154968` is 500 wide and its two children — the breadcrumb
	 *   frame and the title/intro frame — both sit at x=64 with width **372**.
	 *   64 + 372 + 64 = 500, so the padding is INSIDE that 500 and the text
	 *   column is 372. Ours was giving them 500 of content in a 628 box, so
	 *   every line in the hero ran 128px wider than the design draws it.
	 */
	max-width: 500px;
	padding: var(--bc-cat-gutter);
}

/* Breadcrumb. Ancestors in Color 6, the current page in Color 7 and semibold —
 * the design distinguishes them by weight and darkness, not by colour alone. */
.bc-cat-hero__crumbs {
	display: flex;
	align-items: center;
	margin: 0 0 12px;
	font-family: var(--pdp-font-body);
	font-size: 14px;
	line-height: 26px;
}

.bc-cat-hero__crumbs a {
	/*
	 * ⚠ `margin: 0`, BECAUSE THE THEME PUTS `0 16px -8px` ON THESE LINKS.
	 *   That pushed the trail 16px past the 64px gutter and opened 24px each
	 *   side of the chevrons where the design has 8 — its chevron sits in a
	 *   32-wide box with the 16px glyph centred and the words butt straight
	 *   up to it (Home 0..40, chevron 40..72, Shop 72..107).
	 */
	margin: 0;
	color: var(--pdp-c6);
	font-weight: 400;
	/*
	 * ⚠ RESTATED, BECAUSE THE THEME SETS 14 ON THE ANCHOR. `Links/Regular` is
	 *   14 on a **26** line and the row inherits that correctly, but the `<a>`
	 *   itself measured `line-height: 14px` — so the two links sat in a 14-tall
	 *   line box inside a 26-tall row while the current-page `<span>`, which no
	 *   theme rule reaches, kept its 26. Only visible as a hairline difference in
	 *   where the three baselines sit, which is exactly the kind of thing that
	 *   survives a review by eye.
	 */
	line-height: 26px;
	text-decoration: none;
}

.bc-cat-hero__crumbs a:hover,
.bc-cat-hero__crumbs a:focus-visible {
	text-decoration: underline;
}

.bc-cat-hero__chevron {
	display: block;
	width: 16px;
	height: 16px;
	/* px-[var(--p-2,8px)] on the design's chevron buttons. */
	margin: 0 8px;
}

.bc-cat-hero__crumb-current {
	color: var(--pdp-c7);
	font-weight: 600;
}

/* H3/Textured 36/40, uppercase. ⚠ `--pdp-h2` is 48 and this is the H3 step —
 * the category title is one size DOWN from the PDP's product title. */
.bc-cat-hero__title {
	margin: 0 0 4px !important;
	padding: 0;
	color: var(--pdp-c7);
	font-family: var(--pdp-font-textured);
	font-size: 36px;
	font-weight: 400;
	line-height: 40px;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Body/Regular 16/24. */
.bc-cat-hero__intro {
	margin: 0;
	color: var(--pdp-c7);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/*
 * The three dogs.
 *
 * ⚠ OUTER BOX AND INNER LEAF ARE SIZED SEPARATELY, which is the whole trick. The
 *   design's box is 517×409 at `right: 41px; top: 0` with 40px of top padding,
 *   and inside it the image is `height: 123.97%; top: -7.08%` of a 1448/876
 *   frame. That crop is what pushes the paws below the band and over the gate
 *   bar. `object-fit: cover` would centre the crop and lose the overhang, so the
 *   percentages are transcribed rather than approximated.
 */
.bc-cat-hero__photo {
	position: absolute;
	top: 0;
	right: 41px;
	box-sizing: border-box;
	width: 517px;
	height: 409px;
	padding-top: 40px;
	pointer-events: none;
}

.bc-cat-hero__photo-box {
	position: relative;
	width: 100%;
	aspect-ratio: 1448 / 876;
	overflow: hidden;
}

.bc-cat-hero__photo-box img {
	position: absolute;
	top: -7.08%;
	left: 0;
	width: 100%;
	height: 123.97%;
	max-width: none;
}

/* ── Gate bar ──────────────────────────────────────────────────────────────
 * Node 33384:102848, `Input state`. Color 8, px 64 / py 14, 20px gap, wrapping.
 * ---------------------------------------------------------------------- */
.bc-cat-gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	padding: 14px var(--bc-cat-gutter);
	background-color: var(--pdp-c8);
}

.bc-cat-gate__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ⚠ Northwest Textured at 14px, not Inter. The design sets the label in the
 *   heading face at link size — the same treatment as the PDP's gate prompt. */
.bc-cat-gate__label {
	margin: 0;
	color: var(--pdp-c4);
	font-family: var(--pdp-font-textured);
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
}

/*
 * ⚠ THIS IS A <button> NOW, so the UA styling has to be undone rather than
 *   left to inherit — a button brings its own background, border, padding,
 *   centred text and font, none of which an <a> did. Same treatment as the
 *   PDP's `.bc-pdp-gate__areas-trigger`, and the same type values this rule
 *   already had: tan, 12px, 600, underlined. The design's node is 181×16 and
 *   ours measured 180.9×16, so none of those numbers move.
 */
.bc-cat-gate__areas {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pdp-c3);
	font-family: var(--pdp-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-align: left;
	text-decoration: underline;
	text-transform: none;
	text-underline-position: from-font;
	cursor: pointer;
}

/*
 * Tan → cream, as every other text link on the page. The underline stays: it
 * is what marks this as clickable at all.
 *
 * ⚠ AND `background: none`, for the same reason as LOAD MORE above — Mitz,
 *   2026-09-07: "remove background color when hovered". This is a `<button>`
 *   rather than an `<a>` (it acts, it does not navigate), so
 *   `style.css`'s `button:hover { background: #826852 }` at (0,1,1) reached it
 *   and painted a brown block behind a plain text link. Measured:
 *   `rgba(0,0,0,0)` → `rgb(130, 104, 82)`.
 *
 *   The base rule's `background: none` at (0,1,0) could never have held it —
 *   a hover rule has to answer a hover rule.
 */
.bc-cat-gate__areas:hover,
.bc-cat-gate__areas:focus-visible {
	background: none;
	color: var(--pdp-c4);
	text-decoration: underline;
}


/* ── The gate's CONFIRMED state ────────────────────────────────────────────
 * Once a postcode validates the plugin collapses its field, and on this page
 * its own confirmation renders inside the postcode POPUP rather than the bar —
 * so the bar emptied. This is our own line in the widget's flex slot.
 *
 * ⚠ Deliberately the PDP's values so the two pages agree: an outlined pill,
 *   36 tall, `--pdp-c6` border, `--pdp-c5` label, 14px/500. The design draws
 *   no confirmed state on either page.
 * ---------------------------------------------------------------------- */
.bc-cat-gate__confirmed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	/*
	 * ⚠ THE SAME SLOT AND THE SAME 48 AS THE WIDGET, so the bar does not
	 *   resize when a postcode is confirmed. Measured without the min-height:
	 *   the row was 36 and the bar dropped 76 → 70 the moment Check succeeded,
	 *   which reads as the page twitching. The design draws no confirmed state,
	 *   so 48 comes from the field it replaces.
	 */
	flex: 1 0 0;
	min-width: 340px;
	max-width: 500px;
	min-height: 48px;
	margin: 0;
}

/*
 * ⚠ MATCHED TO WHAT THE PDP RENDERS, NOT TO WHAT ITS RULES SAY. Mitz: "make
 *   sure the styling is the same on pdp." A first pass copied the values out of
 *   `pdp-redesign.css` and got two of them wrong, because that file's own
 *   declarations are overridden on the PDP itself. Measured on a confirmed PDP
 *   instead:
 *
 *       span.pincode_static_text   13px/18, weight 400, #ffffff
 *       a#change_pin               173.4×48, border 1px #49423f, RADIUS 0,
 *                                  padding 4px 14px, #d1d0cf, 14px/14, 500
 *
 *   So the confirmation is one continuous white string — the postcode is NOT
 *   picked out — and the control is a square 48-tall box, not a 36-tall pill.
 *   `pdp-redesign.css` asks for `--pdp-ok-400` on `.pincode_static_text` and
 *   for `min-height: 36px` / `border-radius: 9999px` on `a#change_pin`; none of
 *   those three survive on the page.
 */
.bc-cat-gate__confirmed-text {
	color: var(--pdp-c11);
	font-family: var(--pdp-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
}

/*
 * Mitz, 2026-09-10 QA: the confirmed text and the Change button paint ABOVE the
 * dogs' paws, each on a Color 8 ground. The photo overhang is absolute with
 * z-index auto on desktop and 1 on tablet, so positioned + z-index 2 beats it at
 * every tier. The text stretches to the row's 48 so its ground matches the
 * button beside it rather than hugging the line box.
 */
.bc-cat-gate__confirmed-text,
.bc-cat-gate__change {
	position: relative;
	/*
	 * ⚠ 1, NOT 2 — QA 2026-09-11 (Mitz): scrolled, these painted OVER the site header.
	 *   The fixed header (`section#myHeader`) and the alert bar are `z-index: 2`, and
	 *   these sit in the same root stacking context, so 2 tied with the header and
	 *   won on tree order. 1 is still above the paws: the photo is `z-index: auto`
	 *   on desktop, and where the tablet tier gives it 1 the tie falls to tree order,
	 *   and the gate comes after the hero. Measured: header on top when scrolled,
	 *   text and button on top of the paws at 1512 and 744.
	 */
	z-index: 1;
	background-color: var(--pdp-c8);
}

.bc-cat-gate__confirmed-text {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	/* The markup has a space between “area” and the postcode span, and a flex
	 * container drops a whitespace-only text node — so “area2065”. One word
	 * space, stated as a gap. */
	column-gap: 0.3em;
	padding: 0 14px;
}

/*
 * ⚠ NOTHING OF ITS OWN. The postcode is part of the same sentence on the PDP
 *   and takes the same colour and weight; an earlier pass gave it the success
 *   green from that overridden rule, which made the two pages disagree in the
 *   most visible way. Kept as an element so the JS has somewhere to write.
 */
.bc-cat-gate__confirmed-pin {
	color: inherit;
	font-weight: inherit;
}

.bc-cat-gate__change {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The PDP's pencil sits 10px clear of its label. */
	gap: 10px;
	box-sizing: border-box;
	flex: none;
	min-height: 48px;
	margin: 0;
	padding: 4px 14px;
	/* Mitz, 2026-09-10 QA: same as the Check button at rest — Color 3 line and
	 * label on the Color 8 ground. Color 8 stated HERE, not only in the shared
	 * rule above: this rule is later in the file at equal specificity, so its
	 * shorthand won. */
	border: 1px solid var(--pdp-c3);
	border-radius: 0;
	background: var(--pdp-c8);
	color: var(--pdp-c3);
	font-family: var(--pdp-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/*
 * ⚠ THE BACKGROUND HAS TO BE RESTATED HERE. `style.css` carries
 *   `button:hover { background: #826852 }` at (0,1,1), and the rule above only
 *   set the border and the text — so hovering filled this outlined pill with a
 *   solid brown. It showed up in the very first screenshot of the confirmed
 *   state, because the pointer was still sitting where it had clicked Check and
 *   the pill appeared underneath it.
 *
 *   The PDP's equivalent is an `<a>`, so it never met that rule; this is a
 *   `<button>` for the same reason the areas trigger is — it acts, it does not
 *   navigate.
 */
.bc-cat-gate__change:hover,
.bc-cat-gate__change:focus-visible {
	/* Mitz, 2026-09-10 QA: same as the Check button hovered — white fill and
	 * line, label left on Color 3. (0,2,0) beats the theme's brown
	 * button:hover at (0,1,1) without a flag. */
	border-color: var(--pdp-c11);
	background: var(--pdp-c11);
	color: var(--pdp-c3);
}

.bc-cat-gate__change-icon {
	display: inline-flex;
	flex: none;
	width: 14px;
	height: 14px;
}
/* The relocated plugin widget. `flex-1` with the design's own bounds. */
.bc-cat-gate__widget {
	flex: 1 0 0;
	min-width: 340px;
	max-width: 500px;
}

.bc-cat-gate__widget .pin_div,
.bc-cat-gate__widget #my_custom_checkout_field2 {
	margin: 0;
	padding: 0;
}

.bc-cat-gate__widget .input-block {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

/*
 * ⚠ BOTH IDS ARE NAMED, and that is not belt-and-braces. The plugin and the
 *   theme reach this control through 3-id selectors, and a class never
 *   accumulates past an id — the lesson this project recorded twice while
 *   styling the same widget on the PDP.
 */
.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp {
	margin: 0;
	padding: 0;
}

/* ── The relocated widget's own layout ─────────────────────────────────────
 * ⚠ THE GATE BAR WAS 120 TALL AGAINST THE DESIGN'S 76, and every one of the
 *   44 extra pixels came from inside this widget. Design node
 *   `I33399:117139;33381:102319;33384:102886` (`Input with Button`) is
 *   **500×48 at x=422, y=14** in a 76-tall bar — and our widget already
 *   measured 500 wide at x=421.1, so the width and the offset were right and
 *   only the height was wrong. It came out 92:
 *
 *       label "Check Availability At"   20 + 24 bottom margin  = 44
 *       span.input-block                                         48
 *
 *   The design has no such label — the bar's own
 *   `.bc-cat-gate__label` ("We need to confirm delivery to your area first")
 *   is the prompt, so the plugin's is a second one saying the same thing.
 *
 * ⚠ AND THE ROW WAS 250 WIDE INSIDE A 500 BOX, centred, because `.pin_div` is
 *   the plugin's own flex container with the item centred and nothing telling
 *   it to grow. That is why the button appeared to overlap the input in the
 *   render: the input was 113 wide with the button hard against it, not 385
 *   with a 12px gap.
 * ---------------------------------------------------------------------- */

/*
 * The plugin's own prompt, hidden. `visibility` rather than `display: none`
 * so the label keeps its `for` association for anyone reading the field with
 * a screen reader through the id — and `position: absolute` so it takes no
 * space, which `visibility` alone would not achieve.
 */
.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp > label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Fill the 500px the design gives the row, instead of centring on content. */
.bc-cat-gate__widget div#my_custom_checkout_field2 {
	display: flex;
	justify-content: flex-start;
}

.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp {
	flex: 1 1 auto;
	width: 100%;

	/*
	 * ⚠ AND `max-width`, WHICH IS WHAT ACTUALLY CAPPED THE ROW. The plugin
	 *   puts `max-width: 344px` on this paragraph, so the `width: 100%` above
	 *   resolved to 344 inside a 500px box and the field stayed 160 wide.
	 *   Measured after the first attempt rather than guessed — the computed
	 *   width was still 344px with that rule already in place.
	 */
	max-width: none;
}

.bc-cat-gate__widget div#my_custom_checkout_field2 span.input-block {
	width: 100%;
}

/*
 * The field takes the remainder. `min-width: 0` because a flex item will not
 * shrink below its input's intrinsic width without it, which is how a 113px
 * field survived a 500px container in the first place.
 */
.bc-cat-gate__widget div#my_custom_checkout_field2 span.loader_div {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * ⚠ THE BUTTON READS "Check Postcode", THE DESIGN READS "Check", AND THAT IS
 *   DELIBERATELY LEFT ALONE. The string is `$checkpintext`, a setting of
 *   `woocommerce-pincode-check-pro-unl-num` (`pincode_shortcode.php:508`), so
 *   changing it is a config change that would also change the PDP's gate and
 *   would need a `docs/config-manifest.md` step. The design's button is 103
 *   wide and ours is 125; both sit in the same 500px row, so the row geometry
 *   the design specifies is unaffected. Raised for Mitz rather than decided.
 */

/*
 * ⚠ THREE IDS, BECAUSE THE THEME USES THREE. This selector named two
 *   (`#my_custom_checkout_field2`, `#pincode_field_id`) and lost every visual
 *   property to `style.css`'s
 *
 *       #my_custom_checkout_field2 #pincode_field_idp #pincode_field_id.input-text
 *
 *   at (3,1,0) — which sets `background-color: #fff`, a pin-icon
 *   `background-image`, `color: #999` and `height: 46px`. So the field
 *   rendered WHITE with a grey border and a location pin, where the design
 *   draws it dark with light text and no icon. Adding `p#pincode_field_idp`
 *   takes this to (3,1,3): same id count, more classes and types, so it wins
 *   on specificity and needs no `!important`.
 *
 * ⚠ The design's field really is dark. Sampled the export at 2.5× rather than
 *   trusting the theme's white: the box reads #1f1f1f with a barely-there
 *   border and the postcode in a light grey, on the bar's #322b27. Our
 *   original values were right all along and were simply being outranked.
 *
 * ⚠ `background-image: none` REMOVES THE PLUGIN'S PIN ICON, which the design
 *   does not draw, and that is why the padding can go back to a symmetric
 *   12px — the theme's `6px 10px 6px 30px` existed to clear that icon. One
 *   line to restore if the affordance is wanted back.
 */
.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp input#pincode_field_id {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--pdp-c6);
	border-radius: 0;
	background-color: var(--pdp-c7);
	background-image: none;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 12px;
	line-height: 16px;
}

/*
 * ⚠ THE FIELD TURNED WHITE ON FOCUS, and beating that needs a focus selector of
 *   its own. `style.css` carries
 *
 *       #my_custom_checkout_field2 #pincode_field_idp #pincode_field_id.input-text:focus
 *           { background-color: #fff; box-shadow: none }
 *
 *   at (3,2,0) — three ids plus a class and the pseudo-class. The resting rule
 *   above is (3,1,3), so it wins while idle and loses the moment the field takes
 *   focus. This is (3,2,3) and holds the dark ground.
 *
 * ⚠ AND IT RESTORES A FOCUS INDICATOR, which that rule removes with its
 *   `box-shadow: none` and never replaces. A tan border is the same signal the
 *   pills and the Check button use, so a keyboard user can see where they are.
 */
.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp input#pincode_field_id:focus {
	border-color: var(--pdp-c3);
	background-color: var(--pdp-c7);
	color: var(--pdp-c4);
	outline: none;
}

.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp a#checkpin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * ⚠ `width: auto !important` ANSWERS AN `!important`. `style.css:7034` sets
	 *   `width: 50% !important` on
	 *   `div#my_custom_checkout_field2 p#pincode_field_idp a#checkpin` (3,1,1),
	 *   which is why the button measured exactly 250 of the row's 500 the moment
	 *   the row itself stopped being capped at 344 — a fix that looked like it
	 *   had made things worse. This selector is (3,2,1), so at equal weight it
	 *   wins; without the flag it lost regardless of specificity.
	 *
	 *   `auto` rather than the design's 103, because the label is the plugin's
	 *   `$checkpintext` ("Check Postcode") and not ours to shorten — see the note
	 *   above. The button hugs its text at ~172 and the field takes the rest.
	 */
	width: auto !important;
	box-sizing: border-box;
	flex: none;
	height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--pdp-c3);
	border-radius: 0;
	/*
	 * ⚠ `!important`, BECAUSE THE THEME'S IS TOO. `style.css` carries
	 *   `background: #000 !important` on
	 *   `div#my_custom_checkout_field2 p#pincode_field_idp a#checkpin` at
	 *   (3,0,3) — and a second copy sets `#fff !important` at (2,1,0), which
	 *   the first outranks. So the button rendered BLACK inside its tan border
	 *   where the design leaves it transparent on the bar's #322b27. Plain
	 *   `transparent` here lost to the flag regardless of this selector's
	 *   higher (3,1,3). Flagged at (3,1,3) it wins.
	 */
	background-color: var(--pdp-c8) !important;
	color: var(--pdp-c3);
	font-family: var(--pdp-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: normal;
	text-transform: none;
	white-space: nowrap;
}

/* ⚠ The theme injects this label as a `::before` and zeroes the anchor's own
 *   font-size below 768. On the PDP that drew "Check" twice. Same fix here. */
.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp a#checkpin::before {
	content: none;
}

/* ── The Check button's hover ────────────────────────────────────────────────
 * Mitz, 2026-09-09: "the Postcode Check button on category page is not update."
 *
 * ⚠ IT HAD NO HOVER STATE AT ALL. Measured with a real pointer before writing
 *   this: background, colour, border and box all identical at rest and hovered
 *   — this stylesheet never wrote one, and the theme's own rules do not either.
 *   The PDP's copy of the same button was changed earlier today (white fill,
 *   label left alone), so the two had drifted apart; this is that rule, on the
 *   category selector.
 *
 * ⚠ `background-color` NEEDS THE FLAG, because the resting declaration eight
 *   lines up is `background-color: transparent !important` — itself an answer to
 *   `style.css`'s `background: #000 !important` at (3,0,3). Between two
 *   `!important` declarations specificity decides again, and `:hover` makes this
 *   (3,3,1) against the resting rule's (3,2,1), so it wins. Unflagged it would
 *   have lost to the resting rule regardless of being more specific.
 *
 * ⚠ `border-color` is stated for the same reason it is on the PDP: the resting
 *   border is the tan, and leaving it on a white ground would read as a tan
 *   outline round white rather than a filled button. No flag needed — the
 *   resting `border` shorthand here is unflagged, unlike the PDP's.
 *
 * ⚠ The label is deliberately NOT changed, and the contrast that follows is on
 *   the record: `#c9a98a` on `#ffffff` is **2.20:1** against the 4.5 an 18px 600
 *   label needs. Ruled by Mitz for the PDP and applied identically here so the
 *   two pages cannot disagree; at rest the same label is 6.31:1 on the bar.
 * ------------------------------------------------------------------------- */
.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp a#checkpin:hover,
.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp a#checkpin:focus-visible {
	border-color: var(--pdp-c11);
	background-color: var(--pdp-c11) !important;
	color: var(--pdp-c3);
}

/* ── Main column ───────────────────────────────────────────────────────── */
.bc-cat-main {
	box-sizing: border-box;
	max-width: calc(var(--bc-cat-content) + var(--bc-cat-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--bc-cat-gutter);
}

/* ── Toolbar ───────────────────────────────────────────────────────────────
 * Node I33399:117139;30428:166067 — 1384×52, then a 1384×1 divider 8px under
 * it. Filter left, count centred across the row, sort right.
 * ---------------------------------------------------------------------- */
.bc-cat-toolbar {
	display: flex;
	align-items: center;
	gap: 24px;
	box-sizing: border-box;
	/*
	 * ⚠ `min-height: 52px` DID NOT BITE, because it bounds the border-box and
	 *   24px of padding plus a 31px control row already exceeded it — the row
	 *   measured 55 against the design’s 52. Node
	 *   I33399:117139;30428:166067 is 1384×52 at frame-y 24, its divider is
	 *   1384×1 at frame-y 84, and the outer container is 61 tall. So the box is
	 *   24 + 52 + 8 + 1 = 85, and the 52 has to be the CONTENT box.
	 */
	min-height: 84px;
	padding: 24px 0 8px;
	border-bottom: 1px solid var(--pdp-c6);
}

.bc-cat-toolbar__control {
	display: inline-flex;
	align-items: center;
	gap: 8px;   /* the design's icon → label gap */
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	/*
	 * ⚠ COLOR 5, NOT COLOR 4. Nodes 30428:166071 and 30428:166080 are both
	 *   `Color/Color 5` (#d1d0cf) — the same colour as the result count between
	 *   them, which is the point: the design has all three of the toolbar's
	 *   labels at one level, and #f5f2ee lifted Filter and Sort a step above the
	 *   count they sit beside.
	 */
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	/*
	 * ⚠ 18px, NOT 14. `Paragraph/Bold` in the toolbar container’s own
	 *   variable set is Inter Semi Bold at `Size/Paragraph` 18, weight 600.
	 *   The design’s two labels are 45 and 38 wide against our 34.4 and
	 *   28.9. Line-height stays 22px so the text box matches the design’s
	 *   22-tall node rather than the token’s 100%.
	 */
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	cursor: pointer;
}

.bc-cat-toolbar__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	/* The icons take the label's colour — see the note above. */
	color: var(--pdp-c5);
}

.bc-cat-toolbar__icon svg {
	display: block;
}

/*
 * Hover: the LABEL changes, nothing else.
 *
 * ⚠ `background: none` FOR THE THIRD TIME ON THIS PAGE — Mitz, 2026-09-08:
 *   "when hovered dont add background color -- when hovered change color only
 *   for the text". Both controls are `<button>`s, so `style.css`'s
 *   `button:hover { background: #826852 }` at (0,1,1) reached them and painted
 *   a brown block behind each label. Same cause and same fix as LOAD MORE and
 *   the delivery-areas link above; the base rule's `background: none` at
 *   (0,1,0) cannot hold it, because a hover rule has to answer a hover rule.
 *
 *   Tan on hover, matching the Sort panel's own options and the filter rows —
 *   the one hover accent this page uses.
 */
.bc-cat-toolbar__control:hover,
.bc-cat-toolbar__control:focus-visible {
	background: none;
	color: var(--pdp-c3);
}

/* The icon and label take their colour from the control, but both set it
 * explicitly in their own rules, so both have to be answered here too. */
.bc-cat-toolbar__control:hover .bc-cat-toolbar__icon,
.bc-cat-toolbar__control:focus-visible .bc-cat-toolbar__icon,
.bc-cat-toolbar__control:hover .bc-cat-toolbar__label,
.bc-cat-toolbar__control:focus-visible .bc-cat-toolbar__label {
	color: var(--pdp-c3);
}

/* Centred by taking the remaining space, which is how the design's node does it
 * — the count is one 1253-wide text box between the two controls. */
.bc-cat-toolbar__count {
	flex: 1 1 auto;
	margin: 0;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
}

.bc-cat-toolbar__count:empty {
	/* Nothing to mirror yet — hold the space rather than collapsing the row. */
	min-height: 24px;
}

/*
 * ⚠ THE INVISIBLE SELECT IS GONE, and its rule with it. The toolbar’s Sort
 *   control was a `<form>` with a native `<select>` stretched over it at
 *   `opacity: 0`, so clicking the word opened the browser dropdown. Sorting
 *   now lives in the `Sort - off canvass` panel and the control is a plain
 *   button, so there is no select to hide and no positioning context to
 *   provide. ~36 lines removed rather than left to rot.
 */
.bc-cat-toolbar__sort .bc-cat-toolbar__label {
	cursor: pointer;
}


/* ==========================================================================
 * FILTER AND SORT OFF-CANVAS
 *
 * Designs: `Filter - off canvass` 33399:117880 (opens LEFT) and
 * `Sort - off canvass` 33399:117881 (opens RIGHT). Both 445 wide on Color 7,
 * 24px gutters (→ 397 inner), a 36-tall header row over a 397×1 divider, and a
 * scrolling body. Filter adds a 445×98 footer with a 425×48 button at x=10;
 * Sort has none, so a choice applies immediately.
 *
 * ⚠ SIDES: Filter LEFT, Sort RIGHT (Mitz, 2026-09-07), matching where each
 *   control sits in the toolbar. The Figma x-positions do not settle it — the
 *   two panels are just parked side by side on the canvas.
 *
 * ⚠ BUILT HERE RATHER THAN REUSING A PLUGIN'S, and both candidates were
 *   checked on a rendered page first:
 *
 *     WOOF's own slideout   `jquery.tabSlideOut.js` and `slideout.js` ARE
 *                           enqueued, but render ZERO elements — the feature is
 *                           off. It is a tab-on-page-edge widget and cannot be
 *                           reshaped into this design.
 *     the spu popup plugin  reused for the delivery panel, but its content is
 *                           editorial post content, not live filter controls.
 * ========================================================================== */

/*
 * ⚠ Z-INDEX FROM A MEASURED LANDSCAPE, not a guess at 9999. What is already on
 *   this page:
 *
 *     #myHeader / .header-alert            2
 *     .woo_amc_open   (cart tab)          11
 *     .pc-popup                          999
 *     #wl-list-pop-wrap                10001
 *     .woo_amc_container_wrap (cart)  999999
 *     .spu-box.bc-learn-popup      (delivery)    99999999
 *
 *   1000 puts the panel over the fixed header and the cart tab — which it must,
 *   or the header would sit on top of it — and deliberately UNDER the mini-cart
 *   and the delivery popup, so those still win if one of them opens.
 */
.bc-cat-drawer__backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.6);
}

/*
 * ⚠ HIDDEN BY `transform`, NOT `display: none`, AND THAT IS LOAD-BEARING. The
 *   design's filter body ends in a price range slider, which WOOF builds with
 *   ion.rangeSlider — and that needs a laid-out width to initialise. In a
 *   `display: none` container it measures zero and comes out broken, which is
 *   the classic way this pattern fails. So the panel keeps its box and slides
 *   off-screen.
 *
 *   `visibility: hidden` on top of the transform so nothing inside is
 *   focusable or announced while closed; the `[hidden]` attribute is NOT used
 *   on the panels for the same reason as `display: none`.
 *
 * ⚠ `width: min(445px, 100vw)` — the design is 445 and there are still no
 *   tablet or mobile frames for this page, so below 445 the panel simply
 *   becomes the viewport rather than overflowing it.
 */
.bc-cat-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(445px, 100vw);
	background-color: var(--pdp-c7);
	visibility: hidden;
	/*
	 * ⚠ VISIBILITY IS STEPPED, NOT EASED, AND THE DIRECTION MATTERS. Written as
	 *   `visibility 0.28s` it interpolated alongside the slide, so on OPEN the
	 *   panel was still `visibility: hidden` for the first frames — and an
	 *   element in that state cannot take focus, so moving focus into the panel
	 *   failed silently and intermittently, landing back on the trigger.
	 *
	 *   `0s linear 0.28s` here delays the flip to hidden until the slide-out has
	 *   finished, and the `.is-open` rule below sets `0s` with no delay so the
	 *   panel becomes visible — and focusable — the instant it opens.
	 */
	transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.bc-cat-drawer--filter {
	left: 0;
	transform: translateX(-100%);
}

.bc-cat-drawer--sort {
	right: 0;
	transform: translateX(100%);
}

.bc-cat-drawer.is-open {
	transition: transform 0.28s ease, visibility 0s;
	transform: translateX(0);
	visibility: visible;
}

/* ⚠ The slide is the only motion here, so this removes it outright rather than
 *   shortening it — there is nothing left to convey once it is gone. */
@media (prefers-reduced-motion: reduce) {
	.bc-cat-drawer {
		transition: none;
	}
}

/* ── Header: a 36-tall row in 24px gutters, over a 397×1 divider ─────────── */
.bc-cat-drawer__header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	box-sizing: border-box;
	padding: 24px 24px 12px;
}

/*
 * ⚠ THE DIVIDER IS INSET, so it cannot be the header's `border-bottom`. The
 *   design's `Divider` is 397 wide inside a 445 panel — the same 24px gutters
 *   as everything else — and a border draws across the whole padding box, which
 *   came out full-bleed at 445. An absolutely positioned rule respects the
 *   gutters; a `::after` on this flex container would otherwise have become a
 *   third flex item between the title and the close button.
 */
.bc-cat-drawer__header::after {
	content: '';
	position: absolute;
	right: 24px;
	bottom: 0;
	left: 24px;
	height: 1px;
	background-color: var(--pdp-c6);
}

/* `H6/Regular` — Northwest Regular 20/24, Color 4. */
.bc-cat-drawer__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;   /* Spacing/spacing-ml */
	margin: 0;
	color: var(--pdp-c4);
	font-family: var(--pdp-font-heading);
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
}

.bc-cat-drawer__title-icon {
	display: inline-flex;
	flex: none;
	width: 16px;
	height: 16px;
}

/* 36×36 hit area around a 16×16 glyph, per `Frame 1261154777`. */
.bc-cat-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--pdp-c4);
	cursor: pointer;
}

/*
 * ⚠ `background: none` FOR THE FOURTH TIME ON THIS PAGE. Mitz, 2026-09-10:
 *   "remove the background-color of close button of FILTER and SORT when
 *   hovered." Measured with a real pointer on both panels before changing
 *   anything: rest `rgba(0,0,0,0)` → hover **`rgb(130,104,82)`**, which is
 *   `#826852` — the same `button:hover { background: #826852 }` at (0,1,1) in
 *   `style.css` that reached LOAD MORE, both toolbar controls and the
 *   delivery-areas trigger before this.
 *
 *   The base rule's `background: none` at (0,1,0) cannot hold it, because **a
 *   hover rule has to answer a hover rule** — this one set only `color`, so
 *   the theme's fill had nothing arguing with it. At (0,2,0) this wins on
 *   specificity and needs no flag, which is how the toolbar controls answer
 *   the same rule.
 *
 *   The tan on hover stays: that is this page's one hover accent and it is not
 *   what was asked about.
 */
.bc-cat-drawer__close:hover,
.bc-cat-drawer__close:focus-visible {
	background: none;
	color: var(--pdp-c3);
}

/*
 * The body is what scrolls. `overscroll-behavior: contain` so reaching its end
 * does not start scrolling the page behind the panel.
 */
.bc-cat-drawer__body {
	flex: 1 1 auto;
	box-sizing: border-box;
	padding: 16px 24px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ── Filter footer: a 445×98 bar with a 425×48 button inset 10 ───────────── */
.bc-cat-drawer__footer {
	flex: none;
	box-sizing: border-box;
	padding: 20px 10px 30px;
	border-top: 1px solid var(--pdp-c6);
}

/* `Atom Component/Buttons/Radius` is 0, as everywhere else on this page. */
.bc-cat-drawer__apply {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 1px solid var(--pdp-c3);
	border-radius: 0;
	background-color: var(--pdp-c3);
	color: var(--pdp-c7);
	font-family: var(--pdp-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

/*
 * ⚠ THE DESIGN'S HOVER FOR A FILLED BUTTON IS COLOR 6 WITH A WHITE LABEL.
 *   Component set `Button` 33034:255272, row 1: `State=Default, Type=Default`
 *   is `#c9a98a` with `#1f1f1f` text, and `State=Hover, Type=Default` is
 *   **`#49423f` with white**. This was `--pdp-c4` cream with the resting dark
 *   label — measured `rgb(245,242,238)` / `rgb(31,31,31)` — which is neither
 *   state the design draws.
 */
.bc-cat-drawer__apply:hover,
.bc-cat-drawer__apply:focus-visible {
	background-color: var(--pdp-c6);
	border-color: var(--pdp-c6);
	color: var(--pdp-c11);
}

/* ── Sort: six rows, 28 tall on a 40 pitch ──────────────────────────────── */
.bc-cat-sort__list {
	display: flex;
	flex-direction: column;
	gap: 12px;   /* 40 pitch − 28 row */
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bc-cat-sort__item {
	margin: 0 !important;
	list-style: none !important;
}

.bc-cat-sort__option {
	display: flex;
	align-items: center;
	gap: 12px;   /* label starts at x=28 beside a 16px control */
	min-height: 28px;
	margin: 0;
	cursor: pointer;
}

/*
 * ⚠ A REAL RADIO, RESTYLED — not a hidden input with a drawn substitute, so it
 *   stays focusable, operable with the arrow keys and announced as a radio.
 *
 * ⚠ THE RING IS COLOR 4, NOT COLOR 6. A first pass used `--pdp-c6` (#49423f) on
 *   the assumption that the panel's "input border" token applied, and the
 *   rendered result was six invisible controls — #49423f on the #1f1f1f panel is
 *   barely a shade apart. Rendering the design node settled it: the unselected
 *   rings read as clearly light, and Color 6 does not appear anywhere in that
 *   row's own variable set while `Color/Color 4` (#f5f2ee) does.
 *
 * ⚠ THE SELECTOR CARRIES THE ATTRIBUTE AND THE PARENT, and that is not
 *   decoration. `style.css` sets `[type="radio"]:checked { position: absolute }`
 *   at (0,2,0) — in three separate copies of the file — which outranked a plain
 *   `.bc-cat-sort__radio` at (0,1,0) and yanked the chosen control out of flow
 *   the moment it was selected. Measured: `position: absolute` on the checked
 *   input. This is (0,3,1) and states `position` back explicitly.
 */
.bc-cat-sort__option input[type="radio"].bc-cat-sort__radio {
	appearance: none;
	-webkit-appearance: none;
	position: static;
	box-sizing: border-box;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 2px solid var(--pdp-c4);   /* Border/xs 2, Color 4 */
	border-radius: 9999px;   /* Radius/rounded-full */
	background: none;
	cursor: pointer;
}

/*
 * Gold/100 fill with a 2px gap inside the ring — `Padding/padding-xs` is 2 in
 * the control's own variables, which is what the inset shadow reproduces.
 */
.bc-cat-sort__option input[type="radio"].bc-cat-sort__radio:checked {
	position: static;
	border-color: var(--bc-cat-gold-100);
	box-shadow: inset 0 0 0 2px var(--pdp-c7);
	background-color: var(--bc-cat-gold-100);
}

.bc-cat-sort__option input[type="radio"].bc-cat-sort__radio:focus-visible {
	outline: 2px solid var(--pdp-c3);
	outline-offset: 2px;
}

/* `Typography/Size/Links` 14 on a 16 line — the option node is 369×16. */
.bc-cat-sort__label {
	color: var(--pdp-c4);
	font-family: var(--pdp-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
}

.bc-cat-sort__option:hover .bc-cat-sort__label {
	color: var(--pdp-c3);
}

/* ── WOOF's own markup, inside the Filter panel ────────────────────────────
 * The panel body hosts `[woof]` unchanged, so the AJAX filtering keeps working
 * and only the presentation is ours. These rules dress WOOF's output to the
 * design's `CONTENT FILTER` spec (33366:103387): a group heading in
 * `Body/Bold` Inter 600 16/24, option rows 32 tall on a 40 pitch, checkboxes
 * with a 2px radius and a `Gold/100` fill, and a 1px divider between groups.
 *
 * ⚠ WHAT THE DESIGN ASKS FOR AND WHAT WOOF CURRENTLY EMITS ARE NOT THE SAME
 *   THING, and no CSS closes that gap. The design's body is FIVE collapsible
 *   groups — four checkbox groups of 5, 6, 3 and 3 options, then a price range
 *   slider — about 1108px of content. WOOF is presently configured to emit
 *   exactly ONE group: `product_cat`, five checkboxes, plus its Reset button,
 *   425px in total. And that one group is categories, which the pill row above
 *   the grid already does.
 *
 *   Which attributes to expose is a client decision and enabling them is a WOOF
 *   SETTINGS change, so it belongs in `docs/config-manifest.md` rather than
 *   here. These rules are written against the design's row/group/checkbox spec
 *   so that whatever WOOF is configured to emit lands looking right. Raised for
 *   Mitz — see the task doc.
 * ---------------------------------------------------------------------- */
/*
 * ⚠ WOOF PAINTS ITS OWN PANEL CREAM, and inside a dark drawer that reads as a
 *   pale slab with unreadable text. Measured on the rendered panel:
 *   `div.woof_redraw_zone` computed `rgb(228, 224, 214)` — the #e4e0d6 the
 *   theme gives WOOF's sidebar, which made sense when the filter lived in a
 *   light left column and does not here.
 */
.bc-cat-drawer .woof,
.bc-cat-drawer .woof_redraw_zone,
.bc-cat-drawer .woof_container,
.bc-cat-drawer .woof_container_inner,
.bc-cat-drawer .woof_block_html_items {
	background: none !important;
	background-color: transparent !important;
}

.bc-cat-drawer .woof,
.bc-cat-drawer .woof_redraw_zone {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bc-cat-drawer .woof_container {
	box-sizing: border-box;
	margin: 0 0 28px !important;
	padding: 0 0 28px !important;
	border-bottom: 1px solid var(--pdp-c6);
}

.bc-cat-drawer .woof_container:last-of-type {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: 0;
}

/*
 * The group heading. `Body/Bold` — Inter Semi Bold 16 on a 24 line, Color 4.
 *
 * `.bc-cat-filters__group-title` is the `Status` heading, which is ours rather
 * than WOOF's: both modules in that group are extensions whose views render no
 * heading element, so `bc_cat_filter_panel()` inserts one. It is styled here
 * with the plugin's own headings so the five groups cannot drift apart.
 */
.bc-cat-drawer .bc-cat-filters__group-title,
.bc-cat-drawer .woof_container h4,
.bc-cat-drawer .woof_container .woof_container_label {
	/*
	 * A flex row, because WOOF prints its collapse toggle INSIDE the `h4` —
	 * which the design also does: `Section Header` is a 397×24 row with the
	 * title at x=0 and a 24×24 button at x=373.
	 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 16px !important;
	padding: 0 !important;
	color: var(--pdp-c4);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-transform: none;
}

/*
 * WOOF's collapse toggle, drawn as the design's chevron.
 *
 * Design `Section Header` > `Button` (I33366:103387;29247:28320) is a 24×24 box
 * with 8px of padding around a 16px `heroicons-outline/chevron-up`. WOOF emits
 * `<a class="woof_front_toggle woof_front_toggle_opened">-</a>` inside the
 * heading, with `V` when closed — `toggle_type: text` in its settings. Rather
 * than ship two icon files through the settings' image fields, the text is
 * zeroed and the chevron drawn from two borders.
 *
 * ⚠ AN 8px CSS CHEVRON STANDS IN FOR A 16px STROKED ICON. At this size the two
 *   are indistinguishable, and it avoids adding a binary asset for one glyph —
 *   the same call as the accordion disc's grain texture on the PDP. Recorded as
 *   a fidelity nit, not approximated silently.
 *
 * ⚠ ONLY THE TAXONOMY GROUPS GET ONE. WOOF renders no toggle for `by_price` or
 *   for either Status module, so three of the four headings have no chevron
 *   where the design draws one on all five. Giving them one means our own
 *   markup AND our own collapse JS, and WOOF already owns that behaviour for
 *   its own groups (`woof_checkboxes_slide`) — two collapse implementations on
 *   one panel is how conflicts start. Left as an open item instead.
 */
/*
 * ⚠ THE THEME ALREADY OWNS THIS CONTROL, AND `style.css:168` IS THE WHOLE STORY:
 *
 *       .woof_front_toggle.woof_front_toggle_opened:after {
 *         content: url(https://thebutchersdog.com.au/.../minus-1.png);
 *         width: unset !important;
 *         ...
 *
 *   Two consequences, and they took a while to connect. The `content` is a
 *   **hotlink to the LIVE domain** that paints a small tan dash over the
 *   heading — visible at 6× as a smudge above the chevron. And `width: unset`
 *   carries `!important`, which is why an earlier attempt to draw the chevron
 *   from borders on an 8×8 `::after` measured `width: 2px` against
 *   `height: 8px`: no specificity could reach past it, so only the cross size
 *   was ever ours.
 *
 *   ⚠ A CSSOM sweep for competing `::after` rules reported none, and that
 *     reading was wrong — the selector uses the single-colon `:after`, and the
 *     enumeration missed it. `grep` over the theme found it in seconds. When a
 *     computed value cannot be explained, read the stylesheet, not the CSSOM.
 *
 *   So the icon is a background on the ANCHOR, whose 24×24 box is measured and
 *   stable and which no `!important` is fighting over, and the theme's
 *   pseudo-element is switched off. That also lands closer to the design:
 *   `Section Header` > `Button` is a 24×24 box holding a 16px
 *   `heroicons-outline/chevron-up` — this path, at this size — so it is the
 *   design's real icon rather than an approximation of it.
 */
.bc-cat-drawer .woof_front_toggle::after,
.bc-cat-drawer .woof_front_toggle:after {
	content: none !important;
}
.bc-cat-drawer .woof_front_toggle,
.bc-cat-drawer .bc-cat-filters__toggle {
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f2ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	font-size: 0;   /* the plugin's `-` / `V` glyph */
	line-height: 0;
	text-decoration: none !important;
	cursor: pointer;
}

/*
 * Closed: the same chevron, turned over.
 *
 * WOOF swaps its own class; ours reports state through `aria-expanded`, so the
 * attribute IS the state and there is no second class to keep in step with it.
 */
.bc-cat-drawer .woof_front_toggle_closed,
.bc-cat-drawer .bc-cat-filters__toggle[aria-expanded="false"] {
	transform: rotate(180deg);
}

/*
 * ⚠ `background-color: transparent` AND A HOVER RULE TO MATCH, because these
 *   are `<button>`s and `style.css`'s `button:hover { background: #826852 }`
 *   at (0,1,1) would otherwise put a brown block behind the chevron — the same
 *   trap as LOAD MORE, the delivery-areas link and the toolbar controls.
 */
.bc-cat-drawer .woof_front_toggle:hover,
.bc-cat-drawer .bc-cat-filters__toggle:hover,
.bc-cat-drawer .bc-cat-filters__toggle:focus-visible {
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a98a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
}

.bc-cat-drawer .bc-cat-filters__toggle:focus-visible {
	outline: 2px solid var(--pdp-c3);
	outline-offset: 2px;
}

/*
 * ── Collapsed groups ──────────────────────────────────────────────────────
 * The Status wrapper hides everything but its own heading; the Price group is a
 * `woof_container`, so it hides its inner block and keeps its `h4`.
 *
 * ⚠ `display: none` IS SAFE HERE, even though the drawer itself must not use it
 *   (the price slider needs a laid-out width to initialise — see the note on
 *   `.bc-cat-drawer`). By the time anyone can click a chevron the slider has
 *   already initialised, and jQuery UI positions its handles in percentages, so
 *   they survive being hidden and shown again.
 */
.bc-cat-drawer [data-bc-cat-group].is-collapsed > *:not(.bc-cat-filters__group-title) {
	display: none;
}

/*
 * ⚠ PRICE HIDES ITS FORM, NOT ITS INNER BLOCK — the heading is INSIDE it.
 *   The price group nests `h4` two levels down, inside
 *   `.woof_container_inner > .widget_price_filter`, so a first pass that hid
 *   `.woof_container_inner` took the heading and our chevron with it and the
 *   group could never be reopened. Caught by clicking twice rather than once:
 *   the collapse measured correctly and the re-expand failed with "element is
 *   not visible". Hiding the slider's own form leaves the heading standing.
 */
.bc-cat-drawer .woof_container.is-collapsed .widget_price_filter > *:not(h4) {
	display: none;
}

.bc-cat-drawer .woof_front_toggle:focus-visible {
	outline: 2px solid var(--pdp-c3);
	outline-offset: 2px;
}

.bc-cat-drawer .woof_container ul,
.bc-cat-drawer .woof_list {
	display: flex !important;
	flex-direction: column;
	gap: 8px;   /* 40 pitch − a 32 row */
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/*
 * ⚠ THE ROW IS THE `li`, NOT THE LABEL, because WOOF makes the checkbox a
 *   SIBLING of the label rather than nesting it:
 *
 *       <li class="woof_term_22"><input type="checkbox"><label>Combo Boxes</label></li>
 *
 *   A first pass put the flex row on `li label` on the assumption the input was
 *   inside it. It is not, so the rule reached only the text and WOOF's own
 *   `label { display: block }` pushed each label onto its own line under its
 *   checkbox — 52px rows of checkbox-above-label instead of the design's 32px
 *   rows of checkbox-beside-label. Read off the rendered panel, not guessed.
 */
/*
 * ⚠ THE ROW IS INSET 8px FROM ITS HEADING, and the gap is 8 rather than 12.
 *   Read off `Selection and Label` I33366:103387;29247:26874 on 2026-09-08:
 *   within a 397-wide row the checkbox sits at x=8 (16 wide, so ending at 24)
 *   and the label starts at x=32 — an 8px inset and an 8px gap — while the
 *   group's `Section Title` sits at x=0. Rows are deliberately indented from
 *   their heading; they are not flush with it.
 *
 *   This corrects two earlier values. The 12px gap was an estimate, and the
 *   alignment pass earlier on 2026-09-08 removed WOOF's arbitrary 20px inset by
 *   aligning rows WITH the headings — right to drop the 20, wrong to land on 0.
 */
.bc-cat-drawer .woof_list li {
	display: flex !important;
	align-items: center;
	gap: 8px;   /* Padding/padding-ml */
	min-height: 32px;
	margin: 0 !important;
	padding: 0 8px !important;
	list-style: none !important;
}

/*
 * The label is now just the text beside the control.
 *
 * ⚠ 16/24 IN COLOR 5, not 14/16 in Color 4. The row label is `Body/Regular` —
 *   Inter 400 at `Size/Body` on `leading-6`, `#d1d0cf` — per the row's own text
 *   node (;29229:51691). It had been set two steps smaller and one step
 *   brighter, which made every filter row read as heading-adjacent rather than
 *   as the body copy the design draws.
 */
.bc-cat-drawer .woof_list li label {
	/*
	 * ⚠ `flex`, NOT `inline` — the count pill has to sit at the row's right
	 *   edge and WOOF prints it INSIDE this label, after the term name. As a
	 *   flex row with `space-between` the name takes the left and the pill the
	 *   right, which is the design's arrangement (label x=32, pill ending 8px
	 *   short of the row's right edge). Still one line, which is what the
	 *   original `inline` was defending against — WOOF's own
	 *   `label { display: block }` puts the label under its checkbox.
	 */
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	cursor: pointer;
}

/*
 * The per-row count, as the design's pill.
 *
 * Node I33366:103387;29247:26874;29229:51692 — 24×22, a 1px Color 6 border at
 * `rounded-[999px]`, 6px of side padding, centred. `woof_show_count` supplies
 * the number; `bc_cat_strip_count_parens()` takes WOOF's brackets off it, since
 * `(16)` inside a bordered pill reads as a bracket in a bracket.
 */
.bc-cat-drawer .woof_checkbox_count {
	box-sizing: border-box;
	flex: none;
	min-width: 24px;
	min-height: 22px;
	padding: 0 6px;
	border: 1px solid var(--pdp-c6);
	border-radius: 999px;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
}

.bc-cat-drawer .woof_list li:hover label {
	color: var(--pdp-c3);
}

/*
 * ⚠ A REAL CHECKBOX, RESTYLED. WOOF ships its own drawn substitutes (its
 *   `checkbox.css` / `radio.css` modules) which do not match this design; these
 *   reset that back to the native input and dress it, so the control stays
 *   focusable, keyboard-operable and announced. `rounded-xs` is 2 in the
 *   design's variables — square-ish, unlike the Sort panel's circular radios.
 */
.bc-cat-drawer .woof_list li input[type="checkbox"],
.bc-cat-drawer .woof_list li input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0 !important;
	position: static;   /* `[type="radio"]:checked` in style.css is absolute */
	/*
	 * ⚠ Color 4, not Color 6 — same correction as the sort radios above. On
	 *   the #1f1f1f panel a #49423f ring is invisible, and the design renders
	 *   these rings clearly light.
	 */
	border: 2px solid var(--pdp-c4);
	border-radius: 2px;   /* rounded-xs */
	background: none;
	cursor: pointer;
}

.bc-cat-drawer .woof_list li input[type="radio"] {
	border-radius: 9999px;
}

.bc-cat-drawer .woof_list li input[type="checkbox"]:checked,
.bc-cat-drawer .woof_list li input[type="radio"]:checked {
	position: static;
	border-color: var(--bc-cat-gold-100);
	background-color: var(--bc-cat-gold-100);
}

/*
 * ⚠ THE TICK. QA 2026-09-15 (86eywk4md): a checked box was a plain tan square
 *   — `appearance: none` removes the native glyph and nothing put one back, so
 *   "checked" read as "a different coloured box". A page-ink tick, drawn as a
 *   background image because Firefox paints no ::before/::after on an <input>.
 *   The radio keeps its filled dot look and gets no tick.
 */
.bc-cat-drawer .woof_list li input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4 4.9 9.2 10 3.4' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
}

.bc-cat-drawer .woof_list li input[type="checkbox"]:focus-visible,
.bc-cat-drawer .woof_list li input[type="radio"]:focus-visible {
	outline: 2px solid var(--pdp-c3);
	outline-offset: 2px;
}

/*
 * WOOF's Reset button. Kept — it is the only way back to an unfiltered grid
 * once several groups are set — but dressed as this page's ghost button rather
 * than the plugin's. The footer's own button closes the panel; this one clears.
 */
.bc-cat-drawer .woof_submit_search_form_container {
	margin: 24px 0 0 !important;
	padding: 0 !important;
}

.bc-cat-drawer .woof_reset_search_form {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 1px solid var(--pdp-c3) !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--pdp-c3) !important;
	font-family: var(--pdp-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

/* WOOF's own submit button is redundant with AJAX filtering on. */
.bc-cat-drawer .woof_submit_search_form {
	display: none !important;
}

/*
 * ⚠ THE CATEGORIES ROWS SAT 20px RIGHT OF EVERY OTHER ROW IN THE PANEL.
 *   `div.woof_block_html_items` carries `padding-left: 20px`, and that wrapper
 *   goes around the TAXONOMY groups only — not around the extension containers.
 *   Measured 2026-09-08 with the drawer open: group headings at x=24, the
 *   In stock / On sale checkboxes and the price field at x=24, and the category
 *   checkboxes at x=44. The design puts every `Selection and Label` on the same
 *   left edge.
 *
 *   Pre-existing, and invisible until now: while `product_cat` was the only
 *   group there was nothing to compare it against, so the inset read as
 *   deliberate. Adding sibling groups is what exposed it.
 */
.bc-cat-drawer .woof_block_html_items {
	padding-left: 0 !important;
}

/* ── Status and price — the two groups WOOF was configured to emit ─────────
 * Applied 2026-09-08 as WOOF settings, not markup: `by_instock` + `by_onsales`
 * activated and given `show: 1`, and `by_price` shown with its min/max text
 * inputs. The settings themselves are recorded in `docs/config-manifest.md`;
 * these rules are what stops them arriving unstyled.
 *
 * Design: Status is I33366:103387;29247:26868 and the slider group is
 * ;17119:123359 — a 24 header then a 397×52 row holding a 64×40 min field, a
 * 4px track with two 20px round handles, and a 64×40 max field.
 *
 * ⚠ NEITHER EXTENSION USES THE `woof_list` STRUCTURE the rules above dress.
 *   Each emits a bare input and label directly inside `.woof_container_inner`,
 *   joined by two `&nbsp;` and closed with a `<br />`:
 *
 *       <div class="woof_container_inner">
 *         <input type="checkbox" class="woof_checkbox_instock">&nbsp;&nbsp;<label>In stock</label><br />
 *       </div>
 *
 *   So every `li`-scoped rule above reaches none of it, and without this block
 *   both render as native browser checkboxes on the dark panel. `font-size: 0`
 *   on the row is what closes those two `&nbsp;`: they are text nodes between
 *   the input and the label, so in a flex row they become an anonymous item
 *   with real width. Zeroing the inherited size and restoring it on the label
 *   is the only way to collapse them without touching the plugin's markup.
 * ---------------------------------------------------------------------- */
/*
 * ⚠ `gap: 0`, AND THE 12 GOES ON THE LABEL. Measured 2026-09-08: with
 *   `gap: 12px` the label landed at x=64 against a checkbox at x=24 — a 24px
 *   gap, double the design's. The `&nbsp;` text node is a THIRD flex item, so
 *   the gap is charged twice (input | 12 | textnode | 12 | label) even though
 *   `font-size: 0` gives that item no width. Zeroing the gap and putting the
 *   12 on the label as a margin is what produces one gap instead of two.
 */
.bc-cat-drawer .woof_checkbox_instock_container .woof_container_inner,
.bc-cat-drawer .woof_checkbox_sales_container .woof_container_inner {
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 32px;
	/* the design's 8px row inset, same as the `woof_list` rows above */
	padding: 0 8px;
	font-size: 0;
}

.bc-cat-drawer .woof_checkbox_instock_container .woof_container_inner br,
.bc-cat-drawer .woof_checkbox_sales_container .woof_container_inner br {
	display: none;
}

/* The same 16px square ring the list checkboxes use, on the extensions' own
 * class names rather than through an `li`. */
.bc-cat-drawer input.woof_checkbox_instock,
.bc-cat-drawer input.woof_checkbox_sales {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0 !important;
	position: static;
	border: 2px solid var(--pdp-c4);
	border-radius: 2px;
	background: none;
	cursor: pointer;
}

.bc-cat-drawer input.woof_checkbox_instock:checked,
.bc-cat-drawer input.woof_checkbox_sales:checked {
	border-color: var(--bc-cat-gold-100);
	background-color: var(--bc-cat-gold-100);
}

.bc-cat-drawer input.woof_checkbox_instock:focus-visible,
.bc-cat-drawer input.woof_checkbox_sales:focus-visible {
	outline: 2px solid var(--pdp-c3);
	outline-offset: 2px;
}

.bc-cat-drawer .woof_checkbox_instock_container label,
.bc-cat-drawer .woof_checkbox_sales_container label {
	display: inline !important;
	margin: 0 0 0 8px !important;   /* the row's gap — see the note above */
	padding: 0 !important;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	cursor: pointer;
}

.bc-cat-drawer .woof_checkbox_instock_container:hover label,
.bc-cat-drawer .woof_checkbox_sales_container:hover label {
	color: var(--pdp-c3);
}

/*
 * The Status group. `bc_cat_group_status()` wraps WOOF's two Status containers
 * in one element with the design's heading, so the wrapper is the group and
 * carries the group's spacing and divider.
 *
 * ⚠ AND THE CONTAINERS INSIDE IT MUST GIVE THAT UP, or the divider lands in the
 *   wrong place. `.woof_container:last-of-type` above strips the bottom border
 *   from the last container in a parent — which, once the two Status containers
 *   had a parent of their own, matched the On sale container. The result was no
 *   rule between Status and Price at all: "Price" butted straight up under
 *   "Sale". Caught from the screenshot, not the measurements, because every
 *   row was still the right size.
 */
.bc-cat-drawer .bc-cat-filters__group {
	box-sizing: border-box;
	margin: 0 0 28px;
	padding: 0 0 28px;
	border-bottom: 1px solid var(--pdp-c6);
}

.bc-cat-drawer .bc-cat-filters__group .woof_container,
.bc-cat-drawer .bc-cat-filters__group .woof_container:last-of-type {
	/* 40px pitch between the two rows, matching the rows within a group. */
	margin: 0 0 8px !important;
	padding: 0 !important;
	border-bottom: 0;
}

.bc-cat-drawer .bc-cat-filters__group .woof_container:last-child {
	margin-bottom: 0 !important;
}

/*
 * The price filter is jQuery UI, NOT ion.rangeSlider. `front.js:1712` binds
 * `.price_slider` with `.slider({ range: true })`; the `ionRangeSlider` call at
 * :1467 belongs to WOOF's separate slider extension and targets
 * `.woof_range_slider`, which this page does not render. So the handles are
 * `.ui-slider-handle` and the active span is `.ui-slider-range` — the `irs-*`
 * classes never appear here. `front.js:1571` also `.show()`s the track, which
 * is what clears WooCommerce's inline `display: none` on it.
 */
.bc-cat-drawer .price_slider_wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 52px;
}

/*
 * ⚠ `display: contents` IS LOAD-BEARING. The design puts the min field, the
 *   track and the max field in ONE row, but WooCommerce nests both fields
 *   inside `.price_slider_amount` — a SIBLING that FOLLOWS the track. Promoting
 *   that wrapper's children into the flex row is what allows a field on either
 *   side of the track without rewriting markup that belongs to WooCommerce.
 */
.bc-cat-drawer .price_slider_amount {
	display: contents;
}

.bc-cat-drawer .price_slider_amount input#min_price { order: 1; }
.bc-cat-drawer .price_slider { order: 2; flex: 1 1 auto; }
.bc-cat-drawer .price_slider_amount input#max_price { order: 3; }

/*
 * The widget's submit, its "Price: x — y" readout and its float-clear are all
 * redundant with AJAX filtering on, and each would otherwise take a slot in
 * the row. `!important` because `front.js:1571` re-shows `.price_label` after
 * WooCommerce's inline style hides it.
 */
.bc-cat-drawer .price_slider_amount button.button,
.bc-cat-drawer .price_slider_amount .price_label,
.bc-cat-drawer .price_slider_amount .clear {
	display: none !important;
}

/*
 * `Input Plain`, 64×40 — the gate field's treatment at the design's size.
 *
 * ⚠ `display: block !important` BECAUSE WOOCOMMERCE'S OWN JS HIDES THESE.
 *   `price-slider.js` calls `.find('input[type=text]').hide()` on
 *   `.price_slider_amount` — stock behaviour: it treats the fields as hidden
 *   state holders and shows the `.price_label` readout instead. Measured
 *   2026-09-08: both fields came back `display: none`, so with `.price_label`
 *   hidden too the row had NO numbers at all. The design draws two editable
 *   fields, not a readout, so the fields win and the readout stays hidden.
 *   `!important` in a stylesheet does beat `.hide()`'s inline style.
 */
.bc-cat-drawer .price_slider_amount input#min_price,
.bc-cat-drawer .price_slider_amount input#max_price {
	display: block !important;
	box-sizing: border-box;
	flex: none;
	width: 64px;
	height: 40px;
	margin: 0 !important;
	padding: 0 8px !important;
	border: 1px solid var(--pdp-c6);
	border-radius: 0;
	background-color: var(--pdp-c7);
	background-image: none;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 12px;
	line-height: 16px;
	text-align: center;
}

/*
 * The 4px track, its filled span and the two 20px handles.
 *
 * ⚠ SCOPED ON THE DRAWER'S ID, NOT ITS CLASS, because WooCommerce's own rules
 *   are (0,4,0) and beat a class-only selector here:
 *
 *       .woocommerce .widget_price_filter .ui-slider .ui-slider-handle
 *       .woocommerce .widget_price_filter .ui-slider .ui-slider-range
 *       .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content
 *
 *   A first pass used `.bc-cat-drawer .price_slider .ui-slider-handle` — also
 *   (0,3,0)/(0,4,0) — and measurement showed why that was not enough: the
 *   track came back #d5d5d5, the fill and both handles WooCommerce's purple
 *   #7f54b3 at 16.8px with a 1px navy border and a 1em radius. None of it was
 *   ours. `#bc-cat-filter-drawer` takes these to (1,3,0), which clears every
 *   class-only rule without reaching for `!important`. Same move as the header
 *   offset on `#topback.bc-cat`.
 */
#bc-cat-filter-drawer .price_slider.ui-slider {
	box-sizing: border-box;
	height: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: var(--pdp-c6);
	position: relative;
}

#bc-cat-filter-drawer .price_slider .ui-slider-range {
	height: 4px;
	border-radius: 9999px;
	background: var(--bc-cat-gold-100);
	position: absolute;
	top: 0;
}

#bc-cat-filter-drawer .price_slider .ui-slider-handle {
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0 0 0 -10px;
	border: 0;
	border-radius: 9999px;
	background: var(--bc-cat-gold-100);
	position: absolute;
	top: -8px;
	cursor: ew-resize;   /* the plugin's own affordance for this control */
}

#bc-cat-filter-drawer .price_slider .ui-slider-handle:focus-visible {
	outline: 2px solid var(--pdp-c3);
	outline-offset: 2px;
}

/* ── Select your category ──────────────────────────────────────────────────
 * Node I33399:117139;33365:102851 — label 24 tall, pills 40 tall and 8 apart.
 * The pill widths in the design (139/116/100/124/70) are their labels' own, so
 * only the padding is set here.
 * ---------------------------------------------------------------------- */
.bc-cat-nav {
	/*
	 * ⚠ THE CONTAINER IS 112 TALL AND SITS 12 BELOW THE DIVIDER. Node
	 *   I33399:117139;33365:102850 is 1512×112 at frame-y 97, with the divider
	 *   ending at 85 — so 12 above, then 20 + 24 (label) + 8 + 40 (pills) + 20.
	 *   The bottom 20 was missing entirely, which is what pulled the grid up.
	 */
	margin-top: 12px;
	padding: 20px 0;
}

.bc-cat-nav__label {
	margin: 0 0 8px;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	/*
	 * ⚠ 600, NOT 400. Node 33365:102852 is `Body/Bold` — Inter Semi Bold at
	 *   Size/Body on `leading-6`. It reads as a label for the row beneath it in
	 *   the design and read as body copy here.
	 */
	font-weight: 600;
	line-height: 24px;
}

.bc-cat-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bc-cat-nav__item {
	margin: 0 !important;
	list-style: none !important;
}

/*
 * A <button> since 2026-09-15 (Mitz, on 86eywk4pt: "since these pills is the
 * same on woof filter remove the links attached into these pills") — the
 * status bar showed /raw-meals/ on hover, and a toggle should not promise a
 * navigation. The five declarations at the top neutralise the UA button style;
 * everything else was already written against the class, not the element.
 */
.bc-cat-nav__pill {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 40px;
	padding: 0 16px;
	/*
	 * ⚠ 2px, NOT 1. Every pill variant in node 33365:102853 is `border-2`.
	 *   The 40 does not move with it — Figma strokes these frames INSIDE, so the
	 *   design's 40-tall pill is 24 of line plus 8 top and bottom with the stroke
	 *   drawn within, which is what `border-box` reproduces.
	 */
	border: 2px solid var(--pdp-c6);
	/*
	 * ⚠ SQUARE. This was 8px, labelled Radius/rounded-lg — an assumption from
	 *   the first build rather than a value read off the design. Zoomed the
	 *   export to 6× and the pill’s corners are hard square, as is every
	 *   other control on this page: the Check button, both not-sure buttons
	 *   and the card’s purchase rows are all radius 0. The pills were the
	 *   only rounded thing on it.
	 */
	border-radius: 0;
	/*
	 * ⚠ 16px, NOT 14. `Body/Bold` in this node’s own variable set is Inter
	 *   Semi Bold at `Size/Body` 16 with `leading-6` 24 — and the design’s
	 *   five pills measure 139 / 116 / 100 / 124 / 70 wide, which only
	 *   reconciles with a 16px label inside 16px of padding. At 14 the first
	 *   pill came out 127.3.
	 *
	 * ⚠ Color 5, not Color 4. `--pdp-c4` (#f5f2ee) appears nowhere in this
	 *   node’s variables; `Color/Color 5` (#d1d0cf) does.
	 */
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * ⚠ `text-decoration: none` HAS TO BE RESTATED HERE. The base rule above sets
 *   it, but `bootstrap.min.css` carries `a:hover { text-decoration: underline }`
 *   at (0,1,1) — a type plus a pseudo-class — which outranks the base
 *   `.bc-cat-nav__pill` at (0,1,0). So the pills underlined the moment the
 *   pointer touched them, which the design does not draw. Measured: resting
 *   `text-decoration-line: none`, hovered `underline`.
 *
 *   This selector is (0,2,0) and wins. Note the pills are the OPPOSITE case to
 *   the gate bar's areas trigger, which keeps its underline deliberately
 *   because that one is a text link; a pill is a bordered button and the border
 *   is what marks it.
 */
.bc-cat-nav__pill:hover,
.bc-cat-nav__pill:focus-visible {
	border-color: var(--pdp-c3);
	color: var(--pdp-c3);
	text-decoration: none;
}

/*
 * The current category.
 *
 * ⚠ AND IT DOES HAVE A FILL — this comment used to say "the design signals it
 *   with both, not with a fill", which was wrong. Node 33365:102854 is
 *   `bg-[var(--color/color-8)]` (#322b27) where the other four are
 *   `bg-[var(--color/color-7)]` (#1f1f1f). Color 7 is the page's own ground, so
 *   the inactive pills read as unfilled and only the current one actually paints
 *   — which is why a fill was easy to miss in the export and impossible to miss
 *   in the node.
 */
/*
 * `aria-pressed` joins `--current`: since QA 2026-09-15 (86eywk4pt) the pills
 * are toggles over the filter drawer's category boxes, and category-pills.js
 * marks every checked one pressed — so two or three can be lit at once.
 */
.bc-cat-nav__pill--current,
.bc-cat-nav__pill[aria-pressed="true"] {
	border-color: var(--pdp-c3);
	background-color: var(--pdp-c8);
	color: var(--pdp-c3);
}

/* ── The grid ──────────────────────────────────────────────────────────────
 * Node I33399:117139;33365:102330 — three rows of four, cards 328×624, 24px
 * gaps on both axes (pitch 352 across, 648 down). 4 × 328 + 3 × 24 = 1384,
 * exactly the content width, which is how the 328 was confirmed.
 * ---------------------------------------------------------------------- */
.bc-cat-grid {
	/*
	 * ⚠ 12, NOT 24. The design’s nav container is 112 tall and ends at
	 *   frame-y 209 with 20px of its own bottom padding; the grid starts at 221.
	 *   So the gap the grid owns is 12 and the other 20 belong to the nav — the
	 *   single 24 here was standing in for both and came out 8 short.
	 */
	padding: 12px 0 0 !important;
}

.bc-cat-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Content/Category Page/Product List Gap = 24 */
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bc-cat-grid ul.products::before,
.bc-cat-grid ul.products::after {
	/* The theme's float clearfix would create phantom grid items. */
	content: none !important;
	display: none !important;
}

.bc-cat-grid ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* ── The result count and Load more ────────────────────────────────────────
 * Node 30428:166156 — `Frame 1261154588`, 1512×116: the count centred at y=20
 * (1512×24) and a 65×28 button at y=68 reading LOAD MORE, underlined.
 *
 * ⚠ A CORRECTION. An earlier note in this file and in the changelog said this
 *   block was "not rendered" and dismissed it as pagination rather than
 *   styling. Both were wrong: WOOF DOES render `nav.woocommerce-pagination`
 *   inside the grid on any category with more than one page, and all this file
 *   did was centre it — so it drew `1 2 →` as unstyled browser-default boxes,
 *   which is what Mitz screenshotted. The design draws no numbers at all.
 * ---------------------------------------------------------------------- */
.bc-cat-grid .woocommerce-result-count {
	/* WOOF's own copy, above the products. The toolbar shows it instead. */
	display: none !important;
}

/* ── The result count and Load more ────────────────────────────────────────
 * Node 30428:166156 — `Frame 1261154588`, 1512×116: the count centred at y=20
 * (1512×24) and a 65×28 button at y=68 reading LOAD MORE, underlined.
 *
 * ⚠ WOOF'S NUMBERED PAGINATION IS HIDDEN, NOT REMOVED, and that is deliberate.
 *   `nav.woocommerce-pagination` was rendering raw inside the grid — `1 2 →` as
 *   unstyled browser-default boxes, which is what Mitz screenshotted. The
 *   design draws no numbers. But the nav's `a.next` is the link WOOF binds its
 *   AJAX handler to, and `category-gate.js` clicks it, so it has to stay in the
 *   DOM. `display: none` is fine for that: a programmatic `.click()` still
 *   fires on a display-none element.
 * ---------------------------------------------------------------------- */
.bc-cat-grid nav.woocommerce-pagination {
	display: none !important;
}

.bc-cat-pager {
	box-sizing: border-box;
	/*
	 * 20 + 24 (count) + 24 (gap) + 28 (button) + 20 = the design’s 116. Its
	 * count sits at y=20 and its button at y=68, which fixes both paddings.
	 */
	padding: 20px 0;
	text-align: center;
}

/* Same string and same treatment as the toolbar's copy: Inter 16/24, Color 5. */
.bc-cat-pager__count {
	margin: 0 0 24px;
	color: var(--pdp-c5);
	font-family: var(--pdp-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/*
 * ⚠ INTER, NOT BARLOW. The button's own variables name `Font Style/Primary` —
 *   Barlow Semi Condensed — and RULE 6 substitutes that for Inter without
 *   asking. One visible consequence: the design's box is 65 wide because Barlow
 *   is condensed, and "LOAD MORE" in Inter at the same 14px comes out nearer
 *   78. The type is the design's; the width follows the substitution.
 *
 * The underline is `Color/Color  2` (#8a6e57) from the same set, drawn as a
 * border rather than `text-decoration` so it sits clear of the descenders and
 * keeps the design's gap.
 */
.bc-cat-pager__more {
	/*
	 * ⚠ BLOCK, NOT INLINE-BLOCK. As an inline-block it sat on a line box sized
	 *   by the inherited 26.04px line-height rather than its own 28, which made
	 *   the section 119 tall against the design’s 116. Centred by auto margins on
	 *   a fit-content width instead of by the parent’s `text-align`.
	 */
	display: block;
	width: fit-content;
	box-sizing: border-box;
	margin: 0 auto;
	/*
	 * ⚠ `pb-[2px]` ON A 26px LINE, which is the design's own pair — node
	 *   30428:166158 is `border-b-2 pb-[2px]` around a `leading-[26px]` label.
	 *   This was 6px on a 20px line: the same 28 overall, so the button's box
	 *   matched while the rule sat 4px further from the text than the design
	 *   draws it. Two wrongs cancelling in the total is exactly what a box
	 *   measurement cannot see.
	 */
	padding: 0 0 2px;
	border: 0;
	border-bottom: 2px solid var(--pdp-c2);
	border-radius: 0;
	background: none;
	color: var(--pdp-c4);
	font-family: var(--pdp-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 26px;
	text-transform: uppercase;
	cursor: pointer;
}

/*
 * ⚠ `background: none` HAS TO BE RESTATED ON HOVER. Mitz, 2026-09-07: "for
 *   LOAD MORE where hovered remove the background color and the border on bottom
 *   become color var(--pdp-c4)."
 *
 *   `style.css` carries `button:hover { background: #826852 }` at **(0,1,1)** — a
 *   type plus a pseudo-class — which outranks the base rule's `background: none`
 *   at (0,1,0). This selector is (0,2,0) and set only the border and the colour,
 *   so a solid brown block appeared behind the label under the pointer. Measured
 *   with a real pointer: `rgba(0,0,0,0)` → **`rgb(130, 104, 82)`**, which is
 *   #826852 exactly.
 *
 * ⚠ SECOND CONTROL ON THIS PAGE TO HIT THE SAME RULE, after the gate's
 *   "Change postcode" pill, and the areas trigger below makes three. The pattern
 *   is now explicit: **every `<button>` on this page styled as anything other
 *   than a filled button must restate `background` in its hover rule.** The
 *   `<a>`-based controls have the mirror-image problem with
 *   `a:hover { text-decoration: underline }`.
 *
 * ⚠ The label's own hover colour is left at Color 3 because that is not what
 *   was asked to change. Worth noting it now reads tan against a Color 4
 *   underline; one line makes them match if that is wanted.
 */
.bc-cat-pager__more:hover,
.bc-cat-pager__more:focus-visible {
	background: none;
	border-bottom-color: var(--pdp-c4);
	color: var(--pdp-c3);
}

/* ── Endorsement: the two-column variant ──────────────────────────────────
 * Node I33399:117139;33365:102866 — section 1512×506.7, two 686 columns 12px
 * apart, text left and image right.
 *
 * ⚠ EVERY COSMETIC RULE FOR THIS SECTION IS SCOPED TO THE PDP, AND THE
 *   SECTION RENDERED UNSTYLED HERE. This is a correction to the note at the
 *   top of this file and to the build's changelog, both of which said the
 *   endorsement's rules "live in `pdp-redesign.css`" and were reused. Only
 *   the LAYOUT was reusable: all 16 of that file's `.bc-pdp-endorsement`
 *   rules are prefixed `.chuni-beef-banner .summary`, a scope this page
 *   never renders, so on a rendered category page the heading came out as
 *   16.8px Cardo and every line inherited the page's `#111` — near-black
 *   text on a near-black ground. `.bc-pdp-reasons` genuinely IS unscoped,
 *   which is why the why-choose band below measures the design's 876 exactly
 *   and this one did not.
 *
 *   Restated here rather than by de-scoping those rules, which would restyle
 *   the PDP's own endorsement on a page that is deferred and unverified.
 *   Values are this node's own variables, not the PDP's: `H2/Textured` is
 *   Northwest Textured 48/48 where the PDP's title is the h6 step.
 *
 * ⚠ THE RIGHT COLUMN IS A YOUTUBE IFRAME AND THE DESIGN DRAWS A PHOTO.
 *   `endorsement.php` emits `.bc-pdp-endorsement__video` for the PDP; the
 *   design's node here is a 686×378.67 Image of Dr Louise & Jason with a
 *   caption baked in. The box is the right size and in the right place, but
 *   it is the wrong medium and currently paints black. Left as-is: swapping a
 *   video for a still is a content decision and the asset is not in the repo.
 *   Raised for Mitz.
 * ---------------------------------------------------------------------- */

/*
 * The SECTION is the grid, not the figure, because the design puts the
 * heading INSIDE the left column (686×144, the column's first item) while our
 * markup has it as a sibling above the figure. `display: contents` on the
 * figure hoists the quote, the attribution and the media into this grid so
 * all four can be placed; without it the heading could only sit full-width
 * above, which is the 20px band that made the section 526.8 against 506.7.
 */
.bc-pdp-endorsement--split {
	display: grid;
	grid-template-columns: 686fr 686fr;
	gap: 0 12px;
	align-items: start;
	box-sizing: border-box;
	max-width: calc(var(--bc-cat-content) + var(--bc-cat-gutter) * 2);
	margin: 0 auto;
	padding: 64px var(--bc-cat-gutter);
}

.bc-pdp-endorsement--split .bc-pdp-endorsement__figure {
	display: contents;
}

.bc-pdp-endorsement--split .bc-pdp-endorsement__title {
	grid-column: 1;
	grid-row: 1;
}

.bc-pdp-endorsement--split .bc-pdp-endorsement__quote {
	grid-column: 1;
	grid-row: 2;
}

.bc-pdp-endorsement--split .bc-pdp-endorsement__attribution {
	grid-column: 1;
	grid-row: 3;
}

.bc-pdp-endorsement--split .bc-pdp-endorsement__media {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: stretch;
}

.bc-pdp-endorsement--split .bc-pdp-endorsement__media,
.bc-pdp-endorsement--split .bc-pdp-endorsement__video {
	/* 686 × 378.67 in the design. */
	aspect-ratio: 686 / 378.67;
	width: 100%;
	height: auto;
}

/*
 * ⚠ AT EVERY WIDTH, NOT ONLY ≤999. QA 2026-09-15 (86eywk4y3): footer.php gives
 *   the Vimeo iframe `.youtube-iframe`, and style.css sizes that class in
 *   PIXELS with `!important` (736 wide, then 652 under 1400). Inside a grid
 *   column already narrower than that — 652 at 1366, 522 at 1200 — the frame
 *   pushed past the section's right edge; measured 736 wide in a 1024 viewport.
 *   The ≤999 block already carried this override; it now applies at all widths,
 *   and the column may shrink below its content.
 */
.bc-pdp-endorsement--split .bc-pdp-endorsement__media {
	min-width: 0;
}

.bc-cat .bc-pdp-endorsement--split iframe.bc-pdp-endorsement__video {
	width: 100% !important;
	height: auto !important;
}

/*
 * ── The cosmetics the PDP scope withheld ─────────────────────────────────
 * Scoped `.bc-cat` so they reach this page and nowhere else. `!important` on
 * the margins only, and only where the theme sets one on the element type:
 * `h2`, `p` and `blockquote` all carry theme margins, which is the same
 * reason the PDP's copies of these rules flag them.
 */

/* `H2/Textured` — Northwest Textured 48/48, weight 400, Color 3. The design's
 * node is 686×144, three lines of 48. */
.bc-cat .bc-pdp-endorsement__title {
	margin: 0 0 12px !important;
	color: var(--pdp-c3);
	font-family: var(--pdp-font-textured);
	font-size: 48px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 48px;
	text-transform: uppercase;
}

/*
 * The marks sit at the quote block's outer corners — the design has the
 * opening one at y=143.66, twelve above the quote frame, and the closing one
 * at x=669 y=298.41, its bottom-right. Relative positioning plus 40px of
 * inset gives that without absolute magic numbers.
 */
.bc-cat .bc-pdp-endorsement__quote {
	position: relative;
	margin: 0 0 12px !important;
	padding: 24px 40px;
	quotes: none;
}

.bc-cat .bc-pdp-endorsement__mark {
	position: absolute;
	width: 46px;
	height: 40px;
	opacity: 0.55;
}

.bc-cat .bc-pdp-endorsement__mark--open {
	top: 0;
	left: 0;
}

.bc-cat .bc-pdp-endorsement__mark--close {
	right: 0;
	bottom: 0;
}

/* ⚠ Special Elite, per RULE 6: `Frame 1261154926` sets the vet pull-quote in
 *   the decoration face and the sub-copy immediately beneath it in Inter 14.
 *   The design's node is 606×40 — two lines of 20. */
/*
 * ⚠ 16px WITH 1px OF TRACKING, NOT 18px PLAIN. Node 33365:102974 is
 *   `Special_Elite:Regular` at **16px, `tracking-[1px]`**, on a 20px line. At
 *   18/0 the pull-quote was both a size large and set tighter than the design —
 *   and the letter-spacing is the part that matters most in a typewriter face,
 *   because it is what keeps the quote reading as typed rather than as set.
 */
.bc-cat .bc-pdp-endorsement__pull {
	margin: 0 0 4px !important;
	color: var(--pdp-c4);
	font-family: var(--pdp-font-decoration);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 20px;
}

/*
 * `Links/Regular` — Inter 14 on a 26 line. The node is 606×52, two lines.
 *
 * ⚠ COLOR 4, NOT COLOR 5. Node 33365:102973 sets `Color/Color 4` (#f5f2ee) on
 *   the whole quote block, so the pull-quote and this sub-copy are the SAME
 *   colour and only the face and size separate them. #d1d0cf dropped this line a
 *   step and made it read as a caption under the quote rather than part of it.
 */
.bc-cat .bc-pdp-endorsement__body {
	margin: 0 !important;
	color: var(--pdp-c4);
	font-family: var(--pdp-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
}

/*
 * Name 686×22 then role 686×26, stacked with no gap — 48 together.
 *
 * ⚠ NO TOP MARGIN, OR THE GAP DOUBLES. The design's left column is a single
 *   `gap-[12px]` stack (node 33365:102969), and the quote above already carries
 *   `margin-bottom: 12px`. Grid items do not collapse margins against each
 *   other, so 12 + 12 measured **24** between the quote and the attribution
 *   against the design's 12.
 */
.bc-cat .bc-pdp-endorsement__attribution {
	display: flex;
	flex-direction: column;
}

.bc-cat .bc-pdp-endorsement__name {
	color: var(--pdp-c3);
	font-family: var(--pdp-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}

/*
 * ⚠ INTER ITALIC, NOT SPECIAL ELITE. Node 33365:102978 is `Inter:Italic` at
 *   14 on a 26 line — the only italic on the page. RULE 6 says to apply Special
 *   Elite "node by node" and not to treat it as "the serif one"; this node is
 *   the case in point, sitting directly under a Special Elite pull-quote in the
 *   same block. Special Elite also has no italic, so the browser was synthesising
 *   a slant on a face that never had one.
 */
.bc-cat .bc-pdp-endorsement__role {
	color: var(--pdp-c3);
	font-family: var(--pdp-font-body);
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	line-height: 26px;
}

/* ── Not sure which box? ───────────────────────────────────────────────────
 * Node I33399:117139;33386:109325 — 1512×492 on #292929.
 *
 * ⚠ The text column is EXACTLY centred against the images and the design's own
 *   numbers prove it rather than my eye: images 364 tall from y=64, text 260
 *   tall from y=116, and (364 − 260) / 2 = 52 = 116 − 64. So this is a centred
 *   flex row. Section height follows: 64 + 364 + 64 = 492.
 * ---------------------------------------------------------------------- */
.bc-cat-nsb {
	box-sizing: border-box;
	background-color: var(--pdp-band);   /* #292929 */
}

.bc-cat-nsb__inner {
	display: flex;
	align-items: center;
	/* 848 − 64 − 744 = 40 */
	gap: 40px;
	box-sizing: border-box;
	max-width: calc(var(--bc-cat-content) + var(--bc-cat-gutter) * 2);
	margin: 0 auto;
	padding: 64px var(--bc-cat-gutter);
}

/*
 * ⚠ FLUID BELOW 1512, FIXED AT IT. QA 2026-09-15 (86eywk4y3): between 1000 and
 *   1511px the two 364px images plus the 600px body plus the gaps came to
 *   1448px inside a narrower viewport, and the body — `flex: none; width: 600px`
 *   — ran off the right edge: measured at 1440 the body sat at x=848 and ended
 *   at 1448, at 1280 the same, so "NOT SURE" and both buttons were clipped.
 *   The ≤999 rules stack the section and never saw it. Now the images and the
 *   body all shrink from their design sizes; at 1512 nothing changes because the
 *   sum still fits. The ≤999 block sets the body back to `flex: none` because a
 *   flex-basis is a HEIGHT once the container is a column.
 */
.bc-cat-nsb__media {
	display: flex;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

.bc-cat-nsb__image {
	display: block;
	flex: 0 1 364px;
	min-width: 0;
	width: 364px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	/* The sources are 1000×562, so the square boxes crop rather than squash. */
	object-fit: cover;
}

.bc-cat-nsb__body {
	flex: 1 1 600px;
	min-width: 0;
	max-width: 600px;
}

/*
 * H2/Textured 48/48, uppercase.
 *
 * ⚠ GOLD/100 (#a4866c), NOT COLOR 3 (#c9a98a). Node 33386:109328 hardcodes
 *   `text-[#a4866c]` rather than reading Color 3, and so does the why-choose
 *   title below it — while the endorsement title in between genuinely IS Color 3
 *   (node 33365:102970). Two section headings on one darker gold and the third a
 *   step lighter looks like drift in the design and is consistent across every
 *   frame, desktop to mobile, so it is transcribed rather than tidied.
 */
.bc-cat-nsb__title {
	margin: 0 0 12px !important;
	padding: 0;
	color: var(--bc-cat-gold-100);
	font-family: var(--pdp-font-textured);
	font-size: var(--pdp-h2);
	font-weight: 400;
	line-height: var(--pdp-h2-lh);
	text-transform: uppercase;
}

/* ⚠ Fonts/Decoration — Special Elite, not Inter. The design sets this lede in
 *   the decorative face, the same treatment as the why-choose sub-line. */
.bc-cat-nsb__lede {
	margin: 0 0 24px;
	/* Node 33386:109330 is `text-white`, not Color 4. */
	color: var(--pdp-c11);
	font-family: var(--pdp-font-decoration);
	/*
	 * ⚠ 20, NOT 16. `Size/Paragraph big` in this node's own variable set
	 *   (33386:109327) is 20 on `leading-6` 24, in `Fonts/Decoration`. The
	 *   design's lede node is 600×**72** — three lines of 24 — and at 16px ours
	 *   came out 600×48 on two, which shortened the whole text column to 236
	 *   against the design's 260 and re-centred it 12px low against the images.
	 */
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
}

.bc-cat-nsb__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.bc-cat-nsb__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 346px;
	min-height: 46px;
	/*
	 * ⚠ 8px SIDE PADDING, MEASURED OFF THE EXPORT, NOT 24. `p-6` (24) and `p-3`
	 *   (12) are both in this button's variable set and 24 looked like the
	 *   horizontal one — but a variable SET lists what exists in a subtree, not
	 *   what a given node resolves to, and 24 made the label wrap and the button
	 *   69 tall against the design's 46.
	 *
	 *   Scanned the design's own pixels instead. The primary button's box is
	 *   x 848..1193 (346 wide, 47 tall) and its label's ink is x 856..1185 —
	 *   **330 wide** — which leaves (346 − 330) / 2 = 8 a side. 330 is also what
	 *   "New to raw? See our Transition Box →" measures at 18px Inter Semi Bold,
	 *   so the 18 from the variables IS right and only the padding was wrong.
	 *   With 24 the content box is 298 and the label cannot fit on one line.
	 *
	 *   The labels are identical in both, so this is a real constraint rather
	 *   than our copy being longer than the mock's.
	 */
	padding: 12px 8px;
	/*
	 * ⚠ AND `nowrap`, BECAUSE THE DESIGN HAS NO SLACK EITHER. Measured both
	 *   sides: our label needs **329.9px** on one line at this font, and the
	 *   design's own label ink is **330px** — the same string at the same size.
	 *   The box is 346, so after 8px of padding a side and a 1px border the
	 *   content box is 328 and the line is 1.9px too long. Without `nowrap` that
	 *   1.9px wraps the label and the button becomes 69 tall instead of 46.
	 *
	 *   So the one line is declared rather than fitted. The label then uses
	 *   ~1px of the padding on each side, which is what the design does too:
	 *   330 of ink centred in 346 leaves 8 a side, and ours leaves 8.05.
	 *
	 *   ⚠ Do not "fix" this by dropping the font to 14. That was the original
	 *   value, it fitted, and it was wrong — the design's button type is 18.
	 */
	white-space: nowrap;
	border: 1px solid var(--pdp-c3);
	border-radius: 0;
	font-family: var(--pdp-font-body);
	font-size: 18px;
	font-weight: 600;
	/*
	 * ⚠ 1, NOT 1.2 — the token's own value. `Paragraph/Bold` carries
	 *   `lineHeight: 100`, i.e. 100%. At 1.2 the line box was 21.6 and the
	 *   button came out 47.6 (21.6 + 24 padding + 2 border) against the
	 *   design's 46; at 1 it is 18 + 24 + 2 = 44, so `min-height: 46` above
	 *   sets the height and the label centres in it. That 1.6px also carried
	 *   into the actions block (107.2 vs 104) and the text column (263.2 vs
	 *   260), so it was the last of the difference in this section.
	 */
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.bc-cat-nsb__button--primary {
	background-color: var(--pdp-c3);
	color: var(--pdp-c7);
}

.bc-cat-nsb__button--ghost {
	background-color: transparent;
	color: var(--pdp-c3);
}

/*
 * Hover. The outlined button fills to its border colour, as on the PDP.
 *
 * ⚠ THE FILLED ONE GOES TO COLOR 6, which is a bigger jump than the PDP's
 *   "darken one step" and is a direct instruction rather than a design value —
 *   Mitz, 2026-09-08: "for button 'New to raw? See our Transition Box' when
 *   hovered update the background color to #49423F". That hex IS `--pdp-c6`,
 *   so it is set through the token rather than as a literal.
 *
 *   Checked before applying, because it inverts the button: resting is a tan
 *   block with a near-black label, and #49423f is dark enough that keeping a
 *   dark label would have been unreadable — `--pdp-c7` on it measures
 *   **1.68:1**, the same failure as the PDP's per-kg price (Known Limitations
 *   20). The label was already `--pdp-c11` white on hover, which measures
 *   **9.84:1** and needs no change. The border follows the fill so the button
 *   still reads as one solid block; left at Color 3 it would have drawn a tan
 *   ring around a dark centre.
 */
/*
 * ⚠ `text-decoration: none` HAS TO BE RESTATED ON HOVER, and only ONE of these
 *   two buttons ever showed it. Mitz, 2026-09-07: "remove the line on text 'New
 *   to raw? See our Transition Box'."
 *
 *   `bootstrap.min.css` carries `a:hover { text-decoration: underline }` at
 *   **(0,1,1)** — a type plus a pseudo-class — which outranks the base
 *   `.bc-cat-nsb__button` rule's `text-decoration: none` at (0,1,0). The hover
 *   rules below set the border, the background and the colour and said nothing
 *   about the underline, so it came back the moment the pointer landed.
 *
 * ⚠ AND THAT IS WHY ONLY THE PRIMARY UNDERLINED. `not-sure-which-box.php` makes
 *   the primary an `<a>` (it navigates to the Transition Box) and the ghost a
 *   `<button>` (it opens the calculator modal) — so the ghost never met
 *   `a:hover` at all. Measured with a real pointer: primary `none` →
 *   **`underline`**, ghost `none` → `none`.
 *
 *   Declared on both anyway, so the pair cannot drift apart if the ghost ever
 *   becomes a link. Third time this exact bootstrap rule has been answered on
 *   this page — see the note on `.bc-cat-nav__pill:hover`.
 *
 * ⚠ SYNTHETIC MOUSE EVENTS CANNOT FIND THIS. A dispatched `mouseover` does not
 *   set `:hover` — only the real pointer does — so the first probe reported
 *   "changed=false" for both buttons and the title below. `scratchpad/hoverreal.js`
 *   drives Playwright's own `hover()` instead.
 */
.bc-cat-nsb__button--primary:hover,
.bc-cat-nsb__button--primary:focus-visible {
	border-color: var(--pdp-c6);
	background-color: var(--pdp-c6);
	color: var(--pdp-c11);
	text-decoration: none;
}

/*
 * ⚠ THE LABEL DELIBERATELY DOES NOT CHANGE, and this hover FAILS WCAG AA.
 *   Mitz, 2026-09-08: "when Food Calculator button is hovered dont change the
 *   text color, update the background color to #F9F6F3". Applied as asked, and
 *   recorded rather than applied quietly:
 *
 *     label  --pdp-c3  #c9a98a   (unchanged from the resting state)
 *     fill             #f9f6f3
 *     measured         ~2.05:1
 *
 *   The label is 18px/600, which is just under WCAG's large-text threshold
 *   (14pt bold = 18.66px), so the bar here is **4.5:1** — and 2.05 would miss
 *   even the lenient 3:1. The previous hover inverted the button instead
 *   (tan fill, `--pdp-c7` label) and measured 7.48:1.
 *
 *   Two ways back if that matters, both one line: darken the label to
 *   `--pdp-c6` #49423f on this fill (10.3:1), or restore the inversion. See
 *   Known Limitations 333 — this is the same class of issue as item 20, and
 *   unlike item 20 it is a deliberate instruction rather than a design defect.
 *
 * ⚠ `#f9f6f3` IS NOT ONE OF THE PAGE'S TOKENS. Nearest is `--pdp-c4` #f5f2ee,
 *   four steps off per channel — close, but not the same value, so it is set
 *   literally rather than pretending a token matches.
 */
.bc-cat-nsb__button--ghost:hover,
.bc-cat-nsb__button--ghost:focus-visible {
	background-color: #f9f6f3;
	text-decoration: none;
}

.bc-cat-nsb__arrow {
	flex: none;
}


/* ==========================================================================
 * WHY CHOOSE: the band's own colours, from its nodes
 *
 * ⚠ SCOPED `.bc-cat` FOR THE SAME REASON THE GEOMETRY BELOW IS. These four
 *   `.bc-pdp-reasons` rules are unscoped in `pdp-redesign.css`, so they are
 *   shared with the PDP, whose own narrow view is deferred and unverified. The
 *   corrections here are read off the category frames' nodes; the PDP renders
 *   the same component and almost certainly wants them too, but that is a change
 *   to a page this pass has not measured. Flagged for the PDP rather than
 *   applied to it.
 * ========================================================================== */

/*
 * ⚠ GOLD/100, NOT COLOR 3 — node 33391:112339 hardcodes `text-[#a4866c]`,
 *   exactly as the not-sure title does. See the note on `.bc-cat-nsb__title`.
 */
.bc-cat .bc-pdp-reasons__title {
	color: var(--bc-cat-gold-100);
}

/* Node 33391:112341 is `text-white`, not Color 5. */
.bc-cat .bc-pdp-reasons__sub {
	color: var(--pdp-c11);
}

/* Node 33391:112347 is `Body/Medium` in white — Inter 500 at 16/24. The weight
 * and the size were already right; only the colour was a step down. */
.bc-cat .bc-pdp-reasons__text {
	color: var(--pdp-c11);
}

/*
 * ⚠ 30, NOT 24, AND ONLY ON DESKTOP. Node 33391:112344 is `gap-[30px]`
 *   between a reason's 100px icon and its caption. The narrow frames are a
 *   different arrangement entirely — a 60px icon with the caption BESIDE it at
 *   x=72, i.e. 12 — which the tier below already sets, so this has to be bounded
 *   or it would win there too: it is (0,2,0) against the shared rule's (0,1,0)
 *   and would outrank it inside its own media query.
 *
 *   This is the last of the three internals the PDP audit flagged as differing
 *   in this band ("icon gap 24 vs 30").
 */
@media (min-width: 1000px) {
	.bc-cat .bc-pdp-reasons__item {
		gap: 30px;
	}
}

/* ==========================================================================
 * "View delivery areas & schedule" — the slide-in MOVED to pdp-redesign.css
 * on 2026-09-16, when Mitz asked for the PDP to arrive the same way. This file
 * only loads on category pages; pdp-redesign.css loads on both, so one rule can
 * now serve both scopes. Read it there — the history and the reasoning moved
 * with it, unchanged.
 * ========================================================================== */

/* The drawers honour this too — there by dropping the transition, here by
 * dropping the keyframe's travel. The panel still arrives; it just does not
 * slide. */
@media (prefers-reduced-motion: reduce) {
	body:has(#topback.bc-cat) div.spu-box.bc-learn-popup {
		animation: none;
	}
}

/* ==========================================================================
 * TABLET AND MOBILE
 *
 * Designs: `PRODUCT CATEGORY PAGE - tablet` 33399:118428 (744 wide) and
 * `PRODUCT CATEGORY PAGE - mobile` 33399:120110 (428 wide). This retires the
 * "DESKTOP ONLY" warning at the top of this file.
 *
 * ⚠ THE EXPORTS ARE DEVICE MOCKS AND THE FRAMES ARE NOT. `TABLET-category-page.png`
 *   is 752×5841 and `MOBILE-category page.png` is 436×7535 — 8px wider than the
 *   744 and 428 frames, with the heights matching exactly. That is the 4px
 *   bezel on each side, the same trap the PDP frames set (Known Limitations
 *   188). So every landmark read off a pixel here is `frame x + 4`, and the
 *   BREAKPOINTS come from the frames: 744 and 428.
 *
 * ⚠ BREAKPOINTS ARE 1000 AND 600, MATCHING `pdp-redesign.css`. That file
 *   already carries a full narrow build at `max-width: 999px` and
 *   `max-width: 600px`, and it sets `--pdp-gutter` to 24 and 20 in them —
 *   which is exactly what these two frames use for their side margins
 *   (744 − 2×24 = 696, 428 − 2×20 = 388). Reusing the tiers means the card
 *   internals, the reasons band and the type scale all step at the same
 *   widths on both page types instead of two ladders 100px apart.
 *
 * ⚠ THE CARDS NEEDED ALMOST NOTHING, and that is the payoff for carrying
 *   `bc-pdp-cards` on the grid. Every card rule is scoped
 *   `.bc-pdp-cards li.product …` in `pdp-redesign.css`, INCLUDING its two
 *   narrow blocks — so the 12px body padding, the 60px icons and the mobile
 *   One Time row that stacks its price under its label all arrive here for
 *   free. Verified against the frames: the design's tablet card stacks nothing
 *   and its mobile card stacks that one row, which is what those rules
 *   already do. Only the grid's own columns and gaps are set below.
 *
 * ⚠ AND THE `.bc-pdp-reasons` OVERRIDES ARE SCOPED `.bc-cat` ON PURPOSE. That
 *   band's rules are genuinely unscoped, so they are shared with the PDP, and
 *   the PDP's own narrow view is deferred and unverified. The category frames
 *   want a 600/388 bowl where the PDP frames measured 539/317, and a 24/20
 *   section padding where the shared rule has 64 — real disagreements, not
 *   rounding. Scoping them keeps this page's numbers off a page nobody has
 *   checked yet.
 * ========================================================================== */

/* ==========================================================================
 * GATE BAR: THE TABLET STACK STARTS AT 1399, NOT 999
 *
 * QA 2026-09-10 (Mitz), clarified twice: “less than 1400 the postcode fields is
 * below View delivery areas & schedule same on tab setup … the bc-cat-gate is
 * setup like that if tab view, less than 1400 it should be setup like that.”
 *
 * ⚠ THE GATE ONLY. An earlier pass moved the hero band with it — text column,
 *   title size, the 384px photo — and was reverted: the ask is the bar inside
 *   the red box, not the band above it. So the hero keeps its desktop layout to
 *   999 and only the stacking below changes tier. The bar keeps the page gutter
 *   too, so the prompt stays aligned with the hero text above it.
 *
 * The rules are the tablet tier’s own, moved verbatim from the 999 block (their
 * notes still describe the 744 frame they were read from).
 *
 * ⚠ TWO COPIES OF THE SAME TWO RULES, ON PURPOSE. QA 2026-09-10 (Mitz): “it didnt
 *   applied on 1399, on 1388.” A media query reads the window width INCLUDING
 *   the vertical scrollbar; the html box measured in DevTools excludes it. So
 *   with a real scrollbar this query fires at a LAYOUT width of ~1384, not 1399.
 *   category-gate.js measures the layout width itself and sets `bc-gate-stack`
 *   on <html> below 1400; the class-keyed copy below the media block is what
 *   actually lands on Mitz’s screen at 1399. The media copy stays as the no-JS
 *   fallback — the two disagree only across the scrollbar’s width, where the
 *   class is right.
 * ========================================================================== */
@media (max-width: 1399px) {
	/* ── Gate bar ───────────────────────────────────────────────────────────
	 * `Input state` is 744×138 with the prompt at (24,14) and the 500×48 widget
	 * at (24,76): the bar STACKS, 20 apart, in 14 of vertical padding.
	 *
	 * ⚠ AND IT IS A COLUMN NOW, NOT A WRAPPED ROW. Mitz, 2026-09-07, from a
	 *   768px tablet view: "when tablet view the postcode fields should below
	 *   'View delivery areas & schedule'." An earlier version of this block said
	 *   there was NOTHING TO DO at this tier, on the reasoning that
	 *   `flex-wrap: wrap` plus the widget's `min-width: 340px` would exceed the
	 *   696 container and wrap on its own. It does — at 744. It does not at 768.
	 *
	 *   The threshold is arithmetic: a flex line breaks on the items' hypothetical
	 *   main sizes, which here are the intro's ~338 of content and the widget's
	 *   340 floor, so 338 + 20 + 340 = **698**. At 744 the container is 696 and
	 *   the widget wraps; at 768 it is 720 and both fit, so the field jumped back
	 *   up beside the label — and, in the confirmed state Mitz was in, landed
	 *   BEHIND the dogs' paws, which is exactly where the photo overhangs.
	 *
	 * ⚠ THAT WAS VERIFIED AT ONE WIDTH AND CALLED CORRECT. 744 is the frame's
	 *   width, so measuring only there could not distinguish "stacks because a
	 *   rule says so" from "stacks because it happens not to fit" — and the tier
	 *   is 601–999, not 744. Declared as a column, the stack holds across all of
	 *   it, and the tablet frame's own 138 still comes out: 14 + 42 + 20 + 48 + 14.
	 * ------------------------------------------------------------------- */
	.bc-cat-gate {
		flex-direction: column;
		align-items: flex-start;
	}

	/*
	 * ⚠ `flex: 1 0 0` HAS TO GO, BECAUSE THE AXIS TURNED. Both of these fill
	 *   the row's free space on desktop, and in a column that basis of 0 applies
	 *   to their HEIGHT instead — a 48-tall field measuring 0. `flex: none` with
	 *   `width: 100%` gives the design's behaviour on the new axis: the full
	 *   container, capped at the 500 the frame draws on tablet, and the container's
	 *   own 388 on mobile, where 500 is wider than the page.
	 *
	 * ⚠ AND `min-width: 0`, WHICH IS NOT TIDYING. The 340 floor is what makes
	 *   the desktop row wrap, but as a floor it also survives into widths where
	 *   the container is NARROWER than it: at a 360px phone the content box is 320
	 *   and the field would have overflowed it by 20, silently, since the theme
	 *   carries `html, body { overflow-x: hidden }`. 428 is the frame, not the
	 *   floor of the tier.
	 */
	.bc-cat-gate__widget,
	.bc-cat-gate__confirmed {
		flex: none;
		width: 100%;
		min-width: 0;
		max-width: 500px;
	}

	.bc-cat-gate__confirmed-text {
		padding-left: 0;
	}
}

/* The layout-width copy — see the note above the media block. (0,2,1) against the
 * desktop base rules at (0,1,0), so it wins whenever the class is present. */
html.bc-gate-stack .bc-cat-gate {
	flex-direction: column;
	align-items: flex-start;
}

html.bc-gate-stack .bc-cat-gate__widget,
html.bc-gate-stack .bc-cat-gate__confirmed {
	flex: none;
	width: 100%;
	min-width: 0;
	max-width: 500px;
}

/* Mitz, 2026-09-10 QA: stacked, the text starts on the prompt’s left edge —
 * the 14px it carries on desktop (465) would push it 14 in. Right side kept. */
html.bc-gate-stack .bc-cat-gate__confirmed-text {
	padding-left: 0;
}

@media (max-width: 999px) {
	.bc-cat {
		/* 744 − 2 × 24 = 696, the container every section measures. */
		--bc-cat-gutter: 24px;
	}

	/* ── Hero ───────────────────────────────────────────────────────────────
	 * `Header for category page` is 744×434 — a 296 band over a 138 gate.
	 * ------------------------------------------------------------------- */
	.bc-cat-hero {
		min-height: 296px;
	}

	/*
	 * ⚠ 389 AT BOTH NARROW TIERS, WHICH IS NOT A COINCIDENCE. `Frame 1261154968`
	 *   is 389 wide in the tablet frame AND in the mobile one; only its inner
	 *   padding changes (24 a side on tablet, 20 on mobile), so the text column
	 *   is 341 then 349. The frame is the same box either way, so the max-width
	 *   is declared once and the gutter variable does the rest.
	 *
	 * ⚠ 75 TOP AND BOTTOM, NOT 24. The text frame is 194 tall and sits at y=51
	 *   in a 296 band — vertically centred, with 24 of its own padding inside
	 *   that. 51 + 24 = 75, and 146 of content between them is the design's 296.
	 *   Reading the gutter here instead would have given 24 and left the band
	 *   194 tall.
	 */
	.bc-cat-hero__inner {
		max-width: 389px;
		padding: 75px var(--bc-cat-gutter);
	}

	/*
	 * H3/Textured steps 36 → 30. Measured off the export rather than assumed:
	 * "COMBO BOXES" is 184px of ink with a 21px cap height at 744, against 147
	 * and 17 at 428 — and 21px of cap is what `--pdp-h2: 30px` was derived from
	 * on the PDP frames. The 32px line is the design's own box height.
	 */
	.bc-cat-hero__title {
		font-size: 30px;
		line-height: 32px;
	}

	/*
	 * The dogs. `Frame 1261154969` is 384×334 at x=352, y=78, so right = 744 −
	 * 352 − 384 = 8 and the image inside it lands at y=118 off the frame's own
	 * 40px of top padding.
	 *
	 * ⚠ THE ASPECT RATIO NEVER MOVES — 384/232.31, 306/185.12 and the desktop
	 *   517/312.8 are all 1448/876 to four figures. So `.bc-cat-hero__photo-box`
	 *   and its `top: -7.08% / height: 123.97%` crop are correct at every width
	 *   and only the outer box is resized. `height: auto` because the outer box
	 *   neither clips nor paints — the design's 334 is 109 more than its own
	 *   content and means nothing on screen.
	 */
	.bc-cat-hero__photo {
		/*
		 * ⚠ ANCHORED TO THE BAND'S BOTTOM, NOT ITS TOP, AND THE DESIGN'S OWN
		 *   `top: 78` IS WHY. Measured at 744 the band comes out 320 rather than
		 *   the design's 296, because the intro wraps to four lines at a 341
		 *   column where the frame draws three — the same substitution slack the
		 *   `min-height: 282` note above records for desktop, and unavoidable
		 *   while five categories with five different intros share this band.
		 *
		 *   Transcribed as `top: 78` that cost 24px OF OVERHANG: the paws hung 30
		 *   below the bar instead of the design's 54, because the band grew
		 *   underneath a photo pinned to its top. Anchoring the other end keeps
		 *   the one relationship the design is actually about — dogs breaking the
		 *   line of the dark bar — identical on all five pages, and spends the
		 *   slack on the gap above the photo, where nothing is drawn.
		 *
		 *   54 is the design's own overhang: its image runs y 118..350.3 in a
		 *   296-tall band.
		 */
		top: auto;
		bottom: -52px;
		right: 8px;
		width: 384px;
		height: auto;
	}

	/* ── Toolbar ────────────────────────────────────────────────────────────
	 * `Container` I33399:118429;30428:166067 is 696×52 — the same 52-tall
	 * content box as desktop, so the box arithmetic (24 + 52 + 8 + 1 = 85) and
	 * `min-height: 84px` carry over unchanged. Two things do change.
	 * ------------------------------------------------------------------- */

	/*
	 * ⚠ GAP 0, AND THE DESIGN PROVES IT RATHER THAN SUGGESTS IT. The Filter
	 *   frame is 0..64, the count box 64..638 and the Sort frame 638..696:
	 *   three boxes that tile the 696 exactly, with no space between them.
	 *   696 − 64 − 58 = 574, which is the count node's own width. With the
	 *   desktop 24 the count box came out 526 and its centred text sat 24 left
	 *   of where the design puts it.
	 */
	.bc-cat-toolbar {
		gap: 0;
	}

	/*
	 * 18 → 16. Both labels are 40 and 34 wide against desktop's 45 and 38, and
	 * 40/45 = 16/18 exactly. The 19px line is the design's own 19-tall text box.
	 */
	.bc-cat-toolbar__control {
		font-size: 16px;
		line-height: 19px;
	}

	/* ── Select your category ───────────────────────────────────────────────
	 * The container stays 112 tall with the same 12 above it, so only the
	 * pills change.
	 * ------------------------------------------------------------------- */

	/*
	 * ⚠ ONE ROW THAT SCROLLS, NOT A WRAPPED BLOCK. `Frame 1261154895` is **957**
	 *   wide inside a 696 container and again inside a 388 one — the design
	 *   draws the row overflowing and clipped at the frame edge, with the fifth
	 *   pill cut in half on mobile. Wrapping instead would make the nav two rows
	 *   tall and break the 112/100 the container is built on.
	 *
	 *   Set at this tier rather than only at 600 so the two behave the same: the
	 *   five pills total 540 and do fit in 696, so nothing moves on tablet today
	 *   — but a sixth category would silently wrap it, and the design's answer
	 *   to that is the scroller, not a second row.
	 *
	 * ⚠ THE BLEED IS DELIBERATE. The negative right margin takes the scroll
	 *   container out to the viewport edge, which is where the design clips the
	 *   row; without it the last pill would be cut 20px early and leave a dead
	 *   strip. The matching padding stops the final pill butting the edge once
	 *   scrolled to the end.
	 *
	 * ⚠ `!important` ONLY BECAUSE THE BASE RULE HAS IT — `.bc-cat-nav__list`
	 *   carries `margin: 0 !important; padding: 0 !important` to beat the
	 *   theme's list styling, and an unflagged margin here would lose to it.
	 *
	 *   The cost, stated: the scrollbar is hidden, as the design has none. The
	 *   affordance is the half-visible pill at the edge, which the design draws
	 *   on purpose.
	 */
	.bc-cat-nav__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-right: calc(var(--bc-cat-gutter) * -1) !important;
		padding-right: var(--bc-cat-gutter) !important;
		scrollbar-width: none;
	}

	.bc-cat-nav__list::-webkit-scrollbar {
		display: none;
	}

	/*
	 * 16 → 14, and the pill widths are the check. The design's five are
	 * 126/105/100/112/65 in BOTH narrow frames against desktop's
	 * 139/116/100/124/70; at 14px inside the same 16px padding they compute to
	 * 125.6/105.5/91.5/112.5/65.3 — four of the five within half a pixel.
	 * Confirmed on the export too: the first pill's label is 93px of ink,
	 * against 93.6 predicted at 14 and 107 at 16.
	 *
	 * ⚠ The third pill is the odd one out — 100 in the design at both sizes,
	 *   where 14px gives 91.5. The frame was not re-fitted for that one label;
	 *   four agreeing beats one that cannot be reconciled with any single size.
	 */
	.bc-cat-nav__pill {
		font-size: 14px;
	}

	/* ── The grid ───────────────────────────────────────────────────────────
	 * `Frame 1261154778` is 696 wide with three 224 cards at x=0/236/472, and
	 * the rows are 543 tall on a 555 pitch: 12px gaps on both axes, where
	 * desktop has 24. 3 × 224 + 2 × 12 = 696 exactly, which is how the 224 is
	 * confirmed rather than inferred.
	 * ------------------------------------------------------------------- */
	.bc-cat-grid ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	/*
	 * ⚠ AND WOOF'S OWN WRAPPER PUTS 15px BACK, which cost every card 10px.
	 *   `style.css:139`, inside `@media only screen and (max-width: 768px)`:
	 *
	 *       #woof_results_by_ajax { padding-right: 15px; padding-left: 15px }
	 *
	 *   The grid's own padding is already `0` and flagged, but this is a
	 *   DIFFERENT element — the plugin's AJAX wrapper, two levels down between
	 *   `.bc-cat-grid` and `ul.products`. Measured before this rule: the row
	 *   started at x=39 in a container starting at 24 and the cards came out
	 *   **214** against the design's 224.
	 *
	 *   Desktop never meets it (768 is the ceiling), which is exactly the trap
	 *   `pdp-redesign.css` records for `.featured-meals` at the same widths:
	 *   the theme's narrow rules are invisible until there is a narrow build.
	 *
	 *   The id is named so this is (1,1,0) against the theme's (1,0,0) — a
	 *   class alone can never outrank an id, however many you stack.
	 */
	.bc-cat-grid div#woof_results_by_ajax {
		padding-right: 0;
		padding-left: 0;
	}

	/* ── Endorsement ────────────────────────────────────────────────────────
	 * Still two columns, halved: `Container` 696×425 with a 342 text column and
	 * a 342 image 12 to its right.
	 *
	 * ⚠ AND THE SECTION'S PADDING IS 24, NOT 64. The container sits at (24,24)
	 *   in a section whose height is 24 + 425 + 24.
	 *
	 * ⚠ THE FRAME ALSO DRAWS THE FOUR WHY-RAW REASONS INSIDE THIS SECTION, at
	 *   y=449, and they are drawn AGAIN in the why-choose band below. Both
	 *   narrow frames do it. That is a stray visible instance in the Figma —
	 *   the desktop section is 506.67 tall and has no room for a 366-tall list
	 *   — so it is not built. Flagged rather than reproduced.
	 * ------------------------------------------------------------------- */
	.bc-pdp-endorsement--split {
		/*
		 * ⚠ `minmax(0, 1fr)`, NOT `342fr 342fr`. An `fr` track floors at its
		 *   content's min-content width, and the right column holds a Vimeo
		 *   iframe the theme sizes in pixels — so the tracks came out
		 *   **240 and 532** instead of 342 each, and the text column lost a
		 *   third of its width. Desktop's `686fr 686fr` never showed it because
		 *   1384 is wider than that floor.
		 *
		 *   The two tracks are equal at this tier, so `repeat` says it once and
		 *   the explicit zero minimum is what lets them actually be equal.
		 *   (696 - 12) / 2 = 342, the design's column.
		 */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 24px var(--bc-cat-gutter);
	}

	/*
	 * ⚠ AND THE THEME SIZES THAT IFRAME IN PIXELS, WITH `!important`.
	 *   `footer.php:387` adds `.youtube-iframe` to every Vimeo embed on the
	 *   site, and `style.css` then carries
	 *
	 *       @media (max-width: 750px)  .youtube-iframe { width: 532px !important; height: 411px !important }
	 *       @media (max-width: 540px)  .youtube-iframe { width: 432px !important; height: 311px !important }
	 *       @media (max-width: 420px)  .youtube-iframe { width: 332px !important; height: 211px !important }
	 *
	 *   for a lightbox that has nothing to do with this section. At 744 that is
	 *   532×411 in a 342 column; at 428 it is 432×311, which is wider than the
	 *   whole 388 container. Desktop escapes because the base rule above those
	 *   queries is unflagged and the existing (0,2,0) selector already beats it.
	 *
	 * ⚠ SO THIS ANSWERS `!important` WITH `!important`, which only works at
	 *   equal-or-greater specificity: (0,3,1) against (0,1,0). The breakpoints
	 *   do not line up with ours — 750/540/420 against 1000/600 — so the
	 *   override is declared once at the outer tier and covers all three.
	 */
	.bc-cat .bc-pdp-endorsement--split iframe.bc-pdp-endorsement__video {
		width: 100% !important;
		height: auto !important;
	}

	/*
	 * ⚠ CENTRED, NOT STRETCHED. On desktop the media fills its column — 686×378.67
	 *   in a 378.67-tall column — so `align-self: stretch` and "centred" are the
	 *   same thing there. Here the column is 425 and the image 188.78, and the
	 *   design leaves 118 above and 118.2 below it. Stretch would have pinned it
	 *   to the top of a column twice its height.
	 */
	.bc-pdp-endorsement--split .bc-pdp-endorsement__media {
		align-self: center;
	}

	/*
	 * 48 → 36, from the token this heading should have been reading all along.
	 * The design's title is 342×120 — three lines of 40 — and `--pdp-h2` /
	 * `--pdp-h2-lh` are 36/40 at this tier. Measured to be sure: 262px of ink
	 * with a 26px cap on "FORMULATED BY".
	 */
	.bc-cat .bc-pdp-endorsement__title {
		font-size: var(--pdp-h2);
		line-height: var(--pdp-h2-lh);
	}

	/* 18 → 16: the name's box is 19 tall in both narrow frames, against 22. */
	.bc-cat .bc-pdp-endorsement__name {
		font-size: 16px;
		line-height: 19px;
	}

	/* ── Not sure which box? ────────────────────────────────────────────────
	 * The row becomes a column: two square images across the full 696, then the
	 * text block 40 below them. Section is 24 + 340 + 40 + 246 + 24 = 674.
	 * ------------------------------------------------------------------- */
	.bc-cat-nsb__inner {
		flex-direction: column;
		align-items: center;
		/* 404 − 24 − 340 = 40, the same number desktop uses between the pair. */
		gap: 40px;
		padding: 24px var(--bc-cat-gutter);
	}

	.bc-cat-nsb__media {
		width: 100%;
	}

	/*
	 * ⚠ FLUID, NOT 340. Both frames put the two squares across the whole
	 *   container with a 16px gap — 340 each at 744 and 186 each at 428 — and
	 *   (696 − 16) / 2 = 340 while (388 − 16) / 2 = 186. So one rule covers both
	 *   tiers and there is no second breakpoint for them. `aspect-ratio` keeps
	 *   them square now that the height is no longer fixed; `object-fit: cover`
	 *   from the base rule still does the cropping.
	 */
	.bc-cat-nsb__image {
		flex: 1 1 0;
		/*
		 * ⚠ `min-width: 0`, OR NEITHER IMAGE SHRINKS. A flex item's default
		 *   `min-width: auto` floors it at min-content, and for an `<img>` that
		 *   is its intrinsic width — 1000px here. With the fixed `width: 364px`
		 *   lifted, both images took that floor, were capped to 696 by the
		 *   theme's `img { max-width: 100% }`, and each rendered at the FULL
		 *   container width one under the other: measured 696×696 apiece against
		 *   the design's 340×340 side by side.
		 */
		min-width: 0;
		width: auto;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/*
	 * The text column is 600 CENTRED, not full width: it sits at x=72 in a 744
	 * frame and 744 − 72 − 600 = 72. `min()` because between 601 and 744 the
	 * container is narrower than 600 and a fixed width would overflow it.
	 */
	.bc-cat-nsb__body {
		flex: none;   /* the desktop `flex: 1 1 600px` would be a height here */
		width: min(600px, 100%);
	}

	/* ── Why choose The Butcher's Dog? ──────────────────────────────────────
	 * The band's own narrow rules in `pdp-redesign.css` already stack it — bowl
	 * first, then the four reasons interleaved with 60px icons — and all of that
	 * is right for these frames too. Four numbers are not, and they are scoped
	 * so the PDP keeps its own.
	 * ------------------------------------------------------------------- */
	.bc-cat .bc-pdp-reasons {
		/* Container at (24,24) in a 1162 section: 24 + 1114 + 24. */
		padding: 24px 0;
	}

	/* The shared rule hardcodes 48. The design's title is 696×40, one line. */
	.bc-cat .bc-pdp-reasons__title {
		line-height: var(--pdp-h2-lh);
	}

	/* 64 → 24: the header container ends at 100 and the bowl starts at 124. */
	.bc-cat .bc-pdp-reasons__sub {
		margin-bottom: 24px !important;
	}

	/*
	 * ⚠ 600, WHERE THE SHARED RULE CAPS AT 540. That 540 was measured off the
	 *   PDP's tablet frame ("539 wide, centred") and this frame draws the bowl
	 *   at 600 in the same 696 container. Different section on a different page;
	 *   both are correct for the frame they came from.
	 */
	.bc-cat .bc-pdp-reasons__bowl {
		max-width: 600px;
	}
}

@media (max-width: 600px) {
	.bc-cat {
		/* 428 − 2 × 20 = 388. */
		--bc-cat-gutter: 20px;
	}

}

@media (max-width: 750px) {
	/* ── Hero ───────────────────────────────────────────────────────────────
	 * `Header for category page` is 428×483 — a 305 band over a 178 gate — and
	 * the composition changes rather than just narrowing: the dogs move from
	 * beside the text to underneath it, centred, still hanging over the gate.
	 *
	 * ⚠ THIS BLOCK IS ≤750, NOT ≤600 LIKE THE REST OF THE MOBILE TIER. Mitz,
	 *   2026-09-12: "for size 750 below display bc-cat-hero mobile." Only the
	 *   hero and its gate bar move — the cards, toolbar and everything else on
	 *   the page keep the 600/999 tiers. Between 601 and 750 the tablet block
	 *   above still sets the gutter (24) and the rules here override its hero
	 *   and gate declarations on source order, same specificity; every
	 *   declaration the tablet tier makes on these boxes is restated below.
	 * ------------------------------------------------------------------- */

	/*
	 * ⚠ NO FLOOR AT THIS TIER, AND THAT REVERSES A DELIBERATE DESKTOP CHOICE.
	 *   `min-height: 282px` exists on desktop because the photo is absolutely
	 *   positioned at a fixed height there, so a shorter intro would lengthen
	 *   the overhang and change the composition. Below 600 the photo is back IN
	 *   FLOW (see below), so the band's height is text + photo and a floor could
	 *   only add empty space UNDER the paws — pulling the overhang up inside the
	 *   band, which is the very thing the desktop floor prevents.
	 *
	 *   The design's 305 falls out of the content on `/combo-boxes/`: a 182-tall
	 *   text block, the photo pulled 20 up and hanging 42 below. Shorter intros
	 *   on the other four give a shorter band with the same 42 overhang, which
	 *   is the behaviour to want.
	 */
	.bc-cat-hero {
		min-height: 0;
	}

	.bc-cat-hero__inner {
		/* Still the 389 frame; its padding is 20 here, so the column is 349. */
		padding: var(--bc-cat-gutter);
	}

	/* 30 → 24: 147px of ink and a 17px cap against 184 and 21 at 744, and the
	 * design's title box is 28 tall. */
	.bc-cat-hero__title {
		font-size: 24px;
		line-height: 28px;
	}

	/*
	 * Body/Regular on the mobile frame is 14/24, not 16/24 — QA 2026-09-12
	 * (Mitz: "on mobile view, check bc-cat-hero its different from figma").
	 * `Header for category page` I33399:120111;33381:102319 sets the intro in
	 * `Size/Body` and that token is 14 on the 428 frame (the checkout's mobile
	 * pass records the same step, `--Size-Body: 14px`). The line box stays 24:
	 * the design's three lines are 72 tall either way; ours were four at 375.
	 */
	.bc-cat-hero__intro {
		font-size: 14px;
	}

	/*
	 * ⚠ BACK IN FLOW, WHICH IS THE ONLY PART OF THIS BUILD THAT CHANGES HOW A
	 *   BOX IS POSITIONED RATHER THAN WHAT SIZE IT IS.
	 *
	 *   The design puts the photo frame at (61,122) in a 428-wide band — 61 each
	 *   side, so centred — with its image running y 162..347.1 while the band
	 *   ends at 305. Transcribed as absolute offsets that reads exactly, but it
	 *   only reads exactly for a three-line intro: the 122 is measured from the
	 *   TOP of the band, so a four-line intro on another category would grow the
	 *   text down THROUGH the photo. Five categories share this template and no
	 *   two intros are the same length.
	 *
	 *   In flow the photo follows the text instead, and the design's numbers
	 *   still come out: the negative top margin pulls it 20 up so its image
	 *   starts where the text ends rather than after the inner's bottom padding
	 *   (162, the design's value), and the negative bottom margin hangs it 42
	 *   below the band. 182 − 20 + 185.1 − 42 = 305.1 — the design's 305, for
	 *   the page it was drawn from, and no overlap on any of the others.
	 *
	 * ⚠ `z-index`, OR THE GATE BAR PAINTS OVER THE PAWS. On desktop the photo is
	 *   absolute and the gate is static, so the overhang wins on that alone.
	 *   Static-and-static goes back to document order, and the gate is the later
	 *   sibling with a background of its own. `position: relative` is only there
	 *   to make the z-index apply.
	 *
	 * ⚠ `padding-top: 0`. The 40px on the outer box existed to offset the image
	 *   inside the design's frame; with the box itself in flow the margin does
	 *   that job and the padding would double it.
	 */
	.bc-cat-hero__photo {
		position: relative;
		z-index: 1;
		/*
		 * ⚠ `bottom: auto` IS NOT HOUSEKEEPING, IT IS A BUG FIX. The tablet tier
		 *   above sets `bottom: -54px` to anchor the photo to the band's bottom,
		 *   and that declaration still applies here — where the box is
		 *   `position: relative` rather than absolute, so `bottom` stops being an
		 *   anchor and becomes a RELATIVE SHIFT. Measured before this line: the
		 *   photo's `offsetTop` was 216 against the 162 its margins had placed it
		 *   at — pushed down by exactly that 54, straight through the gate bar's
		 *   own top padding, so the paws sat in the middle of the dark band
		 *   instead of breaking its top edge.
		 *
		 *   Resetting all three offsets is the point: a narrow tier inherits every
		 *   declaration from the wider one, and `position` changing underneath
		 *   them changes what they mean.
		 */
		top: auto;
		right: auto;
		bottom: auto;
		width: 306px;
		/* Centred, and never wider than the band's own gutters allow. */
		max-width: calc(100% - var(--bc-cat-gutter) * 2);
		height: auto;
		margin: -20px auto -42px;
		padding-top: 0;
	}

	/* ── Gate bar ───────────────────────────────────────────────────────────
	 * `Input state` is 428×178: the prompt at (20,54), the widget 388×48 at
	 * (20,116). The widget is full width here — its `max-width: 500px` is
	 * already wider than the container, so only the padding is set.
	 *
	 * ⚠ 54 TOP, NOT 14, AND THE PHOTO IS THE REASON. On tablet the paws hang
	 *   over the RIGHT of the bar (x ≥ 352) and the prompt sits at y=14 beside
	 *   them. Centred on mobile the photo covers 61..367 — straight through
	 *   where that prompt would be — so the design drops the text to 54, which
	 *   is 12 clear of the image's 347.1 bottom. Reading 14 off the tablet frame
	 *   would have put the label behind the dogs.
	 * ------------------------------------------------------------------- */
	.bc-cat-gate {
		padding: 54px var(--bc-cat-gutter) 14px;
		/*
		 * ⚠ THE BAR MUST PAINT OVER THE HERO'S BOTTOM 42px, AND IT DID NOT — QA
		 *   2026-09-12 (Mitz, two screenshots: "the spacing looks weird").
		 *
		 *   The photo's `margin-bottom: -42px` pulls this bar up under the dogs so
		 *   the dark band starts at the design's 305 and the paws hang over it.
		 *   Measured, the tan ran all the way down to the paws' bottom and the dark
		 *   band began only below them: `.bc-cat-hero` is `position: relative` (the
		 *   desktop photo is absolute inside it) and this bar was static, and a
		 *   positioned box paints AFTER every in-flow static one — so the hero's
		 *   tan covered the bar's top 42px, and the prompt sat 12px under the paws
		 *   instead of 54. The gate's `margin` did what it said; the paint order
		 *   undid it.
		 *
		 *   `relative` + `z-index: 0` puts the bar in the positioned layer, after
		 *   the hero in tree order (above its tan) and below the photo's `1` (the
		 *   paws stay on top). `0`, not `1`: the fixed header is `2` and this must
		 *   stay under it. Mobile only — on tablet the photo is also `1` and the
		 *   confirmed row must beat the paws (register 465/487), which a stacking
		 *   context on the bar would prevent; here the overhang (42) never reaches
		 *   the row (54).
		 */
		position: relative;
		z-index: 0;
	}

	/*
	 * Check is Paragraph/Bold, and `Size/Paragraph` is 16 on the 428 frame
	 * against 18 on desktop (same node as the intro note above, `Button`
	 * I33399:120111;33381:102319;33385:104211;33052:256743: 16px semibold,
	 * 12/24 padding, Color 3). Same three-id chain as the desktop rule so the
	 * plugin's own `#checkpin` styling cannot take it back.
	 */
	.bc-cat-gate__widget div#my_custom_checkout_field2 p#pincode_field_idp a#checkpin {
		font-size: 16px;
	}

	/*
	 * ⚠ AND THE CONFIRMED ROW HAS TO STAY ONE ROW, OR THE BAR GROWS. Measured
	 *   at 428 with a postcode confirmed: the line wrapped, the Change postcode
	 *   control dropped underneath the sentence, the row went 48 → 78 and the bar
	 *   went **178 → 208** the moment Check succeeded. That is the same "page
	 *   twitching" the desktop `min-height: 48px` exists to prevent, and it only
	 *   appears here because 388 cannot hold the sentence (~245) plus the gap
	 *   (12) plus the control (172.4) = 429.
	 *
	 *   `nowrap` on the row and `min-width: 0` on the sentence makes the SENTENCE
	 *   the thing that gives: it wraps to two 18px lines, the control stays beside
	 *   it, and 36 still fits inside the row's 48. The design draws no confirmed
	 *   state at any width, so the constraint to hold is the bar's height, not a
	 *   line count.
	 */
	.bc-cat-gate__confirmed {
		flex-wrap: nowrap;
	}

	.bc-cat-gate__confirmed-text {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (max-width: 600px) {
	/* ── Toolbar ────────────────────────────────────────────────────────────
	 * The row collapses to a 24-tall content box: `Container` 428×33 holds a
	 * 388×24 row with its divider at y=32, so the box is 16 + 24 + 8 + 1 = 49
	 * against the tablet's 85. Labels stay 16px and the count stays 16/24 —
	 * the design keeps all three on one line at 428 (Filter 0..64, count
	 * 64..330, Sort 330..388).
	 * ------------------------------------------------------------------- */
	.bc-cat-toolbar {
		min-height: 48px;
		padding: 16px 0 8px;
	}

	/* ── Select your category ───────────────────────────────────────────────
	 * `Container` 428×100 at y=49, hard against the divider: label at y=12,
	 * pills at y=44, 16 below them. So 12 + 24 + 8 + 40 + 16 = 100, and the
	 * 12px margin the tablet keeps above the container is gone.
	 * ------------------------------------------------------------------- */
	.bc-cat-nav {
		margin-top: 0;
		padding: 12px 0 16px;
	}

	/* ── The grid ───────────────────────────────────────────────────────────
	 * Two 188 cards on a 388 row — (388 − 12) / 2 = 188 — and the grid starts
	 * at y=149, which is where the nav container ends. No gap of its own here,
	 * where the tablet keeps the desktop 12.
	 * ------------------------------------------------------------------- */
	.bc-cat-grid {
		padding-top: 0 !important;
	}

	.bc-cat-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* ── Endorsement ────────────────────────────────────────────────────────
	 * One column, image last: `Container` 388×619.18 is a 393-tall text block
	 * then a 388×214.18 image 12 below it.
	 * ------------------------------------------------------------------- */
	.bc-pdp-endorsement--split {
		grid-template-columns: minmax(0, 1fr);
		/*
		 * ⚠ ROW GAP 0, BECAUSE THE ROWS ALREADY CARRY THEIR OWN SPACING. The
		 *   title, the quote and the attribution are 12 apart from their own
		 *   margins — which is how the desktop column is built — so a row gap
		 *   here would double every one of them. The media gets its 12 as a
		 *   margin below, for the same reason.
		 */
		row-gap: 0;
		padding: 20px var(--bc-cat-gutter);
	}

	/*
	 * The media leaves column 2 and becomes the fourth row. `align-self: start`
	 * undoes the `center` from the tablet tier — there is no tall sibling column
	 * to centre against any more.
	 */
	.bc-pdp-endorsement--split .bc-pdp-endorsement__media {
		grid-column: 1;
		grid-row: 4;
		align-self: start;
		margin-top: 12px;
	}

	/*
	 * 36 → 30, which is `--pdp-h2` at this tier: 219px of ink and a 22px cap
	 * against 262 and 26 at 744, and 219/262 = 30/36.
	 *
	 * ⚠ THE LINE IS 36, WHERE `--pdp-h2-lh` IS 34, so it is written out rather
	 *   than read from the token. The design's title is 388×108 — three lines —
	 *   and 3 × 34 is 102. That token was measured on the PDP's mobile frame and
	 *   changing it would move four headings on a page that is deferred; the 2px
	 *   is taken here instead. Same for the not-sure title below.
	 */
	.bc-cat .bc-pdp-endorsement__title {
		font-size: var(--pdp-h2);
		line-height: 36px;
	}

	/* ── Not sure which box? ────────────────────────────────────────────────
	 * The same column as tablet at 388: two 186 squares, then the text block 40
	 * below. 20 + 186 + 40 + 266 + 20 = 532.
	 * ------------------------------------------------------------------- */
	.bc-cat-nsb__inner {
		padding: 20px var(--bc-cat-gutter);
	}

	/* Full width here — the design's text block is the whole 388, where the
	 * tablet's is 600 inside 696. The buttons stay 346 and left-aligned. */
	.bc-cat-nsb__body {
		width: 100%;
	}

	/* 388×36, one line — see the note on the endorsement title for the 36. */
	.bc-cat-nsb__title {
		line-height: 36px;
	}

	/* ── Why choose The Butcher's Dog? ─────────────────────────────────────── */
	.bc-cat .bc-pdp-reasons {
		/* Container at (20,20) in a 990 section: 20 + 950 + 20. */
		padding: 20px 0;
	}

	/* 388×72, two lines of 36. */
	.bc-cat .bc-pdp-reasons__title {
		line-height: 36px;
	}

	/* The header container ends at 156 and the bowl starts at 176. */
	.bc-cat .bc-pdp-reasons__sub {
		margin-bottom: 20px !important;
	}

	/*
	 * The full 388 — the bowl is the container width at this tier. The shared
	 * rule caps it at 320, measured off the PDP's mobile frame.
	 */
	.bc-cat .bc-pdp-reasons__bowl {
		max-width: 388px;
	}
}

/* ── The client's own filter glyph ──────────────────────────────────────────
 * Mitz, 2026-09-09: "update the filter icon to this filter-icon.png on Category
 * Page also." Supplied at 16×16 with transparent ground — three vertical faders,
 * where the built glyph was three stacked horizontal lines.
 *
 * ⚠ APPLIED AS A MASK, NOT A BACKGROUND, and that is the whole point of this
 *   block. The glyph it replaces was an inline SVG using `currentColor`, so the
 *   toolbar's hover rule tinted the icon along with its label (both are named
 *   explicitly there). A flat PNG background carries its own colour and would
 *   have quietly dropped the icon out of that hover — the label would tan and
 *   the icon would not.
 *
 *   `mask-image` uses only the file's ALPHA, so the shape is the client's exactly
 *   while the paint is `currentColor` — identical at rest (the artwork's grey is
 *   this page's `--pdp-c5`) and tinting on hover as before. Two properties
 *   because Safari still needs the prefix.
 *
 * ⚠ GUARDED BY `@supports`, because the failure mode is ugly rather than
 *   invisible: without mask support the element would paint a solid 16×16 block
 *   of `currentColor`. The unguarded rule below is the plain background-image, so
 *   a browser without masks gets the artwork in its own grey and loses only the
 *   hover tint.
 *
 * ⚠ Both copies of the glyph are swapped — the toolbar control and the Filter
 *   panel's own title — so the two cannot drift apart. The Sort control keeps
 *   its arrows: the supplied file is a filter glyph and nothing was asked about
 *   Sort.
 *
 * The file sits in `assets/pdp/` with the other raster icons of this redesign
 * rather than in a new folder of its own: that directory is tracked, which
 * `assets/fonts/` and `freezer-champaign-assets/` are NOT (see RULE 6), and one
 * file does not justify a second icon home.
 * ------------------------------------------------------------------------- */
.bc-cat-toolbar__icon--filter,
.bc-cat-drawer__title-icon--filter {
	background-image: url("../pdp/filter-icon.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

@supports ((mask-image: url("../pdp/filter-icon.png")) or (-webkit-mask-image: url("../pdp/filter-icon.png"))) {
	.bc-cat-toolbar__icon--filter,
	.bc-cat-drawer__title-icon--filter {
		background-image: none;
		background-color: currentColor;
		-webkit-mask-image: url("../pdp/filter-icon.png");
		mask-image: url("../pdp/filter-icon.png");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: 16px 16px;
		mask-size: 16px 16px;
	}
}

/* The drawer title's icon inherited its colour from `.bc-cat-drawer__title`,
 * which is `--pdp-c4`. Restated rather than left to inheritance, because the
 * mask paints `currentColor` and this is now the only thing deciding the
 * glyph's colour — checked against the title rule rather than assumed. */
.bc-cat-drawer__title-icon--filter {
	color: var(--pdp-c4);
}

/* ── The postcode checker's error message ─────────────────────────────────
 * QA 2026-09-10 (Mitz): same treatment as the PDP - see pdp-redesign.css for
 * the plugin rules being answered. Here the element is .shoppage_error rather
 * than .error_pin and the plugin gives it nothing at all: measured white 12px
 * text on the bar's ground, no padding.
 *
 * The widget's own width (500 on desktop, the container below), so the box
 * spans the field and the Check button together, as the mock draws it.
 * ------------------------------------------------------------------------- */
/* Two ids and a flag for the same reason as the PDP rule — see pdp-redesign.css:
 * the theme’s `div#my_custom_checkout_field2 div#error_pin` is (2,0,2). */
.bc-cat-gate__widget div#my_custom_checkout_field2 div#error_pin,
.bc-cat-gate__widget div#my_custom_checkout_field2 div#error_pin_b {
	box-sizing: border-box;
	/*
	 * ⚠ THE PLUGIN FLOATS IT. `#my_custom_checkout_field2 .error_pin { float: right;
	 *   margin-top: 12px }` in its stylesheet, plus `position: relative` inline — and
	 *   on the PDP both error elements carry .error_pin, so the styled box floated
	 *   up alongside the field row and painted OVER the input (Mitz's screenshot,
	 *   200 path). In flow, cleared, it sits below the row as the mock draws it.
	 */
	float: none;
	clear: both;
	position: static;
	/*
	 * ⚠ AND AN ORDER, BECAUSE THE WIDGET IS A FLEX ROW. `style.css` makes
	 *   `#my_custom_checkout_field2` flex-wrap and orders its children — the field
	 *   row 1, #error_pin 2 — but never #error_pin_b, which therefore sorted to
	 *   order 0 and rendered ABOVE the field once its float was gone (measured: box
	 *   bottom = field top on both pages). 2 puts it where #error_pin already sits.
	 */
	order: 2;
	width: 100%;
	margin: 16px 0 0;
	padding: 6px 10px;
	border-radius: 0;
	background-color: var(--pdp-error-bg) !important;
	color: var(--pdp-error-fg);
	font-family: var(--pdp-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-transform: none;
}

.bc-cat-gate__widget div#my_custom_checkout_field2 div#error_pin p,
.bc-cat-gate__widget div#my_custom_checkout_field2 div#error_pin_b p {
	margin: 0;
}

/*
 * ⚠ THE PLUGIN ECHOES THE POSTCODE INTO ITS OWN MESSAGE. The category shortcode
 *   prints an empty <p id="post_code_area"> after the message and widget.js fills
 *   it with the entered pin on error — so the box read “…to this area,6000 please
 *   use…” once it was styled to be readable. The mock has no echo; the field
 *   already shows the value. Hidden here; the PDP template never prints it.
 */
.bc-cat-gate__widget div#my_custom_checkout_field2 div#error_pin #post_code_area {
	display: none;
}

/* The plugin’s inline CSS gives .error_pin an ::after arrow; #error_pin_b carries
 * that class here where #error_pin does not. The mock has no arrow. */
.bc-cat-gate__widget div#my_custom_checkout_field2 div#error_pin_b::after {
	content: none;
}


/* ===========================================================================
 * WOOCOMMERCE NOTICES ON THE DARK GROUND
 *
 * ⚠ Mitz, QA 2026-09-16, on /apothecary/ (a category with no products):
 *   "update the light blue color to match the the colors applied."
 *
 * ⚠ IT IS WOOCOMMERCE'S OWN, UNTOUCHED. `woocommerce-general` paints
 *   `p.woocommerce-info` as a light panel with a 3px top rule in its house
 *   blue, and the redesign had never overridden it — measured on staging:
 *   background #f6f5f8, text #515151, border-top 3px solid #1e85be, and the
 *   WooCommerce icon font's info glyph in the same blue. On the category
 *   page's #1f1f1f ground that reads as a light-blue slab.
 *
 *   The shape is WooCommerce's and stays; only the colours move onto the
 *   redesign's palette — the raised-panel ground the cards use, body ink, and
 *   the gold the filter and sort controls already use for the top rule and
 *   the glyph.
 *
 * ⚠ Scoped to `.bc-cat`. The notice is rendered by WOOF inside the grid
 *   (`div.woof_results_by_ajax_shortcode`), which sits inside the category
 *   template's root wrapper — verified in the page source before this was
 *   written. Notices on checkout, cart and My Account are not in this scope
 *   and keep whatever styles they already have.
 * ------------------------------------------------------------------------ */
.bc-cat .woocommerce-info,
.bc-cat .woocommerce-message,
.bc-cat .woocommerce-error {
	border-top-color: var(--bc-cat-gold-100);
	background-color: var(--pdp-c8);
	color: var(--pdp-c4);
}

.bc-cat .woocommerce-info::before,
.bc-cat .woocommerce-message::before,
.bc-cat .woocommerce-error::before {
	color: var(--bc-cat-gold-100);
}

/* Any link WooCommerce drops into a notice - "View cart", for one. */
.bc-cat .woocommerce-info a,
.bc-cat .woocommerce-message a,
.bc-cat .woocommerce-error a {
	color: var(--bc-cat-gold-100);
}