/*
 * WooCommerce, on the theme's own grid.
 *
 * inc/woocommerce.php removes woocommerce-layout.css and woocommerce-smallscreen
 * .css before this file loads. That stylesheet is written for floats —
 * `ul.products li.product { width: 22.05%; float: left }` — and it outranks a
 * two-class grid rule, which is why a grid put on top of it collapses. With it
 * gone, this file can be a plain grid and the card is the one inc/woocommerce.php
 * assembles from hooks.
 *
 * Note the specificity of the two product-list rules: the archive grid here is
 * `ul.products` (0,1,1) on purpose, so the arrivals rail's
 * `.va-rail ul.products` (0,2,1) in base.css wins whichever file loads last.
 */

.va-shop {
	padding-block: var(--va-section-sm) var(--va-section);
}

/*
 * The result count and the sort control, centred between the page head's rule
 * above and the toolbar's own rule below.
 *
 * The two gaps are not equal by default and cannot be: the row above the text is
 * the head's `--va-gap-head`, the row below is this element's own padding. Setting
 * both paddings the same leaves the text sitting high, so the bottom padding is
 * the head gap plus the top padding — which is what "equal space above and
 * below" actually means once something else is supplying the top one.
 */
.va-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--va-space-3) var(--va-space-4);
	margin-bottom: var(--va-section-sm);
	padding-block: var(--va-space-4) calc(var(--va-gap-head) + var(--va-space-4));
	border-bottom: 1px solid var(--va-line);
}

/*
 * Always printed, always empty on a fresh page load. Left inline it takes the
 * left end of a space-between row and pushes the result count into the middle of
 * the toolbar, where it reads as a heading for nothing. A real notice still gets
 * the full row, above the count and the sort control.
 */
.va-shop__toolbar .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.va-shop__toolbar .woocommerce-notices-wrapper:empty {
	display: none;
}

.va-shop__toolbar .woocommerce-result-count,
.va-shop__toolbar .woocommerce-ordering {
	margin: 0;
	float: none;
}

.va-shop__toolbar .woocommerce-result-count,
.va-shop__toolbar .woocommerce-ordering select {
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
}

.va-shop__toolbar .woocommerce-ordering select {
	width: auto;
	padding: 0.55em 0.9em;
	background: var(--va-surface);
	border-color: var(--va-line);
	border-radius: var(--va-radius);
}

/* -------------------------------------------------------------------------
 * WooCommerce colour tokens
 *
 * WooCommerce moved its palette into custom properties on :root. Mapping the
 * four this theme touches stops the plugin's defaults leaking into places the
 * theme never styled. Declared at the same specificity as the plugin's own
 * :root, and this file is enqueued after it, so source order decides.
 * ------------------------------------------------------------------------- */

:root {
	--wc-subtext: var(--va-muted);
	--wc-secondary-text: var(--va-ink-soft);
	--wc-highlight: var(--va-accent-2);
	--wc-highligh-text: var(--va-surface);
}

/*
 * WooCommerce paints the loop and summary prices with its own dark olive,
 * #958e09, through
 *
 *   .woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price
 *
 * which is a (0,3,2) selector and beats anything written at class level. Both
 * prices are therefore restated here at a weight that wins: the archive price
 * was landing at 3.15:1 on this theme's near-white card, and the single-product
 * price only avoided an axe failure by being big enough to qualify as large
 * text, which is not a thing to leave to luck.
 */
.woocommerce ul.products li.product .va-card__price .price,
.woocommerce div.product .summary .price,
.woocommerce div.product .summary span.price {
	color: var(--va-ink);
}

/* -------------------------------------------------------------------------
   The account
   ------------------------------------------------------------------------- */

/*
 * Logged out: a brand panel beside the sign-in, not a bare login box floating in
 * white space.
 *
 * `woocommerce_before_customer_login_form` fires *before* WooCommerce's own
 * `#customer_login` wrapper, so the theme's panel and tab bar are siblings of it,
 * not children — the grid goes on the `.woocommerce` container and places the
 * three: panel left spanning both rows, tabs and card on the right.
 *
 * `:not(.logged-in)` is WordPress's own body class for the signed-out state, so
 * none of this reaches the signed-in dashboard, whose layout is the nav rail and
 * content column further down.
 */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	grid-template-rows: auto auto;
	gap: var(--va-space-2) var(--va-section-sm);
	align-items: stretch;
}

