/*
 * Phase 5 — Shop archive, product category archives, and single product.
 * Loaded only on WooCommerce pages (see inc/enqueue.php, gated on
 * is_woocommerce()). Targets WooCommerce's own native markup/classes
 * directly rather than overriding templates — see woocommerce/README.md for
 * the one override that WAS necessary (content-product.php) and why.
 * Builds entirely on Phase 2 tokens and Phase 2/4 primitives
 * (.urban-container, .urban-grid, .urban-btn, .urban-notice) rather than
 * duplicating them. Mobile-first: base rules target the smallest viewport,
 * min-width queries layer on enhancements.
 */

/* ---------- Archive header (Shop title, category title + description) ---------- */

.woocommerce-products-header {
	padding: var(--urban-space-7) 0 var(--urban-space-6);
	text-align: center;
}

.woocommerce-products-header__title.page-title {
	margin: 0 0 var(--urban-space-3);
	font-size: var(--urban-text-h1-size);
	font-weight: var(--urban-text-h1-weight);
	letter-spacing: var(--urban-text-h1-tracking);
	line-height: var(--urban-text-h1-leading);
	color: var(--urban-black);
	text-transform: uppercase;
}

.woocommerce-products-header .term-description,
.woocommerce-products-header .woocommerce-product-archive-description {
	max-width: 42rem;
	margin: 0 auto;
	color: var(--urban-text-muted);
	font-size: var(--urban-text-body-size);
	line-height: var(--urban-text-body-leading);
}

/* ---------- Result count / ordering ---------- */

.woocommerce-before-shop-loop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--urban-space-4);
	margin-bottom: var(--urban-space-6);
}

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

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	min-height: var(--urban-input-height);
	padding: var(--urban-space-2) var(--urban-space-4);
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-sm);
	background-color: var(--urban-surface);
	color: var(--urban-text);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-small-size);
}

.woocommerce-ordering select:focus {
	outline: 2px solid var(--urban-gold);
	outline-offset: 1px;
}

/* ---------- Product grid ---------- */
/* ul.products is WooCommerce's own loop wrapper (woocommerce_product_loop_start/
   _end) — restyled onto the existing .urban-grid primitive rather than a new
   grid system, so this shares one responsive column scale with the homepage. */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--urban-space-4) var(--urban-space-3);
	margin: 0 0 var(--urban-space-8);
	padding: 0;
	list-style: none;
}

/* woocommerce-layout.css gives ul.products a float clearfix
   (.woocommerce ul.products::before/::after { content:" "; display:table })
   for its own float-based grid. A ::before/::after with real `content` on a
   grid container becomes a grid ITEM in its own right -- so the clearfix
   pseudo-elements were silently consuming the first and last grid cells,
   pushing every real product over by one slot. Floats aren't used here, so
   the clearfix has nothing to do; disable it instead of fighting it. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* WooCommerce's own bundled CSS sets `height:auto` on loop images twice,
   at two different specificities -- woocommerce-layout.css's
   `.woocommerce img` (1 class + 1 element) and woocommerce.css's own
   `.woocommerce ul.products li.product a img` (3 classes + 4 elements),
   the second one beating a first attempt at this fix that only matched
   the first rule's specificity. Confirmed via CSS.getMatchedStylesForNode
   (Chrome DevTools Protocol), not guessed: with only 2 classes, this
   selector lost to the second rule's 3; needs at least 4 to win outright
   regardless of its element-selector count. Without this, `height:auto`
   forces the image back to its own natural ratio, defeating
   object-fit:cover inside the card's enforced 3:4 box -- confirmed by
   measurement: rendered ratios of ~0.62-0.65 instead of 0.75. */
.woocommerce ul.products .urban-product-card .urban-product-card__image,
.woocommerce-page ul.products .urban-product-card .urban-product-card__image {
	height: 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--urban-space-5) var(--urban-space-4);
	}
}

