/*
 * kb-shopify
 *
 * Bridges to the bricks-child design tokens emitted by `kb_tokens_css()`
 * (see wp-content/themes/bricks-child/functions.php). The plugin defines
 * its own --kb-* variables that resolve from the theme tokens
 * (--color-primary-300, --font-size-text-base, etc.) with portable
 * fallbacks so the plugin still looks reasonable on themes that don't
 * ship the token system.
 *
 * Override-friendly: every selector is single-class, no nesting beyond
 * one level, no !important. Child themes can re-skin freely.
 */

/* ── Alpine cloak ───────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Material Symbols (Outlined) ────────────────────────────────── */
/* Baseline rules required by Google's icon font so ligatures like
   `<span class="material-symbols-outlined">sort</span>` render as
   their glyph rather than the literal word. `.kb-shop__icon` is the
   local sizing/alignment helper applied alongside in the markup. */
/* Double class selector — Google Fonts ships a `.material-symbols-outlined
   { font-size: 24px }` helper alongside its @font-face. Even though our
   stylesheet loads after, doubling the selector raises specificity to
   (0,2,0) so the override is guaranteed regardless of load order. */
.material-symbols-outlined.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'liga';
}

.kb-shop__icon {
	color: inherit;
	flex: 0 0 auto;
}

