/**
 * Styling for WooCommerce's own default markup on pages we deliberately did
 * NOT template-override (cart, checkout, my account, single product gallery/
 * tabs/variations) — see inc/woocommerce.php for why. Every selector below
 * targets WooCommerce's own stable core classes, nothing custom.
 */

/* --- Notices --- */
.woocommerce-notices-wrapper {
	margin-block: var(--space-lg);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	list-style: none;
	background: var(--color-surface);
	border-left: 4px solid var(--color-accent-secondary);
	border-radius: var(--radius-sm);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
	box-shadow: var(--shadow-soft);
}

.woocommerce-error {
	border-left-color: var(--color-sale);
}

/* --- Forms --- */
.woocommerce form .form-row label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	margin-bottom: var(--space-xs);
	display: block;
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce table.shop_table select {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	background: var(--color-surface);
	color: var(--color-text);
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	border-color: var(--color-accent-primary);
}

.quantity .qty {
	width: 4.5em;
	text-align: center;
}

/* --- Single product --- */
.product .summary {
	padding-top: var(--space-lg);
}

.product_title {
	font-size: var(--text-2xl);
}

.woocommerce-product-gallery {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.woocommerce-product-gallery__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-alt);
}

/* Between ~670px and the two-column switch at 64em the gallery box gets
   wider than the product image itself (600px woocommerce_single size);
   as a block element the image then parks at one edge and the leftover
   space piles up on the other side. Center it instead. */
.woocommerce-product-gallery__image img {
	margin-inline: auto;
}

/* Scoped to the product page's summary column only — a bare `.product .price`
   selector also matches every product-card <li> (they carry the generic
   `product` class too) and was blowing card prices up to 22px. */
.product .summary .price {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	display: block;
	margin-block: var(--space-md);
}

.product .summary .price del {
	color: var(--color-text-muted);
	opacity: 0.7;
	margin-right: var(--space-sm);
}

.product .summary .price ins {
	text-decoration: none;
	color: var(--color-sale);
}

.woocommerce-variation-add-to-cart,
form.cart {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
	margin-block: var(--space-lg);
}

/* Variable products: the form contains the whole variations table plus the
   add-to-cart wrap — as flex children they sit side-by-side and their
   intrinsic width can exceed the summary column, which made the page
   horizontally scrollable. Stack the form; the inner
   .woocommerce-variation-add-to-cart row keeps qty + button inline. */
form.cart.variations_form {
	display: block;
}

form.cart .variations,
.single-product div.product .summary {
	max-width: 100%;
	min-width: 0;
}

.variations {
	width: 100%;
	margin-bottom: var(--space-md);
}

.variations td.label {
	font-weight: var(--weight-medium);
	padding-right: var(--space-md);
}

.variations select {
	border-radius: var(--radius-pill);
}

.single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
}

/* Disabled until a variation is chosen (assets/js/variation-swatches.js). */
.single_add_to_cart_button:disabled,
.single_add_to_cart_button.is-selection-needed {
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.stock {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	margin-bottom: var(--space-md);
}

.stock.out-of-stock {
	color: var(--color-text-muted);
}

/* Tabs (Description / Size & Fit / Fabric & Care / Returns & Exchange Policy) — reviews are disabled store-wide, see inc/woocommerce.php */
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	margin-block: var(--space-2xl) 0;
	overflow-x: auto;
}

.woocommerce-tabs ul.tabs li {
	padding-bottom: var(--space-md);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active {
	color: var(--color-text);
	border-bottom-color: var(--color-accent-primary);
}

.woocommerce-tabs ul.tabs li a {
	display: block;
}

.woocommerce-tabs .panel {
	padding-block: var(--space-xl);
	max-width: 72ch;
}

/* --- Shop pagination -----------------------------------------------------
   We replaced WooCommerce's stylesheet, so its pagination list needs layout:
   numbers in a centered row of pill buttons, current page filled. */
.woocommerce-pagination {
	margin-top: var(--space-2xl);
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	transition: border-color var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}

.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--color-text);
}

.woocommerce-pagination span.page-numbers.current {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}

.woocommerce-pagination .page-numbers.dots {
	border: none;
	background: transparent;
	min-width: auto;
}

/* Related / upsell products */
.related.products,
.up-sells.upsells.products {
	margin-top: var(--space-3xl);
}

/* Only two related picks — cap the row width so two cards don't stretch
   into billboards on wide screens. Higher specificity than the ul.products
   breakpoint rules, so this wins at every width. */
.related.products ul.products {
	grid-template-columns: repeat(2, 1fr);
	max-width: 720px;
}

.related.products > h2,
.up-sells.upsells.products > h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-xl);
}

/* --- Cart page --- */
table.cart,
table.shop_table {
	width: 100%;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	border-collapse: collapse;
}

table.cart th,
table.cart td,
table.shop_table th,
table.shop_table td {
	padding: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: middle;
}

table.cart img,
table.shop_table img {
	border-radius: var(--radius-md);
	width: 72px;
	height: 90px;
	object-fit: cover;
}