/*
 * WooCommerce always prints this wrapper, empty or not, and an empty div is a
 * grid item like any other — it takes the first free cell and pushes everything
 * after it down the page by a whole row. Same family of bug as the `ul.products`
 * clearfix: a container that assumed floats, handed a grid.
 */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-account:not(.logged-in) .va-auth__aside {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--va-space-5);
	padding: var(--va-space-5);
	background: var(--va-ink);
	border-radius: var(--va-radius);
	color: var(--va-surface);
}

/*
 * The panel's slack goes under the list, not between the label and the title: a
 * dark panel with a gap in the middle reads as an empty box, the same slack with
 * the label, title and list at the top reads as a panel that starts where it
 * should.
 */
.woocommerce-account:not(.logged-in) .va-auth__meta {
	margin-block-start: auto;
}

.woocommerce-account:not(.logged-in) .va-auth__tabs {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

.woocommerce-account:not(.logged-in) #customer_login {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	padding: var(--va-space-5);
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
}

/* WooCommerce floats these at 48%; they are two stacked panels here. */
.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2 {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

/*
 * With JavaScript, one form at a time and the card's own headings are the tabs,
 * so the plugin's "Login" / "Register" headings are redundant. Without it, both
 * forms show and both headings stay — the only arrangement in which nothing is
 * out of reach.
 */
.va-auth--tabbed #customer_login > .u-column1,
.va-auth--tabbed #customer_login > .u-column2 {
	display: none;
}

.va-auth--tabbed #customer_login > .u-column1.is-active,
.va-auth--tabbed #customer_login > .u-column2.is-active {
	display: block;
}

.va-auth--tabbed #customer_login > .u-column1 > h2,
.va-auth--tabbed #customer_login > .u-column2 > h2 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.va-auth__tabs {
	display: flex;
	gap: var(--va-space-2);
}

.va-auth__tab {
	padding: 0.75em 1.1em;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--va-radius);
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--va-speed) var(--va-ease), border-color var(--va-speed) var(--va-ease), background-color var(--va-speed) var(--va-ease);
}

.va-auth__tab:hover {
	color: var(--va-ink);
}

.va-auth__tab.is-active {
	background: var(--va-ink);
	border-color: var(--va-ink);
	color: var(--va-surface);
}

