.cp-product-grid-wrap {
	position: relative;
	padding-top: 90px;
	padding-bottom: 90px;
	scroll-margin-top: 90px;
}

@media (max-width: 900px) {
	.cp-product-grid-wrap {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

.cp-product-grid__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.cp-product-grid__heading {
	font-family: var(--cp-font-heading);
	font-weight: 600;
	font-size: clamp(30px, 3vw, 44px);
	margin: 0;
	letter-spacing: -0.02em;
}

.cp-product-grid__link {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--cp-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cp-product-grid__link:hover,
.cp-product-grid__link:focus-visible {
	color: var(--cp-accent);
}

.cp-product-grid__controls {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

.cp-product-grid__nav {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--cp-text);
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease;
	font-family: var(--cp-font-body);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cp-product-grid__nav:hover,
.cp-product-grid__nav:focus-visible {
	border-color: var(--cp-accent-border);
	background: rgba(88, 211, 107, 0.07);
}

.cp-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: start;
	gap: 26px;
}

.cp-product-grid--rail {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 16px;
	scrollbar-width: none;
}

.cp-product-grid--rail::-webkit-scrollbar {
	display: none;
}

.cp-product-grid--rail > * {
	min-width: 290px;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.cp-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.cp-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

.cp-product-card {
	background: linear-gradient(180deg, var(--cp-surface), var(--cp-surface-soft));
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	padding: 22px;
	backdrop-filter: blur(12px);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.cp-product-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(88, 211, 107, 0.1);
	border-color: var(--cp-accent-border);
}

.cp-product-card__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0;
	overflow: hidden;
	margin: -22px -22px 18px -22px;
}

@media (max-width: 560px) {
	.cp-product-card {
		padding: 10px;
	}

	.cp-product-card__media {
		margin: -10px -10px 14px -10px;
	}

	.cp-product-card__footer {
		flex-wrap: wrap;
		gap: 18px;
	}

	.cp-product-card__action {
		flex: 1 1 100%;
	}

	.cp-product-card__action .cp-btn {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* Higher specificity than the global .skeleton-placeholder img rule (object-fit:
   contain) so real product photos fill the card edge-to-edge instead of
   letterboxing inside it. */
.cp-product-card__media.skeleton-placeholder img {
	object-fit: cover;
}

.cp-product-card__image-placeholder {
	width: 100%;
	height: 100%;
}

.cp-product-card__purity {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(4, 18, 10, 0.75);
	border: 1px solid var(--cp-accent-border);
	color: var(--cp-accent);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 5px 11px;
	border-radius: var(--cp-radius-pill);
	backdrop-filter: blur(6px);
	pointer-events: none;
}

.cp-product-card__wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(4, 18, 10, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--cp-text-muted);
	cursor: pointer;
	display: grid;
	place-items: center;
	backdrop-filter: blur(6px);
	transition: color 0.25s ease, border-color 0.25s ease;
	font-size: 15px;
	line-height: 1;
}

.cp-product-card__wishlist:hover,
.cp-product-card__wishlist:focus-visible {
	color: var(--cp-accent);
	border-color: var(--cp-accent-border);
}

.cp-product-card__name {
	display: block;
	font-family: var(--cp-font-heading);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: 0.01em;
	color: var(--cp-text);
}

.cp-product-card__name:hover,
.cp-product-card__name:focus-visible {
	color: var(--cp-accent);
}

.cp-product-card--rail .cp-product-card__name {
	font-size: 15.5px;
}

.cp-product-card__spec {
	font-size: 12.5px;
	color: var(--cp-text-dim);
	margin-top: 5px;
}

.cp-product-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--cp-border-soft);
}

.cp-product-card--rail .cp-product-card__footer {
	border-top: none;
	padding-top: 12px;
	margin-top: 12px;
}

.cp-product-card__price {
	font-family: var(--cp-font-heading);
	font-weight: 600;
	font-size: 17px;
	color: var(--cp-text);
}

.cp-product-card--rail .cp-product-card__price {
	font-size: 16px;
}

@media (max-width: 560px) {
	.cp-product-card__price {
		font-size: 14px;
	}
}

/* WooCommerce's core CSS (.woocommerce a.button — 2 classes + 1 element) beats
   our plain .cp-btn--outline.cp-btn--small (2 classes) on any page where
   body carries the .woocommerce class (e.g. the single-product page's
   related-products section), even though the same markup looks correct on
   the homepage where that body class isn't present. Add one more class to
   this selector so it wins on real specificity, no !important needed.
   WC's rule sets border/border-radius/padding via shorthand, so every one
   of those needs to be restated here too — overriding border-color alone
   still lets border-width/style (and radius/padding) fall through to WC's
   higher-specificity shorthand. */
.cp-product-card__action .cp-btn.cp-btn--outline.cp-btn--small {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--cp-accent);
	border: 1px solid var(--cp-accent-border);
	border-radius: var(--cp-radius-pill);
	padding: 9px 18px;
	font-size: 12px;
	line-height: normal;
}

.cp-product-card__action .cp-btn.cp-btn--outline.cp-btn--small:hover,
.cp-product-card__action .cp-btn.cp-btn--outline.cp-btn--small:focus-visible {
	background: var(--cp-accent);
	color: var(--cp-accent-ink);
}

/* WooCommerce's add-to-cart JS injects its own "View cart" link
   (.added_to_cart.wc-forward) next to the button after a successful AJAX add —
   the .cp-btn.added green/black state is enough feedback on its own. */
.cp-product-card__action .added_to_cart.wc-forward {
	display: none;
}