/*
Theme Name: Carefree Honeybee
Theme URI: https://carefreehoneybee.ca/
Author: Ben Dodson
Description: Hand-written block theme for Carefree Honeybee — a small-batch beeswax, honey and maple producer near Ottawa. Core blocks only: no page builder, no framework, no licence fee. WooCommerce commerce routes (cart, checkout, account, order confirmation) are inherited from WooCommerce's own block templates; this theme overrides only the shop archive and the product page. Visual direction: "Heritage Apothecary" (client-approved redesign, 2026-09) — cream paper, Cormorant Garamond display, hairline rules, framed photo plates.
Version: 2.0.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carefree-honeybee
Tags: block-theme, e-commerce, one-column, wide-blocks, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   This file is the utility + a11y layer ONLY.

   Anything expressible as a design token — colour, type scale, spacing scale,
   button styling — lives in theme.json so it reaches both the front end and the
   editor, and so Evelyn can see it in the Styles panel. What is here is the
   set of rules the block supports genuinely cannot express: focus behaviour,
   hover transitions, the grid/plate treatment, and a few WooCommerce internals
   whose markup predates block styling.

   Design reference: the Heritage Apothecary handoff (D:\whc\honeybee\design\
   2026-09-redesign-handoff\) — mock inline styles are the measurements quoted
   in comments below.
   --------------------------------------------------------------------------- */


/* --- Accessibility -------------------------------------------------------- */

/*
 * A visible focus ring on every interactive thing. Gold (#A3833A) measures
 * 3.2:1 against the paper ground as a 3px ring — a non-text contrast pass —
 * and it is the palette's only accent, so the ring reads as the site's own.
 * :focus-visible (not :focus) so mouse users do not get rings on click.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
	border-radius: 0;
}

/* Skip link — visually hidden until focused. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Honour the OS "reduce motion" setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --- Media safety net ------------------------------------------------------ */

/*
 * Block themes get image sizing from the block library — but only for real
 * `wp:image` blocks. Pages carried over from the old Elementor/classic build
 * hold bare `<img>` tags with hard width attributes (the About Us page is two
 * of them and no blocks at all), and those get nothing. A 1024px-wide image
 * then pushes past the content column on desktop and forces sideways scrolling
 * on a phone.
 *
 * Fluid, not "smaller on mobile": a fixed smaller size would still overflow a
 * narrow enough screen and would look soft on a retina display. `height: auto`
 * is what stops the hard `height` attribute squashing the aspect ratio once the
 * width starts scaling.
 *
 * This is deliberately unscoped so it also covers whatever Evelyn pastes in
 * later — the failure mode it prevents is invisible until someone opens the
 * page on a phone.
 */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* Elements with an intrinsic size of their own must not be stretched by it. */
img[width][height] {
	height: auto;
}

/*
 * Nothing may make the page scroll sideways. Long unbroken strings — a pasted
 * URL, an order number — are the other common cause besides oversized media.
 */
body {
	overflow-x: clip;
}

:where(p, li, dd, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}


/* --- Typographic detail --------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Prices, quantities and anything tabular wants lining, tabular figures. */
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wp-block-woocommerce-product-price,
input[type="number"],
.wc-block-components-quantity-selector {
	font-variant-numeric: lining-nums tabular-nums;
}

/* Serif headings get proper hanging punctuation where the browser supports it. */
h1, h2, h3 {
	hanging-punctuation: first last;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/*
 * The letterspaced-caps utility this design runs on. Heritage Apothecary's
 * label voice is Jost caps at wide tracking rather than weight contrast —
 * used in the utility bar, the tagline, eyebrows and column labels.
 */
.honeybee-caps {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0;
}

.honeybee-caps--quiet {
	color: var(--wp--preset--color--muted);
}

/* On honey-wash (legacy content bands), muted only reaches ~4.3:1. */
.has-honey-wash-background-color .honeybee-caps--quiet {
	color: var(--wp--preset--color--ink);
}

/*
 * Gold eyebrow — "No. 02 — The collection", "Selected goods", "Description".
 * Mock: Jost 12px, 0.24em, uppercase, #a3833a.
 */
.honeybee-eyebrow,
.honeybee-eyebrow a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	margin: 0;
}

.honeybee-eyebrow--gold,
.honeybee-eyebrow--gold a {
	color: var(--wp--preset--color--amber);
}

/*
 * Statement type: the one-sentence declaration that opens a document page.
 * Display serif italic — with Cormorant this now matches the dark bands'
 * voice, which is the redesign's own quote register.
 */
.honeybee-statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.55rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	text-wrap: balance;
}


/* --- Rules (separators) ---------------------------------------------------- */

/*
 * `alignwide` is a no-op inside a flow layout. Most templates give <main> a
 * flow layout and drop alignwide blocks straight into it — separators, and
 * the product page's two-column group. WordPress only writes the alignwide
 * max-width rule for CONSTRAINED parents, so in <main> those blocks silently
 * stretched edge to edge while the header (constrained) stayed inset to
 * wideSize. This was first noticed on separators and fixed for them alone
 * (2026-09-01); the product page shipped with the same fault, and on a wide
 * screen its title and express-pay buttons ran to the viewport edge while
 * the photo sat flush left — and on a phone, with no root padding at all.
 *
 * So: any alignwide direct child of a flow-layout <main> gets the same
 * constraint WP would have given it under a constrained parent. Scoped to
 * `.is-layout-flow` so constrained mains (404, archive, search) — where WP
 * already handles this and the container already carries the root padding —
 * are not double-inset.
 */
