/* ==========================================================================
   E2K Shop Filter
   Tokens match the E2K-Robotics product page: Jost, cream page, blue actions,
   orange accent, grey uppercase group labels (as in the Shop menu).
   ========================================================================== */

.e2k-sf {
	--e2k-sf-font: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
	--e2k-sf-font-heading: var(--e2k-sf-font);
	--e2k-sf-primary: #1576c0;
	--e2k-sf-accent: #f28c0f;
	--e2k-sf-ink: #17191f;
	--e2k-sf-muted: #5c6168;
	--e2k-sf-label: #6b7079;
	--e2k-sf-line: #efe2cf;
	--e2k-sf-cream: #fff7ec;
	--e2k-sf-surface: #ffffff;
	--e2k-sf-primary-soft: color-mix(in srgb, var(--e2k-sf-primary) 11%, #fff);
	--e2k-sf-primary-ink: color-mix(in srgb, var(--e2k-sf-primary) 82%, #000);
	--e2k-sf-accent-soft: color-mix(in srgb, var(--e2k-sf-accent) 17%, #fff);
	--e2k-sf-accent-ink: color-mix(in srgb, var(--e2k-sf-accent) 45%, #3a1d00);
	--e2k-sf-radius: 16px;
	--e2k-sf-radius-sm: 10px;
	--e2k-sf-ease: cubic-bezier(.2, .8, .2, 1);
	--e2k-sf-spring: cubic-bezier(.34, 1.56, .64, 1);
	--e2k-sf-sticky: 96px;
	--e2k-sf-cols: 3;

	position: relative;
	font-family: var(--e2k-sf-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--e2k-sf-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.e2k-sf *,
.e2k-sf *::before,
.e2k-sf *::after { box-sizing: border-box; }

.e2k-sf img,
.e2k-sf svg { max-width: 100%; }

.e2k-sf-icon { display: block; flex: none; }

.e2k-sf__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* --- Theme-proof resets ------------------------------------------------------
   Themes (Hello Elementor included) colour every <button> and its :hover.
   Buttons here read their colours from variables, so every state stays ours. */
.e2k-sf button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	white-space: normal;
	min-width: 0;
	width: auto;
	height: auto;
}
/* Colours are applied in every state (the theme's button:hover would win otherwise).
   Only colour properties live here: size, case and spacing come from each component
   and must never change on hover. */
.e2k-sf button,
.e2k-sf button:hover,
.e2k-sf button:focus,
.e2k-sf button:active {
	border-radius: var(--_r, 0);
	border: var(--_bw, 0) solid var(--_bd, transparent);
	background: var(--_bg, transparent);
	color: var(--_fg, inherit);
	box-shadow: var(--_sh, none);
	transform: var(--_tf, none);
}
.e2k-sf button[hidden] { display: none; }

.e2k-sf :focus { outline: none; }
.e2k-sf :focus-visible {
	outline: 2px solid var(--e2k-sf-primary);
	outline-offset: 2px;
}
/* The real inputs are visually hidden, so ring the label instead. */
.e2k-sf .e2k-sf-opt.is-focus {
	outline: 2px solid var(--e2k-sf-primary);
	outline-offset: 2px;
	border-radius: 8px;
}

.e2k-sf h2,
.e2k-sf h3,
.e2k-sf p,
.e2k-sf ul { margin: 0; padding: 0; }

.e2k-sf a { text-decoration: none; }

/* --- Layout ---------------------------------------------------------------- */
.e2k-sf__layout { display: block; }

@media (min-width: 1024px) {
	.e2k-sf__layout {
		display: grid;
		grid-template-columns: minmax(240px, 272px) minmax(0, 1fr);
		gap: clamp(28px, 3vw, 48px);
		align-items: start;
	}
}

/* --- Filter panel: drawer on phones/tablets, sticky sidebar on desktop ------- */
.e2k-sf__panel {
	display: flex;
	flex-direction: column;
	background: var(--e2k-sf-surface);
}

.e2k-sf--js .e2k-sf__panel {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 100001;
	width: min(88vw, 380px);
	height: 100vh;
	height: 100dvh;
	transform: translateX(-104%);
	visibility: hidden;
	box-shadow: 24px 0 60px -30px rgba(40, 25, 5, .45);
	transition: transform .45s var(--e2k-sf-ease), visibility 0s linear .45s;
}

.e2k-sf.is-drawer-open .e2k-sf__panel {
	transform: none;
	visibility: visible;
	transition: transform .45s var(--e2k-sf-ease);
}

.e2k-sf__backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(23, 25, 31, .42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .35s ease;
}
.e2k-sf.is-drawer-open .e2k-sf__backdrop { opacity: 1; }
.e2k-sf__backdrop[hidden] { display: none; }

.e2k-sf__panel-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 12px 12px 20px;
	padding-top: max(14px, env(safe-area-inset-top));
	border-bottom: 1px solid var(--e2k-sf-line);
}

.e2k-sf .e2k-sf__panel-title {
	flex: 1;
	font-family: var(--e2k-sf-font-heading);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--e2k-sf-ink);
}

.e2k-sf .e2k-sf__clear {
	--_fg: var(--e2k-sf-primary);
	min-height: 44px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 600;
}
.e2k-sf .e2k-sf__clear:hover { --_fg: var(--e2k-sf-primary-ink); text-decoration: underline; }

.e2k-sf .e2k-sf__close {
	--_r: 999px;
	--_fg: var(--e2k-sf-ink);
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	transition: background-color .2s ease, transform .3s var(--e2k-sf-ease);
}
.e2k-sf .e2k-sf__close:hover { --_bg: var(--e2k-sf-cream); transform: rotate(90deg); }

.e2k-sf__form {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 20px 24px;
}

.e2k-sf__panel-foot {
	padding: 12px 20px;
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--e2k-sf-line);
	background: var(--e2k-sf-surface);
}

.e2k-sf .e2k-sf__apply {
	--_r: 10px;
	--_bg: var(--e2k-sf-primary);
	--_fg: #fff;
	width: 100%;
	min-height: 50px;
	padding: 0 20px;
	font-size: 16px;
	font-weight: 600;
	transition: background-color .2s ease, transform .15s ease;
}
.e2k-sf .e2k-sf__apply:hover { --_bg: var(--e2k-sf-primary-ink); }
.e2k-sf .e2k-sf__apply:active { transform: scale(.98); }

@media (min-width: 1024px) {
	.e2k-sf--js .e2k-sf__panel,
	.e2k-sf__panel {
		position: sticky;
		top: var(--e2k-sf-sticky);
		inset: auto;
		z-index: 1;
		width: auto;
		height: auto;
		max-height: calc(100vh - var(--e2k-sf-sticky) - 24px);
		transform: none;
		visibility: visible;
		box-shadow: none;
		background: transparent;
		transition: none;
	}
	.e2k-sf__panel-head { padding: 0 0 12px; border-bottom: 0; }
	.e2k-sf .e2k-sf__close,
	.e2k-sf__panel-foot,
	.e2k-sf__backdrop { display: none; }
	.e2k-sf__form { padding: 0 6px 8px 2px; margin: 0 -6px 0 -2px; scrollbar-width: thin; }
}

/* --- Search ---------------------------------------------------------------- */
.e2k-sf__search { position: relative; margin-bottom: 8px; }

.e2k-sf__search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--e2k-sf-label);
	pointer-events: none;
}