/* ── Plugin-local token bridge ──────────────────────────────────── */
.kb-shop,
.kb-pdp,
.kb-cart-button,
.kb-cart-drawer-root {
	/* Surfaces */
	--kb-bg:           var(--color-background, #f9f4f1);
	--kb-surface:      var(--color-primary-0, #dfcabb);
	--kb-surface-soft: var(--color-neutral-100, #f5f5f5);

	/* Text */
	--kb-text:        var(--color-neutral-300, #1d1d1d);
	--kb-text-muted:  var(--color-neutral-200, #909090);

	/* Lines */
	--kb-border:      var(--color-neutral-200, #d6d6d6);
	--kb-border-soft: var(--color-neutral-100, #ececec);

	/* Brand */
	--kb-primary:       var(--color-primary-400, #00417d);
	--kb-primary-dark:  var(--color-primary-300, #00213f);
	--kb-primary-fg:    #fff;
	--kb-primary-tint:  var(--color-primary-100, #be9477);
	--kb-accent-tan:    var(--color-primary-0, #dfcabb);

	/* Status */
	--kb-error:   var(--color-alert-error, #e00851);
	--kb-warning: var(--color-alert-warning, #ff7b00);
	--kb-success: var(--color-alert-success, #06b700);

	/* Radii */
	--kb-radius-sm:   var(--border-radius-sm, 0.25rem);
	--kb-radius-md:   var(--border-radius-md, 0.5rem);
	--kb-radius-lg:   var(--border-radius-lg, 1rem);
	--kb-radius-pill: var(--border-radius-full, 9999px);

	/* Type — pull from bricks-child tokens (1.4rem etc. at 10px html base) */
	--kb-fs-xs:   var(--font-size-text-xs, 0.75rem);
	--kb-fs-sm:   var(--font-size-text-sm, 0.875rem);
	--kb-fs-base: var(--font-size-text-base, 1rem);
	--kb-fs-lg:   var(--font-size-h6, 1.125rem);
	--kb-fs-xl:   var(--font-size-h5, 1.25rem);
	--kb-fs-2xl:  var(--font-size-h4, 1.5rem);
	--kb-fs-2p5xl:  var(--font-size-h3, 1.75rem);
	--kb-fs-3xl:  var(--font-size-h3, 2rem);

	--kb-fw-medium:   var(--font-weight-medium, 500);
	--kb-fw-semibold: var(--font-weight-semibold, 600);
	--kb-fw-bold:     var(--font-weight-bold, 700);

	--kb-ff-body:    var(--font-family-body, system-ui, sans-serif);
	--kb-ff-heading: var(--font-family-heading, var(--font-family-body, system-ui, sans-serif));

	/* Spacing */
	--kb-sp-xs:  var(--spacing-xs, 0.25rem);
	--kb-sp-sm:  var(--spacing-sm, 0.5rem);
	--kb-sp-md:  var(--spacing-md, 1rem);
	--kb-sp-lg:  var(--spacing-lg, 1.5rem);
	--kb-sp-xl:  var(--spacing-xl, 2rem);
	--kb-sp-2xl: var(--spacing-2xl, 3rem);
	--kb-sp-3xl: var(--spacing-3xl, 4rem);

	/* Motion */
	--kb-trans-fast:   var(--transition-fast, 150ms ease);
	--kb-trans-normal: var(--transition-normal, 300ms ease);
}

/* ── Container ──────────────────────────────────────────────────── */
.kb-shop {
	color: var(--kb-text);
	font-family: var(--kb-ff-body);
}

/* ───────────────────────────────────────────────────────────────── */
/* Filter bar                                                        */
/* ───────────────────────────────────────────────────────────────── */

/* Top filter row: 50/50 split between chips and the globals (price +
   sort). Both children bottom-align, so when chips wrap to multiple
   lines their last row sits on the same baseline as the slider/select.
   Active-filter pills (kb-shop__active) live on their own row below by
   spanning both columns. Collapses to a single column on narrow
   screens. */
.kb-shop__filters {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: var(--kb-sp-md) var(--kb-sp-lg);
	margin-bottom: var(--kb-sp-xl);
}

@media (max-width: 720px) {
	.kb-shop__filters {
		grid-template-columns: 1fr;
	}
}

.kb-shop__chips {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--kb-sp-md);
}

.kb-shop__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kb-sp-sm);
}

.kb-chip,
.kb-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--kb-primary);
	border-radius: var(--kb-radius-pill);
	background: transparent;
	color: var(--kb-primary);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-sm);
	font-weight: var(--kb-fw-medium);
	line-height: 1.2;
	box-sizing: border-box;
	cursor: pointer;
	transition:
		background var(--kb-trans-fast),
		color var(--kb-trans-fast),
		border-color var(--kb-trans-fast);
}


.kb-chip:hover,
.kb-pill:hover,
.kb-chip:focus-visible,
.kb-pill:focus-visible {
	background: var(--kb-primary);
	color: var(--kb-primary-fg);
	outline: none;
}

.kb-chip.is-active,
.kb-pill.is-active,
.kb-pill--active {
	background: var(--kb-primary);
	border-color: var(--kb-primary);
	color: var(--kb-primary-fg);
}

.kb-pill--active {
	gap: 0.5rem;
}

.kb-pill--active span:last-child {
	font-weight: var(--kb-fw-bold);
	font-size: 1.05em;
	line-height: 1;
}

/* ── Active filters row ─────────────────────────────────────────── */
/* Span both columns of .kb-shop__filters so this row sits on its own
   line under the chips/globals split. Pills render flat — categories
   no longer group filters since only one category is active at a
   time. */
.kb-shop__active {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kb-sp-sm);
	margin-top: var(--kb-sp-sm);
}

/* Active-filter pill: soft grey chip, no border, with a trailing × glyph.
   Visually distinct from the primary category chips so the row below
   reads as "currently applied" rather than "available to pick". */
.kb-pill--mini {
	padding: 0.5rem 1rem;
	gap: 0.6rem;
	font-size: var(--kb-fs-sm);
	font-weight: var(--kb-fw-medium);
	border: 0;
	background: var(--kb-surface-soft);
	color: var(--kb-text);
}

.kb-pill--mini:hover,
.kb-pill--mini:focus-visible {
	background: var(--kb-border);
	color: var(--kb-text);
	outline: none;
}

.kb-shop__clear {
	margin-left: auto;
	background: none;
	border: 0;
	padding: 0;
	color: var(--kb-text-muted);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.kb-shop__clear:hover { color: var(--kb-text); }

/* ── Global price CTA + slider popover ──────────────────────────── */
/* The "Preis" trigger button mirrors chip styling — when collapsed it
   reads as just another filter in the bar; once the user opens it
   the .kb-shop__price-panel anchors below as a small floating panel
   with the dual-thumb range slider inside. */
.kb-shop__price {
	position: relative;
}

.kb-shop__price-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	/* Fixed width so the value text appearing/changing while the user
	   drags the slider doesn't reflow the row (which would shift the
	   sort dropdown to the left of it). Wide enough to seat the
	   longest plausible readout on a single line with breathing room. */
	width: auto;
	white-space: nowrap;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--kb-text);
	border-radius: var(--kb-radius-pill);
	background: transparent;
	color: var(--kb-text);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-sm);
	font-weight: var(--kb-fw-medium);
	line-height: 1.2;
	box-sizing: border-box;
	cursor: pointer;
	transition:
		background var(--kb-trans-fast),
		color var(--kb-trans-fast),
		border-color var(--kb-trans-fast);
}

.kb-shop__price-trigger:hover,
.kb-shop__price-trigger:focus-visible,
.kb-shop__price-trigger.is-open {
	background: var(--kb-text);
	color: var(--kb-primary-fg);
	outline: none;
}

.kb-shop__price-trigger-value {
	margin-left: auto;
	font-weight: var(--kb-fw-bold);
	font-variant-numeric: tabular-nums;
}

.kb-shop__price-panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 30;
	/* Fixed width — readout text width changes as the user drags the
	   slider, so a fluid `min-width` panel resizes on every input. */
	width: 20rem;
	display: flex;
	flex-direction: column;
	gap: var(--kb-sp-sm);
	padding: var(--kb-sp-md);
	background: var(--kb-bg, #fff);
	border: 1px solid var(--kb-border, rgba(0, 0, 0, 0.12));
	border-radius: var(--kb-radius-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.kb-shop__price-readout {
	display: flex;
	justify-content: space-between;
	gap: 0.4ch;
	font-size: var(--kb-fs-sm);
	color: var(--kb-text);
	font-variant-numeric: tabular-nums;
	font-weight: var(--kb-fw-medium);
}

.kb-shop__price-reset {
	align-self: flex-start;
	background: none;
	border: 0;
	padding: 0;
	color: var(--kb-text-muted);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.kb-shop__price-reset:hover {
	color: var(--kb-text);
}

/* ── Sort dropdown ──────────────────────────────────────────────── */
/* The sort icon overlays the native <select> via absolute positioning
   so we can keep using a real native control (accessible, keyboardable)
   while still showing an icon at the leading edge — native selects
   don't allow arbitrary HTML before their text. */
.kb-shop__sort {
	position: relative;
	display: inline-flex;
	min-width: 0;
}

.kb-shop__sort-icon {
	position: absolute;
	top: 50%;
	left: 1.25rem;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--kb-text);
}

.kb-shop__sort select {
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-sm);
	font-weight: var(--kb-fw-medium);
	line-height: 1.2;
	padding: 0.75rem 1.5rem 0.75rem 3rem;
	border: 1px solid var(--kb-text);
	border-radius: var(--kb-radius-pill);
	background: transparent;
	color: var(--kb-text);
	cursor: pointer;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.kb-shop__sort select:focus-visible {
	outline: 2px solid var(--kb-text);
	outline-offset: 2px;
}

/* ── Dual-thumb range slider ────────────────────────────────────── */
/* Two overlapping <input type="range"> elements over a shared visual
   track. The native track of each input is hidden; only the thumbs
   show, with the colored fill bar driven by Alpine state. */
.kb-range {
	position: relative;
	width: 100%;
	height: 24px;
	touch-action: none;
}

.kb-range__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	transform: translateY(-50%);
	background: var(--kb-border, rgba(0, 0, 0, 0.18));
	border-radius: 2px;
	overflow: hidden;
}

.kb-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--kb-primary);
	border-radius: inherit;
}

.kb-range__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.kb-range__input::-webkit-slider-runnable-track {
	background: transparent;
	border: none;
}

.kb-range__input::-moz-range-track {
	background: transparent;
	border: none;
}

.kb-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kb-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: grab;
	pointer-events: auto;
	margin-top: 0;
}

.kb-range__input:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.kb-range__input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kb-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: grab;
	pointer-events: auto;
}

.kb-range__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--kb-primary);
	outline-offset: 2px;
}

