/* =============================================================================
   Sustainable Ply — WooCommerce shop archive
   Lifts the default WC product archive to match the editorial gallery / about /
   sustainability pages. Pure scoped CSS — no WC template overrides. Every rule
   is gated under `body.sp-shop-archive` so nothing leaks into single-product,
   cart, checkout, or any non-WC route.

   Design language borrowed from:
     - patterns/page-gallery.php (hero strip + sticky chips + grid)
     - assets/css/cards.css (.sp-card hover lift)
     - assets/css/buttons.css (ink-on-cream primary, outline secondary)

   Class targets (must stay in sync with WooCommerce 10.x):
     .woocommerce-products-header              archive title block (we hide it)
     ul.products / li.product                  default Products (Beta) grid
     .woocommerce-loop-product__link           anchor wrapping image + title
     .woocommerce-loop-product__title          product card title (h2/h3)
     .price                                    price span
     .button.add_to_cart_button                add-to-cart button
     .woocommerce-Price-amount                 amount inside .price
     .woocommerce-pagination                   numbered page links
     .woocommerce-info / .woocommerce-no-products-found  empty / notice states
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* Hide WooCommerce's own page-title / breadcrumb header — our hero replaces it */
/*                                                                              */
/* WC 10.x ships a block-based archive-product.html that renders a stack of:    */
/*   - wc-block-breadcrumbs (NOT .woocommerce-breadcrumb on block themes)       */
/*   - .wp-block-query-title  ("Shop" h1)                                       */
/*   - woocommerce/product-results  ("Showing all N results")                   */
/*   - woocommerce/catalog-sorting  (orderby select)                            */
/* All four need hiding for our hero to sit flush below the header.             */
/* --------------------------------------------------------------------------- */
body.sp-shop-archive .woocommerce-products-header,
body.sp-shop-archive .woocommerce-breadcrumb,
body.sp-shop-archive .wc-block-breadcrumbs,
body.sp-shop-archive .wp-block-woocommerce-breadcrumbs,
body.sp-shop-archive .wp-block-query-title,
body.sp-shop-archive [data-block-name="woocommerce/product-results"],
body.sp-shop-archive [data-block-name="woocommerce/breadcrumbs"],
body.sp-shop-archive [data-block-name="woocommerce/catalog-sorting"],
body.sp-shop-archive .wp-block-woocommerce-product-results-count,
body.sp-shop-archive .wp-block-woocommerce-catalog-sorting {
	display: none !important;
}

/* WooCommerce often wraps everything in <main class="woocommerce-notices-wrapper">
   or .wc-block-grid; remove its default top padding so the hero sits flush.    */
body.sp-shop-archive main,
body.sp-shop-archive .wp-site-blocks main {
	padding-block-start: 0;
}

/* --------------------------------------------------------------------------- */
/* Hero band — rhymes with .sp-gallery-page__hero                              */
/* --------------------------------------------------------------------------- */
.sp-shop-archive__hero {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(48px, 6vw, 96px);
	padding-inline: clamp(24px, 4vw, 64px);
	position: relative;
	overflow: hidden;
}

.sp-shop-archive__hero-chapter {
	position: absolute;
	top: 6%;
	right: clamp(-24px, -1vw, -8px);
	font-size: clamp(220px, 26vw, 380px);
	z-index: 0;
}

.sp-shop-archive__hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
}

.sp-shop-archive__hero-copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-lg);
	max-width: 880px;
}

.sp-shop-archive__hero-eyebrow {
	margin: 0;
}

.sp-shop-archive__hero-headline {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(48px, 6vw, 92px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--color-text);
}

.sp-shop-archive__hero-headline em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-shop-archive__hero-lead {
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0;
	max-width: 55ch;
}

.sp-shop-archive__hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm) var(--sp-md);
	margin-top: var(--sp-sm);
}

.sp-shop-archive__hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface);
}

.sp-shop-archive__hero-tag svg {
	flex-shrink: 0;
	stroke-width: 1.6;
}