@media (min-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* WooCommerce's own woocommerce-layout.css sets float/width/margin on this
   exact element via `.woocommerce ul.products li.product` — one ancestor
   class more specific than a bare `ul.products li.product` here, so it wins
   regardless of load order unless matched exactly. Reset back to what CSS
   Grid on the parent expects: items filling their track, sized by gap alone. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.urban-product-card__badge--stock {
	background-color: var(--urban-text-muted);
}

/* No products found (woocommerce_no_products_found / wc_no_products_found) */

.woocommerce-info {
	margin: 0 0 var(--urban-space-8);
	padding: var(--urban-space-5);
	border: 1px solid var(--urban-border);
	border-left: 3px solid var(--urban-text-muted);
	border-radius: var(--urban-radius-sm);
	list-style: none;
	color: var(--urban-text);
	font-size: var(--urban-text-body-size);
}

/* ---------- Pagination ---------- */

.woocommerce-pagination {
	display: flex;
	justify-content: center;
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--urban-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers li {
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--urban-tap-target-min);
	min-height: var(--urban-tap-target-min);
	padding: 0 var(--urban-space-3);
	border: 1px solid var(--urban-border);
	color: var(--urban-text);
	font-size: var(--urban-text-small-size);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-pagination .page-numbers a:hover,
.woocommerce-pagination .page-numbers a:focus-visible {
	border-color: var(--urban-black);
}

.woocommerce-pagination .page-numbers .current {
	background-color: var(--urban-black);
	border-color: var(--urban-black);
	color: var(--urban-white);
}

/* ---------- Notices (native WooCommerce output, restyled to the token system) ---------- */

.woocommerce-notices-wrapper {
	margin-bottom: var(--urban-space-6);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	padding: var(--urban-space-4) var(--urban-space-5);
	border: 1px solid var(--urban-border);
	border-left-width: 3px;
	border-radius: var(--urban-radius-sm);
	font-size: var(--urban-text-small-size);
	list-style: none;
}

.woocommerce-message {
	border-left-color: var(--urban-success);
	color: var(--urban-success);
}

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

.woocommerce-message a.button,
.woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--urban-tap-target-min);
	padding: 0 var(--urban-space-5);
	margin-left: var(--urban-space-4);
	background-color: var(--urban-black);
	color: var(--urban-white);
	font-size: var(--urban-text-button-size);
	font-weight: 700;
	letter-spacing: var(--urban-text-button-tracking);
	text-transform: uppercase;
	text-decoration: none;
}

/* ---------- Breadcrumb ---------- */

.woocommerce-breadcrumb {
	margin: var(--urban-space-4) 0;
	color: var(--urban-text-muted);
	font-size: var(--urban-text-small-size);
}

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

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

/* ==================================================================
   Single product
   ================================================================== */

div.product {
	display: flex;
	flex-direction: column;
	gap: var(--urban-space-7);
	padding: var(--urban-space-6) 0 var(--urban-space-9);
}