.kb-range__input:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--kb-primary);
	outline-offset: 2px;
}

.kb-chip__count {
	font-weight: var(--kb-fw-regular);
	opacity: 0.75;
	margin-left: 0.2ch;
}

/* ── Globals row (price CTA + sort) ─────────────────────────────── */
/* Pushes both controls to the right edge of their column so they
   visually balance the chips on the left. Wraps onto a new line on
   narrow screens since the trigger + sort can be wider than the
   chip-rail allowance. */
.kb-shop__globals {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--kb-sp-sm);
}


/* ── Layout: sidebar + grid ─────────────────────────────────────── */
/* Single column by default (mobile, or when no category with facets is
   active). When `.kb-shop--sidebar-active` lands on the container —
   driven by Alpine's `hasSidebar` so it tracks the runtime state, not
   just whether facets are declared — the grid switches to two columns
   and the children get pinned to their tracks. Pinning matters because
   x-show toggles `display: none`, which would otherwise let the
   results element flow into the narrow sidebar column. */
.kb-shop__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kb-sp-xl);
	align-items: start;
}

.kb-shop__sidebar  { grid-column: 1; }
.kb-shop__results  { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 900px) {
	.kb-shop--sidebar-active .kb-shop__layout {
		/* Sidebar is 28% of the kb-shop layout (not viewport), but never
		   narrower than 20rem so the facets stay readable when a parent
		   theme constrains the page width. */
		grid-template-columns: minmax(20rem, 28%) minmax(0, 1fr);
	}
	.kb-shop--sidebar-active .kb-shop__results {
		grid-column: 2;
	}
}

/* ── Sidebar ────────────────────────────────────────────────────── */
/* Vertical stack of collapsible facet sections. Only one category's
   facets are shown at a time — the active category — so the sidebar
   reads as a flat list of dropdown-style filter accordions. */
.kb-shop__sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.kb-shop__sidebar-group {
	display: flex;
	flex-direction: column;
}

/* Each facet is its own row: a clickable header with chevron above the
   collapsible region of options. Separated by a hairline so the column
   reads as a list of accordion items. */
.kb-facet {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--kb-border-soft, rgba(0, 0, 0, 0.1));
}

.kb-facet:last-child {
	border-bottom: 0;
}

.kb-facet__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kb-sp-sm);
	width: 100%;
	padding: var(--kb-sp-md) 0;
	border: 0;
	background: transparent;
	color: var(--kb-text);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-base);
	font-weight: var(--kb-fw-medium);
	text-align: left;
	cursor: pointer;
}

.kb-facet__toggle:focus-visible {
	outline: 2px solid var(--kb-primary);
	outline-offset: 2px;
	border-radius: var(--kb-radius-sm);
}

.kb-facet__label {
	margin: 0;
	flex: 1 1 auto;
}

.kb-facet__caret {
	flex: 0 0 auto;
	font-size: 0.95em;
	line-height: 1;
	color: var(--kb-text-muted);
	transition: transform var(--kb-trans-fast);
}

.kb-facet__caret.is-open {
	transform: rotate(180deg);
}

.kb-facet__panel {
	padding: 0 0 var(--kb-sp-md);
}

.kb-facet__values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.kb-facet__divider {
	height: 1px;
	margin: 0.4rem 0;
	background: var(--kb-border, rgba(0, 0, 0, 0.12));
}

.kb-facet__option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--kb-fs-sm);
	cursor: pointer;
}

.kb-facet__option input[type="checkbox"] {
	accent-color: var(--kb-primary);
	width: 1rem;
	height: 1rem;
}

.kb-facet__option-count {
	color: var(--kb-text-muted);
	font-variant-numeric: tabular-nums;
}

