/**
 * Catapult Nature — WooCommerce Styles (editorial redesign)
 *
 * Replaces the previous catalog-style with the brand's editorial language:
 *   • Sage hairlines instead of card shadows
 *   • Brand eyebrows (terracotta uppercase) above Playfair product titles
 *   • Generous whitespace, varied rhythm
 *   • Clean grid (3 desktop / 2 tablet / 1 mobile)
 *   • No card backgrounds — products breathe on the cream page ground
 *
 * TOKEN POLICY (unchanged from earlier audit pass):
 *   Colours and motion timings reference design-token vars from global.css
 *   so brand palette changes propagate. Type sizes / spacing on shop pages
 *   stay literal rem values — clamp() typography tokens are tuned for
 *   editorial flow, not retail grids where stable sizing matters.
 */

/* ==========================================================================
   Breadcrumbs (single-product top)
   ========================================================================== */

.cn-breadcrumbs {
	padding: 1.25rem 0;
	font-family: var(--cn-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cn-sage);
}

.cn-breadcrumbs a {
	color: var(--cn-sage);
	text-decoration: none;
	transition: color var(--cn-dur-snap) var(--cn-ease-snap);
}

.cn-breadcrumbs a:hover,
.cn-breadcrumbs a:focus-visible {
	color: var(--cn-terracotta);
}

.cn-breadcrumbs__sep {
	margin: 0 0.5rem;
	opacity: 0.5;
}

/* ==========================================================================
   Shop hero (editorial header on shop archive + category pages)
   ========================================================================== */

.cn-shop-hero {
	background: var(--cn-cream);
	padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
}

.cn-shop-hero .cn-eyebrow {
	margin-bottom: var(--cn-s-3);
	color: var(--cn-charcoal);
	opacity: 0.7;
}

.cn-shop-hero__title {
	max-width: 16ch;
	margin: 0 0 var(--cn-s-4);
	color: var(--cn-charcoal);
	text-wrap: balance;
}

.cn-shop-hero__title em {
	font-style: italic;
	color: var(--cn-terracotta);
}

.cn-shop-hero__lead {
	max-width: 56ch;
	margin: 0;
	color: var(--cn-charcoal);
}

/* ==========================================================================
   Shop grid + product cards (archive + related products)
   ========================================================================== */

.cn-shop-grid {
	background: var(--cn-cream);
	padding: clamp(24px, 4vw, 56px) 0 clamp(64px, 8vw, 120px);
}

.cn-shop-grid__intro {
	max-width: 60ch;
	margin: 0 auto clamp(40px, 6vw, 64px);
	color: var(--cn-charcoal);
}

/* ==========================================================================
   Shop loop chrome — result count + ordering dropdown
   WC outputs these via the woocommerce_before_shop_loop action; the
   default markup is a <p class="woocommerce-result-count"> and a
   <form class="woocommerce-ordering"> with a <select>. We style both
   to match the brand (sage uppercase eyebrow + pill-shaped select).
   ========================================================================== */

.woocommerce.cn-page--shop .woocommerce-notices-wrapper:empty {
	display: none;
}

.cn-page--shop .woocommerce-result-count,
.cn-page--shop .woocommerce-ordering {
	margin: 0;
}

/* Layout the count + ordering as a flex row above the product grid,
   with a sage hairline below the row for editorial rhythm. Wraps
   cleanly on narrow viewports. */
.cn-page--shop .woocommerce-result-count {
	float: none;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding-bottom: clamp(16px, 2vw, 20px);
	font-family: var(--cn-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cn-charcoal);
	opacity: 0.7;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cn-s-3);
	border-bottom: 1px solid rgba(132, 169, 140, 0.28);
}

.cn-page--shop .woocommerce-ordering {
	float: none;
	margin: 0 0 clamp(20px, 3vw, 32px);
	display: inline-flex;
}

/* If WC renders the ordering form as a sibling of the result count,
   pull it up so they sit on the same hairline-divided row. We use
   :has() to detect the pairing and reflow them together. */
.cn-page--shop .woocommerce-result-count:has(+ .woocommerce-ordering) {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	flex: 1;
}

