/* ============================================================================
   CAPTAIN PIPE — SHOP GRID  (PHASE SHOP-01)
   Scope: WooCommerce archive only (Shop / product category / product tag).
   Not loaded on Single Product, Cart, Checkout or My Account.
   Reuses the site-wide design-system tokens; no new colours invented.
   ========================================================================== */

/* ---- Breadcrumb + title -------------------------------------------- */
.woocommerce-breadcrumb {
	font-family: var(--cs-font-sans);
	font-size: 0.8125rem;
	color: var(--cs-muted);
	margin: 0 0 1.5rem;
}
.woocommerce-breadcrumb a {
	color: var(--cs-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--cs-line);
}
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
	color: var(--cs-ink);
	border-color: var(--cs-ink);
}
.woocommerce-products-header {
	margin-bottom: 0.25rem;
}
.woocommerce-products-header__title.page-title {
	font-family: var(--cs-font-serif);
	font-size: var(--cs-fs-h2);
	line-height: var(--cs-lh-snug);
	color: var(--cs-ink);
	margin: 0;
}

/* ---- Toolbar: result count + sorting -------------------------------- */
.cs-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin: 1.5rem 0 clamp(2rem, 4vw, 3rem);
	padding-block: 1rem;
	border-top: 1px solid var(--cs-line);
	border-bottom: 1px solid var(--cs-line);
}
.cs-shop-toolbar .woocommerce-result-count {
	float: none;
	margin: 0;
	font-family: var(--cs-font-sans);
	font-size: 0.875rem;
	color: var(--cs-ink-soft);
}
.cs-shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0;
}
.cs-shop-toolbar .woocommerce-ordering select.orderby {
	font-family: var(--cs-font-sans);
	font-size: 0.8125rem;
	color: var(--cs-ink);
	background: var(--cs-bg);
	border: 1px solid var(--cs-line);
	border-radius: 0;
	padding: 0.6rem 2rem 0.6rem 0.9rem;
	cursor: pointer;
	transition: border-color var(--cs-dur) var(--cs-ease);
}
.cs-shop-toolbar .woocommerce-ordering select.orderby:hover,
.cs-shop-toolbar .woocommerce-ordering select.orderby:focus-visible {
	border-color: var(--cs-ink);
}

/* ============================================================
   GRID — mobile-first: 1 column, 2 (tablet), 4 (desktop)
   minmax(0,1fr) prevents grid blowout / horizontal overflow.
   ============================================================ */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
	list-style: none;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

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

/* ============================================================
   CARD — li.product has exactly two children in WooCommerce's own
   markup: the big link (image+eyebrow+title+price) and, as a SIBLING,
   the Add to cart button. Making li.product a column flexbox with the
   link set to flex:1 is what pins every button to the same bottom
   line, and what gives short/long titles equal card height - no
   JS measurement, no fixed pixel heights.
   ============================================================ */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
	float: none;
	width: auto;
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--cs-bg);
	border: 1px solid var(--cs-line);
	border-radius: 2px;
	transition: transform var(--cs-dur) var(--cs-ease),
	            box-shadow var(--cs-dur) var(--cs-ease),
	            border-color var(--cs-dur) var(--cs-ease);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -18px rgba(22, 21, 15, 0.16);
	border-color: var(--cs-ink);
}

/* The big link: image + eyebrow + title + price. flex:1 makes it absorb
   all the leftover vertical space in the card, which is exactly the
   "flexible space" that keeps every Add to cart button on one line. */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: var(--cs-ink);
}

/* ---- Image: uniform box, real proportion, never cropped/stretched --- */
.woocommerce ul.products li.product .cs-shop-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	/* PRODUCT-IMAGE-TRANSPARENCY-01: transparent, not --cs-surface — the
	   product photos are now real cutouts (no baked-in white canvas), so
	   they float straight on the card's own white background instead of
	   sitting in a separate grey box. */
	background: transparent;
	margin-bottom: 1.25rem;
	/* Very light, premium studio-style shadow — replaces whatever soft
	   shadow used to be baked into the old white-background photos. */
	filter: drop-shadow(0 10px 14px rgba(22, 21, 15, 0.12));
	transition: transform 0.3s var(--cs-ease);
}
.woocommerce ul.products li.product:hover .cs-shop-card__img {
	transform: scale(1.02);
}

/* ---- Eyebrow / category --------------------------------------- */
.woocommerce ul.products li.product .cs-shop-card__eyebrow {
	display: block;
	font-family: var(--cs-font-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cs-muted);
	margin-bottom: 0.4rem;
}

/* ---- Title: reserved, uniform height for short AND long names ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cs-font-serif);
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 500;
	color: var(--cs-ink);
	margin: 0 0 0.5rem;
	/* Reserve 3 lines' worth of height even for a one-line name, so price and
	   button stay aligned across a row; a name longer than 3 lines is
	   clamped with an ellipsis instead of breaking the grid (none of the
	   current 23 official names are anywhere near that long). */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 3);
}

/* ---- Price ------------------------------------------------- */
.woocommerce ul.products li.product .price {
	display: block;
	font-family: var(--cs-font-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--cs-ink);
	margin: 0;
}
.woocommerce ul.products li.product .price del {
	font-weight: 400;
	color: var(--cs-muted);
	margin-right: 0.4em;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* ---- Add to cart: pinned to the bottom, same line across a row --- */
.woocommerce ul.products li.product a.add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 1.25rem;
	padding: 0.9rem 1.5rem;
	font-family: var(--cs-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cs-accent-ink);
	background: var(--cs-accent);
	border: 1px solid var(--cs-accent);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--cs-dur) var(--cs-ease),
	            color var(--cs-dur) var(--cs-ease);
}
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:focus-visible {
	background: transparent;
	color: var(--cs-accent);
}
/* Native WooCommerce AJAX add-to-cart states - untouched behaviour, just
   styled to stay legible instead of showing the default WC spinner look. */
.woocommerce ul.products li.product a.add_to_cart_button.loading {
	opacity: 0.55;
}
.woocommerce ul.products li.product a.add_to_cart_button.added::after {
	content: "\2713";
	margin-left: 0.5em;
}

/* ---- Pagination ------------------------------------------- */
.woocommerce-pagination {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
}
.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	font-family: var(--cs-font-sans);
	font-size: 0.8125rem;
	color: var(--cs-ink-soft);
	text-decoration: none;
	border: 1px solid transparent;
	transition: border-color var(--cs-dur) var(--cs-ease),
	            color var(--cs-dur) var(--cs-ease);
}
.woocommerce-pagination .page-numbers.current {
	color: var(--cs-ink);
	border-color: var(--cs-line);
	font-weight: 600;
}
a.page-numbers:hover,
a.page-numbers:focus-visible {
	color: var(--cs-ink);
	border-color: var(--cs-ink);
}

/* ---- Motion preference -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product .cs-shop-card__img,
	.woocommerce ul.products li.product a.add_to_cart_button,
	.woocommerce-pagination .page-numbers {
		transition: none;
	}
	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}