/*
Theme Name: Bawania Ghee
Theme URI: http://bawania-ghee.localhost
Description: Storefront child theme for the Bawania Ghee store — A2 desi cow
             bilona ghee and traditional foods. It owns the presentation
             decisions that would otherwise accumulate as Customizer CSS: the
             warm cream and olive palette, the button and badge rules, the
             product card pricing treatment, the homepage section order and
             the multi-column footer.
Author: Bawania Ghee
Template: storefront
Version: 2.5.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bawania-ghee
*/

/* ==========================================================================
   1. Design tokens
   --------------------------------------------------------------------------
   The palette is the store's whole identity: a warm cream ground (ghee, milk,
   brass vessels) with olive for action. Every value the layout needs is
   declared once here; nothing below hard-codes a hex except where a value is
   genuinely unique to that rule.
   ========================================================================== */

:root {
	/* Ground */
	--bw-cream: #fffbeb;
	--bw-cream-deep: #f6f0dd;
	--bw-surface: #ffffff;

	/* Ink.
	   The first two greys are darker than the palette this theme was designed
	   against, on purpose. The originals (#6e6e6e body, #969696 muted) measure
	   4.47:1 and 2.85:1 against the cream ground — under the WCAG AA 4.5:1
	   floor for body text — and the muted grey was doing structural work, not
	   just looking quiet: struck prices, result counts, SKUs. Those are read,
	   not decoration. */
	--bw-ink: #202020;
	--bw-heading: #232323;
	--bw-body: #636363;
	--bw-muted: #6f6f6f;

	/* Olive — the action colour */
	--bw-olive: #606c38;
	--bw-olive-dark: #434e1f;
	--bw-olive-deep: #414c1b;

	/* Accents.
	   The badge carries white 11px bold text, which needs 4.5:1. The brighter
	   #799b00 managed 3.23:1, so it is darkened to clear the bar; it still
	   reads as the same olive-green family. */
	--bw-amber: #8a5f20;
	--bw-badge: #5f7a00;
	--bw-sale: #55632a;
	--bw-price: #283618;

	/* Lines */
	--bw-border: #e8e2d0;
	--bw-border-soft: #f0ecdf;

	/* Type */
	--bw-font-body: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, sans-serif;
	--bw-font-heading: "DM Sans", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, sans-serif;

	/* Measure */
	--bw-container: 1200px;
	--bw-radius: 0px;
	--bw-radius-sm: 6px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	background-color: var(--bw-cream);
	color: var(--bw-body);
	font-family: var(--bw-font-body);
	font-size: 14px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.page-title,
.widget h1, .widget h2, .widget h3 {
	font-family: var(--bw-font-heading);
	color: var(--bw-heading);
	font-weight: 500;
	letter-spacing: 0;
}

a {
	color: var(--bw-heading);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
a:focus {
	color: var(--bw-olive);
}

img { max-width: 100%; height: auto; }

.site-content { padding: 0; }

/* WooCommerce clears its own container padding; the store lays sections out
   itself and Storefront's doubled gutters look wrong against the cream. */
.woocommerce .site-content,
body:not(.home) .site-content {
	padding-top: 2.5rem;
	padding-bottom: 3.5rem;
}

/* Storefront lays the shop, product and page content out edge to edge with no
   measure at all, so on a wide screen "Shop" starts at the very left of the
   window while the header and the homepage sections sit in a centred 1200px
   column. Both have to agree or every page jump changes on navigation. */
body:not(.home) .site-content #primary,
body:not(.home) .site-content .site-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--bw-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* ==========================================================================
   3. Buttons
   --------------------------------------------------------------------------
   Kasutam-style: square corners, uppercase, generous vertical padding. The
   primary is olive, the secondary is a darker olive that goes black on hover.
   Both are block-level by default on mobile.
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.wp-block-button__link {
	font-family: var(--bw-font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--bw-radius);
	background-color: var(--bw-olive);
	color: #fff;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
	background-color: var(--bw-olive-dark);
	color: #fff;
}

/* Cart/checkout emphasis — deeper still. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background-color: var(--bw-olive-deep);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* The ghost/outline variant used on product cards and section headers. */
.bw-btn-ghost {
	display: inline-block;
	font-family: var(--bw-font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding: 14px 28px;
	border: 1px solid var(--bw-ink);
	border-radius: var(--bw-radius);
	background: transparent;
	color: var(--bw-heading);
	transition: background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease;
}

.bw-btn-ghost:hover {
	background-color: var(--bw-ink);
	border-color: var(--bw-ink);
	color: #fff;
}

/* Secondary action — the darker olive that falls to black. */
.bw-btn-deep {
	display: inline-block;
	font-family: var(--bw-font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding: 16px 32px;
	border: 0;
	border-radius: var(--bw-radius);
	background-color: var(--bw-olive-deep);
	color: #fff;
	transition: background-color 0.25s ease;
}

.bw-btn-deep:hover {
	background-color: #000;
	color: #fff;
}

/* ==========================================================================
   4. Announcement bar
   --------------------------------------------------------------------------
   Sits above the header. Two messages share the strip and cross-fade, so the
   bar never grows taller when the text wraps.
   ========================================================================== */

.bw-announcement {
	background-color: var(--bw-olive-deep);
	color: #fff;
	font-family: var(--bw-font-heading);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 11px 20px;
	position: relative;
	overflow: hidden;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bw-announcement__item {
	display: none;
	margin: 0;
	line-height: 1.5;
}

.bw-announcement__item.is-visible { display: block; }

.bw-announcement a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bw-announcement a:hover { color: #fff; opacity: 0.85; }

/* ==========================================================================
   5. Header
   ========================================================================== */

/*
 * Storefront puts a 59px band under the header.
 *
 * `.site-header { margin-bottom: 4.2358em }` at this base size. It adds more
 * variants on top of that, and the one that actually wins is
 * `.no-wc-breadcrumb .site-header` — a class Storefront's body_classes()
 * stamps onto every page unconditionally. So an empty white strip appeared
 * between the header and the navigation, on the home page and on every other
 * page, and the earlier low-specificity override did nothing against it.
 *
 * Rather than keep matching selector lists — the last one had four selectors
 * and a :not() — this reproduces the two highest-specificity forms directly
 * and adds a heavier one for the contexts Storefront still wins. The header in
 * this theme is a white bar with the menu directly beneath it; the band was
 * sized for Storefront's full-width dark header and has nowhere to go.
 */
.site-header,
.no-wc-breadcrumb .site-header,
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
	margin-bottom: 0;
}

/*
 * Belt and braces: a child rule only outranks an equally specific parent one
 * by coming later in source order, which is satisfied above, but a selector
 * this specific is easy to add to by accident later. This one matches the
 * widest possible set of contexts.
 */
.home .site-header,
.no-wc-breadcrumb.page .site-header,
.no-wc-breadcrumb.home .site-header,
body .no-wc-breadcrumb .site-header {
	margin-bottom: 0;
}

.bw-header {
	background-color: var(--bw-surface);
	padding: 22px 0;
}

.bw-header__inner {
	max-width: var(--bw-container);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 20px;
}

.bw-header__brand {
	grid-column: 2;
	justify-self: center;
	text-align: center;
}

.bw-header__brand .custom-logo-link {
	display: inline-block;
}

.bw-header__brand .custom-logo {
	max-height: 56px;
	width: auto;
}

.bw-header__title {
	font-family: var(--bw-font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
	color: var(--bw-ink);
	line-height: 1.2;
}

.bw-header__tagline {
	font-family: var(--bw-font-body);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bw-muted);
	margin: 4px 0 0;
}

.bw-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
}

.bw-header__actions a,
.bw-header__actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--bw-heading);
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
	padding: 0;
}

.bw-header__actions a:hover,
.bw-header__actions button:hover { color: var(--bw-olive); }

.bw-header__actions svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Mobile header: burger left, wordmark centred, actions right.

   The burger is rendered in the header row rather than in a separate bar
   above it, which is how the reference site does it and what saves 48px of
   vertical space on a phone. It is hidden on desktop, where the horizontal
   navigation bar carries the same links. */
.bw-header__burger {
	display: none;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	justify-self: start;
	position: relative;
}

.bw-header__burger-bar,
.bw-header__burger-bar::before,
.bw-header__burger-bar::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	background-color: var(--bw-heading);
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.bw-header__burger-bar {
	top: 21px;
}

.bw-header__burger-bar::before,
.bw-header__burger-bar::after {
	content: "";
	left: 0;
}

.bw-header__burger-bar::before { top: -7px; }
.bw-header__burger-bar::after  { top: 7px; }

/* Open state turns the three rules into a cross. */
.bw-header__burger[aria-expanded="true"] .bw-header__burger-bar {
	background-color: transparent;
}

.bw-header__burger[aria-expanded="true"] .bw-header__burger-bar::before {
	top: 0;
	transform: rotate(45deg);
}

.bw-header__burger[aria-expanded="true"] .bw-header__burger-bar::after {
	top: 0;
	transform: rotate(-45deg);
}

.bw-header__burger:focus-visible {
	outline: 2px solid var(--bw-olive);
	outline-offset: 2px;
}

/* Mobile header.
 *
 * The desktop row is `1fr auto 1fr` — wordmark centred between two equal
 * gutters. A plain `1fr` is minmax(auto, 1fr), whose floor is the column's
 * min-content size, and the three icon buttons are 138px of it, so the row
 * cannot shrink below its content and pushes 27px past a 320px viewport. The
 * wordmark then goes left and the icons right, which is also the pattern
 * people expect on a phone: the logo is the way back to the shop.
 *
 * Buttons are 44px, not 42px. WCAG 2.5.5 and both platform HIGs ask for a
 * 44px touch target, and 42 is the default nobody chose deliberately.
 */
@media (max-width: 767px) {
	.bw-header {
		padding: 14px 0;
	}

	.bw-header__inner {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		gap: 8px;
		padding: 0 12px;
	}

	.bw-header__burger { display: flex; }

	.bw-header__brand {
		grid-column: 2;
		justify-self: center;
		text-align: center;
		min-width: 0;
	}

	.bw-header__actions {
		grid-column: 3;
		justify-self: end;
		gap: 0;
	}

	.bw-header__actions a,
	.bw-header__actions button {
		width: 44px;
		height: 44px;
	}

	/* Scales with the viewport so the longest wordmark still fits at 320px
	   alongside three 44px targets. */
	.bw-header__title {
		font-size: clamp(15px, 4.4vw, 21px);
		letter-spacing: 0.08em;
	}

	.bw-header__tagline {
		display: none;
	}

	.bw-header__brand .custom-logo {
		max-height: 40px;
	}
}

/* Cart bubble */
.bw-cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background-color: var(--bw-olive);
	color: #fff;
	font-family: var(--bw-font-heading);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* Search drawer — opened by the header search button. */
.bw-search {
	border-top: 1px solid var(--bw-border-soft);
	background-color: var(--bw-cream);
	padding: 22px 0;
}

.bw-search[hidden] { display: none; }

.bw-search__inner {
	max-width: var(--bw-container);
	margin: 0 auto;
	padding: 0 20px;
}

.bw-search form {
	display: flex;
	gap: 10px;
}

.bw-search input[type="search"] {
	flex: 1;
	padding: 13px 16px;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background-color: #fff;
	font-family: var(--bw-font-body);
	font-size: 14px;
	color: var(--bw-heading);
}

/* Trending queries and featured products inside the search drawer. */
.bw-search__trending,
.bw-search__featured {
	margin-top: 18px;
}

.bw-search__trending p,
.bw-search__featured p {
	font-family: var(--bw-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bw-heading);
	margin: 0 0 10px;
}

.bw-search__trending ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bw-search__trending a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--bw-border);
	border-radius: 999px;
	background-color: #fff;
	font-size: 13px;
	color: var(--bw-heading);
}

