/*
 * Hollowed Ember — WooCommerce.
 *
 * Selectors here are taken from the rendered output of the live site, not guessed.
 * The first build targeted `.wp-block-post.product`, which WooCommerce never emits —
 * the Product Collection block renders `li.wc-block-product`. That one wrong selector
 * is why the grid had no card, no border and no hover.
 */

/* ======================================================== product grid ==== */

.wc-block-product-template,
.wc-block-product-template.is-flex-container {
	--he-gap: clamp(0.875rem, 1.6vw, 1.375rem);
	display: grid;
	gap: var(--he-gap);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1100px) {
	.wc-block-product-template,
	.wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.wc-block-product-template,
	.wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 420px) {
	.wc-block-product-template,
	.wc-block-product-template.is-flex-container {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Grid items must be allowed to stretch. WooCommerce injects
 * `.wc-block-product-template.is-flex-container > li { width: 100% }` from an
 * inline <style> in the body, which always follows this file in document order,
 * so equal specificity loses and !important is the only way to win. Left alone,
 * every card collapsed to 57px and the titles wrapped one letter per line.
 */
.wc-block-product-template > li.wc-block-product,
.wc-block-product-template.is-flex-container > li.wc-block-product {
	width: auto !important;
	max-width: none !important;
	justify-self: stretch;
	box-sizing: border-box;
	min-width: 0;
}

/* The card. Flex column so the button can be pinned to the bottom regardless of
   how many lines the product title runs to — long names used to shove the button
   down and break the row alignment. */
li.wc-block-product {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge);
	margin: 0;
	padding: 0;
	overflow: hidden;
	transition:
		border-color var(--wp--custom--transition),
		transform var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition);
}

li.wc-block-product:hover,
li.wc-block-product:focus-within {
	border-color: var(--wp--preset--color--edge-hi);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.95);
}

/* Image sits flush to the card edges. The supplied product shots are on white,
   so a padded dark gutter around them reads as a mistake; full-bleed reads as
   deliberate. */
li.wc-block-product .wc-block-components-product-image {
	margin: 0;
	position: relative;
	overflow: hidden;
	background: #14141a;
}

li.wc-block-product .wc-block-components-product-image a {
	display: block;
	line-height: 0;
}

li.wc-block-product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

li.wc-block-product:hover img {
	transform: scale(1.035);
}

/* The text block grows; the button is pushed to the bottom of every card. */
li.wc-block-product > .wp-block-group {
	flex: 1 1 auto;
	padding: 0.95rem 1rem 0.35rem;
	gap: 0.3rem;
}

/* Category — the muted eyebrow from the design, not an underlined bone link. */
li.wc-block-product .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

li.wc-block-product .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

li.wc-block-product .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--bone-dim);
}

/* Title — capped at three lines so one long name cannot set the row height. */
li.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: var(--wp--custom--tracking--display);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

li.wc-block-product .wp-block-post-title a {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

li.wc-block-product .wp-block-post-title a:hover {
	color: var(--wp--preset--color--bone);
	text-decoration: none;
}

li.wc-block-product .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--label);
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bone);
	margin-top: 0.15rem;
}

/* Pin the button. margin-top:auto is what keeps every button on the same line. */
li.wc-block-product .wc-block-components-product-button {
	margin: auto 1rem 1rem;
	padding: 0;
}

li.wc-block-product .wc-block-components-product-button__button {
	/* Flex, not block: WooCommerce's ajax add-to-cart button carries stray
	   whitespace text nodes that made it 93px tall against 72px for "Select
	   options". Flex collapses them and min-height makes every button match. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
	line-height: 1.2;
	width: 100%;
	background: transparent;
	border: 1px solid var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	border-radius: 0;
	padding: 0.7rem 0.9rem;
	transition:
		background var(--wp--custom--transition),
		border-color var(--wp--custom--transition);
}

/* The grid's buttons are quiet until the card is engaged with — one saturated
   call to action per screen, not twelve competing ones. */
li.wc-block-product:hover .wc-block-components-product-button__button,
li.wc-block-product .wc-block-components-product-button__button:focus-visible {
	background: var(--wp--preset--color--blood);
	border-color: var(--wp--preset--color--blood);
}

.wc-block-components-product-price__regular {
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
	margin-right: 0.4rem;
	font-size: 0.85em;
}

.wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--ember);
}