.wp-site-blocks main.is-layout-flow > .alignwide {
	max-width: min(
		var(--wp--style--global--wide-size),
		calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right))
	);
	margin-inline: auto;
}

/*
 * Heritage Apothecary divides with a SINGLE 1px hairline (#D8D0BD) — the
 * mock uses it for every horizontal rule on every screen. The old double
 * letterpress rule is retired; the class is kept because content pages
 * already carry it, and those rules now render as the design's hairline.
 */
.wp-block-separator.is-style-honeybee-rule {
	height: auto;
	box-sizing: border-box;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	background: none;
	opacity: 1;
}

/*
 * The short gold hairline under a product title's price. Mock: 56px wide,
 * 1px #a3833a, ranged left.
 */
.wp-block-separator.is-style-honeybee-goldrule {
	width: 56px;
	max-width: 56px;
	height: auto;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--amber);
	background: none;
	opacity: 1;
	margin-left: 0;
	margin-right: auto;
}


/*
 * Groups this stylesheet turns into CSS grids still carry WP's flow-layout
 * blockGap margin on every non-first child (24px of phantom offset that
 * misaligns grid rows). The gap belongs to the grid, so the margins go.
 */
.honeybee-makes__grid > *,
.honeybee-hero__grid > *,
.honeybee-band__grid > *,
.honeybee-description__grid > *,
.honeybee-product > *,
.honeybee-footer__cols > * {
	margin-block-start: 0;
}


/* --- Plates (framed photos) + panels --------------------------------------- */

/*
 * The photo plate: 1px #C9BFA6 border, #FDFAF3 inset, square corners. This is
 * the design's single strongest device — every photograph on the site sits in
 * one. Flat and printed: no shadow, no radius, no zoom.
 */
.wp-block-group.is-style-honeybee-panel {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--plate-border);
	border-radius: 0;
}

.wp-block-image.is-style-honeybee-framed,
.honeybee-plate-frame,
.honeybee-catcard__img {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--plate-border);
	padding: 14px;
}

.honeybee-catcard__img {
	padding: 10px;
	margin: 0;
}

.wp-block-image.is-style-honeybee-framed img,
.honeybee-plate-frame img,
.honeybee-catcard__img img {
	border-radius: 0;
	box-shadow: none;
	display: block;
	width: 100%;
}

/* The italic caption inside a plate, under the photo. Mock: serif italic
 * 16px, #6d6252, centred, 12px above / 2px below. */
.honeybee-plate-frame__caption,
.honeybee-gallery-plate__caption {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin: 0;
	padding: 12px 0 2px;
}


/*
 * The store-notices block renders an empty container when there is nothing to
 * announce — collapsed when empty; it reappears the moment Woo puts a notice in.
 */
.wp-block-woocommerce-store-notices:empty,
.wp-block-woocommerce-store-notices > .woocommerce-notices-wrapper:empty {
	display: none;
}


/* --- Header ---------------------------------------------------------------- */

.honeybee-header {
	position: relative;
	z-index: 10;
}

/*
 * Utility bar. Mock: 10px 40px padding, Jost 12px 0.18em uppercase #6d6252,
 * 1px hairline below. Three cells: place — motto — cart.
 */
.honeybee-utility {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.honeybee-utility p,
.honeybee-utility .honeybee-cart-link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/*
 * The masthead. Mock: 30px 40px 24px padding (36/28 on home), centred stack:
 * logo 60px → wordmark → gold tagline → nav. Hairline below.
 */
.honeybee-crest {
	position: relative;
	padding-top: 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.honeybee-header--home .honeybee-crest {
	padding-top: 36px;
	padding-bottom: 28px;
}

.honeybee-crest .wp-block-site-logo,
.honeybee-crest .wp-block-site-title {
	text-align: center;
}

.honeybee-crest .wp-block-site-logo img {
	margin-inline: auto;
}

.honeybee-crest .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
}

/* Gold tagline under the wordmark. Mock: Jost 11px 0.3em uppercase #a3833a. */
.honeybee-crest__tagline {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
}

/* Nav. Mock: Jost 13px 0.16em uppercase, 40px gaps, ink; the current page
 * carries a gold underline. */
.honeybee-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* Trailing letterspace pushes a centred row off-centre; pull it back. */
	margin-right: -0.16em;
}

.honeybee-header .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 140ms ease, color 140ms ease;
}

.honeybee-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--amber);
}

.honeybee-header .wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--amber);
}

/* The cart link: letterspaced text, "Cart (0)". */
.honeybee-cart-link {
	display: inline-flex;
	gap: 0.35em;
	align-items: baseline;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 140ms ease;
}

.honeybee-cart-link:hover {
	color: var(--wp--preset--color--amber);
}

.honeybee-cart-link__count {
	font-variant-numeric: lining-nums tabular-nums;
	display: inline-block;
}