.cn-page--shop .woocommerce-result-count + .woocommerce-ordering {
	margin-bottom: clamp(20px, 3vw, 32px);
}

/* Pill select — sage hairline, terracotta focus, matches the brand's
   cn-search-form__field treatment. WC renders a native <select>, so
   we strip default appearance and add a chevron via background-image. */
.cn-page--shop .woocommerce-ordering select,
.cn-page--shop select.orderby {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 36px 0 16px;
	font-family: var(--cn-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cn-forest);
	background-color: var(--cn-offwhite);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23264738' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
	border: 1px solid rgba(132, 169, 140, 0.45);
	border-radius: var(--cn-r-pill);
	cursor: pointer;
	transition:
		border-color var(--cn-dur-snap) var(--cn-ease-snap),
		box-shadow var(--cn-dur-snap) var(--cn-ease-snap),
		color var(--cn-dur-snap) var(--cn-ease-snap);
}

.cn-page--shop .woocommerce-ordering select:hover,
.cn-page--shop select.orderby:hover {
	border-color: var(--cn-sage);
}

.cn-page--shop .woocommerce-ordering select:focus-visible,
.cn-page--shop select.orderby:focus-visible {
	outline: none;
	border-color: var(--cn-terracotta);
	box-shadow: 0 0 0 3px rgba(192, 86, 33, 0.18);
}

/* High-specificity selector beats WooCommerce's default `.woocommerce ul.products` */
.cn-page--shop .products,
.cn-page--shop ul.products,
.woocommerce.cn-page--shop ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px);
}

@media (max-width: 1024px) {
	.cn-page--shop .products,
	.cn-page--shop ul.products,
	.woocommerce.cn-page--shop ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cn-page--shop .products,
	.cn-page--shop ul.products,
	.woocommerce.cn-page--shop ul.products {
		grid-template-columns: 1fr;
		gap: clamp(40px, 8vw, 56px);
	}
}


/* =============================================================================
   RELATED PRODUCTS CAROUSEL — single-product page

   Native CSS scroll-snap horizontal carousel. No JS framework: the
   prev/next buttons in related-carousel.js call .scrollBy() and let
   the browser handle the snap-to-card animation.

   Card width is computed so 3 cards (desktop) / 2 cards (tablet) /
   1.15 cards (mobile, with peek to hint scroll) fit cleanly. The
   `1.15` cards on mobile is a deliberate "more content here" affordance
   — that sliver of the next card cues the touch swipe.

   Header layout:
     desktop  → eyebrow+title left, prev/next buttons right
     mobile   → eyebrow+title centered, buttons hidden (touch swipe replaces)
   ============================================================================= */

.cn-related-products__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 32px);
	margin-bottom: clamp(28px, 4vw, 48px);
}

.cn-related-products__head-text {
	display: flex;
	flex-direction: column;
	gap: var(--cn-s-2);
}

.cn-related-products__title {
	margin: 0;
	font-family: var(--cn-font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
	line-height: 1.1;
	color: var(--cn-charcoal);
	text-wrap: balance;
}

/* Prev/next buttons — desktop only, hidden on touch viewports where
   swipe replaces them. */
.cn-related-products__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.cn-related-products__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cn-charcoal);
	background: transparent;
	border: 1px solid rgba(132, 169, 140, 0.4);
	border-radius: 50%;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.cn-related-products__nav-btn:hover,
.cn-related-products__nav-btn:focus-visible {
	background: var(--cn-forest);
	color: var(--cn-offwhite);
	border-color: var(--cn-forest);
	outline: none;
}

.cn-related-products__nav-btn:active {
	transform: scale(0.94);
}

/* Disabled state — set by JS when the carousel can't scroll further
   in the requested direction. Stays in DOM (no layout shift) but
   clearly communicates "no more content". */
.cn-related-products__nav-btn[disabled],
.cn-related-products__nav-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* Viewport — clips the overflowing track. The negative margin lets
   the track bleed to the container edges so the first/last cards
   sit flush instead of inset awkwardly. */
.cn-related-products__viewport {
	overflow: hidden;
	margin-inline: calc(var(--cn-page-inset, 24px) * -1);
}