.va-auth__eyebrow {
	margin: 0 0 var(--va-space-3);
	color: var(--va-accent);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-auth__title {
	margin: 0 0 var(--va-space-4);
	color: var(--va-surface);
	font-family: var(--va-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.va-auth__list {
	margin: 0 0 var(--va-space-4);
	padding: 0;
	list-style: none;
	color: color-mix(in srgb, var(--va-surface) 78%, transparent);
	font-size: var(--va-fs-small);
	line-height: 1.7;
}

.va-auth__list li {
	padding-inline-start: 1.1em;
	position: relative;
}

.va-auth__list li::before {
	content: "—";
	position: absolute;
	inset-inline-start: 0;
	color: var(--va-accent);
}

.va-auth__meta {
	margin: 0;
	padding-top: var(--va-space-3);
	border-top: 1px solid color-mix(in srgb, var(--va-surface) 24%, transparent);
	color: color-mix(in srgb, var(--va-surface) 64%, transparent);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
}

.woocommerce-account #customer_login h2 {
	margin: 0 0 var(--va-space-4);
	padding-bottom: var(--va-space-3);
	border-bottom: 1px solid var(--va-line);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
	color: var(--va-ink);
}

/* The account form fields, on the theme's measures. WooCommerce's own are fine
   but inherit a browser default font size and a border that matches nothing. */
.woocommerce-account .woocommerce-form-row {
	margin: 0 0 var(--va-space-4);
}

.woocommerce-account .woocommerce-form-row label {
	display: block;
	margin-bottom: 6px;
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-form-row .required {
	color: var(--va-accent);
}

.woocommerce-account .input-text,
.woocommerce-account select.woocommerce-select {
	width: 100%;
	padding: 0.7em 0.85em;
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
	color: var(--va-ink);
	font-family: var(--va-font-sans);
	font-size: var(--va-fs-small);
}

/*
 * A focus ring, not just a border-colour change. Removing the outline and
 * darkening the border by one step is a focus indicator a person can barely see
 * and axe cannot see at all, and it reports the field as unreachable by
 * keyboard — which on a sign-in form is the difference between a style and a
 * bug.
 */
.woocommerce-account .input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	border-color: var(--va-ink);
	outline: 2px solid var(--va-ink);
	outline-offset: -1px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.woocommerce-account .lost_password {
	margin: var(--va-space-4) 0 0;
	font-size: var(--va-fs-small);
}

.woocommerce-account .woocommerce-privacy-policy-text {
	color: var(--va-muted);
	font-size: var(--va-fs-small);
	line-height: 1.6;
}

/*
 * Logged in: the dashboard is a nav rail and a content column, which
 * WooCommerce ships as a float and a percentage width. On the theme's grid the
 * rail is fixed and the content takes the rest, which is what keeps an orders
 * table from being squeezed into the remaining 78%.
 */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: var(--va-space-5) var(--va-section);
	align-items: start;
}

/*
 * Placed explicitly, because it is not: WooCommerce always prints a notices
 * wrapper first, and the moment it holds a message — "your password has been
 * reset", the resend link — auto-placement puts that wrapper in the nav's
 * column, the nav in the content's, and the content on the next row. The result
 * is a nav bar as wide as the page and a form squeezed into 220px, which is
 * exactly what a customer sees after registering.
 */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 2;
	width: auto;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	width: auto;
	float: none;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--va-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
	border-top: 1px solid var(--va-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85em 0.25em;
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--va-speed) var(--va-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	color: var(--va-ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	padding-inline-start: 0.9em;
	border-inline-start: 2px solid var(--va-accent);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--va-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.woocommerce-account .woocommerce-MyAccount-content p {
	color: var(--va-ink-soft);
	line-height: 1.65;
}

/* Orders, downloads and addresses are the dashboard's real content, and
   WooCommerce's table is the one place a hairline grid belongs. */
.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
	margin: 0 0 var(--va-space-4);
	border: 0;
	border-collapse: collapse;
	font-size: var(--va-fs-small);
}

.woocommerce-account .woocommerce-MyAccount-content th {
	padding: 0 0 var(--va-space-2);
	border: 0;
	border-bottom: 1px solid var(--va-ink);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	font-weight: 500;
	letter-spacing: var(--va-track);
	text-align: start;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-content td {
	padding: var(--va-space-3) 0;
	border: 0;
	border-bottom: 1px solid var(--va-line);
	color: var(--va-ink-soft);
	vertical-align: middle;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper,
.woocommerce-account fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-downloads-file,
.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--va-ink);
	text-decoration: underline;
	text-decoration-color: var(--va-ink-30);
	text-underline-offset: 3px;
}

@media (max-width: 1024px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account:not(.logged-in) .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}

	.woocommerce-account:not(.logged-in) .va-auth__aside,
	.woocommerce-account:not(.logged-in) .va-auth__tabs,
	.woocommerce-account:not(.logged-in) #customer_login {
		grid-column: 1;
		grid-row: auto;
	}
}

/* -------------------------------------------------------------------------
 * WooCommerce blocks
 *
 * WooCommerce 11 renders the cart and the checkout as blocks, and the empty-cart
 * block ships a "New in store" product grid built on `wc-block-grid` markup. That
 * markup is not `ul.products li.product`, so none of the card rules above reach
 * it — the page gets WooCommerce's illustration, WordPress's dotted separator
 * and a different card, one block away from the theme's own.
 *
 * Same card, same plate ratio, same mono labels. The empty-cart block keeps the
 * theme's typography and loses the sad face.
 * ------------------------------------------------------------------------- */

/*
 * The two block pages are sized against `--wp--style--global--wide-size`, which
 * WooCommerce prints inline in the head at 1100px — so the block cannot be
 * widened by declaring the variable from a stylesheet, and the column sits
 * hard against the left edge of a 1376px page. The theme's container is the
 * width every other page in this theme uses, so the container is named directly.
 */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wp--style--global--content-size: 740px;
}

.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--va-section-sm) var(--va-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce sets the block grid's columns from a per-block minimum width and
 * prints that rule through the blocks stylesheet, which is loaded after this one.
 * Matching the selector is not enough — hence !important, the same reason the
 * archive loop's widths carry it. Four columns in this theme's container; two on
 * a tablet, set in the media query at the foot of this file.
 */
.wc-block-grid__products,
.wc-block-grid.has-4-columns .wc-block-grid__products,
.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-4-columns .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.wc-block-grid__product,
.wc-block-grid.has-4-columns .wc-block-grid__product,
.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-4-columns .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
}

