/**
 * woocommerce.css
 * Shop/category archive chrome: breadcrumbs, header, toolbar, filter
 * sidebar (static on desktop, offcanvas on mobile — single DOM node, see
 * woocommerce/archive-product.php), and native WooCommerce filter widget
 * styling. Only enqueued on shop/cart/checkout/account pages (inc/enqueue.php).
 *
 * Product grid + card styling lives in components.css (shared with the
 * homepage and, in Phase 6, related products) — not duplicated here.
 */

/* ---------------------------------------------------------------
 * Breadcrumb (native woocommerce_breadcrumb(), untouched hook)
 * ------------------------------------------------------------- */
.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	font-size: var(--font-size-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* Current page (the trailing plain-text segment, not a link) inherits
	   this as its "you are here" color — full-strength text rather than
	   the muted trail color used for the links before it. */
	color: var(--color-text);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-breadcrumb a {
	position: relative;
	display: inline-block;
	padding: 2px 1px;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-standard);
}

/* Underline that draws in from the left on hover, instead of a static
   underline sitting there by default — a small bit of "прикольный"
   polish (per the brief's request) that still stays within the
   restrained, no-heavy-effects visual language of §4. */
.woocommerce-breadcrumb a::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 0;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-base) var(--ease-standard);
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-text);
}

.woocommerce-breadcrumb a:hover::after {
	transform: scaleX(1);
}

.woocommerce-breadcrumb__delimiter {
	display: inline-block;
	margin-inline: 6px;
	color: var(--color-text-muted);
	font-size: 13px;
	transform: translateY(-0.5px);
	transition: transform var(--duration-base) var(--ease-standard);
}

.woocommerce-breadcrumb:hover .woocommerce-breadcrumb__delimiter {
	transform: translateY(-0.5px) translateX(1px);
}

/* ---------------------------------------------------------------
 * Shop header
 * ------------------------------------------------------------- */
.shop-header {
	margin-bottom: var(--space-4);
}

.shop-header__title {
	margin-bottom: var(--space-2);
}

.term-description,
.woocommerce-product-details__short-description {
	color: var(--color-text-secondary);
}

/* Subcategory thumbnails (native woocommerce_before_shop_loop hook,
   only rendered when Shop page display includes categories). */
ul.products li.product-category {
	list-style: none;
}

ul.products li.product-category a {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
	text-align: center;
	padding-bottom: var(--space-3);
	transition: border-color var(--duration-base) var(--ease-standard);
}

ul.products li.product-category a:hover {
	border-color: var(--color-text-muted);
}

ul.products li.product-category img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

ul.products li.product-category .woocommerce-loop-category__title {
	margin-top: var(--space-2);
	font-size: var(--font-size-small);
	font-weight: 500;
	color: var(--color-text);
}

ul.products li.product-category .count {
	color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
 * Toolbar: result count + sort + mobile Filter button
 * ------------------------------------------------------------- */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: var(--space-3);
	margin-bottom: var(--space-4);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
}

