/* SUUD — Toptan Katalog 2026
   Premium wholesale catalog. Neutral graphite palette, subtle elevation. */

:root {
	--bg: #f6f6f4;
	--surface: #ffffff;
	--surface-2: #fbfbfa;
	--ink: #16161a;
	--ink-2: #44454b;
	--ink-3: #8a8b92;
	--line: #e7e7e3;
	--line-strong: #d7d7d2;
	--accent: #16161a;
	--accent-ink: #ffffff;
	--ok: #1f7a4d;
	--ok-bg: #e9f5ee;
	--danger: #b23b3b;
	--radius: 12px;
	--radius-sm: 9px;
	--shadow-1:
		0 1px 2px rgba(20, 20, 26, 0.05), 0 1px 1px rgba(20, 20, 26, 0.04);
	--shadow-2:
		0 6px 24px rgba(20, 20, 26, 0.1), 0 2px 6px rgba(20, 20, 26, 0.06);
	--maxw: 1180px;
	font-synthesis: none;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
	/* App-shell: the page itself does not scroll — the filter column and the
     product grid each scroll on their own, so the filters stay reachable no
     matter how far the grid is scrolled. (Reset to normal page scroll on
     mobile, where the sidebar is a slide-in drawer.) */
	overflow: hidden;
	background: var(--bg);
	color: var(--ink);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.page {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 20px;
	height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* ---------- Masthead ---------- */
.masthead {
	flex: none;
	padding: 32px 0 22px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 22px;
}
.masthead__brand {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--ink-3);
	margin-bottom: 14px;
}
.masthead__title {
	margin: 0 0 8px;
	font-size: clamp(30px, 5.2vw, 46px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.04;
}
.masthead__subtitle {
	margin: 0;
	max-width: 54ch;
	color: var(--ink-2);
	font-size: 15px;
}

/* ---------- Two-column layout ---------- */
.layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	padding-bottom: 20px;
}

/* ---------- Filter sidebar ---------- */
.sidebar {
	min-height: 0;
	height: 100%;
}
.sidebar__backdrop {
	display: none;
}
.sidebar__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
	min-height: 0;
}
.sidebar__head {
	display: none; /* only shown in the mobile drawer */
}
.sidebar__scroll {
	display: flex;
	flex-direction: column;
	gap: 26px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-right: 6px; /* keep content clear of the scrollbar */
}
.sidebar__foot {
	display: none; /* actions only needed in the mobile drawer */
}

.facet {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.facet__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.facet__more {
	align-self: flex-start;
	appearance: none;
	border: none;
	background: none;
	padding: 2px 0;
	margin-top: 2px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--line-strong);
}
.facet__more:hover {
	color: var(--ink);
}

/* Chip lists — stacked for groups, flowed for sizes/colors */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.chips--stack {
	flex-direction: column;
	gap: 4px;
	flex-wrap: nowrap;
}
.chips--compact {
	gap: 6px;
}
.chips--color {
	flex-direction: column;
	gap: 2px;
	flex-wrap: nowrap;
}

.chip {
	appearance: none;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink-2);
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	padding: 7px 13px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition:
		background 0.12s ease,
		color 0.12s ease,
		border-color 0.12s ease;
	white-space: nowrap;
}
.chip:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}
.chip[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.chip__count {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ink-3);
	background: var(--surface-2);
	border-radius: 999px;
	padding: 1px 7px;
	min-width: 20px;
	text-align: center;
}
.chip[aria-pressed="true"] .chip__count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* Group chips: full-width rows with the count pushed to the end */
.chips--stack .chip {
	justify-content: space-between;
	width: 100%;
	border-color: transparent;
	background: transparent;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
}
.chips--stack .chip:hover {
	background: var(--surface);
	border-color: var(--line);
}
.chips--stack .chip[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
}

