/**
 * WooCommerce surfaces, restyled to the Soumm system.
 *
 * Woo emits its own class names, so this file is the one place where the
 * theme selects on foreign classes. Everything is scoped under .s-woo or a
 * woocommerce body class so it cannot leak into theme components.
 */

/* ====================================================================== */
/*  Shell                                                                 */
/* ====================================================================== */
.s-woo {
	padding-block: calc(var(--soumm-section-y-sm) + var(--soumm-header-h)) var(--soumm-section-y);
}

:is(.woocommerce, .woocommerce-page) .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: var(--soumm-ls-nav);
	text-transform: uppercase;
	color: var(--soumm-muted);
	margin-bottom: var(--soumm-col-gap);
}

/* ====================================================================== */
/*  Notices                                                               */
/* ====================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	background: var(--soumm-surface-alt);
	border: 1px solid var(--soumm-line);
	border-left: 2px solid var(--soumm-brass);
	padding: 18px 22px;
	margin-bottom: 26px;
	font-size: var(--soumm-fs-small);
	color: var(--soumm-ink);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.woocommerce-error {
	border-left-color: #9A3B2F;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/* ====================================================================== */
/*
 * Scope note: cart, checkout and account pages get `woocommerce-page` on the
 * body but NOT `woocommerce` -- only shop and product pages get both. Every
 * rule here was written as `.woocommerce ...`, so none of it reached the cart
 * or the checkout and WooCommerce's own purple showed through. `:is()` carries
 * the specificity of its most specific argument, so this matches exactly as
 * before everywhere it already worked.
 */
/*  Buttons — Woo emits .button everywhere                                */
/* ====================================================================== */
:is(.woocommerce, .woocommerce-page) .button,
:is(.woocommerce, .woocommerce-page) button.button,
:is(.woocommerce, .woocommerce-page) input.button,
:is(.woocommerce, .woocommerce-page) a.button,
:is(.woocommerce, .woocommerce-page) #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--soumm-ink);
	color: var(--soumm-on-ink);
	font-size: var(--soumm-fs-btn);
	font-weight: var(--soumm-fw-btn);
	letter-spacing: var(--soumm-ls-nav);
	text-transform: uppercase;
	padding: 18px 34px;
	border: 1px solid var(--soumm-ink);
	border-radius: var(--soumm-radius-pill);
	line-height: 1;
	transition: background var(--soumm-dur) var(--soumm-ease),
		border-color var(--soumm-dur) var(--soumm-ease);
}

/* ====================================================================== */
/*  Cart form actions                                                     */
/* ====================================================================== */
/*
 * The design keeps one filled pill per view. On the cart that is Proceed to
 * checkout; "Apply coupon" and "Update bag" are utilities beside it and were
 * rendering as identical ink pills, so three controls competed as the primary
 * action. Woo also disables "Update bag" until a quantity changes, and a
 * filled pill at 45% opacity read as a broken grey blob rather than a resting
 * state.
 *
 * They now take the secondary treatment the rest of the theme uses for Share,
 * Save and Download the paper: an outline pill that turns brass.
 *
 * Scoped through `td.actions` deliberately. Woo styles the disabled state with
 * `.woocommerce input.button:disabled[disabled]`, which carries the same
 * specificity as a plainer selector here and sets padding of its own -- that
 * is why "Update bag" kept Woo's 0.618em/1em while "Apply coupon", identical
 * but enabled, took the design's. This chain outranks it in both states.
 */
:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions button[name="apply_coupon"],
:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions button[name="update_cart"] {
	background: none;
	border: 1px solid #DDD5C8;
	border-radius: var(--soumm-radius-pill);
	color: var(--soumm-ink);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 12px 22px;
	line-height: 1;
	opacity: 1;
	transition: border-color 400ms ease, color 400ms ease;
}

:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions button[name="apply_coupon"]:hover,
:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions button[name="update_cart"]:hover:not(:disabled) {
	background: none;
	border-color: var(--soumm-brass);
	color: var(--soumm-brass);
}

/*
 * The coupon field. Woo still ships `.coupon input { width: 80px }`, which is
 * too narrow to read a code back, and because the input sits outside a
 * `.form-row` it missed the theme's field styling entirely. The row is laid out
 * as flex so the field and its button align on one baseline and the field can
 * take the space the actions cell already has.
 */
