/*
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.
Version: 1.0.0
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 honeycomb rule, and a few WooCommerce internals whose
   markup predates block styling.
   --------------------------------------------------------------------------- */


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

/*
 * A visible focus ring on every interactive thing. Accent on the panel measures
 * 5.59:1 and 5.08:1 on the kraft ground, so the ring is legible on every
 * surface the theme actually uses.
 * :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;
	font-variant-numeric: oldstyle-nums;
}

/* Prices, quantities and anything tabular wants lining figures, not oldstyle. */
.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;
}


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

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

.honeybee-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/*
 * Letterspacing is applied to the whole run, which leaves a trailing space of
 * 0.22em after the last glyph and visibly pushes a centred row off-centre.
 * Pulling it back keeps the nav optically centred under the wordmark.
 */
.honeybee-header .wp-block-navigation {
	margin-right: -0.22em;
}

/* The crest: logo, wordmark and tagline stack on the centre line. */
.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);
}

/*
 * Small-caps utility. Apothecary runs on letterspaced caps rather than on
 * weight contrast, so this is the workhorse label style — used in the top bar,
 * the tagline, product eyebrows and section headers.
 */
.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, muted only reaches 4.34:1 — ink is the only safe label there. */
.has-honey-wash-background-color .honeybee-caps--quiet {
	color: var(--wp--preset--color--ink);
}

.honeybee-header__bar .honeybee-caps {
	color: var(--wp--preset--color--ink);
}

/*
 * Nav links are ink, not amber: at small sizes a row of amber links reads as a
 * warning strip. The amber is spent on the underline instead.
 */
.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;
}

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

/* The cart link carries a count bubble; keep it from inheriting the underline. */
.honeybee-header .wc-block-mini-cart__button:focus-visible {
	outline-offset: 4px;
}


/* --- Label rule (double) --------------------------------------------------- */

/*
 * Every label rule sits at the same width, inset to wideSize like the ones in
 * the header. Templates put these separators straight into <main>, which uses a
 * flow layout — and in a flow layout `alignwide` resolves to nothing, so those
 * rules stretched edge to edge while the header's stayed inset. Rules at two
 * different widths on one page read as a mistake, and the inset is the one that
 * matters: the margin either side is what makes the rule look printed on paper
 * rather than drawn across a browser window.
 */
/*
 * wideSize alone is not enough: the header's rules live inside a group that
 * carries the root padding, so they stop at the padding edge whenever the
 * viewport is narrower than wideSize + padding. Matching that here keeps every
 * rule on the page starting and ending on exactly the same two x positions.
 */
.wp-site-blocks main > .wp-block-separator.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;
}

/*
 * The double rule taken off Evelyn's jar label, and the single strongest signal
 * of the apothecary direction. Built as top+bottom borders on a fixed-height
 * box rather than CSS `border-style: double`, which ties the line weight to the
 * total width and cannot hold an asymmetric pair.
 *
 * 2px over 1px with a 3px gap — the traditional letterpress double rule, thick
 * line above thin. An even 1/1/1 pair (what the artboard used) is too faint at
 * 1x now that these rules carry ALL the sectioning: the tinted section bands
 * were removed, so the rule is the only thing left marking where one part of
 * the page ends. The asymmetry is what keeps it reading as typography rather
 * than as a table border.
 */
.wp-block-separator.is-style-honeybee-rule {
	height: 6px;
	box-sizing: border-box;
	border: 0;
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
	background: none;
	opacity: 1;
}


/* --- Cream panel + framed image block styles ------------------------------ */

.wp-block-group.is-style-honeybee-panel {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
}

/*
 * A hairline mat rather than a drop shadow. The label look is flat and printed;
 * a soft shadow would read as a UI card floating above paper.
 */
.wp-block-image.is-style-honeybee-framed {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--ink);
	padding: 11px;
}

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


/*
 * The store-notices block renders an empty container when there is nothing to
 * announce — which is almost always — but it still collects a blockGap above
 * and below, opening ~48px of dead space between the sorting row and the first
 * product. 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;
}

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

/*
 * Apothecary boxes the photo, but as a printed MAT, not a UI card: a hairline
 * ink border with a panel-coloured inset, and the product text left outside on
 * the page ground. envo-storefront wraps the whole tile — image, title, price
 * and button — in one white rounded card with a shadow; here the border stops
 * at the image and the type stays on the paper, which is what makes it read as
 * a label rather than a listing.
 */
.wc-block-product-template__responsive .wc-block-product,
.wp-block-post-template .wc-block-product,
li.wc-block-product {
	position: relative;
}