/* Colour chips: a round swatch + label, laid out as a tidy list */
.chips--color .chip {
	justify-content: flex-start;
	width: 100%;
	border-color: transparent;
	background: transparent;
	padding: 6px 11px;
	border-radius: var(--radius-sm);
	gap: 10px;
}
.chips--color .chip:hover {
	background: var(--surface);
	border-color: var(--line);
}
.chips--color .chip[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
}
.chip__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.swatch {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px rgba(20, 20, 26, 0.18);
}
.swatch--unknown {
	background: conic-gradient(from 45deg, #d7d7d2, #bdbdb8, #d7d7d2);
}
.chip[aria-pressed="true"] .swatch {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.5),
		0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Search */
.facet--search {
	gap: 0;
}
.search {
	position: relative;
	width: 100%;
}
.search__icon {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	fill: var(--ink-3);
	pointer-events: none;
}
.search input {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	padding: 11px 14px 11px 40px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	transition:
		border-color 0.12s ease,
		box-shadow 0.12s ease;
}
.search input::placeholder {
	color: var(--ink-3);
}
.search input:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(20, 20, 26, 0.08);
}

/* ---------- Mobile filter toggle ---------- */
.filter-toggle {
	display: none;
	appearance: none;
	align-items: center;
	gap: 8px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 10px 16px;
	cursor: pointer;
	box-shadow: var(--shadow-1);
	margin-bottom: 18px;
}
.filter-toggle__icon {
	width: 18px;
	height: 18px;
}
.filter-toggle__badge {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 11.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Result bar ---------- */
/* ---------- Right column (scrolls independently of the filters) ---------- */
.content {
	min-height: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.resultbar {
	flex: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 18px;
	flex-wrap: wrap;
}
.resultbar__count {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.resultbar__note {
	font-size: 12.5px;
	color: var(--ink-3);
}

/* ---------- Grid ---------- */
.results {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	/* A viewport-height scroll grid must size each row from its cards, not
	   squeeze every loaded catalog row into the available viewport height. */
	grid-auto-rows: max-content;
	gap: 20px;
	align-content: start;
	/* clear the fixed selected-models bar so the last row isn't hidden behind it */
	padding-bottom: 120px;
}

.card {
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-1);
	transition:
		box-shadow 0.15s ease,
		transform 0.15s ease;
}
.card:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}
.card.is-selected {
	border-color: var(--ink);
}

.card__media {
	/* Preserve the image ratio while the parent card is a vertical flexbox. */
	flex: none;
	width: 100%;
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--surface-2);
	overflow: hidden;
}
.card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	background: repeating-linear-gradient(
		135deg,
		var(--surface-2),
		var(--surface-2) 12px,
		#f1f1ee 12px,
		#f1f1ee 24px
	);
}
.card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(22, 22, 26, 0.9);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 4px 8px;
	border-radius: 6px;
	backdrop-filter: blur(4px);
}

.card__body {
	padding: 13px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}
