/* ==========================================================================
   Bikeability Shop - main stylesheet

   Implements the "Bikeability Shop" design overhaul mockup: Bitter headings
   over Nunito Sans, a bright orange primary action, pastel wayfinding tiles,
   20px card radius and pill buttons.

   Two deliberate deviations from the mockup, both for accessibility:

   1. Text links use --bks-link (#A85A00, 5.09:1 on white). The mockup's
      #C46A00 is 3.88:1, which fails WCAG AA for body-size text. The brighter
      tone is kept as --bks-link-bright for large display use.
   2. The mockup lays the nav out horizontally at all widths. A toggle takes
      over at 1200px and below so it survives narrow viewports.

   NOTE ON THE NAV BREAKPOINT
   Custom properties cannot be used inside @media queries, so 1200px appears
   literally below and again in assets/js/navigation.js as
   BKS_NAV_BREAKPOINT. Change both together or the two menus disagree.

   CONTENTS
   1. Design tokens
   2. Base
   3. Layout primitives
   4. Buttons and pills
   5. Announcement bar
   6. Header, utility tiles and navigation
   7. Page hero
   8. Category wayfinding tiles
   9. Product cards and the shop grid
  10. Single product
  11. Accordions
  12. Notices
  13. Feature band
  14. Footer
  15. Cart, checkout and account
  16. Contact Form 7
  17. 404
  ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
	/* Ink */
	--bks-ink: #2b2a28;
	--bks-ink-soft: #3f3d3a;
	--bks-ink-muted: #5a5651;
	--bks-ink-faint: #6e6a65;
	--bks-dark: #3c3c3b;
	--bks-white: #ffffff;

	/* Accent */
	--bks-accent: #ff9e1b;
	--bks-link: #a85a00;
	--bks-link-bright: #c46a00;

	/* Pastel wayfinding pairs (base / hover) */
	--bks-green: #dff2d0;
	--bks-green-hover: #cfebb9;
	--bks-peach: #fce7cb;
	--bks-peach-hover: #f8d9ac;
	--bks-blue: #d6f1f9;
	--bks-blue-hover: #bfe8f4;
	--bks-pink: #fbdada;
	--bks-pink-hover: #f6c6c6;

	/* Surfaces */
	--bks-band: #e4f3d2;
	--bks-card: #f5f5f5;
	--bks-media: #f2efea;
	--bks-tint: #f4f1ec;
	--bks-rule: #e6e2dc;

	/* Footer */
	--bks-footer-bg: #2b2a28;
	--bks-footer-link: #d8d3cc;
	--bks-footer-muted: #8f8a84;
	--bks-footer-rule: #454340;

	/* Notice */
	--bks-notice-bg: #eaf6fb;
	--bks-notice-bar: #5fc748;

	/* Type */
	--bks-font-body: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--bks-font-heading: "Bitter", Georgia, "Times New Roman", serif;
	--bks-text-base: 17px;
	--bks-line-height: 1.6;
	--bks-kicker: 12px;

	/* Layout */
	--bks-container: 1240px;
	--bks-container-wide: 1300px;
	--bks-gutter: 24px;
	--bks-gap: 28px;

	/* Shape */
	--bks-radius-card: 20px;
	--bks-radius-media: 18px;
	--bks-radius-thumb: 12px;
	--bks-radius-tile: 16px;
	--bks-radius-pill: 999px;

	/* Arrow glyph, used as a mask on the primary action. */
	--bks-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

	/* Eye glyph, used as a mask on the show-password control. */
	--bks-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");

	/* Chevron for select controls, drawn to match the input border colour. */
	--bks-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2a28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

	/* Motion */
	--bks-duration: 0.16s;
	--bks-ease: ease;
}

@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;
	}
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bks-white);
	color: var(--bks-ink);
	font-family: var(--bks-font-body);
	font-size: var(--bks-text-base);
	line-height: var(--bks-line-height);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--bks-font-heading);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: pretty;
}

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

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

a {
	color: var(--bks-link);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
	transition: color var(--bks-duration) var(--bks-ease);
}

a:hover {
	color: var(--bks-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--bks-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--bks-accent);
	color: var(--bks-dark);
}

/* Small uppercase label above a title. */
.bks-kicker {
	margin: 0;
	color: var(--bks-ink-faint);
	font-size: var(--bks-kicker);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.bks-container {
	width: 100%;
	max-width: var(--bks-container);
	margin-inline: auto;
	padding-inline: var(--bks-gutter);
}

.bks-container--wide {
	max-width: var(--bks-container-wide);
}

.section {
	padding-block: clamp(40px, 4vw, 66px) clamp(48px, 5vw, 76px);
}

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

.skip-link:focus {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 999;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip-path: none;
	background: var(--bks-accent);
	color: var(--bks-dark);
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Buttons and pills

   WooCommerce's primary buttons carry `.alt`, a two-class selector in its own
   stylesheet, so the `.alt` variants are listed explicitly rather than
   reaching for !important.
   -------------------------------------------------------------------------- */

.btn,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--bks-radius-pill);
	background: var(--bks-accent);
	color: var(--bks-dark);
	font-family: var(--bks-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	/*
	 * Button labels are always Title Case. Done here rather than by editing
	 * each string so it also covers WooCommerce's own labels and anything a
	 * plugin adds later - "Add to basket" renders as "Add To Basket".
	 */
	text-transform: capitalize;
	cursor: pointer;
	transition: background-color var(--bks-duration) var(--bks-ease),
	            color var(--bks-duration) var(--bks-ease);
}

.btn:hover,
.woocommerce .button:hover,
.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 #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--bks-dark);
	color: var(--bks-accent);
}

.btn--large {
	padding: 16px 30px;
	font-size: 18px;
}

.btn--block {
	width: 100%;
}

.btn--outline {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--bks-ink);
	color: var(--bks-ink);
}