.kb-facet__range {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.kb-facet__range-readout {
	display: flex;
	gap: 0.4ch;
	font-size: var(--kb-fs-sm);
	color: var(--kb-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ── Grid ───────────────────────────────────────────────────────── */
/* Mobile-first: stack. Tablet: 2 cols. Desktop: 3 cols by default —
   user explicitly asked for 3 columns rather than width-derived auto-
   fill so the layout stays predictable regardless of sidebar state. */
.kb-shop__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kb-sp-xl);
}

/* Below 480px we drop to a single column — 2-up cards become cramped
   on narrow phones once the price + thumbnail row is added. */
@media (min-width: 480px) {
	.kb-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.kb-shop__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Empty / error states ───────────────────────────────────────── */
.kb-shop__empty,
.kb-shop-empty {
	padding: var(--kb-sp-2xl) var(--kb-sp-md);
	text-align: center;
	color: var(--kb-text-muted);
	font-size: var(--kb-fs-lg);
}

.kb-shop-error {
	padding: var(--kb-sp-md);
	border: 1px solid var(--kb-error);
	border-radius: var(--kb-radius-md);
	color: var(--kb-error);
	background: rgba(224, 8, 81, 0.06);
	font-family: var(--font-family-mono, monospace);
	font-size: var(--kb-fs-sm);
}

/* ───────────────────────────────────────────────────────────────── */
/* Product card                                                      */
/* ───────────────────────────────────────────────────────────────── */

/* Card is a 5-row subgrid (media / category / title / price / thumbs).
   Wrappers .kb-card__link and .kb-card__body collapse to `display:
   contents` so their children become direct grid children of the card
   — the card's subgrid then inherits its rows from the parent grid
   (.kb-shop__grid), which means row 4 (price) and row 5 (thumbs) sit
   at the same y-coordinate across every card in the same visual row.
   Result: prices align horizontally, thumbnails always sit at the
   bottom of the card. */
.kb-card {
	display: grid;
	grid-row: span 5;
	grid-template-columns: 1fr;
	grid-template-rows: subgrid;
	gap: var(--kb-sp-sm);
	/* padding: var(--kb-sp-md); */
	/* background: var(--kb-surface-soft, #f5f5f5); */
	border-radius: var(--kb-radius-md);
	transition: transform var(--kb-trans-fast);
}

.kb-card:hover {
	transform: translateY(-2px);
}

.kb-card__link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.kb-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
	border-radius: var(--kb-radius-md);
}

.kb-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform var(--kb-trans-normal);
}

.kb-card:hover .kb-card__image {
	transform: scale(1.03);
}

.kb-card__image--placeholder {
	background:
		repeating-linear-gradient(
			45deg,
			rgba(0, 0, 0, 0.04),
			rgba(0, 0, 0, 0.04) 8px,
			transparent 8px,
			transparent 16px
		);
}

.kb-card__badge {
	position: absolute;
	top: var(--kb-sp-sm);
	right: var(--kb-sp-sm);
	padding: 0.3rem 0.7rem;
	background: var(--kb-primary-dark);
	color: var(--kb-primary-fg);
	border-radius: var(--kb-radius-pill);
	font-size: var(--kb-fs-xs);
	font-weight: var(--kb-fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

/* The body wrapper collapses so category/title/price promote to direct
   grid items of .kb-card — required for the subgrid to align them
   across cards. */
.kb-card__body {
	display: contents;
}

/* Hierarchy: category < title > price. Category is the smallest and
   palest signal, the title carries the main weight, the price closes
   with brand-color emphasis so the eye lands on it last. */
.kb-card__category {
	margin: 0;
	font-size: var(--kb-fs-xs);
	font-weight: var(--kb-fw-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kb-text-muted);
}

.kb-card__title {
	margin: 0;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-lg);
	font-weight: var(--kb-fw-bold);
	line-height: 1.25;
	color: var(--kb-text);
}

.kb-card__price {
	margin: 0.15rem 0 0;
	font-size: var(--kb-fs-lg);
	font-weight: var(--kb-fw-bold);
	color: var(--kb-primary);
	font-variant-numeric: tabular-nums;
}

/* Thumbnail row — sibling of .kb-card__link, outside the anchor so
   clicks swap the main image without navigating. Three-track grid so
   each thumb always occupies 1/3 of the row, regardless of how many
   thumbnails actually exist (with 2, the third cell stays empty
   instead of the thumbs stretching to 50% each). */
.kb-card__thumbs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--kb-sp-sm);
	margin-top: var(--kb-sp-sm);
}

/* Border is a constant 2px (transparent by default) so the active /
   hover state only changes its colour — no layout shift while the
   gallery cycles. */
.kb-card__thumb {
	min-width: 0;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--kb-radius-sm, 0.4rem);
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--kb-trans-fast);
}

.kb-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kb-card__thumb:hover,
.kb-card__thumb:focus-visible {
	border-color: var(--kb-primary);
	outline: none;
}

.kb-card__thumb.is-active {
	border-color: var(--kb-primary);
}

.kb-price__from {
	color: var(--kb-text-muted);
	margin-right: 0.25rem;
	font-size: var(--kb-fs-sm);
	font-weight: var(--kb-fw-medium);
}


/* ───────────────────────────────────────────────────────────────── */
/* Single product (PDP)                                              */
/* ───────────────────────────────────────────────────────────────── */

.kb-shopify-pdp-wrap {
	display: block;
	width: 100%;
	padding: 5vh 0;
	/* background: var(--color-background, #f9f4f1); */
}

.kb-pdp {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--kb-sp-xl) var(--kb-sp-md) var(--kb-sp-3xl);
	color: var(--kb-text);
	font-family: var(--kb-ff-body);
}

/* ── Back link ──────────────────────────────────────────────────── */
/* Sits at the very top-left of the PDP. JS swaps the href on init to
   the archive URL the user came from (with filters + sort intact). */
