/**
 * WooCommerce product loop — shared by the shop archive, category/tag
 * archives, and the homepage's [products] teaser section. All native
 * ul.products/li.product markup: price range and "Select Sizes" (variable
 * products) are WooCommerce's own default behavior, only restyled here —
 * no custom loop template, per CLAUDE.md.
 *
 * Current WooCommerce nests the image, title, AND price all inside the same
 * <a class="woocommerce-loop-product__link"> (older versions only put the
 * image there, which is what this file originally assumed) — .button stays
 * a sibling after the link. The link is styled as a column flex container
 * below so title/price stack under the image instead of running horizontally
 * and overflowing the card.
 */

/* Storefront's WooCommerce stylesheet clearfixes this list:
	 ul.products::before, ul.products::after { content: ""; display: table }
   Harmless while the list was floated, but a generated box inside a grid
   container becomes a GRID ITEM. ::before therefore took cell 1 and pushed
   every product one cell along -- the empty top-left card -- while ::after
   claimed a cell at the end. Killing the generated content removes both
   phantom items; there is nothing left to clear now that nothing floats.
   !important rather than load order: Storefront's rule has identical
   specificity, so whichever stylesheet prints last would otherwise win, and
   that ordering is not ours to guarantee. */
ul.products::before,
ul.products::after {
	content: none !important;
}

ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Storefront's own grid CSS (keyed to the "columns-3" class WooCommerce
   adds to ul.products) sets an explicit float + percentage width on
   li.product -- confirmed via computed styles: the grid container split
   correctly into 3 equal tracks, but each card sat at ~103px wide inside
   a 338px track, floated left, leaving a large empty gap and forcing its
   100%-width image to render tiny. !important needed to reliably beat it,
   matching the pattern already used elsewhere in this theme for the same
   reason (see the header override in altitude-aminos.css). */
ul.products li.product {
	background: var(--navy-800);
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.08);
	transition: transform .18s ease, box-shadow .18s ease;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left;
	float: none !important;
	width: auto !important;
	list-style: none;
	position: relative;
}
ul.products li.product:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }

ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
ul.products li.product a.woocommerce-loop-product__link img {
	aspect-ratio: 4 / 3.1;
	width: 100%;
	object-fit: contain;
	box-sizing: border-box;
	padding: 36px;
	margin: 0;
	background: radial-gradient(120% 140% at 20% 0%, var(--blue-600), var(--navy-950));
}
ul.products li.product span.onsale {
	position: absolute;
	top: 14px; left: 14px;
	min-width: 0;
	background: var(--cyan-400);
	color: var(--navy-950);
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .03em;
	padding: 4px 10px;
	border-radius: 999px;
	margin: 0;
	line-height: 1;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 19px;
	padding: 20px 22px 0;
	margin: 0;
	color: var(--ice-100);
}
ul.products li.product .price {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 16px;
	padding: 8px 22px 0;
	display: block;
	color: var(--ice-100);
}
ul.products li.product .price del {
	color: var(--slate-500);
	opacity: 1;
	font-weight: 400;
	margin-right: 6px;
}
ul.products li.product .price ins {
	text-decoration: none;
	color: var(--ice-100);
}
ul.products li.product .star-rating {
	margin: 8px 22px 0;
	font-size: 13px;
}
ul.products li.product .button {
	margin: 16px 22px 22px;
	background: var(--navy-950);
	color: #fff;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	display: inline-block;
	width: auto;
	text-align: center;
}
ul.products li.product .button:hover { background: var(--blue-600); }

/* === Archive header — eyebrow (altitude_shop_archive_eyebrow) + native
   page title (woocommerce_product_archive_description) + native category
   description (woocommerce_taxonomy_archive_description) === */
.woocommerce-products-header__title.page-title {
	font-size: clamp(28px, 3.4vw, 40px);
	margin: 10px 0 20px;
}
.term-description {
	color: var(--slate-700);
	max-width: 640px;
	font-size: 15px;
	margin-bottom: 24px;
}

/* Full-width grid, no filter sidebar — altitude_remove_shop_sidebar()
   unhooks the sidebar itself; this is the CSS-level backstop in case
   Storefront's own width class doesn't react to that unhook. */
body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary,
body.post-type-archive-product .content-area,
body.tax-product_cat .content-area,
body.tax-product_tag .content-area {
	width: 100%;
	float: none;
}
body.post-type-archive-product #secondary,
body.tax-product_cat #secondary,
body.tax-product_tag #secondary {
	display: none;
}

/* === Archive-only chrome: result count + ordering dropdown === */
.woocommerce-result-count {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--slate-500);
}
.woocommerce-ordering select {
	font-family: var(--font-body);
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.12);
	background: var(--navy-800);
	color: var(--ice-200);
}

/* === Pagination === */
.woocommerce-pagination ul {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 40px 0 0;
}
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.12);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--slate-700);
}
.woocommerce-pagination .page-numbers.current {
	background: var(--blue-600);
	border-color: var(--blue-600);
	color: #fff;
}
.woocommerce-pagination .page-numbers:hover:not(.current) { border-color: var(--cyan-400); color: var(--cyan-400); }

@media (max-width: 980px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	ul.products { grid-template-columns: 1fr; }
}