.btn--outline:hover {
	background: var(--bks-ink);
	color: var(--bks-white);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce input.button:disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt:disabled {
	background: var(--bks-rule);
	color: var(--bks-ink-muted);
	cursor: not-allowed;
	opacity: 1;
}

.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button.alt:disabled:hover {
	background: var(--bks-rule);
	color: var(--bks-ink-muted);
}

/* --------------------------------------------------------------------------
   5. Header, utility tiles and navigation

   Sticky, and condenses on scroll (see assets/js/navigation.js, which adds
   .is-stuck) so a tall header does not eat the viewport. One set of markup
   serves both breakpoints.
   -------------------------------------------------------------------------- */

/*
 * Taken out of the document flow on purpose.
 *
 * As position: sticky the header stayed in flow, so condensing it changed the
 * document height. The browser's scroll anchoring then shifted the scroll
 * position to compensate, which moved the page under the reader and could
 * push the scroll offset back across the condense threshold -- the header
 * flicker. Fixed positioning plus a spacer that reserves the expanded height
 * means the condense cannot affect layout or scroll position at all.
 */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--bks-white);
	transition: box-shadow var(--bks-duration) var(--bks-ease);
}

/* WordPress pins its admin bar over the viewport, so sit below it. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/*
 * Reserves the space the fixed header would have occupied. navigation.js sets
 * --bks-header-h from the measured expanded header; the fallback covers the
 * moment before scripts run.
 */
.site-header-spacer {
	height: var(--bks-header-h, 149px);
}

@media (max-width: 1200px) {
	.site-header-spacer {
		height: var(--bks-header-h, 78px);
	}
}

/* Open on a short screen the burger panel must be able to scroll itself. */
@media (max-width: 1200px) {
	.site-header.is-menu-open {
		max-height: 100vh;
		overflow-y: auto;
	}
}

.site-header.is-stuck {
	box-shadow: 0 2px 16px rgba(43, 42, 40, 0.12);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"brand utility utility"
		"brand nav     actions";
	gap: 0 20px;
	align-items: center;
}

.site-header__brand {
	grid-area: brand;
	display: flex;
	align-items: center;
	padding: 12px 0 14px;
}

.site-header__brand img,
.site-header__brand .custom-logo {
	display: block;
	height: 74px;
	width: auto;
}

/*
 * Condensed state: a shorter logo and no utility tiles.
 *
 * The height change is deliberately NOT transitioned. The header is
 * position: sticky, so animating its height reflows the document on every
 * frame of the transition while the header is pinned, and it briefly loses
 * its pinned position -- which reads as a flicker as the header condenses.
 * Snapping in one frame avoids that. Only box-shadow, which is composited
 * and costs no layout, is transitioned.
 */
.site-header.is-stuck .site-header__brand img,
.site-header.is-stuck .site-header__brand .custom-logo {
	height: 48px;
}

.site-header.is-stuck .utility {
	display: none;
}

/*
 * Signed out: a single centred logo. The other header markup is not rendered
 * at all (see header.php), so this only has to recentre the brand and drop
 * the sticky condensing, which has nothing left to condense.
 */
.site-header--minimal .site-header__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "brand";
	justify-items: center;
	padding-block: 8px;
}

.site-header--minimal .site-header__brand {
	justify-content: center;
	padding: 18px 0;
}

.site-header--minimal.is-stuck {
	box-shadow: none;
}

.site-header--minimal.is-stuck .site-header__brand img,
.site-header--minimal.is-stuck .site-header__brand .custom-logo {
	height: 74px;
}

@media (max-width: 1200px) {
	.site-header--minimal .site-header__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "brand";
	}

	.site-header--minimal .site-header__brand img,
	.site-header--minimal .site-header__brand .custom-logo,
	.site-header--minimal.is-stuck .site-header__brand img,
	.site-header--minimal.is-stuck .site-header__brand .custom-logo {
		height: 60px;
	}
}

/* Signed out there is no title band, so the sign-in card needs its own room. */
.site-header--minimal + .site-main .page .section:first-child {
	padding-top: clamp(32px, 5vw, 64px);
}

/* Utility tiles - search, account, login. */
.utility {
	grid-area: utility;
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 92px;
	height: 100%;
	padding: 12px 22px;
	color: var(--bks-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--bks-duration) var(--bks-ease);
}

.utility__item:first-child .utility__link {
	border-bottom-left-radius: var(--bks-radius-tile);
}

.utility__item:last-child .utility__link {
	border-bottom-right-radius: var(--bks-radius-tile);
}

.utility__item--search .utility__link { background: var(--bks-green); }
.utility__item--search .utility__link:hover { background: var(--bks-green-hover); }
.utility__item--account .utility__link { background: var(--bks-peach); }
.utility__item--account .utility__link:hover { background: var(--bks-peach-hover); }
.utility__item--login .utility__link { background: var(--bks-pink); }
.utility__item--login .utility__link:hover { background: var(--bks-pink-hover); }

.utility__link svg {
	display: block;
}

/* Nav. */
.site-nav {
	grid-area: nav;
	justify-self: end;
	padding: 18px 0 20px;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
}

.site-nav__menu > li > a {
	display: inline-block;
	padding: 6px 0;
	border-bottom: 3px solid transparent;
	color: var(--bks-ink);
	text-decoration: none;
}

.site-nav__menu > li > a:hover,
.site-nav__menu > li > a:focus,
.site-nav__menu > li.current-menu-item > a {
	border-bottom-color: var(--bks-accent);
	color: var(--bks-ink);
}

/* Basket and burger. */
.site-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 12px;
	justify-self: end;
}

.basket-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	padding: 12px 20px;
	border-radius: var(--bks-radius-pill);
	background: var(--bks-accent);
	color: var(--bks-dark);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--bks-duration) var(--bks-ease),
	            color var(--bks-duration) var(--bks-ease);
}

.basket-pill:hover,
.basket-pill:focus {
	background: var(--bks-dark);
	color: var(--bks-accent);
}

