/* =========================================================================
   Kinetic Run — WooCommerce layout contract.
   This is the ONLY structural stylesheet. Product grids, the clearfix reset,
   the product-card height chain and the single-product columns are defined
   here and must never be redefined in style.css or in inline styles.

   Loaded last (see functions.php) so it can neutralise the generic
   `ul.products` rules that Astra and WooCommerce ship with.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Clearfix reset.
   WooCommerce and Astra rely on ::before/::after floats. Every grid below
   must switch them off or the first row collapses.
   ------------------------------------------------------------------------- */

ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}

/* Every grid branch repeats the reset explicitly, so no single branch can
   inherit a clearfix from Astra or WooCommerce later. */
.home-product-grid ul.products::before,
.home-product-grid ul.products::after,
body.woocommerce-shop ul.products::before,
body.woocommerce-shop ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
section.related.products > ul.products::before,
section.related.products > ul.products::after,
section.upsells.products > ul.products::before,
section.upsells.products > ul.products::after,
section.related.products,
section.upsells.products {
	display: block;
}

section.related.products > ul.products::before,
section.related.products > ul.products::after,
section.upsells.products > ul.products::before,
section.upsells.products > ul.products::after,
body.woocommerce-shop ul.products::before,
body.woocommerce-shop ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
.home-product-grid ul.products::before,
.home-product-grid ul.products::after {
	display: none !important;
	content: none !important;
}

/* -------------------------------------------------------------------------
   2. The only allowed grid entry points.
   Home shortcode grid, Shop archive, Related products, Upsells.
   Nothing else may turn a product list into a grid.
   ------------------------------------------------------------------------- */

.home-product-grid ul.products,
body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products,
section.related.products > ul.products,
section.upsells.products > ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	column-gap: var(--kr-space-md);
	row-gap: var(--kr-space-lg);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	clear: both;
}

@media (max-width: 1024px) {
	.home-product-grid ul.products,
	body.woocommerce-shop ul.products,
	body.post-type-archive-product ul.products,
	section.related.products > ul.products,
	section.upsells.products > ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.home-product-grid ul.products,
	body.woocommerce-shop ul.products,
	body.post-type-archive-product ul.products,
	section.related.products > ul.products,
	section.upsells.products > ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: var(--kr-space-sm);
		row-gap: var(--kr-space-md);
	}
}

/* The section wrappers themselves stay block level; only their direct
   ul.products child becomes a grid. */
section.related.products,
section.upsells.products {
	display: block !important;
}

section.related.products > h2,
section.upsells.products > h2 {
	margin-bottom: var(--kr-space-md);
	font-size: var(--kr-text-lg);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   3. Grid children reset.
   WooCommerce floats and widths must be dropped or columns overflow.
   ------------------------------------------------------------------------- */

.home-product-grid ul.products > li,
body.woocommerce-shop ul.products > li,
body.post-type-archive-product ul.products > li,
section.related.products > ul.products > li,
section.upsells.products > ul.products > li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
}

/* -------------------------------------------------------------------------
   4. Product card height chain.
   li.product-card (flex column) > .product-card__image (aspect-ratio box)
   > a (100% x 100%) > img (cover).
   The body sits below the media box and never overlaps it.
   ------------------------------------------------------------------------- */

li.product-card,
ul.products li.product.product-card {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	position: relative;
	background-color: var(--kr-paper);
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

li.product-card:hover,
ul.products li.product.product-card:hover {
	box-shadow: var(--kr-shadow-hover);
	border-color: var(--kr-line-strong);
}

.product-card__image {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--kr-surface-2);
	flex: 0 0 auto;
}

/* Beats Astra's `ul.products li.product a img { height:auto }`. */
ul.products li.product .product-card__image > a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

ul.products li.product .product-card__image > a img,
.product-card__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0 !important;
	object-fit: cover !important;
	box-shadow: none;
}