/* The masthead cart is a phone-only control; the utility bar's is desktop.
 * Doubled selector: WP prints the group's own `display:flex` layout style
 * AFTER this stylesheet, so a single class ties and loses on source order. */
.honeybee-crest .honeybee-crest__cart.wp-block-group {
	display: none;
}

/*
 * The confirmation that an add-to-cart worked: the count restamps. One scale,
 * no overshoot; the reduced-motion block above neutralises it on request.
 */
@keyframes honeybee-count-bump {
	from { transform: scale(0.6); }
	to   { transform: scale(1); }
}

.honeybee-cart-link__count.is-bumped {
	animation: honeybee-count-bump 180ms cubic-bezier(0.2, 0, 0.2, 1);
}


/* --- Shop filter bar -------------------------------------------------------- */

/*
 * Mock: 18px vertical padding, hairline below, categories left ("All" +
 * shelves, 32px gaps) and the goods count right.
 */
.honeybee-filterbar {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding-top: 18px;
	padding-bottom: 14px;
}

.honeybee-cat-nav ul,
ul.honeybee-cat-nav,
.honeybee-cat-nav.wp-block-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.honeybee-cat-nav li {
	margin: 0;
}

.honeybee-cat-nav a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: color 140ms ease, border-color 140ms ease;
}

/* "You are here": ink text under a gold underline, per the mock. */
.honeybee-cat-nav a:hover {
	color: var(--wp--preset--color--ink);
}

.honeybee-cat-nav .current-cat > a {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--amber);
}

.honeybee-goods-count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
	white-space: nowrap;
}


/* --- Page head (shop / category title block) -------------------------------- */

/* Mock: 52px top padding, gold eyebrow, serif 54px title, Jost 300 subline. */
.honeybee-pagehead {
	padding-top: 52px;
	padding-bottom: 8px;
	text-align: center;
}

.honeybee-pagehead .wp-block-query-title {
	margin: 0.875rem 0 0;
	font-weight: 500;
}

.honeybee-pagehead__sub,
.honeybee-pagehead .wp-block-term-description {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}

.honeybee-pagehead .wp-block-term-description p {
	margin: 0;
}


/* --- Product grid ----------------------------------------------------------- */

/*
 * The card: photo plate (1px #C9BFA6, 10px inset, #FDFAF3) with the type
 * centred on the paper below — serif 21px title, Jost 14px price. The border
 * stops at the photo and the text stays on the page ground; that is what
 * makes it read as a printed label rather than a UI card.
 */
.wc-block-product-template__responsive .wc-block-product,
.wp-block-post-template .wc-block-product,
li.wc-block-product {
	position: relative;
	text-align: center;
}

.wc-block-product .wp-block-woocommerce-product-image,
.wc-block-product .wc-block-components-product-image {
	position: relative;
	overflow: visible;
	border: 1px solid var(--wp--preset--color--plate-border);
	border-radius: 0;
	padding: 10px;
	background-color: var(--wp--preset--color--cream);
	margin: 0;
}

.wc-block-product img,
.wp-block-woocommerce-product-image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Hover: the plate's hairline darkens to ink. A state change, not an
 * animation — nothing moves, nothing zooms (restrained, per the handoff).
 */
@media (hover: hover) {
	.wc-block-product .wp-block-woocommerce-product-image,
	.wc-block-product .wc-block-components-product-image,
	.wp-block-image.is-style-honeybee-framed,
	.honeybee-catcard__img {
		transition: border-color 160ms ease;
	}

	.wc-block-product:hover .wp-block-woocommerce-product-image,
	.wc-block-product:hover .wc-block-components-product-image,
	.honeybee-catcard:hover .honeybee-catcard__img {
		border-color: var(--wp--preset--color--ink);
	}
}

/* Card title: serif, regular weight, ink, centred; underline only on hover. */
.wc-block-product .wp-block-post-title {
	font-weight: 400;
}

.wc-block-product .wp-block-post-title a,
.wc-block-product .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wc-block-product .wp-block-post-title a:hover,
.wc-block-product .wc-block-components-product-name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wp--preset--color--plate-border);
	text-decoration-thickness: 1px;
}

/*
 * The "Bestseller" chip, pinned inside the plate's top-left corner.
 * Mock: Jost 10px 0.2em uppercase gold on #FDFAF3, 1px #C9BFA6, 4px 8px
 * padding, 18px in from the plate edge (10px inset + 8px).
 */
.honeybee-chip {
	position: absolute;
	top: 18px;
	left: 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--plate-border);
	padding: 4px 8px;
	line-height: 1.2;
	pointer-events: none;
}

/* Sale badge (if one ever shows): same vocabulary as the chip. */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--amber);
	border: 1px solid var(--wp--preset--color--plate-border);
	border-radius: 0;
	padding: 4px 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* "Show all sixteen" is a phone-only control; see the phone block below.
 * Doubled selector to beat WP's own printed layout display. */
.honeybee-shop .honeybee-showall.wp-block-group {
	display: none;
}


/* --- Single product --------------------------------------------------------- */

/* Mock: two columns, 520px photo side, 64px gutter. */
.honeybee-product {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}

/*
 * The gallery plate: one frame around the photo AND its italic caption
 * (mock: 14px inset). The Woo gallery inside loses its own chrome.
 */