.shop-toolbar__count {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.shop-toolbar__controls {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.shop-toolbar__filter-toggle svg {
	width: 16px;
	height: 16px;
}

/* The sidebar is a static, always-visible column at desktop widths, so
   the toolbar's "Filter" button (which opens the offcanvas menu) is
   mobile-only — showing it on desktop would open a hamburger panel
   that's hidden there anyway (see header.css's min-width:1025px rule). */
@media (min-width: 1025px) {
	.shop-toolbar__filter-toggle {
		display: none;
	}
}

/* WooCommerce's native ordering <select> (woocommerce_catalog_ordering) —
   restyled to sit compactly in the toolbar instead of the default
   full-width form control. */
.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	width: auto;
	min-width: 160px;
	padding: 10px 14px;
	font-size: var(--font-size-small);
}

@media (max-width: 480px) {
	/* Filter button + a 160px-min-width sort dropdown don't both fit on
	   a 320–430px line next to each other (§21) — let the toolbar wrap
	   to its own row and drop the sort select's minimum width so it can
	   shrink instead of forcing horizontal overflow. */
	.shop-toolbar__count {
		flex-basis: 100%;
	}

	.shop-toolbar__controls {
		flex: 1;
		justify-content: space-between;
	}

	.woocommerce-ordering select {
		min-width: 0;
		flex: 1;
	}
}

/* ---------------------------------------------------------------
 * Pagination — WooCommerce's own woocommerce_pagination() (hooked to
 * woocommerce_after_shop_loop) renders <nav class="woocommerce-pagination">
 * wrapping a <ul class="page-numbers">, a completely different class
 * than this theme's own darkcommerce_pagination() (used on the blog).
 * Without this block it fell back to the browser's unstyled default
 * list rendering — numbers stacked vertically with bullet points.
 * ------------------------------------------------------------- */
.woocommerce-pagination {
	margin-top: var(--space-5);
}

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

.woocommerce-pagination .page-numbers li {
	display: contents;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 8px;
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
	transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

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

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

/* ---------------------------------------------------------------
 * Shop layout: sidebar + grid
 * .layout-with-sidebar (260px + 1fr, collapsing at 1024px) already
 * comes from layout.css. The sidebar carries the site nav (desktop
 * only — mobile already has its own copy in the header's hamburger
 * menu, see below) plus the optional WooCommerce filter widgets.
 * ------------------------------------------------------------- */
.shop-main {
	min-width: 0; /* prevents grid blowout from long product titles/price strings */
}

.shop-sidebar__title {
	display: block;
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

.shop-sidebar__nav {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.shop-sidebar__menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.shop-sidebar__menu a {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	transition: color var(--duration-base) var(--ease-standard);
}

.shop-sidebar__menu a:hover,
.shop-sidebar__menu .current-menu-item > a {
	color: var(--color-text);
}

.shop-sidebar__menu .sub-menu {
	margin-top: var(--space-2);
	margin-left: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

@media (max-width: 1024px) {
	/* Redundant on mobile: the hamburger menu (#mobile-menu) already
	   shows this same site navigation at the top of its own panel, so
	   only the filter widgets below travel there too (physically moved
	   by initResponsiveShopSidebar() in woocommerce.js) — showing the
	   nav twice would be confusing, not helpful. */
	.shop-sidebar__nav {
		display: none;
	}
}

.shop-sidebar__widgets .widget {
	margin-bottom: var(--space-5);
}

.shop-sidebar__widgets .widget-title {
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

/*
 * Generic fallback for ANY widget dropped into "Shop Sidebar" — not just
 * the WooCommerce-specific ones styled below (Price/Attribute/Rating
 * filter, Product Categories). The README recommends those, but nothing
 * stops a store owner from adding a core WordPress widget (Search,
 * Pages, Archives, Categories, Custom HTML...) instead, and those don't
 * carry any of the woocommerce-prefixed classes the rules below target.
 * Without this fallback such widgets would render with correct text
 * color already (base.css sets a sane default), but unstyled lists/
 * headings/buttons/inputs read as visually "broken" or oddly spaced
 * next to the deliberately-styled WooCommerce widgets — this normalizes
 * that baseline.
 */
.shop-sidebar__widgets .widget h1,
.shop-sidebar__widgets .widget h2,
.shop-sidebar__widgets .widget h3,
.shop-sidebar__widgets .widget h4 {
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-text);
	margin: 0 0 var(--space-3);
}

.shop-sidebar__widgets .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.shop-sidebar__widgets .widget ul ul {
	padding-left: var(--space-3);
	margin-top: var(--space-1);
}

.shop-sidebar__widgets .widget li {
	font-size: var(--font-size-small);
}

.shop-sidebar__widgets .widget a {
	color: var(--color-text-secondary);
}

.shop-sidebar__widgets .widget a:hover {
	color: var(--color-text);
}

.shop-sidebar__widgets .widget p {
	color: var(--color-text-secondary);
	font-size: var(--font-size-small);
}

.shop-sidebar__widgets .widget select {
	width: 100%;
}

/* Search widget's submit control: WordPress core renders this as
   <input type="submit"> in some versions and <button> in others —
   neither is covered by the text-input selector list in
   components.css, so both need an explicit rule here or they'd fall
   back to the browser's unstyled default button chrome. */
.shop-sidebar__widgets .widget input[type="submit"],
.shop-sidebar__widgets .widget button:not(.quantity-stepper__decrease):not(.quantity-stepper__increase) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-2);
	padding: 10px 18px;
	background-color: var(--color-surface-2);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-small);
	cursor: pointer;
}

.shop-sidebar__widgets .widget input[type="submit"]:hover,
.shop-sidebar__widgets .widget button:hover {
	border-color: var(--color-text-secondary);
}

.shop-sidebar__widgets .widget input[type="search"],
.shop-sidebar__widgets .widget input[type="text"] {
	margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------
 * Native WooCommerce filter widgets, restyled in place.
 * ------------------------------------------------------------- */

/* Product Categories widget */
.widget_product_categories ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.widget_product_categories li a {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.widget_product_categories li a:hover,
.widget_product_categories li.current-cat > a {
	color: var(--color-text);
}

.widget_product_categories .count {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

/* Filter by Price widget */
.widget_price_filter .price_slider {
	margin-bottom: var(--space-4);
}

/*
 * Visual reference: 21st.dev "Range Slider" (ravikatiyar162) — its
 * standout idea is a clear, card-styled Min/Max readout below the
 * track. WooCommerce's own price filter widget only gives us one
 * combined string ("Price: ₽100 — ₽900" in a single .price_label span,
 * not separate min/max elements), so this reproduces the same "prominent
 * numeric readout" feeling as one centered card rather than two,
 * without needing to touch WooCommerce's own template.
 */
.widget_price_filter .price_slider_amount {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.widget_price_filter .price_label {
	order: -1;
	display: block;
	text-align: center;
	padding: var(--space-3);
	background-color: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}

.widget_price_filter .price_slider_amount .button {
	width: 100%;
	padding: 10px 14px;
}

.widget_price_filter .ui-slider {
	position: relative;
	height: 4px;
	margin: var(--space-4) 2px var(--space-3);
	background-color: var(--color-border);
	border-radius: var(--radius-full);
}

.widget_price_filter .ui-slider-range {
	position: absolute;
	height: 100%;
	background-color: var(--color-accent);
	border-radius: var(--radius-full);
}

.widget_price_filter .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	background-color: var(--color-bg);
	border: 2px solid var(--color-accent);
	border-radius: 50%;
	box-shadow: var(--shadow-card);
	transform: translateY(-50%);
	cursor: grab;
	outline: none;
	transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.widget_price_filter .ui-slider-handle:hover {
	transform: translateY(-50%) scale(1.1);
}

.widget_price_filter .ui-slider-handle.ui-state-active {
	cursor: grabbing;
	box-shadow: var(--shadow-popover);
}

.widget_price_filter .ui-slider-handle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* Filter by Attribute / Filter by Rating widgets (layered nav) */
.widget_layered_nav ul,
.widget_layered_nav_filters ul,
.widget_rating_filter ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.widget_layered_nav li a,
.widget_rating_filter li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 6px 0;
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.widget_layered_nav li a:hover,
.widget_rating_filter li a:hover {
	color: var(--color-text);
}

.widget_layered_nav li.chosen a {
	color: var(--color-text);
	font-weight: 600;
}

.widget_layered_nav_filters li a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	margin: 2px 4px 2px 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
}

/* Color/size attribute swatches, if a store uses the pa_color/pa_size
   attribute-as-swatch pattern via product attribute terms. */
.widget_layered_nav .color-swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
}

/* Active filters (native widget) */
.widget_layered_nav_filters .chosen a {
	color: var(--color-danger);
}

/* ---------------------------------------------------------------
 * Mobile: site nav + filters live inside the header's hamburger menu
 * (§11 revised — a store owner asked for this instead of a second,
 * separate offcanvas panel). #shop-filters itself is never its own
 * overlay any more: on desktop it's a static grid column; below 1024px,
 * initResponsiveShopSidebar() in woocommerce.js physically relocates
 * just the .shop-sidebar__widgets div into #mobile-menu's panel (the
 * .shop-sidebar__nav portion stays hidden there — see the
 * @media (max-width: 1024px) rule on .shop-sidebar__nav above — since
 * the hamburger menu already has its own copy of the site nav). Moving
 * the actual DOM node (not re-rendering dynamic_sidebar() a second
 * time) matters: WooCommerce's Price filter widget renders elements
 * with fixed IDs, and a second render would collide with the first.
 *
 * .mobile-menu__filters is the class that div gets while relocated, so
 * it reads as a natural continuation of the hamburger panel instead of
 * a disconnected fragment.
 * ------------------------------------------------------------- */
.mobile-menu__filters {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
	.shop-sidebar {
		transition: none;
	}
}

/* =================================================================
 * Single product page (§12–§14)
 *
 * No template override needed: WooCommerce's own content-single-product.php
 * already renders the gallery (via woocommerce_before_single_product_summary)
 * and .summary as direct sibling children of the same #product-<id> wrapper,
 * and everything from woocommerce_after_single_product_summary (tabs,
 * upsells, related products) as further siblings after that. That's
 * exactly the shape a CSS grid needs — so the two-column layout is pure
 * CSS, targeting WooCommerce's existing markup instead of restructuring it.
 * ================================================================= */

.product.type-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
	padding-block: var(--space-5);
}

.product.type-product > .woocommerce-product-gallery {
	grid-column: 1;
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

.product.type-product > .summary.entry-summary {
	grid-column: 2;
}

/* Everything printed by woocommerce_after_single_product_summary (tabs,
   upsells, related products) spans the full width below both columns. */
.product.type-product > .woocommerce-tabs,
.product.type-product > .upsells.products,
.product.type-product > .related.products,
.product.type-product > .clear {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.product.type-product {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.product.type-product > .woocommerce-product-gallery {
		grid-column: 1;
		position: static;
	}

	.product.type-product > .summary.entry-summary {
		grid-column: 1;
	}
}

/* ---------------------------------------------------------------
 * Gallery (§13) — WooCommerce's own gallery/zoom/lightbox/slider
 * scripts are enabled via add_theme_support() in inc/setup.php; this
 * only restyles the chrome (borders, radius, thumbnail rail) around
 * that native behaviour, and never touches its JS.
 * ------------------------------------------------------------- */
.woocommerce-product-gallery__wrapper {
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-surface);
}

/* Belt-and-braces: the zoom feature is undeclared in inc/setup.php now
   (removed at the client's request — its icon floated outside the image
   box), but hide the icon by class too in case a cache still serves the
   old markup for a while after deploy. */
.woocommerce-product-gallery .zoomImg,
.woocommerce-product-gallery__image [data-elevate-zoom] + span,
.woocommerce-product-gallery__wrapper .zoomIcon,
img.zoomImg {
	display: none !important;
}

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

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: calc(20% - var(--space-2) * 4 / 5);
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--color-text);
}

.onsale {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* Same accessible tint pattern as .badge--sale in components.css —
	   see the comment there for why this isn't a solid red fill. */
	background-color: rgba(239, 68, 68, 0.14);
	color: var(--color-danger);
	border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
	.woocommerce-product-gallery .flex-control-thumbs li {
		width: 56px;
		flex-shrink: 0;
	}

	.woocommerce-product-gallery .flex-control-thumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.woocommerce-product-gallery .flex-control-thumbs img {
		scroll-snap-align: start;
	}
}

/* ---------------------------------------------------------------
 * Summary column (§12)
 * ------------------------------------------------------------- */
.product_title {
	margin-bottom: var(--space-2);
}

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.summary .price {
	display: block;
	font-size: var(--font-size-h3);
	font-weight: 600;
	margin-bottom: var(--space-4);
}

.woocommerce-product-details__short-description {
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-product-details__short-description > *:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------
 * Variations form
 * WooCommerce renders attribute selects inside a <table> by default —
 * kept as a table for its accessible label/control association, but
 * visually presented as a stacked form (§4: no "default WooCommerce"
 * look) rather than table borders/striping.
 * ------------------------------------------------------------- */
table.variations {
	display: block;
	width: 100%;
	margin-bottom: var(--space-3);
}

table.variations tbody,
table.variations tr {
	display: block;
	width: 100%;
}

table.variations tr + tr {
	margin-top: var(--space-3);
}

table.variations th.label {
	display: block;
	text-align: left;
	padding: 0 0 var(--space-1);
	font-weight: 500;
	font-size: var(--font-size-small);
}

table.variations td.value {
	display: block;
}

table.variations select {
	width: 100%;
}

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

.woocommerce-variation.single_variation {
	margin-bottom: var(--space-3);
}

.woocommerce-variation-price .price {
	font-size: var(--font-size-h4, 1.25rem);
}

.woocommerce-variation-availability .stock {
	font-size: var(--font-size-small);
}

/* ---------------------------------------------------------------
 * Quantity + Add to cart (§14)
 * .quantity-stepper visuals come from components.css (Phase 2); here we
 * only lay out the row and handle the native submit button's states.
 * The +/- buttons themselves are injected by initQuantitySteppers() in
 * woocommerce.js — without JS, the native number input still works with
 * its browser-default spinner (progressive enhancement, not a hard
 * dependency).
 * ------------------------------------------------------------- */
.cart {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.single_add_to_cart_button {
	/* Guaranteed button look even if this element's other classes
	   (button/alt) don't match the generic .button rule for any reason —
	   duplicates that rule's visuals directly rather than assuming
	   .button will always apply. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 200px;
	padding: 14px 28px;
	background-color: var(--color-accent);
	color: var(--color-accent-text);
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.single_add_to_cart_button:hover {
	background-color: var(--color-accent-hover);
}

.single_add_to_cart_button:disabled,
.single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.stock {
	display: block;
	margin-bottom: var(--space-3);
	font-size: var(--font-size-small);
}

.stock.in-stock {
	color: var(--color-success);
}

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

/*
 * Design decision, updated in Phase 7: the single-product Add to Cart
 * form now submits via a custom AJAX endpoint (inc/cart.php) instead of
 * a full page reload — see initSingleAddToCartForm() in woocommerce.js.
 * That endpoint calls WC()->cart->add_to_cart() directly (the same core
 * method WooCommerce's own non-AJAX handler uses), so validation is
 * never reimplemented, only the transport changed. A successful add
 * opens the mini-cart (§15); a failed one falls back to a real form
 * submit so WooCommerce's native notice UI shows the error — no custom
 * error-banner component needed for that edge case.
 */
.single_add_to_cart_button.is-loading {
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Product meta — SKU / categories / tags (§12)
 * ------------------------------------------------------------- */
.product_meta {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.product_meta a {
	color: var(--color-text-secondary);
}

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

/* ---------------------------------------------------------------
 * Product data tabs (Description / Additional information / Reviews)
 * Tab switching itself is WooCommerce core's own script (frontend.js,
 * bundled with WooCommerce) — only the chrome is restyled here.
 * ------------------------------------------------------------- */
.woocommerce-tabs {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
	list-style: none;
	padding: 0;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding-bottom: var(--space-2);
	margin-bottom: -1px;
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--color-text-muted);
	border-bottom: 2px solid transparent;
}

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

.woocommerce-tabs .panel > *:first-child {
	margin-top: 0;
}

.woocommerce-Tabs-panel--additional_information table {
	width: 100%;
}

.woocommerce-Tabs-panel--additional_information table th,
.woocommerce-Tabs-panel--additional_information table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-small);
	text-align: left;
}

.woocommerce-Tabs-panel--additional_information table th {
	color: var(--color-text-muted);
	font-weight: 500;
	width: 220px;
}

@media (max-width: 480px) {
	/* A fixed 220px label column doesn't fit a ~320–375px viewport once
	   container padding is subtracted — stack label above value instead
	   of forcing both into a too-narrow row (§21: no horizontal overflow). */
	.woocommerce-Tabs-panel--additional_information table,
	.woocommerce-Tabs-panel--additional_information table tbody,
	.woocommerce-Tabs-panel--additional_information table tr,
	.woocommerce-Tabs-panel--additional_information table th,
	.woocommerce-Tabs-panel--additional_information table td {
		display: block;
		width: 100%;
	}

	.woocommerce-Tabs-panel--additional_information table th {
		padding-bottom: 2px;
		border-bottom: none;
	}

	.woocommerce-Tabs-panel--additional_information table tr {
		padding-block: var(--space-2);
	}
}

/* ---------------------------------------------------------------
 * Reviews tab — bridges WooCommerce's review markup onto the same
 * .comments-area look used for blog comments (Phase 1), rather than
 * introducing a third comment visual style.
 * ------------------------------------------------------------- */
#reviews .comment-form-rating select {
	width: auto;
}

#reviews ol.commentlist {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
}

#reviews ol.commentlist li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
}

#reviews .comment-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#reviews .woocommerce-review__author {
	font-weight: 600;
	font-size: var(--font-size-small);
}