/*
 * Product titles wrap to one or two lines depending on the name, which left the
 * Add to cart buttons stepping up and down across a row. Reserving two lines of
 * title height puts every button in a row on the same baseline.
 *
 * Deliberately NOT solved by making the tile a flex column with margin-top:auto
 * on the button — Woo's product-image block sizes itself from an aspect-ratio,
 * and as a flex item it resolves to zero height and the photo disappears.
 */
.wc-block-product .wp-block-post-title {
	min-height: calc(2 * 1.25em);
}

/*
 * Woo's own inline CSS makes the product button a centred flex column
 * (align-items: center). Under left-aligned title and price that reads as a
 * misalignment, so the button is pulled back to the text column's left edge.
 */
.wc-block-product .wp-block-button.wc-block-components-product-button {
	align-items: flex-start;
}



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

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

/*
 * No hover zoom. With the image inset inside a mat, scaling it just slides the
 * photo under a fixed border — the motion reads as a glitch, not a lift.
 *
 * The hover feedback is the mat instead: the inset warms by one step and the
 * hairline goes to full ink. It is a state change, not an animation — nothing
 * moves and nothing on this site animates on scroll, which is deliberate. The
 * transition is short enough to feel like a response rather than an effect, and
 * the reduced-motion block above neutralises it for anyone who asks it to.
 */
@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 {
		transition: background-color 160ms ease, border-color 160ms ease;
	}

	.wc-block-product:hover .wp-block-woocommerce-product-image,
	.wc-block-product:hover .wc-block-components-product-image,
	.wp-block-image.is-style-honeybee-framed:hover {
		background-color: var(--wp--preset--color--honey-wash);
	}
}

/* Product title: serif, ink, no underline until hover. */
.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: 600;
	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--ink);
	text-decoration-thickness: 1px;
}

/* The category eyebrow above each product title. */
.honeybee-eyebrow,
.honeybee-eyebrow a {
	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;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

/* Sale badge — small, warm, square. Woo's default is a large coloured pill. */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	padding: 0.3rem 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}


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

/*
 * The gallery gets the same mat as the grid and the home page. Without it the
 * hero photo is the only image on the site sitting bare on the ground, and
 * several of Evelyn's shots are near-white (the lip balms, the second curling
 * stone frame) — those disappear entirely against the kraft without a border.
 */
.woocommerce-product-gallery__wrapper,
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--ink);
	padding: 12px;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 22%;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--ink);
	padding: 5px;
	width: 100%;
	height: auto;
}

.honeybee-product-summary .wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

/* Woo's add-to-cart button is not a core/button, so theme.json cannot reach it. */
.wc-block-components-product-button .wp-block-button__link,
.woocommerce button.button.alt,
.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--caps);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.85rem 1.9rem;
	transition: background-color 140ms ease, border-color 140ms ease;
}

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

/* Quantity stepper — Woo ships it borderless-ish and it disappears on cream. */
.wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
}

/* Tabs on the product page: flatten Woo's default rounded-tab chrome. */
.woocommerce-tabs ul.tabs {
	padding-left: 0;
	border-bottom: 1px solid rgba(44, 35, 23, 0.12);
}

.woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce-tabs ul.tabs li.active a {
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--ink);
}


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

/*
 * Apothecary is a CENTRED-AXIS design: the crest, the wordmark, the tagline and
 * the nav all sit on the page's centre line. Document pages have to agree with
 * that, or the page reads as having drifted left even when every left edge lines
 * up correctly.
 *
 * So on a page or a post — a document, as opposed to a catalogue — the title and
 * the text column are both centred. The rules and the header stay full width;
 * they are furniture, and furniture spanning the page under a centred column is
 * exactly the printed-title-plate effect the direction is built on.
 *
 * NOT applied to:
 *   - the front page, whose sections are their own full-bleed bands
 *   - archives, where the title is ranged left over a grid that fills the width
 *   - cart/checkout/account, which are wide forms and tables rather than reading
 *     columns, and keep a ranged-left title over full-width content
 *
 * (An earlier attempt ranged the body hard left to share the title's left edge.
 * The edges matched and it still looked wrong — a 704px column under a 1192px
 * title plate left the right half of the page empty and fought the centred
 * header. Left-edge alignment was the wrong thing to optimise for here.)
 */
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;
}


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

/*
 * The search field was the last browser-default control on the site: white
 * background, rounded corners, system border. Squared and brought into the
 * palette, same as the catalog-sorting <select>.
 *
 * `.wp-block-search__input` is styled rather than the 404 template's instance,
 * so any search block added later inherits it.
 */