@media (min-width: 1024px) {
	/*
	 * div.product has FOUR direct children in WooCommerce's own DOM, not
	 * two: the gallery, the summary, .woocommerce-tabs (description/
	 * additional-info panel), and the related-products section all sit as
	 * siblings here, not nested inside summary. With flex-direction:row and
	 * no wrap, all four fought for space in one row -- confirmed by
	 * measurement: gallery and summary compressed to ~42px each despite
	 * their own 50% flex-basis, because flex-shrink distributed across all
	 * four competing items, not just the intended two-column pair. Wrapping
	 * the row and forcing tabs/related to their own full-width row each
	 * (flex-basis:100% in a wrapped row always starts a new line) restores
	 * the intended gallery+summary side-by-side pair with tabs and related
	 * products stacked below, full width.
	 */
	div.product {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--urban-space-8);
	}

	div.product > .woocommerce-tabs,
	div.product > .related.products {
		flex: 1 1 100%;
		width: 100%;
	}

	/*
	 * WooCommerce's own woocommerce-layout.css carries float-based two-column
	 * rules for this exact structure -- `.woocommerce div.product div.images`
	 * (3 classes: .woocommerce/.product/.images -- the gallery's own class
	 * list includes "images") and `.woocommerce div.product div.summary`
	 * (2 classes, wins the element-count tiebreak against a 1-element
	 * override) -- both beat a plain `div.product > .woocommerce-product-gallery`
	 * / `.summary.entry-summary` selector on specificity, confirmed via
	 * CSS.getMatchedStylesForNode: float/width from those rules were still
	 * winning even with flex-basis:50% also applied, collapsing both columns
	 * to their content's min-width (~42px) instead of half the row. Matching
	 * WC's own selector shape with one extra qualifying class guarantees a
	 * win regardless of tiebreaks, and float/width/clear are reset
	 * explicitly rather than left for flex-basis to (theoretically) override,
	 * since that didn't hold in practice here.
	 */
	.woocommerce div.product div.images.woocommerce-product-gallery,
	.woocommerce-page div.product div.images.woocommerce-product-gallery {
		float: none;
		width: auto;
		/* flex-basis:50% ignores the row's own `gap`, so two 50% items plus
		   one gap between them overflow the container by exactly the gap's
		   width -- with flex-wrap:wrap that's enough to push the second
		   item onto its own line. calc() accounts for half the gap on each
		   item so the pair sums to exactly 100% - gap. Confirmed by
		   measurement: 620px + 620px + a 64px gap = 1304px against a
		   1240px container before this fix, both items were wrapping to
		   separate full-width rows instead of sharing one. */
		flex: 1 1 calc(50% - var(--urban-space-8) / 2);
		min-width: 0;
		/* Was position:sticky. A sticky item can only travel inside its
		   parent, and div.product also holds .woocommerce-tabs and the related
		   products, so the gallery kept following the reader down over the
		   Description size guide and Additional Information. Confirmed by
		   scrolling: images sat on top of the tab content from the tabs to the
		   bottom of div.product. Relative keeps the gallery in place above the
		   tabs and still anchors WooCommerce's zoom button. */
		position: relative;
	}

	.woocommerce div.product div.summary.entry-summary,
	.woocommerce-page div.product div.summary.entry-summary {
		float: none;
		width: auto;
		clear: none;
		flex: 1 1 calc(50% - var(--urban-space-8) / 2);
		min-width: 0;
	}
}

/* ---------- Gallery ---------- */
/* WooCommerce's own product-image.php / product-thumbnails.php own this
   markup entirely (native zoom/lightbox/slider JS, wc-product-gallery-*
   theme support already declared in inc/theme-setup.php) — layout only. */

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

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