.site-nav__toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--bks-radius-pill);
	box-shadow: inset 0 0 0 2px var(--bks-ink);
	background: transparent;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.site-nav__toggle-bars {
	display: grid;
	gap: 4px;
	width: 18px;
}

.site-nav__toggle-bars span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--bks-ink);
	transition: transform var(--bks-duration) var(--bks-ease),
	            opacity var(--bks-duration) var(--bks-ease);
}

.site-header.is-menu-open .site-nav__toggle-bars span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.site-header.is-menu-open .site-nav__toggle-bars span:nth-child(2) {
	opacity: 0;
}

.site-header.is-menu-open .site-nav__toggle-bars span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Header search panel. */
.header-search {
	border-top: 1px solid var(--bks-rule);
	background: var(--bks-card);
}

.header-search .search-form {
	display: flex;
	gap: 10px;
	padding: 16px 0;
}

.header-search .search-form__input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-pill);
	background: var(--bks-white);
	font: inherit;
}

/* Mobile: 1200px and below.
   Logo left, basket and burger right; utility tiles and nav collapse in. */
@media (max-width: 1200px) {
	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand   actions"
			"utility utility"
			"nav     nav";
		row-gap: 0;
	}

	.site-header__brand img,
	.site-header__brand .custom-logo,
	.site-header.is-stuck .site-header__brand img,
	.site-header.is-stuck .site-header__brand .custom-logo {
		height: 52px;
	}

	.site-nav__toggle {
		display: inline-flex;
	}

	/* Both rows are part of the burger panel. */
	.utility,
	.site-nav {
		display: none;
	}

	.site-header.is-menu-open .utility {
		display: flex;
		justify-content: stretch;
		margin-top: 4px;
	}

	.site-header.is-menu-open .utility .utility__item {
		flex: 1 1 0;
	}

	.site-header.is-menu-open .utility__link {
		min-width: 0;
		padding: 14px 8px;
	}

	.utility__item:first-child .utility__link,
	.utility__item:last-child .utility__link {
		border-radius: 0;
	}

	.site-header.is-menu-open .site-nav {
		display: block;
		justify-self: stretch;
		padding: 8px 0 18px;
	}

	.site-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__menu > li > a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--bks-rule);
		border-top: 0;
	}

	.site-header.is-stuck .utility {
		/* The panel stays usable when the header is condensed. */
		display: none;
	}

	.site-header.is-stuck.is-menu-open .utility {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   7. Page hero
   -------------------------------------------------------------------------- */

.page-hero {
	position: relative;
	overflow: hidden;
	background: var(--bks-ink);
}

.page-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 19, 18, 0.52);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	padding: clamp(64px, 9vw, 116px) var(--bks-gutter);
	text-align: center;
}

.page-hero__title {
	margin: 0;
	color: var(--bks-white);
	font-size: clamp(36px, 5vw, 58px);
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   8. Category wayfinding tiles
   -------------------------------------------------------------------------- */

.wayfind {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--bks-gap);
	margin: 0 0 46px;
	padding: 0;
	list-style: none;
}

.wayfind__link {
	display: block;
	height: 100%;
	padding: 28px 22px 26px;
	border-radius: var(--bks-radius-card);
	color: var(--bks-ink);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bks-duration) var(--bks-ease);
}

.wayfind__item:nth-child(4n + 1) .wayfind__link { background: var(--bks-green); }
.wayfind__item:nth-child(4n + 1) .wayfind__link:hover { background: var(--bks-green-hover); }
.wayfind__item:nth-child(4n + 2) .wayfind__link { background: var(--bks-peach); }
.wayfind__item:nth-child(4n + 2) .wayfind__link:hover { background: var(--bks-peach-hover); }
.wayfind__item:nth-child(4n + 3) .wayfind__link { background: var(--bks-blue); }
.wayfind__item:nth-child(4n + 3) .wayfind__link:hover { background: var(--bks-blue-hover); }
.wayfind__item:nth-child(4n + 4) .wayfind__link { background: var(--bks-pink); }
.wayfind__item:nth-child(4n + 4) .wayfind__link:hover { background: var(--bks-pink-hover); }

.wayfind__intent {
	margin: 0 0 6px;
	color: #4a4742;
	font-size: 15px;
}

.wayfind__name {
	margin: 0;
	font-family: var(--bks-font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.wayfind__count {
	margin: 8px 0 0;
	color: #4a4742;
	font-size: 14px;
	font-weight: 700;
}

.shop-count {
	margin: 0 0 38px;
	color: var(--bks-ink-muted);
	font-size: 17px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   9. Product cards and the shop grid
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.product-grid {
	display: grid;
	/* Fluid up to the desktop step, where the design fixes four columns. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--bks-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1000px) {
	.woocommerce ul.products,
	.product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
.product-card {
	display: flex;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	border-radius: var(--bks-radius-card);
	background: var(--bks-card);
	transition: transform var(--bks-duration) var(--bks-ease);
}

.woocommerce ul.products li.product:hover,
.product-card:hover {
	transform: translateY(-4px);
}

.product-card__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--bks-white);
}

/*
 * The inset frame is drawn as a border in the card colour rather than as
 * padding, so the artwork sits on white inside the card.
 */
.woocommerce ul.products li.product a img,
.product-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0;
	border: 10px solid #f5f5f5;
	border-radius: 20px 20px 0 0;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 26px;
}

.product-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
}

.product-card__title a {
	color: var(--bks-ink);
	text-decoration: none;
}

.product-card__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.product-card__price,
.woocommerce ul.products li.product .price {
	margin: 0;
	color: var(--bks-ink) !important;
	font-family: var(--bks-font-heading);
	font-size: 22px;
	font-weight: 600;
}

.product-card__price del,
.woocommerce ul.products li.product .price del {
	opacity: 0.5;
	font-size: 0.75em;
}

.product-card__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 16px;
}

/* Pack size sits under the title as visible text, so it is not repeated as
   screen-reader-only content inside the link. */
.product-card__pack {
	margin: 0;
	color: #4a4742;
	font-size: 15px;
}

/* Stock is secondary to price here - a quiet line, not a sticker. */
.product-card__stock {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.product-card__stock--low { color: #8a4b00; }
.product-card__stock--out { color: #a3231c; }

/* --------------------------------------------------------------------------
   10. Single product
   -------------------------------------------------------------------------- */

.pdp-breadcrumb {
	margin: 0 0 22px;
	color: var(--bks-ink-muted);
	font-size: 15px;
}

.pdp-breadcrumb a {
	color: var(--bks-link);
	font-weight: 700;
	text-decoration: none;
}

.pdp-breadcrumb a:hover {
	color: var(--bks-ink);
	text-decoration: underline;
}

/*
 * Two explicit columns, not auto-fit. `repeat(auto-fit, minmax(300px, 1fr))`
 * packs as many 300px tracks as the container allows - four at 1240px - so
 * the gallery and summary landed in the first two and the rest sat empty.
 */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin: 0;
}

@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 56px;
	}
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
	width: 100% !important;
	min-width: 0;
	float: none !important;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells {
	grid-column: 1 / -1;
}

/* Gallery: square framed artwork, thumbnails in a three-up row.
   The theme renders its own gallery - see the note in inc/woocommerce.php. */
.pdp-gallery {
	min-width: 0;
}

.pdp-gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-media);
	background: var(--bks-white);
}