/* --------------------------------------------------------------------------- */
/* Sort + filter bar — sticky, mirrors .sp-gallery-page__filters               */
/* --------------------------------------------------------------------------- */
.sp-shop-archive__bar {
	position: sticky;
	/* Stick BELOW the site header (which is also position:sticky at top:0,
	   z-index:100). Scrolled-header height is logo 48px + padding ~32px = ~80px.
	   72px keeps the bar tight against the underside of the frosted header. */
	top: 72px;
	z-index: 40;
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: var(--sp-md);
	padding-inline: clamp(16px, 3vw, 48px);
	background:
		linear-gradient(rgba(247, 247, 241, 0.92), rgba(247, 247, 241, 0.92)),
		var(--color-bg);
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--color-border);
}

.sp-shop-archive__bar-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	align-items: center;
	justify-content: space-between;
}

.sp-shop-archive__bar-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sp-sm);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-width: 100%;
}

.sp-shop-archive__bar-chips::-webkit-scrollbar {
	display: none;
}

.sp-shop-archive__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}

.sp-shop-archive__chip:hover,
.sp-shop-archive__chip:focus-visible {
	background: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-text);
	outline: none;
}

.sp-shop-archive__chip.is-static {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
	cursor: default;
}

.sp-shop-archive__chip svg {
	flex-shrink: 0;
	stroke-width: 1.5;
}

/* Sort dropdown — borrowed from .sp-shop-archive__chip styling */
.sp-shop-archive__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	flex-shrink: 0;
}

.sp-shop-archive__sort-label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.sp-shop-archive__sort-select {
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 36px 10px 16px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text);
	background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C1A17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 180ms ease-out;
}

.sp-shop-archive__sort-select:hover,
.sp-shop-archive__sort-select:focus-visible {
	border-color: var(--color-text);
	outline: none;
}

/* --------------------------------------------------------------------------- */
/* Product grid — target WC's default `ul.products` markup directly            */
/* --------------------------------------------------------------------------- */
body.sp-shop-archive .woocommerce {
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(40px, 5vw, 80px);
	padding-inline: clamp(16px, 3vw, 48px);
}

body.sp-shop-archive ul.products,
body.sp-shop-archive .wc-block-grid__products,
body.sp-shop-archive .wp-block-woocommerce-product-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.5vw, 20px);
}

@media (max-width: 1100px) {
	body.sp-shop-archive ul.products,
	body.sp-shop-archive .wc-block-grid__products,
	body.sp-shop-archive .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 760px) {
	body.sp-shop-archive ul.products,
	body.sp-shop-archive .wc-block-grid__products,
	body.sp-shop-archive .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	body.sp-shop-archive ul.products,
	body.sp-shop-archive .wc-block-grid__products,
	body.sp-shop-archive .wp-block-woocommerce-product-template {
		grid-template-columns: 1fr;
	}
}

/* WC ships with `.columns-4`, `.columns-3` etc. that force `width:22.05%` via
   inline-block. Neutralise them so our CSS Grid takes over.                    */
body.sp-shop-archive ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* --- Product card -------------------------------------------------------- */
body.sp-shop-archive li.product,
body.sp-shop-archive .wc-block-grid__product {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(28, 26, 23, 0.05);
}

@media (prefers-reduced-motion: no-preference) {
	body.sp-shop-archive li.product,
	body.sp-shop-archive .wc-block-grid__product {
		transition: transform 180ms ease-out, box-shadow 180ms ease-out;
	}

	body.sp-shop-archive li.product:hover,
	body.sp-shop-archive li.product:focus-within,
	body.sp-shop-archive .wc-block-grid__product:hover,
	body.sp-shop-archive .wc-block-grid__product:focus-within {
		transform: translateY(-3px);
		box-shadow:
			0 4px 12px rgba(28, 26, 23, 0.08),
			0 2px 4px rgba(28, 26, 23, 0.04);
	}
}

/* The thumbnail anchor wraps both the image and the title in WC's default
   loop. Reset link styling and stack image + body.                          */
body.sp-shop-archive li.product > a.woocommerce-LoopProduct-link,
body.sp-shop-archive li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/* Image area — fixed 3:2 ratio so all cards line up across the row */
body.sp-shop-archive li.product img,
body.sp-shop-archive .wc-block-grid__product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	background: var(--color-bg);
	border-radius: 0;
	margin: 0;
}