.woocommerce-product-gallery .flex-control-thumbs li {
	width: calc(25% - var(--urban-space-2) * 3 / 4);
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	height: auto;
	display: block;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

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

/* ---------- Summary ---------- */

.summary.entry-summary {
	display: flex;
	flex-direction: column;
	gap: var(--urban-space-4);
}

.product_title.entry-title {
	margin: 0;
	font-size: var(--urban-text-h1-size);
	font-weight: var(--urban-text-h1-weight);
	letter-spacing: var(--urban-text-h1-tracking);
	line-height: var(--urban-text-h1-leading);
	color: var(--urban-black);
	text-transform: uppercase;
}

.summary .price {
	font-size: 1.375rem;
	font-weight: var(--urban-text-price-weight);
	color: var(--urban-black);
}

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

.summary .price del {
	opacity: 0.55;
	margin-right: var(--urban-space-3);
	font-size: 1rem;
}

.woocommerce-product-details__short-description {
	max-width: 40rem;
	color: var(--urban-text);
	font-size: var(--urban-text-body-size);
	line-height: var(--urban-text-body-leading);
}

/* ---------- Stock status ---------- */

p.stock {
	margin: 0;
	font-size: var(--urban-text-small-size);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

p.stock.out-of-stock {
	color: var(--urban-error);
}

p.stock.available-on-backorder {
	color: var(--urban-warning);
}

/* ---------- Variations form ---------- */
/* Native markup from single-product/add-to-cart/variable.php: a <table> of
   attribute selects. Restyled with CSS only, per the Phase 5 rule against
   replacing WooCommerce's variation logic — no template override, no JS. */

table.variations {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

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

table.variations tr {
	margin-bottom: var(--urban-space-4);
}

table.variations th.label {
	display: block;
	padding: 0 0 var(--urban-space-2);
	text-align: left;
	font-size: var(--urban-text-label-size);
	font-weight: var(--urban-text-label-weight);
	letter-spacing: var(--urban-text-label-tracking);
	text-transform: uppercase;
	color: var(--urban-text);
}

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

table.variations select {
	width: 100%;
	min-height: var(--urban-input-height);
	padding: var(--urban-space-3) var(--urban-space-4);
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-sm);
	background-color: var(--urban-surface);
	color: var(--urban-text);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-body-size);
}

table.variations select:focus {
	outline: 2px solid var(--urban-gold);
	outline-offset: 1px;
	border-color: var(--urban-gold);
}

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

/* ---------- Color family (separate products shown as one) ---------- */
/* Printed by inc/color-families.php just before the native variation form.
   Every color is a link. Colors on this page's own product switch the native
   dropdown, colors on the sibling product open that product. The native Color
   row is hidden only where this row exists; it is still in the page and
   still holds the value that Add to cart uses. */

/* No bottom margin: the summary's own flex gap already spaces it. */
.urban-color-family {
	margin: 0;
}

.urban-color-family__label {
	margin: 0 0 var(--urban-space-2);
	font-size: var(--urban-text-label-size);
	font-weight: var(--urban-text-label-weight);
	letter-spacing: var(--urban-text-label-tracking);
	text-transform: uppercase;
	color: var(--urban-text);
}

.urban-color-family__current {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.urban-color-family__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--urban-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.urban-color-family__item {
	margin: 0;
	list-style: none;
}

.urban-color-family__option {
	display: inline-flex;
	align-items: center;
	gap: var(--urban-space-2);
	min-height: 2.75rem;
	padding: 0 var(--urban-space-4) 0 var(--urban-space-3);
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-pill);
	background: var(--urban-white);
	color: var(--urban-text);
	font-size: var(--urban-text-small-size);
	font-weight: 600;
	text-decoration: none;
}

.urban-color-family__option:hover {
	border-color: var(--urban-black);
}

.urban-color-family__option.is-current {
	border-color: var(--urban-black);
	box-shadow: inset 0 0 0 1px var(--urban-black);
}

/* Black ring instead of the shared gold one (gold is about 2.2:1 on white).
   Both :focus and :focus-visible are set so accessibility.css cannot bring the
   gold ring back. */
.urban-color-family__option:focus,
.urban-color-family__option:focus-visible {
	outline: 3px solid var(--urban-black);
	outline-offset: 2px;
}

.urban-color-family__option:focus:not(:focus-visible) {
	outline: 0;
}

.urban-color-family__dot {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--urban-swatch);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.urban-color-family + form.variations_form table.variations tr:has(select[name="attribute_color"]) {
	display: none;
}

.woocommerce-variation-price .price {
	font-size: 1.25rem;
}

.woocommerce-variation-availability p.stock {
	margin-top: var(--urban-space-2);
}

/* ---------- Quantity + Add to cart ---------- */

.quantity {
	display: inline-flex;
}

.quantity .qty {
	width: 4.5rem;
	min-height: var(--urban-input-height);
	padding: var(--urban-space-3);
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-sm);
	background-color: var(--urban-surface);
	color: var(--urban-text);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-body-size);
	text-align: center;
}

.quantity .qty:focus {
	outline: 2px solid var(--urban-gold);
	outline-offset: 1px;
	border-color: var(--urban-gold);
}

.single_add_to_cart_button,
form.cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--urban-btn-height);
	padding: 0 var(--urban-space-7);
	background-color: var(--urban-black);
	border: 1px solid var(--urban-black);
	color: var(--urban-white);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-button-size);
	font-weight: 700;
	letter-spacing: var(--urban-text-button-tracking);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.single_add_to_cart_button:hover,
form.cart .button:hover {
	background-color: transparent;
	color: var(--urban-black);
}

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

form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--urban-space-4);
}

/* Keeps Add to Cart reachable on small screens without a fixed/sticky bar --
   the spec asks for it to "remain visible and easy to use", not necessarily
   pinned; a pinned bar duplicating the button is its own added-complexity
   decision better left for a dedicated conversion-focused pass. */
