/* =========================================================================
   WooCommerce surfaces: shop, product, cart, checkout, account, notices.
   Every one of these is a designed page, not a plugin leftover.
   ========================================================================= */

.woo-breadcrumb {
	margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--smoke-2);
}
.woo-breadcrumb a { color: var(--smoke-2); }
.woo-breadcrumb a:hover { color: var(--paper); }
.woo-breadcrumb span { margin: 0 0.6rem; }

/* ------------------------------------------------------------- shop toolbar */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-result-count,
.woocommerce-ordering {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--smoke-2);
}

.woocommerce-ordering select {
	width: auto;
	min-width: 220px;
	padding: 0.6rem 0.9rem;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { float: none; }

.shop-toolbar,
.woocommerce-products-header + form,
.woocommerce-notices-wrapper + .woocommerce-result-count {
	margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------ product grid */

/* WooCommerce prints ul.products > li.product, and the theme card lives inside
   the li. So the grid goes on the ul and the li is the cell — three columns,
   which divides both the six-piece home set and the twelve-per-page archive
   so a row is never left half empty. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: 1fr;
	/* WooCommerce's block stylesheet sets justify-items on product lists; without
	   this the cells would not stretch to their track. */
	justify-items: stretch;
	align-items: stretch;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--rule);
	border: 1px solid var(--rule);
}

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

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

/* WooCommerce stamps a .columns-N class on the list and sizes every cell from
   it with a higher-specificity rule, so each column count has to be answered
   explicitly. The grid owns the widths here. */
.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product,
.woocommerce ul.products.columns-1 > li.product,
.woocommerce ul.products.columns-2 > li.product,
.woocommerce ul.products.columns-3 > li.product,
.woocommerce ul.products.columns-4 > li.product,
.woocommerce ul.products.columns-5 > li.product,
.woocommerce ul.products.columns-6 > li.product,
.woocommerce-page ul.products.columns-1 > li.product,
.woocommerce-page ul.products.columns-2 > li.product,
.woocommerce-page ul.products.columns-3 > li.product,
.woocommerce-page ul.products.columns-4 > li.product,
.woocommerce-page ul.products.columns-5 > li.product,
.woocommerce-page ul.products.columns-6 > li.product {
	display: flex;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	clear: none;
}

.woocommerce ul.products > li.product > .card { flex: 1 1 auto; min-width: 0; }

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

.card__plate {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 1.5rem;
	background: linear-gradient(160deg, var(--ink-2), var(--jade-deep));
	text-align: center;
}
.card__plate span {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	line-height: 1.1;
	color: var(--smoke-2);
}

/* --------------------------------------------------------- single product */

/* WooCommerce ships a 48%/48% float layout for the product page. The theme
   uses a grid instead, so the plugin's widths and floats are reset first. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { clear: both; }

.section--product .product {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

@media (min-width: 940px) {
	.section--product .product {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.woocommerce-product-gallery {
	position: relative;
	max-width: 640px;
	border: 1px solid var(--rule);
	background: var(--ink-2);
}

.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	margin: 1px 0 0;
	padding: 0;
	list-style: none;
	background: var(--rule);
}

.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; }

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	opacity: 0.45;
	cursor: pointer;
	transition: opacity 0.35s var(--ease-out);
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs .flex-active { opacity: 1; }

.woocommerce-product-gallery .flex-direction-nav {
	position: absolute;
	inset: auto 0 auto 0;
	top: 50%;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0 0.6rem;
	list-style: none;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 3;
}

.woocommerce-product-gallery .flex-direction-nav a {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(7, 10, 9, 0.72);
	backdrop-filter: blur(8px);
	border: 1px solid var(--rule);
	color: var(--paper);
	font-size: 0;
	transition: border-color 0.3s;
}
.woocommerce-product-gallery .flex-direction-nav a::before {
	content: "";
	width: 9px; height: 9px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before { transform: rotate(-135deg); }
.woocommerce-product-gallery .flex-direction-nav .flex-next::before { transform: rotate(45deg); }
.woocommerce-product-gallery .flex-direction-nav a:hover { border-color: var(--jade); }

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.7rem; right: 0.7rem;
	z-index: 4;
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	background: rgba(7, 10, 9, 0.72);
	border: 1px solid var(--rule);
	color: var(--paper);
	text-decoration: none;
}

.product_title {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	margin-bottom: 1rem;
}

.woocommerce .section--product div.product p.price,
.woocommerce .section--product div.product span.price,
.section--product .price {
	display: block;
	margin-bottom: 1.4rem;
	font-family: var(--font-body);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--paper);
}

/* WooCommerce's stock states are tuned for a white shop. */
.woocommerce div.product .stock,
.woocommerce .stock {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jade-lit);
}