.bw-search__trending a:hover {
	border-color: var(--bw-olive);
	color: var(--bw-olive);
}

.bw-search__featured ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.bw-search__featured li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border: 1px solid var(--bw-border-soft);
	border-radius: var(--bw-radius-sm);
	background-color: #fff;
}

.bw-search__featured li a {
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
}

.bw-search__featured li span {
	font-size: 13px;
	color: var(--bw-price);
}

@media (max-width: 560px) {
	.bw-search__featured ul {
		grid-template-columns: 1fr;
	}
}

.bw-search input[type="search"]:focus {
	border-color: var(--bw-olive);
	outline: none;
}

/* Mobile: footer links and the wordmark are 17px-tall text, which is a fine
   reading size and a poor tap target. Padding each one out to 44px costs
   nothing visually and makes the footer usable with a thumb. */
@media (max-width: 767px) {
	.site-footer .bw-footer__col li {
		margin-bottom: 2px;
	}

	.site-footer .bw-footer__col a,
	.site-footer .bw-footer__col ul li a {
		display: inline-block;
		padding: 11px 0;
		line-height: 22px;
	}

	.bw-header__home {
		display: inline-block;
		padding: 12px 0;
	}
}

/* Storefront's full-screen image trigger is 28px, which is under the 44px a
   thumb needs and sits directly on top of the product photograph. */
.woocommerce div.product div.images a.woocommerce-product-gallery__trigger {
	width: 44px;
	height: 44px;
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
}

.woocommerce div.product div.images a.woocommerce-product-gallery__trigger img {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   6. Navigation
   --------------------------------------------------------------------------
   A single horizontal bar with category dropdowns. Kasutam keeps the top
   level short and lets the categories do the work, so the bar stays one line
   on a laptop.
   ========================================================================== */

.bw-nav {
	background-color: var(--bw-surface);
	border-bottom: 1px solid var(--bw-border-soft);
}

.bw-nav__inner {
	max-width: var(--bw-container);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: center;
}

.bw-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.bw-nav li { position: relative; }

.bw-nav a {
	display: block;
	padding: 16px 20px;
	font-family: var(--bw-font-heading);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: capitalize;
	color: var(--bw-heading);
	white-space: nowrap;
}

.bw-nav > ul > li > a:hover { color: var(--bw-olive); }

.bw-nav .current-menu-item > a,
.bw-nav .current_page_item > a { color: var(--bw-olive); }

/* Dropdown */
.bw-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background-color: #fff;
	border: 1px solid var(--bw-border-soft);
	border-top: 2px solid var(--bw-olive);
	padding: 8px 0;
	box-shadow: 0 12px 28px rgba(32, 32, 32, 0.08);
	display: none;
	z-index: 100;
}

.bw-nav li:hover > ul,
.bw-nav li:focus-within > ul { display: block; }

.bw-nav ul ul a {
	padding: 9px 20px;
	font-size: 13px;
	text-transform: capitalize;
}