table.cart td.actions {
	background: transparent;
	border-bottom: none;
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--color-text-muted) !important;
	font-size: 1.1rem;
}

.woocommerce a.remove:hover {
	background: var(--color-bg-alt);
	color: var(--color-sale) !important;
}

.cart-collaterals {
	display: grid;
	gap: var(--space-xl);
	margin-top: var(--space-2xl);
}

.cart_totals {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

.cart_totals h2 {
	font-size: var(--text-lg);
}

.cart_totals table {
	width: 100%;
}

.cart_totals table th,
.cart_totals table td {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border);
}

.wc-proceed-to-checkout .checkout-button {
	display: block;
	text-align: center;
	width: 100%;
}

/* --- Checkout --- */
.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
}

#order_review,
#order_review_heading {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

.woocommerce-checkout-payment {
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-top: var(--space-lg);
}

/* --- My account --- */
.woocommerce-account .account-nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-sm);
	box-shadow: var(--shadow-soft);
}

.woocommerce-account .account-nav li a {
	display: block;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	font-weight: var(--weight-medium);
}

.woocommerce-account .account-nav li.is-active a {
	background: var(--color-bg-alt);
	color: var(--color-accent-primary-dark);
}

.woocommerce-account .account-nav li a:hover {
	background: var(--color-bg-alt);
}

.woocommerce-MyAccount-content {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

.woocommerce-MyAccount-content table.shop_table {
	box-shadow: none;
}

.woocommerce-account .account-nav li a {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.woocommerce-account .account-nav li a .icon {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	opacity: 0.7;
}

/* --- My account: dashboard --- */
.account-dashboard-title {
	margin-bottom: var(--space-xs);
}

.account-dashboard-subtitle {
	color: var(--color-text-muted);
	margin-bottom: var(--space-xl);
}

.account-recent-order {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-xl);
}

a.account-recent-order:hover {
	border-color: var(--color-accent-primary);
}

.account-recent-order--empty {
	flex-direction: column;
	align-items: flex-start;
	background: var(--color-bg-alt);
	border: none;
}

.account-recent-order--empty p {
	margin: 0;
}

.account-recent-order-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.account-recent-order-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.account-recent-order-meta {
	font-weight: var(--weight-medium);
}

.account-recent-order-total {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.account-order-status {
	flex-shrink: 0;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-pill);
	background: var(--color-bg-alt);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.account-order-status.status-completed {
	background: color-mix(in srgb, var(--color-success) 18%, white);
	color: var(--color-success);
}

.account-order-status.status-processing {
	background: var(--color-accent-tertiary);
}

.account-order-status.status-cancelled,
.account-order-status.status-failed {
	background: color-mix(in srgb, var(--color-sale) 14%, white);
	color: var(--color-sale);
}

.account-quick-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-lg);
}

.account-quick-link {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.account-quick-link:hover {
	border-color: var(--color-accent-primary);
	background: var(--color-bg);
}

.account-quick-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--radius-pill);
	background: var(--color-bg-alt);
	color: var(--color-accent-primary-dark);
}

.account-quick-link-icon .icon {
	width: 1.2em;
	height: 1.2em;
}

.account-quick-link-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.account-quick-link-label {
	font-weight: var(--weight-semibold);
}

.account-quick-link-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* --- My account: wishlist tab --- */
.account-wishlist-intro {
	color: var(--color-text-muted);
}

/* --- My account: login / register (logged-out view of the same page) --- */
.woocommerce-account #customer_login {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 48em) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2,
.woocommerce-account .entry-content > .woocommerce > form.woocommerce-form-login {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

/* Registration disabled: the lone login form gets a single centered card. */
.woocommerce-account .entry-content > .woocommerce > form.woocommerce-form-login {
	max-width: 480px;
	margin-inline: auto;
}

.woocommerce-account #customer_login h2 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-lg);
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: block;
	margin-bottom: var(--space-md);
}

.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
	width: 100%;
}

.woocommerce-LostPassword {
	margin-top: var(--space-md);
	margin-bottom: 0;
	font-size: var(--text-sm);
}

.woocommerce-LostPassword a {
	color: var(--color-text-muted);
	text-decoration: underline;
}

/* --- Single product: page structure -------------------------------------
   WooCommerce's single-product template renders gallery + summary as
   siblings inside div.product; without its default stylesheet they stack
   full-width. Grid them side by side on desktop, tabs/related span both. */
.single-product-main {
	padding-bottom: var(--space-2xl);
}

.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xl);
	margin-top: var(--space-xl);
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .up-sells {
	grid-column: 1 / -1;
}

.single-product div.product .summary {
	padding-top: 0;
}

/* Sale badge on the product page (absolute over the gallery corner). */
.single-product div.product > .monatesmir-sale-badge {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 5;
}

@media (min-width: 64em) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		column-gap: var(--space-4xl);
	}
}

/* Gallery: we removed WooCommerce's stylesheet, so restore the flexslider
   essentials its gallery JS expects (viewport clipping + thumbnail strip). */
.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery .flex-viewport {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-alt);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	z-index: 9;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-soft);
	font-size: 0;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--color-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") no-repeat center / contain;
}