.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--ink);
	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--caps);
	font-weight: 500;
	letter-spacing: 0.2em;
	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-deep);
	border-color: var(--wp--preset--color--amber-deep);
}

/*
 * Any other text input Woo renders (checkout, account, coupon) follows the same
 * vocabulary, so nothing on the site is left wearing browser chrome.
 *
 * The bare element selectors below are specificity (0,0,1) and lose to Woo's own
 * `.woocommerce form .form-row input.input-text`, so the classic checkout and
 * account forms are named explicitly underneath. Checkout here is the CLASSIC
 * shortcode form, not the block checkout — it renders white 4px-rounded fields
 * that a generic rule never touches.
 */
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--ink);
	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--ink);
	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--ink);
	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--ink);
	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);
}

/*
 * Woo tints the classic checkout's payment panel with `rgba(129,110,153,.14)` —
 * a PURPLE grey, which on a kraft ground reads as a dirty smudge rather than a
 * panel. Same treatment as every other panel on the site.
 */
#payment,
.woocommerce-checkout #payment {
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
}

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

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

/* The little triangle Woo points at the payment box is the same purple. */
#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 -------------------------------------------- */

/*
 * WooCommerce caps the cart, checkout and account pages at 1000px:
 *   .woocommerce-cart .wp-block-post-title, .woocommerce-cart main .woocommerce,
 *   .woocommerce-checkout ..., .woocommerce-account ... { max-width: 1000px }
 *
 * It is a legacy shortcode-era width, and it lands on the title and the
 * `.woocommerce` wrapper but NOT on the post-content block around them — so the
 * heading sat 96px inside a notice that started at the page margin, and both
 * disagreed with the header rules above. This theme's whole structure is that
 * everything starts and ends on the same two x positions, so these follow
 * alignwide like every other page. Woo's block cart and checkout are already
 * two-column layouts and read fine at that width.
 */
.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);
}


/*
 * These routes render from WooCommerce's own block templates, deliberately —
 * see the theme description. They inherit the palette and type from theme.json;
 * only the few places Woo hard-codes a colour need help.
 */
/*
 * Notices. Woo ships these in admin-blue on near-white with a filled blue disc
 * for an icon — the one place on the site still wearing WordPress's factory
 * colours, and on the kraft ground it reads as an admin notice pasted onto a
 * craft label.
 *
 * Two things matter here:
 *
 * 1. SPECIFICITY. Woo paints them from `.wc-block-components-notice-banner.is-info`
 *    (0,2,0) and `...is-info > svg` (0,2,1). A single-class override loses, and
 *    loses silently — the border changed and the background did not. Everything
 *    below is prefixed with `.wp-site-blocks` to sit one class above Woo rather
 *    than tie with it and depend on stylesheet order.
 *
 * 2. The blue disc is a `background-color` on the <svg>, NOT its fill — setting
 *    fill alone changes nothing visible. The disc is dropped entirely: a filled
 *    colour chip is Woo's vocabulary, not this theme's, which is hairlines and
 *    flat type throughout. The glyph inherits the notice's own colour instead.
 *
 * Semantics are kept — an error still has to read as an error — but they are
 * carried by the left edge, the glyph and the text colour rather than by a
 * tinted panel. Accents measured in scripts/contrast-apothecary.php:
 *   error   #8A2B12  7.72 on panel / 7.01 on kraft
 *   warning #7A5B2E  5.59 / 5.08
 *   success #3D5741  7.13 / 6.47
 *   info    ink     13.82 / 12.55
 */
.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--ink);
	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 {
	background-color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--ink);
	border-left-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--ink);
}

.wp-site-blocks .wc-block-components-notice-banner.is-success,
.wp-site-blocks .woocommerce-message {
	background-color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--ink);
	border-left-color: #3D5741;
	color: var(--wp--preset--color--ink);
}

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

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

/* Woo rotates the icon 180deg for error/warning; it is the same glyph either way. */
.wp-site-blocks .wc-block-components-notice-banner.is-error > svg,
.wp-site-blocks .wc-block-components-notice-banner.is-warning > svg {
	transform: none;
}

/* Links and the dismiss control inherit the notice's own colour. */
.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 rgba(44, 35, 23, 0.1);
}

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


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

.honeybee-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-bottom: 1px solid rgba(239, 231, 214, 0.28);
	transition: border-color 140ms ease;
}

.honeybee-footer a:hover {
	border-bottom-color: var(--wp--preset--color--honey);
}

.honeybee-footer .honeybee-fineprint {
	color: var(--wp--preset--color--muted-light);
}


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

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

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