/*
 * Mobile navigation.
 *
 * The burger lives in the header row, not here, so on a phone this bar has
 * nothing to show until the menu is opened. It must therefore collapse to
 * nothing when closed: left rendered, its background, its border and its
 * padding put a ~59px empty white strip between the header and the hero, which
 * is the gap this block exists to remove.
 *
 * The open state lives on the bar (data-bw-nav-open), not on the list, so the
 * bar can take a height of zero while it is closed and the hero meets the
 * header directly. Animate max-height from a non-zero value so there is
 * something to transition, and mark the bar hidden from assistive technology
 * while collapsed so its links are not reachable by keyboard before it opens.
 */
@media (max-width: 900px) {
	.bw-nav {
		background-color: transparent;
		border-bottom: 0;
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.3s ease;
	}

	.bw-nav[data-bw-nav-open="true"] {
		background-color: var(--bw-surface);
		border-bottom: 1px solid var(--bw-border-soft);
		max-height: 80vh;
		overflow-y: auto;
	}

	.bw-nav__inner {
		padding: 0;
		display: block;
	}

	.bw-nav ul {
		display: none;
		flex-direction: column;
		width: 100%;
		border-top: 1px solid var(--bw-border-soft);
		padding-bottom: 10px;
	}

	.bw-nav[data-bw-nav-open="true"] ul { display: flex; }

	.bw-nav ul ul {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding-left: 18px;
	}

	.bw-nav li:hover > ul { display: block; }
	.bw-nav a { padding: 13px 20px; }
	.bw-nav a:focus-visible { outline: 2px solid var(--bw-olive); outline-offset: -2px; }
}

/* ==========================================================================
   7. Homepage sections
   ========================================================================== */

.bw-section {
	padding: 62px 20px;
}

.bw-section--tight { padding: 44px 20px; }
.bw-section--cream { background-color: var(--bw-cream-deep); }
.bw-section--surface { background-color: #fff; }

.bw-section__inner {
	max-width: var(--bw-container);
	margin: 0 auto;
}

.bw-section__head {
	text-align: center;
	margin: 0 auto 38px;
	max-width: 720px;
}

.bw-section__eyebrow {
	font-family: var(--bw-font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bw-olive);
	margin: 0 0 10px;
}

.bw-section__title {
	font-family: var(--bw-font-heading);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--bw-heading);
	margin: 0 0 12px;
}

.bw-section__lede {
	font-size: 15px;
	line-height: 1.8;
	color: var(--bw-body);
	margin: 0;
}

/* --- Hero ---------------------------------------------------------------- */

.bw-hero {
	background-color: var(--bw-cream-deep);
	padding: 54px 20px 62px;
}

.bw-hero__inner {
	max-width: var(--bw-container);
	margin: 0 auto;
}

.bw-hero__slides {
	display: grid;
}

.bw-hero__slide {
	grid-area: 1 / 1;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.bw-hero__slide.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.bw-hero__slide {
		transition: none;
	}
}

.bw-hero__title {
	font-family: var(--bw-font-heading);
	font-size: 42px;
	font-weight: 500;
	line-height: 1.22;
	color: var(--bw-heading);
	margin: 0 0 16px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.bw-hero__text {
	font-size: 16px;
	line-height: 1.8;
	color: var(--bw-body);
	max-width: 620px;
	margin: 0 auto 28px;
}

.bw-hero__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.bw-hero__dots {
	display: flex;
	gap: 9px;
	justify-content: center;
	margin-top: 34px;
}

.bw-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #d8d2bf;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

/* The dot is 9px because a 9px dot is what a carousel dot looks like. What
   you tap is not the dot: an 18px invisible ring around it takes the touch,
   which clears the 24px minimum without drawing a target you can see. */
.bw-hero__dot::after {
	content: "";
	position: absolute;
	top: -14px;
	left: -14px;
	width: 37px;
	height: 37px;
	border-radius: 50%;
}

.bw-hero__dots {
	display: flex;
	gap: 9px;
	justify-content: center;
	margin-top: 34px;
}

.bw-hero__dot {
	position: relative;
}

.bw-hero__dot.is-active {
	background-color: var(--bw-olive);
	transform: scale(1.25);
}

/* --- Section subtitle ---------------------------------------------------- */

.bw-section__sub {
	font-family: var(--bw-font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--bw-body);
	margin: 6px 0 0;
}

.bw-section__head--tight { margin-bottom: 22px; }

/* --- Category pills ------------------------------------------------------ */

.bw-pills {
	margin: 0 0 26px;
}

.bw-pills__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.bw-pill {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--bw-border);
	border-radius: 999px;
	background-color: var(--bw-cream);
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bw-pill:hover {
	background-color: var(--bw-cream-deep);
	border-color: var(--bw-olive);
	color: var(--bw-olive);
}

.bw-pill.is-active {
	background-color: var(--bw-olive);
	border-color: var(--bw-olive);
	color: #fff;
}

.bw-pill:focus-visible {
	outline: 2px solid var(--bw-olive);
	outline-offset: 2px;
}

/* --- Product carousel ---------------------------------------------------- */

/*
 * A grid on the desktop, a swipeable track on a phone.
 *
 * The reference storefront shows a partial card at the right edge on mobile,
 * which is the only signal that a row scrolls at all — a grid that fits the
 * screen gives the user nothing to discover. The track therefore overflows by
 * one card's width minus a peek, scrolls natively (so it keeps momentum and
 * works with a trackpad), and the arrows only exist above the mobile
 * breakpoint where there is room for them.
 */
.bw-carousel { position: relative; }

.bw-carousel__nav {
	display: none;
	position: absolute;
	top: 38%;
	z-index: 5;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 1px solid var(--bw-border);
	border-radius: 50%;
	background-color: #fff;
	color: var(--bw-heading);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(32, 32, 32, 0.12);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bw-carousel__nav:hover {
	background-color: var(--bw-olive);
	color: #fff;
	border-color: var(--bw-olive);
}

.bw-carousel__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/*
 * The `hidden` attribute only works through the UA's `[hidden] {display:none}`
 * rule, which any author `display` declaration beats. The min-width:768px
 * block below sets `display: flex`, so without this the arrows stayed on screen
 * on a desktop where the grid fits every product and there is nothing to
 * scroll — two dead controls sitting over the catalogue.
 */
.bw-carousel__nav[hidden] {
	display: none !important;
}

.bw-carousel__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bw-carousel__nav--prev { left: -14px; }
.bw-carousel__nav--next { right: -14px; }

@media (min-width: 768px) {
	.bw-carousel__nav { display: flex; }
}

.bw-section__more {
	text-align: center;
	margin: 34px 0 0;
}

/* Mobile: pills become a single scrolling row, and the products a track. */
@media (max-width: 767px) {
	.bw-pills {
		/* Bleed to the screen edge so the row can run off it. */
		margin-left: -20px;
		margin-right: -20px;
		padding: 0 20px 4px;
		overflow: hidden;
	}

	.bw-pills__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bw-pills__list::-webkit-scrollbar { display: none; }

	.bw-pill {
		scroll-snap-align: start;
		padding: 9px 16px;
		font-size: 12.5px;
	}

	.bw-carousel {
		margin-left: -20px;
		margin-right: -20px;
		padding: 0 20px;
	}

	.bw-carousel .bw-products {
		display: flex !important;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: 20px;
		scrollbar-width: none;
		/* Room for the card hover-lift shadow and the focus ring. */
		padding-bottom: 6px;
	}

	.bw-carousel .bw-products::-webkit-scrollbar { display: none; }

	/* ~78% of the viewport, so the next card peeks and advertises the scroll. */
	.bw-carousel .bw-products li.product {
		flex: 0 0 78%;
		max-width: 78%;
		scroll-snap-align: start;
	}

	.bw-section__head--tight { margin-bottom: 16px; }
	.bw-section__title { font-size: 24px; }
}

/* --- Category tiles ------------------------------------------------------ */

.bw-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.bw-cat-grid a {
	display: block;
	text-align: center;
}

.bw-cat-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	background-color: var(--bw-cream-deep);
	margin-bottom: 14px;
	transition: transform 0.35s ease;
}

.bw-cat-grid a:hover img { transform: scale(1.04); }

.bw-cat-grid__title {
	font-family: var(--bw-font-heading);
	font-size: 15px;
	font-weight: 500;
	color: var(--bw-heading);
	margin: 0;
}

@media (max-width: 900px) { .bw-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bw-cat-grid { gap: 18px; } }

/* --- Trust strip --------------------------------------------------------- */

.bw-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
	padding: 26px 20px;
	background-color: var(--bw-olive-deep);
}