#reviews .woocommerce-review__dash,
#reviews .woocommerce-review__published-date {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

#reviews .star-rating {
	margin-bottom: 4px;
}

#review_form_wrapper {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------
 * Upsells / related products headings (§12)
 * Both reuse the ul.products grid from components.css — only the
 * section heading needs styling to match .section__title elsewhere.
 * ------------------------------------------------------------- */
.upsells.products,
.related.products {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.upsells.products > h2,
.related.products > h2 {
	font-size: var(--font-size-h3);
	margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------
 * Wishlist placeholder button (§12 "wishlist-ready architecture")
 * Rendered by the woocommerce_single_product_summary hook right after
 * the add-to-cart form closes, so it lands on its own line by default —
 * pulled up snug against the cart row instead of floating with a large
 * gap underneath it.
 * ------------------------------------------------------------- */
.product-wishlist-button {
	margin-top: var(--space-2);
	border: 1px solid var(--color-border);
}

.product-wishlist-button[aria-pressed="true"] {
	color: var(--color-danger);
	border-color: var(--color-danger);
}

.product-wishlist-button[aria-pressed="true"] svg {
	fill: currentColor;
}


/* =================================================================
 * Cart page (§16)
 * No template override: the [woocommerce_cart] shortcode/block always
 * wraps its output in <div class="woocommerce">...</div> (WC_Shortcode
 * core behavior, independent of theme/page template) with
 * .woocommerce-cart-form and .cart-collaterals as direct children.
 *
 * This intentionally does NOT require the `woocommerce-cart` body class:
 * that class only appears on whichever page WooCommerce → Settings →
 * Advanced has configured as the *canonical* cart page. A duplicate page
 * with the same shortcode (WordPress appends "-2" to a slug that's
 * already taken) still renders the identical .woocommerce-cart-form /
 * .cart-collaterals markup, just without that body class — so targeting
 * the markup itself, not the body class, is what makes this work on
 * both.
 * ================================================================= */
.woocommerce:has(> .woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--space-6);
	align-items: start;
}

.woocommerce-cart-form {
	grid-column: 1;
}

.cart-collaterals {
	grid-column: 2;
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

@media (max-width: 900px) {
	.woocommerce:has(> .woocommerce-cart-form) {
		grid-template-columns: 1fr;
	}

	/*
	 * BUG FIX: .cart-collaterals kept its desktop `grid-column: 2` here
	 * even though the container above only defines a single column track
	 * at this width — CSS Grid then creates an implicit second column
	 * just to satisfy that explicit placement, so the totals box stayed
	 * squeezed into a narrow side-by-side column instead of stacking
	 * below the cart table (same class of bug as the checkout grid-row
	 * fix above: an explicit placement that isn't reset for the
	 * collapsed mobile layout).
	 */
	.woocommerce-cart-form,
	.cart-collaterals {
		grid-column: 1;
	}

	.cart-collaterals {
		position: static;
	}
}

/*
 * :has() fallback for the small remaining share of browsers without it
 * (Firefox < 121, older Safari): .cart-collaterals still renders in the
 * right place in normal document flow below the cart table — a single-
 * column stack rather than two-column-with-sticky-summary. Functional,
 * just less premium-looking, and only on very old browsers.
 */

table.cart,
table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

table.cart th,
table.shop_table th {
	padding-bottom: var(--space-2);
	text-align: left;
	font-size: var(--font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
}

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

.product-remove {
	width: 32px;
}

.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted) !important;
	background: transparent !important;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none !important;
}

.product-remove a.remove:hover {
	color: var(--color-danger) !important;
	background-color: var(--color-surface-2) !important;
}

.product-thumbnail {
	width: 88px;
}

.product-thumbnail img {
	width: 72px;
	height: 90px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.product-name a {
	font-weight: 500;
	color: var(--color-text);
}

.product-name .variation {
	margin-top: 4px;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.product-name dt,
.product-name dd {
	display: inline;
	margin: 0;
}

.product-quantity .quantity {
	display: inline-flex;
}

.product-subtotal {
	font-weight: 600;
	white-space: nowrap;
}

.actions {
	padding-top: var(--space-3);
}

.actions .coupon {
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

.actions .coupon input[type="text"] {
	width: auto;
	min-width: 180px;
}

.actions .button[name="update_cart"] {
	background-color: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

@media (max-width: 480px) {
	.actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		align-items: stretch;
	}

	.actions .coupon {
		flex-wrap: wrap;
	}
}

/* Cart totals summary card */
.cart_totals {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.cart_totals h2 {
	font-size: 1.125rem;
	margin-bottom: var(--space-3);
}

.cart_totals table {
	width: 100%;
}

.cart_totals table th,
.cart_totals table td {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-small);
	text-align: left;
}

.cart_totals table th {
	font-weight: 400;
	color: var(--color-text-secondary);
}

.cart_totals table td {
	text-align: right;
	font-weight: 500;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
	border-bottom: none;
	padding-top: var(--space-3);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-text);
}

.wc-proceed-to-checkout {
	margin-top: var(--space-4);
}

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
}

/* Responsive: collapse the cart table into stacked cards below 768px,
   using each cell's native data-title attribute (WooCommerce core
   markup already includes it) as the row label. */
@media (max-width: 768px) {
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive,
	table.shop_table_responsive tbody,
	table.shop_table_responsive tr,
	table.shop_table_responsive td {
		display: block;
		width: 100%;
	}

	table.shop_table_responsive tr {
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-border);
	}

	table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: none;
		padding: 6px 0;
		text-align: right;
	}

	table.shop_table_responsive td.product-thumbnail,
	table.shop_table_responsive td.product-remove {
		justify-content: flex-start;
	}

	table.shop_table_responsive td::before {
		content: attr(data-title);
		font-size: var(--font-size-xs);
		font-weight: 600;
		text-transform: uppercase;
		color: var(--color-text-muted);
	}

	table.shop_table_responsive td.product-thumbnail::before,
	table.shop_table_responsive td.product-remove::before {
		content: none;
	}
}