/* ------------------------------------------------- archive toolbar ------- */

.wc-block-product-results-count,
.woocommerce-result-count {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	appearance: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	padding: 0.65rem 2.6rem 0.65rem 0.9rem;
	border-radius: 0;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--bone-dim) 50%),
		linear-gradient(135deg, var(--wp--preset--color--bone-dim) 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* ==================================================== product page ======== */

.single-product .product_title,
.wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: var(--wp--custom--tracking--display);
}

.woocommerce-product-gallery {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge);
}

/* ---- variation selects -------------------------------------------------- */

/*
 * These selects carry no class of their own — only id="pa_size" / id="pa_color" —
 * so they are reached through the table. The <option> elements needed styling
 * separately: they inherit the operating system's palette, which rendered white
 * text on a white sheet and made every option invisible.
 */
table.variations {
	border: 0;
	border-collapse: collapse;
	margin: 0 0 var(--wp--preset--spacing--30);
	width: 100%;
}

table.variations tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	border: 0;
}

table.variations th,
table.variations td {
	border: 0;
	padding: 0.35rem 0;
	background: none;
}

table.variations th.label {
	flex: 0 0 5.5rem;
}

table.variations th.label label {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone-dim);
	margin: 0;
}

table.variations td.value {
	flex: 1 1 12rem;
	min-width: 0;
}

table.variations select {
	appearance: none;
	width: 100%;
	max-width: 22rem;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	padding: 0.75rem 2.6rem 0.75rem 0.9rem;
	border-radius: 0;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--bone-dim) 50%),
		linear-gradient(135deg, var(--wp--preset--color--bone-dim) 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

table.variations select:hover {
	border-color: var(--wp--preset--color--bone-dim);
}

/* The invisible-options fix. */
table.variations select option,
.wc-block-catalog-sorting select option,
.woocommerce-ordering select option {
	background-color: #17171a;
	color: #ece5d7;
}

.reset_variations {
	display: inline-block;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bone-dim);
	margin-top: 0.5rem;
}

.woocommerce-variation-price {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.woocommerce-variation-price .price {
	font-family: var(--wp--preset--font-family--label);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--bone);
}

/* ---- quantity + add to cart --------------------------------------------- */

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
	margin-bottom: var(--wp--preset--spacing--30);
}

.quantity input[type="number"],
.wc-block-components-quantity-selector input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--label);
	font-variant-numeric: tabular-nums;
	text-align: center;
	padding: 0.8rem 0.4rem;
	border-radius: 0;
	width: 4.5rem;
}

.single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 12rem;
}

/* ---- tabs --------------------------------------------------------------- */

/*
 * Woo's classic tabs ship as white pills with a white panel. On a near-black page
 * they were the loudest thing on screen. Rebuilt as a hairline rail.
 */
.woocommerce-tabs.wc-tabs-wrapper {
	margin-top: var(--wp--preset--spacing--50);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--edge);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

/*
 * `li.active` has to be named explicitly. Woo styles the active tab with
 * `...ul.tabs li.active { background:#fff }`, which outranks a bare `li` — which
 * is why Description stayed a white pill while the others went dark.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding: 0.85rem 1.15rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--wp--custom--transition);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--bone-dim);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--bone);
	border-bottom-color: var(--wp--preset--color--rust);
}

.woocommerce-Tabs-panel {
	color: var(--wp--preset--color--bone-dim);
}

.woocommerce-Tabs-panel h2 {
	/* The panel repeats the tab name as a heading; the tab already said it. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td {
	border-color: var(--wp--preset--color--edge);
	color: var(--wp--preset--color--bone-dim);
	padding: 0.6rem 0.8rem;
}

.woocommerce-Tabs-panel table.shop_attributes th {
	font-family: var(--wp--preset--font-family--label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

/* ---- related products --------------------------------------------------- */

.wp-block-woocommerce-related-products {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--edge);
}