.e2k-sf .e2k-sf__search-input {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 44px 0 44px;
	font: inherit;
	font-size: 16px;
	color: var(--e2k-sf-ink);
	background: var(--e2k-sf-surface);
	border: 1.5px solid var(--e2k-sf-line);
	border-radius: 12px;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.e2k-sf .e2k-sf__search-input::placeholder { color: #8b8f96; opacity: 1; }
.e2k-sf .e2k-sf__search-input:focus {
	border-color: var(--e2k-sf-primary);
	box-shadow: 0 0 0 4px var(--e2k-sf-primary-soft);
	outline: none;
}
.e2k-sf .e2k-sf__search-input::-webkit-search-cancel-button { display: none; }

.e2k-sf .e2k-sf__search-clear {
	--_r: 999px;
	--_fg: var(--e2k-sf-label);
	position: absolute;
	right: 2px;
	top: 2px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
}
.e2k-sf .e2k-sf__search-clear:hover { --_fg: var(--e2k-sf-ink); }
.e2k-sf .e2k-sf__search-clear .e2k-sf-icon { width: 18px; height: 18px; }

/* --- Filter groups ------------------------------------------------------------ */
.e2k-sf-group { border-top: 1px solid var(--e2k-sf-line); }
.e2k-sf__search + .e2k-sf-group { border-top: 0; }

.e2k-sf .e2k-sf-group__head { font-size: inherit; line-height: inherit; }

.e2k-sf .e2k-sf-group__toggle {
	--_fg: var(--e2k-sf-label);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 4px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
}
.e2k-sf .e2k-sf-group__toggle:hover { --_fg: var(--e2k-sf-ink); }

.e2k-sf-group__chevron { transition: transform .35s var(--e2k-sf-ease); }
.e2k-sf-group:not(.is-open) .e2k-sf-group__chevron { transform: rotate(-90deg); }

.e2k-sf-group__body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .4s var(--e2k-sf-ease), opacity .3s ease;
}
.e2k-sf-group:not(.is-open) .e2k-sf-group__body { grid-template-rows: 0fr; opacity: 0; }

.e2k-sf-group__inner {
	min-height: 0;
	overflow: hidden;
	padding: 3px 3px 18px;
	margin: -3px;
}
.e2k-sf-group:not(.is-open) .e2k-sf-group__inner { visibility: hidden; transition: visibility 0s .4s; }

/* Option (checkbox / radio rows) */
.e2k-sf .e2k-sf-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
	padding: 4px 0;
	line-height: 1.3;
	font-size: 16px;
	color: var(--e2k-sf-ink);
	cursor: pointer;
	vertical-align: baseline;
	-webkit-tap-highlight-color: transparent;
}
.e2k-sf .e2k-sf-opt input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.e2k-sf-opt__box {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border: 1.5px solid #cdbfab;
	border-radius: 6px;
	background: #fff;
	color: #fff;
	transition: background-color .2s ease, border-color .2s ease, transform .3s var(--e2k-sf-spring);
}
.e2k-sf-opt__box .e2k-sf-icon {
	width: 16px;
	height: 16px;
	stroke-width: 2.6;
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	transition: stroke-dashoffset .3s var(--e2k-sf-ease) .05s;
}
.e2k-sf-group--radio .e2k-sf-opt__box { border-radius: 999px; }
.e2k-sf-group--radio .e2k-sf-opt__box::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #fff;
	transform: scale(0);
	transition: transform .3s var(--e2k-sf-spring);
}
.e2k-sf-group--radio .e2k-sf-opt__box .e2k-sf-icon { display: none; }