/* Cross-sells (native woocommerce_cart_collaterals hook, cart page only) */
.cross-sells {
	margin-top: var(--space-6);
}

.cross-sells > h2 {
	font-size: var(--font-size-h3);
	margin-bottom: var(--space-4);
}

/* =================================================================
 * WooCommerce Blocks (Cart/Checkout blocks)
 *
 * REVISED after a live bug report: the site actually uses the Cart/
 * Checkout BLOCKS (confirmed by "Контактная информация" / "Детали
 * заказа" — Blocks-specific copy, not the classic shortcode template's
 * wording), so this section — not the classic §16/§17 styling above —
 * is what's actually in effect on this store's cart/checkout pages.
 *
 * The first version of this section forced `display: grid` with a
 * hardcoded 2-column template onto the block wrapper. That was a guess
 * at the Blocks' real DOM structure, made without being able to inspect
 * it live — and it was wrong: WooCommerce Blocks lay themselves out
 * with their own internal (already responsive) CSS, using more than the
 * 2 top-level children the hardcoded grid assumed. Forcing a 2-column
 * grid on top of that tiled the extra sections into the same 2 columns
 * WooCommerce Blocks weren't expecting, which is what squeezed the
 * order-summary sidebar down to a sliver narrow enough that "Product
 * Title" wrapped one or two letters per line.
 *
 * This version is deliberately hands-off about layout/display/width —
 * it only recolors and re-spaces recognizable Blocks components,
 * trusting WooCommerce's own (still-loaded; the woocommerce_enqueue_styles
 * filter above only touches the classic frontend stylesheets, not
 * Blocks' separately-registered CSS) layout system to keep working.
 * ================================================================= */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
	color: var(--color-text);
}