/* Track — the actual scrolling element. */
.cn-related-products__track {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
	padding: 4px var(--cn-page-inset, 24px) 12px;   /* breathing room for hover lift + focus rings */
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--cn-page-inset, 24px);
	scrollbar-width: none;          /* Firefox */
	-webkit-overflow-scrolling: touch;
}

.cn-related-products__track::-webkit-scrollbar {
	display: none;                  /* WebKit */
}

/* Each slide — fixed width via flex-basis so the layout doesn't
   reflow as cards load images. Card count per viewport scales
   responsively. */
.cn-related-products__slide {
	flex: 0 0 calc((100% - 2 * clamp(20px, 3vw, 40px)) / 3);
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.cn-related-products__slide {
		flex-basis: calc((100% - 1 * clamp(20px, 3vw, 40px)) / 2);
	}
}

@media (max-width: 600px) {
	.cn-related-products__header {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	/* Hide prev/next on mobile — swipe is the natural input. */
	.cn-related-products__nav {
		display: none;
	}

	/* 1.15 cards visible — the 0.15 sliver of the next card is the
	   touch-swipe affordance (Material Design / Carousel best practice). */
	.cn-related-products__slide {
		flex-basis: 86%;
	}
}

/* Product card — minimal, editorial, no card chrome */
li.cn-product-card,
.cn-product-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	margin: 0;
	padding: 0;
	overflow: visible;
	box-shadow: none;
	border: 0;
	width: auto;
	float: none;
	clear: none;
}

/* Image wrapper — sage hairline frame, square aspect, gentle hover lift */
.cn-product-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--cn-offwhite);
	border: 1px solid rgba(132, 169, 140, 0.28);
	border-radius: var(--cn-r-md);
	margin-bottom: var(--cn-s-4);
}

.cn-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cn-ease-primary);
}

.cn-product-card:hover .cn-product-card__media img,
.cn-product-card:focus-within .cn-product-card__media img {
	transform: scale(1.04);
}

/* Body — eyebrow + title + CTA stacked left-aligned */
.cn-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cn-s-2);
	padding: 0 var(--cn-s-1);
}

.cn-product-card__brand {
	font-family: var(--cn-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cn-terracotta);
}

.cn-product-card__title {
	margin: 0;
	font-family: var(--cn-font-display);
	font-size: clamp(1.2rem, 1.5vw, 1.5rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--cn-charcoal);
}

.cn-product-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--cn-dur-snap) var(--cn-ease-snap);
}

.cn-product-card__title a:hover,
.cn-product-card__title a:focus-visible {
	color: var(--cn-forest);
}

/* Card CTA — small all-caps "BUY NOW" with bottom hairline + slide-right
   on hover. Reads as commerce-direct without overwhelming the card. */
.cn-product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: var(--cn-s-2);
	padding-bottom: 4px;
	font-family: var(--cn-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cn-forest);
	text-decoration: none;
	align-self: flex-start;
	border-bottom: 1px solid var(--cn-forest);
	transition:
		color var(--cn-dur-snap) var(--cn-ease-snap),
		border-color var(--cn-dur-snap) var(--cn-ease-snap),
		transform var(--cn-dur-primary) var(--cn-ease-primary);
}

.cn-product-card__cta:hover,
.cn-product-card:hover .cn-product-card__cta,
.cn-product-card__cta:focus-visible {
	color: var(--cn-terracotta);
	border-bottom-color: var(--cn-terracotta);
	transform: translateX(4px);
}

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

.cn-page--product {
	background: var(--cn-cream);
	padding-bottom: clamp(64px, 8vw, 120px);
}

.cn-page--product .product {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
	margin-top: clamp(24px, 4vw, 48px);
}

/* Gallery scrolls naturally with the page. An earlier version had this
   element `position: sticky; top: 96px` so the image stayed visible
   while reading the summary, but it created a layout collision when
   the user scrolled into the "More from the collection" section — the
   sticky gallery hung around in the left column while related-product
   cards rendered to its right, making the related grid feel like it
   was inside the product layout. Dropping the sticky lets the gallery
   leave the viewport naturally and the related grid claims the full
   width below the product, as designed. */