.bw-trust__item {
	color: #fff;
}

.bw-trust__item strong {
	display: block;
	font-family: var(--bw-font-heading);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px;
}

.bw-trust__item span {
	font-size: 13px;
	opacity: 0.85;
}

@media (max-width: 780px) { .bw-trust { grid-template-columns: repeat(2, 1fr); } }

/* --- Process steps ("from milking to packaging") -------------------------- */

.bw-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 26px;
	text-align: center;
}

.bw-step__num {
	width: 46px;
	height: 46px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background-color: var(--bw-olive);
	color: #fff;
	font-family: var(--bw-font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 46px;
}

.bw-step__title {
	font-family: var(--bw-font-heading);
	font-size: 15px;
	font-weight: 500;
	color: var(--bw-heading);
	margin: 0 0 8px;
}

.bw-step__text {
	font-size: 13px;
	line-height: 1.75;
	color: var(--bw-body);
	margin: 0;
}

@media (max-width: 900px) { .bw-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bw-steps { grid-template-columns: 1fr; } }

/* --- FAQ ----------------------------------------------------------------- */

.bw-faq { max-width: 820px; margin: 0 auto; }

.bw-faq__item {
	border-bottom: 1px solid var(--bw-border);
}

.bw-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: none;
	border: 0;
	padding: 22px 0;
	font-family: var(--bw-font-heading);
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	color: var(--bw-heading);
	cursor: pointer;
}

.bw-faq__q:hover { color: var(--bw-olive); }

.bw-faq__icon {
	flex: none;
	width: 18px;
	height: 18px;
	position: relative;
}

.bw-faq__icon::before,
.bw-faq__icon::after {
	content: "";
	position: absolute;
	background-color: var(--bw-olive);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.bw-faq__icon::before {
	left: 0; top: 8px; width: 18px; height: 2px;
}

.bw-faq__icon::after {
	left: 8px; top: 0; width: 2px; height: 18px;
}

.bw-faq__q[aria-expanded="true"] .bw-faq__icon::after {
	transform: scaleY(0);
	opacity: 0;
}

.bw-faq__a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.32s ease;
}

.bw-faq__a p {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--bw-body);
}

/* --- Closing CTA --------------------------------------------------------- */

.bw-cta {
	background-color: var(--bw-olive-deep);
	text-align: center;
	padding: 72px 20px;
}

.bw-cta__title {
	font-family: var(--bw-font-heading);
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 14px;
	line-height: 1.3;
}

.bw-cta__text {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.86);
	max-width: 600px;
	margin: 0 auto 30px;
}

.bw-cta .bw-btn-ghost {
	border-color: #fff;
	color: #fff;
}

.bw-cta .bw-btn-ghost:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--bw-olive-deep);
}

/* ==========================================================================
   8. Product cards
   --------------------------------------------------------------------------
   The card is a flex column with a fixed-height title and an auto-margined
   action, so every button in a row lands on the same baseline no matter how
   long the product name is. In normal flow one two-line title dragged its
   price and its button about twenty pixels below the three cards beside it,
   so a row of four had four different button heights.
   ========================================================================== */

.bw-products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* This list also carries WooCommerce's `products` class, so it inherits the
   float-clearing ::before/::after that would otherwise eat two grid cells —
   the same trap as the archive grid, and the reason the homepage row one
   started at column two. */
.bw-products::before,
.bw-products::after {
	display: none !important;
	content: none !important;
}

.bw-products li.product {
	width: auto;
	margin: 0;
	text-align: left;
	float: none;
	clear: none !important;
}

/* Card shell */
.bw-card {
	display: flex !important;
	flex-direction: column;
	position: relative;
}

.bw-card__media {
	display: block;
	position: relative;
	background-color: var(--bw-cream-deep);
	border-radius: var(--bw-radius-sm);
	overflow: hidden;
	margin-bottom: 14px;
	aspect-ratio: 1 / 1;
}

.bw-card__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
	transition: transform 0.4s ease;
}

.bw-card__media:hover img { transform: scale(1.05); }

/* Sale / sold-out flag, sitting on the photograph like the reference. */
.bw-card__flag {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-block;
	font-family: var(--bw-font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 3px;
	background-color: var(--bw-badge);
	color: #fff;
}

.bw-card__flag--out { background-color: var(--bw-body); }

/* Reviews line */
.bw-card__reviews {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--bw-body);
}

.bw-card__reviews .star-rating {
	font-size: 12px;
	margin: 0;
	color: var(--bw-amber);
	width: 5.2em;
}

.bw-card__reviews .star-rating::before { color: #d8d2bf; }

/*
 * The title is capped at two lines and given a fixed two-line height, so the
 * price row starts in the same place on every card. Clamped rather than
 * truncated: a long name loses its third line instead of being cut mid-word.
 */
.bw-products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce .related ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bw-font-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--bw-heading);
	margin: 0 0 8px;
	padding: 0;
	min-height: 2.9em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bw-products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: inherit;
}

.bw-products li.product .woocommerce-loop-product__title a:hover {
	color: var(--bw-olive);
}

/* One price line: struck MRP, live price, discount. */
.bw-price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--bw-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 14px;
}

.bw-price__mrp {
	color: var(--bw-muted);
	text-decoration: line-through;
	font-weight: 400;
	font-size: 13px;
}

.bw-price__now,
.bw-price__only { color: var(--bw-price); }

.bw-price__off {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background-color: var(--bw-sale);
	color: #fff;
	padding: 3px 7px;
	border-radius: 3px;
}

/* Action pinned to the bottom of the card. */
.bw-card__action {
	margin-top: auto;
	padding-top: 2px;
}

.bw-card__action .button,
.bw-products li.product .added_to_cart {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 13px 10px;
	margin: 0;
}

.bw-products li.product .added_to_cart {
	margin-left: 0;
	font-size: 12px;
}

/* Category placeholder where a category has no thumbnail yet. The seeded
   catalogue ships drawn art for all of them, so this only shows if one is
   added later without an image. */
.bw-cat-grid__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--bw-cream-deep);
	color: var(--bw-olive);
	font-family: var(--bw-font-heading);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
}

/* Customer quotes on the homepage. Hidden entirely when there are no approved
   reviews — front-page.php checks before rendering the section. */
.bw-reviews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.bw-review {
	margin: 0;
	padding: 28px 26px;
	background-color: #fff;
	border: 1px solid var(--bw-border-soft);
	border-radius: var(--bw-radius-sm);
	text-align: center;
}