.wc-block-components-sidebar-layout .wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-components-checkout-order-summary,
.wc-block-components-order-summary,
.wc-block-checkout__payment-method,
.wc-block-checkout__billing-fields,
.wc-block-checkout__shipping-fields,
.wc-block-checkout__contact-fields {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-3);
}

.wc-block-components-product-name {
	color: var(--color-text);
}

.wc-block-components-order-summary-item__description {
	min-width: 0; /* let long product names wrap normally instead of forcing width on siblings */
}

.wc-block-components-formatted-money-amount {
	color: var(--color-text);
	font-weight: 600;
}

.wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link {
	background-color: var(--color-accent) !important;
	color: var(--color-accent-text) !important;
	border-radius: var(--radius-sm) !important;
}

.wc-block-components-text-input input,
.wc-block-components-radio-control input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"] {
	background-color: var(--color-bg) !important;
	border-color: var(--color-border) !important;
	color: var(--color-text) !important;
}

.wc-block-components-text-input label,
.wc-block-checkout label {
	color: var(--color-text-secondary);
}

/* =================================================================
 * Shared form-row system (§17/§18)
 * WooCommerce's woocommerce_form_field() outputs this exact class
 * structure everywhere a checkout/account/login form appears — styled
 * once here and reused by checkout billing/shipping, "Additional
 * information" order notes, My Account details, address edit forms, and
 * the login/register/lost-password forms, instead of per-page rules.
 * ================================================================= */