.woocommerce div.product .stock.out-of-stock,
.woocommerce .out-of-stock { color: #C6564A; }
.section--product .price del { color: var(--smoke-2); margin-right: 0.6rem; }
.section--product .price ins { text-decoration: none; color: var(--jade-lit); }

.woocommerce-product-details__short-description {
	color: var(--smoke);
	font-size: 1.05rem;
	line-height: 1.6;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 1.6rem;
}

.cart form.cart,
form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin-bottom: 1.6rem;
}

/* A one-of-a-kind piece has no quantity to choose: WooCommerce swaps the
   spinner for a hidden input. The border therefore lives on the input, not on
   the wrapper, so the wrapper collapses to nothing instead of drawing an
   empty box. */
.quantity {
	display: inline-flex;
	align-items: center;
}

.quantity input.qty {
	width: 84px;
	height: 52px;
	padding: 0 0.6rem;
	border: 1px solid var(--rule);
	background: var(--ink-2);
	text-align: center;
	font-family: var(--font-mono);
}

.single_add_to_cart_button,
.button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.75rem;
	background: var(--paper);
	border: 1px solid var(--paper);
	border-radius: 0;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--jade-lit);
	border-color: var(--jade-lit);
	color: var(--ink);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--jade);
	border-color: var(--jade);
	color: var(--paper);
}

.woocommerce .button.wc-backward,
.woocommerce a.button.wc-forward {
	background: transparent;
	border-color: var(--rule-strong);
	color: var(--paper);
}
.woocommerce .button.wc-backward:hover,
.woocommerce a.button.wc-forward:hover {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}

.product-assurance {
	margin: 0 0 1.6rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}
.product-assurance li {
	padding: 0.75rem 0 0.75rem 1.4rem;
	border-bottom: 1px solid var(--rule);
	position: relative;
	font-size: 0.9rem;
	color: var(--smoke);
}
.product-assurance li::before {
	content: "";
	position: absolute;
	left: 0; top: 1.15rem;
	width: 5px; height: 5px;
	background: var(--jade-lit);
}

.product_meta {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--smoke-2);
}
.product_meta > span { display: block; margin-bottom: 0.4rem; }
.product_meta a { color: var(--smoke); }

/* tabs */
.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--rule);
	padding-top: clamp(2rem, 4vw, 3rem);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--rule);
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding-bottom: 0.9rem;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--smoke-2);
	border-bottom: 1px solid transparent;
	margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--paper);
	border-bottom-color: var(--jade-lit);
}

.woocommerce-Tabs-panel { color: var(--smoke); max-width: 74ch; }
.woocommerce-Tabs-panel h2 { color: var(--paper); margin-bottom: 1rem; }

.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}
.shop_attributes th,
.shop_attributes td {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	font-weight: 400;
}
.shop_attributes th {
	width: 34%;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--smoke-2);
}
.shop_attributes td p { margin: 0; }