/* The actions cell holds one flex row (see cart.php). The cell itself must
 * stay `display: table-cell` -- making it flex drops it out of the table
 * layout algorithm and collapses the product column. */
:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions .soumm-cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions .coupon {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	float: none;
	margin: 0;
}

:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions button[name="update_cart"] {
	float: none;
	margin-left: auto;
}

:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions .coupon input#coupon_code,
:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions .coupon input.input-text {
	flex: 1 1 260px;
	width: auto;
	min-width: 220px;
	max-width: 340px;
	background: var(--soumm-page);
	border: 1px solid var(--soumm-line);
	border-radius: 0;
	padding: 15px 18px;
	height: auto;
	font-size: var(--soumm-fs-small);
	color: var(--soumm-ink);
}

:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions .coupon input#coupon_code:focus {
	border-color: var(--soumm-ink);
	outline: none;
}

/* Nothing to update yet: a quiet outline, not a filled shape at half strength.
 * The base rule above already matches a disabled button, so this only has to
 * restate what differs -- and being one class more specific, it wins cleanly. */
:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions button[name="update_cart"]:disabled,
:is(.woocommerce, .woocommerce-page) .woocommerce-cart-form td.actions button[name="update_cart"].disabled {
	border: 1px solid var(--soumm-line);
	/* Woo's `input.button:disabled[disabled]` sets `color: inherit` and holds
	 * the property at equal specificity, so this has to be forced. */
	color: var(--soumm-muted) !important;
	cursor: default;
}

/* ====================================================================== */
/*  My account                                                            */
/* ====================================================================== */
/*
 * Cart and checkout each open their own section; my account has no theme
 * template to put one in -- Woo renders login, dashboard, orders, addresses
 * and account details itself -- so the container goes here instead. Without it
 * the page ran edge to edge with no top padding and the login field stretched
 * to 1383px.
 */
.woocommerce-account main > .woocommerce {
	padding: clamp(100px, 12vw, 170px) clamp(20px, 4vw, 72px) clamp(70px, 9vw, 120px);
	max-width: calc(1580px + 2 * clamp(20px, 4vw, 72px));
	margin-inline: auto;
}

/* Woo titles each screen with an h2; give it the weight the design gives a
 * page heading. */
.woocommerce-account main > .woocommerce > h2 {
	font-weight: 400;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.014em;
	color: var(--soumm-ink);
	margin: 0 0 clamp(30px, 4vw, 48px);
}

/* Signing in is a standalone task -- it should not span the full width. */
.woocommerce-account main > .woocommerce form.woocommerce-form-login,
.woocommerce-account main > .woocommerce form.woocommerce-ResetPassword {
	max-width: 520px;
	border: 1px solid var(--soumm-line);
	padding: clamp(26px, 3vw, 40px);
}

.woocommerce-account main > .woocommerce form.woocommerce-form-login .form-row {
	margin-bottom: 18px;
}

/* ====================================================================== */
/*  Checkout columns                                                      */
/* ====================================================================== */
/*
 * Woo's `.col2-set` puts billing and shipping side by side at 48% each. This
 * checkout splits them across its own steps instead, so `.col-1` had a column
 * to itself and still took 48% of it -- half the panel sat empty and the name
 * fields, 48% of that again, came out 161px wide inside a 722px column.
 */
:is(.woocommerce, .woocommerce-page) form.checkout .col2-set,
:is(.woocommerce, .woocommerce-page) form.checkout .col2-set .col-1,
:is(.woocommerce, .woocommerce-page) form.checkout .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
}

/* Half-width pairs (first/last name) should share the row properly. */
:is(.woocommerce, .woocommerce-page) form.checkout .form-row-first,
:is(.woocommerce, .woocommerce-page) form.checkout .form-row-last {
	float: none;
	width: calc(50% - 9px);
	display: inline-flex;
	vertical-align: top;
}

:is(.woocommerce, .woocommerce-page) form.checkout .form-row-first {
	margin-right: 14px;
}

/* Woo swaps the native select for select2; it has to fill the row like any
 * other field or the state box collapses to a sliver. */
:is(.woocommerce, .woocommerce-page) form.checkout .select2-container {
	width: 100% !important;
}