.kb-pdp__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--kb-sp-lg);
	padding: 0;
	background: none;
	border: 0;
	color: var(--kb-text);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-sm);
	font-weight: var(--kb-fw-medium);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--kb-trans-fast);
}

.kb-pdp__back:hover,
.kb-pdp__back:focus-visible {
	color: var(--kb-primary);
	outline: none;
}

.kb-pdp__back-icon.kb-pdp__back-icon {
	font-size: 1.25rem;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.kb-pdp__breadcrumb ol {
	list-style: none;
	margin: 0 0 var(--kb-sp-lg) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--kb-fs-sm);
	color: var(--kb-text-muted);
}

.kb-pdp__breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.kb-pdp__breadcrumb li:not(:last-child)::after {
	content: '›';
	color: var(--kb-text-muted);
	line-height: 1;
}

.kb-pdp__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.kb-pdp__breadcrumb a:hover { text-decoration: underline; }

.kb-pdp__breadcrumb [aria-current="page"] {
	color: var(--kb-text);
	font-weight: var(--kb-fw-medium);
}

/* ── Two-column layout ──────────────────────────────────────────── */
.kb-pdp__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--kb-sp-2xl);
	align-items: start;
}

@media (max-width: 768px) {
	.kb-pdp__layout {
		grid-template-columns: 1fr;
		gap: var(--kb-sp-xl);
	}
}

/* ── Gallery ────────────────────────────────────────────────────── */
.kb-pdp__gallery {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--kb-sp-md);
}

@media (max-width: 480px) {
	.kb-pdp__gallery {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) auto;
	}
	.kb-pdp__thumbs {
		grid-row: 2;
		flex-direction: row;
		max-height: none;
	}
}

.kb-pdp__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--kb-sp-sm);
	max-height: 36rem;
	overflow-y: auto;
	padding-right: 2px;
}

.kb-pdp__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--kb-radius-md);
	/* background: var(--kb-surface); */
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--kb-trans-fast);
}

.kb-pdp__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.kb-pdp__thumb.is-active {
	border-color: var(--kb-primary);
}

.kb-pdp__main-image {
	position: relative;
	aspect-ratio: 1 / 1;
	/* background: var(--kb-surface); */
	border-radius: var(--kb-radius-md);
	overflow: hidden;
}

.kb-pdp__main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media (hover: hover) and (pointer: fine) {
	.kb-pdp__main-image {
		cursor: zoom-in;
	}
}

/* ── Hover-zoom magnifier ───────────────────────────────────────── */
/* 200×200 floating lens, position-fixed in the viewport so the JS can
   anchor it next to the cursor without worrying about offset parents.
   Hidden entirely on touch/coarse-pointer devices via the media query
   below — `display: none` removes it from the layer tree completely. */
.kb-pdp__magnifier {
	position: fixed;
	z-index: 100;
	width: 200px;
	height: 200px;
	border: 1px solid var(--kb-text);
	border-radius: var(--kb-radius-md);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	background-color: #fff;
	background-repeat: no-repeat;
	pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
	.kb-pdp__magnifier {
		display: none;
	}
}

/* ── Info column ────────────────────────────────────────────────── */
.kb-pdp__info {
	display: flex;
	flex-direction: column;
	gap: var(--kb-sp-md);
}

.kb-pdp__category {
	margin: 0;
	font-family: var(--kb-ff-heading);
	font-size: var(--kb-fs-2xl);
	font-weight: var(--kb-fw-bold);
	color: var(--kb-primary-tint);
	letter-spacing: 0.01em;
}

.kb-pdp__title {
	margin: 0;
	font-family: var(--kb-ff-heading);
	font-size: var(--kb-fs-2p5xl);
	font-weight: var(--kb-fw-bold);
	line-height: 1.1;
	color: var(--kb-primary-dark);
}

.kb-pdp__price-line {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: var(--kb-sp-sm);
}

.kb-pdp__price {
	margin: 0;
	font-size: var(--kb-fs-2xl);
	font-weight: var(--kb-fw-bold);
	color: var(--kb-primary);
	font-variant-numeric: tabular-nums;
}

.kb-pdp__tax-note {
	margin: 0;
	font-size: var(--kb-fs-sm);
	line-height: 1.5;
	color: var(--kb-text-muted);
}

.kb-pdp__lede {
	margin: 48px 0 72px 0;
	color: var(--kb-text);
	line-height: 1.55;
}

/* ── Options + qty + ATC ────────────────────────────────────────── */
.kb-pdp__options {
	display: flex;
	flex-direction: column;
	gap: var(--kb-sp-md);
	margin-top: var(--kb-sp-md);
}

/* Qty stepper + select(s) sit side-by-side. Selects column flexes,
   qty keeps a fixed width so the design stays the same regardless
   of how many options the product has. */
.kb-pdp__controls {
	display: flex;
	gap: var(--kb-sp-sm);
	align-items: stretch;
	flex-wrap: wrap;
}

.kb-pdp__selects {
	display: flex;
	flex-direction: column;
	gap: var(--kb-sp-sm);
	flex: 1 1 14rem;
	min-width: 0;
}

.kb-pdp__option {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Material chevron overlays the native <select> from the right edge.
   `pointer-events: none` lets the click pass through to the select so
   the native picker still opens normally. */
.kb-pdp__option-caret {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--kb-primary);
}

/* Visually hide the option label — the placeholder option text serves
   as the visible label, the <label> stays for screen readers. */