.pdp-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 40px;
}

.pdp-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.pdp-gallery__thumb {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-white);
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow var(--bks-duration) var(--bks-ease);
}

.pdp-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 18px;
}

.pdp-gallery__thumb:hover,
.pdp-gallery__thumb.is-current {
	box-shadow: inset 0 0 0 2px var(--bks-ink);
}

.woocommerce div.product .product_title {
	margin: 0 0 16px;
	font-size: clamp(27px, 3.2vw, 38px);
	line-height: 1.15;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 6px;
	color: var(--bks-ink);
	font-family: var(--bks-font-heading);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
}

.pdp-vat {
	margin: 0 0 24px;
	color: var(--bks-ink-muted);
	font-size: 16px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 52ch;
	margin: 0 0 28px;
	color: var(--bks-ink-soft);
	font-size: 18px;
}

/* Quantity stepper plus the primary action on one row. */
.woocommerce div.product form.cart {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 0 22px;
}

/*
 * WooCommerce puts a clearfix ::before/::after on this form. In a flex
 * container those become zero-width flex items, so the row gap indented the
 * quantity box by 14px and left a phantom track after the button.
 */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
	display: none;
}

.woocommerce div.product form.cart .quantity {
	display: flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
}

.woocommerce .quantity input.qty {
	width: 3.5rem;
	padding: 12px 6px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}

/*
 * The stepper clips overflow, so a focus ring on the input showed only its
 * left and right edges as two dark bars. Focus is moved to the wrapper.
 */
.woocommerce div.product form.cart .quantity input.qty:focus,
.woocommerce div.product form.cart .quantity input.qty:focus-visible {
	outline: none;
}

.woocommerce div.product form.cart .quantity:focus-within {
	border-color: var(--bks-ink);
	box-shadow: 0 0 0 3px rgba(43, 42, 40, 0.15);
}

/* Match the button's height so the row lines up. */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .button {
	min-height: 56px;
}

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

.qty-step {
	padding: 12px 18px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.qty-step:hover {
	background: var(--bks-tint);
}

.woocommerce div.product form.cart .button {
	flex: 1;
	min-width: 210px;
	padding: 16px 30px;
	font-size: 18px;
}

/*
 * Trailing arrow on the primary action. Added here rather than in the label,
 * because WooCommerce runs that string through esc_html() - an inline SVG
 * would render as visible markup. The mask inherits currentColor, so it
 * flips with the button on hover.
 */
.woocommerce div.product form.cart .button::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--bks-arrow) center / contain no-repeat;
	mask: var(--bks-arrow) center / contain no-repeat;
}

.woocommerce div.product .product_meta {
	margin-top: 8px;
	color: var(--bks-ink-muted);
	font-size: 15px;
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

.woocommerce div.product .stock {
	font-weight: 700;
}

.woocommerce div.product .stock.in-stock {
	color: #2f6b18;
}

/* Related products use the same card, at a slightly smaller step. */
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 {
	margin: 58px 0 26px;
	font-size: clamp(24px, 2.6vw, 32px);
	text-align: center;
}

.woocommerce div.product .related ul.products,
.woocommerce div.product .up-sells ul.products {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 24px;
}

/* --------------------------------------------------------------------------
   11. Accordions
   -------------------------------------------------------------------------- */

.pdp-details {
	margin-top: 28px;
	border-top: 1px solid var(--bks-rule);
	padding-top: 8px;
}

.pdp-details details {
	padding: 18px 0;
	border-bottom: 1px solid var(--bks-rule);
}

.pdp-details details:last-child {
	border-bottom: 0;
}

.pdp-details summary {
	font-family: var(--bks-font-heading);
	font-size: 19px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.pdp-details summary::-webkit-details-marker {
	display: none;
}

.pdp-details summary::after {
	content: "+";
	float: right;
	font-weight: 700;
}

.pdp-details details[open] summary::after {
	content: "\2212";
}

.pdp-details__body {
	margin: 14px 0 0;
	color: var(--bks-ink-soft);
	font-size: 17px;
}

.pdp-details__body ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 20px;
}

/* --------------------------------------------------------------------------
   12. Notices
   -------------------------------------------------------------------------- */

.pdp-notice {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 0 0 28px;
	padding: 20px 22px;
	border: 0;
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-card);
	color: var(--bks-ink-soft);
	font-size: 16px;
}

.pdp-notice__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--bks-accent);
	color: var(--bks-dark);
}

.pdp-notice__title {
	margin: 0 0 2px;
	font-family: var(--bks-font-heading);
	font-size: 17px;
	font-weight: 600;
	color: var(--bks-ink);
}