/* --- One centred axis, every page ------------------------------------------ */

/*
 * Apothecary is a centred-axis design — crest, wordmark, tagline and nav all sit
 * on the page centre line. Titles follow, on ARCHIVES AS WELL AS PAGES.
 *
 * An earlier pass left archive titles and the category row ranged left, on the
 * theory that a catalogue heads a full-width grid while a document heads a
 * narrow column. That distinction does not survive contact with the page: the
 * product grid spans 44 → 1236, so it is already symmetric about the centre and
 * nothing about it requires a left-aligned title. All the split actually did was
 * make the title jump from left to centre as a visitor moved from Shop to Our
 * story — a rule the visitor has no way to know, on the pages they spend the
 * most time.
 */
.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 — each product in the grid, each post in the Journal listing —
 * and on the single-product summary. In all three the title sits above or below
 * left-ranged content (term eyebrow, price, date, excerpt, add-to-cart), so
 * centring just the title is the rule overreaching, not a design decision.
 *
 * These selectors are (0,3,1) against the centring rule's (0,2,1), so they win
 * without !important.
 */
.wp-site-blocks main .wc-block-product .wp-block-post-title,
.wp-site-blocks main .wp-block-post-template .wp-block-post-title,
.wp-site-blocks main .wc-block-product-template .wp-block-post-title,
.wp-site-blocks main .honeybee-product-summary .wp-block-post-title {
	text-align: left;
}

.honeybee-cat-nav ul,
ul.honeybee-cat-nav,
.honeybee-cat-nav.wp-block-categories-list {
	justify-content: center;
}

/* --- Shop category nav ---------------------------------------------------- */

/*
 * core/categories renders a plain <ul>. Laid out as a horizontal row here
 * rather than hard-coding category links into the template, so the row keeps
 * working if Evelyn adds or renames a product category.
 */
.honeybee-cat-nav ul,
ul.honeybee-cat-nav,
.honeybee-cat-nav.wp-block-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	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: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.22em;
	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;
}

/*
 * Ink, not honey. Honey measures 1.27:1 against the kraft ground — as a 2px
 * underline it read as a smudge rather than as the marker for "you are here".
 * Honey is a fill colour in this palette and is never allowed to carry meaning.
 */
.honeybee-cat-nav a:hover,
.honeybee-cat-nav .current-cat > a {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ink);
}

/* Woo's breadcrumb trail: quiet it down, it is wayfinding not content. */
.wp-block-woocommerce-breadcrumbs,
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.01em;
}

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

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

/* Results count + sorting select sit on one quiet line. */

/*
 * The sorting <select> is the only default browser control on the page, and
 * next to squared ink-bordered everything else its rounded chrome is the first
 * thing the eye lands on. appearance:none plus an inline caret brings it into
 * the same vocabulary; the caret is a data URI so it costs no request.
 */
.woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M0 0 L4.5 6 L9 0 Z' fill='%232C2317'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.55rem 2.4rem 0.55rem 0.9rem;
}
.wp-block-woocommerce-product-results-count,
.wc-block-product-results-count {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.wp-block-woocommerce-catalog-sorting select,
.woocommerce-ordering select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink);
	background-color: transparent;
	border: 1px solid rgba(44, 35, 23, 0.18);
	border-radius: 2px;
	padding: 0.4rem 0.6rem;
}

/* Product gallery on the single product page. */
.woocommerce-product-gallery {
	border-radius: 2px;
	overflow: hidden;
}

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

/* Related products heading matches section headings elsewhere. */
.wp-block-woocommerce-related-products h2,
.related.products > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 2rem;
}


/* --- Cart link (replaces woocommerce/mini-cart) --------------------------- */

.honeybee-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding: 0.35rem;
	line-height: 0;
}

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

.honeybee-cart-link__count {
	position: absolute;
	top: -2px;
	right: -6px;
	min-width: 1.15rem;
	height: 1.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.28rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
}

.honeybee-cart-link__count[hidden] {
	display: none;
}


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

/*
 * WordPress spaces the template regions with the theme's blockGap:
 *   :where(.wp-site-blocks) > * { margin-block-start: 1.5rem }
 * Header is :first-child so it escapes, but <main> and <footer> each inherit
 * 24px — which opened a band of page background between the header's honeycomb
 * rule and the first section, and again above the dark footer.
 *
 * Every template here opens and closes on its own full-bleed band (title band,
 * hero, or a group carrying its own padding), so the regions are meant to butt
 * together. :where() carries zero specificity, so this plain selector wins.
 */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}