.kb-pdp__option-label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kb-pdp__option-select {
	width: 100%;
	padding: 0.85rem 2.75rem 0.85rem 1.1rem;
	border: 1px solid var(--kb-primary);
	border-radius: var(--kb-radius-md);
	background-color: #fff;
	color: var(--kb-primary-dark);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-base);
	font-weight: var(--kb-fw-medium);
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color var(--kb-trans-fast), box-shadow var(--kb-trans-fast);
}

.kb-pdp__option-select:focus-visible {
	outline: none;
	border-color: var(--kb-primary-dark);
	box-shadow: 0 0 0 3px rgba(0, 65, 125, 0.15);
}

.kb-pdp__option-select option {
	color: var(--kb-text);
	background: #fff;
}

/* Pin the qty stepper to a fixed width so it stays compact even when
   `.kb-pdp__selects` is absent (Title-only products). Internal flex
   sizing keeps the buttons hugged to the edges and the digit centered. */
.kb-pdp__qty {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	width: 9rem;
	min-height: 3rem;
	border: 1px solid var(--kb-primary);
	border-radius: var(--kb-radius-md);
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}

.kb-pdp__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--kb-primary);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--kb-trans-fast);
}

/* Override the global .material-symbols-outlined sizing for the qty
   icons — 1.5rem looked oversized inside the 2.5rem-wide button. The
   double-class trick keeps specificity (0,2,0) high enough to win. */
.kb-pdp__qty-icon.kb-pdp__qty-icon {
	font-size: 1.25rem;
}

.kb-pdp__qty-btn:hover:not(:disabled) {
	background: var(--kb-surface-soft);
}

.kb-pdp__qty-btn:disabled {
	color: var(--kb-text-muted);
	cursor: not-allowed;
}

.kb-pdp__qty-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 0;
	border: 0;
	text-align: center;
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-base);
	font-weight: var(--kb-fw-semibold);
	background: #fff;
	color: var(--kb-primary-dark);
	-moz-appearance: textfield;
}

.kb-pdp__qty-input::-webkit-outer-spin-button,
.kb-pdp__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.kb-pdp__atc {
	width: 100%;
	padding: 1rem 1.5rem;
	border: 0;
	border-radius: var(--kb-radius-md);
	background: var(--kb-primary);
	color: var(--kb-primary-fg);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-weight: var(--kb-fw-bold);
	font-size: var(--kb-fs-base);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition:
		background var(--kb-trans-fast),
		transform var(--kb-trans-fast);
}

.kb-pdp__atc:hover:not(:disabled) {
	background: var(--kb-primary-dark);
}

.kb-pdp__atc:active:not(:disabled) {
	transform: translateY(1px);
}

.kb-pdp__atc:disabled {
	background: var(--kb-border);
	color: var(--kb-text-muted);
	cursor: not-allowed;
}

.kb-pdp__draft-notice {
	padding: 0.7rem 1rem;
	margin: 0 0 var(--kb-sp-sm);
	border-radius: var(--kb-radius-sm);
	background: rgba(255, 123, 0, 0.08);
	border: 1px solid var(--kb-warning);
	color: var(--kb-warning);
	font-size: var(--kb-fs-sm);
	font-weight: var(--kb-fw-medium);
}

.kb-pdp__sold-out,
.kb-pdp__stock {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--kb-fs-sm);
}

.kb-pdp__sold-out {
	color: var(--kb-error);
	font-weight: var(--kb-fw-semibold);
	margin-top: var(--kb-sp-xs);
}

.kb-pdp__stock {
	color: var(--kb-success);
	font-weight: var(--kb-fw-medium);
	margin-top: var(--kb-sp-xs);
}

.kb-pdp__stock-dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--kb-success);
}

/* ── Description ────────────────────────────────────────────────── */
.kb-pdp__details {
	margin-top: var(--kb-sp-2xl);
	padding-top: var(--kb-sp-xl);
	border-top: 1px solid var(--kb-border-soft);
}

.kb-pdp__details-heading {
	margin: 0 0 var(--kb-sp-md) 0;
	font-family: var(--kb-ff-heading);
	font-size: var(--kb-fs-xl);
	font-weight: var(--kb-fw-bold);
	color: var(--kb-text);
}

.kb-pdp__description {
	color: var(--kb-text);
	line-height: 1.7;
	max-width: 65ch;
}

.kb-pdp__description :first-child { margin-top: 0; }
.kb-pdp__description :last-child  { margin-bottom: 0; }

.kb-pdp__description a {
	color: var(--kb-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ── Related ────────────────────────────────────────────────────── */
.kb-pdp__related {
	margin-top: var(--kb-sp-3xl);
	padding-top: var(--kb-sp-xl);
	border-top: 1px solid var(--kb-border-soft);
}

.kb-pdp__related-heading {
	margin: 0 0 var(--kb-sp-lg) 0;
	font-family: var(--kb-ff-heading);
	font-size: var(--kb-fs-2xl);
	font-weight: var(--kb-fw-bold);
	color: var(--kb-text);
}

/* ───────────────────────────────────────────────────────────────── */
/* Cart trigger + drawer                                             */
/* ───────────────────────────────────────────────────────────────── */

html.kb-cart-locked,
html.kb-cart-locked body {
	overflow: hidden;
}

/* ── Trigger button ─────────────────────────────────────────────── */
.kb-cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--kb-radius-md);
	background: transparent;
	color: var(--kb-text);
	cursor: pointer;
	transition: background var(--kb-trans-fast);
}

.kb-cart-button:hover {
	background: var(--kb-surface-soft);
}

.kb-cart-button__icon {
	display: inline-flex;
}