.bw-review .star-rating {
	color: var(--bw-amber);
	letter-spacing: 3px;
	font-size: 15px;
	margin: 0 0 14px;
}

.bw-review p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--bw-body);
	margin: 0 0 16px;
}

.bw-reviews__summary {
	font-family: var(--bw-font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--bw-heading);
	margin: 10px 0 0;
}

.bw-histogram {
	max-width: 420px;
	margin: 18px auto 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bw-histogram__row {
	display: grid;
	grid-template-columns: 36px 1fr 30px;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--bw-body);
}

.bw-histogram__bar {
	height: 8px;
	border-radius: 4px;
	background-color: var(--bw-border-soft);
	overflow: hidden;
}

.bw-histogram__bar span {
	display: block;
	height: 100%;
	background-color: var(--bw-amber);
	border-radius: 4px;
}

.bw-review footer {
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 500;
	color: var(--bw-heading);
}

/* Demo-fixture marker. Fixture cards carry DEMO-prefixed content already; the
   pill makes the status unmistakable in screenshots as well as in markup.
   Scoped to .bw-review p because bare .bw-demo-pill loses to it on
   specificity and the text would render grey-on-grey. */
.bw-review p.bw-demo-pill {
	display: inline-block;
	font-family: var(--bw-font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--bw-body);
	border-radius: 3px;
	padding: 5px 10px;
	margin: 0 0 12px;
}

@media (max-width: 900px) { .bw-reviews { grid-template-columns: 1fr; } }

/* Storefront's own flag is replaced by the one on the photograph. */
.woocommerce ul.products li.product .onsale { display: none !important; }

/* WooCommerce's price markup is replaced by .bw-price above. */
.bw-products li.product .price,
.woocommerce ul.products li.product .price { display: none; }

@media (max-width: 1024px) { .bw-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .bw-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .bw-products { grid-template-columns: 1fr; } }

/* The shop and category archives print WooCommerce's own <ul class="products
   class="columns-N"> rather than the homepage's .bw-products grid. Both get the
   same grid so a card is the same size on the home page and in the shop.

   Storefront floats the items and sizes them with `width: calc(25% - 2.442em)`
   plus a negative left margin that pushes the first card off the edge — every
   rule below is `!important` because the parent theme's are, and specificity
   alone will not beat them. */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 34px 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	width: auto !important;
	float: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left !important;
}

/*
 * Storefront marks the first and last items in a float-based loop and forces
 * `clear: both !important` on them. In a grid that leaves row one a column
 * short: the first product is pushed clear and the row never fills.
 */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce ul.products li.product:nth-child(odd),
.woocommerce ul.products li.product:nth-child(even),
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last {
	clear: none !important;
	margin-right: 0 !important;
}

/*
 * WooCommerce clears the float-based product loop with
 * `ul.products::before, ul.products::after { content: ""; display: table; }`.
 * On a float layout those are invisible spacers. Make the same element a grid
 * and they become real grid items — each one occupies a full cell, so the
 * first row starts at column two and the last row ends with an empty cell, and
 * the loop appears to be one product short at the start and one long at the
 * end. A grid needs no clearing hack, so they are removed here.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 780px) {
	.woocommerce ul.products,
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 420px) {
	.woocommerce ul.products,
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   9. Shop / archive chrome
   ========================================================================== */

.woocommerce-breadcrumb {
	font-family: var(--bw-font-heading);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bw-muted);
	margin-bottom: 24px;
}

.woocommerce-breadcrumb a { color: var(--bw-muted); }
.woocommerce-breadcrumb a:hover { color: var(--bw-olive); }

/*
 * Archive header.
 *
 * Storefront centres the page title but leaves the sort control and result
 * count hard against the left margin, with a large empty column to their
 * right — which is why the shop page looked unbalanced. The title stays
 * centred and the toolbar becomes a centred row directly beneath it.
 */
.woocommerce .woocommerce-products-header {
	text-align: center;
	margin-bottom: 26px;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce .woocommerce-shopping-search,
.woocommerce .archive-title {
	font-family: var(--bw-font-heading);
	font-size: 28px;
	font-weight: 500;
	color: var(--bw-heading);
	margin: 0 0 4px;
	text-align: center;
}

/* Result count and sort, as one centred row.

   Storefront does not emit .woocommerce-shopping-toolbar on an archive — it
   wraps the result count and the sort select in its own .storefront-sorting
   div, which is why styling the WooCommerce class did nothing and the pair
   stayed hard against the left margin with an empty column beside them. */
.woocommerce .storefront-sorting {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 22px;
	margin: 0 0 34px;
	padding: 0;
	text-align: center;
}

.woocommerce .woocommerce-result-count,
/*
 * Pagination is the last thing on an archive now that the duplicate sorting
 * bar is gone. Storefront's is a flush inline list of small anchors, so it
 * needs room above it, centring, and a thumb-sized target.
 */
.woocommerce .woocommerce-pagination {
	margin: 44px 0 0;
	text-align: center;
}

.woocommerce .woocommerce-pagination ul {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.woocommerce .woocommerce-pagination li {
	border: 0;
	margin: 0;
}

.woocommerce .woocommerce-pagination li a,
.woocommerce .woocommerce-pagination li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background-color: #fff;
	color: var(--bw-heading);
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce .woocommerce-pagination li a:hover {
	background-color: var(--bw-olive);
	border-color: var(--bw-olive);
	color: #fff;
}

.woocommerce .woocommerce-pagination li span.current {
	background-color: var(--bw-olive-deep);
	border-color: var(--bw-olive-deep);
	color: #fff;
}

.woocommerce .woocommerce-pagination li .dots {
	border-color: transparent;
	background: none;
}

.woocommerce .woocommerce-pagination a:focus-visible,
.woocommerce .woocommerce-pagination span:focus-visible {
	outline: 2px solid var(--bw-olive);
	outline-offset: 2px;
}

.woocommerce .woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--bw-font-heading);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bw-muted);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-family: var(--bw-font-heading);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bw-muted);
}

.archive-title,
.woocommerce-products-header__title,
.page-title {
	font-family: var(--bw-font-heading);
	font-size: 28px;
	font-weight: 500;
	color: var(--bw-heading);
	margin: 0 0 8px;
}

/* Sort dropdown */
.woocommerce .woocommerce-ordering select {
	padding: 9px 12px;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background-color: #fff;
	font-family: var(--bw-font-heading);
	font-size: 12px;
	color: var(--bw-heading);
}

/* ==========================================================================
   10. Single product
   ========================================================================== */

.woocommerce div.product {
	max-width: var(--bw-container);
	margin: 0 auto;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: 48%;
	float: left;
}

.woocommerce div.product div.summary { margin-left: 4%; }

.woocommerce div.product div.images img {
	border-radius: var(--bw-radius-sm);
	background-color: var(--bw-cream-deep);
}

.single-product div.product .product_title {
	font-family: var(--bw-font-heading);
	font-size: 30px;
	font-weight: 500;
	color: var(--bw-heading);
	margin: 0 0 10px;
}

.single-product .woocommerce-product-details__short-description {
	font-size: 15px;
	line-height: 1.8;
	color: var(--bw-body);
	margin-bottom: 18px;
}

.single-product .summary .price,
.single-product div.product p.price {
	font-family: var(--bw-font-body);
	font-size: 22px;
	font-weight: 600;
	color: var(--bw-price);
	margin: 0 0 18px;
}

.single-product .summary .price del,
.single-product div.product p.price del {
	font-size: 15px;
	font-weight: 400;
	color: var(--bw-muted);
	margin-right: 10px;
}