.pdp-notice__body {
	margin: 0;
}

/*
 * WooCommerce notices, rendered by woocommerce/notices/*.php as a tinted card
 * with a round icon - the same shape as the dispatch panel on the product
 * page, so success, error and info all read as part of the same system.
 */
.wc-notice {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 0 0 24px;
	padding: 20px 22px;
	border: 0;
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-card);
	color: var(--bks-ink-soft);
	font-size: 16px;
	list-style: none;
}

.wc-notice::before,
.wc-notice::after {
	content: none;
}

.wc-notice__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--bks-dark);
}

.wc-notice__body {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

.wc-notice__message {
	flex: 1 1 16rem;
	min-width: 0;
	font-weight: 600;
}

.wc-notice__message a:not(.button) {
	color: var(--bks-link);
	font-weight: 700;
}

.wc-notice__message .button {
	flex: none;
}

/* One tint per role. Icons carry the accent, the card stays quiet. */
.wc-notice--success { background: var(--bks-green); }
.wc-notice--success .wc-notice__icon { background: #8fdc68; }
.wc-notice--notice { background: var(--bks-blue); }
.wc-notice--notice .wc-notice__icon { background: #7fd8e8; }
.wc-notice--error { background: var(--bks-pink); }
.wc-notice--error .wc-notice__icon { background: #f5938d; }

/* WooCommerce also emits these classes directly in a few places. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	margin: 0 0 24px;
	padding: 18px 22px;
	border: 0;
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-card);
	color: var(--bks-ink);
	font-weight: 600;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-info { background: var(--bks-blue); }
.woocommerce-error { background: var(--bks-pink); }

/* --------------------------------------------------------------------------
   13. Feature band
   -------------------------------------------------------------------------- */

.features {
	padding: 52px var(--bks-gutter);
	background: var(--bks-band);
}

.features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 34px;
	max-width: var(--bks-container);
	margin-inline: auto;
	text-align: center;
}

.features__icon {
	display: block;
	height: 52px;
	width: auto;
	margin: 0 auto 16px;
}

.features__title {
	margin: 0 0 8px;
	font-size: 20px;
}

.features__body {
	max-width: 32ch;
	margin: 0 auto;
	color: var(--bks-ink-soft);
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	padding: 0 var(--bks-gutter);
	background: var(--bks-footer-bg);
	color: var(--bks-white);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 38px;
	max-width: var(--bks-container);
	margin-inline: auto;
	padding: 56px 0 30px;
}

.site-footer__logo {
	display: block;
	height: 58px;
	width: auto;
	margin-bottom: 18px;
	padding: 8px 10px;
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-white);
}

.site-footer__blurb {
	max-width: 34ch;
	margin: 0;
	color: #b9b4ad;
	font-size: 16px;
}

/* Funder mark. Supplied as a white PNG, so it needs no panel behind it. */
.site-footer__dft {
	display: block;
	height: 56px;
	width: auto;
	margin-top: 22px;
}

.site-footer__heading {
	margin: 0 0 14px;
	font-family: var(--bks-font-heading);
	font-size: 18px;
	font-weight: 600;
}

.site-footer ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.site-footer a {
	color: var(--bks-footer-link);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--bks-white);
	text-decoration: underline;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	max-width: var(--bks-container);
	margin-inline: auto;
	padding: 20px 0 40px;
	border-top: 1px solid var(--bks-footer-rule);
	color: var(--bks-footer-muted);
	font-size: 14px;
}

.site-footer__legal p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   14b. Title Case for interface chrome

   Page titles, section headings and navigation labels are Title Case, the
   same rule the buttons follow. Done in CSS so it also covers strings
   WordPress and WooCommerce generate ("Account details" -> "Account
   Details") without filtering every one of them.

   Product names are deliberately NOT included: capitalising them would
   render "Level 1 Badge (Pack Of 50)", and the design keeps that lowercase.
   -------------------------------------------------------------------------- */

.page-hero__title,
.wayfind__name,
.features__title,
.pdp-details summary,
.site-footer__heading,
.error-404__title,
.error-404__sections-title,
.woocommerce-MyAccount-navigation a,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3,
.woocommerce .cart-collaterals h2,
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce-account legend,
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2,
.woocommerce table.shop_table th {
	text-transform: capitalize;
}

/* Product names keep their own casing wherever they appear. */
.product-card__title,
.woocommerce div.product .product_title,
.woocommerce table.shop_table td.product-name,
.pdp-breadcrumb {
	text-transform: none;
}

/* --------------------------------------------------------------------------
   15. Cart, checkout and account
   -------------------------------------------------------------------------- */

/* A quiet title band for the WooCommerce and content pages. */
.page-hero--plain {
	background: var(--bks-card);
}

.page-hero--plain::after {
	content: none;
}

.page-hero--plain .page-hero__inner {
	padding: clamp(32px, 4vw, 56px) var(--bks-gutter);
	text-align: left;
}

.page-hero--plain .page-hero__title {
	color: var(--bks-ink);
	font-size: clamp(30px, 3.4vw, 44px);
	text-shadow: none;
}

/* --- Tables (cart, order review, order details) ------------------------ */

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--bks-rule);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--bks-radius-card);
	overflow: hidden;
	background: var(--bks-white);
	font-size: 16px;
}

.woocommerce table.shop_table th {
	padding: 16px 18px;
	border: 0;
	background: var(--bks-card);
	font-family: var(--bks-font-heading);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: 18px;
	border: 0;
	border-top: 1px solid var(--bks-rule);
	vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:first-child td {
	border-top: 0;
}

.woocommerce table.shop_table .product-name a {
	color: var(--bks-ink);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
	text-decoration: underline;
}

.woocommerce-cart table.cart img {
	width: 64px;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-white);
}

.woocommerce table.shop_table td.actions {
	background: var(--bks-card);
}