.wc-block-grid__product-image,
.wc-block-grid.has-4-columns .wc-block-grid__product-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	width: 100%;
	margin-bottom: var(--va-space-3);
	background: var(--va-bg-soft);
	border-radius: var(--va-radius);
}

.wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wc-block-grid__product-title {
	margin: 0;
	font-family: var(--va-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.wc-block-grid__product-title a {
	color: var(--va-ink);
	text-decoration: none;
}

.wc-block-grid__product-price {
	margin: var(--va-space-1) 0 var(--va-space-3);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-small);
	letter-spacing: var(--va-track);
}

.wc-block-grid__product-price del {
	color: var(--va-muted);
	text-decoration-thickness: 1px;
}

.wc-block-components-product-button,
.wc-block-grid__product .wp-block-button {
	margin: 0;
}

.wc-block-grid__product .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	padding: 0.6em 0.95em;
	background: none;
	border: 1px solid var(--va-ink-30);
	border-radius: var(--va-radius);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	transition: background-color var(--va-speed) var(--va-ease), border-color var(--va-speed) var(--va-ease), color var(--va-speed) var(--va-ease);
}

.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--va-ink);
	border-color: var(--va-ink);
	color: var(--va-surface);
}

/* The empty-cart block. WooCommerce's illustration is a 100px sad face drawn as
   a background image on the heading's ::before; the theme's answer to an empty
   cart is a line of type, so the illustration is removed rather than restyled.
   The `body` prefix is not decoration — the plugin writes
   `body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before`, which is
   one class heavier than a rule without it.
   Left-aligned, because the page header above it, the "new in store" label below
   it and every product grid on the site are left-aligned, and one centred
   heading in the middle of them reads as a layout accident. */
.wp-block-woocommerce-empty-cart-block {
	margin: 0 0 var(--va-section);
	text-align: start;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon,
body .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
body .wc-block-cart__empty-cart__title.with-empty-cart-icon {
	max-width: 34em;
	margin: 0 0 var(--va-space-4);
	background: none;
	font-family: var(--va-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: start;
}

body .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before,
body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
	content: none;
	display: none;
}

/* WordPress's dotted separator, in the theme's hairline. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	width: 64px;
	height: 1px;
	margin: var(--va-space-5) 0;
	background: var(--va-line);
	border: 0;
	opacity: 1;
}

.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	margin: 0 0 var(--va-section-sm);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--va-track-wide);
	text-align: start;
	text-transform: uppercase;
	color: var(--va-muted);
}

@media (max-width: 1024px) {
	.wc-block-grid__products,
	.wc-block-grid.has-4-columns .wc-block-grid__products,
	.wp-block-woocommerce-empty-cart-block .wc-block-grid.has-4-columns .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* The archive grid. Low specificity on purpose — see the note at the top. */
ul.products {
	display: grid;
	gap: var(--va-section-sm) var(--va-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce's own stylesheet puts `::before` and `::after` on this list —
 * `content: " "; display: table` — as a float clearfix. The moment the list
 * becomes a grid or a flex container those two pseudo-elements are items too,
 * so the first product is pushed into the second cell and every row after it
 * reads one place off. That is a layout bug that looks like a design decision,
 * which is why it is killed here rather than worked around.
 *
 * The selectors have to be the plugin's own, to the letter: it writes
 * `.woocommerce ul.products::before`, and a bare `ul.products::before` loses to
 * it on specificity no matter which file loads last.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/*
 * The add-to-bag control under a card.
 *
 * Three classes, not two: the `[products]` shortcode wraps its output in
 * `<div class="woocommerce">`, and the cart-page rule further down this file is
 * a two-class selector that would otherwise win on source order and paint every
 * card button as a solid ink block.
 */
.woocommerce .va-card .va-card__actions .button,
.woocommerce .va-card .va-card__actions .added_to_cart,
.va-card__actions .button,
.va-card__actions .added_to_cart {
	display: inline-flex;
	align-items: center;
	padding: 0.6em 1em;
	background: none;
	border: 1px solid var(--va-ink-30);
	border-radius: var(--va-radius);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--va-speed) var(--va-ease), color var(--va-speed) var(--va-ease);
}

.woocommerce .va-card .va-card__actions .button:hover,
.va-card__actions .button:hover {
	background: var(--va-ink);
	border-color: var(--va-ink);
	color: var(--va-surface);
}

.va-card__actions .loading {
	opacity: 0.6;
}

.woocommerce .va-card .va-card__actions .added_to_cart,
.va-card__actions .added_to_cart {
	border-color: transparent;
	color: var(--va-muted);
	padding-inline: 0.4em;
}

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

.single-product .va-wrap {
	padding-block: var(--va-section-sm) var(--va-section);
}

.single-product .va-crumbs {
	margin-bottom: var(--va-space-5);
}

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 72px);
	align-items: start;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.single-product .woocommerce-product-gallery {
	background: var(--va-bg-soft);
	border-radius: var(--va-radius);
	overflow: hidden;
}

.single-product .woocommerce-product-gallery__image img {
	width: 100%;
}

.single-product .flex-control-thumbs {
	display: flex;
	gap: var(--va-space-2);
	margin: var(--va-space-2) 0 0;
	padding: 0 var(--va-space-2) var(--va-space-2);
	list-style: none;
}

.single-product .flex-control-thumbs li {
	width: 72px;
}

.single-product .flex-control-thumbs img {
	border: 1px solid transparent;
	border-radius: var(--va-radius);
	cursor: pointer;
}

.single-product .flex-control-thumbs img.flex-active {
	border-color: var(--va-ink);
}

.summary .product_title {
	margin: 0 0 0.6em;
	font-size: var(--va-fs-title);
}

.summary .price {
	display: block;
	margin: 0 0 var(--va-space-4);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: 1.0625rem;
	letter-spacing: var(--va-track);
}

.summary .woocommerce-product-details__short-description {
	max-width: 46ch;
	margin-bottom: var(--va-space-5);
	color: var(--va-ink-soft);
}

.summary .stock {
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-2);
	margin-bottom: var(--va-space-5);
}