.form-row {
	margin-bottom: var(--space-3);
}

.form-row label {
	margin-bottom: var(--space-1);
}

.form-row .required {
	color: var(--color-danger);
	text-decoration: none;
}

.form-row-first,
.form-row-last {
	width: calc(50% - var(--space-3) / 2);
	display: inline-block;
	vertical-align: top;
}

.form-row-first {
	margin-right: calc(var(--space-3));
}

@media (max-width: 480px) {
	.form-row-first,
	.form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

.woocommerce-input-wrapper {
	display: block;
}

.woocommerce-form-row .select2-container,
.form-row .select2-container {
	width: 100% !important;
}

/* select2 (bundled with WooCommerce, used for the Country/State fields) —
   light reskin so the dropdown matches the theme instead of its light
   default. Not an exhaustive skin, just the visible chrome. */
.select2-container--default .select2-selection--single {
	height: 46px;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: 14px;
	color: var(--color-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
}

.select2-dropdown {
	background-color: var(--color-surface);
	border-color: var(--color-border);
}

/* Default (non-hovered) option text was inheriting select2's own light-
   theme gray, reading as dim/low-contrast against this dark dropdown —
   explicit color fixes that regardless of select2's bundled defaults. */
.select2-results__option {
	color: var(--color-text-secondary);
	padding: 8px 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--color-accent);
	color: var(--color-accent-text);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--color-surface-2);
	color: var(--color-text);
}