/* Remove-from-basket control: a real button shape, not a bare red cross. */
.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bks-white);
	box-shadow: inset 0 0 0 1px var(--bks-rule);
	color: var(--bks-ink) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce a.remove:hover {
	background: var(--bks-ink);
	box-shadow: none;
	color: var(--bks-white) !important;
}

/* Cart quantity fields outside the product page get the same shape. */
.woocommerce .quantity input.qty {
	border-radius: var(--bks-radius-thumb);
}

.woocommerce-cart table.cart .quantity input.qty {
	width: 4.5rem;
	padding: 10px 6px;
	border: 1px solid var(--bks-rule);
}

/* --- Totals and the checkout ------------------------------------------- */

.woocommerce .cart-collaterals {
	margin-top: 36px;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order {
	width: 100%;
}

.woocommerce .cart-collaterals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
	margin: 0 0 16px;
	font-size: clamp(22px, 2vw, 26px);
}

.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce table.shop_table tfoot th {
	background: var(--bks-white);
	font-size: 16px;
}

.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
	background: var(--bks-card);
	font-size: 18px;
}

.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
	font-family: var(--bks-font-heading);
	font-size: 22px;
}

/*
 * Shipping methods render as a plain <ul id="shipping_method">, which inherits
 * the browser's list bullet and left indent. In the cart and checkout totals
 * that shows a stray bullet before "Delivery" and, because the indent pushes
 * the text out of the cell, leaves the checkout amount sitting oddly. Strip the
 * list styling so the shipping line sits inline like every other totals row.
 */
.woocommerce .cart_totals ul#shipping_method,
.woocommerce .cart_totals .woocommerce-shipping-methods,
.woocommerce-checkout .woocommerce-checkout-review-order ul#shipping_method,
.woocommerce-checkout .woocommerce-checkout-review-order .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .cart_totals ul#shipping_method li,
.woocommerce-checkout .woocommerce-checkout-review-order ul#shipping_method li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The payment gateway list (ul.wc_payment_methods) is another plain <ul> that
 * picks up the default bullet before each method. Strip it so the gateway
 * radio and label sit flush.
 */
.woocommerce-checkout ul.wc_payment_methods,
.woocommerce-checkout ul.wc_payment_methods li {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.woocommerce .wc-proceed-to-checkout {
	padding: 20px 0 0;
}

/* Checkout: form on the left, order review on the right at desktop. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/*
 * WooCommerce's order-attribution feature injects a <wc-order-attribution-inputs>
 * element (empty, just hidden tracking inputs) as a direct child of the form.
 * As a grid item it claims a cell and pushes the order review into a second row,
 * so the two columns stop lining up. Take it out of the grid flow - the hidden
 * inputs inside still submit normally.
 */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
	display: contents;
}

@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 48px;
	}

	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout .checkout-review-wrap {
		grid-column: 2;
		position: sticky;
		top: 120px;
	}
}

.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after {
	content: none;
	display: none;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

/* Keep the shipping fields collapsed until the box is ticked, so they do not
   flash open before checkout.js runs. jQuery reveals them with an inline
   style, which outranks this. */
.woocommerce-checkout #customer_details:has( #ship-to-different-address-checkbox:not(:checked) ) .shipping_address {
	display: none;
}

.woocommerce-checkout .checkout-review-wrap {
	padding: 28px;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-card);
	background: var(--bks-white);
}

.woocommerce-checkout #payment {
	margin-top: 20px;
	border-radius: var(--bks-radius-card);
	background: var(--bks-card);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 20px;
	border-bottom: 1px solid var(--bks-rule);
}

.woocommerce-checkout #payment div.form-row {
	padding: 20px;
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-white);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--bks-white);
}

/* --- Form fields ------------------------------------------------------- */

.woocommerce form .form-row {
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-account label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 700;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	padding: 12px 14px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-white);
	font: inherit;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--bks-ink);
	outline: none;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: #d8382f;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	margin: 0 0 24px;
	padding: 24px;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-card);
	background: var(--bks-white);
}

/* --- My account -------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	margin-bottom: 28px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 18px;
	border-radius: var(--bks-radius-pill);
	background: var(--bks-card);
	color: var(--bks-ink);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--bks-accent);
	color: var(--bks-dark);
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
}

/* Login is the front door of a trade-only shop, so it gets real presence. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account .woocommerce > .woocommerce-form-login {
	max-width: 30rem;
	margin-inline: auto;
	padding: 32px;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-card);
	background: var(--bks-white);
}

/* Centre the heading with the login card rather than leaving it far left. */
.woocommerce-account .woocommerce:has(> .woocommerce-form-login) > h2 {
	max-width: 30rem;
	margin-inline: auto;
	text-align: center;
}

/* Show/hide password control, which WooCommerce leaves as a bare span. */
.woocommerce form .password-input,
.woocommerce-account .password-input {
	display: block;
	position: relative;
}

.woocommerce form .password-input input,
.woocommerce-account .password-input input {
	padding-right: 46px;
}

.woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	border-radius: 4px;
	background: transparent;
	color: var(--bks-ink-muted);
	cursor: pointer;
}

.woocommerce .show-password-input::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	-webkit-mask: var(--bks-eye) center / 22px 22px no-repeat;
	mask: var(--bks-eye) center / 22px 22px no-repeat;
}