/* ==================================================== cart & checkout ===== */

.wc-block-components-totals-item,
.wc-block-components-order-summary-item {
	color: var(--wp--preset--color--bone-dim);
}

.wc-block-components-totals-footer-item {
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--label);
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone);
	border-radius: 0;
	padding: 0.85rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
}

.wc-block-components-text-input label,
.woocommerce form .form-row label {
	color: var(--wp--preset--color--bone-dim);
	font-family: var(--wp--preset--font-family--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button {
	background: var(--wp--preset--color--blood);
	border: 1px solid var(--wp--preset--color--blood);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	border-radius: 0;
	padding: 0.9rem 1.9rem;
	transition: background var(--wp--custom--transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-cart__submit-button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: #8e0a0a;
	border-color: #8e0a0a;
	color: var(--wp--preset--color--bone);
}

.woocommerce a.button.wc-backward {
	background: transparent;
	border-color: var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone);
}

/* ==================================================== misc =============== */

.wc-block-components-product-badge,
.onsale,
.wc-block-components-sale-badge {
	background: var(--wp--preset--color--blood);
	color: var(--wp--preset--color--bone);
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.25rem 0.55rem;
}

.star-rating span::before,
.wc-block-components-product-rating__stars span::before {
	color: var(--wp--preset--color--bone-dim);
}

.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--bone);
}


/* ------------------------------------------------------- stock badges ---- */

/*
 * Drawn over the image with ::after so they add no element to the card. The old
 * PHP version appended a <span> after the button and knocked every button in the
 * row out of alignment. Labels arrive as custom properties from wp_head so they
 * stay translatable.
 */
li.wc-block-product .wc-block-components-product-image {
	position: relative;
}

li.wc-block-product.outofstock .wc-block-components-product-image::after,
li.wc-block-product.he-low-stock .wc-block-components-product-image::after {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.35;
	padding: 0.25rem 0.55rem;
	pointer-events: none;
}

li.wc-block-product.outofstock .wc-block-components-product-image::after {
	content: var(--he-label-soldout, "Sold out");
	background: var(--wp--preset--color--raised);
	border: 1px solid var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone-dim);
}

li.wc-block-product.he-low-stock .wc-block-components-product-image::after {
	content: var(--he-label-lastfew, "Last few");
	background: transparent;
	border: 1px solid var(--wp--preset--color--rust);
	color: var(--wp--preset--color--ember);
	backdrop-filter: blur(4px);
}

/* Sold-out product images sit back so in-stock stock reads first. */
li.wc-block-product.outofstock img {
	opacity: 0.55;
	filter: saturate(0.6);
}

/* ---- variation swatches ------------------------------------------------- */

/*
 * The native select is kept for WooCommerce's variation script but taken out of
 * sight. Not display:none — a hidden-but-present control keeps Woo's JS happy
 * and keeps the value submittable.
 */
.he-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0 !important;
}

.he-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.he-swatch {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	min-width: 3rem;
	padding: 0.62rem 0.95rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--edge-hi);
	color: var(--wp--preset--color--bone-dim);
	border-radius: 0;
	cursor: pointer;
	transition:
		border-color var(--wp--custom--transition),
		background var(--wp--custom--transition),
		color var(--wp--custom--transition);
}

.he-swatch:hover:not([disabled]) {
	border-color: var(--wp--preset--color--bone-dim);
	color: var(--wp--preset--color--bone);
}

.he-swatch[aria-pressed="true"] {
	border-color: var(--wp--preset--color--rust);
	background: rgba(120, 6, 6, 0.34);
	color: var(--wp--preset--color--bone);
}

.he-swatch[disabled] {
	color: var(--wp--preset--color--edge-hi);
	border-color: var(--wp--preset--color--edge);
	cursor: not-allowed;
	text-decoration: line-through;
}

.he-swatch:focus-visible {
	outline: 2px solid var(--wp--preset--color--ember);
	outline-offset: 2px;
}

/* ==================================================== block checkout ===== */