.select2-search--dropdown {
	padding: 8px;
}

.select2-search--dropdown .select2-search__field {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	color: var(--color-text);
}

/* The search field auto-focuses when the dropdown opens — keep the
   theme's standard focus ring (§22 requires visible focus) but round
   its corners to match the field instead of a hard rectangular ring. */
.select2-search--dropdown .select2-search__field:focus-visible {
	outline-offset: 1px;
	border-radius: var(--radius-sm);
}

/* jQuery blockUI overlay WooCommerce shows over #order_review during
   AJAX checkout updates — restyled from its light default to match dark
   surfaces instead of clashing with them. */
.blockUI.blockOverlay {
	background-color: var(--color-bg) !important;
	opacity: 0.6 !important;
}

.blockUI.blockMsg {
	background: transparent !important;
	border: none !important;
}

/* =================================================================
 * Checkout (§17)
 * No template override: form.checkout's direct children
 * (#customer_details, #order_review_heading, #order_review) are exactly
 * what WooCommerce's own form-checkout.php renders — the two-column
 * layout + sticky order summary is pure CSS grid targeting them.
 *
 * `form.checkout` is specific enough on its own — no body-class scoping
 * needed (and, unlike is_checkout(), it still matches on a duplicate/
 * non-canonical page hosting the same shortcode; see
 * darkcommerce_is_wc_shortcode_page() in inc/helpers.php).
 * ================================================================= */
form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	grid-template-rows: auto 1fr;
	gap: var(--space-3) var(--space-6);
	align-items: start;
}

#customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
}

#order_review_heading {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.125rem;
	margin: 0;
}

#order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

@media (max-width: 900px) {
	form.checkout {
		grid-template-columns: 1fr;
	}

	/*
	 * BUG FIX: grid-column was reset here, but grid-row was NOT — with
	 * #customer_details still explicitly spanning rows 1–2 while
	 * #order_review_heading/#order_review kept their row 1 / row 2
	 * assignments, all three ended up sharing the single remaining
	 * column and OVERLAPPING each other. On mobile this rendered as the
	 * order summary + payment section + Place Order button appearing
	 * above still-incomplete billing fields, in the wrong visual order.
	 * Resetting grid-row here lets the three items stack in normal
	 * source order instead.
	 */
	#customer_details,
	#order_review_heading,
	#order_review {
		grid-column: 1;
		grid-row: auto;
	}

	#order_review {
		position: static;
	}
}