.cn-page--product .woocommerce-product-gallery {
	width: 100% !important;            /* override WC default 50% width */
	float: none !important;
	margin: 0 !important;
}

.cn-page--product .woocommerce-product-gallery__image img,
.cn-page--product .woocommerce-product-gallery__wrapper img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(132, 169, 140, 0.28);
	border-radius: var(--cn-r-md);
	background: var(--cn-offwhite);
}

/* Summary column — editorial copy stack */
.cn-page--product .product .summary {
	display: flex;
	flex-direction: column;
	gap: var(--cn-s-4);
	width: 100% !important;            /* override WC default 48% */
	float: none !important;
	margin: 0 !important;
}

.cn-page--product .cn-product__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--cn-s-2);
	margin: 0;
	color: var(--cn-charcoal);
	opacity: 0.7;
}

.cn-page--product .product .summary .product_title {
	margin: 0;
	font-family: var(--cn-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--cn-charcoal);
	text-wrap: balance;
}

.cn-page--product .product .summary .woocommerce-product-details__short-description,
.cn-page--product .product .summary .woocommerce-product-details__short-description p {
	margin: 0;
	font-family: var(--cn-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--cn-charcoal);
}

/* Enquire CTA wrapper — primary button + "pricing on request" caption */
.cn-product__cta-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--cn-s-2);
	margin-top: var(--cn-s-3);
	padding-top: var(--cn-s-4);
	border-top: 1px solid rgba(132, 169, 140, 0.28);
}

.cn-product__cta {
	align-self: flex-start;
	min-width: 200px;
	justify-content: center;
}

.cn-product__cta-note {
	margin: 0;
	font-family: var(--cn-font-body);
	font-size: 0.85rem;
	color: var(--cn-charcoal);
	opacity: 0.65;
}

/* Product meta (categories, SKU, tags) — quiet sage rule below CTA */
.cn-page--product .product .summary .product_meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--cn-s-3);
	padding-top: var(--cn-s-3);
	border-top: 1px solid rgba(132, 169, 140, 0.28);
	font-family: var(--cn-font-body);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cn-charcoal);
	opacity: 0.7;
}

.cn-page--product .product .summary .product_meta a {
	color: var(--cn-forest);
	text-decoration: none;
	transition: color var(--cn-dur-snap) var(--cn-ease-snap);
}

.cn-page--product .product .summary .product_meta a:hover,
.cn-page--product .product .summary .product_meta a:focus-visible {
	color: var(--cn-terracotta);
}

/* WooCommerce tabs (Description / Reviews / Additional Info) — editorial */
.cn-page--product .woocommerce-tabs {
	margin-top: clamp(56px, 8vw, 96px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid rgba(132, 169, 140, 0.28);
}

.cn-page--product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	list-style: none;
	margin: 0 0 var(--cn-s-5);
	padding: 0;
	border-bottom: 1px solid rgba(132, 169, 140, 0.28);
}

.cn-page--product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.cn-page--product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 var(--cn-s-3);
	font-family: var(--cn-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cn-charcoal);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--cn-dur-snap) var(--cn-ease-snap), border-color var(--cn-dur-snap) var(--cn-ease-snap);
}

.cn-page--product .woocommerce-tabs ul.tabs li.active a,
.cn-page--product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--cn-forest);
	border-bottom-color: var(--cn-terracotta);
}

/* ==========================================================================
   Related products grid (under single product)
   ========================================================================== */

.cn-related-products {
	background: var(--cn-cream);
	padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 64px);
	margin-top: clamp(48px, 6vw, 80px);
	border-top: 1px solid rgba(132, 169, 140, 0.28);
}

.cn-related-products__header {
	max-width: 60ch;
	margin: 0 0 clamp(32px, 5vw, 56px);
}

.cn-related-products__header .cn-eyebrow {
	margin-bottom: var(--cn-s-3);
	color: var(--cn-charcoal);
	opacity: 0.7;
}

.cn-related-products__title {
	margin: 0;
	color: var(--cn-charcoal);
	text-wrap: balance;
}

/* ==========================================================================
   Single-product responsive: stack columns on tablet
   ========================================================================== */