.single-product .summary .price ins,
.single-product div.product p.price ins {
	text-decoration: none;
	color: var(--bw-price);
}

.woocommerce div.product div.product_meta {
	margin-top: 18px;
	font-family: var(--bw-font-heading);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bw-muted);
}

/* Quantity field: a plain bordered box with no Storefront spinners, which are
   sized for a stock-control table and sit badly on a product page. */
.single-product div.product form.cart .quantity,
.woocommerce .quantity {
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	overflow: hidden;
	min-height: 54px;
}

.woocommerce .quantity .qty {
	width: 100%;
	border: 0;
	font-family: var(--bw-font-heading);
	font-size: 15px;
	color: var(--bw-heading);
	text-align: center;
}

/* Storefront's "SALE!" flag is positioned for its own square gallery frame and
   lands above the picture here. The struck price beside the live price already
   says the same thing, so the flag is dropped rather than repositioned. */
.single-product div.product span.onsale,
.single-product div.product .onsale {
	display: none !important;
}

/*
 * Gallery and summary.
 *
 * Storefront splits these 39/56 under the full-width class and floats them,
 * which leaves the picture enormous next to a short summary and pushes the
 * description tab to sit under a tall gallery. The gallery is capped and the
 * two columns are rebalanced; below the breakpoint both go full width, which
 * is the only thing that reads on a phone.
 */
.single-product div.product div.images {
	width: 44%;
	float: left;
	margin-right: 5%;
	margin-bottom: 2rem;
}

.single-product div.product div.summary {
	width: 48%;
	float: right;
	margin-left: 0;
}

.single-product div.product .woocommerce-product-gallery {
	width: 100%;
}

/* Storefront renders a circular gallery frame; the placeholder artwork already
   carries its own circular disc, so the frame is doubled up. */
.single-product div.product div.images img,
.single-product div.product div.images .woocommerce-product-gallery__image {
	border-radius: var(--bw-radius-sm);
}

.single-product div.product div.images .woocommerce-product-gallery__image {
	overflow: hidden;
}

/*
 * Quantity and add-to-cart share a row.
 *
 * Storefront floats the quantity and lets the button take the rest, which
 * breaks once the button is set to width:100% — the quantity ends up sitting on
 * top of it. Flex puts them side by side and keeps the button full width on a
 * phone, where two controls on one line would be unusable.
 */
.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 18px;
}

.single-product div.product form.cart .quantity {
	flex: 0 0 96px;
	width: 96px;
	float: none;
	margin: 0;
}

.single-product div.product form.cart .button {
	flex: 1 1 auto;
	min-width: 180px;
	float: none;
	margin: 0;
	padding: 16px 24px;
	font-size: 15px;
}

@media (max-width: 900px) {
	.single-product div.product div.images,
	.single-product div.product div.summary {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.single-product div.product form.cart .quantity {
		flex: 1 1 100%;
		width: 100%;
	}
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .product_meta {
	clear: both;
}

/*
 * Variant pills.
 *
 * Built by JavaScript on top of the native attribute <select>, which stays
 * in the form as the no-JavaScript path. The select is hidden only once the
 * pills exist: the hiding class is added by the same script that builds them,
 * so a stylesheet alone can never strand a visitor with neither control.
 */
.bw-variant-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}

.bw-variant-pill {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-sm);
	background-color: #fff;
	cursor: pointer;
	font-family: var(--bw-font-heading);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bw-variant-pill:hover {
	border-color: var(--bw-olive);
}

.bw-variant-pill.is-selected {
	border-color: var(--bw-olive);
	background-color: var(--bw-cream-deep);
	box-shadow: inset 0 0 0 1px var(--bw-olive);
}

.bw-variant-pill:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.bw-variant-pill__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--bw-heading);
}

.bw-variant-pill__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--bw-price);
}

.bw-variant-pill__off {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background-color: var(--bw-sale);
	border-radius: 3px;
	padding: 2px 6px;
}

.bw-variant-pill:focus-visible {
	outline: 2px solid var(--bw-olive);
	outline-offset: 2px;
}

form.variations_form select.bw-select--enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/*
 * Assurance lines under the summary.
 */
.bw-assurance {
	margin: 0 0 18px;
	padding: 14px 16px;
	background-color: var(--bw-cream-deep);
	border-radius: var(--bw-radius-sm);
}

.bw-assurance p {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--bw-body);
}

.bw-assurance p + p {
	margin-top: 6px;
}

/*
 * Sticky add-to-cart.
 *
 * Fixed to the viewport bottom, above everything except the mobile menu. It
 * starts hidden in markup and JavaScript removes the attribute past the main
 * button; without JavaScript it never appears.
 */
.bw-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	background-color: #fff;
	border-top: 1px solid var(--bw-border);
	box-shadow: 0 -8px 24px rgba(32, 32, 32, 0.1);
}

.bw-sticky-atc[hidden] {
	display: none;
}

.bw-sticky-atc__media img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--bw-radius-sm);
}

.bw-sticky-atc__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.bw-sticky-atc__name {
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bw-sticky-atc__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--bw-price);
}

.bw-sticky-atc__price del {
	font-weight: 400;
	color: var(--bw-muted);
	margin-left: 8px;
}

.bw-sticky-atc__go {
	flex: none;
	font-size: 13px;
	padding: 13px 26px;
}

@media (max-width: 560px) {
	.bw-sticky-atc__media {
		display: none;
	}
}

/*
 * Cart drawer.
 *
 * Slide-over from the right with a dimmed overlay. The panel is a flex column
 * so the totals pin to the bottom while the item list scrolls. It starts
 * hidden in markup; without JavaScript it never opens and the cart link goes
 * to the cart page. While open the page behind is locked.
 */
.bw-drawer[hidden] {
	display: none !important;
}

body.bw-drawer-open {
	overflow: hidden;
}

.bw-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: 950;
	background-color: rgba(32, 32, 32, 0.45);
}

.bw-drawer__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 951;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background-color: var(--bw-cream);
	box-shadow: -12px 0 32px rgba(32, 32, 32, 0.18);
}

.bw-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--bw-border);
	background-color: #fff;
}

.bw-drawer__head h2 {
	font-family: var(--bw-font-heading);
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: var(--bw-heading);
}

.bw-drawer__close {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--bw-heading);
	cursor: pointer;
}

.bw-drawer__close:hover {
	color: var(--bw-olive);
}

.bw-cart-drawer__inner {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 20px;
}

/* Free-shipping progress. */
.bw-ship-progress {
	margin: 0 0 18px;
}

.bw-ship-progress__label {
	font-size: 13px;
	color: var(--bw-body);
	margin: 0 0 8px;
}

.bw-ship-progress__bar {
	height: 8px;
	border-radius: 4px;
	background-color: var(--bw-border-soft);
	overflow: hidden;
}

.bw-ship-progress__bar span {
	display: block;
	height: 100%;
	background-color: var(--bw-olive);
	border-radius: 4px;
	transition: width 0.35s ease;
}

/* Line items. */
.bw-drawer__items {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bw-drawer__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: start;
}

.bw-drawer__thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--bw-radius-sm);
	background-color: var(--bw-cream-deep);
}

.bw-drawer__name {
	display: block;
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
	line-height: 1.4;
	margin-bottom: 2px;
}

.bw-drawer__variant {
	display: block;
	font-size: 12px;
	color: var(--bw-muted);
	margin-bottom: 8px;
}

.bw-drawer__variant p,
.bw-drawer__variant dl {
	margin: 0;
}