.card__name {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card__code {
	font-size: 12px;
	color: var(--ink-3);
	letter-spacing: 0.02em;
}
.card__foot {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.card__price {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.card__price small {
	font-size: 11px;
	font-weight: 500;
	color: var(--ink-3);
}

.add-btn {
	appearance: none;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink);
	width: 38px;
	height: 38px;
	border-radius: 10px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition:
		background 0.12s ease,
		color 0.12s ease,
		border-color 0.12s ease;
}
.add-btn:hover {
	border-color: var(--ink);
}
.add-btn.is-added {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* ---------- States ---------- */
.state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 70px 20px;
	color: var(--ink-2);
}
.state__title {
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 6px;
}
.state__text {
	margin: 0 auto;
	max-width: 42ch;
	color: var(--ink-3);
	font-size: 14px;
}
.state .btn {
	margin-top: 18px;
}

.skeleton-grid {
	display: contents;
}
.skeleton {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.skeleton__media {
	aspect-ratio: 3 / 4;
	background: linear-gradient(100deg, #eee 30%, #f6f6f4 50%, #eee 70%);
	background-size: 200% 100%;
	animation: shimmer 1.3s infinite linear;
}
.skeleton__line {
	height: 12px;
	margin: 12px 14px;
	border-radius: 6px;
	background: linear-gradient(100deg, #eee 30%, #f6f6f4 50%, #eee 70%);
	background-size: 200% 100%;
	animation: shimmer 1.3s infinite linear;
}
.skeleton__line.short {
	width: 45%;
}
@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}

/* ---------- Quote bar ---------- */
.quotebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	padding: 0 16px calc(16px + env(safe-area-inset-bottom));
	pointer-events: none;
}
.quotebar__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	background: var(--accent);
	color: #fff;
	border-radius: 14px;
	box-shadow: var(--shadow-2);
	padding: 13px 16px 13px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	pointer-events: auto;
	animation: rise 0.2s ease;
}
@keyframes rise {
	from {
		transform: translateY(12px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
.quotebar__summary {
	font-size: 14.5px;
}
.quotebar__summary strong {
	font-weight: 700;
}
.quotebar__sep {
	opacity: 0.4;
	margin: 0 6px;
}
.quotebar__actions {
	display: flex;
	gap: 8px;
}

/* ---------- Buttons ---------- */
.btn {
	appearance: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background 0.12s ease,
		opacity 0.12s ease,
		border-color 0.12s ease;
	white-space: nowrap;
}
.btn:disabled {
	opacity: 0.55;
	cursor: default;
}
.btn--primary {
	background: #fff;
	color: var(--ink);
}
.quotebar .btn--primary:hover:not(:disabled) {
	background: #eee;
}
.modal .btn--primary {
	background: var(--accent);
	color: #fff;
}
.modal .btn--primary:hover:not(:disabled) {
	background: #2c2c33;
}
.btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}
.btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.55);
}
.modal .btn--ghost {
	border-color: var(--line-strong);
	color: var(--ink-2);
}
.modal .btn--ghost:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}

/* ---------- Modal ---------- */
.modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 26, 0.42);
	animation: fade 0.18s ease;
}
@keyframes fade {
	from {
		opacity: 0;
	}
}
.modal__panel {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: 92vh;
	background: var(--surface);
	border-radius: 18px 18px 0 0;
	box-shadow: var(--shadow-2);
	display: flex;
	flex-direction: column;
	animation: slideup 0.22s ease;
}
@keyframes slideup {
	from {
		transform: translateY(24px);
	}
}
.modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px 14px;
	border-bottom: 1px solid var(--line);
}
.modal__head h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.modal__close {
	appearance: none;
	border: none;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: var(--ink-3);
	cursor: pointer;
	padding: 0 4px;
}
.modal__close:hover {
	color: var(--ink);
}
.modal__body {
	padding: 18px 22px;
	overflow-y: auto;
}
.modal__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
}
.modal__error {
	margin: 0 auto 0 0;
	color: var(--danger);
	font-size: 13px;
	font-weight: 500;
}

.quote-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.quote-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
	font-size: 14px;
	border-bottom: 1px solid var(--line);
}
.quote-list li:last-child {
	border-bottom: none;
}
.quote-list__name {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.quote-list__code {
	color: var(--ink-3);
	font-size: 12px;
}
.quote-list__remove {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--ink-3);
	font-size: 18px;
	cursor: pointer;
	padding: 0 4px;
}
.quote-list__remove:hover {
	color: var(--danger);
}

.contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px;
}
.field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.field--full {
	grid-column: 1 / -1;
}
.field label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-2);
}
.field .muted {
	color: var(--ink-3);
	font-weight: 400;
}
.field input,
.field textarea {
	font: inherit;
	font-size: 14px;
	padding: 10px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--ink);
	resize: vertical;
	transition:
		border-color 0.12s ease,
		box-shadow 0.12s ease;
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(20, 20, 26, 0.08);
}
.field input:invalid:not(:placeholder-shown) {
	border-color: var(--danger);
}

/* Success panel */
.success {
	text-align: center;
	padding: 24px 10px 10px;
}
.success__mark {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--ok-bg);
	color: var(--ok);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}
.success h2 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}
.success p {
	margin: 0 auto;
	max-width: 38ch;
	color: var(--ink-2);
	font-size: 14.5px;
}

/* ---------- Responsive ---------- */