.honeybee-gallery-plate {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--plate-border);
	padding: 14px;
}

/*
 * WooCommerce gives `div.product div.images` a 2em bottom margin — 32px of
 * empty cream under the thumbnails, inside the plate, on top of the plate's
 * own 14px. The mock's plate is an even 14px all round with the caption 12px
 * under the image. The long selector outranks Woo's
 * `.woocommerce div.product div.images` (2 classes + 2 elements).
 */
.woocommerce div.product .honeybee-gallery-plate .woocommerce-product-gallery,
.honeybee-gallery-plate .woocommerce-product-gallery {
	margin-bottom: 0;
}

.honeybee-gallery-plate .woocommerce-product-gallery__wrapper,
.honeybee-gallery-plate .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image {
	background: none;
	border: 0;
	padding: 0;
}

.woocommerce-product-gallery {
	border-radius: 0;
	overflow: hidden;
	width: 100% !important; /* Woo's gallery JS writes an inline width */
}

.honeybee-gallery-plate .woocommerce-product-gallery__image a,
.honeybee-gallery-plate .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
}

.woocommerce-product-gallery__wrapper img {
	border-radius: 0;
}

/*
 * Thumbnails. Mock: three plates under the main image, 14px gaps, 6px inset;
 * the selected one's border is ink, the others #C9BFA6.
 */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 1 1 0;
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--plate-border);
	padding: 6px;
	width: 100%;
	height: auto;
	cursor: pointer;
	transition: border-color 140ms ease;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--ink);
}

/* The summary column ranges left. */
.honeybee-product-summary {
	text-align: left;
}

/* Price under the title. Mock: Jost 19px #4a4234. Token colour applies;
 * weight and figures here. */
.honeybee-product-summary .wp-block-woocommerce-product-price {
	font-weight: 400;
}

/* Intro paragraph (the excerpt). Mock: Jost 300 16px/1.7 #4a4234, ≤52ch. */
.honeybee-product-summary__intro,
.honeybee-product-summary .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--amber-deep);
	max-width: 52ch;
}

/*
 * The add-to-cart form. Woo's classic markup, restyled to the mock: SIZE
 * label → variation boxes (built by honeybee-product.js over the select) →
 * stepper + solid Add to cart on one row.
 */

/* The variations table holds the real select; once the boxes exist it is
 * visually retired but stays in the accessibility tree via the select the
 * boxes drive. */
.honeybee-product-summary .variations th.label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: left;
	padding: 0 0 10px;
}

.honeybee-product-summary .variations,
.honeybee-product-summary .variations tbody,
.honeybee-product-summary .variations tr,
.honeybee-product-summary .variations td {
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
}

/* Once JS has built the boxes, the select row hides (the select still exists
 * and still carries the form's value). */
.honeybee-varboxes-source td.value {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Woo's "clear selection" link — the design has no unchosen state. */
.honeybee-product-summary .reset_variations {
	display: none !important;
}

.honeybee-varboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}

.honeybee-varboxes__box {
	appearance: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	border: 1px solid var(--wp--preset--color--hairline);
	background: transparent;
	color: var(--wp--preset--color--muted);
	padding: 12px 20px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.honeybee-varboxes__box.is-selected {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.honeybee-varboxes__box:hover {
	border-color: var(--wp--preset--color--ink);
}

.honeybee-varboxes__name {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.honeybee-varboxes__price {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: lining-nums tabular-nums;
}

/*
 * Woo repeats the chosen variation's price inside the form; the script
 * mirrors it into the summary's price line instead, so the in-form copy would
 * be the same number twice.
 */
.honeybee-product-summary .woocommerce-variation-price,
.honeybee-product-summary .woocommerce-variation-availability {
	display: none;
}

/*
 * WooCommerce gives form.cart a clearfix (::before/::after, display: table).
 * Once the form is a flex row those pseudo-elements become anonymous flex
 * items: zero width, but the leading one still earns the 16px gap, so the
 * stepper sat 16px right of everything else in the column (and the button
 * stopped 16px short of the column's right edge). Remove them — flex does not
 * need clearing. The long selector is deliberate: WooCommerce sets them from
 * `.woocommerce div.product form.cart::before` (2 classes + 2 elements), and a
 * shorter one lost.
 */
.wp-site-blocks .honeybee-product .honeybee-product-summary form.cart::before,
.wp-site-blocks .honeybee-product .honeybee-product-summary form.cart::after {
	content: none;
	display: none;
}

/* The stepper + button row. */
.honeybee-product-summary .woocommerce-variation-add-to-cart,
.honeybee-product-summary form.cart:not(.variations_form),
.honeybee-product-summary form.cart .honeybee-atc-row {
	display: flex;
	gap: 16px;
	align-items: stretch;
	flex-wrap: wrap;
}

/* Quantity stepper. Mock: hairline box, #FDFAF3, − / n / + with internal
 * hairlines, Jost 16px. */
.honeybee-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--cream);
	margin: 0;
}

.honeybee-qty label,
.honeybee-qty .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.honeybee-qty__btn {
	appearance: none;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: 14px 18px;
	cursor: pointer;
	line-height: 1;
}

.honeybee-qty__btn--down {
	border-right: 1px solid var(--wp--preset--color--hairline);
}

.honeybee-qty__btn--up {
	border-left: 1px solid var(--wp--preset--color--hairline);
}

.honeybee-qty input.qty {
	appearance: textfield;
	-moz-appearance: textfield;
	border: 0;
	background: none;
	width: 3.25em;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	padding: 14px 0;
}

.honeybee-qty input.qty::-webkit-outer-spin-button,
.honeybee-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Add to cart. Mock: solid #2c2416, #f7f2e8 text, Jost 13px 0.18em
 * uppercase, 0 44px padding, square, stretches to the stepper's height. */
.honeybee-product-summary .single_add_to_cart_button,
.woocommerce button.button.alt,
.wc-block-components-product-button .wp-block-button__link,
.wc-block-components-button:not(.is-link) {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.85rem 2.75rem;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.honeybee-product-summary .single_add_to_cart_button {
	align-self: stretch;
	padding-top: 0;
	padding-bottom: 0;
}

.honeybee-product-summary .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--wp--preset--color--amber);
	border-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--base);
}