.e2k-sf-opt.is-checked .e2k-sf-opt__box,
.e2k-sf-opt input:checked ~ .e2k-sf-opt__box {
	background: var(--e2k-sf-primary);
	border-color: var(--e2k-sf-primary);
}
.e2k-sf-opt input:checked ~ .e2k-sf-opt__box .e2k-sf-icon { stroke-dashoffset: 0; }
.e2k-sf-group--radio .e2k-sf-opt input:checked ~ .e2k-sf-opt__box::after { transform: scale(1); }
.e2k-sf-opt:active .e2k-sf-opt__box { transform: scale(.88); }

@media (hover: hover) {
	.e2k-sf-opt:hover .e2k-sf-opt__box { border-color: var(--e2k-sf-primary); }
}

.e2k-sf-opt__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.e2k-sf-opt input:checked ~ .e2k-sf-opt__label { font-weight: 600; }

/* Sub-description under an option, e.g. "Beginner / Grades 3–5" */
.e2k-sf .e2k-sf-opt__desc {
	display: block;
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--e2k-sf-muted);
}
.e2k-sf .e2k-sf-opt.is-empty .e2k-sf-opt__desc { color: inherit; }

.e2k-sf-opt__count {
	flex: none;
	min-width: 2ch;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--e2k-sf-label);
	transition: color .2s ease;
}
.e2k-sf-opt__count.is-bump { animation: e2k-sf-bump .45s var(--e2k-sf-spring); }