/* related */
.related.products,
.up-sells.products {
	grid-column: 1 / -1;
	margin-top: clamp(3rem, 6vw, 5rem);
}
.related.products > h2,
.up-sells.products > h2,
.cross-sells > h2 {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	margin-bottom: 2rem;
}
.related.products ul.products,
.up-sells.products ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	list-style: none;
	margin: 0;
	padding: 0;
}
.related.products ul.products > li,
.up-sells.products ul.products > li { display: contents; }

/* Cart, checkout and account are interface: body type scale, full shell. */
.shop-page {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--paper);
}

.shop-page > .woocommerce { display: block; }

#order_review_heading { margin-top: 0; }

@media (min-width: 940px) {
	#order_review { width: 100%; }
}

/* System pages carry a masthead already, so the section below it does not need
   the full editorial top margin. */
.woocommerce-cart .section,
.woocommerce-checkout .section,
.woocommerce-account .section,
.woocommerce-order-received .section { padding-top: clamp(2rem, 4vw, 3.5rem); }

.woocommerce-cart .page-hero,
.woocommerce-checkout .page-hero,
.woocommerce-account .page-hero {
	padding-top: calc(var(--header-h) + clamp(1.6rem, 4vw, 3.2rem));
	padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

/* ------------------------------------------------------------ cart / checkout */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--rule);
	border-radius: 0;
	margin-bottom: 2rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 1.1rem;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: middle;
	color: var(--smoke);
}

.woocommerce table.shop_table th {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--smoke-2);
	background: var(--ink-2);
}

.woocommerce table.shop_table td.product-name a { color: var(--paper); }
.woocommerce table.shop_table img { width: 78px; height: auto; }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	margin-bottom: 1.2rem;
}

.woocommerce .cart-collaterals { margin-top: 2rem; }

@media (min-width: 900px) {
	.woocommerce-cart-form + .cart-collaterals,
	.woocommerce .cart-collaterals { max-width: 520px; margin-left: auto; }
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout form.checkout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

/* WooCommerce floats the two billing/shipping columns at 47%; the theme lays
   them out with the grid instead. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	width: 100%;
	float: none;
	padding: 0;
}

@media (min-width: 940px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		/* The heading row stays its own height; the review panel takes the rest,
		   otherwise the spanning details column inflates row one. */
		grid-template-rows: auto 1fr;
		align-items: start;
	}
	.woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr); }
	#order_review_heading,
	#order_review { grid-column: 2; }
	#customer_details { grid-column: 1; grid-row: 1 / span 2; }
}

/* WooCommerce targets its fields with `.woocommerce form .form-row input.input-text`,
   which outranks the theme's element selectors — so the dark field styling has
   to be restated at that weight or checkout renders white-on-white. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce form .form-row .input-text,
.woocommerce-checkout input.input-text,
.woocommerce-account input.input-text {
	width: 100%;
	padding: 0.95rem 1.1rem;
	background: var(--ink-2);
	border: 1px solid var(--rule);
	border-radius: 0;
	color: var(--paper);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.4;
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-account input.input-text:focus {
	border-color: var(--jade);
	background: var(--ink-3);
	outline: none;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block;
	margin-bottom: 0.45rem;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--smoke-2);
}

.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
	color: var(--jade-lit);
	border: 0;
	text-decoration: none;
}

.woocommerce form .form-row textarea { min-height: 140px; resize: vertical; }

.woocommerce form .form-row {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 1.1rem;
	padding: 0;
	float: none;
	width: 100%;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; }

@media (min-width: 620px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		display: inline-grid;
		width: calc(50% - 0.5rem);
		vertical-align: top;
	}
	.woocommerce form .form-row-first { margin-right: 1rem; }
}

.woocommerce .select2-container--default .select2-selection--single {
	height: 52px;
	background: var(--ink-2);
	border: 1px solid var(--rule);
	border-radius: 0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 52px;
	padding-left: 1.1rem;
	color: var(--paper);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 52px; }
.select2-dropdown {
	background: var(--ink-2);
	border: 1px solid var(--rule);
	border-radius: 0;
	color: var(--paper);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--jade); }

/* The order summary is a two-column table; the product name needs the room. */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 0.9rem 1rem; }