/* Sale / badge placement stays inside the media box. */
li.product-card .onsale {
	position: absolute;
	top: var(--kr-space-sm);
	left: var(--kr-space-sm);
	right: auto;
	z-index: 2;
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--kr-radius-sm);
	background-color: var(--kr-accent);
	color: var(--kr-on-accent);
	font-size: var(--kr-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	min-height: auto;
	line-height: 1.4;
}

.product-card__body {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--kr-space-md);
	background-color: var(--kr-paper);
}

.product-card__body .woocommerce-loop-product__title,
.product-card__body h2,
.product-card__body h3 {
	margin: 0;
	padding: 0;
	font-size: var(--kr-text-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--kr-ink);
}

.product-card__body a:not(.button) {
	color: inherit;
	text-decoration: none;
}

.product-card__body a:not(.button):hover {
	color: var(--kr-accent);
}

.product-card__body .price,
.product-card__body .woocommerce-Price-amount {
	margin: 0;
	font-size: var(--kr-text-sm);
	font-weight: 700;
	color: var(--kr-ink);
}

.product-card__body .price del {
	color: var(--kr-muted);
	font-weight: 400;
}

.product-card__body .price ins {
	background: transparent;
	color: var(--kr-accent);
}

.product-card__body .star-rating {
	margin: 0;
	font-size: 12px;
}

.product-card__body .button,
.product-card__body .add_to_cart_button {
	margin-top: auto;
	align-self: flex-start;
	padding: 10px 18px;
	border-radius: var(--kr-radius-sm);
	background-color: var(--kr-ink);
	color: var(--kr-paper);
	font-size: var(--kr-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.product-card__body .button:hover,
.product-card__body .add_to_cart_button:hover {
	background-color: var(--kr-accent);
	color: var(--kr-on-accent);
}

/* Astra hides its own on-card action button until the (now removed)
   thumbnail wrapper is hovered and positions it absolutely. Neutralise both,
   otherwise the add-to-cart control is invisible inside our card. */
.product-card__body .add_to_cart_button.ast-on-card-button,
.product-card__body .ast-on-card-button.button,
.product-card__body .ast-on-card-button {
	position: static !important;
	top: auto !important;
	right: auto !important;
	visibility: visible !important;
	opacity: 1 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	border-radius: var(--kr-radius-sm) !important;
	background-color: var(--kr-ink) !important;
	box-shadow: none !important;
	color: var(--kr-paper) !important;
}

.product-card__body .ast-on-card-button .ahfb-svg-iconset {
	display: none !important;
}

.product-card__body .ast-card-action-tooltip {
	display: none !important;
}

/* -------------------------------------------------------------------------
   5. Single product boundary.
   .product-main-grid holds the gallery and the purchase summary only.
   Tabs, Reviews, Upsells and Related Products stay outside of it.
   ------------------------------------------------------------------------- */

body.single-product .product-main-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	margin-bottom: var(--kr-section-gap);
}

@media (max-width: 900px) {
	body.single-product .product-main-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

body.single-product .product-main-grid > .product-gallery,
body.single-product .product-main-grid > .product-summary {
	min-width: 0;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Astra sizes the legacy gallery and summary columns; inside our grid both
   columns must fill the cell they were given. */
body.single-product .product-main-grid > .product-gallery .images,
body.single-product .product-main-grid > .product-gallery .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

body.single-product .product-main-grid > .product-summary {
	position: sticky;
	top: 32px;
}

@media (max-width: 900px) {
	body.single-product .product-main-grid > .product-summary {
		position: static;
	}
}

/* The detail gallery may show the whole garment with padding; the loop
   cards never use contain. */
body.single-product .product-gallery img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	background-color: var(--kr-surface-1);
	border-radius: var(--kr-radius-md);
}

/* Everything after the main grid is full width and clearly separated. */
body.single-product .woocommerce-tabs,
body.single-product #reviews,
body.single-product section.upsells.products,
body.single-product section.related.products {
	width: 100%;
	clear: both;
	margin-top: var(--kr-space-xl);
}

/* -------------------------------------------------------------------------
   6. Loop actions and shop chrome.
   ------------------------------------------------------------------------- */

.woocommerce-result-count,
.woocommerce-ordering {
	margin-bottom: var(--kr-space-md);
	font-size: var(--kr-text-sm);
	color: var(--kr-muted);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: var(--kr-space-xl) 0 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 8px 10px;
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius-sm);
	font-size: var(--kr-text-sm);
	text-decoration: none;
	color: var(--kr-ink);
}

.woocommerce-pagination .page-numbers .current {
	background-color: var(--kr-ink);
	border-color: var(--kr-ink);
	color: var(--kr-paper);
}

/* Placeholder artwork must fill the same box as a real photo. */
.product-card__image img.attachment-woocommerce_thumbnail,
.product-card__image img.wp-post-image {
	object-fit: cover !important;
}

/* -------------------------------------------------------------------------
   7. Variation swatches
   The default WooCommerce attribute select dropdown collapses to a small
   black rectangle inside the product card. Replace the select with a row of
   pill swatches that match the brand tokens.
   ------------------------------------------------------------------------- */

body.single-product .variations,
body.single-product .variations td,
body.single-product .variations tr {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

body.single-product .variations .label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--kr-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-muted);
}