/* Provenance note. Mock: hairline above, serif italic 17px #6d6252, ≤44ch. */
.honeybee-provenance {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 22px;
}

.honeybee-provenance__note {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	max-width: 44ch;
	margin: 0;
}


/* --- Product description band ----------------------------------------------- */

/* Mock: hairline above, 56px vertical padding, 220px label column + prose. */
.honeybee-description {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 56px;
	padding-bottom: 56px;
}

.honeybee-description__grid {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}

.honeybee-description__body {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--wp--preset--color--amber-deep);
	max-width: 62ch;
}

.honeybee-description__body p {
	margin: 0 0 18px;
}

.honeybee-description__body p:last-child {
	margin-bottom: 0;
}


/* --- Related products -------------------------------------------------------- */

.honeybee-related {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 56px;
	padding-bottom: 64px;
}

.honeybee-related__head {
	margin-bottom: 36px;
}


/* --- Dark bands -------------------------------------------------------------- */

/*
 * The quote/claims band: #2C2416 ground, #E8DFC9 serif italics. The band is
 * page furniture, not the footer — the footer below it stays on paper.
 */
.honeybee-band {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 40px;
	padding-bottom: 40px;
}

.honeybee-band__claim {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 1.4375rem;
	line-height: 1.4;
	margin: 0;
}

.honeybee-band__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem;
	align-items: center;
}

.honeybee-band__link {
	margin: 0;
}

.honeybee-band__link a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--parchment);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--amber);
	padding-bottom: 4px;
	transition: color 140ms ease;
}

.honeybee-band__link a:hover {
	color: var(--wp--preset--color--base);
}


/* --- Home: hero + category cards --------------------------------------------- */

.honeybee-hero {
	padding-top: 72px;
	padding-bottom: 72px;
}

.honeybee-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: 3.5rem;
	align-items: center;
}

.honeybee-hero__sub {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--wp--preset--color--amber-deep);
	max-width: 46ch;
	margin: 0;
}

.honeybee-hero__link {
	margin: 0;
}

.honeybee-hero__link a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--amber);
	padding: 4px 2px;
	transition: color 140ms ease;
}

.honeybee-hero__link a:hover {
	color: var(--wp--preset--color--amber);
}

.honeybee-makes {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 56px;
	padding-bottom: 56px;
}

.honeybee-makes__head {
	margin-bottom: 40px;
	text-align: center;
}

.honeybee-makes__sub {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: 1rem;
	color: var(--wp--preset--color--muted);
	margin: 0.375rem 0 0;
}

.honeybee-makes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.honeybee-catcard {
	text-align: center;
}

.honeybee-catcard__title {
	font-size: 1.625rem;
	margin: 16px 0 0;
}

.honeybee-catcard__title a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.honeybee-catcard__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--plate-border);
}

.honeybee-catcard__sub {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 4px 0 0;
}


/* --- Breadcrumbs -------------------------------------------------------------- */

/* Mock: Jost 11px 0.18em uppercase; links muted, current item ink, gold "/". */
.honeybee-crumbs {
	padding-top: 18px;
}

.wp-block-woocommerce-breadcrumbs,
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wp-block-woocommerce-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 140ms ease;
}

.wp-block-woocommerce-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--amber);
}

.honeybee-crumbs__sep {
	color: var(--wp--preset--color--amber);
	padding: 0 0.5em;
}


/* --- Page content alignment --------------------------------------------------- */

/*
 * Heritage Apothecary is a CENTRED-AXIS design: the crest, wordmark, tagline
 * and nav all sit on the page's centre line, and page titles follow.
 */
body.page:not(.home):not(.woocommerce-page) .wp-site-blocks main .wp-block-post-title,
body.single-post .wp-site-blocks main .wp-block-post-title {
	text-align: center;
}

.wp-site-blocks main .wp-block-query-title,
.wp-site-blocks main .wp-block-post-title {
	text-align: center;
}

/*
 * ...but only PAGE titles. `wp-block-post-title` is also the class on every
 * item inside a loop and on the single-product summary; those range left or
 * centre by their own layout, not by this rule.
 */
.wp-site-blocks main .wp-block-post-template .wp-block-post-title,
.wp-site-blocks main .honeybee-product-summary .wp-block-post-title {
	text-align: left;
}