.e2k-sf .e2k-sf-opt.is-empty { color: #9ea2a8; cursor: default; }
.e2k-sf-opt.is-empty .e2k-sf-opt__box { border-color: #e4dccf; background: #faf7f2; }

.e2k-sf-opt.is-extra { display: none; }
.e2k-sf-group.is-expanded .e2k-sf-opt.is-extra { display: flex; animation: e2k-sf-fade-in .35s var(--e2k-sf-ease) both; }

.e2k-sf .e2k-sf-group__more {
	--_fg: var(--e2k-sf-primary);
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
}
.e2k-sf .e2k-sf-group__more:hover { text-decoration: underline; }

/* Pills variant (same markup as the "Popular" pills in the Shop menu) */
.e2k-sf-group--pills .e2k-sf-group__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.e2k-sf .e2k-sf-group--pills .e2k-sf-opt {
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--e2k-sf-primary-soft);
	color: var(--e2k-sf-primary-ink);
	font-size: 15px;
	font-weight: 600;
	transition: background-color .25s ease, color .25s ease, transform .3s var(--e2k-sf-spring), box-shadow .25s ease;
}
.e2k-sf-group--pills .e2k-sf-opt__box {
	width: 0;
	height: 16px;
	border: 0;
	background: transparent;
	overflow: hidden;
	transition: width .3s var(--e2k-sf-spring);
}
.e2k-sf-group--pills .e2k-sf-opt__box .e2k-sf-icon { width: 16px; height: 16px; }
.e2k-sf-group--pills .e2k-sf-opt__label { flex: none; }
.e2k-sf .e2k-sf-group--pills .e2k-sf-opt__desc { display: inline; margin: 0; font-size: 13px; color: inherit; opacity: .8; }
.e2k-sf-group--pills .e2k-sf-opt__desc::before { content: " · "; }
.e2k-sf-group--pills .e2k-sf-opt__count { min-width: 0; font-size: 13px; font-weight: 500; color: inherit; opacity: .7; }

.e2k-sf .e2k-sf-group--pills .e2k-sf-opt.is-checked {
	background: var(--e2k-sf-primary);
	color: #fff;
	box-shadow: 0 6px 16px -8px var(--e2k-sf-primary);
}
.e2k-sf-group--pills .e2k-sf-opt input:checked ~ .e2k-sf-opt__box { width: 16px; background: transparent; }
.e2k-sf-group--pills .e2k-sf-opt:active { transform: scale(.95); }
.e2k-sf .e2k-sf-group--pills .e2k-sf-opt.is-focus { border-radius: 999px; }

@media (hover: hover) {
	.e2k-sf .e2k-sf-group--pills .e2k-sf-opt:not(.is-checked):not(.is-empty):hover {
		background: color-mix(in srgb, var(--e2k-sf-primary) 18%, #fff);
	}
}

.e2k-sf .e2k-sf-group--pills .e2k-sf-opt.is-empty {
	background: #f4f1ec;
	color: #9ea2a8;
}

/* --- Selects (sort + dropdown filters) -------------------------------------- */
.e2k-sf .e2k-sf__select {
	height: 44px;
	margin: 0;
	padding: 0 40px 0 14px;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--e2k-sf-ink);
	background: var(--e2k-sf-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1.5px solid var(--e2k-sf-line);
	border-radius: 10px;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.e2k-sf .e2k-sf__select:hover { border-color: #dccbb2; }
.e2k-sf .e2k-sf__select:focus { border-color: var(--e2k-sf-primary); box-shadow: 0 0 0 4px var(--e2k-sf-primary-soft); outline: none; }
.e2k-sf .e2k-sf__select--full { width: 100%; }

/* --- Toolbar ------------------------------------------------------------------ */
.e2k-sf__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-bottom: 16px;
}

.e2k-sf .e2k-sf__open {
	--_r: 10px;
	--_bw: 1.5px;
	--_bd: var(--e2k-sf-line);
	--_bg: var(--e2k-sf-surface);
	--_fg: var(--e2k-sf-ink);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	font-size: 16px;
	font-weight: 600;
	transition: border-color .2s ease, transform .15s ease;
}
.e2k-sf .e2k-sf__open:hover { --_bd: var(--e2k-sf-primary); }
.e2k-sf .e2k-sf__open:active { transform: scale(.97); }

.e2k-sf__badge {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--e2k-sf-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	animation: e2k-sf-pop .4s var(--e2k-sf-spring);
}
.e2k-sf__badge[hidden] { display: none; }

.e2k-sf .e2k-sf__summary {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	color: var(--e2k-sf-muted);
}
.e2k-sf__summary strong { color: var(--e2k-sf-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.e2k-sf__sort { display: flex; align-items: center; gap: 10px; }
.e2k-sf .e2k-sf__sort-label { font-size: 15px; color: var(--e2k-sf-muted); white-space: nowrap; }

@media (max-width: 559px) {
	.e2k-sf .e2k-sf__summary { order: 3; flex-basis: 100%; }
	.e2k-sf__sort { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
	.e2k-sf__sort .e2k-sf__select { min-width: 0; max-width: 100%; padding-right: 36px; background-position: right 10px center; }
	.e2k-sf .e2k-sf__sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (min-width: 1024px) {
	.e2k-sf .e2k-sf__open { display: none; }
}

/* --- Active filter chips ------------------------------------------------------ */
.e2k-sf__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.e2k-sf__chips:not(:empty) { margin-bottom: 18px; }

.e2k-sf .e2k-sf-chip {
	--_r: 999px;
	--_bw: 1px;
	--_bd: var(--e2k-sf-line);
	--_bg: var(--e2k-sf-surface);
	--_fg: var(--e2k-sf-ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 8px 0 14px;
	font-size: 15px;
	font-weight: 500;
	animation: e2k-sf-pop .4s var(--e2k-sf-spring) both;
	transition: border-color .2s ease, background-color .2s ease;
}
.e2k-sf .e2k-sf-chip:hover { --_bd: var(--e2k-sf-primary); --_bg: var(--e2k-sf-primary-soft); }
.e2k-sf-chip__group { color: var(--e2k-sf-label); font-weight: 400; }
.e2k-sf-chip__x {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--e2k-sf-cream);
	transition: transform .3s var(--e2k-sf-ease);
}
.e2k-sf-chip__x .e2k-sf-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.e2k-sf .e2k-sf-chip:hover .e2k-sf-chip__x { transform: rotate(90deg); }
.e2k-sf .e2k-sf-chip.is-leaving { animation: e2k-sf-pop-out .25s ease forwards; pointer-events: none; }

.e2k-sf .e2k-sf-chip--clear {
	--_bw: 0;
	--_bg: transparent;
	--_fg: var(--e2k-sf-primary);
	padding: 0 8px;
	font-weight: 600;
}
.e2k-sf .e2k-sf-chip--clear:hover { --_bg: transparent; text-decoration: underline; }

/* --- Loading bar ------------------------------------------------------------ */
.e2k-sf__progress {
	position: relative;
	height: 3px;
	margin: -3px 0 0;
	overflow: hidden;
	border-radius: 3px;
	opacity: 0;
	transition: opacity .25s ease;
}
.e2k-sf__progress::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 38%;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, var(--e2k-sf-accent) 30%, var(--e2k-sf-accent) 70%, transparent);
	transform: translateX(-100%);
}
.e2k-sf.is-loading .e2k-sf__progress { opacity: 1; }
.e2k-sf.is-loading .e2k-sf__progress::before { animation: e2k-sf-indeterminate 1.1s var(--e2k-sf-ease) infinite; }

/* --- Grid ---------------------------------------------------------------------
   Fills the space with cards of at least 240px but never more than --e2k-sf-cols per row. */
.e2k-sf .e2k-sf__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	transition: opacity .25s ease, filter .25s ease;
}
@media (min-width: 480px) {
	.e2k-sf .e2k-sf__grid {
		grid-template-columns: repeat(
			auto-fill,
			minmax(max(240px, calc((100% - (var(--e2k-sf-cols) - 1) * 18px) / var(--e2k-sf-cols))), 1fr)
		);
	}
}
.e2k-sf.is-loading:not(.is-appending) .e2k-sf__grid {
	opacity: .42;
	filter: saturate(.5) blur(1.5px);
	pointer-events: none;
}

/* --- Card (mirrors the "Core kits" section on the home page) ------------------- */
.e2k-sf .e2k-sf-card { position: relative; margin: 0; padding: 0; list-style: none; }

.e2k-sf-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--e2k-sf-surface);
	border: 1px solid rgba(120, 80, 20, .06);
	border-radius: var(--e2k-sf-radius);
	box-shadow: 0 1px 2px rgba(80, 50, 10, .04);
	transition: transform .45s var(--e2k-sf-ease), box-shadow .45s var(--e2k-sf-ease);
}

.e2k-sf-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fff;
}
.e2k-sf .e2k-sf-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .8s var(--e2k-sf-ease);
}