@media (max-width: 1023px) {
	.summary.entry-summary {
		gap: var(--urban-space-5);
	}
}

/* ---------- Meta (SKU / categories) ---------- */

.product_meta {
	padding-top: var(--urban-space-4);
	border-top: 1px solid var(--urban-border);
	color: var(--urban-text-muted);
	font-size: var(--urban-text-small-size);
}

.product_meta > span {
	display: block;
	margin-bottom: var(--urban-space-1);
}

.product_meta a {
	color: var(--urban-text-muted);
	text-decoration: underline;
}

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

/* ---------- Tabs (description / additional information) ---------- */

.woocommerce-tabs {
	margin-top: var(--urban-space-8);
	padding-top: var(--urban-space-7);
	border-top: 1px solid var(--urban-border);
}

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

.woocommerce-tabs ul.tabs li {
	list-style: none;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding-bottom: var(--urban-space-3);
	color: var(--urban-text-muted);
	font-size: var(--urban-text-label-size);
	font-weight: 700;
	letter-spacing: var(--urban-text-label-tracking);
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--urban-black);
	border-bottom: 2px solid var(--urban-gold);
}

.woocommerce-tabs .panel h2 {
	font-size: var(--urban-text-h3-size);
	margin-bottom: var(--urban-space-4);
}

/* The Tapstitch size guide in the product description is a table with an
   inline width of 1024px. On screens narrower than about 1064px that is wider
   than the tab, so it pushed the whole page sideways. The description panel
   scrolls sideways instead; the table itself is left exactly as it is. */
.woocommerce-tabs .woocommerce-Tabs-panel--description {
	overflow-x: auto;
}

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--urban-text-small-size);
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: var(--urban-space-3) var(--urban-space-2);
	border-bottom: 1px solid var(--urban-border);
	text-align: left;
}

.woocommerce-tabs table.shop_attributes th {
	width: 33%;
	font-weight: 600;
	color: var(--urban-text);
}

/* ---------- Related products ---------- */

.related.products {
	margin-top: var(--urban-space-9);
	padding-top: var(--urban-space-7);
	border-top: 1px solid var(--urban-border);
}

.related.products > h2 {
	margin: 0 0 var(--urban-space-6);
	font-size: var(--urban-text-h2-size);
	font-weight: var(--urban-text-h2-weight);
	color: var(--urban-black);
}

/* ==================================================================
   Cart (Phase 5, Part 5)
   ================================================================== */
/* cart/cart.php (WooCommerce 11.0.0) is used unmodified: the line-item
   table and .cart-collaterals (cross-sells + totals) are two direct
   siblings inside the theme's own .urban-container wrapper -- a much
   simpler shape than single-product's four-sibling row, so no
   flex-wrap/calc(gap) juggling is needed here, just a two-column split at
   desktop. */

.woocommerce-cart .urban-container {
	padding-top: var(--urban-space-6);
	padding-bottom: var(--urban-space-9);
}

@media (min-width: 1024px) {
	.woocommerce-cart .urban-container {
		display: flex;
		align-items: flex-start;
		gap: var(--urban-space-8);
	}

	.woocommerce-cart-form {
		flex: 1 1 calc(65% - var(--urban-space-8) / 2);
		min-width: 0;
	}

	.cart-collaterals {
		flex: 1 1 calc(35% - var(--urban-space-8) / 2);
		min-width: 0;
		position: sticky;
		top: calc(var(--urban-header-height) + var(--urban-space-5));
	}
}

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

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

table.cart thead th {
	font-size: var(--urban-text-small-size);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--urban-text-muted);
}

table.cart td.product-thumbnail img {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	display: block;
}

table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--urban-tap-target-min);
	height: var(--urban-tap-target-min);
	color: var(--urban-text-muted);
	text-decoration: none;
	font-size: 1.25rem;
	line-height: 1;
}

table.cart td.product-remove a.remove:hover {
	color: var(--urban-error);
}

table.cart td.actions {
	border-bottom: none;
	padding-top: var(--urban-space-5);
}