.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.flex-control-thumbs img {
	border-radius: var(--radius-md);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--duration-fast) var(--ease-soft);
}

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

/* --- Variation swatches (assets/js/variation-swatches.js) ---------------
   The native selects stay in the DOM for WooCommerce's JS; hide them
   without display:none so change events and form semantics keep working. */
.variation-select-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.variation-swatch {
	min-width: 48px;
	min-height: 44px;
	padding: var(--space-sm) var(--space-lg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
	transition: border-color var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}

.variation-swatch:hover:not(:disabled) {
	border-color: var(--color-text);
}

.variation-swatch.is-active {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}

.variation-swatch:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.variation-swatch--color {
	min-width: 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--swatch-color, #ccc);
	border: 2px solid var(--color-border);
	box-shadow: inset 0 0 0 3px var(--color-surface);
}

.variation-swatch--color:hover:not(:disabled) {
	border-color: var(--color-text-muted);
}

.variation-swatch--color.is-active {
	background: var(--swatch-color, #ccc);
	border-color: var(--color-text);
}

.variation-swatch--color:disabled {
	text-decoration: none;
}

/* Variations table: stacked label-over-swatches rows instead of a table. */
.variations,
.variations tbody,
.variations tr,
.variations th,
.variations td {
	display: block;
	text-align: left;
}

.variations tr {
	margin-bottom: var(--space-lg);
}

.variations th.label {
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	padding-bottom: var(--space-sm);
}

.reset_variations {
	display: inline-block;
	margin-top: var(--space-sm);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-decoration: underline;
}

.woocommerce-variation-price {
	margin-bottom: var(--space-md);
}

/* --- Shop toolbar: count left, sort right -------------------------------- */
.shop-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.woocommerce-result-count {
	margin: 0 auto 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
}

.woocommerce-ordering-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.woocommerce-ordering .orderby {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-surface);
	font-size: var(--text-sm);
	color: var(--color-text);
}

/* --- Filter widgets ------------------------------------------------------ */

/* Price slider (WooCommerce "Filter by price" widget). */
.price_slider_wrapper {
	padding-top: var(--space-sm);
}

/* The widget ships raw min/max text inputs that its JS hides after init —
   without core's stylesheet they flash visible on every reload before the
   slider takes over. Hide them from first paint; the slider writes to them
   and they still submit their values. */
.price_slider_amount input#min_price,
.price_slider_amount input#max_price {
	display: none;
}

/* Inverse flash: the widget prints .price_slider and .price_label with
   inline display:none and its JS .show()s them after init, so the slider
   vanished for a beat on every reload. Force them visible from first paint
   (!important is required to beat the inline style); the jQuery UI handles
   simply attach onto the already-visible track. */
.price_slider_wrapper .price_slider,
.price_slider_amount .price_label {
	display: block !important;
}

.price_slider {
	position: relative;
	height: 4px;
	background: var(--color-border);
	border-radius: var(--radius-pill);
	margin: var(--space-md) 9px var(--space-xl);
}

.price_slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--color-text);
	border-radius: var(--radius-pill);
}

.price_slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	transform: translateY(-50%);
	background: var(--color-surface);
	border: 2px solid var(--color-text);
	border-radius: 50%;
	cursor: grab;
}

.price_slider .ui-slider-handle:active {
	cursor: grabbing;
}

.price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	font-size: var(--text-sm);
}

.price_slider_amount .price_label {
	color: var(--color-text-muted);
}

/* The Filter button is redundant: releasing a slider handle applies the
   range automatically (assets/js/filters.js). */
.price_slider_amount .button {
	display: none;
}

/* Attribute filters (WooCommerce layered nav) as a checkbox-style list. */
.woocommerce-widget-layered-nav-list li {
	padding-block: 5px;
}

.woocommerce-widget-layered-nav-list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--color-text);
}

.woocommerce-widget-layered-nav-list a::before {
	content: "";
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--color-border);
	border-radius: 5px;
	background: var(--color-surface);
	transition: background var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft);
}

.woocommerce-widget-layered-nav-list a:hover::before {
	border-color: var(--color-text);
}

.woocommerce-widget-layered-nav-list li.chosen a::before {
	background-color: var(--color-text);
	border-color: var(--color-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 13 9 18 20 6'/%3E%3C/svg%3E");
	background-size: 11px;
	background-position: center;
	background-repeat: no-repeat;
}

.woocommerce-widget-layered-nav-list .count {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* --- WooCommerce pages rendered through page.php (cart/checkout/account):
   lift the 72ch prose width — tables and checkout grids need the room. */
.woocommerce-cart .static-page-content,
.woocommerce-checkout .static-page-content,
.woocommerce-account .static-page-content {
	max-width: none;
}

/* --- My Account: side nav + content on desktop. Scoped to .logged-in —
   the logged-out view of the same page is the login/register form, which
   has no side nav and would otherwise land in the 240px nav column. --- */
@media (min-width: 64em) {
	.woocommerce-account.logged-in .static-page-content .woocommerce {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--space-2xl);
		align-items: start;
	}
}