.bw-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background-color: #fff;
	overflow: hidden;
}

.bw-qty button {
	width: 36px;
	height: 36px;
	border: 0;
	background: none;
	font-size: 16px;
	color: var(--bw-heading);
	cursor: pointer;
}

.bw-qty button:hover {
	background-color: var(--bw-cream-deep);
}

.bw-qty span {
	min-width: 28px;
	text-align: center;
	font-family: var(--bw-font-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--bw-heading);
}

.bw-drawer__line {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bw-price);
}

.bw-drawer__remove {
	font-size: 22px;
	line-height: 1;
	color: var(--bw-muted);
}

.bw-drawer__remove:hover {
	color: var(--bw-heading);
}

/* Totals pin to the bottom. */
.bw-drawer__totals {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bw-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bw-drawer__totals p {
	display: flex;
	justify-content: space-between;
	font-family: var(--bw-font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--bw-heading);
	margin: 0 0 6px;
}

.bw-drawer__totals .bw-btn-ghost,
.bw-drawer__totals .bw-btn-deep {
	text-align: center;
	width: 100%;
}

/* Empty state + upsells. */
.bw-drawer__empty {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: center;
}

.bw-drawer__empty p {
	color: var(--bw-body);
	margin: 6px 0;
}

.bw-drawer__empty .bw-btn-deep {
	width: 100%;
}

.bw-drawer__upsell-title {
	font-family: var(--bw-font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--bw-heading);
	margin: 12px 0 0;
}

.bw-drawer__upsells {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

.bw-drawer__upsells li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: center;
}

/* WhatsApp float. Rendered only when the store has a real number; until
   then there is nothing to style around. */
.bw-wa-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 940;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #25d366;
	box-shadow: 0 8px 24px rgba(32, 32, 32, 0.24);
	transition: transform 0.2s ease;
}

.bw-wa-float:hover {
	transform: scale(1.06);
}

.bw-wa-float svg {
	width: 30px;
	height: 30px;
	fill: #fff;
}

.bw-wa-float:focus-visible {
	outline: 2px solid var(--bw-olive);
	outline-offset: 2px;
}

.bw-drawer__upsells .bw-drawer__thumb img {
	width: 56px;
	height: 56px;
}

.bw-drawer__meta a {
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
	line-height: 1.4;
}

.bw-drawer__price {
	display: block;
	font-size: 13px;
	color: var(--bw-price);
	margin-top: 2px;
}

/*
 * Quick-view modal.
 *
 * Centred dialog with dimmed overlay. It starts hidden in markup; without
 * JavaScript the triggering links navigate to the product page and it never
 * opens.
 */
.bw-quickview[hidden] {
	display: none !important;
}

body.bw-qv-open {
	overflow: hidden;
}

.bw-quickview__overlay {
	position: fixed;
	inset: 0;
	z-index: 960;
	background-color: rgba(32, 32, 32, 0.45);
}

.bw-quickview__panel {
	position: fixed;
	z-index: 961;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, calc(100% - 40px));
	max-height: calc(100% - 60px);
	overflow-y: auto;
	background-color: var(--bw-cream);
	border-radius: var(--bw-radius-sm);
	box-shadow: 0 24px 64px rgba(32, 32, 32, 0.28);
	padding: 26px;
}

.bw-quickview__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--bw-heading);
	cursor: pointer;
}

.bw-quickview__close:hover {
	color: var(--bw-olive);
}

.bw-quickview__body {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 26px;
	align-items: start;
}

.bw-qv__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--bw-radius-sm);
	background-color: var(--bw-cream-deep);
}

.bw-qv__info h3 {
	font-family: var(--bw-font-heading);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 10px;
	color: var(--bw-heading);
}

.bw-qv__info h3 a {
	color: inherit;
}

.bw-qv__info .bw-price {
	margin-bottom: 16px;
}

.bw-qv__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 18px 0 14px;
}

.bw-qv__row .bw-qty {
	min-height: 50px;
}

.bw-qv__add {
	flex: 1 1 auto;
	min-width: 160px;
}

.bw-qv__full {
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bw-qv__error {
	color: #a33;
	font-size: 13px;
}

.bw-qv__loading {
	text-align: center;
	color: var(--bw-body);
	padding: 30px 0;
}

@media (max-width: 620px) {
	.bw-quickview__body {
		grid-template-columns: 1fr;
	}

	.bw-qv__media {
		max-width: 280px;
	}
}

/*
 * WooCommerce block breakout.
 *
 * Storefront gives editor blocks with .alignwide a full-bleed treatment:
 * `.storefront-align-wide .hentry .entry-content .alignwide` pulls
 * margin-left/right calc(25% - 25vw) — about -70px each side here. That rule
 * exists for Storefront's own full-width template, but it also matches the
 * Cart and Checkout blocks inside an ordinary page, where it shoves the form
 * past the viewport edge and clips it. This theme already constrains pages to
 * a centred 1200px measure, so the breakout is removed for these two blocks
 * and they lay out inside the container like everything else.
 */
/*
 * Specificity note: the winning Storefront selector above is five classes
 * (0,5,0), so an ordinary four-class override loses despite coming later.
 * These carry body-level classes to outrank it; do not "simplify" them.
 */
body.woocommerce-checkout.storefront-full-width-content .hentry .entry-content .wp-block-woocommerce-checkout.alignwide,
body.woocommerce-cart.storefront-full-width-content .hentry .entry-content .wp-block-woocommerce-cart.alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* ==========================================================================
   11. Cart / checkout / account/* ==========================================================================
   11. Cart / checkout / account
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--bw-border-soft);
	padding: 16px 14px;
	font-family: var(--bw-font-heading);
	font-size: 14px;
	color: var(--bw-heading);
}

.woocommerce table.shop_table th {
	background-color: var(--bw-cream-deep);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	white-space: nowrap;
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
	background-color: #fff;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-sm);
	padding: 22px;
}

.woocommerce form .form-row label {
	font-family: var(--bw-font-heading);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bw-heading);
	margin-bottom: 6px;
	display: block;
}

.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce .select2-container .select2-selection--single {
	padding: 12px 14px;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background-color: #fff;
	font-family: var(--bw-font-body);
	font-size: 14px;
	color: var(--bw-heading);
}

.woocommerce input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	border-color: var(--bw-olive);
	outline: none;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-top-color: var(--bw-olive);
	background-color: var(--bw-cream-deep);
	color: var(--bw-heading);
	border-radius: var(--bw-radius-sm);
	padding: 14px 18px;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { color: var(--bw-olive); }

/* Notices are muted so the cream page does not look like an error page. */
.woocommerce-message {
	background-color: var(--bw-cream-deep);
	border-left: 4px solid var(--bw-olive);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--bw-olive-deep);
	color: rgba(255, 255, 255, 0.78);
	margin-top: 0;
}

.bw-footer {
	padding: 58px 20px 0;
}