.kb-cart-button__badge {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--kb-radius-pill);
	background: var(--kb-primary);
	color: var(--kb-primary-fg);
	font-size: 0.6875rem;
	font-weight: var(--kb-fw-bold);
	line-height: 1;
}

/* ── Drawer (root + backdrop + panel) ───────────────────────────── */
.kb-cart-drawer-root {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}

.kb-cart-drawer-root > * {
	pointer-events: auto;
}

.kb-cart-drawer__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 33, 63, 0.45);
	transition: opacity var(--transition-base, 200ms ease);
}

.kb-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(30vw, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--kb-primary-fg);
	color: var(--kb-text);
	box-shadow: -4px 0 28px rgba(0, 33, 63, 0.18);
	will-change: transform;
}

/* Slide-in transition classes consumed by Alpine x-transition. */
.kb-cart-drawer--enter,
.kb-cart-drawer--leave {
	transition: transform var(--transition-base, 220ms ease);
}
.kb-cart-drawer--enter-start,
.kb-cart-drawer--leave-end   { transform: translateX(100%); }
.kb-cart-drawer--enter-end,
.kb-cart-drawer--leave-start { transform: translateX(0); }

/* ── Header ─────────────────────────────────────────────────────── */
.kb-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kb-sp-sm);
	padding: var(--kb-sp-md) var(--kb-sp-lg);
	border-bottom: 1px solid var(--kb-border-soft);
}

.kb-cart-drawer__title {
	margin: 0;
	font-family: var(--kb-ff-heading);
	font-size: var(--kb-fs-lg);
	font-weight: var(--kb-fw-bold);
	color: var(--kb-text);
}

.kb-cart-drawer__count {
	color: var(--kb-text-muted);
	font-weight: var(--kb-fw-medium);
	margin-left: 0.35rem;
}

.kb-cart-drawer__close {
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: var(--kb-radius-sm);
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--kb-text);
	text-align: center;
}

.kb-cart-drawer__close:hover {
	background: var(--kb-surface-soft);
}

/* ── Body ───────────────────────────────────────────────────────── */
.kb-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--kb-sp-md) var(--kb-sp-lg);
}

.kb-cart-drawer__body[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.kb-cart-drawer__empty {
	margin: var(--kb-sp-2xl) 0;
	color: var(--kb-text-muted);
	text-align: center;
	font-size: var(--kb-fs-base);
}

.kb-cart-drawer__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kb-sp-md);
}

.kb-cart-drawer__error {
	margin-top: var(--kb-sp-md);
	padding: 0.7rem 0.85rem;
	border-radius: var(--kb-radius-md);
	background: rgba(224, 8, 81, 0.08);
	color: var(--kb-error);
	font-size: var(--kb-fs-sm);
}

/* ── Single line ────────────────────────────────────────────────── */
.kb-cart-line {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 3fr;
	gap: var(--kb-sp-md);
	padding-bottom: var(--kb-sp-md);
	border-bottom: 1px solid var(--kb-border-soft);
}

.kb-cart-line:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.kb-cart-line__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	/* width: 4.5rem;
	height: 4.5rem;
	background: var(--kb-surface); */
	border-radius: var(--kb-radius-md);
	overflow: hidden;
}

.kb-cart-line__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.kb-cart-line__info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.kb-cart-line__title {
	margin: 0;
	font-size: var(--kb-fs-base);
	font-weight: var(--kb-fw-bold);
	line-height: 1.25;
	color: var(--kb-text);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.kb-cart-line__variant {
	margin: 0;
	color: var(--kb-text-muted);
	font-size: var(--kb-fs-sm);
}

.kb-cart-line__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kb-sp-sm);
	margin-top: 0.35rem;
}

/* Mirrors the PDP stepper (.kb-pdp__qty) — same pill, same blue border,
   same Material icon buttons — just scaled to fit the narrower cart
   drawer line row. Keeps the two qty pickers visually unified. */
.kb-cart-line__qty {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	min-height: 2.5rem;
	border: 1px solid var(--kb-primary);
	border-radius: var(--kb-radius-md);
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}

.kb-cart-line__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2rem;
	width: 2rem;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--kb-primary);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--kb-trans-fast);
}

.kb-cart-line__qty-btn:hover:not(:disabled) {
	background: var(--kb-surface-soft);
}

.kb-cart-line__qty-btn:disabled {
	cursor: not-allowed;
	color: var(--kb-text-muted);
}

/* Double-class override of the global .material-symbols-outlined size
   (1.5rem) — the cart stepper is more compact than the PDP, so the
   icons drop a step lower to keep visual proportion. */
.kb-cart-line__qty-icon.kb-cart-line__qty-icon {
	font-size: 1.1rem;
}

.kb-cart-line__qty-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5rem;
	font-variant-numeric: tabular-nums;
	color: var(--kb-text);
	font-weight: var(--kb-fw-medium);
}

.kb-cart-line__price {
	margin: 0;
	font-weight: var(--kb-fw-bold);
	color: var(--kb-text);
	font-variant-numeric: tabular-nums;
}