/* Corner badge: "Easiest to build", "Most advanced", "3 builds in 1", "Out of stock" */
.e2k-sf-card__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 5px 10px;
	border-radius: 7px;
	background: var(--e2k-sf-accent);
	color: #1c1206;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .35);
}
.e2k-sf-card__flag--blue { background: var(--e2k-sf-primary); color: #fff; }
.e2k-sf-card__flag--muted { background: var(--e2k-sf-ink); color: #fff; }

.e2k-sf-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px 18px;
}

.e2k-sf-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.e2k-sf-tag {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 8px;
	border-radius: 5px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.e2k-sf-tag--blue { background: var(--e2k-sf-primary-soft); color: var(--e2k-sf-primary-ink); }
.e2k-sf-tag--orange { background: var(--e2k-sf-accent-soft); color: var(--e2k-sf-accent-ink); }

.e2k-sf .e2k-sf-card__title {
	font-family: var(--e2k-sf-font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--e2k-sf-ink);
	overflow-wrap: anywhere;
}
.e2k-sf .e2k-sf-card__link,
.e2k-sf .e2k-sf-card__link:hover,
.e2k-sf .e2k-sf-card__link:visited { color: inherit; }
/* The whole card opens the product; the cart button sits above this layer. */
.e2k-sf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--e2k-sf-radius); }
.e2k-sf-card__link:focus-visible { outline: none; }
.e2k-sf-card__link:focus-visible::after { outline: 2px solid var(--e2k-sf-primary); outline-offset: -2px; }

