/*
 * bedi-theme — WooCommerce presentation
 *
 * Registered and conditionally enqueued by Bedi\Theme\Assets as the handle
 * `bedi-woo`, with `bedi-base` as a dependency so the design tokens it aliases
 * are always defined first.
 *
 * It lands after WooCommerce's own stylesheets: WooCommerce hooks its frontend
 * scripts on 'plugins_loaded', long before the theme boots, so at the shared
 * 'wp_enqueue_scripts' priority its callback queues `woocommerce-general` first
 * and ours prints later. That is what lets the handful of rules below override
 * Woo's defaults on equal specificity, with no !important anywhere in this file.
 *
 * Scope: every selector is anchored on `.woocommerce`, `.woocommerce-page` or
 * `.bedi-woo`. Nothing here targets `.wc-block-*` or any wp-admin surface, and
 * the stylesheet is never enqueued in the admin.
 *
 * Reduced motion is handled globally in base.css and is deliberately not
 * repeated here.
 *
 * Contents
 *   1. Local tokens
 *   2. Content wrapper and notices
 *   3. Breadcrumbs
 *   4. Buttons and focus
 *   5. Shop archive header
 *   6. Product grid
 *   7. Product card
 *   8. Sale badge
 *   9. Pagination
 *  10. Single product layout
 *  11. Single product summary
 *  12. Price tiers
 *  13. Cart, checkout and account
 *  14. Forced colours
 */

/* ==========================================================================
   1. Local tokens
   ==========================================================================

   Every colour, space and radius here is an alias of a token defined in
   base.css (colours) or fonts.css (the family), with the real value repeated as
   the var() fallback so this file also renders correctly on its own — during a
   partial deploy, or if base.css ever fails to load. Aliasing rather than
   redefining means we never overwrite a theme token and never depend on
   stylesheet order: custom-property substitution is resolved at use, so a
   token defined anywhere reaches every alias below.

   No literal colour appears outside this block.
   ========================================================================== */

