/* Shop / product archive — Nahl Foods */

.nahl-shop .nahl-product__crumbs,
.nahl-product__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-block: 8px 8px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.nahl-product__crumbs a:hover {
	color: var(--color-primary);
}

.nahl-shop-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-bg-muted);
	border-bottom: 1px solid var(--color-border);
}

.nahl-shop-hero__media {
	position: absolute;
	inset: 0;
}

.nahl-shop-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The band is far wider than the 3:2 photo, so hold the dipper and the drip
	   rather than the blurred middle of the jar. */
	object-position: 50% 22%;
	border-radius: 0;
}

/* One even dark wash, the same treatment as the home hero: the photo reads
   the same edge to edge and the copy flips to light type on top of it. */
.nahl-shop-hero__overlay {
	position: absolute;
	inset: 0;
}

.nahl-shop-hero__media + .nahl-shop-hero__overlay {
	background: rgb(0 0 0 / 55%);
}

/* Light type, only when there is a photo underneath. Without one the section
   falls back to the cream ground and keeps its dark copy. */
.nahl-shop-hero:has(.nahl-shop-hero__media) .nahl-shop-hero__title {
	color: var(--color-bg);
}

.nahl-shop-hero:has(.nahl-shop-hero__media) .nahl-shop-hero__eyebrow {
	color: var(--color-honey);
}

.nahl-shop-hero:has(.nahl-shop-hero__media) .nahl-shop-hero__text {
	color: rgb(255 255 255 / 85%);
}

/* Height comes from the padding, not a min-height: the hero then tracks the
   viewport instead of holding one desktop number down to phone width. */
.nahl-shop-hero__content {
	position: relative;
	z-index: 1;
	max-width: 560px;
	padding-block: clamp(40px, 5.5vw, 76px) clamp(44px, 6vw, 84px);
}

/* Same gold rule as the home hero, so the two page openings read as a pair. */
.nahl-shop-hero__eyebrow {
	position: relative;
	padding-left: 46px;
	margin: 0 0 16px;
	animation: shopHeroContent 0.7s 0.05s var(--ease-out) both;
}

.nahl-shop-hero__eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 34px;
	height: 1px;
	background: var(--color-honey);
}

.nahl-shop-hero__title {
	font-size: var(--fs-h1);
	color: var(--color-primary);
	margin: 0 0 16px;
	animation: shopHeroContent 0.7s 0.14s var(--ease-out) both;
}

.nahl-shop-hero__text {
	color: var(--color-text-muted);
	font-size: var(--fs-md);
	line-height: 1.6;
	max-width: 46ch;
	animation: shopHeroContent 0.7s 0.22s var(--ease-out) both;
}

/* A category with no description would otherwise leave the animated gap. */
.nahl-shop-hero__text:empty {
	display: none;
}

.nahl-shop-hero__text p {
	margin: 0;
}

.nahl-shop-hero__text p + p {
	margin-top: 10px;
}

@keyframes shopHeroContent {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nahl-shop-hero__eyebrow,
	.nahl-shop-hero__title,
	.nahl-shop-hero__text {
		animation: none;
	}
}

.nahl-shop {
	padding-top: 40px;
	/* Cream, so the grid separates from the muted CTA band below it. */
	background: var(--color-bg);
}

.nahl-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.nahl-shop__toolbar .woocommerce-result-count {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
}

.nahl-shop__toolbar .woocommerce-ordering {
	margin: 0;
}

.nahl-shop__toolbar .woocommerce-ordering select,
.nahl-shop__toolbar .orderby {
	height: var(--btn-min-height);
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-primary);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
}

.nahl-shop .woocommerce-pagination {
	margin-top: 40px;
	padding-bottom: 8px;
}

.nahl-shop .woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nahl-shop .woocommerce-pagination li {
	margin: 0;
}

.nahl-shop .woocommerce-pagination a,
.nahl-shop .woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--color-border);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-bg);
}

.nahl-shop .woocommerce-pagination a:hover,
.nahl-shop .woocommerce-pagination .current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.nahl-shop__empty {
	padding: 48px 0 24px;
	text-align: center;
	color: var(--color-text-muted);
}

.nahl-shop ul.products {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Three up on the shop archive, unlike the 4-up .product-grid in theme.css:
   the cards carry more copy here, so they need the extra width to breathe. */
.nahl-shop .product-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 20px;
}

@media (max-width: 900px) {
	.nahl-shop .product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
}

@media (max-width: 700px) {
	/* One per row: full-width cards on a phone. */
	.nahl-shop .product-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.nahl-shop-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(245, 239, 226, 0.95) 0%,
			rgba(245, 239, 226, 0.88) 58%,
			rgba(245, 239, 226, 0.52) 82%,
			rgba(245, 239, 226, 0.62) 100%
		);
	}

	.nahl-shop__toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.nahl-shop__toolbar .woocommerce-ordering select {
		width: 100%;
	}
}