.woocommerce .show-password-input:hover,
.woocommerce .show-password-input.display-password {
	color: var(--bks-ink);
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.woocommerce-form-login__rememberme span {
	font-weight: 600;
}

.woocommerce-LostPassword {
	margin: 12px 0 0;
	font-size: 15px;
}

/* Staff route to wp-login.php - present but deliberately quiet. */
.account-staff-login {
	max-width: 30rem;
	margin: 20px auto 0;
	color: var(--bks-ink-muted, #5a5651);
	font-size: 14px;
	text-align: center;
}

.trade-notice {
	max-width: 30rem;
	margin: 0 auto 24px;
	padding: 18px 22px;
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-blue);
	text-align: center;
}

/* --- Checkout field pairing -------------------------------------------- */

/*
 * WooCommerce marks first/last name and similar as .form-row-first and
 * .form-row-last, meaning "these two share a row". Without a rule for that
 * pair they stacked full width, which is what made the checkout look like a
 * single long column.
 */
@media (min-width: 34rem) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last,
	.woocommerce-page form .form-row-first,
	.woocommerce-page form .form-row-last {
		float: none;
		width: calc(50% - 10px);
		display: inline-block;
		vertical-align: top;
	}

	.woocommerce form .form-row-first,
	.woocommerce-page form .form-row-first {
		margin-right: 16px;
	}
}

.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
	width: 100%;
	clear: both;
}

/* --- Select controls, matched to the text inputs ----------------------- */

/*
 * Native selects get the input's border, radius and padding plus a drawn
 * chevron, because the platform arrow cannot be restyled and looked foreign
 * next to the rest of the form.
 */
.woocommerce form .form-row select,
.woocommerce-page form .form-row select,
.woocommerce select,
.cf7-field select,
select.orderby {
	width: 100%;
	padding: 12px 44px 12px 14px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
	background-color: var(--bks-white);
	background-image: var(--bks-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	color: var(--bks-ink);
	font: inherit;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.woocommerce form .form-row select:focus,
.woocommerce select:focus,
select.orderby:focus {
	border-color: var(--bks-ink);
	outline: none;
}

/*
 * Select2, which WooCommerce uses for country and state. Its default styling
 * is a thin grey box with a blue highlight; these rules bring it in line with
 * the text inputs and swap the blue for the brand tint.
 */
.woocommerce .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single {
	height: auto;
	padding: 10px 44px 10px 14px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-white);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--bks-ink);
	font: inherit;
	line-height: 1.4;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--bks-ink-muted);
}

/* Replace the CSS-triangle arrow with the same chevron the selects use. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	width: 24px;
	height: 100%;
	background: var(--bks-chevron) no-repeat center / 18px 18px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--bks-ink);
}

/* Keep the open control square-bottomed so it reads as one piece with the
   panel below it. */
.select2-container--default.select2-container--open .select2-selection--single {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
	border-radius: 0 0 var(--bks-radius-thumb) var(--bks-radius-thumb);
}

.select2-dropdown {
	border: 2px solid var(--bks-ink);
	border-radius: 0 0 var(--bks-radius-thumb) var(--bks-radius-thumb);
	background: var(--bks-white);
	overflow: hidden;
}

.select2-dropdown--above {
	border-radius: var(--bks-radius-thumb) var(--bks-radius-thumb) 0 0;
}

.select2-container--default .select2-search--dropdown {
	padding: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 10px 12px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
	font: inherit;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--bks-ink);
	outline: none;
}

.select2-container--default .select2-results__option {
	padding: 10px 14px;
	font-size: var(--bks-text-base);
}

/* Brand tint instead of the default blue. Dark text on the peach is well
   above AA, unlike white on the stock blue. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted {
	background: var(--bks-peach);
	color: var(--bks-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--bks-card);
	color: var(--bks-ink);
	font-weight: 700;
}

.select2-results__options {
	max-height: 16rem;
}

/* --- WooCommerce icon-font glyphs -------------------------------------- */

/*
 * WooCommerce renders small decorations from its own icon font. The theme
 * does not load that font, so they came out as tofu boxes - the stray marks
 * next to "Calculate shipping" on the cart. Suppressed rather than restyled;
 * the links read perfectly well without them.
 */
.woocommerce a.shipping-calculator-button::after,
.woocommerce .shipping-calculator-button::after,
.woocommerce ul.cart_list li a::before,
.woocommerce-cart .cart-collaterals .shipping-calculator-button::after {
	content: none !important;
	display: none !important;
}

.shipping-calculator-button {
	font-weight: 700;
}

/* --- My account tabs --------------------------------------------------- */

/* Dashboard */
.woocommerce-MyAccount-content > p {
	max-width: 62ch;
	font-size: 17px;
}

.woocommerce-MyAccount-content > p a {
	color: var(--bks-link);
	font-weight: 700;
}

/* Orders */
.woocommerce table.woocommerce-orders-table,
.woocommerce table.woocommerce-table--order-downloads,
.woocommerce table.woocommerce-MyAccount-paymentMethods {
	width: 100%;
	border: 1px solid var(--bks-rule);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--bks-radius-card);
	overflow: hidden;
	background: var(--bks-white);
}

.woocommerce table.woocommerce-orders-table th,
.woocommerce table.woocommerce-table--order-downloads th,
.woocommerce table.woocommerce-MyAccount-paymentMethods th {
	padding: 14px 18px;
	border: 0;
	background: var(--bks-card);
	font-family: var(--bks-font-heading);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.woocommerce table.woocommerce-orders-table td,
.woocommerce table.woocommerce-table--order-downloads td,
.woocommerce table.woocommerce-MyAccount-paymentMethods td {
	padding: 16px 18px;
	border: 0;
	border-top: 1px solid var(--bks-rule);
	vertical-align: middle;
}

.woocommerce table.woocommerce-orders-table tbody tr:first-child td {
	border-top: 0;
}

.woocommerce-orders-table__cell-order-number a {
	color: var(--bks-link);
	font-weight: 700;
	text-decoration: none;
}

/* Order status as a pill rather than bare text. */
.woocommerce-orders-table__cell-order-status {
	font-weight: 700;
}

.woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 8px;
}

/* Addresses - WooCommerce ships these as floated .u-columns. */
.woocommerce-Addresses.u-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 720px) {
	.woocommerce-Addresses.u-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-Addresses.u-columns::before,
.woocommerce-Addresses.u-columns::after {
	content: none;
	display: none;
}

.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-card);
	background: var(--bks-white);
}

.woocommerce-Address-title {
	display: flex;
	gap: 16px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 20px;
}