/* Image zoom on card hover (matches gallery tile hover) */
@media (prefers-reduced-motion: no-preference) {
	body.sp-shop-archive li.product img,
	body.sp-shop-archive .wc-block-grid__product-image img {
		transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	body.sp-shop-archive li.product:hover img,
	body.sp-shop-archive li.product:focus-within img,
	body.sp-shop-archive .wc-block-grid__product:hover img {
		transform: scale(1.02);
	}
}

/* Card body — title, price, description, button stacked below image. WC
   sprinkles these as direct children of `li.product`, so we use flex layout
   and bind padding to a synthetic body wrapper via :is() targeting.        */
body.sp-shop-archive li.product .woocommerce-loop-product__title,
body.sp-shop-archive li.product .woocommerce-loop-product__link h2,
body.sp-shop-archive .wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin: 0;
	padding: var(--sp-md) var(--sp-md) 0 var(--sp-md);
	transition: color 180ms ease-out;
}

body.sp-shop-archive li.product:hover .woocommerce-loop-product__title,
body.sp-shop-archive li.product:focus-within .woocommerce-loop-product__title {
	color: var(--color-accent);
}

/* Price */
body.sp-shop-archive li.product .price,
body.sp-shop-archive .wc-block-grid__product-price {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	margin: 0;
	padding: var(--sp-xs) var(--sp-md) 0 var(--sp-md);
}

body.sp-shop-archive li.product .price del,
body.sp-shop-archive li.product .price del .woocommerce-Price-amount {
	color: var(--color-text-muted);
	font-weight: 400;
	margin-inline-end: var(--sp-xs);
}

body.sp-shop-archive li.product .price ins,
body.sp-shop-archive li.product .price ins .woocommerce-Price-amount {
	text-decoration: none;
	color: var(--color-text);
}

/* Short description excerpt (if theme exposes it via woocommerce_after_shop_loop_item_title) */
body.sp-shop-archive li.product .woocommerce-product-details__short-description {
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
	padding: var(--sp-xs) var(--sp-md) 0 var(--sp-md);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Add-to-cart / View button — convert WC's default chip into our rounded outline */
body.sp-shop-archive li.product .button,
body.sp-shop-archive li.product a.add_to_cart_button,
body.sp-shop-archive li.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-sm);
	margin: var(--sp-md) var(--sp-md) var(--sp-md) var(--sp-md);
	padding: 10px 18px;
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-text);
	border-radius: var(--radius-md);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	align-self: flex-start;
	transition: background 200ms ease-out, color 200ms ease-out;
}

body.sp-shop-archive li.product .button:hover,
body.sp-shop-archive li.product .button:focus-visible,
body.sp-shop-archive li.product a.add_to_cart_button:hover,
body.sp-shop-archive li.product a.add_to_cart_button:focus-visible {
	background: var(--color-text);
	color: var(--color-bg);
	outline: none;
}

/* WC sometimes injects "View cart" with `.added_to_cart` after add — same look */
body.sp-shop-archive li.product .added_to_cart {
	background: var(--color-text);
	color: var(--color-bg);
}

/* WC "Sale" / "Out of stock" flash — convert to discreet pill on top-left */
body.sp-shop-archive li.product .onsale,
body.sp-shop-archive li.product .wc-block-components-product-sale-badge {
	position: absolute;
	top: var(--sp-md);
	left: var(--sp-md);
	z-index: 2;
	background: var(--color-peach);
	color: var(--color-text);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	border: 0;
	min-width: 0;
	min-height: 0;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------- */
/* "Returnable" chip — injected by inc/shop.php via                            */
/* `woocommerce_before_shop_loop_item` hook. Sits top-right of each card.      */
/* --------------------------------------------------------------------------- */
.sp-shop-archive__returnable {
	position: absolute;
	top: var(--sp-md);
	right: var(--sp-md);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 8px;
	background: rgba(247, 247, 241, 0.9);
	color: var(--color-accent-tech, var(--color-accent));
	font-family: var(--wp--preset--font-family--inter);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: none;
}

.sp-shop-archive__returnable svg {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------- */
/* Pagination — restyle WC's [1] [2] [Next →] strip                            */
/* --------------------------------------------------------------------------- */
body.sp-shop-archive .woocommerce-pagination {
	margin-block-start: clamp(40px, 5vw, 64px);
	text-align: center;
}

body.sp-shop-archive .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

body.sp-shop-archive .woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
}

body.sp-shop-archive .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--sp-md);
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}