/*
 * WooCommerce styles these fields with
 * `.wc-block-components-form .wc-block-components-text-input input[type="text"]`
 * — three classes plus an attribute selector, specificity (0,4,1). The previous
 * `.wc-block-components-text-input input` at (0,1,1) never stood a chance, which
 * is why the checkout stayed a wall of white boxes with near-white placeholders.
 * Every selector below deliberately matches or beats Woo's.
 */

.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-address-form .wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control__suggest-input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--edge-hi);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
}

.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-components-combobox .components-combobox-control__suggest-input:focus {
	background-color: var(--wp--preset--color--raised);
	border-color: var(--wp--preset--color--bone-dim);
	outline: 2px solid var(--wp--preset--color--ember);
	outline-offset: 1px;
}

/* Floating labels sit *inside* the field, so they need the field's own colours. */
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-block-components-combobox label {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0;
	text-transform: none;
	font-size: 1rem;
}

.wc-block-components-text-input.is-active label {
	color: var(--wp--preset--color--bone-dim);
	font-size: 0.75rem;
}

/* Country / state comboboxes and any native select in the form. */
.wc-block-components-form select,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--edge-hi);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
}

.wc-block-components-form select option,
.wc-blocks-components-select__select option {
	background-color: #17171a;
	color: #ece5d7;
}

/* The combobox suggestion list is a white sheet by default. */
.components-form-token-field__suggestions-list,
.wc-block-components-combobox-control .components-form-token-field__suggestions-list {
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--edge-hi);
}

.components-form-token-field__suggestion.is-selected,
.components-form-token-field__suggestion:hover {
	background: var(--wp--preset--color--blood);
	color: var(--wp--preset--color--bone);
}

/* ---- notices ------------------------------------------------------------ */

/*
 * The "no payment methods available" banner ships as #fff0f0 with near-black
 * text. On this page it read as a bright slab that drowned everything near it.
 */
.wc-block-components-notice-banner,
.wc-block-checkout__no-payment-methods-notice {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--bone) !important;
	border: 1px solid var(--wp--preset--color--edge);
	border-left: 2px solid var(--wp--preset--color--rust);
	border-radius: 0;
}

.wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--ember);
}

.wc-block-components-notice-banner.is-success {
	border-left-color: #6fbf73;
}

.wc-block-components-notice-banner > svg {
	fill: var(--wp--preset--color--ember);
	background: transparent;
}

.wc-block-components-notice-banner.is-success > svg {
	fill: #6fbf73;
}

.wc-block-components-validation-error {
	color: var(--wp--preset--color--ember);
}

/* ---- panels, summary, radios ------------------------------------------- */

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package,
.wc-block-checkout__order-notes,
.wc-block-components-panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge);
	color: var(--wp--preset--color--bone);
	border-radius: 0;
}

.wc-block-components-radio-control__option:hover {
	border-color: var(--wp--preset--color--edge-hi);
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--wp--preset--color--rust);
	background: rgba(120, 6, 6, 0.22);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge-hi);
	border-radius: 0;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--wp--preset--color--blood);
	border-color: var(--wp--preset--color--blood);
}

.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	color: var(--wp--preset--color--bone);
}

.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--edge);
}

.wc-block-components-order-summary__content,
.wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--edge);
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button {
	color: var(--wp--preset--color--bone);
}

.wc-block-components-title,
.wc-block-checkout__main h2,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--bone);
}

/* Woo draws hairlines with a hard-coded near-black that vanishes here. */
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--bone);
}

.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata {
	color: var(--wp--preset--color--bone-dim);
}

/* Loading skeletons default to light grey blocks. */
.wc-block-components-skeleton,
.wc-block-components-loading-mask__children {
	background-color: var(--wp--preset--color--raised);
}

/* ---- quantity spinner --------------------------------------------------- */

/*
 * The field itself was already dark; the white slab was Chrome's native
 * number-input spinner, which the browser paints and CSS cannot recolour.
 * Removing it is the only way to get rid of it.
 */
.quantity input[type="number"],
.wc-block-components-quantity-selector input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button,
.wc-block-components-quantity-selector input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector input::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.quantity {
	display: inline-flex;
	align-items: stretch;
}

.quantity input[type="number"] {
	min-height: 2.9rem;
	width: 4.5rem;
}