body.single-product table.variations th.label {
	padding: 0 0 8px 0 !important;
}

body.single-product .variations select,
body.single-product .variations input[type="hidden"] {
	display: none !important;
}

/*
 * HARD KILL — the native control can never surface again.
 *
 * The swatch row used to render inside the shop loop as well. Away from
 * single-product the label/radio styling did not apply, so the bare
 * <input type="radio"> and <select> painted as black squares on every card.
 * These rules are deliberately NOT scoped to body.single-product: wherever a
 * swatch row exists, the native control stays invisible.
 */
.kr-swatches input[type="radio"],
.kr-swatches input[type="checkbox"],
.kr-swatches select,
.kr-swatches .kr-swatch > label > input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	opacity: 0 !important;
}

.kr-swatches,
ul.kr-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.kr-swatches .kr-swatch {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kr-swatches .kr-swatch label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 8px 12px;
	border: 1px solid var(--kr-line);
	border-radius: var(--kr-radius-sm);
	background-color: var(--kr-paper);
	color: var(--kr-ink);
	font-size: var(--kr-text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.kr-swatches .kr-swatch label:hover {
	border-color: var(--kr-ink);
}

.kr-swatches .kr-swatch.is-selected label {
	background-color: var(--kr-ink);
	border-color: var(--kr-ink);
	color: var(--kr-paper);
}

body.single-product .single_variation_wrap {
	margin-top: 12px;
}

body.single-product .woocommerce-variation-availability {
	margin-bottom: 12px;
	font-size: var(--kr-text-sm);
	color: var(--kr-muted);
}

/* -------------------------------------------------------------------------
   8. Kill every non-brand element Astra/WooCommerce injects into the card.
   These three all render as black boxes when their fonts or SVGs fail:
     .star-rating          -> star icon font (tofu blocks if not loaded)
     .ast-on-card-button   -> Astra bag-icon SVG (viewBox lower-cased by kses)
     .ahfb-svg-iconset     -> the icon wrapper inside it
   The theme only wants the title, price and one add-to-cart control, so
   remove the rest unconditionally.
   ------------------------------------------------------------------------- */

ul.products li.product .star-rating,
ul.products li.product .woocommerce-product-rating,
ul.products li.product .ast-on-card-button .ahfb-svg-iconset,
ul.products li.product .ast-on-card-button .ast-icon,
ul.products li.product .ast-on-card-button svg,
ul.products li.product .ast-card-action-tooltip,
.product-card__body .star-rating,
.product-card__body .woocommerce-product-rating,
.product-card__body .ast-on-card-button .ahfb-svg-iconset,
.product-card__body .ast-on-card-button .ast-icon,
.product-card__body .ast-on-card-button svg,
.product-card__body .ast-card-action-tooltip {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* The add-to-cart control itself stays, but loses the Astra positioning. */
.product-card__body .add_to_cart_button,
.product-card__body .button {
	position: static !important;
	float: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}