.wp-site-blocks main .wc-block-product .wp-block-post-title,
.wp-site-blocks main .wc-block-product-template .wp-block-post-title {
	text-align: center;
}


/* --- Search + form controls ---------------------------------------------------- */

.wp-block-search__input,
.wp-block-search .wp-block-search__input {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.8rem 1rem;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wp-block-search .wp-block-search__button {
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.8rem 1.6rem;
	margin-left: 0.6rem;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.wp-block-search .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--amber);
	border-color: var(--wp--preset--color--amber);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7rem 0.85rem;
}

.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input.input-text,
.woocommerce-page textarea,
.woocommerce-page select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce textarea.input-text,
.woocommerce-page textarea.input-text,
#order_comments,
.wc-block-components-text-input input,
.wc-block-components-textarea {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7rem 0.85rem;
	box-shadow: none;
}

/* Select2 replaces the country/state selects with its own markup. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	height: auto;
	padding: 0.35rem 0.35rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

.select2-dropdown {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

#payment,
.woocommerce-checkout #payment {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
}

#payment ul.payment_methods {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

#payment div.form-row {
	padding: 1rem 1.15rem;
}

#payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--honey-wash);
}

#payment div.payment_box {
	background-color: var(--wp--preset--color--honey-wash);
	color: var(--wp--preset--color--ink);
	border-radius: 0;
}

/* Woo's required-field marker is a bright red; bring it to the palette's rust. */
.woocommerce .required,
.woocommerce abbr.required {
	color: #8A2B12;
	border: 0;
	text-decoration: none;
}


/* --- Cart / checkout / account ------------------------------------------------- */

.wp-site-blocks .wp-block-post-title.alignwide,
.woocommerce-cart .wp-site-blocks main .woocommerce,
.woocommerce-checkout .wp-site-blocks main .woocommerce,
.woocommerce-account .wp-site-blocks main .woocommerce {
	max-width: var(--wp--style--global--wide-size);
}

/*
 * Notices. See v1 history for the full reasoning: specificity prefixed with
 * .wp-site-blocks to beat Woo's own two-class selectors, semantics carried by
 * the left edge and text colour rather than tinted panels.
 */
.wp-site-blocks .wc-block-components-notice-banner,
.wp-site-blocks .woocommerce-message,
.wp-site-blocks .woocommerce-info,
.wp-site-blocks .woocommerce-error {
	border: 1px solid var(--wp--preset--color--hairline);
	border-left-width: 3px;
	border-radius: 0;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 1rem 1.15rem;
}

.wp-site-blocks .wc-block-components-notice-banner > svg {
	background-color: transparent;
	border-radius: 0;
	fill: currentColor;
	padding: 0;
	height: auto;
	align-self: flex-start;
}

.wp-site-blocks .wc-block-components-notice-banner.is-info,
.wp-site-blocks .woocommerce-info {
	border-left-color: var(--wp--preset--color--amber);
}

.wp-site-blocks .wc-block-components-notice-banner.is-success,
.wp-site-blocks .woocommerce-message {
	border-left-color: #3D5741;
}

.wp-site-blocks .wc-block-components-notice-banner.is-warning {
	border-left-color: var(--wp--preset--color--amber);
}

.wp-site-blocks .wc-block-components-notice-banner.is-error,
.wp-site-blocks .woocommerce-error {
	border-color: #8A2B12;
	border-left-color: #8A2B12;
	color: #8A2B12;
}

.wp-site-blocks .wc-block-components-notice-banner.is-error > svg,
.wp-site-blocks .wc-block-components-notice-banner.is-warning > svg {
	transform: none;
}

.wp-site-blocks .wc-block-components-notice-banner a,
.wp-site-blocks .woocommerce-error a,
.wp-site-blocks .woocommerce-info a,
.wp-site-blocks .woocommerce-message a {
	color: inherit;
	text-underline-offset: 3px;
}

.wp-site-blocks .woocommerce-error {
	list-style: none;
	padding-left: 1.15rem;
}

.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price {
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 600;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding-left: 0;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 0;
	text-decoration: none;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
}


/* --- Footer --------------------------------------------------------------------- */

/*
 * The footer sits on PAPER, not on a dark ground — the dark band above it is
 * page furniture that varies per template. Mock: 2fr 1fr 1fr 1fr columns,
 * gold column labels, Jost 300 links, then a centred hairlined fineprint row.
 */
.honeybee-footer {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.honeybee-footer__cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
}

.honeybee-footer__wordmark {
	font-family: var(--wp--preset--font-family--display);
}

.honeybee-footer__blurb {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	color: var(--wp--preset--color--amber-deep);
	max-width: 36ch;
	margin: 0;
}

.honeybee-footer__place {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}

.honeybee-footer__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	margin: 0;
}

.honeybee-footer__list,
.honeybee-footer .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.honeybee-footer__list li {
	margin: 0;
}

.honeybee-footer__list a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--amber-deep);
	text-decoration: none;
	transition: color 140ms ease;
}

.honeybee-footer__list a:hover {
	color: var(--wp--preset--color--amber);
}

.honeybee-fineprint {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding: 14px clamp(1rem, 4vw, 2.5rem);
}