/* Tablet / mobile: sidebar collapses into a slide-in filter drawer. */
@media (max-width: 900px) {
	/* Undo the desktop app-shell: on mobile the whole page scrolls and the
     sidebar is a slide-in drawer. */
	html,
	body {
		height: auto;
		overflow: visible;
	}
	.page {
		height: auto;
		display: block;
		padding: 0 16px calc(120px + env(safe-area-inset-bottom));
	}
	.masthead {
		padding: 24px 0 20px;
	}
	.layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
		overflow: visible;
		padding-bottom: 0;
	}
	.content {
		height: auto;
		display: block;
	}
	.results {
		flex: none;
		height: auto;
		min-height: 0;
		overflow: visible;
		padding-bottom: 0;
	}
	.filter-toggle {
		display: inline-flex;
	}

	.sidebar {
		position: fixed;
		inset: 0;
		top: 0;
		z-index: 70;
		visibility: hidden;
		max-height: none; /* reset the desktop viewport cap; the drawer is full-height */
	}
	.sidebar.is-open {
		visibility: visible;
	}
	.sidebar__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background: rgba(20, 20, 26, 0.45);
		opacity: 0;
		transition: opacity 0.2s ease;
	}
	.sidebar.is-open .sidebar__backdrop {
		opacity: 1;
	}
	.sidebar__panel {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: min(340px, 86vw);
		background: var(--surface);
		box-shadow: var(--shadow-2);
		transform: translateX(-100%);
		transition: transform 0.22s ease;
	}
	.sidebar.is-open .sidebar__panel {
		transform: none;
	}
	.sidebar__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 20px;
		border-bottom: 1px solid var(--line);
		flex: none;
	}
	.sidebar__title {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: -0.01em;
	}
	.sidebar__close {
		appearance: none;
		border: none;
		background: transparent;
		font-size: 26px;
		line-height: 1;
		color: var(--ink-3);
		cursor: pointer;
		padding: 0 4px;
	}
	.sidebar__close:hover {
		color: var(--ink);
	}
	.sidebar__scroll {
		flex: 1;
		overflow-y: auto;
		padding: 20px;
	}
	.sidebar__foot {
		display: flex;
		gap: 10px;
		padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		flex: none;
	}
	.sidebar__reset {
		flex: none;
		border-color: var(--line-strong);
		color: var(--ink-2);
		background: var(--surface);
	}
	.sidebar__reset:hover {
		border-color: var(--ink-3);
		color: var(--ink);
	}
	.sidebar__apply {
		flex: 1;
		background: var(--accent);
		color: var(--accent-ink);
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.page {
		padding: 24px 16px 150px;
	}
	.results {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}
	.card__body {
		padding: 11px 12px 12px;
	}
	.contact {
		grid-template-columns: 1fr;
	}
	.quotebar__summary {
		font-size: 13px;
	}
	.btn {
		padding: 9px 13px;
		font-size: 13px;
	}
}

@media (min-width: 560px) {
	.modal {
		align-items: center;
		padding: 20px;
	}
	.modal__panel {
		border-radius: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Selected-models panel — expands above the sticky bar (no modal) */
.selected {
	pointer-events: auto;
	max-width: var(--maxw);
	margin: 0 auto 10px;
	max-height: 46vh;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-2);
	padding: 14px 16px;
}
.selected__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.selected__title {
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
}
.selected__count {
	font-size: 12px;
	font-weight: 600;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: 999px;
	padding: 1px 8px;
}
.selected__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.selected__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}
.selected__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.selected__name {
	font-weight: 500;
	font-size: 14px;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.selected__meta {
	font-size: 12px;
	color: var(--ink-3);
}
.selected__price {
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
	white-space: nowrap;
}
.selected__remove {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink-2);
	font-size: 18px;
	line-height: 1;
}
.selected__remove:hover {
	background: var(--danger);
	color: #fff;
	border-color: var(--danger);
}

