/**
 * Shop / product-category / product-tag archive. Loaded only on those
 * templates (see includes/class-assets.php). Reuses .k-section/.k-heading-*/
 * .k-btn* from base/components.css and .k-product-card* from components/
 * product-card.css rather than redefining them here.
 */

.k-shop {
	padding-bottom: clamp(60px, 8vw, 120px);
}

/* -- breadcrumb ---------------------------------------------------------- */

/* Shared breadcrumb rhythm (padding-top, margin-bottom, label styling, link
   colors) now lives once in base/layout.css as .k-crumbs / .k-crumbs__nav —
   see that file's docblock. .k-shop-crumbs itself carries no page-specific
   override at this time. */

/* -- opening banner -------------------------------------------------------*/

.k-shop-banner--editorial {
	position: relative;
	margin-top: 16px;
	height: 56vh;
	min-height: 340px;
	overflow: hidden;
}

.k-shop-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.k-shop-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 9, 0.15) 0%, rgba(10, 10, 9, 0.78) 100%);
}

.k-shop-banner__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(24px, 3.5vw, 44px);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}

.k-shop-banner--minimal {
	padding-top: clamp(30px, 4vw, 56px);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}

.k-shop-banner__title {
	font-size: clamp(36px, 5.4vw, 88px);
	line-height: 0.98;
	margin: 0;
}

.k-shop-banner--editorial .k-shop-banner__title {
	font-size: clamp(38px, 6vw, 96px);
	line-height: 0.96;
}

.k-shop-banner__desc {
	max-width: 440px;
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--k-color-muted-1);
}

.k-shop-banner--editorial .k-shop-banner__desc,
.k-shop-banner--editorial .k-label {
	color: var(--k-color-muted-1);
}

.k-shop-banner .k-label {
	color: var(--k-color-muted-2);
}

/* -- category pills ------------------------------------------------------ */

.k-shop-pills {
	display: flex;
	gap: 10px;
	margin-top: clamp(18px, 2.4vw, 30px);
	overflow-x: auto;
	padding-bottom: 4px;
}

.k-shop-pills__item {
	flex: none;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 9px 16px;
	border: 1px solid var(--k-border-cta);
	color: var(--k-color-text);
}

.k-shop-pills__item.is-active {
	border-color: var(--k-color-accent);
	color: var(--k-color-accent);
}

.k-shop-pills__item:not(.is-active):hover {
	border-color: var(--k-color-accent);
	color: var(--k-color-accent);
}

/* -- sticky filter/sort bar ---------------------------------------------- */

.k-shop-toolbar {
	--k-shop-bar-h: 58px;
	position: sticky;
	top: var(--k-header-height);
	z-index: var(--k-z-filter-bar);
	background: var(--k-color-bg);
	border-top: 1px solid var(--k-border-hairline-strong);
	border-bottom: 1px solid var(--k-border-hairline-strong);
	margin-top: clamp(20px, 2.6vw, 32px);
	padding: 14px var(--k-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.k-shop-toolbar summary {
	list-style: none;
	cursor: pointer;
}

.k-shop-toolbar summary::-webkit-details-marker {
	display: none;
}

.k-shop-toolbar summary::marker {
	content: "";
}

.k-shop-toolbar__trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid var(--k-border-cta);
	padding: 11px 20px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: border-color var(--k-duration-base), color var(--k-duration-base);
}

.k-sheet--sort .k-shop-toolbar__trigger {
	border: 0;
	padding: 11px 4px;
	font-weight: 400;
}

.k-shop-toolbar__trigger:hover,
.k-shop-toolbar__trigger:focus-visible {
	border-color: var(--k-color-accent);
	color: var(--k-color-accent);
}

.k-shop-toolbar__count {
	color: var(--k-color-muted-2);
}

/* -- filter/sort disclosures: right-side drawer on desktop --------------- */

.k-sheet[open] .k-sheet__panel {
	position: fixed;
	top: calc(var(--k-header-height) + var(--k-shop-bar-h));
	right: 0;
	bottom: 0;
	width: min(400px, 88vw);
	background: var(--k-color-bg-surface);
	z-index: var(--k-z-drawer);
	overflow-y: auto;
	border-left: 1px solid var(--k-border-hairline-strong);
	display: flex;
	flex-direction: column;
}

.k-sheet--sort[open] .k-sheet__panel {
	width: min(280px, 88vw);
}

.k-sheet[open]::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 9, 0.55);
	z-index: calc(var(--k-z-drawer) - 1);
}