.woocommerce-checkout-review-order-table .product-name,
.woocommerce-checkout-review-order-table th:first-child { width: 66%; }

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; white-space: nowrap; }

.woocommerce-checkout-review-order-table { border: 0; }

#order_review,
.cart_totals,
.woocommerce-order,
.woocommerce-customer-details {
	background: var(--ink-2);
	border: 1px solid var(--rule);
	padding: clamp(1.2rem, 2.5vw, 2rem);
}

#payment { background: transparent; border-radius: 0; }
#payment ul.payment_methods {
	padding: 0;
	margin: 0 0 1.2rem;
	border-bottom: 1px solid var(--rule);
	list-style: none;
}
#payment ul.payment_methods li { padding: 0.7rem 0; }
#payment div.payment_box {
	background: var(--ink-3);
	color: var(--smoke);
	font-size: 0.9rem;
	border-radius: 0;
}
#payment div.payment_box::before { display: none; }

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
	font-size: 0.85rem;
	color: var(--smoke-2);
}

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

/* The sidebar layout only exists once there is an account menu to put in it.
   Signed out, the page is a single centred card. */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
		align-items: start;
	}
}

/* Signed out, WooCommerce nests both cards inside #customer_login, so that is
   the element that becomes the two-column layout. */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 560px;
	margin-inline: auto;
}

#customer_login {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
}

/* WooCommerce clearfixes its column sets with ::before/::after. Inside a grid
   container those pseudo-elements become grid items and push the real cards
   out of place, so every element the theme turns into a grid must drop them. */
#customer_login::before,
#customer_login::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce form.checkout::before,
.woocommerce form.checkout::after,
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { display: none; }

#customer_login h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	margin-bottom: 1.2rem;
}

@media (min-width: 900px) {
	.woocommerce-account.account-has-registration:not(.logged-in) .woocommerce {
		max-width: 1040px;
	}

	.account-has-registration #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--rule); }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.85rem 0;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--smoke-2);
	transition: color 0.3s;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a { color: var(--paper); }

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 100%;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	background: var(--ink-2);
	border: 1px solid var(--rule);
}

.woocommerce-form-login__rememberme { font-size: 0.85rem; color: var(--smoke-2); }

/* ------------------------------------------------- notices and empty states */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.6rem;
	padding: 1rem 1.2rem;
	background: var(--ink-2);
	border: 1px solid var(--rule);
	border-left: 2px solid var(--jade);
	border-radius: 0;
	color: var(--smoke);
	font-size: 0.95rem;
	list-style: none;
}

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

/* WooCommerce moves focus to the notice after an action. It carries
   tabindex="-1" and is not keyboard-reachable, so the ring is only noise. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus { outline: none; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

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

.cart-empty,
.return-to-shop {
	text-align: left;
}

.wc-empty-cart-message + .return-to-shop { margin-top: 1.4rem; }

/* keeps long tables usable on phones */
@media (max-width: 719px) {
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table tbody tr {
		display: grid;
		grid-template-columns: 78px 1fr;
		gap: 0.4rem 1rem;
		padding: 1rem;
		border-bottom: 1px solid var(--rule);
	}
	.woocommerce table.shop_table td {
		border: 0;
		padding: 0;
	}
	.woocommerce table.shop_table td.product-thumbnail { grid-row: span 4; }
	.woocommerce table.shop_table td::before {
		content: attr(data-title) " ";
		display: block;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--smoke-2);
	}
	.woocommerce table.shop_table td.product-thumbnail::before,
	.woocommerce table.shop_table td.product-remove::before { display: none; }
	.woocommerce table.shop_table td.actions { grid-column: 1 / -1; }
}