/* Clickable cards open the detail drawer */
.card {
	cursor: pointer;
}
.card:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Product detail drawer (slides in from the right) */
.drawer[hidden] {
	display: none;
}
.drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
}
.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 26, 0.45);
}
.drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(460px, 94vw);
	background: var(--surface);
	box-shadow: var(--shadow-2);
	display: flex;
	flex-direction: column;
	animation: drawerIn 0.18s ease-out;
}
@keyframes drawerIn {
	from {
		transform: translateX(20px);
		opacity: 0.5;
	}
	to {
		transform: none;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.drawer__panel {
		animation: none;
	}
}
.drawer__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.drawer__body {
	overflow-y: auto;
}
.dw__big {
	aspect-ratio: 3 / 4;
	background: var(--surface-2);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.dw__big img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dw__thumbs {
	display: flex;
	gap: 8px;
	padding: 10px 16px 0;
	flex-wrap: wrap;
}
.dw__thumb {
	width: 52px;
	height: 70px;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	background: none;
}
.dw__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dw__head {
	padding: 16px;
	border-bottom: 1px solid var(--line);
}
.dw__group {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 6px;
}
.dw__title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
}
.dw__meta {
	font-size: 12px;
	color: var(--ink-3);
}
.dw__price {
	margin-top: 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}
.dw__stock {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
}
.dw__stock.is-in {
	color: var(--ok);
}
.dw__stock.is-out {
	color: var(--ink-3);
}
.dw__section {
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
}
.dw__section-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.dw__variants {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dw__variant {
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 13px;
	color: var(--ink);
	background: var(--surface-2);
}
.dw__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-2);
	white-space: pre-line;
}
.dw__actions {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dw__actions .btn {
	width: 100%;
	justify-content: center;
}
.drawer .btn--primary {
	background: var(--accent);
	color: var(--accent-ink);
	border: 1px solid var(--accent);
}
.drawer .btn--primary.is-added {
	background: var(--ok);
	border-color: var(--ok);
}
.drawer .btn--ghost {
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line-strong);
}

[hidden] {
	display: none !important;
}
:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

#quoteStatus {
	padding: 16px;
	background: var(--ok-bg);
	color: var(--ok);
	border-radius: var(--radius);
}
@media (max-width: 560px) {
	.quotebar__inner {
		flex-wrap: wrap;
	}
	.quotebar__actions {
		width: 100%;
		flex-wrap: wrap;
	}
	.contact {
		grid-template-columns: 1fr;
	}
}