/* ====================================================================== */
/*  Cart totals panel                                                     */
/* ====================================================================== */
/*
 * Woo lays the collaterals out as its own two columns -- cross-sells on the
 * left, `.cart_totals` floated right at 48%. The design puts the totals alone
 * in a single sticky panel, so that 48% squeezed them to 130px while the table
 * inside still wanted 257px. It burst 85px out of the panel and pushed the
 * document 35px wider than the viewport, so the whole page scrolled sideways.
 */
:is(.woocommerce, .woocommerce-page) .cart-collaterals,
:is(.woocommerce, .woocommerce-page) .cart-collaterals .cart_totals,
:is(.woocommerce, .woocommerce-page) .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
}

:is(.woocommerce, .woocommerce-page) .cart-collaterals .cart_totals table {
	width: 100%;
}

/* The label column sizes to its content -- `table-layout: fixed` split it
 * evenly and broke "Subtotal" and "Shipment" mid-word. Only the value column
 * needs permission to wrap. */
:is(.woocommerce, .woocommerce-page) .cart-collaterals .cart_totals table th {
	white-space: nowrap;
	width: 1%;
	padding-right: 18px;
}

:is(.woocommerce, .woocommerce-page) .cart-collaterals .cart_totals table td {
	overflow-wrap: anywhere;
}

/* ====================================================================== */
/*  Invalid fields                                                        */
/* ====================================================================== */
/*
 * Woo flags a bad row with `woocommerce-invalid`, and checkout-steps.js now
 * sets the same class when it blocks a step. Nothing styled it, so a blocked
 * step gave no reason why.
 */
/* Mirrors the field selector further down this file, plus the invalid class,
 * so it outranks that rule's `border` shorthand rather than tying with it. */
:is(.woocommerce, .woocommerce-page) form .form-row.woocommerce-invalid input.input-text,
:is(.woocommerce, .woocommerce-page) form .form-row.woocommerce-invalid select,
:is(.woocommerce, .woocommerce-page) form .form-row.woocommerce-invalid textarea {
	/* !important is deliberate. The generic field rule further down sets
	 * `border` as a shorthand, and this needs to win outright wherever it
	 * appears -- an error the customer cannot see is worse than a specificity
	 * purist's objection. */
	border: 1px solid #A33F35 !important;
}

:is(.woocommerce, .woocommerce-page) form .form-row.woocommerce-invalid label {
	color: #A33F35;
}

/*
 * Woo ships a dedicated rule for this one button --
 * `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button` -- setting
 * 1.25em type, 1em padding and display:block, which left the cart's primary
 * action oversized and squeezed to 42px wide. Same specificity, later sheet.
 */
:is(.woocommerce, .woocommerce-page) .wc-proceed-to-checkout a.checkout-button {
	display: inline-flex;
	width: auto;
	font-size: var(--soumm-fs-btn);
	letter-spacing: var(--soumm-ls-nav);
	padding: 18px 34px;
	text-align: center;
}

:is(.woocommerce, .woocommerce-page) .button:hover,
:is(.woocommerce, .woocommerce-page) button.button:hover,
:is(.woocommerce, .woocommerce-page) input.button:hover,
:is(.woocommerce, .woocommerce-page) a.button:hover,
:is(.woocommerce, .woocommerce-page) #respond input#submit:hover {
	background: var(--soumm-brass);
	border-color: var(--soumm-brass);
	color: var(--soumm-on-ink);
}

:is(.woocommerce, .woocommerce-page) .button.alt,
:is(.woocommerce, .woocommerce-page) a.button.alt,
:is(.woocommerce, .woocommerce-page) input.button.alt,
:is(.woocommerce, .woocommerce-page) button.button.alt {
	background: var(--soumm-ink);
	border-color: var(--soumm-ink);
}

/* `.alt` and `:hover` are both (0,3,1) and `.alt` is declared later, so it won
 * even while hovered and the primary buttons -- Proceed to checkout among them
 * -- never reacted. These come after it and settle the tie. */
:is(.woocommerce, .woocommerce-page) .button.alt:hover,
:is(.woocommerce, .woocommerce-page) a.button.alt:hover,
:is(.woocommerce, .woocommerce-page) input.button.alt:hover,
:is(.woocommerce, .woocommerce-page) button.button.alt:hover {
	background: var(--soumm-brass);
	border-color: var(--soumm-brass);
	color: var(--soumm-on-ink);
}