.honeybee-fineprint__copy,
.honeybee-fineprint p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* The cookie-preferences reopen link rides in the fineprint row. */
.honeybee-fineprint a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.honeybee-fineprint a:hover {
	color: var(--wp--preset--color--amber);
}


/* --- Print ------------------------------------------------------------------------ */

@media print {
	.honeybee-header,
	.honeybee-footer,
	.honeybee-band,
	.wp-block-navigation,
	.wc-block-components-product-button {
		display: none !important;
	}

	body {
		background: #FFF;
		color: #000;
	}
}


/* --- Top-level region spacing ------------------------------------------------------ */

/*
 * WordPress spaces the template regions with the theme's blockGap; every
 * template here opens and closes on its own band, so the regions butt
 * together.
 */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}


/* --- Phone (≤ 781px, WP's own admin-bar breakpoint) -------------------------------- */

@media (max-width: 781px) {

	/* Utility bar: one centred line, no cart (the cart moves to the crest). */
	.honeybee-utility {
		justify-content: center;
		gap: 0.5em;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.honeybee-utility p {
		font-size: 0.625rem;
	}

	.honeybee-utility__place::after {
		content: "\00a0\00b7";
	}

	.honeybee-utility .honeybee-utility__cart.wp-block-group {
		display: none;
	}

	/*
	 * Crest: 44px | 1fr | 44px — hamburger left, logo + wordmark centred,
	 * cart right. The nav block's own open button is repositioned into the
	 * left slot; the phone cart occupies the right.
	 */
	.honeybee-crest {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.honeybee-crest .wp-block-site-logo img {
		width: 38px;
		height: 38px;
	}

	.honeybee-crest .wp-block-site-title {
		font-size: 1.1875rem;
	}

	.honeybee-crest__tagline {
		display: none;
	}

	/*
	 * The nav block is `position: relative` by default, so the open button's
	 * `top: 50%` measured against the NAV — which on a phone is a zero-height
	 * box sitting under the wordmark — and the hamburger landed 40px below the
	 * cart it should line up with. Make the nav static so the button, like the
	 * cart, positions against the crest itself (position: relative above).
	 * The menu overlay is position: fixed when open, so it does not care.
	 */
	.honeybee-crest .wp-block-navigation {
		position: static;
	}

	/*
	 * The crest is already the inset column (16px in from the phone's edge),
	 * so the two controls sit flush with it — mock: hamburger at x=16, cart
	 * ending at x=374 — not a second 16px in.
	 */
	.honeybee-crest .wp-block-navigation__responsive-container-open {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		color: var(--wp--preset--color--ink);
	}

	.honeybee-crest .honeybee-crest__cart.wp-block-group {
		display: flex;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.honeybee-crest__cart .honeybee-cart-link {
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--caps);
		font-weight: 400;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink);
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
		line-height: 1.3;
	}

	/* Filter bar: one scrollable row, tighter tracking. */
	.honeybee-filterbar .wp-block-group.alignwide {
		flex-wrap: nowrap;
		overflow-x: auto;
		/* Touch-scrollable, but no scrollbar chrome across the shelf row. */
		scrollbar-width: none;
	}

	.honeybee-filterbar .wp-block-group.alignwide::-webkit-scrollbar {
		display: none;
	}

	.honeybee-goods-count {
		display: none;
	}

	.honeybee-cat-nav ul,
	ul.honeybee-cat-nav,
	.honeybee-cat-nav.wp-block-categories-list {
		flex-wrap: nowrap;
		gap: 1.25rem;
		white-space: nowrap;
	}

	.honeybee-pagehead {
		padding-top: 30px;
	}

	/* Grid: two columns (Woo's template inlines its own columns; override). */
	.honeybee-grid .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.5rem 1rem !important;
	}

	.wc-block-product .wp-block-woocommerce-product-image,
	.wc-block-product .wc-block-components-product-image {
		padding: 7px;
	}

	.honeybee-chip {
		top: 12px;
		left: 12px;
		font-size: 0.5625rem;
		letter-spacing: 0.16em;
		padding: 3px 6px;
	}

	/* First six products + "Show all sixteen" (honeybee-shop.js flips this). */
	.honeybee-grid .wc-block-product-template__responsive.is-collapsed > li:nth-child(n+7) {
		display: none;
	}

	.honeybee-shop .honeybee-showall.wp-block-group {
		display: flex;
		margin-top: 2rem;
	}

	.honeybee-showall__btn .wp-block-button__link {
		background: transparent;
		color: var(--wp--preset--color--ink);
		border: 1px solid var(--wp--preset--color--ink);
		padding: 14px 28px;
	}

	/*
	 * Stepper + Add to cart on one line, as the mock draws it. At 390px the
	 * desktop sizes (165px stepper, 196px button, 16px gap) overflow a 343px
	 * column and the button wrapped onto its own line. Compact 44px cells
	 * (still the minimum tap target) and a button that grows to fill the
	 * remainder — so it reaches the column's right edge on every phone width
	 * instead of stopping at an arbitrary point.
	 */
	.honeybee-qty__btn {
		width: 44px;
		padding-left: 0;
		padding-right: 0;
		justify-content: center;
	}

	.honeybee-product-summary .honeybee-qty input.qty {
		width: 44px;
		box-sizing: border-box;
		padding-left: 0;
		padding-right: 0;
	}

	/*
	 * WooCommerce's small-screen stylesheet forces `form.cart .button` to
	 * width: 100% below 768px, which makes the button's flex-basis the whole
	 * column, so it always wrapped onto its own line regardless of the stepper.
	 * The selector below outranks Woo's (5 classes + 2 elements vs 4 + 2).
	 */
	.woocommerce div.product .honeybee-product-summary form.cart .single_add_to_cart_button,
	.honeybee-product-summary .single_add_to_cart_button {
		width: auto;
		flex: 1 1 auto;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Product page stacks. */
	.honeybee-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.honeybee-gallery-plate {
		padding: 10px;
	}

	.honeybee-product-summary__title {
		font-size: 2.125rem !important;
	}

	.honeybee-description {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.honeybee-description__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.honeybee-related {
		padding-top: 24px;
		padding-bottom: 30px;
	}

	.honeybee-related__head {
		margin-bottom: 18px;
	}

	/* The mock shows two related items on a phone; a wrapped third sits alone
	 * in the left column and reads as a mistake. */
	.honeybee-grid--related .wc-block-product-template__responsive > li:nth-child(n+3) {
		display: none;
	}

	/* Bands: stacked and centred. */
	.honeybee-band {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.honeybee-band__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		text-align: center;
	}

	.honeybee-band--split .wp-block-group.alignwide {
		justify-content: center;
		text-align: center;
	}

	.honeybee-band__claim {
		font-size: 1.1875rem;
	}

	/* Home stacks. */
	.honeybee-hero {
		padding-top: 32px;
		padding-bottom: 40px;
	}

	.honeybee-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.honeybee-makes__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	/*
	 * Footer, phone: the mock shows only the fineprint under the dark band —
	 * the column grid is a desktop device. The same links live in the nav
	 * drawer, so nothing becomes unreachable.
	 */
	.honeybee-footer__cols {
		display: none;
	}
}


/* --- CookieAdmin consent banner ----------------------------------------------------- */

/*
 * (Superseded plugin — markup retained by honeybee-consent, which reuses the
 * classes.) Colour comes from the plugin settings; what is below is what the
 * plugin has no setting for.
 */

.cookieadmin_consent_inside {
	border-radius: 0;
	box-shadow: none;
	padding: 1.5rem 1.6rem;
}

#cookieadmin_notice_title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	padding-left: 0;
	margin-bottom: 0.5rem;
}

#cookieadmin_notice,
.cookieadmin_desc {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

.cookieadmin_btn {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 0;
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--ink);
	padding: 0.7rem 1.2rem;
	margin: 4px;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.cookieadmin_btn:hover {
	background-color: var(--wp--preset--color--amber);
	border-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--base);
}

.cookieadmin-poweredby {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted-light);
}