.single-product .quantity input {
	width: 76px;
	padding: 0.75em;
	text-align: center;
	font-family: var(--va-font-mono);
}

/*
 * WooCommerce paints `.button.alt` its own purple for the single add-to-cart,
 * and `.woocommerce button.button.alt` is a three-class selector — so the theme
 * has to name the same element with equal or greater weight or every product
 * page has one brand-coloured button in the middle of it.
 */
.single-product div.product form.cart button.single_add_to_cart_button,
.woocommerce .single-product div.product button.single_add_to_cart_button,
.single-product .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.8em 1.3em;
	background: var(--va-ink);
	border: 1px solid var(--va-ink);
	border-radius: var(--va-radius);
	color: var(--va-surface);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--va-speed) var(--va-ease), border-color var(--va-speed) var(--va-ease);
}

.woocommerce .single-product div.product button.single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover {
	background: var(--va-accent-2);
	border-color: var(--va-accent-2);
	color: var(--va-surface);
}

.product_meta {
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	color: var(--va-muted);
}

.product_meta a {
	color: var(--va-muted);
	text-decoration: none;
}

.product_meta a:hover {
	color: var(--va-ink);
}

.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--va-section-sm);
	padding-top: var(--va-section-sm);
	border-top: 1px solid var(--va-line);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-5);
	margin: 0 0 var(--va-space-5);
	padding: 0;
	list-style: none;
}

.woocommerce-tabs ul.tabs a {
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--va-muted);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs a:hover {
	color: var(--va-ink);
}

.woocommerce-tabs .panel > h2:first-child {
	display: none;
}

.woocommerce-tabs .shop_attributes {
	width: 100%;
	max-width: 620px;
	border-collapse: collapse;
}

.woocommerce-tabs .shop_attributes th,
.woocommerce-tabs .shop_attributes td {
	padding: 10px 0;
	border-bottom: 1px solid var(--va-line);
	text-align: start;
	font-size: var(--va-fs-small);
}