:root {
	--bedi-woo-ink: var(--bedi-ink, #333333);
	--bedi-woo-brand: var(--bedi-navy, #273a60);
	--bedi-woo-accent: var(--bedi-accent, #007cba);
	--bedi-woo-rule: var(--bedi-rule, #d2d2d2);
	--bedi-woo-surface: var(--bedi-surface, #ffffff);
	--bedi-woo-muted: var(--bedi-muted, #f5f7f8);

	/*
	 * Not a brand token: the contrast pair for text sitting on --bedi-woo-brand.
	 * Deliberately fixed across colour schemes. If it followed --bedi-surface it
	 * would flip to near-black in dark mode and put dark text on a navy button.
	 */
	--bedi-woo-on-brand: #ffffff;

	/*
	 * The contrast pair for text sitting on --bedi-woo-accent. NOT the same as
	 * --bedi-woo-on-brand: the accent is a light blue on a dark canvas, and white
	 * on it reads at 2.1:1. Every hover state that swaps the fill to the accent
	 * has to swap the ink to this.
	 */
	--bedi-woo-on-accent: var(--bedi-on-accent, #ffffff);

	/*
	 * Brand-coloured TEXT, which is not the same colour as a brand-coloured FILL
	 * once the canvas is dark. --bedi-woo-brand is the fill that carries
	 * --bedi-woo-on-brand (buttons, the sale badge, the current page number);
	 * this is the readable brand ink for a price, a tier amount or a stock line.
	 * On the light scheme both resolve to #273a60 and nothing moves.
	 */
	--bedi-woo-brand-ink: var(--bedi-link-brand, #273a60);

	--bedi-woo-font: var(--bedi-font-sans, "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

	--bedi-woo-radius: var(--bedi-radius-sm, 3px);

	/*
	 * The theme's spacing scale, aliased so the shop keeps the same rhythm as
	 * every other page rather than inventing a second one. Only 2xs is local:
	 * base.css starts at 0.75rem and a product card needs one step below that.
	 */
	--bedi-woo-space-2xs: 0.375rem;
	--bedi-woo-space-xs: var(--bedi-space-xs, 0.75rem);
	--bedi-woo-space-sm: var(--bedi-space-sm, 1rem);
	/* 24px. Added for the product grid's column gap, which has to match the
	   product rail's --prail-gap — the two rows of cards are the same component
	   and must not be separated by different amounts on different templates. */
	--bedi-woo-space-md: var(--bedi-space-md, 1.5rem);
	--bedi-woo-space-lg: var(--bedi-space-lg, 2rem);
	--bedi-woo-space-xl: var(--bedi-space-xl, 3rem);

	/* WCAG 2.5.5: minimum size of any interactive target. */
	--bedi-woo-tap: 44px;
}

/*
 * Only the fallbacks change below. When the main stylesheet redefines the brand
 * tokens for dark mode, custom-property substitution is live and the aliases
 * above already resolve to the dark values — these declarations then do nothing.
 * They matter when woo.css is the only stylesheet present.
 *
 * Both the system preference and an explicit `data-theme` attribute are honoured,
 * so the shop follows whichever convention the theme's main stylesheet uses.
 */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bedi-woo-ink: var(--bedi-ink, #e6e8ea);
		--bedi-woo-brand: var(--bedi-navy, #3d5896);
		--bedi-woo-accent: var(--bedi-accent, #56b3e8);
		--bedi-woo-rule: var(--bedi-rule, #3a3f46);
		--bedi-woo-surface: var(--bedi-surface, #16181c);
		--bedi-woo-muted: var(--bedi-muted, #1e2126);
		--bedi-woo-on-accent: var(--bedi-on-accent, #06121c);
		--bedi-woo-brand-ink: var(--bedi-link-brand, #a8bfe8);
	}
}

:root[data-theme="dark"] {
	--bedi-woo-ink: var(--bedi-ink, #e6e8ea);
	--bedi-woo-brand: var(--bedi-navy, #3d5896);
	--bedi-woo-accent: var(--bedi-accent, #56b3e8);
	--bedi-woo-rule: var(--bedi-rule, #3a3f46);
	--bedi-woo-surface: var(--bedi-surface, #16181c);
	--bedi-woo-muted: var(--bedi-muted, #1e2126);
	--bedi-woo-on-accent: var(--bedi-on-accent, #06121c);
	--bedi-woo-brand-ink: var(--bedi-link-brand, #a8bfe8);
}

/* ==========================================================================
   2. Content wrapper and notices
   ========================================================================== */

.bedi-woo {
	/*
	 * A scoping element and nothing more. No width, no grid, no padding: the
	 * theme's page container owns the page measure, and this wrapper only exists
	 * because WooCommerce's default one hardcodes ids that collide with it.
	 */
	display: block;
	color: var(--bedi-woo-ink);
	font-family: var(--bedi-woo-font);
}

/*
 * NOTICES THAT STAY ON THE PAGE.
 *
 * Most WooCommerce notices are lifted into toasts by assets/js/toast.js, but
 * some are not transient and must not be: "confirm your email address to link
 * your past orders" is a task, not an announcement, and a toast that vanishes
 * after five seconds is the wrong container for something the customer has to
 * act on. Those stay inline, and this is what they look like.
 *
 * It was WooCommerce's own default with our colours poured in — a grey slab
 * with a 3px top rule in navy and a core icon-font glyph. Now it is a card in
 * the theme's own language: the tinted surface, an 18px radius, a hairline, and
 * a round accent chip carrying the glyph.
 */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	align-items: center;
	background-color: var(--bedi-bg-2);
	border: var(--bedi-border-width) solid transparent;
	/* Core puts a coloured 3px rule on top; the tint is the separation here. */
	border-top: 0;
	border-radius: var(--bedi-radius-xl);
	color: var(--bedi-ink);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-3);
	line-height: 1.5;
	padding: var(--bedi-space-5) var(--bedi-space-5) var(--bedi-space-5) 64px;
	position: relative;
}

.woocommerce .woocommerce-error {
	background-color: #FDECEA;
}

/*
 * The glyph becomes a round chip. Core sets `content` from the WooCommerce
 * icon font and positions it absolutely; the font is loaded, so only the box
 * around it changes.
 */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	align-items: center;
	background-color: var(--bedi-accent);
	block-size: 32px;
	border-radius: var(--bedi-radius-round);
	color: var(--bedi-on-accent);
	display: flex;
	inline-size: 32px;
	inset-block-start: var(--bedi-space-5);
	inset-inline-start: var(--bedi-space-5);
	justify-content: center;
	font-size: 15px;
	position: absolute;
	top: var(--bedi-space-5);
	left: var(--bedi-space-5);
}

.woocommerce .woocommerce-error::before {
	background-color: var(--bedi-danger);
}

/* The notice's own action sits at the end of the row, not floated by core. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
	float: none;
	margin-inline-start: auto;
}

/* ==========================================================================
   3. Breadcrumbs
   ========================================================================== */

/*
 * NO GAP UNDER THE BREADCRUMB, WHICH IS WHAT THE PRODUCT PAGE ALREADY DID.
 *
 * Measured on both at 1400px: on a single product the breadcrumb's bottom edge
 * and the H1's top edge are the same pixel — the breathing room is the line
 * boxes, not a margin. On an archive this rule added 32px on top of that, so
 * the two templates set their titles at different distances from an identical
 * breadcrumb. The archive now matches the product page; the space below the
 * TITLE is unchanged and still comes from .woocommerce-products-header.
 */
.woocommerce .bedi-breadcrumb {
	margin: 0;
	padding: 0;
	color: var(--bedi-woo-ink);
	font-size: 0.875rem;
	line-height: 1.4;
}

.woocommerce .bedi-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: var(--bedi-woo-tap);
	padding-inline: 0.25rem;
	color: var(--bedi-woo-accent);
	text-decoration: none;
}

.woocommerce .bedi-breadcrumb a:hover,
.woocommerce .bedi-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.bedi-breadcrumb__sep {
	display: inline-block;
	padding-inline: 0.375rem;
	color: var(--bedi-woo-rule);
}

/*
 * ONE LINE THAT SCROLLS, ON A PHONE.
 *
 * A four-level trail wraps to two and sometimes three lines at 375px, and a
 * wrapped breadcrumb is the worst of both worlds: it takes the vertical space
 * of a heading while being the least important text on the page. Kept on one
 * line it reads as the thin locator it is meant to be, and the part that
 * matters — where you are now — is at the end, which is where the scroll
 * starts from.
 *
 * `nowrap` + `overflow-x: auto` and nothing else: no scrollbar to hide on iOS,
 * momentum scrolling for free, and it still works with a mouse wheel on a
 * touch laptop.
 */
@media (max-width: 47.9375em) {
	.woocommerce .bedi-breadcrumb {
		-ms-overflow-style: none;
		overflow-x: auto;
		scrollbar-width: none;
		/*
		 * The trail is read right-to-left in importance — the current page is
		 * last — so the scroll rests at the end rather than the start.
		 */
		scroll-behavior: smooth;
		white-space: nowrap;
	}

	.woocommerce .bedi-breadcrumb::-webkit-scrollbar {
		display: none;
	}

	/*
	 * The links drop their 44px minimum height here. That rule exists to make
	 * a tap target, and it is what was turning this strip into a 44px-tall
	 * band; on one scrolling line the text itself is the target and the row is
	 * as tall as the type.
	 */
	.woocommerce .bedi-breadcrumb a {
		min-height: 0;
	}

	/*
	 * SMALLER, AND FLUSH LEFT WITH THE TITLE.
	 *
	 * The trail is the least important text on the page and was setting at the
	 * same size as body copy. 12px is enough to read and stops it competing
	 * with the product name directly beneath it.
	 *
	 * The first link also loses its leading padding. Every link carries
	 * `padding-inline: 0.25rem` to widen the tap target, which on the FIRST one
	 * indents the whole trail four pixels — so the breadcrumb looked inset
	 * relative to the title and the two never lined up.
	 */
	.woocommerce .bedi-breadcrumb {
		font-size: 0.75rem;
	}

	.woocommerce .bedi-breadcrumb a:first-child {
		padding-inline-start: 0;
	}
}

/* ==========================================================================
   4. Buttons and focus
   ========================================================================== */

.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 {
	/*
	 * THE GENERIC WOOCOMMERCE BUTTON, ON THE SYSTEM.
	 *
	 * This is the fallback every Woo button lands on when the theme has not
	 * styled it specifically — the notice's "confirm email address", the
	 * account screens, anything a plugin renders. It predated the design pass
	 * and was a dark-navy square: `--bedi-woo-brand` resolves to
	 * `--bedi-navy` (#070024), `--bedi-woo-radius` to `--bedi-radius-sm` (3px),
	 * `font-weight: 600` (a weight this theme does not ship — it has 400 / 500
	 * / 700) and `font-family: inherit`, which is the body face.
	 *
	 * So every button the theme had NOT reached looked like a different product
	 * from the ones it had. It is now the same object as the buy button: accent
	 * fill, the shared 12px radius, MarkGEO at 16/500, 48px tall.
	 *
	 * The `--bedi-woo-*` tokens are left alone deliberately — they carry rules,
	 * muted fills and link colours elsewhere in this file, and retuning the
	 * token to fix the button would have repainted all of those too.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bedi-space-2);
	min-height: 48px;
	min-width: var(--bedi-woo-tap);
	padding: 0 var(--bedi-space-6);
	border: var(--bedi-border-width) solid transparent;
	border-radius: var(--bedi-radius-lg);
	background-color: var(--bedi-accent);
	color: var(--bedi-on-accent);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-medium);
	line-height: 1.2;
	text-align: center;
	/* NEVER UNDERLINED. Several of these are anchors, and base.css underlines
	   anchors inside content areas — a button with an underline through its
	   label is the single clearest sign of an unstyled control. */
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		box-shadow var(--bedi-dur) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

/*
 * No underline in ANY state, and no underline on a descendant either — a
 * WooCommerce button sometimes wraps its label in a span that the content
 * link rules then reach.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button *,
.woocommerce button.button * {
	text-decoration: none;
}

.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 {
	background-color: var(--bedi-accent-strong);
	color: var(--bedi-on-accent);
	box-shadow: 0 10px 24px -14px rgba(45, 129, 255, 0.8);
	transform: translateY(-1px);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
	box-shadow: none;
	transform: translateY(0) scale(0.985);
}

.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 {
	border-color: var(--bedi-woo-accent);
	background-color: var(--bedi-woo-accent);
	color: var(--bedi-woo-on-accent);
}

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

/*
 * One focus treatment for everything interactive inside the shop. :focus-visible
 * keeps it off mouse clicks; the 3px ring plus offset clears the button's own
 * border so it stays visible on a filled control.
 */
.bedi-woo a:focus-visible,
.bedi-woo button:focus-visible,
.bedi-woo input:focus-visible,
.bedi-woo select:focus-visible,
.bedi-woo textarea:focus-visible,
.bedi-woo summary:focus-visible,
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible {
	outline: 3px solid var(--bedi-woo-accent);
	outline-offset: 2px;
	/*
	 * NO border-radius HERE. This rule used to re-declare it as
	 * --bedi-woo-radius (3px), which lands on EVERY focusable element inside
	 * .woocommerce / .bedi-woo and outranks the button's own radius for as
	 * long as the element holds focus — so a keyboard user watched each
	 * button snap square the moment they tabbed onto it. Browsers already
	 * draw the focus ring around the element's own corners, so the
	 * declaration bought nothing and cost that.
	 */
}

/* ==========================================================================
   5. Shop archive header
   ========================================================================== */

.woocommerce .woocommerce-products-header {
	margin: 0 0 var(--bedi-woo-space-lg);
}

/*
 * THE ARCHIVE TITLE IS THE PRODUCT TITLE, AT THE SAME SETTINGS.
 *
 * It carried neither a font-family nor a font-weight, so it inherited Mulish
 * from `.bedi-woo` and took theme.json's `elements.heading` weight of 600 —
 * a weight this theme does not ship (400 / 500 / 700 and nothing else), which
 * the browser then synthesised. That is the "titles are still the other font"
 * report: not a loading failure, just a rule that never named the face.
 *
 * Both are now stated outright, matching `.bedi-product .product_title`
 * (product.css:143) declaration for declaration — same family, same 2rem, same
 * 700, same 1.25 — so a category heading and a product heading are one object
 * seen twice.
 *
 * MARGIN ZERO, like the product title. The gap belongs to
 * `.woocommerce-products-header` above, which already owns it; a bottom margin
 * here as well meant the space under a title was the sum of two rules that did
 * not know about each other.
 */
.woocommerce .woocommerce-products-header__title {
	margin: 0;
	color: var(--bedi-woo-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-3xl);
	font-weight: var(--bedi-weight-bold);
	line-height: 1.25;
}

.woocommerce .woocommerce-result-count {
	margin: 0 0 var(--bedi-woo-space-sm);
	color: var(--bedi-woo-ink);
	font-size: 0.875rem;
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 var(--bedi-woo-space-sm);
}

.woocommerce .woocommerce-ordering select {
	min-height: var(--bedi-woo-tap);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--bedi-woo-rule);
	border-radius: var(--bedi-woo-radius);
	background-color: var(--bedi-woo-surface);
	color: var(--bedi-woo-ink);
	font-family: inherit;
	font-size: 0.9375rem;
}

/* ==========================================================================
   6. Product grid

   `woocommerce-layout` — the stylesheet that floats `li.product` and gives it a
   percentage width — is dropped before registration by
   Bedi\Theme\Assets::woocommerce_styles(), together with
   `woocommerce-smallscreen`. The float/width resets below are therefore
   belt-and-braces: they cost nothing, and they keep this grid intact on a site
   that re-enables those stylesheets through the same filter.

   What those two files ALSO carried — the cart, checkout and account column
   layouts and the small-screen table stacking — is rebuilt in section 13.
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	/*
	 * THE COLUMN GAP IS THE SAME 24px THE PRODUCT RAIL USES, and for the same
	 * reason: with the media well white (section 5 of this file, and
	 * --prail-media-bg in section-products.css) the tile has no fill, no border
	 * and no shadow, so the gap is the only thing separating one product photo
	 * from the next. It was --bedi-woo-space-sm, 16px, chosen while each tile
	 * still sat in a visible grey box that drew its own bounds.
	 *
	 * The ROW gap stays larger than the column gap. A row break already has the
	 * price, the stock line and the button between the two photographs, so it
	 * needs less help; the two being equal made the grid read as a square mesh
	 * rather than as rows of products.
	 */
	gap: var(--bedi-woo-space-lg) var(--bedi-woo-space-md);
	margin: 0 0 var(--bedi-woo-space-xl);
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	/* Woo's clearfix pseudo-elements become stray grid items. */
	content: none;
	display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: var(--bedi-woo-space-sm);
}

@media (min-width: 30rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--bedi-woo-space-xl) var(--bedi-woo-space-lg);
	}
}

/* ==========================================================================
   7. Product card
   ========================================================================== */

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bedi-woo-rule);
	border-radius: var(--bedi-woo-radius);
	background-color: var(--bedi-woo-surface);
	color: var(--bedi-woo-ink);
	text-align: start;
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	/*
	 * Square box, uncropped contents. Catalogue photography here is not square
	 * and `cover` would cut product edges off; `contain` letterboxes onto the
	 * muted surface instead. The fixed ratio is also what stops the grid
	 * reflowing as images decode.
	 */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 0 var(--bedi-woo-space-xs);
	border-radius: var(--bedi-woo-radius);
	/*
	 * WHITE, NOT --bedi-woo-muted. The letterbox bars this rule creates sat on a
	 * tint, behind photographs that are themselves cut out on white — so the
	 * well's edge read as the product's edge and a row of tiles read as a row of
	 * grey boxes. The same call was made for the product rail's well
	 * (section-products.css) and both cart and search thumbnails in this pass.
	 *
	 * This rule is a FALLBACK now: woocommerce/content-product.php renders
	 * .bedi-pcard tiles, and section-catalog.css styles those. It still fires on
	 * any loop that bypasses that template — a shortcode, a block, a related
	 * products row from a plugin — which is exactly why it has to agree with the
	 * card rather than quietly disagree.
	 */
	background-color: var(--bedi-surface, #ffffff);
	box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0 0 var(--bedi-woo-space-2xs);
	padding: 0;
	color: var(--bedi-woo-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	/* Two clamped lines, so every card's price sits on the same baseline. */
	min-height: calc(2 * 1.35 * 0.9375rem);
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
	color: var(--bedi-woo-accent);
}

.woocommerce ul.products li.product .price {
	/* Pushes the price to the bottom of the link regardless of title length. */
	margin: auto 0 0;
	color: var(--bedi-woo-brand-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price del {
	margin-inline-end: 0.375rem;
	color: var(--bedi-woo-ink);
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 0.7;
}

.woocommerce ul.products li.product .price ins {
	background: none;
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link + .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button {
	width: 100%;
	margin: var(--bedi-woo-space-xs) 0 0;
}

/*
 * The injected "View cart" link keeps this rule ONLY for the no-JS path —
 * section-products.css hides it under `.bedi-js`, and toast.js removes it
 * entirely once the in-button confirmation has run. Without JavaScript the
 * add is a full page load and this anchor is the only thing that says where
 * the cart is, so it still has to look like something.
 */
.woocommerce ul.products li.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	min-height: var(--bedi-woo-tap);
	margin-block-start: var(--bedi-woo-space-2xs);
	color: var(--bedi-woo-accent);
	font-size: 0.875rem;
}

/* ==========================================================================
   8. Sale badge

   Navy rather than the accent, in both colour schemes: white on navy clears
   7:1, while white on a lightened dark-mode accent would not clear 4.5:1.
   ========================================================================== */

.woocommerce span.onsale {
	position: absolute;
	top: var(--bedi-woo-space-xs);
	inset-inline-start: var(--bedi-woo-space-xs);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.75rem;
	min-width: auto;
	margin: 0;
	padding: 0 0.625rem;
	border-radius: var(--bedi-woo-radius);
	background-color: var(--bedi-woo-brand);
	color: var(--bedi-woo-on-brand);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.woocommerce div.product span.onsale {
	top: var(--bedi-woo-space-sm);
	inset-inline-start: var(--bedi-woo-space-sm);
}

/* ==========================================================================
   9. Pagination
   ========================================================================== */

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-woo-space-2xs);
	justify-content: center;
	border: 0;
	margin: 0 0 var(--bedi-woo-space-xl);
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--bedi-woo-tap);
	min-height: var(--bedi-woo-tap);
	padding: 0 0.5rem;
	border: 1px solid var(--bedi-woo-rule);
	border-radius: var(--bedi-woo-radius);
	background-color: var(--bedi-woo-surface);
	color: var(--bedi-woo-ink);
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--bedi-woo-brand);
	background-color: var(--bedi-woo-brand);
	color: var(--bedi-woo-on-brand);
}

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

   Two columns from 900px: gallery left, summary right. Below that everything
   stacks in document order, which is already the correct reading order.

   The gallery element is matched by `.bedi-gallery` (the root element of
   template-parts/product/gallery.php) and by `.woocommerce-product-gallery`
   (WooCommerce's own, which Bedi\Theme\Woo::render_gallery() falls back to when
   our part is missing). Everything else that hangs off
   `woocommerce_after_single_product_summary` — tabs, the specification table,
   upsells, related products — spans both columns via the `> *` rule and is
   auto-placed below row 1.
   ========================================================================== */

.woocommerce div.product {
	position: relative;
	margin: 0 0 var(--bedi-woo-space-xl);
	color: var(--bedi-woo-ink);
}

@media (min-width: 56.25rem) {
	.woocommerce div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--bedi-woo-space-xl);
		row-gap: var(--bedi-woo-space-xl);
		align-items: start;
	}

	.woocommerce div.product > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	/*
	 * Placement only. assets/css/gallery.css owns everything about how the
	 * gallery looks inside its column, and this rule must not reach into it.
	 */
	.woocommerce div.product > .bedi-gallery {
		grid-column: 1;
		grid-row: 1;
	}

	/*
	 * The fallback path, taken when Bedi\Theme\Woo::render_gallery() finds our
	 * template part printed nothing. The float/width reset is defensive: Woo's
	 * layout stylesheet, which floats this element at 48%, is dropped by
	 * Bedi\Theme\Assets, but a site that puts it back must not break the grid.
	 */
	.woocommerce div.product > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
		float: none;
		width: auto;
		margin: 0;
	}

	.woocommerce div.product > .summary,
	.woocommerce div.product > .entry-summary {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		float: none;
		margin: 0;
	}
}

/* ==========================================================================
   11. Single product summary
   ========================================================================== */

.woocommerce div.product .product_title {
	margin: 0 0 var(--bedi-woo-space-xs);
	color: var(--bedi-woo-ink);
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
	line-height: 1.25;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 var(--bedi-woo-space-sm);
	color: var(--bedi-woo-brand-ink);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.woocommerce div.product p.price del {
	margin-inline-end: 0.5rem;
	color: var(--bedi-woo-ink);
	font-size: 1.125rem;
	font-weight: 400;
	opacity: 0.7;
}

.woocommerce div.product p.price ins {
	background: none;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 var(--bedi-woo-space-sm);
	line-height: 1.6;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bedi-woo-space-xs);
	margin: 0 0 var(--bedi-woo-space-sm);
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

/*
 * THE GENERIC QUANTITY FIELD — AND ONLY THE GENERIC ONE.
 *
 * :not(.bedi-stepper) is load-bearing. Every quantity shell in this theme comes
 * from one template, woocommerce/global/quantity-input.php, which adds
 * .bedi-stepper to the SAME element that already carries Woo's .quantity
 * whenever the field is a real, steppable number. So this rule was also
 * matching the product page's stepper input — and beating that component's own
 * sizing, because `.woocommerce .quantity input.qty` is (0,3,1) against the
 * stepper's `.bedi-woo .bedi-stepper .qty` at (0,3,0): one element selector
 * more, and physical `width` outranks the logical `inline-size: 100%` the
 * stepper declares.
 *
 * The visible result was an 80px input sitting in a 58px slot: the number
 * rendered 11px right of centre and the field bled 22px underneath the plus
 * button. The stepper was never broken — it counts, caps and disables exactly
 * as intended — it was being mis-sized from outside.
 *
 * What is left matching here is what this rule was written for: the readonly
 * and hidden shells, which have no stepper of their own and do want a 5rem box.
 */
.woocommerce .quantity:not(.bedi-stepper) input.qty {
	width: 5rem;
	min-height: var(--bedi-woo-tap);
	padding: 0.5rem;
	border: 1px solid var(--bedi-woo-rule);
	border-radius: var(--bedi-woo-radius);
	background-color: var(--bedi-woo-surface);
	color: var(--bedi-woo-ink);
	font-family: inherit;
	font-size: 1rem;
	text-align: center;
}

.woocommerce div.product .product_meta {
	margin: var(--bedi-woo-space-sm) 0 0;
	padding-block-start: var(--bedi-woo-space-sm);
	border-block-start: 1px solid var(--bedi-woo-rule);
	font-size: 0.875rem;
	line-height: 1.7;
}

.woocommerce div.product .product_meta a {
	color: var(--bedi-woo-accent);
}

.woocommerce div.product .stock.in-stock {
	color: var(--bedi-woo-brand-ink);
	font-weight: 600;
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--bedi-woo-ink);
	font-weight: 600;
	opacity: 0.75;
}

/* ==========================================================================
   12. Price tiers

   Rendered by Bedi\Theme\Woo::render_price_tiers() only when bedi_price()
   returned more than one tier, which bedi-core allows solely for users holding
   `bedi_view_wholesale`. Nothing in this stylesheet hides a tier: a CSS rule is
   not an access control, and the gate is bedi-core's alone.
   ========================================================================== */

.bedi-price-tiers {
	margin: 0 0 var(--bedi-woo-space-sm);
	padding: var(--bedi-woo-space-sm);
	border: 1px solid var(--bedi-woo-rule);
	border-radius: var(--bedi-woo-radius);
	background-color: var(--bedi-woo-muted);
	color: var(--bedi-woo-ink);
}

.bedi-price-tiers__title {
	margin: 0 0 var(--bedi-woo-space-xs);
	color: var(--bedi-woo-brand-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bedi-price-tiers__list {
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
}

.bedi-price-tiers__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bedi-woo-space-xs);
	padding-block: var(--bedi-woo-space-2xs);
	border-block-end: 1px solid var(--bedi-woo-rule);
}

.bedi-price-tiers__row:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.bedi-price-tiers__label {
	margin: 0;
	font-weight: 400;
}

.bedi-price-tiers__amount {
	margin: 0;
	color: var(--bedi-woo-brand-ink);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ==========================================================================
   13. Cart, checkout and account

   These three pages had no layout of their own in this theme and no longer get
   one from WooCommerce either: Assets::woocommerce_styles() drops
   `woocommerce-layout` and `woocommerce-smallscreen` before they are
   registered, and assets/css/layout.css carries no WooCommerce selectors at
   all. `woocommerce-general` is KEPT, so table borders, form fields, buttons
   and notices are still styled — what disappeared with those two files is the
   column layout of the checkout, the cart collaterals and the account screen,
   and the small-screen stacking that stops a cart table overflowing a phone.

   Rebuilt here with grid and flex instead of Woo's floats, and mobile-first
   instead of Woo's 768px max-width override. Geometry that woocommerce-general
   still supplies (table padding, cell borders, border-radius) is deliberately
   not restated; only the colours are re-pointed at the theme tokens.
   ========================================================================== */

.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--bedi-woo-rule);
	color: var(--bedi-woo-ink);
}

/*
 * Woo's responsive tables (the cart and the account order list) carry a
 * data-title on every cell, which is what its small-screen stylesheet turned
 * into a per-row label. Below the grid's first breakpoint each row becomes a
 * stack of label/value pairs; at 48rem and up it is a table again. 47.9375rem
 * is 767px, so there is no gap between the two queries.
 */
@media (max-width: 47.9375rem) {
	.woocommerce table.shop_table_responsive thead {
		/* Every heading is repeated per cell by the ::before rule below. */
		display: none;
	}

	.woocommerce table.shop_table_responsive tr {
		display: block;
		margin-block-end: var(--bedi-woo-space-sm);
		border: 1px solid var(--bedi-woo-rule);
		border-radius: var(--bedi-woo-radius);
	}

	.woocommerce table.shop_table_responsive tr td {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--bedi-woo-space-xs);
		text-align: end;
	}

	/*
	 * Attribute-scoped on purpose. The cart's `actions` cell has no data-title,
	 * and an unscoped rule would print an empty label with a stray colon above
	 * the coupon field.
	 */
	.woocommerce table.shop_table_responsive tr td[data-title]::before {
		content: attr(data-title);
		font-weight: 600;
		text-align: start;
	}
}

/* Checkout billing/shipping, and the address pair in the account area. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	float: none;
	width: auto;
}

@media (min-width: 48rem) {
	.woocommerce .col2-set,
	.woocommerce-page .col2-set {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bedi-woo-space-xl);
		row-gap: var(--bedi-woo-space-lg);
	}
}

/*
 * Cart totals and cross-sells. Flex rather than a two-column grid, because the
 * cross-sells block is absent whenever nothing is cross-sold and a grid would
 * strand the totals in the left half on those carts. `margin-inline-start:
 * auto` keeps the totals at the end of the row in both cases.
 */
.woocommerce .cart-collaterals {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--bedi-woo-space-lg);
}

.woocommerce .cart-collaterals > * {
	flex: 1 1 18rem;
	min-width: 0;
	float: none;
	width: auto;
}

.woocommerce .cart-collaterals .cart_totals {
	margin-inline-start: auto;
}

/*
 * ACCOUNT SCREEN — only the float reset stays here.
 *
 * This file used to carry a whole tab-row treatment for the account
 * navigation: a flex row of bordered pills with a dark-navy active state. That
 * predates assets/css/account.css, which now owns the customer area and renders
 * the navigation as a proper vertical rail with icons, counts and a tinted
 * active row.
 *
 * Both were applying. woo.css's `.woocommerce-account
 * .woocommerce-MyAccount-navigation li a` is (0,3,1) and account.css's
 * `.bedi-accnav__link` is (0,1,0), so the OLD rules won every conflict: each
 * item got its own border and radius, and the active one got the navy fill —
 * which is why the rail read as a row of broken buttons rather than a menu.
 *
 * The float reset is all that is left, because it is a fix for WooCommerce's
 * own 30%/68% floated layout and belongs with the rest of the core overrides.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* ==========================================================================
   14. Forced colours

   In a forced-colours mode the browser replaces our palette wholesale, which
   flattens the filled button and the sale badge into the page background. A
   currentColor border gives each of them an edge again.
   ========================================================================== */

@media (forced-colors: active) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce span.onsale,
	.woocommerce nav.woocommerce-pagination ul li a,
	.woocommerce nav.woocommerce-pagination ul li span {
		border: 1px solid currentColor;
	}

	.bedi-woo a:focus-visible,
	.bedi-woo button:focus-visible,
	.woocommerce a:focus-visible,
	.woocommerce button:focus-visible {
		outline: 3px solid currentColor;
	}
}

/* =========================================================================
 * THE MEASURE ESCAPE
 *
 * The cart, the checkout and the whole customer area are WordPress PAGES, so
 * they render through page.php — inside `.bedi-entry--singular
 * .bedi-entry__content`, which layout.css caps at `--bedi-measure`. That cap is
 * exactly right for an article and exactly wrong for these: it is why the login
 * screen's two columns had 571px to share and the benefits panel wrapped one
 * Georgian letter per line.
 *
 * These four surfaces are applications that happen to live at a page URL. They
 * take the container's full width and manage their own internal measures —
 * `.bedi-auth` caps itself at 980px, the account grid at 260 + 1fr.
 *
 * SPECIFICITY: layout.css's rule is (0,2,0) and this is (0,3,0), so it wins
 * outright rather than on source order — which matters, because `bedi-layout`
 * is a declared dependency of this file and therefore always printed BEFORE
 * it, and a future reordering must not be able to silently undo this.
 *
 * `max-width`, not `max-inline-size`: it has to override the same property
 * layout.css set, and the two are different declarations to the cascade.
 * ====================================================================== */

.woocommerce-account .bedi-entry--singular .bedi-entry__content,
.woocommerce-cart .bedi-entry--singular .bedi-entry__content,
.woocommerce-checkout .bedi-entry--singular .bedi-entry__content {
	max-width: none;
}

/* =========================================================================
 * THE ARCHIVE HEADING ON A PHONE
 *
 * AT THE END OF THE FILE ON PURPOSE. These override `.woocommerce
 * .woocommerce-products-header__title` and `.woocommerce
 * .woocommerce-products-header` from section 10, at the SAME specificity —
 * so the only thing that decides the winner is source order. Written higher up
 * (which is where they started) they parsed, matched, and lost to the base
 * rule two hundred lines below them: the title stayed 32px and the header kept
 * a zero top margin.
 *
 * The archive title and the product title are deliberately one object seen
 * twice — section 10 says so and matches them declaration for declaration — so
 * the phone sizing has to match too, or that stops being true at the width
 * most people actually use.
 * ====================================================================== */

@media (max-width: 47.9375em) {
	.woocommerce .woocommerce-products-header {
		margin-block-start: var(--bedi-space-4);
	}

	.woocommerce .woocommerce-products-header__title {
		font-size: 16px;
		line-height: 1.35;
	}

	/*
	 * And the trail's own bottom margin comes down with it. At
	 * --bedi-woo-space-lg (32px) the gap between the breadcrumb and the title
	 * was twice the 16px the product page uses, so the two pages disagreed
	 * about the same piece of spacing.
	 */
	.woocommerce .bedi-breadcrumb {
		margin-block-end: var(--bedi-space-4);
	}
}