/*
 * Visual reference: 21st.dev "Checkout Form" (ruixen.ui) — its main idea
 * is presenting each logical step (address, billing, discount, total) as
 * its own clearly bounded card rather than a flat, undifferentiated
 * scroll of fields. Applied here to WooCommerce's own billing/shipping
 * field groups without touching their markup.
 */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
	padding: var(--space-4);
	margin-bottom: var(--space-4);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: 1.0625rem;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

#ship-to-different-address {
	margin-bottom: var(--space-3);
}

#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 500;
}

/* Order review table inside the sticky summary card */
.woocommerce-checkout-review-order-table {
	width: 100%;
	margin-bottom: var(--space-4);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-small);
}

.woocommerce-checkout-review-order-table thead th {
	text-transform: uppercase;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total td {
	text-align: right;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	border-bottom: none;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-text);
}

.woocommerce-checkout-review-order-table .product-name {
	font-size: var(--font-size-small);
}

.woocommerce-checkout-review-order-table .product-name .product-quantity {
	color: var(--color-text-muted);
}

/* Payment methods */
#payment {
	background-color: transparent;
}

ul.wc_payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-3);
}

ul.wc_payment_methods li.wc_payment_method {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-2);
	overflow: hidden;
}

ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	margin: 0;
	cursor: pointer;
	font-weight: 500;
}

ul.wc_payment_methods li.wc_payment_method input[type="radio"] {
	flex-shrink: 0;
}

ul.wc_payment_methods .payment_box {
	padding: 0 var(--space-3) var(--space-3);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

ul.wc_payment_methods .payment_box p:first-child {
	margin-top: 0;
}

.payment_method_paypal img,
.payment_methods img {
	vertical-align: middle;
	height: 20px;
	width: auto;
	margin-left: 6px;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--space-3);
	font-size: var(--font-size-small);
}

#place_order {
	width: 100%;
	padding: 16px 28px;
}

.woocommerce-checkout-payment .form-row {
	margin-bottom: 0;
}

/* Checkout coupon toggle (native WooCommerce checkout.js handles the
   show/hide — only its chrome is styled here). */
.woocommerce-form-coupon-toggle .woocommerce-info {
	padding: var(--space-3);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-small);
	margin-bottom: var(--space-4);
}

.woocommerce-form-coupon-toggle a {
	text-decoration: underline;
}

.checkout_coupon.woocommerce-form-coupon {
	display: flex;
	gap: var(--space-2);
	align-items: flex-end;
	padding: var(--space-3);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
}

.checkout_coupon.woocommerce-form-coupon .form-row {
	flex: 1;
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.checkout_coupon.woocommerce-form-coupon {
		flex-direction: column;
		align-items: stretch;
	}
}

/* =================================================================
 * My Account (§18)
 * No template override: my-account.php already renders
 * .woocommerce-MyAccount-navigation and .woocommerce-MyAccount-content
 * as siblings inside the shortcode's .woocommerce wrapper — same
 * :has()-based, body-class-independent approach as the cart page (see
 * that section's comment for why body classes alone aren't reliable
 * on a duplicate/non-canonical page).
 * ================================================================= */
.woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
}

@media (max-width: 900px) {
	.woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
}

.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.woocommerce-MyAccount-navigation-link a:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-danger);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background-color: var(--color-surface-2);
	color: var(--color-text);
	font-weight: 600;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* Orders table (reuses table.shop_table styling from the cart section
   above — WooCommerce applies that same class here) plus status badges. */
.woocommerce-orders-table__cell-order-actions {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
}

.woocommerce-orders-table__cell-order-actions .button {
	padding: 8px 14px;
	font-size: var(--font-size-xs);
}

mark.order-status,
.order-status {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: 600;
	background-color: var(--color-surface-2);
	color: var(--color-text-secondary);
}

.order-status.status-completed {
	background-color: rgba(34, 197, 94, 0.12);
	color: var(--color-success);
}

.order-status.status-processing {
	background-color: rgba(245, 158, 11, 0.12);
	color: var(--color-warning);
}

.order-status.status-cancelled,
.order-status.status-failed,
.order-status.status-refunded {
	background-color: rgba(239, 68, 68, 0.12);
	color: var(--color-danger);
}

/* Single order view (view-order.php) */
.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: var(--space-5);
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
	font-size: 1.0625rem;
	margin-bottom: var(--space-3);
}

/* Addresses page */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

@media (max-width: 600px) {
	.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

.woocommerce-Address {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-2);
}

.woocommerce-Address-title h2 {
	font-size: var(--font-size-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}

.woocommerce-Address address {
	font-style: normal;
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	line-height: 1.7;
}

/* Login / Register / Lost password (shown on My Account when logged out) */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 420px;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-small);
	margin-bottom: var(--space-3);
}

.u-columns.col2-set#customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

@media (max-width: 700px) {
	.u-columns.col2-set#customer_login {
		grid-template-columns: 1fr;
	}
}