/* Woo sets `color: inherit` on a disabled button. On the design's ink button
 * that inherits the page's ink text, so "Update bag" was ink-on-ink and its
 * label disappeared -- it read as an empty grey pill. */
:is(.woocommerce, .woocommerce-page) .button:disabled,
:is(.woocommerce, .woocommerce-page) .button.disabled,
:is(.woocommerce, .woocommerce-page) button.button:disabled,
:is(.woocommerce, .woocommerce-page) button.button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	color: var(--soumm-on-ink);
}

/* ====================================================================== */
/*  Form fields                                                           */
/* ====================================================================== */
:is(.woocommerce, .woocommerce-page) form .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
}

:is(.woocommerce, .woocommerce-page) form .form-row label {
	font-size: 11px;
	letter-spacing: var(--soumm-ls-nav);
	text-transform: uppercase;
	color: var(--soumm-muted);
}

:is(.woocommerce, .woocommerce-page) form .form-row .required {
	color: var(--soumm-brass);
	text-decoration: none;
}

:is(.woocommerce, .woocommerce-page) form .form-row input.input-text,
:is(.woocommerce, .woocommerce-page) form .form-row textarea,
:is(.woocommerce, .woocommerce-page) form .form-row select,
:is(.woocommerce, .woocommerce-page) .select2-container .select2-selection--single {
	width: 100%;
	background: var(--soumm-page);
	border: 1px solid var(--soumm-line);
	border-radius: 0;
	padding: 15px 18px;
	height: auto;
	font-size: var(--soumm-fs-small);
	color: var(--soumm-ink);
	transition: border-color var(--soumm-dur) var(--soumm-ease);
}

:is(.woocommerce, .woocommerce-page) form .form-row input.input-text:focus,
:is(.woocommerce, .woocommerce-page) form .form-row textarea:focus,
:is(.woocommerce, .woocommerce-page) form .form-row select:focus {
	border-color: var(--soumm-ink);
	outline: 2px solid var(--soumm-brass);
	outline-offset: 2px;
}

:is(.woocommerce, .woocommerce-page) form .form-row textarea {
	min-height: 140px;
	line-height: 1.75;
	resize: vertical;
}

:is(.woocommerce, .woocommerce-page) .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 1.5;
	padding: 0;
	color: var(--soumm-ink);
}

:is(.woocommerce, .woocommerce-page) .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 14px;
}

/* Two-up rows on wide screens, matching the design's form grid. */
@media (min-width: 1000px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: calc(50% - 12px);
		display: inline-flex;
		vertical-align: top;
	}

	.woocommerce form .form-row-first {
		margin-right: 24px;
	}
}

/* ====================================================================== */
/*  Quantity                                                              */
/* ====================================================================== */
:is(.woocommerce, .woocommerce-page) .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--soumm-line);
}

:is(.woocommerce, .woocommerce-page) .quantity .qty {
	width: 56px;
	height: 46px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: var(--soumm-fs-small);
	font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/*  Price                                                                 */
/* ====================================================================== */
:is(.woocommerce, .woocommerce-page) .price,
:is(.woocommerce, .woocommerce-page) .amount {
	color: var(--soumm-ink);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

:is(.woocommerce, .woocommerce-page) .price del {
	opacity: 0.5;
	margin-right: 8px;
}

/* ====================================================================== */
/*  Cart and checkout tables                                              */
/* ====================================================================== */
:is(.woocommerce, .woocommerce-page) table.shop_table {
	border: 1px solid var(--soumm-line);
	border-radius: 0;
	border-collapse: collapse;
	background: var(--soumm-page);
	font-size: var(--soumm-fs-small);
}

:is(.woocommerce, .woocommerce-page) table.shop_table th {
	text-align: left;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: var(--soumm-ls-eyebrow);
	text-transform: uppercase;
	color: var(--soumm-muted);
	background: var(--soumm-surface-alt);
	padding: 16px 20px;
	border-bottom: 1px solid var(--soumm-line);
}

:is(.woocommerce, .woocommerce-page) table.shop_table td {
	padding: 20px;
	border-top: 1px solid var(--soumm-line);
	vertical-align: middle;
	color: var(--soumm-ink);
}

:is(.woocommerce, .woocommerce-page) table.shop_table img {
	width: 78px;
	height: auto;
}

:is(.woocommerce, .woocommerce-page) a.remove {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--soumm-muted);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

:is(.woocommerce, .woocommerce-page) a.remove:hover {
	background: var(--soumm-surface-alt);
	color: var(--soumm-ink);
}

:is(.woocommerce, .woocommerce-page) .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-size: var(--soumm-fs-h4);
	margin-bottom: 18px;
}

/* ====================================================================== */
/*  Checkout — the three-step wrapper                                     */
/* ====================================================================== */
.s-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin-bottom: var(--soumm-col-gap);
	padding-bottom: 22px;
	border-bottom: 1px solid var(--soumm-line);
}