body.sp-shop-archive .woocommerce-pagination .page-numbers:hover,
body.sp-shop-archive .woocommerce-pagination .page-numbers:focus-visible {
	background: var(--color-surface);
	border-color: var(--color-text);
	outline: none;
}

body.sp-shop-archive .woocommerce-pagination .page-numbers.current {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

body.sp-shop-archive .woocommerce-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------- */
/* Empty state — when filter/sort returns nothing                              */
/* --------------------------------------------------------------------------- */
body.sp-shop-archive .woocommerce-info,
body.sp-shop-archive .woocommerce-no-products-found > p,
body.sp-shop-archive .wc-block-grid__no-products {
	background: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-left-width: 1px;
	border-radius: var(--radius-lg);
	padding: clamp(40px, 5vw, 64px);
	text-align: center;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	color: var(--color-text-muted);
	margin: 0;
}

body.sp-shop-archive .woocommerce-info::before,
body.sp-shop-archive .woocommerce-no-products-found > p::before {
	display: none;
}

body.sp-shop-archive .woocommerce-info a,
body.sp-shop-archive .woocommerce-no-products-found a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* WC "Result count" — used to live above the grid; if it ever reappears,
   keep it discreet rather than hiding (a11y screen-reader anchor for the
   product count is useful).                                                  */
body.sp-shop-archive .woocommerce-result-count {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--sp-md) 0;
}

/* Hide WC's default orderby form since our own sort dropdown supersedes it. */
body.sp-shop-archive form.woocommerce-ordering {
	display: none;
}

/* --------------------------------------------------------------------------- */
/* Closing band — mirrors .sp-quote-cta dark-section pattern                   */
/* --------------------------------------------------------------------------- */
.sp-shop-archive__closing {
	background: var(--color-text);
	color: var(--color-bg);
	border-radius: var(--radius-lg);
	max-width: var(--layout-wide-size);
	margin-inline: auto;
	width: calc(100% - 2 * var(--layout-frame-pad));
	padding-block: clamp(64px, 8vw, 112px);
	padding-inline: clamp(24px, 5vw, 96px);
	text-align: center;
	margin-bottom: var(--layout-frame-pad);
	--color-accent: var(--color-accent-bright);
}

.sp-shop-archive__closing-inner {
	max-width: 680px;
	margin-inline: auto;
}

.sp-shop-archive__closing-eyebrow {
	justify-content: center;
}

.sp-shop-archive__closing-heading {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(36px, 4.4vw, 64px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: var(--sp-md) 0 var(--sp-md) 0;
	color: var(--color-bg);
}

.sp-shop-archive__closing-heading em {
	color: var(--color-accent);
	font-style: italic;
}

.sp-shop-archive__closing-body {
	font-size: 16px;
	line-height: 1.55;
	color: rgba(247, 247, 241, 0.78);
	margin: 0 0 var(--sp-lg) 0;
}

.sp-shop-archive__closing-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	justify-content: center;
}

/* Outline button on dark surface — cream stroke, not ink */
.sp-shop-archive__closing .wp-block-button.is-style-outline .wp-block-button__link,
.sp-shop-archive__closing a.wp-element-button.is-style-outline {
	background: transparent;
	color: var(--color-bg);
	border: 1px solid var(--color-bg);
}

.sp-shop-archive__closing .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sp-shop-archive__closing .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.sp-shop-archive__closing a.wp-element-button.is-style-outline:hover,
.sp-shop-archive__closing a.wp-element-button.is-style-outline:focus-visible {
	background: var(--color-bg);
	color: var(--color-text);
}

/* Primary button on dark — cream fill, ink text (inverts default ink-on-cream) */
.sp-shop-archive__closing a.wp-element-button:not(.is-style-outline) {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-bg);
}

.sp-shop-archive__closing a.wp-element-button:not(.is-style-outline):hover,
.sp-shop-archive__closing a.wp-element-button:not(.is-style-outline):focus-visible {
	background: transparent;
	color: var(--color-bg);
	border-color: var(--color-bg);
}