@media (max-width: 900px) {
	.cn-page--product .product {
		grid-template-columns: 1fr;
	}
	.cn-page--product .woocommerce-product-gallery {
		position: static;
	}
}

/* ==========================================================================
   Cart + Checkout (untouched from prior token migration)
   ========================================================================== */

.woocommerce-cart .shop_table {
	font-family: var(--cn-font-body);
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table td {
	padding: 1rem;
	border-bottom: var(--cn-border-on-cream);
}

.woocommerce-cart .cart_totals {
	background: var(--cn-cream);
	border-radius: 1rem;
	padding: 2rem;
	font-family: var(--cn-font-body);
}

.woocommerce-cart .cart_totals .checkout-button {
	display: block;
	width: 100%;
	padding: 0.85rem;
	background: var(--cn-terracotta);
	color: var(--cn-offwhite);
	border: none;
	border-radius: var(--cn-r-pill);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--cn-dur-snap) var(--cn-ease-snap);
	text-decoration: none;
}

.woocommerce-cart .cart_totals .checkout-button:hover {
	background: color-mix(in oklch, var(--cn-terracotta) 82%, black);
}

.woocommerce-checkout .woocommerce {
	max-width: 720px;
	margin: 0 auto;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cn-charcoal);
	border-radius: 0.5rem;
	font-size: 1rem;
	font-family: inherit;
	transition:
		border-color var(--cn-dur-snap) var(--cn-ease-snap),
		box-shadow var(--cn-dur-snap) var(--cn-ease-snap);
}

.woocommerce-checkout .form-row input:focus-visible,
.woocommerce-checkout .form-row textarea:focus-visible,
.woocommerce-checkout .form-row select:focus-visible {
	outline: none;
	border-color: var(--cn-sage);
	box-shadow: 0 0 0 3px rgba(132, 169, 140, 0.3);
}

.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	padding: 1rem;
	background: var(--cn-terracotta);
	color: var(--cn-offwhite);
	border: none;
	border-radius: var(--cn-r-pill);
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--cn-dur-snap) var(--cn-ease-snap);
	margin-top: 1.5rem;
}

.woocommerce-checkout #place_order:hover {
	background: color-mix(in oklch, var(--cn-terracotta) 82%, black);
}


/* =============================================================================
   PAGINATION — Shop archive + product category pages
   WC emits <nav class="woocommerce-pagination"><ul class="page-numbers">...
   We strip WC default styles, so without these rules the list collapsed to
   a vertical stack of bare links. Brand-aligned horizontal pill controls.
   ============================================================================= */

.woocommerce-pagination {
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid rgba(132, 169, 140, 0.35);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	font-family: var(--cn-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cn-charcoal);
	background: transparent;
	border: 1px solid rgba(132, 169, 140, 0.4);
	border-radius: var(--cn-r-pill);
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease;
}

.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:focus-visible {
	background: var(--cn-sage);
	color: var(--cn-offwhite);
	border-color: var(--cn-sage);
	outline: none;
}

/* Active page: forest fill, no hover state needed (it's the current page). */
.woocommerce-pagination .page-numbers.current {
	background: var(--cn-forest);
	color: var(--cn-offwhite);
	border-color: var(--cn-forest);
	cursor: default;
}

/* Ellipsis (the "…" between page ranges) — no border, just spacing. */
.woocommerce-pagination .page-numbers.dots {
	border: none;
	background: transparent;
	color: rgba(47, 62, 70, 0.5);
	min-width: 24px;
	padding: 0 4px;
}

/* Prev / Next arrow buttons — slightly wider for the arrow glyph + label. */
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next {
	padding: 0 18px;
	font-weight: 600;
}

@media (max-width: 600px) {
	.woocommerce-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		font-size: 0.875rem;
		padding: 0 10px;
	}
}


/* =============================================================================
   PRODUCT CARD PLACEHOLDER — when no Featured Image is set on a product

   WooCommerce emits its own placeholder image (woocommerce-placeholder.png)
   for products without a Featured Image. After the CSV import, products
   whose images haven't been uploaded yet to wp-content/uploads/ fall
   through to this placeholder and look "broken" against the editorial
   shop grid.

   Two parts:
   1. Tint the WC placeholder so it reads as "image pending" not "broken".
      Sage background, opacity dimmed, max width centered in the card.
   2. Hide WC's "Awaiting product image" alt text overlay if the theme
      version of the card already shows a brand fallback.
   ============================================================================= */