.s-steps__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: var(--soumm-ls-nav);
	text-transform: uppercase;
	color: var(--soumm-muted);
	background: none;
	border: 0;
	cursor: default;
}

.s-steps__item[data-state="done"],
.s-steps__item[data-state="current"] {
	color: var(--soumm-ink);
}

.s-steps__item[data-state="done"] {
	cursor: pointer;
}

.s-steps__n {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

.s-steps__item[data-state="current"] .s-steps__n {
	background: var(--soumm-ink);
	border-color: var(--soumm-ink);
	color: var(--soumm-on-ink);
}

.s-step-panel[hidden] {
	display: none;
}

.s-step-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}

/* Payment methods as selectable cards. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	border: 0;
	padding: 0;
	margin-bottom: 24px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	flex: 1 1 180px;
	border: 1px solid var(--soumm-line);
	background: var(--soumm-page);
	padding: 16px 20px;
	transition: border-color var(--soumm-dur) var(--soumm-ease),
		background var(--soumm-dur) var(--soumm-ease);
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
	border-color: var(--soumm-muted);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-size: var(--soumm-fs-small);
	letter-spacing: 0;
	text-transform: none;
	color: var(--soumm-ink);
	cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--soumm-surface-alt);
	border: 1px solid var(--soumm-line);
	font-size: var(--soumm-fs-meta);
	line-height: 1.7;
	color: var(--soumm-muted);
	margin: 14px 0 0;
	padding: 14px 16px;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 20px;
	font-size: var(--soumm-fs-meta);
	color: var(--soumm-muted);
}

/* ====================================================================== */
/*  Order received                                                        */
/* ====================================================================== */
:is(.woocommerce, .woocommerce-page) .woocommerce-order {
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

:is(.woocommerce, .woocommerce-page) ul.order_details {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	margin: 34px 0;
	padding: 0;
}

:is(.woocommerce, .woocommerce-page) ul.order_details li {
	font-size: 10px;
	letter-spacing: var(--soumm-ls-eyebrow);
	text-transform: uppercase;
	color: var(--soumm-muted);
	border: 0;
}

:is(.woocommerce, .woocommerce-page) ul.order_details li strong {
	display: block;
	margin-top: 8px;
	font-size: var(--soumm-fs-small);
	letter-spacing: 0;
	text-transform: none;
	color: var(--soumm-ink);
}

/* ====================================================================== */
/*  Hide Woo chrome the design does not use                               */
/* ====================================================================== */
:is(.woocommerce, .woocommerce-page) .woocommerce-result-count,
:is(.woocommerce, .woocommerce-page) .woocommerce-ordering,
.woocommerce-cart .cross-sells {
	display: none;
}

/* ====================================================================== */
/*  Product page: the size cards                                          */
/* ====================================================================== */
/*
 * variable.php bakes each card's resting appearance into its inline style at
 * render time, and pdp.js only flips data-selected -- it deliberately does not
 * rewrite that inline style, because layout.js's hover handler restores the
 * cssText it captured *before* the click as soon as the pointer leaves, which
 * would silently undo the selection a moment after it was made.
 *
 * So the selected state is declared here instead, with !important to clear
 * both the inline style and the hover handler. A chosen size then stays
 * visibly chosen whether the pointer is over it or not -- which is also the
 * correct behaviour: hover should not make a selected card look unselected.
 *
 * The colours are the same two the template paints server-side for a size
 * that arrives already selected, so the load-time and click-time appearances
 * are one design, not two.
 */
:is(.woocommerce, .woocommerce-page) [data-size-option][data-selected="true"] {
	border-color: var(--soumm-ink) !important;
	background: var(--soumm-surface-alt) !important;
}