/* Mobile: WooCommerce's own shop_table_responsive class (already on this
   table via cart.php) switches each <td> to a labeled block row below a
   breakpoint using the data-title attribute already in the markup -- native
   behavior, just needs the label actually shown and the table chrome
   removed so it doesn't look like a broken table. */
@media (max-width: 767px) {
	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(--urban-space-4) 0;
		border-bottom: 1px solid var(--urban-border);
	}

	table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--urban-space-3);
		border-bottom: none;
		padding: var(--urban-space-2) 0;
	}

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

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

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

.cart_totals h2 {
	font-size: var(--urban-text-h3-size);
	margin: 0 0 var(--urban-space-4);
}

.cart_totals table {
	margin-bottom: var(--urban-space-5);
}

.cart_totals .order-total .woocommerce-Price-amount {
	font-weight: 700;
	font-size: var(--urban-text-h3-size);
}

.wc-proceed-to-checkout {
	display: flex;
}

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

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

.coupon .input-text {
	min-height: var(--urban-input-height);
	padding: 0 var(--urban-space-3);
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-sm);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-body-size);
}

.coupon .input-text:focus {
	outline: 2px solid var(--urban-gold);
	outline-offset: 1px;
	border-color: var(--urban-gold);
}

/* Native buttons (Update cart / Apply coupon / proceed to checkout) all
   share form.cart's .button styling already defined above for Add to Cart
   -- one visual system, no separate button component needed here. */
.woocommerce-cart-form .button,
.checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--urban-btn-height);
	padding: 0 var(--urban-space-6);
	background-color: var(--urban-black);
	border: 1px solid var(--urban-black);
	color: var(--urban-white);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-button-size);
	font-weight: 700;
	letter-spacing: var(--urban-text-button-tracking);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-cart-form .button:hover,
.checkout-button:hover {
	background-color: transparent;
	color: var(--urban-black);
}