.e2k-sf .e2k-sf-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6;
	color: var(--e2k-sf-muted);
}

.e2k-sf-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}

.e2k-sf-card__price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	color: var(--e2k-sf-ink);
	font-family: var(--e2k-sf-font-heading);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}
.e2k-sf-card__price del { font-size: 13px; font-weight: 500; color: var(--e2k-sf-label); }
.e2k-sf-card__price ins { text-decoration: none; }
.e2k-sf-card__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.e2k-sf-card__unit { margin-left: -5px; font-family: var(--e2k-sf-font); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--e2k-sf-label); }

.e2k-sf-card__actions { display: inline-flex; align-items: center; gap: 6px; }

.e2k-sf-card__view {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--e2k-sf-primary);
}
.e2k-sf-card__view .e2k-sf-icon { width: 16px; height: 16px; transition: transform .35s var(--e2k-sf-ease); }

.e2k-sf .e2k-sf-card__cart {
	position: relative;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--e2k-sf-primary-soft);
	color: var(--e2k-sf-primary-ink);
	transition: background-color .2s ease, color .2s ease, transform .3s var(--e2k-sf-spring);
}
.e2k-sf .e2k-sf-card__cart:hover,
.e2k-sf .e2k-sf-card__cart:focus-visible { background: var(--e2k-sf-primary); color: #fff; }
.e2k-sf .e2k-sf-card__cart:active { transform: scale(.9); }
.e2k-sf-card__cart .e2k-sf-icon { grid-area: 1 / 1; width: 18px; height: 18px; transition: transform .35s var(--e2k-sf-spring), opacity .2s ease; }
.e2k-sf-card__cart-done { opacity: 0; transform: scale(.4); }
.e2k-sf .e2k-sf-card__cart.loading .e2k-sf-card__cart-icon { animation: e2k-sf-wiggle .6s ease-in-out infinite; }
.e2k-sf .e2k-sf-card__cart.added { background: #1f8a4c; color: #fff; }
.e2k-sf-card__cart.added .e2k-sf-card__cart-icon { opacity: 0; transform: scale(.4); }
.e2k-sf-card__cart.added .e2k-sf-card__cart-done { opacity: 1; transform: none; }
.e2k-sf .e2k-sf-card__cart::after,
.e2k-sf .added_to_cart { display: none !important; }

@media (hover: hover) {
	.e2k-sf-card__inner:hover {
		transform: translateY(-4px);
		box-shadow: 0 20px 40px -24px rgba(120, 70, 10, .35);
	}
	.e2k-sf-card__inner:hover .e2k-sf-card__img { transform: scale(1.04); }
	.e2k-sf-card__inner:hover .e2k-sf-card__view .e2k-sf-icon { transform: translateX(4px); }
}


/* --- Reveal (only when JS is running, so no-JS visitors still see products) ---- */
.e2k-sf--js .e2k-sf-card {
	opacity: 0;
	transform: translateY(24px) scale(.985);
}
.e2k-sf--js .e2k-sf-card.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity .6s var(--e2k-sf-ease) var(--e2k-d, 0ms),
		transform .75s var(--e2k-sf-ease) var(--e2k-d, 0ms);
}

/* Skeletons while "Load more" fetches */
.e2k-sf .e2k-sf-skel { opacity: 1; transform: none; }
.e2k-sf-skel .e2k-sf-card__inner { border-color: var(--e2k-sf-line); }
.e2k-sf-skel__block {
	border-radius: 8px;
	background: linear-gradient(100deg, #f6eee2 20%, #fffaf3 40%, #f6eee2 60%) 0 0 / 300% 100%;
	animation: e2k-sf-shimmer 1.4s linear infinite;
}
.e2k-sf-skel .e2k-sf-card__media { aspect-ratio: 4 / 3; border-radius: 0; }

/* --- Empty / error / load more ------------------------------------------------- */
.e2k-sf__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: clamp(32px, 6vw, 56px) 24px;
	text-align: center;
	background: var(--e2k-sf-cream);
	border: 1px dashed #e6d3b6;
	border-radius: var(--e2k-sf-radius);
	animation: e2k-sf-fade-up .5s var(--e2k-sf-ease) both;
}
.e2k-sf__empty[hidden] { display: none; }
.e2k-sf__empty-icon { width: 44px; height: 44px; color: var(--e2k-sf-accent); animation: e2k-sf-spin 6s linear infinite; }
.e2k-sf .e2k-sf__empty-title { font-family: var(--e2k-sf-font-heading); font-size: 20px; font-weight: 700; line-height: 1.3; }
.e2k-sf .e2k-sf__empty-text { max-width: 42ch; color: var(--e2k-sf-muted); }

.e2k-sf .e2k-sf__btn {
	--_r: 10px;
	--_bg: var(--e2k-sf-primary);
	--_fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 6px;
	padding: 0 22px;
	font-size: 16px;
	font-weight: 600;
	transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.e2k-sf .e2k-sf__btn:hover { --_bg: var(--e2k-sf-primary-ink); }
.e2k-sf .e2k-sf__btn:active { transform: scale(.97); }

.e2k-sf .e2k-sf__btn--ghost {
	--_bw: 1.5px;
	--_bd: var(--e2k-sf-line);
	--_bg: var(--e2k-sf-surface);
	--_fg: var(--e2k-sf-ink);
}
.e2k-sf .e2k-sf__btn--ghost:hover { --_bd: var(--e2k-sf-primary); --_bg: var(--e2k-sf-surface); }

.e2k-sf__more { display: flex; justify-content: center; margin-top: 32px; }
.e2k-sf__more[hidden] { display: none; }
.e2k-sf__more-left {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--e2k-sf-cream);
	color: var(--e2k-sf-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.e2k-sf__sentinel { height: 1px; }

/* No-JS fallback: filters sit above the grid and submit as a normal form */
.e2k-sf:not(.e2k-sf--js) .e2k-sf__open,
.e2k-sf:not(.e2k-sf--js) .e2k-sf__close,
.e2k-sf:not(.e2k-sf--js) .e2k-sf__panel-foot { display: none; }
.e2k-sf:not(.e2k-sf--js) .e2k-sf__panel { margin-bottom: 24px; }

/* Lock page scroll behind the open drawer */
html.e2k-sf-lock,
html.e2k-sf-lock body { overflow: hidden; }

/* --- Compact sizing ------------------------------------------------------------
   Phones keep 40px+ touch targets; the desktop sidebar is tighter. */
.e2k-sf .e2k-sf-group--pills .e2k-sf-opt {
	max-width: 100%;
	min-height: 40px;
	padding: 6px 14px;
	font-size: 14px;
	line-height: 1.25;
}
/* Long names ("Smart Homes & Technology pathway") wrap inside the pill. */
.e2k-sf .e2k-sf-group--pills .e2k-sf-opt__label { flex: 0 1 auto; min-width: 0; white-space: normal; }
.e2k-sf .e2k-sf-group--pills .e2k-sf-opt__count { font-size: 12px; }

@media (min-width: 1024px) {
	.e2k-sf__layout {
		grid-template-columns: minmax(210px, 236px) minmax(0, 1fr);
		gap: 32px;
	}

	.e2k-sf .e2k-sf__panel-title { font-size: 17px; }
	.e2k-sf__panel-head { padding-bottom: 10px; }
	.e2k-sf .e2k-sf__clear { min-height: 32px; padding: 0 4px; font-size: 13px; }

	.e2k-sf__search { margin-bottom: 4px; }
	.e2k-sf .e2k-sf__search-input { height: 40px; padding: 0 36px 0 36px; font-size: 14px; border-radius: 10px; }
	.e2k-sf__search-icon { left: 11px; width: 17px; height: 17px; }
	.e2k-sf .e2k-sf__search-clear { top: 0; right: 0; width: 40px; height: 40px; }
	.e2k-sf .e2k-sf__search-clear .e2k-sf-icon { width: 16px; height: 16px; }

	.e2k-sf .e2k-sf-group__toggle { min-height: 42px; font-size: 11px; letter-spacing: .13em; }
	.e2k-sf-group__chevron { width: 17px; height: 17px; }
	.e2k-sf-group__inner { padding-bottom: 14px; }

	.e2k-sf-group--pills .e2k-sf-group__inner { gap: 6px; }
	.e2k-sf .e2k-sf-group--pills .e2k-sf-opt { min-height: 30px; padding: 5px 11px; font-size: 12.5px; }
	.e2k-sf .e2k-sf-group--pills .e2k-sf-opt__count { font-size: 11px; }
	.e2k-sf-group--pills .e2k-sf-opt__box .e2k-sf-icon,
	.e2k-sf-group--pills .e2k-sf-opt input:checked ~ .e2k-sf-opt__box { width: 13px; }
	.e2k-sf-group--pills .e2k-sf-opt__box { height: 13px; }

	.e2k-sf .e2k-sf-opt { min-height: 34px; gap: 10px; padding: 2px 0; font-size: 14px; }
	.e2k-sf-opt__box { width: 18px; height: 18px; border-radius: 5px; }
	.e2k-sf-opt__box .e2k-sf-icon { width: 13px; height: 13px; }
	.e2k-sf-group--radio .e2k-sf-opt__box::after { width: 8px; height: 8px; }
	.e2k-sf-opt__count { font-size: 12.5px; }
	.e2k-sf .e2k-sf-group__more { min-height: 32px; font-size: 13px; }

	.e2k-sf__toolbar { margin-bottom: 12px; }
	.e2k-sf .e2k-sf__summary,
	.e2k-sf .e2k-sf__sort-label { font-size: 14px; }
	.e2k-sf .e2k-sf__select { height: 38px; font-size: 14px; padding-left: 12px; }
	.e2k-sf .e2k-sf-chip { min-height: 34px; font-size: 13.5px; }
	.e2k-sf-chip__x { width: 20px; height: 20px; }
	.e2k-sf__chips:not(:empty) { margin-bottom: 14px; }
	.e2k-sf__more { margin-top: 28px; }
	.e2k-sf .e2k-sf__btn { min-height: 44px; font-size: 15px; }
}

/* --- ?focus= highlight --------------------------------------------------------- */
.e2k-sf-group.is-spotlight,
.e2k-sf__search.is-spotlight {
	border-radius: 12px;
	animation: e2k-sf-spotlight 2.1s var(--e2k-sf-ease) both;
}
.e2k-sf-group.is-spotlight .e2k-sf-group__toggle { --_fg: var(--e2k-sf-accent-ink); }

/* --- Keyframes ----------------------------------------------------------------- */
@keyframes e2k-sf-indeterminate { to { transform: translateX(270%); } }
@keyframes e2k-sf-shimmer { to { background-position: -300% 0; } }
@keyframes e2k-sf-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes e2k-sf-pop-out { to { opacity: 0; transform: scale(.7); } }
@keyframes e2k-sf-bump { 40% { transform: scale(1.35); color: var(--e2k-sf-accent); } }
@keyframes e2k-sf-fade-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes e2k-sf-fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes e2k-sf-spin { to { transform: rotate(360deg); } }
@keyframes e2k-sf-spotlight {
	0%   { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
	18%  { background-color: var(--e2k-sf-accent-soft); box-shadow: 0 0 0 8px var(--e2k-sf-accent-soft); }
	70%  { background-color: var(--e2k-sf-accent-soft); box-shadow: 0 0 0 8px var(--e2k-sf-accent-soft); }
	100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}
@keyframes e2k-sf-wiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
	.e2k-sf *,
	.e2k-sf *::before,
	.e2k-sf *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
	}
	.e2k-sf--js .e2k-sf-card { opacity: 1; transform: none; }
	.e2k-sf.is-loading .e2k-sf__grid { filter: none; }
}