/* =========================================================================
   Shudhta shop / category / search.
   Scoped under .shop so it is self-contained and cannot collide with the
   product-page stylesheet. Card styling lives in shudhta-card.css.
   COLOUR LAW: white and neutral greys only; every hue is a palette token.
   ========================================================================= */

.sh.shop {
	--font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style",
		"Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--font-body: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--paper: #fff;
	--muted: #6f6f6f;
	--muted-soft: #8a8a8a;
	--near-black: #1a1a1a;

	--gutter: 24px;

	font-family: var(--font-body);
	color: var(--ink);
	background: var(--paper);
	font-size: 16px;
	line-height: 1.6;
	padding-bottom: 96px;
	overflow-x: clip;
}

.shop :where(*, *::before, *::after) {
	box-sizing: border-box;
}
.shop :where(p, h1, h2, h3, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
}
.shop :where(ul, ol) {
	list-style: none;
}
.shop :where(a) {
	color: inherit;
}
.shop :where(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}
.shop .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.shop .sh-wrap {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --- 3. BREADCRUMB --------------------------------------------------- */

.shop .sh-crumbs {
	padding-top: 24px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.shop .sh-crumbs a {
	text-decoration: none;
}
.shop .sh-crumbs a:hover {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
}
.shop .sh-crumbs span {
	margin: 0 6px;
}
.shop .sh-crumbs [aria-current] {
	color: var(--ink);
	margin-left: 0;
}

/* --- 4. PAGE HEAD ---------------------------------------------------- */

.shop-head {
	text-align: center;
	margin-top: 32px;
}
.shop-h1 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--ink);
}
/* No description means no empty block: the spacing simply closes up. */
.shop-desc {
	max-width: 62ch;
	margin: 16px auto 0;
	color: var(--muted);
}

/* --- 5. BODY --------------------------------------------------------- */

.shop-body {
	display: grid;
	grid-template-columns: minmax(0, 25%) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-top: 48px;
}

/* --- FILTER RAIL ----------------------------------------------------- */

.shop-rail {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
	padding: 20px;
	position: sticky;
	top: 24px;
}
.shop-rail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 8px;
}
.shop-rail-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	color: var(--ink);
}
.shop-rail-close {
	display: none;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
	padding: 0 4px;
}

.shop-group {
	border-bottom: 1px solid var(--line);
}
.shop-group summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}
.shop-group summary::-webkit-details-marker {
	display: none;
}
.shop-plus {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}
.shop-plus::before,
.shop-plus::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--accent);
	transition: transform 0.2s ease;
}
.shop-plus::after {
	transform: rotate(90deg);
}
.shop-group[open] .shop-plus::after {
	transform: rotate(0deg);
}
.shop-group-body {
	padding-bottom: 16px;
}

.shop-options {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.shop-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	cursor: pointer;
	font-size: 14px;
}
.shop-option input {
	flex: none;
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
	margin: 0;
}
.shop-option-label {
	flex: 1;
	min-width: 0;
}
.shop-option-count {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
/* Zero results is disabled, never hidden: a rail that changes shape as you
   click is disorienting. */
.shop-option.is-disabled {
	color: var(--muted-soft);
	cursor: not-allowed;
}

/* THE PRICE CONTROL: two overlapping range inputs plus a filled bar. */

.shop-range-track {
	position: relative;
	height: 32px;
	margin: 4px 0 8px;
}
.shop-range-track::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--line);
}
.shop-range-fill {
	position: absolute;
	top: 15px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
}
.shop-range-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	/* Only the thumbs are grabbable, so the two inputs can overlap. */
	pointer-events: none;
}
.shop-range-input::-webkit-slider-runnable-track {
	height: 32px;
	background: transparent;
	border: 0;
}
.shop-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--accent);
	cursor: pointer;
}
.shop-range-input::-moz-range-track {
	height: 32px;
	background: transparent;
	border: 0;
}
.shop-range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--accent);
	cursor: pointer;
}

.shop-range-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.shop-field label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--muted);
	margin-bottom: 4px;
}
.shop-money {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0 8px;
	background: var(--paper);
	color: var(--muted);
	font-size: 13px;
}
.shop .shop-money input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ink);
	height: 40px;
	padding: 0;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.shop .shop-money input::-webkit-outer-spin-button,
.shop .shop-money input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.shop-apply {
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: 20px;
	border: 1px solid var(--near-black);
	border-radius: 4px;
	background: var(--near-black);
	color: var(--paper);
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
/* Pin colour as well: the theme sets its own on button:hover. */
.shop .shop-apply:hover {
	background: var(--band);
	border-color: var(--band);
	color: var(--paper);
}

/* --- 6. TOOLBAR ------------------------------------------------------ */

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 24px;
}
.shop-count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.shop-clear {
	margin-left: 12px;
	color: var(--ink);
	text-underline-offset: 3px;
	text-decoration-color: var(--accent);
}
.shop-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}
.shop-sort label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.shop .shop-sort select {
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	min-height: 40px;
	padding: 0 10px;
	max-width: 220px;
}

/* --- 7. GRID — never one across on a phone --------------------------- */

.shop-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

/* --- 8. PAGINATION --------------------------------------------------- */

.shop-pagination {
	margin-top: 48px;
}
.shop-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.shop-pagination :where(a, span) {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.shop-pagination .current {
	background: var(--band);
	border-color: var(--band);
	color: var(--paper);
}

/* --- EMPTY STATE — designed, not defaulted --------------------------- */

.shop-empty {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--soft);
	padding: 56px 24px;
	text-align: center;
}
.shop-empty-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--ink);
}
.shop-empty-line {
	max-width: 46ch;
	margin: 12px auto 24px;
	color: var(--muted);
}
.shop-empty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border-radius: 4px;
	background: var(--near-black);
	color: var(--paper);
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.shop .shop-empty-btn:hover {
	background: var(--band);
	color: var(--paper);
}

/* --- DRAWER TRIGGER (phone only) ------------------------------------- */

.shop-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.shop-filter-count {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--band);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 10px;
}
.shop-rail-backdrop {
	display: none;
}

/* --- RESPONSIVE ------------------------------------------------------ */

@media (max-width: 1100px) {
	.shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.shop-body {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 32px;
	}
	.shop-filter-toggle {
		display: inline-flex;
		justify-self: start;
	}
	.shop-rail-close {
		display: block;
	}

	.shop-rail {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(340px, 86vw);
		z-index: 1000;
		border-radius: 0;
		border-width: 0 1px 0 0;
		overflow-y: auto;
		transform: translateX(-101%);
		transition: transform 0.25s ease;
	}
	.shop-rail.is-open {
		transform: none;
	}
	.shop-rail-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgb(0 0 0 / 45%);
	}
	.shop-rail-backdrop[hidden] {
		display: none;
	}
}

@media (max-width: 700px) {
	.sh.shop {
		--gutter: 16px;
	}
	.shop-grid {
		/* Two small cards let people compare. One giant card makes
		   browsing feel long. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.shop-toolbar {
		gap: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shop-rail,
	.shop-plus::before,
	.shop-plus::after {
		transition-duration: 0.01ms;
	}
}