.woocommerce-cart-form .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * WooCommerce's newer bundled CSS ships a `.button.alt` rule (WC's own
 * brand purple, #7f54b3) wrapped in `:where(...)` for exactly the opposite
 * of what happened here -- :where() carries zero specificity so themes CAN
 * override it easily -- but the part left outside :where(), `.woocommerce
 * ... button.button.alt`, is still 3 classes + 1 element, beating every
 * button rule above (1-2 classes each). Confirmed via
 * CSS.getMatchedStylesForNode: both the single-product Add to Cart button
 * and the Cart/Checkout "Proceed to checkout" button carry `button alt`
 * (WooCommerce's own native class, not added by this theme) and were
 * rendering in WC's purple instead of the site's black. One override
 * matching that specificity fixes every `.button.alt` site-wide at once,
 * including the Checkout page's Place Order button in a later phase.
 *
 * First attempt (`.woocommerce .button.alt`, 3 classes) lost to WC's own
 * 3-classes-plus-element-type branch. Second attempt added `:root` (a valid
 * selector counted as a class, without needing to match a specific element
 * type) to reach 4 classes, confirmed via element.matches() to genuinely
 * match the button -- and STILL lost: computed background-color stayed
 * WC's purple, even though nothing in CSS.getMatchedStylesForNode showed a
 * competing rule beating it. Whatever the exact cause (a WC stylesheet this
 * investigation didn't find, still-disabled button state on the product
 * page carrying WC's own extra `.disabled` class as a 5th qualifier, or a
 * DevTools Protocol reporting gap rather than an actual cascade loss), two
 * independently-verified-correct specificity escalations both failed in
 * practice. `!important` is the project's own documented exception for
 * exactly this situation -- genuinely unavoidable, narrowly scoped to one
 * rule, not a substitute for getting specificity right the two times that
 * was actually possible elsewhere in this file.
 */
:root .woocommerce .button.alt,
:root .woocommerce-page .button.alt {
	background-color: var(--urban-black) !important;
	border-color: var(--urban-black) !important;
	color: var(--urban-white) !important;
}

:root .woocommerce .button.alt:hover,
:root .woocommerce-page .button.alt:hover {
	background-color: transparent !important;
	color: var(--urban-black) !important;
}

/* ==================================================================
   My Account (Phase 5, Part 6)
   ================================================================== */
/* myaccount/my-account.php (WooCommerce 3.5.0) is used unmodified:
   navigation + content are two direct siblings, same simple pattern as
   Cart. WooCommerce's own default (woocommerce-layout.css) is a float
   30%/68% split -- converted to flex here for consistency with the rest
   of the site's layout system, resetting float/width explicitly rather
   than only adding flex properties (see the single-product gallery fix
   above for why an add-only approach doesn't reliably win against
   WooCommerce's own higher-specificity selectors). */

.woocommerce-account .urban-container {
	padding-top: var(--urban-space-6);
	padding-bottom: var(--urban-space-9);
}

@media (min-width: 1024px) {
	.woocommerce-account .urban-container {
		display: flex;
		align-items: flex-start;
		gap: var(--urban-space-8);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-page .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
		flex: 0 0 calc(25% - var(--urban-space-8) / 2);
		min-width: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-page .woocommerce-MyAccount-content {
		float: none;
		width: auto;
		flex: 1 1 calc(75% - var(--urban-space-8) / 2);
		min-width: 0;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--urban-space-1);
	border-bottom: 1px solid var(--urban-border);
	padding-bottom: var(--urban-space-5);
	margin-bottom: var(--urban-space-5);
}

@media (min-width: 1024px) {
	.woocommerce-MyAccount-navigation ul {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--urban-space-3) var(--urban-space-2);
	min-height: var(--urban-tap-target-min);
	display: flex;
	align-items: center;
	color: var(--urban-text);
	text-decoration: none;
	font-size: var(--urban-text-small-size);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce-MyAccount-navigation li a:hover {
	color: var(--urban-black);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--urban-black);
	box-shadow: inset 3px 0 0 var(--urban-gold);
	padding-left: var(--urban-space-3);
}

.woocommerce-MyAccount-content table.shop_table {
	margin-bottom: var(--urban-space-6);
}

.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--urban-btn-height);
	padding: 0 var(--urban-space-6);
	background-color: var(--urban-black);
	border: 1px solid var(--urban-black);
	color: var(--urban-white);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-button-size);
	font-weight: 700;
	letter-spacing: var(--urban-text-button-tracking);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content .button:hover {
	background-color: transparent;
	color: var(--urban-black);
}

.woocommerce-form-row,
.woocommerce-MyAccount-content .form-row,
.woocommerce-checkout .form-row {
	margin-bottom: var(--urban-space-4);
}

.woocommerce-form-row label,
.woocommerce-MyAccount-content .form-row label,
.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: var(--urban-space-2);
	font-size: var(--urban-text-small-size);
	font-weight: 600;
}

.woocommerce-form-row .input-text,
.woocommerce-form-row select,
.woocommerce-MyAccount-content .input-text,
.woocommerce-MyAccount-content select,
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
	width: 100%;
	min-height: var(--urban-input-height);
	padding: 0 var(--urban-space-3);
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-sm);
	font-family: var(--urban-font-family);
	font-size: var(--urban-text-body-size);
	background-color: var(--urban-white);
}

.woocommerce-form-row .input-text:focus,
.woocommerce-form-row select:focus,
.woocommerce-MyAccount-content .input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus {
	outline: 2px solid var(--urban-gold);
	outline-offset: 1px;
	border-color: var(--urban-gold);
}

.woocommerce-account .addresses .title h3 {
	font-size: var(--urban-text-h3-size);
}

.woocommerce-account .addresses .title .edit {
	color: var(--urban-text-muted);
}

/* ==================================================================
   Checkout (Phase 5, Part 7 -- last, most scrutiny)
   ================================================================== */