.woocommerce-tabs .shop_attributes th {
	width: 34%;
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.related.products,
.upsells.products {
	grid-column: 1 / -1;
	margin-top: var(--va-section);
}

.related.products > h2,
.upsells.products > h2 {
	margin-bottom: var(--va-section-sm);
}

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

/*
 * No vertical padding of their own. These pages used to pad their own wrapper,
 * which doubled the page head band's: 43px from the wrapper on top of 32px from
 * the band, twice, was the two hundred pixels of nothing at the top of the
 * account and cart pages. The band owns the rhythm now.
 */

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--va-line);
	text-align: start;
}

.woocommerce table.shop_table th {
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	color: var(--va-muted);
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	padding: var(--va-space-5);
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--va-gutter);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 11px 13px;
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
}

.woocommerce form .form-row label {
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	color: var(--va-muted);
}

.woocommerce ul.order_details {
	display: grid;
	gap: var(--va-space-3);
	padding: 0;
	list-style: none;
}

/*
 * Notices. WooCommerce prints its own icon in a `::before` — an icon-font glyph
 * that, with the plugin's icon font not loaded on a classic theme, renders as a
 * boxed placeholder character sitting on top of the message. The theme's notice
 * is a rule and a tint, so the glyph goes.
 *
 * The row is a flex line because every notice in this shop is "one sentence and
 * one button": the sentence on the left, the button on the right, rather than a
 * button floating in the middle of a wide empty box.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--va-space-3) var(--va-space-4);
	margin: 0 0 var(--va-space-5);
	padding: 14px 18px;
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-inline-start: 3px solid var(--va-accent);
	border-radius: var(--va-radius);
	list-style: none;
	font-size: var(--va-fs-small);
	color: var(--va-ink-soft);
}

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

.woocommerce-error {
	border-inline-start-color: var(--va-ink);
}

.woocommerce-error li {
	margin: 0;
}

/* The button in a notice is the same capsule as everywhere else, and it must
   not take the whole row with it. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.55em 0.95em;
	font-size: var(--va-fs-mono);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.2em;
	background: var(--va-ink);
	border: 1px solid var(--va-ink);
	border-radius: var(--va-radius);
	color: var(--va-surface);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--va-speed) var(--va-ease), border-color var(--va-speed) var(--va-ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--va-accent-2);
	border-color: var(--va-accent-2);
	color: var(--va-surface);
}

/*
 * WooCommerce's `.alt` buttons — place order, update cart, proceed to checkout —
 * default to the plugin's own purple. Same selectors, same weight, and this file
 * is enqueued after the plugin's, so brand ink wins on source order.
 */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--va-ink);
	border-color: var(--va-ink);
	color: var(--va-surface);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--va-accent-2);
	border-color: var(--va-accent-2);
	color: var(--va-surface);
}

/* The cart page's coupon row and the checkout's place-order footer. */
.woocommerce .coupon {
	display: flex;
	gap: var(--va-space-2);
}

.woocommerce .coupon input[type="text"] {
	width: auto;
}

.woocommerce #payment ul.payment_methods {
	padding: 0;
	list-style: none;
}

.woocommerce #payment ul.payment_methods li + li {
	margin-top: var(--va-space-2);
}

.woocommerce-checkout #payment {
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
}

/*
 * The forms themselves are plain. They used to be their own cards, which was
 * right when they were the only thing on the page; now they sit inside the
 * `#customer_login` card, and a box inside a box is the one detail that makes an
 * otherwise tidy form look pasted together.
 *
 * The weight is not paranoia: WooCommerce writes `.woocommerce form.login` with a
 * purple-grey border, and the Elementor kit that the account page also loads
 * writes its own `form` rule later still. A two-class rule loses to both.
 */
.woocommerce-account #customer_login form.woocommerce-form-login,
.woocommerce-account #customer_login form.woocommerce-form-register {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: var(--va-space-4);
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--va-section-sm);
	align-items: start;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	margin-top: 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	text-decoration: none;
	font-size: var(--va-fs-small);
	color: var(--va-muted);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	color: var(--va-ink);
}

/*
 * "Lost your password?" sits alone under the login form at body size, which is
 * a 19px-tall target. Padding brings it to the 24px minimum without making the
 * link look like a button.
 */
.woocommerce-account .woocommerce-LostPassword a {
	display: inline-block;
	padding-block: 4px;
}

/* Shop filters widget area, when it is populated. */
.va-shop__filters {
	margin-bottom: var(--va-section-sm);
}

@media (max-width: 1024px) {
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	ul.products[class*="columns-"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout .col2-set,
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}
}