.kb-cart-line__remove {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--kb-text-muted);
	font: inherit;
	font-family: var(--kb-ff-body);
	font-size: var(--kb-fs-sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.kb-cart-line__remove:hover:not(:disabled) {
	color: var(--kb-error);
}

.kb-cart-line__remove:disabled {
	cursor: not-allowed;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.kb-cart-drawer__footer {
	padding: var(--kb-sp-md) var(--kb-sp-lg);
	border-top: 1px solid var(--kb-border-soft);
	display: flex;
	flex-direction: column;
	gap: var(--kb-sp-sm);
	background: var(--kb-bg);
}

.kb-cart-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: var(--kb-fw-bold);
	font-size: var(--kb-fs-lg);
	color: var(--kb-text);
}

.kb-cart-drawer__tax-note {
	margin: 0;
	font-size: var(--kb-fs-xs);
	color: var(--kb-text-muted);
}

.kb-cart-drawer__checkout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.25rem;
	padding: 0.95rem 1.5rem;
	border-radius: var(--kb-radius-md);
	background: var(--kb-primary);
	color: var(--kb-primary-fg);
	font-family: var(--kb-ff-body);
	font-weight: var(--kb-fw-bold);
	font-size: var(--kb-fs-base);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--kb-trans-fast);
}

.kb-cart-drawer__checkout:hover {
	background: var(--kb-primary-dark);
	color: var(--kb-primary-fg);
}

.kb-cart-drawer__checkout[aria-disabled="true"] {
	background: var(--kb-border);
	color: var(--kb-text-muted);
	cursor: not-allowed;
	pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────── */
/* Mobile filter sheet                                               */
/* ───────────────────────────────────────────────────────────────── */
/* The .kb-shop__sheet element holds a second rendering of chips +
   sidebar. By default it's display: none (desktop sees the inline
   chips and the inline sidebar). At the mobile breakpoint the inline
   copies hide and the sheet becomes a fixed 75vh bottom drawer. Both
   copies share the same Alpine state, so toggling a filter inside
   the sheet updates the desktop layout too (and vice versa). */

.kb-shop__filter-trigger,
.kb-shop__sheet,
.kb-shop__sheet-backdrop {
	display: none;
}

@media (max-width: 899px) {
	/* Hide the desktop chip rail + sidebar; their sheet copies take
	   over. Sort dropdown + active pills stay in the top filter row. */
	.kb-shop__filters > .kb-shop__chips,
	.kb-shop__layout > .kb-shop__sidebar {
		display: none;
	}

	/* Surface a "Filter (n)" trigger pill where the chip rail used to
	   sit. Uses the same pill styling so the bar still reads as a row
	   of related controls. */
	.kb-shop__filter-trigger {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.75rem 1.5rem;
		border: 1px solid var(--kb-primary);
		border-radius: var(--kb-radius-pill);
		background: var(--kb-primary);
		color: var(--kb-primary-fg);
		font: inherit;
		font-family: var(--kb-ff-body);
		font-size: var(--kb-fs-sm);
		font-weight: var(--kb-fw-medium);
		line-height: 1.2;
		cursor: pointer;
	}

	.kb-shop__filter-trigger-count {
		font-weight: var(--kb-fw-bold);
	}

	/* Backdrop covers everything behind the sheet. Pointer events on so
	   tapping outside the sheet closes it. */
	.kb-shop__sheet-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 100;
	}

	/* The sheet itself: fixed to the bottom, 75vh tall, slides up from
	   below the viewport. `transform` is reactive to `sheetDragOffset`
	   via inline style so the sheet follows a finger drag in real time. */
	.kb-shop__sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 75vh;
		max-height: 90vh;
		background: #fff;
		border-radius: 1rem 1rem 0 0;
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
		z-index: 101;
		transform: translateY(100%);
		transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
		overflow: hidden;
	}

	.kb-shop__sheet.is-open {
		transform: translateY(0);
	}

	/* Grabber: full-width tap target with a centered horizontal pill so
	   the gesture affordance is unmistakable. The pill is the visual,
	   the wider button area is the touch target. */
	.kb-shop__sheet-handle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 1.75rem;
		flex: 0 0 auto;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: grab;
		touch-action: none;
	}

	.kb-shop__sheet-handle:active {
		cursor: grabbing;
	}

	.kb-shop__sheet-grip {
		display: block;
		width: 2.75rem;
		height: 0.3rem;
		border-radius: 9999px;
		background: rgba(0, 0, 0, 0.2);
	}

	.kb-shop__sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		padding: 0 var(--kb-sp-md) var(--kb-sp-sm);
	}

	.kb-shop__sheet-title {
		margin: 0;
		font-size: var(--kb-fs-lg);
		font-weight: var(--kb-fw-bold);
		color: var(--kb-primary);
	}

	.kb-shop__sheet-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--kb-text-muted);
		font: inherit;
		font-size: 1.4rem;
		line-height: 1;
		cursor: pointer;
	}

	.kb-shop__sheet-close:hover {
		background: rgba(0, 0, 0, 0.06);
		color: var(--kb-text);
	}

	/* Body scrolls vertically when the chips + sidebar exceed the
	   sheet height. */
	.kb-shop__sheet-body {
		display: flex;
		flex-direction: column;
		gap: var(--kb-sp-md);
		flex: 1 1 auto;
		overflow-y: auto;
		padding: var(--kb-sp-sm) var(--kb-sp-md) var(--kb-sp-xl);
		-webkit-overflow-scrolling: touch;
	}

	/* Inside the sheet, chips wrap freely. */
	.kb-shop__sheet-body .kb-shop__chips {
		gap: var(--kb-sp-sm);
	}

	/* Sidebar inside the sheet drops the outer flex gap-management
	   since the sheet body already provides it. */
	.kb-shop__sheet-body .kb-shop__sidebar {
		gap: 0;
		padding: 0;
	}
}