.bw-footer__inner {
	max-width: var(--bw-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: 40px;
}

.bw-footer__col h3 {
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 20px;
}

.bw-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bw-footer__col li { margin-bottom: 11px; }

/* Storefront's footer rules target .site-footer a and its widget lists, which
   is a higher specificity than the class on the column — the links rendered in
   the body's ink colour on the olive ground, which is unreadable. Every
   footer-link shape is set here at a specificity that wins. */
/*
 * Footer link colour.
 *
 * Storefront ships `.site-footer a:not(.button):not(.components-button)` in
 * #333. Each :not() argument counts toward specificity, so that selector is
 * (0,3,1) and outranks a plain `.site-footer .bw-footer__col ul li a` at
 * (0,2,3) — near-black links on the olive ground, at a measured 1.37:1.
 * The only way to beat it at equal weight is to match its shape exactly and
 * rely on source order, so the :not() chain is repeated here deliberately.
 */
.site-footer .bw-footer__col a,
.site-footer .bw-footer__col ul li a,
.site-footer .bw-footer__col .bw-footer__menu a,
.site-footer .bw-footer__contact a,
.site-footer a:not(.button):not(.components-button) {
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
}

.site-footer .bw-footer__col a:hover,
.site-footer .bw-footer__col ul li a:hover,
.site-footer .bw-footer__contact a:hover,
.site-footer a:not(.button):not(.components-button):hover,
.site-footer a:not(.button):not(.components-button):focus {
	color: #fff;
}

/* Keyboard focus must be visible on the olive ground. */
.site-footer a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.bw-footer__about p {
	font-size: 14px;
	line-height: 1.85;
	margin: 0 0 18px;
}

.bw-footer__contact {
	font-size: 14px;
	line-height: 1.9;
}

.bw-footer__contact strong {
	display: block;
	color: #fff;
	font-weight: 500;
}

.bw-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.bw-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.bw-footer__social a:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.bw-footer__social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* Payment marks — plain text pills, no third-party logo files. */
.bw-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.bw-footer__payments span {
	font-family: var(--bw-font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 3px;
	color: rgba(255, 255, 255, 0.85);
}

.bw-footer__bottom {
	margin-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: 22px 20px;
}

.bw-footer__bottom-inner {
	max-width: var(--bw-container);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
}

.bw-footer__bottom a { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 900px) {
	.bw-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 560px) {
	.bw-footer__inner { grid-template-columns: 1fr; }
	.bw-footer__bottom-inner { justify-content: center; text-align: center; }
}

/* Journal cards, article pages, and miscellaneous page furniture. */
/* Press and videos. Both sections render only from seed-fed options and
   stay hidden while those are empty, so there is no empty-state styling to
   maintain — only the populated layout. */
.bw-press-lead {
	max-width: 720px;
	margin: 0 auto 30px;
	text-align: center;
}

.bw-press-lead h3 {
	font-family: var(--bw-font-heading);
	font-size: 21px;
	font-weight: 600;
	color: var(--bw-heading);
	margin: 0 0 10px;
}

.bw-press-lead p {
	color: var(--bw-body);
	margin: 0 0 20px;
}

.bw-press-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.bw-press-list a {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--bw-border);
	border-radius: 999px;
	background-color: var(--bw-cream);
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
}

.bw-press-list a:hover {
	border-color: var(--bw-olive);
	color: var(--bw-olive);
}

.bw-videos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.bw-video-card {
	background-color: #fff;
	border: 1px solid var(--bw-border-soft);
	border-radius: var(--bw-radius-sm);
	overflow: hidden;
}

.bw-video-card__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 9 / 14;
	max-height: 320px;
	background-color: var(--bw-olive-deep);
	color: #fff;
	font-size: 34px;
}

.bw-video-card h3 {
	font-family: var(--bw-font-heading);
	font-size: 15px;
	font-weight: 600;
	margin: 14px 18px 4px;
}

.bw-video-card h3 a {
	color: var(--bw-heading);
}

.bw-video-card__views {
	font-size: 12px;
	color: var(--bw-muted);
	margin: 0 18px 6px;
}

.bw-video-card__product {
	margin: 0 18px 18px;
	font-size: 13px;
}

.bw-video-card__product a {
	font-weight: 600;
	color: var(--bw-heading);
}

.bw-video-card__product span {
	display: block;
	color: var(--bw-price);
}

@media (max-width: 900px) { .bw-videos { grid-template-columns: 1fr; } }

.bw-journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.bw-journal-card {
	background-color: #fff;
	border: 1px solid var(--bw-border-soft);
	border-radius: var(--bw-radius-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bw-journal-card__media {
	display: block;
	background-color: var(--bw-cream-deep);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.bw-journal-card__media img,
.bw-journal-card__media:empty::after {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cards without artwork still occupy the same media block, so rows align. */
.bw-journal-card__media:empty {
	display: block;
	min-height: 120px;
}

.bw-journal-card__meta {
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bw-muted);
	margin: 16px 20px 6px;
}

.bw-journal-card__title {
	font-family: var(--bw-font-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	margin: 0 20px 8px;
	color: var(--bw-heading);
}

.bw-journal-card__title a {
	color: inherit;
}

.bw-journal-card__title a:hover {
	color: var(--bw-olive);
}

.bw-journal-card__excerpt {
	font-size: 14px;
	line-height: 1.75;
	color: var(--bw-body);
	margin: 0 20px 16px;
}

.bw-journal-card__more {
	display: inline-block;
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	margin: 0 20px 20px;
	color: var(--bw-olive);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) { .bw-journal-grid { grid-template-columns: 1fr; } }

/* Single article. */
.bw-article__narrow {
	max-width: 760px;
	margin: 0 auto;
}

.bw-article__meta {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bw-muted);
	margin: 0 0 12px;
}

.bw-article__hero {
	margin: 26px 0 30px;
}

.bw-article__hero img {
	width: 100%;
	height: auto;
	border-radius: var(--bw-radius-sm);
}

.bw-article__body {
	font-size: 15px;
	line-height: 1.85;
	color: var(--bw-body);
}

.bw-article__body h2 {
	font-size: 22px;
	margin: 34px 0 12px;
}

.bw-article__body p {
	margin: 0 0 18px;
}

.bw-toc {
	background-color: var(--bw-cream-deep);
	border-radius: var(--bw-radius-sm);
	padding: 18px 22px;
	margin: 0 0 28px;
}

.bw-toc__title {
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: var(--bw-heading);
}

.bw-toc ol {
	margin: 0;
	padding-left: 20px;
}

.bw-toc li {
	margin-bottom: 6px;
}

.bw-toc a {
	font-size: 14px;
}

.bw-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0 0;
}

.bw-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--bw-border);
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
}

.bw-share a {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bw-pagination {
	text-align: center;
	margin-top: 40px;
}

.bw-pagination .page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bw-pagination .page-numbers a,
.bw-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background-color: #fff;
	font-family: var(--bw-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--bw-heading);
}

.bw-pagination .page-numbers .current {
	background-color: var(--bw-olive-deep);
	border-color: var(--bw-olive-deep);
	color: #fff;
}

/* Search result group headings. */
.bw-search__group {
	font-family: var(--bw-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--bw-heading);
	margin: 34px 0 20px;
	text-align: center;
}

.bw-search__group:first-of-type {
	margin-top: 0;
}

.bw-empty {
	text-align: center;
	color: var(--bw-body);
}

/* ==========================================================================
   13. Forms & utilities/* ==========================================================================
   13. Forms & utilities
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background-color: #fff;
	color: var(--bw-heading);
	font-family: var(--bw-font-body);
	font-size: 14px;
	padding: 12px 14px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--bw-olive);
	outline: none;
	box-shadow: 0 0 0 3px rgba(96, 108, 56, 0.12);
}

label { font-family: var(--bw-font-heading); color: var(--bw-heading); }

hr {
	border: 0;
	border-top: 1px solid var(--bw-border);
	margin: 40px 0;
}

/* Screen-reader-only, but focusable (used by the skip link). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background-color: var(--bw-olive);
	color: #fff;
	z-index: 100000;
	display: block;
}