/* Locale controls and wholesale variant ordering. */
.preferences {display:flex;justify-content:flex-end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.preferences label {display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted,#626262)}
.preferences select,.field select {font:inherit;color:var(--ink,#202020);background:#fff;border:1px solid #d9d7d2;border-radius:8px;padding:10px 12px;min-height:44px}
.preferences select:focus-visible,.field select:focus-visible,.quantity:focus-visible {outline:2px solid #444;outline-offset:3px}
.field select {width:100%}
.preference-note {font-size:12px;line-height:1.6;color:#68635b;margin:12px 0}
.variant-picker {margin-top:28px;border-top:1px solid #e4e1da;padding-top:24px}
.variant-picker h3 {font-size:18px;margin:0}
.bulk-quantity {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;background:#f5f4f0;border-radius:8px;margin:16px 0}
.bulk-quantity label {flex:1;min-width:120px;font-size:13px}
.variant-row {display:grid;grid-template-columns:minmax(0,1fr) 70px 86px;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eeece7;font-size:13px}
.variant-row--head {color:#6c6963;font-size:11px}
.quantity {width:80px;min-height:42px;padding:8px;border:1px solid #d2cfc8;border-radius:6px;background:white;color:#202020;font:inherit;text-align:center;direction:ltr}
.variant-summary {font-size:13px;min-height:20px}
.variant-add {width:100%;margin-bottom:16px;min-height:48px}
.cart-quantity {display:flex;align-items:center;gap:8px;font-size:12px}
.selected__row {grid-template-columns:minmax(0,1fr) auto auto 36px;gap:16px}
.selected__price {font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.card__name,.dw__title,.dw__desc,.selected__name {unicode-bidi:plaintext}
.card__code,.dw__meta {direction:ltr;unicode-bidi:isolate;text-align:start}
[dir="rtl"] .search__icon {left:auto;right:13px}
[dir="rtl"] .search input {padding-left:12px;padding-right:40px}
[dir="rtl"] .card__badge {left:auto;right:10px}
[dir="rtl"] .drawer__panel {right:auto;left:0}
[dir="rtl"] .drawer__close {right:auto;left:10px}
[dir="rtl"] .sidebar__scroll {padding-right:0;padding-left:6px}
@media(max-width:760px) {
 .preferences {justify-content:space-between;gap:8px;margin-bottom:22px}
 .preferences label {gap:6px}
 .selected__row {display:grid;grid-template-columns:minmax(0,1fr) auto 32px;gap:10px}
 .selected__info {grid-column:1 / 3}
 .selected__remove {grid-column:3;grid-row:1}
 .cart-quantity {grid-column:1;grid-row:2}
 .selected__price {grid-column:2 / 4;grid-row:2}
 [dir="rtl"] .sidebar__panel {left:auto;right:0;transform:translateX(100%)}
 [dir="rtl"] .sidebar.is-open .sidebar__panel {transform:translateX(0)}
}

/* Compact catalogue header, consistent drawer rhythm and persistent action. */
.masthead {display:grid;grid-template-columns:1fr auto;column-gap:24px;row-gap:10px;padding:22px 0 20px;margin-bottom:20px}
.masthead__brand {grid-row:1;grid-column:1;align-self:center;margin:0;color:#68645e}
.preferences {grid-row:1;grid-column:2;margin:0;gap:12px;justify-content:end}
.preferences label {font-size:11px}
.preferences select {min-height:38px;padding:7px 10px;font-size:12px}
.masthead__title {grid-column:1 / -1;font-size:clamp(26px,3vw,36px);margin:3px 0 0;line-height:1.15}
.masthead__subtitle {grid-column:1 / -1;max-width:72ch;font-size:13px;line-height:1.65}
.masthead .preference-note {grid-column:1 / -1;margin:0;font-size:11px}
.drawer__panel {width:min(560px,100vw);height:100dvh}
.drawer__header {display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:12px 24px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;flex-shrink:0}
.drawer__close,[dir="rtl"] .drawer__close {position:static;width:36px;height:36px;border-radius:50%;font-size:24px}
.drawer__body {flex:1;min-height:0;padding:24px;overscroll-behavior:contain}
.dw__intro {display:grid;grid-template-columns:128px minmax(0,1fr);align-items:start;gap:20px;margin-bottom:24px}
.dw__big {border-radius:10px;aspect-ratio:3 / 4}
.dw__big img {object-fit:cover}
.dw__thumbs {padding:8px 0 0;gap:5px}
.dw__thumb {width:28px;height:38px;border-radius:4px}
.dw__head {padding:2px 0;border:0}
.dw__title {font-size:20px;line-height:1.35;margin:4px 0 8px}
.dw__price {font-size:19px;margin-top:12px}
.dw__group {font-size:10px;letter-spacing:.08em}
.variant-picker {margin:0;padding:22px 0 0;border-top:1px solid var(--line)}
.variant-picker h3 {font-size:17px;line-height:1.4}
.variant-picker .preference-note {margin:6px 0 14px;font-size:12px;max-width:48ch}
.bulk-quantity {margin:14px 0 12px;padding:12px;gap:10px;background:#f4f3ef;border-radius:10px}
.bulk-quantity .btn {min-height:40px;padding:8px 12px;font-size:12px}
.bulk-quantity label {font-size:12px;min-width:100px}
.variant-row {grid-template-columns:minmax(0,1fr) 68px 78px;min-height:55px;padding:8px 2px;gap:12px}
.variant-row--head {min-height:30px;padding-top:0;font-size:11px}
.variant-row .quantity {width:78px;min-height:38px}
.drawer__footer {flex-shrink:0;padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff;display:flex;align-items:center;gap:16px;box-shadow:0 -6px 24px #00000005}
.drawer__footer .variant-summary {flex:1;margin:0;font-size:14px;font-weight:600;line-height:1.5}
.drawer__footer .variant-add {width:auto;max-width:70%;margin:0;padding:12px 20px;font-size:13px;min-height:46px}
.dw__section {padding:16px 0;border:0;border-top:1px solid var(--line);margin-top:20px}
.dw__section-title {text-transform:none;letter-spacing:0;cursor:pointer;margin:0;font-size:13px}
.dw__section[open] .dw__section-title {margin-bottom:10px}
.dw__store-link {display:inline-block;color:var(--ink-2);font-size:12px;text-underline-offset:4px;margin:4px 0 8px}
.selected__row {display:grid;grid-template-columns:minmax(0,1fr) auto auto 36px;padding:14px;gap:16px}
.selected__meta {white-space:normal;line-height:1.6;color:#696861}
.selected__remove {width:32px;height:32px}
.selected__head {position:sticky;top:-14px;background:white;padding:6px 0 10px;z-index:1}
.quotebar__summary {font-size:12px;line-height:1.7}
@media(max-width:760px){
 .masthead {padding:16px 0;margin-bottom:16px;gap:10px}
 .masthead__brand {font-size:10px;letter-spacing:.12em}
 .preferences {gap:8px}
 .preferences label>span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .preferences select {font-size:12px;max-width:100px;min-height:40px}
 .masthead__title {font-size:28px;margin-top:8px}
 .masthead__subtitle {font-size:12px}
 .drawer__header {padding:12px 18px;min-height:58px}
 .drawer__body {padding:20px 18px}
 .drawer__footer {padding:12px 18px calc(12px + env(safe-area-inset-bottom));gap:10px}
 .drawer__footer .variant-add {font-size:12px;padding:10px 14px}
 .dw__intro {grid-template-columns:104px minmax(0,1fr);gap:16px;margin-bottom:20px}
 .dw__title {font-size:18px}
 .selected__row {grid-template-columns:minmax(0,1fr) auto 32px;gap:10px;padding:12px}
 .selected__name {white-space:normal;font-size:13px}
 .selected__meta {font-size:11px}
 .cart-quantity {grid-column:1;grid-row:2}
 .selected__price {grid-column:2 / 4;grid-row:2;font-size:13px}
 .quotebar__inner {flex-wrap:wrap;gap:10px;padding:12px}
 .quotebar__summary {width:100%;display:flex;flex-wrap:wrap;gap:4px}
 .quotebar__actions {width:100%;display:flex;gap:8px}
 .quotebar__actions .btn {font-size:12px;min-height:42px;padding:8px 12px}
 #requestQuote {flex:1}
 .selected {max-height:48dvh}
}
/* Keep products above the fold: the catalogue header is a toolbar, not a hero. */
.masthead {grid-template-columns:minmax(0,1fr) auto;row-gap:6px;padding:18px 0 14px;margin-bottom:16px}
.masthead__brand {grid-column:1;grid-row:1;font-size:9px;line-height:1.4}
.masthead__title {grid-column:1;grid-row:2;font-size:26px;line-height:1.2;margin:0}
.preferences {grid-column:2;grid-row:1 / 3;align-self:center}
.masthead__subtitle {grid-column:1 / -1;font-size:12px;max-width:none;line-height:1.5}
.masthead .preference-note {font-size:10px;line-height:1.5}
@media(max-width:760px){
 .masthead {padding:14px 0 12px;row-gap:5px;margin-bottom:12px}
 .masthead__brand {grid-row:1;grid-column:1}
 .preferences {grid-row:1;grid-column:2}
 .masthead__title {grid-row:2;grid-column:1 / -1;font-size:24px;margin-top:5px}
 .masthead__subtitle {font-size:11px}
}
[lang="ar"] body {font-family:"Noto Sans Arabic","Inter",sans-serif}
[lang="ar"] .masthead__subtitle,[lang="ar"] .masthead .preference-note,[lang="ar"] .resultbar__note {font-size:12px;line-height:1.7}
[lang="ar"] .masthead__brand {font-size:11px;letter-spacing:0}
[lang="ar"] .card__name,[lang="ar"] .dw__title,[lang="ar"] .selected__name {font-family:"Inter","Noto Sans Arabic",sans-serif}

/* Quote privacy acknowledgement: unchecked by default, keyboard accessible. */
.privacy-consent { display:flex; align-items:flex-start; gap:12px; margin-top:20px; padding:16px; border:1px solid var(--line, #deddd9); border-radius:12px; background:var(--surface, #fafaf8); font-size:14px; line-height:1.55; }
.privacy-consent input { flex:0 0 20px; width:20px; height:20px; margin:2px 0 0; accent-color:#19191c; cursor:pointer; }
.privacy-consent label { display:block; cursor:pointer; }
.privacy-consent a { display:inline-block; margin-top:5px; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.privacy-consent input:focus-visible, .privacy-consent a:focus-visible { outline:2px solid #19191c; outline-offset:4px; }