.cookieadmin_cookie_modal {
	border-radius: 0;
	box-shadow: none;
}

.cookieadmin_mod_head,
.cookieadmin_wrapper,
.cookieadmin_types,
.cookieadmin_modal_footer {
	border-color: var(--wp--preset--color--hairline);
}

.cookieadmin_preference_title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.cookieadmin_cookie_modal .stitle {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cookieadmin_close_pref {
	color: var(--wp--preset--color--muted);
}

.cookieadmin_re_consent {
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
}

.cookieadmin_re_consent:hover {
	background: var(--wp--preset--color--amber);
	border-color: var(--wp--preset--color--amber);
}

/* ---------------------------------------------------------------------------
 * Product lightbox (PhotoSwipe 4, shipped with WooCommerce).
 *
 * Retoned to the site's dark surface — bark, the same colour as the claims
 * band, so the lightbox is recognisably the same site with the lights off.
 * EVERY SELECTOR IS DELIBERATELY DOUBLED (`.pswp .pswp__x`): the skin's CSS
 * is enqueued after this stylesheet, so a single class loses on source order.
 * --------------------------------------------------------------------------- */

.pswp .pswp__bg {
	background: var(--wp--preset--color--bark);
}

.pswp .pswp__ui .pswp__top-bar,
.pswp .pswp__ui .pswp__caption {
	background-color: rgba(44, 36, 22, 0.55);
}

.pswp .pswp__button,
.pswp .pswp__button--arrow--left:before,
.pswp .pswp__button--arrow--right:before {
	opacity: 0.85;
}

.pswp .pswp__button:hover,
.pswp .pswp__button:focus-visible,
.pswp .pswp__button--arrow--left:hover:before,
.pswp .pswp__button--arrow--right:hover:before {
	opacity: 1;
}

.pswp .pswp__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--parchment);
	outline-offset: -3px;
}

.pswp .pswp__counter {
	color: var(--wp--preset--color--parchment);
	opacity: 1;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 44px;
	padding-left: 1rem;
}

.pswp .pswp__caption .pswp__caption__center {
	color: var(--wp--preset--color--parchment);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	text-align: center;
}

.pswp .pswp__img {
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45);
}

.pswp .pswp__preloader__donut {
	border-color: var(--wp--preset--color--parchment) transparent transparent transparent;
}

.pswp .pswp__preloader--active .pswp__preloader__donut {
	background: none;
}