/* checkout/form-checkout.php (WooCommerce 9.4.0) is used unmodified.
   Unlike Cart's two-sibling shape, <form class="checkout"> has THREE
   direct children -- #customer_details (billing+shipping), an
   <h3 id="order_review_heading">, and #order_review -- confirmed by
   reading the actual template rather than assumed, precisely because the
   single-product page's four-sibling trap (Part 4) already proved
   assuming a simple pair is unsafe. Targeting form.checkout itself as the
   grid container (rather than a distant ancestor the way Cart's flex rule
   does) sidesteps any uncertainty about how many DOM levels sit between
   the theme's own page.php wrapper and this form -- the_content() is
   filtered to return do_shortcode('[woocommerce_checkout]') directly (see
   inc/woocommerce.php), so form.checkout itself is always the same
   distance from whatever calls the_content(). CSS Grid (not flex) is used
   deliberately: three named children can be placed by grid-column/-row
   directly, without the flex-basis-vs-gap percentage collision Part 4's
   gallery fix had to work around. */

.woocommerce-checkout .urban-container {
	padding-top: var(--urban-space-6);
	padding-bottom: var(--urban-space-9);
}

@media (min-width: 1024px) {
	form.checkout {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: var(--urban-space-8);
		align-items: start;
	}

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

	#order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	#order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: calc(var(--urban-header-height) + var(--urban-space-5));
	}
}

/* #customer_details's own .col2-set (billing/shipping side by side) keeps
   WooCommerce's classic float:left;width:48% at desktop -- genuinely
   simple, two equal columns, no clearfix-as-grid-item or gap-percentage
   issue applies here since this stays float-based, not flex/grid. Only
   restyled for spacing/stacking on mobile, where a single column reads
   better than two 48%-wide half-columns of form fields. */
#customer_details .col2-set {
	display: block;
}

@media (max-width: 767px) {
	#customer_details .col-1,
	#customer_details .col-2 {
		float: none;
		width: 100%;
	}
}

#customer_details .col-2 {
	margin-top: var(--urban-space-6);
}

@media (min-width: 768px) {
	#customer_details .col-2 {
		margin-top: 0;
	}
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
	margin: 0 0 var(--urban-space-5);
	font-size: var(--urban-text-h3-size);
	font-weight: var(--urban-text-h3-weight);
	color: var(--urban-black);
}

.woocommerce-additional-fields {
	margin-top: var(--urban-space-6);
}

.woocommerce-additional-fields h3 {
	margin: 0 0 var(--urban-space-4);
	font-size: var(--urban-text-h3-size);
	color: var(--urban-black);
}

#order_review table.shop_table {
	margin-bottom: var(--urban-space-5);
}

/* ---------- Payment methods ---------- */

ul.payment_methods,
ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--urban-space-5);
	padding: 0;
	border: 1px solid var(--urban-border);
	border-radius: var(--urban-radius-sm);
	overflow: hidden;
}

ul.payment_methods li.wc_payment_method {
	padding: var(--urban-space-4);
	border-bottom: 1px solid var(--urban-border);
}

ul.payment_methods li.wc_payment_method:last-child {
	border-bottom: none;
}

ul.payment_methods .input-radio {
	margin-right: var(--urban-space-2);
}

ul.payment_methods label {
	font-weight: 600;
	cursor: pointer;
}

.payment_box {
	margin-top: var(--urban-space-3);
	padding-top: var(--urban-space-3);
	font-size: var(--urban-text-small-size);
	color: var(--urban-text-muted);
}

/* ---------- Terms / privacy / Place Order ---------- */

.woocommerce-terms-and-conditions-wrapper {
	margin: var(--urban-space-5) 0;
}

.woocommerce-privacy-policy-text {
	margin-bottom: var(--urban-space-3);
	font-size: var(--urban-text-small-size);
	color: var(--urban-text-muted);
}

.woocommerce-privacy-policy-text p {
	margin: 0 0 var(--urban-space-2);
}

.woocommerce-terms-and-conditions-wrapper .form-row {
	display: flex;
	align-items: flex-start;
	gap: var(--urban-space-2);
}

.woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--urban-space-2);
	font-size: var(--urban-text-small-size);
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-terms-and-conditions-wrapper input.input-checkbox {
	margin-top: 0.2em;
	min-width: 1.125rem;
	min-height: 1.125rem;
}

.place-order {
	margin-top: var(--urban-space-5);
}

.place-order #place_order {
	width: 100%;
}

@media (min-width: 480px) {
	.place-order #place_order {
		width: auto;
		min-width: 14rem;
	}
}