.k-sheet__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px clamp(16px, 3vw, 28px);
	border-bottom: 1px solid var(--k-border-hairline);
}

.k-sheet__close {
	background: transparent;
	border: 0;
	color: var(--k-color-text);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
}

/* -- filter form ----------------------------------------------------------*/

.k-filters {
	padding: 22px clamp(16px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 26px;
	flex: 1;
}

.k-filter-group__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.k-filter-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	font-size: 11px;
	border: 1px solid var(--k-border-cta);
	color: var(--k-color-text);
	cursor: pointer;
}

.k-filter-chip input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.k-filter-chip input:checked ~ span {
	color: var(--k-color-accent);
}

.k-filter-chip:has(input:checked) {
	border-color: var(--k-color-accent);
}

.k-filter-chip input:focus-visible ~ span {
	outline: 1px solid var(--k-color-accent);
	outline-offset: 2px;
}

.k-filters__footer {
	margin-top: auto;
	position: sticky;
	bottom: 0;
	background: var(--k-color-bg-surface);
	border-top: 1px solid var(--k-border-hairline);
	padding: 18px clamp(16px, 3vw, 28px);
	display: flex;
	gap: 10px;
}

.k-filters__footer .k-btn {
	flex: 1;
	justify-content: center;
	padding: 15px;
}

/* -- sort list ------------------------------------------------------------*/

.k-sort-list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}

.k-sort-list a {
	display: block;
	padding: 13px 18px;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--k-color-text);
}

.k-sort-list a:hover,
.k-sort-list a.is-active {
	background: var(--k-color-hover-tint);
	color: var(--k-color-accent);
}

/* -- product grid ---------------------------------------------------------*/

.k-shop-grid {
	padding: clamp(28px, 3.6vw, 48px) var(--k-gutter) 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: dense;
	gap: clamp(10px, 1.6vw, 22px);
}

@media (min-width: 700px) {
	.k-shop-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1100px) {
	.k-shop-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* A purely positional (not content-derived) asymmetric accent, matching
	   the approved design's editorial grid rhythm: the opening tile and
	   every eighth tile after it take a 2x2 span. No product data decides
	   this — it's the same layout rule regardless of which product lands
	   there. */
	.k-shop-grid > :nth-child(8n+1) {
		grid-column: span 2;
		grid-row: span 2;
		align-self: start;
	}

	.k-shop-grid > :nth-child(8n+1) .k-product-card__media {
		aspect-ratio: 4 / 5;
	}
}

/* -- pagination / empty state ----------------------------------------------*/

.k-shop-pagination {
	text-align: center;
	margin-top: clamp(40px, 5vw, 70px);
	padding: 0 var(--k-gutter);
}

.k-shop-empty {
	text-align: center;
	padding: clamp(80px, 12vw, 160px) 20px;
	max-width: 520px;
	margin: 0 auto;
}

.k-shop-empty__copy {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--k-color-muted-1);
}

.k-shop-empty .k-btn {
	margin-top: 26px;
}

/* -- mobile: bottom sticky bar + bottom sheet ------------------------------*/

@media (max-width: 899px) {
	.k-shop {
		padding-bottom: calc(64px + clamp(40px, 6vw, 90px));
	}

	.k-shop-toolbar {
		--k-shop-bar-h: 64px;
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--k-z-filter-bar);
		margin-top: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		padding: 0;
		border-bottom: 0;
	}

	.k-shop-toolbar__count {
		display: none;
	}

	.k-sheet {
		flex: 1;
		text-align: center;
	}

	.k-sheet--filters,
	.k-sheet--sort {
		border-right: 1px solid var(--k-border-hairline);
	}

	.k-sheet--sort {
		border-right: 0;
	}

	.k-shop-toolbar__trigger {
		width: 100%;
		justify-content: center;
		border: 0;
		padding: 16px;
	}

	.k-sheet[open] .k-sheet__panel {
		top: auto;
		left: 0;
		right: 0;
		bottom: var(--k-shop-bar-h);
		width: 100%;
		height: min(78vh, calc(100% - var(--k-shop-bar-h)));
		border-left: 0;
		border-top: 1px solid var(--k-border-hairline-strong);
	}

	.k-sheet--sort[open] .k-sheet__panel {
		width: 100%;
	}
}

@media (hover: none) {
	.k-shop-pills__item {
		padding: 10px 16px;
	}
}