.woocommerce-Address-title .edit {
	flex: none;
	color: var(--bks-link);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-Address address {
	margin: 0;
	color: var(--bks-ink-soft);
	font-style: normal;
	line-height: 1.7;
}

/* Edit account / edit address forms */
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: 44rem;
	padding: 28px;
	border: 1px solid var(--bks-rule);
	border-radius: var(--bks-radius-card);
	background: var(--bks-white);
}

.woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
	margin: 28px 0 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--bks-rule);
}

.woocommerce-EditAccountForm legend,
.woocommerce-account legend {
	padding: 0;
	font-family: var(--bks-font-heading);
	font-size: 19px;
	font-weight: 600;
}

/* WooCommerce's --first / --last pair is a two-column row. */
.woocommerce-EditAccountForm .woocommerce-form-row--first,
.woocommerce-EditAccountForm .woocommerce-form-row--last,
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last {
	width: 100%;
	float: none;
}

@media (min-width: 640px) {
	.woocommerce-EditAccountForm,
	.woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 20px;
	}

	.woocommerce-EditAccountForm > .woocommerce-form-row--wide,
	.woocommerce-EditAccountForm > fieldset,
	.woocommerce-EditAccountForm > p:last-of-type,
	.woocommerce-EditAccountForm > .clear,
	.woocommerce-address-fields__field-wrapper > .form-row-wide {
		grid-column: 1 / -1;
	}
}

.woocommerce-EditAccountForm em,
.woocommerce-password-hint {
	display: block;
	margin-top: 6px;
	color: var(--bks-ink-muted);
	font-size: 14px;
	font-style: normal;
}

.woocommerce-EditAccountForm .clear,
.woocommerce-address-fields .clear {
	display: none;
}

/* Password strength meter */
.woocommerce-password-strength {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: var(--bks-radius-thumb);
	font-size: 14px;
	font-weight: 700;
	text-align: left;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { background: var(--bks-pink); }
.woocommerce-password-strength.good { background: var(--bks-peach); }
.woocommerce-password-strength.strong { background: var(--bks-green); }

/* Empty states across the tabs (no orders, no downloads, no cards) */
.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-MyAccount-content .woocommerce-info {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 24px;
	border-radius: var(--bks-radius-card);
	background: var(--bks-card);
	font-weight: 600;
}

.woocommerce-MyAccount-content .woocommerce-Message .button {
	flex: none;
}

/* --- Empty basket ------------------------------------------------------ */

.woocommerce .cart-empty {
	margin: 0 0 8px;
	font-family: var(--bks-font-heading);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 600;
	text-align: center;
}

.woocommerce .return-to-shop {
	margin: 24px 0 0;
	text-align: center;
}

/* --- Order confirmation ------------------------------------------------ */

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	margin: 0 0 32px;
	padding: 24px;
	border-radius: var(--bks-radius-card);
	background: var(--bks-card);
	list-style: none;
}

.woocommerce ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 4px;
	font-family: var(--bks-font-heading);
	font-size: 18px;
	letter-spacing: 0;
	text-transform: none;
}

/* --- Pagination -------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination,
.wp-block-query-pagination,
.navigation.pagination {
	margin-top: 40px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul,
.navigation.pagination .nav-links {
	display: inline-flex;
	gap: 8px;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li,
.navigation.pagination .nav-links > * {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.navigation.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--bks-radius-pill);
	background: var(--bks-card);
	color: var(--bks-ink);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.navigation.pagination .page-numbers.current {
	background: var(--bks-accent);
	color: var(--bks-dark);
}

/* --- Search results page ---------------------------------------------- */

.search-page__form {
	max-width: 34rem;
	margin: 0 0 32px;
}

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

.search-page__form .search-form__input {
	flex: 1;
	min-width: 0;
	padding: 14px 18px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-pill);
	font: inherit;
}

.search-page__empty {
	max-width: 46rem;
	margin: 0 0 8px;
	font-size: 17px;
}

.search-page__empty .wayfind {
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   16. Contact Form 7
   Brand primary background, no border, 20px top margin only, fits content.
   -------------------------------------------------------------------------- */

.wpcf7 form .wpcf7-response-output {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--bks-radius-thumb);
	background: var(--bks-accent);
	color: var(--bks-dark);
	font-weight: 700;
	overflow-wrap: break-word;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #a3231c;
	font-size: 14px;
	font-weight: 700;
}

.cf7-field {
	margin-bottom: 20px;
}

.cf7-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.cf7-field input[type="text"],
.cf7-field input[type="email"],
.cf7-field input[type="tel"],
.cf7-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-thumb);
	font: inherit;
}

.cf7-required {
	color: #a3231c;
}

/* --------------------------------------------------------------------------
   17. 404
   -------------------------------------------------------------------------- */

.error-404 {
	max-width: 46rem;
	margin-inline: auto;
	padding-block: clamp(48px, 6vw, 88px);
	text-align: center;
}

.error-404__code {
	display: inline-block;
	margin: 0 0 20px;
	padding: 8px 20px;
	border-radius: var(--bks-radius-pill);
	background: var(--bks-peach);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.error-404__title {
	margin: 0 0 12px;
	font-size: clamp(28px, 3.4vw, 44px);
}

.error-404__standfirst {
	margin: 0 auto;
	max-width: 40ch;
	color: var(--bks-ink-muted);
	font-size: 17px;
}

.error-404 .search-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 30rem;
	margin: 32px auto 0;
}

.error-404 .search-form__input {
	flex: 1 1 12rem;
	padding: 14px 18px;
	border: 2px solid var(--bks-rule);
	border-radius: var(--bks-radius-pill);
	font: inherit;
}

.error-404__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 24px;
}

.error-404__sections {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--bks-rule);
}

.error-404__sections-title {
	margin: 0 0 20px;
	font-size: 20px;
}

.error-404 .wayfind {
	margin-bottom: 0;
	text-align: left;
}