.cn-product-card__media img.attachment-woocommerce_thumbnail.wp-post-image[src*="placeholder"],
.cn-product-card__media img.woocommerce-placeholder {
	background: rgba(132, 169, 140, 0.08);
	object-fit: contain;
	padding: 24%;                /* shrinks the placeholder glyph in the frame */
	opacity: 0.4;                /* sage-tinted, looks intentional */
	transition: opacity 0.3s ease;
}

.cn-product-card:hover .cn-product-card__media img[src*="placeholder"] {
	opacity: 0.55;
	transform: none;             /* override the .04 hover scale on real photos */
}


/* =============================================================================
   SHOP CATEGORY FILTER STRIP
   Horizontal pill nav above the product grid (template-parts/sections/
   shop-categories.php). Same pill aesthetic as the pagination so the
   shop reads as one cohesive system top-to-bottom.
   ============================================================================= */

.cn-shop-cats {
	margin-top: clamp(24px, 3vw, 40px);
}

.cn-shop-cats__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cn-shop-cats__item {
	margin: 0;
	padding: 0;
}

.cn-shop-cats__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	font-family: var(--cn-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cn-charcoal);
	background: transparent;
	border: 1px solid rgba(132, 169, 140, 0.4);
	border-radius: var(--cn-r-pill);
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease;
}

.cn-shop-cats__pill:hover,
.cn-shop-cats__pill:focus-visible {
	background: var(--cn-sage);
	color: var(--cn-offwhite);
	border-color: var(--cn-sage);
	outline: none;
}

.cn-shop-cats__pill.is-active {
	background: var(--cn-forest);
	color: var(--cn-offwhite);
	border-color: var(--cn-forest);
	cursor: default;
}

/* Count chip — small numeric badge inside the pill (e.g. "Lechuza 53"). */
.cn-shop-cats__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0;
	color: rgba(47, 62, 70, 0.65);
	background: rgba(132, 169, 140, 0.15);
	border-radius: 999px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.cn-shop-cats__pill:hover .cn-shop-cats__count,
.cn-shop-cats__pill:focus-visible .cn-shop-cats__count,
.cn-shop-cats__pill.is-active .cn-shop-cats__count {
	background: rgba(253, 252, 248, 0.18);
	color: var(--cn-offwhite);
}

@media (max-width: 600px) {
	.cn-shop-cats__list {
		gap: 8px;
		justify-content: flex-start;
		overflow-x: auto;          /* horizontal scroll on narrow phones */
		flex-wrap: nowrap;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.cn-shop-cats__pill {
		flex-shrink: 0;
		font-size: 0.8125rem;
		height: 36px;
		padding: 0 14px;
	}
}


/* =============================================================================
   SHOP — Empty state ("no products found")
   Replaces WC's bare-text default with a brand-aligned panel. Same
   editorial rhythm as the .cn-not-found 404 page so the site reads
   as one design system across all "nothing here" states.
   ============================================================================= */

.cn-shop-empty {
	max-width: 640px;
	margin: clamp(48px, 8vw, 96px) auto;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	background: var(--cn-offwhite);
	border: 1px solid rgba(132, 169, 140, 0.3);
	border-radius: var(--cn-r-md);
}

.cn-shop-empty__eyebrow {
	display: inline-block;
	margin-bottom: var(--cn-s-3);
	font-family: var(--cn-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--cn-forest);
}

.cn-shop-empty__title {
	margin: 0 0 var(--cn-s-3);
	font-family: var(--cn-font-display);
	font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--cn-charcoal);
	text-wrap: balance;
}

.cn-shop-empty__title em {
	font-style: italic;
	color: var(--cn-terracotta);
}

.cn-shop-empty__body {
	margin: 0 0 var(--cn-s-5);
	font-family: var(--cn-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(47, 62, 70, 0.78);
}

.cn-shop-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

@media (max-width: 600px) {
	.cn-shop-empty__actions {
		flex-direction: column;
		align-items: stretch;
	}
}