/* Shop catalog + search results UI (.ksc), shared by the Product Catalog and Product Search Results templates.
   Design: catalog round 3A Photo Fan and search 2B Answer + Explore (owner's picks, 2026-10-25). The templates wrap
   WooCommerce's own blocks (Product Collection + Product Template, Product Filters, Catalog Sorting); these rules dress
   them. Tokens only (design.md rule 1). Store: ks/catalog. Data: snippet ks-catalog (PHP). */

.ksc {
	--ksc-gutter: clamp(1rem, 2.5vw, 2.5rem);
	--ksc-top: 0px; /* bottom of the sticky header's visible bar, set by ks/catalog */
	display: block; background: var(--ks-bg); color: var(--ks-text);
	padding-bottom: var(--ks-space-9);
}
.ksc-head { display: contents; } /* the router region; its bar must stick inside the whole section */
.ksc-sr, .ksc .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ksc :where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--ks-color-focus); outline-offset: 3px; }
.ksc :where(h1, h2, h3, p) { margin: 0; }

/* ---------- tones: the menu's colours with the ink the menu pairs them with (megamenu 3B) ---------- */
.ksc-tone { background-color: var(--tone-bg); color: var(--tone-ink); }
.ksc-tone--purple, .ksc-tone--y2k { --tone-bg: var(--ks-color-purple); --tone-ink: var(--ks-color-white); }
.ksc-tone--strawberry, .ksc-tone--coquette { --tone-bg: var(--ks-color-strawberry); --tone-ink: var(--ks-color-white); }
.ksc-tone--lime, .ksc-tone--harajuku { --tone-bg: var(--ks-color-lime); --tone-ink: var(--ks-color-graphite); }
.ksc-tone--tint, .ksc-tone--cutecore { --tone-bg: var(--ks-color-strawberry-tint); --tone-ink: var(--ks-color-graphite); }
.ksc-tone--amber, .ksc-tone--jojifuku { --tone-bg: var(--ks-color-amber); --tone-ink: var(--ks-color-graphite); }
.ksc-tone--ink, .ksc-tone--lolita { --tone-bg: var(--ks-color-strawberry-ink); --tone-ink: var(--ks-color-white); }
.ksc-tone--graphite, .ksc-tone--grunge { --tone-bg: var(--ks-color-graphite); --tone-ink: var(--ks-color-parchment); }
.ksc-tone--goth { --tone-bg: var(--ks-color-night-tint); --tone-ink: var(--ks-color-parchment); }
.ksc-tone--parchment { --tone-bg: var(--ks-color-parchment); --tone-ink: var(--ks-color-graphite); }
/* Halloween: the menu's swaps (graphite and grunge would vanish into the night page) */
body.darkmode :is(.ksc-tone--graphite, .ksc-tone--grunge) { --tone-bg: var(--ks-color-night-soft); }

/* ---------- head: the colour band ---------- */
.ksc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-1) var(--ks-space-2); font: 400 var(--ks-font-size-body) / 1.5 var(--ks-font-body); color: inherit; }
.ksc-crumbs a { display: inline-flex; align-items: center; min-height: var(--ks-size-tap); padding-inline: var(--ks-space-1); color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--ks-duration) var(--ks-ease); }
@media (hover: hover) { .ksc-crumbs a:hover { text-decoration-color: currentColor; } }
.ksc-band2 { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ks-space-5); padding: var(--ks-space-5) var(--ksc-gutter); }
.ksc-band2.is-folded { display: none; }
.ksc-band2__txt { display: grid; gap: var(--ks-space-2); min-width: 0; }
.ksc-band2__title { font: 800 var(--ks-font-size-display) / 1.04 var(--ks-font-heading); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.ksc-desc { max-width: 65ch; font: 400 var(--ks-font-size-body-lg) / 1.6 var(--ks-font-body); color: inherit; }
.ksc-desc:empty { display: none; }
.ksc-band2__seal { flex: none; }
.ksc-band2__seal b { display: block; font: 800 var(--ks-font-size-h3) / 1 var(--ks-font-heading); letter-spacing: -0.01em; }
.ksc-band2.ksc-tone--lime .ksc-band2__seal, .ksc-band2.ksc-tone--harajuku .ksc-band2__seal { background: var(--ks-color-white); }

/* ---------- the sticky colour bar, and the sign the head folds into ---------- */
.ksc-cbar { position: sticky; z-index: 30; top: var(--ksc-top); padding: var(--ks-space-2) var(--ksc-gutter);
	transition: background-color var(--ks-duration-slow) var(--ks-ease), color var(--ks-duration-slow) var(--ks-ease); }
.ksc-cbar__row { display: flex; align-items: center; gap: var(--ks-space-3); }
.ksc-cbar__chips { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; padding-inline-end: var(--ks-space-6);
	-webkit-mask-image: linear-gradient(to right, var(--ks-color-graphite) calc(100% - var(--ks-space-6)), transparent); mask-image: linear-gradient(to right, var(--ks-color-graphite) calc(100% - var(--ks-space-6)), transparent); }
.ksc-cbar__chips::-webkit-scrollbar { display: none; }
.ksc-tchips { flex: none; display: flex; gap: var(--ks-space-2); padding-block: var(--ks-space-1); }
.ksc-tchips + .ksc-tchips { padding-inline-start: var(--ks-space-2); margin-inline-start: var(--ks-space-2); border-inline-start: 1.5px solid currentColor; }
.ksc-tchip { flex: none; display: inline-flex; align-items: center; min-height: var(--ks-size-tap); padding-inline: var(--ks-space-4); border: 1px solid transparent;
	border-radius: var(--ks-radius-pill); background: var(--ks-color-white); color: var(--ks-color-graphite); font: 500 var(--ks-font-size-small) / 1 var(--ks-font-heading); white-space: nowrap; text-decoration: none; }
.ksc-tchip[aria-current] { background: var(--ks-selected-bg); color: var(--ks-selected-text); border-color: var(--ks-color-graphite); font-weight: 700; }
@media (hover: hover) { .ksc-tchip:not([aria-current]):hover { background: var(--ks-color-strawberry-tint); border-color: var(--ks-color-strawberry); } }
.ksc-n { margin-inline-start: var(--ks-space-2); font: 400 var(--ks-font-size-fine) / 1.45 var(--ks-font-body); color: var(--ks-color-graphite-muted); }
.ksc-tchip[aria-current] .ksc-n { color: inherit; }
.ksc-cbar__end { display: flex; align-items: center; gap: var(--ks-space-2); flex: none; }

.ksc-sign2 { display: none; align-items: center; justify-content: space-between; gap: var(--ks-space-4); padding: var(--ks-space-2) 0 var(--ks-space-3); }
.ksc-sign2.is-on { display: flex; }
.ksc-sign2__txt { display: grid; gap: var(--ks-space-1); min-width: 0; }
.ksc-sign2__name { font: 800 var(--ks-font-size-h2) / 1.12 var(--ks-font-heading); letter-spacing: -0.015em; }
.ksc-sign2__n { font: 600 var(--ks-font-size-body) / 1.2 var(--ks-font-heading); letter-spacing: 0; margin-inline-start: var(--ks-space-2); white-space: nowrap; }
.ksc-sign2__line { font: 600 var(--ks-font-size-body) / 1.4 var(--ks-font-heading); }
.ksc-sign2__line:empty { display: none; }
.ksc-sign2__back { flex: none; display: inline-flex; align-items: center; gap: var(--ks-space-2); min-height: var(--ks-size-tap); padding-inline: var(--ks-space-4);
	border: 1.5px solid currentColor; border-radius: var(--ks-radius-pill); background: transparent; color: inherit; text-decoration: none; font: 600 var(--ks-font-size-body) / 1 var(--ks-font-heading); }
@media (hover: hover) { .ksc-sign2__back:hover { color: var(--ks-color-graphite); background: var(--ks-color-white); border-color: var(--ks-color-white); } }
@media (prefers-reduced-motion: no-preference) { .ksc-sign2.is-on { animation: ksc-sign-in var(--ks-duration-slow) var(--ks-ease); } }
@keyframes ksc-sign-in { from { opacity: 0; translate: 0 -8px; } }

/* filter button, view switch, sort (WooCommerce Catalog Sorting: its select, dressed) */
.ksc-fbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ks-space-2); min-height: var(--ks-size-tap); padding-inline: var(--ks-space-4);
	border: 1px solid transparent; border-radius: var(--ks-radius-pill); background: var(--ks-color-white); color: var(--ks-color-graphite); cursor: pointer; font: 600 var(--ks-font-size-small) / 1 var(--ks-font-heading); }
.ksc-fbtn__n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: var(--ks-radius-pill);
	background: var(--ks-color-lime); color: var(--ks-color-graphite); font: 700 0.75rem / 1 var(--ks-font-heading); }
.ksc-fbtn__n:empty { display: none; }
@media (hover: hover) { .ksc-fbtn:hover { background: var(--ks-color-strawberry-tint); } }
.ksc-view { display: inline-flex; padding: 0; gap: 0; border-radius: var(--ks-radius-pill); background: var(--ks-color-white); }
.ksc-view button { display: inline-flex; align-items: center; gap: var(--ks-space-1); min-height: var(--ks-size-tap); padding-inline: var(--ks-space-3); border: 0; border-radius: var(--ks-radius-pill);
	background: transparent; color: var(--ks-color-graphite); cursor: pointer; font: 600 var(--ks-font-size-fine) / 1 var(--ks-font-heading); }
.ksc-view button[aria-pressed="true"] { background: var(--ks-selected-bg); color: var(--ks-selected-text); }
.ksc-sort { position: relative; display: inline-flex; align-items: center; gap: var(--ks-space-2); min-height: var(--ks-size-tap); padding-inline: var(--ks-space-4) 0;
	border-radius: var(--ks-radius-pill); background: var(--ks-color-white); color: var(--ks-color-graphite); }
.ksc-sort:focus-within { outline: 3px solid var(--ks-color-focus); outline-offset: 2px; }
.ksc-sort__label { font: 400 var(--ks-font-size-small) / 1 var(--ks-font-body); color: var(--ks-color-graphite-muted); }
.ksc-sort .woocommerce-ordering, .ksc-sort .wc-block-catalog-sorting { margin: 0; }
.ksc-sort select { height: 42px; padding: 0 calc(var(--ks-space-4) + 24px) 0 0; border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
	font: 600 var(--ks-font-size-small) / 1.2 var(--ks-font-heading); outline: none; box-shadow: none; }
.ksc-sort select option { color: var(--ks-color-graphite); background: var(--ks-color-white); }
.ksc-sort > svg { position: absolute; right: var(--ks-space-3); pointer-events: none; }

/* ---------- the product grid (Product Template) and card ---------- */
.ksc-main { min-width: 0; padding: var(--ks-space-4) var(--ksc-gutter) 0; container-type: inline-size; }
.ksc-count { margin-bottom: var(--ks-space-3); font: 600 var(--ks-font-size-small) / 1.2 var(--ks-font-heading); color: var(--ks-text); white-space: nowrap; }
.ksc .wc-block-product-template.wc-block-product-template { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-space-6) var(--ks-space-5); margin: 0; }
.ksc .wc-block-product-template.is-flex-container.is-flex-container > li.wc-block-product,
.ksc .wc-block-product-template > li { width: auto; margin: 0; }
.ksc li.wc-block-product { position: relative; display: flex; flex-direction: column; gap: var(--ks-space-1); min-width: 0; }
.ksc li.wc-block-product > * { margin: 0; }
.ksc li.wc-block-product .wc-block-components-product-image { position: relative; margin: 0 0 var(--ks-space-2); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--ks-radius-lg); background: var(--ks-image-fill); }
.ksc li.wc-block-product .wc-block-components-product-image a { display: block; height: 100%; }
.ksc li.wc-block-product .wc-block-components-product-image img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ksc li.wc-block-product .wc-block-components-product-image__inner-container { position: absolute; z-index: 2; top: var(--ks-space-3); left: var(--ks-space-3); pointer-events: none; }
.ksc li.wc-block-product .wc-block-components-product-sale-badge { position: static; display: inline-block; margin: 0; padding: 5px 12px; border: 0; border-radius: var(--ks-radius-pill);
	background: var(--ks-color-amber); color: var(--ks-color-graphite); font: 700 0.75rem / 1 var(--ks-font-heading); letter-spacing: 0.06em; text-transform: uppercase;
	box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.14); transform: rotate(-3deg); }
/* the card's own layer over the photo: the second photo on hover and quick add */
.ksc-card__tools { position: absolute; z-index: 2; inset: 0 0 auto; aspect-ratio: 4 / 5; border-radius: var(--ks-radius-lg); overflow: hidden; pointer-events: none; }
/* .ksc in front: the parent theme's .woocommerce img { height: auto } would win and leave the photo square */
.ksc .ksc-card__alt { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; background: var(--ks-image-fill); transition: opacity var(--ks-duration-slow) var(--ks-ease); }
@media (hover: hover) { .ksc li.wc-block-product:hover .ksc-card__alt { opacity: 1; } }
.ksc-qa { position: absolute; z-index: 3; right: var(--ks-space-2); bottom: var(--ks-space-2); display: inline-flex; align-items: center; gap: var(--ks-space-1);
	min-height: var(--ks-size-tap); padding-inline: var(--ks-space-3) var(--ks-space-4); border: 0; border-radius: var(--ks-radius-pill); pointer-events: auto;
	background: var(--ks-color-white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ks-color-graphite) 18%, transparent);
	color: var(--ks-color-graphite); cursor: pointer; font: 600 var(--ks-font-size-small) / 1 var(--ks-font-heading);
	transition: opacity var(--ks-duration) var(--ks-ease), translate var(--ks-duration) var(--ks-ease); }
@media (hover: hover) {
	.ksc li.wc-block-product:not(:hover):not(:focus-within) .ksc-qa { opacity: 0; translate: 0 6px; }
	.ksc-qa:hover { background: var(--ks-color-lime); }
}
@media (hover: none) { .ksc-qa { padding: 0; width: var(--ks-size-tap); justify-content: center; } .ksc-qa span { display: none; } }
.ksc li.wc-block-product .wp-block-post-title { font: 600 var(--ks-font-size-body) / 1.3 var(--ks-font-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ksc li.wc-block-product .wp-block-post-title a { color: var(--ks-text); text-decoration: none; }
.ksc li.wc-block-product .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--ks-radius-lg); }
.ksc li.wc-block-product .wp-block-post-title a:focus-visible { outline: none; }
.ksc li.wc-block-product .wp-block-post-title a:focus-visible::after { outline: 3px solid var(--ks-color-focus); outline-offset: 3px; }
@media (hover: hover) { .ksc li.wc-block-product:hover .wp-block-post-title a { text-decoration: underline; text-underline-offset: 3px; } }
.ksc .wc-block-components-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ks-space-2); margin: 0;
	font: 700 var(--ks-font-size-price) / 1.2 var(--ks-font-heading); color: var(--ks-color-price); text-align: start; }
.ksc .wc-block-components-product-price del { order: -1; font: 400 var(--ks-font-size-small) / 1.2 var(--ks-font-body); color: var(--ks-text-muted); }
.ksc .wc-block-components-product-price ins { text-decoration: none; background: none; }
.ksc-card__rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-1); font: 400 var(--ks-font-size-small) / 1.5 var(--ks-font-body); }
.ksc-stars { display: inline-flex; color: var(--ks-color-amber); }
.ksc-card__reviews { color: var(--ks-text-muted); }
.ksc-card__opts { font: 400 var(--ks-font-size-fine) / 1.45 var(--ks-font-body); color: var(--ks-text-muted); }
.ksc-card__opts:empty, .ksc-card__meta:empty { display: none; }
.ksc-card__rowx { display: none; }
.ksc-card__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ks-space-1); font: 400 var(--ks-font-size-small) / 1.5 var(--ks-font-body); }
.ksc-card__facts b { font-family: var(--ks-font-heading); font-weight: 700; margin-inline-end: var(--ks-space-1); }
.ksc-card__btns { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--ks-space-2); }
.ksc-card__btns .ks-btn { flex: 1 1 auto; }

/* narrow content areas: the column count follows the space the grid really has */
@container (max-width: 900px) { .ksc .wc-block-product-template.wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 620px) { .ksc .wc-block-product-template.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* views on desktop: 4 up (default), 2 up, rows (Baggu's showroom row: both photos side by side, the facts and both buttons
   beside them). Phones have 1 or 2 per row. */
@media (min-width: 783px) {
	.ksc-main[data-view="2"] .wc-block-product-template.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-space-7) var(--ks-space-5); }
	.ksc-main[data-view="2"] li.wc-block-product .wp-block-post-title { font-size: var(--ks-font-size-h4); line-height: 1.3; }
	.ksc-main[data-view="rows"] .wc-block-product-template.wc-block-product-template { grid-template-columns: minmax(0, 1fr); gap: var(--ks-space-4); }
	.ksc-main[data-view="rows"] li.wc-block-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 1fr); grid-auto-rows: min-content; column-gap: var(--ks-space-5); row-gap: var(--ks-space-2);
		align-content: center; padding-bottom: var(--ks-space-4); border-bottom: 1px solid var(--ks-color-divider); }
	.ksc-main[data-view="rows"] li.wc-block-product .wc-block-components-product-image { grid-column: 1; grid-row: 1 / span 8; margin: 0; }
	.ksc-main[data-view="rows"] .ksc-card__tools { position: relative; grid-column: 2; grid-row: 1 / span 8; inset: auto; background: var(--ks-image-fill); }
	.ksc-main[data-view="rows"] .ksc-card__alt { opacity: 1; }
	.ksc-main[data-view="rows"] li.wc-block-product > :not(.wc-block-components-product-image, .ksc-card__tools) { grid-column: 3; }
	.ksc-main[data-view="rows"] li.wc-block-product .wp-block-post-title { font: 700 var(--ks-font-size-h3) / 1.2 var(--ks-font-heading); -webkit-line-clamp: 3; align-self: end; }
	.ksc-main[data-view="rows"] .ksc-card__rowx { display: grid; gap: var(--ks-space-4); margin-top: var(--ks-space-2); }
	.ksc-main[data-view="rows"] .ksc-qa { display: none; }
	.ksc-main:not([data-view="rows"]) .ksc-card__btns a, .ksc-main:not([data-view="rows"]) .ksc-card__btns button { visibility: hidden; }
	.ksc-main[data-view="rows"] .ksc-btile { display: none; }
}

/* ---------- bento tiles with real pieces (Photo Fan) ---------- */
.ksc-btile { position: relative; min-width: 0; border-radius: var(--ks-radius-lg); overflow: hidden; isolation: isolate; list-style: none; }
.ksc-btile a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 360px; padding: var(--ks-space-5) var(--ks-space-5) 0; gap: var(--ks-space-4);
	color: inherit; text-decoration: none; border-radius: inherit; }
.ksc-btile a:focus-visible { outline: 3px solid var(--ks-color-focus); outline-offset: 3px; }
.ksc-btile__txt { position: relative; z-index: 2; order: -1; display: grid; gap: var(--ks-space-1); padding-inline-end: var(--ks-space-7); }
.ksc-btile__name { font: 800 var(--ks-font-size-h2) / 1.08 var(--ks-font-heading); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ksc-btile__n { font: 700 var(--ks-font-size-body) / 1.3 var(--ks-font-heading); }
.ksc-btile__line { font: 600 var(--ks-font-size-body) / 1.4 var(--ks-font-heading); }
.ksc-btile__arrow { position: absolute; z-index: 3; top: var(--ks-space-4); right: var(--ks-space-4); width: 28px; height: 28px; transition: translate var(--ks-duration) var(--ks-ease); }
@media (hover: hover) { .ksc-btile a:hover .ksc-btile__arrow { translate: 4px 0; } }
.ksc-btile__pics { position: relative; flex: 1; min-height: 190px; }
.ksc-btile__img { position: absolute; bottom: -14%; display: block; width: 58%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; background: var(--ks-image-fill);
	border: var(--ks-space-1) solid var(--ks-color-white); border-radius: var(--ks-radius-md); transition: rotate var(--ks-duration-slow) var(--ks-ease), translate var(--ks-duration-slow) var(--ks-ease); }
.ksc-btile__img:nth-child(1) { left: 2%; rotate: -8deg; }
.ksc-btile__img:nth-child(2) { right: 0; bottom: -6%; rotate: 7deg; }
.ksc-btile__img:only-child { left: 21%; rotate: -4deg; }
.ksc-btile__pics[data-n="3"] .ksc-btile__img:nth-child(1) { left: -8%; right: auto; bottom: -8%; rotate: -11deg; }
.ksc-btile__pics[data-n="3"] .ksc-btile__img:nth-child(2) { left: 21%; right: auto; bottom: 6%; rotate: 0deg; }
.ksc-btile__pics[data-n="3"] .ksc-btile__img:nth-child(3) { left: auto; right: -8%; bottom: -6%; rotate: 11deg; }
.ksc-btile__pics[data-n="4"] .ksc-btile__img { width: 56%; }
.ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(1) { left: -9%; right: auto; bottom: -9%; rotate: -13deg; }
.ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(2) { left: 11%; right: auto; bottom: 5%; rotate: -5deg; }
.ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(3) { left: auto; right: 11%; bottom: 6%; rotate: 5deg; }
.ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(4) { left: auto; right: -9%; bottom: -7%; rotate: 13deg; }
@media (hover: hover) {
	.ksc-btile a:hover .ksc-btile__img:nth-child(1) { rotate: -12deg; translate: -6px -10px; }
	.ksc-btile a:hover .ksc-btile__img:nth-child(2) { rotate: 11deg; translate: 6px -14px; }
	.ksc-btile a:hover .ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(1),
	.ksc-btile a:hover .ksc-btile__pics[data-n="3"] .ksc-btile__img:nth-child(1) { rotate: -16deg; translate: -8px -8px; }
	.ksc-btile a:hover .ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(2) { rotate: -6deg; translate: -3px -14px; }
	.ksc-btile a:hover .ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(3),
	.ksc-btile a:hover .ksc-btile__pics[data-n="3"] .ksc-btile__img:nth-child(2) { rotate: 6deg; translate: 3px -14px; }
	.ksc-btile a:hover .ksc-btile__pics[data-n="4"] .ksc-btile__img:nth-child(4),
	.ksc-btile a:hover .ksc-btile__pics[data-n="3"] .ksc-btile__img:nth-child(3) { rotate: 16deg; translate: 8px -8px; }
}

/* ---------- Show 24 more ---------- */
.ksc-more { display: grid; justify-items: center; gap: var(--ks-space-3); margin-top: var(--ks-space-8); }
.ksc-more__txt { font: 600 var(--ks-font-size-small) / 1.2 var(--ks-font-heading); }
.ksc-more__bar { width: min(280px, 70%); height: 4px; border-radius: var(--ks-radius-pill); background: var(--ks-disabled-bg); overflow: hidden; }
.ksc-more__bar i { display: block; height: 100%; background: var(--ks-text); transition: width var(--ks-duration-slow) var(--ks-ease); }
.ksc-more.is-done .ksc-more__btn, .ksc-more.is-empty { display: none; }
.ksc-more__btn[aria-busy="true"] { opacity: 0.6; }

/* no results (Product Collection: No results) */
.ksc-empty { display: grid; justify-items: center; gap: var(--ks-space-3); padding: var(--ks-space-8) var(--ks-space-5); border-radius: var(--ks-radius-xl); background: var(--ks-bg-soft); text-align: center; }
.ksc-empty__title { font: 700 var(--ks-font-size-h3) / 1.2 var(--ks-font-heading); }
.ksc-empty__text { max-width: 52ch; font: 400 var(--ks-font-size-body) / 1.6 var(--ks-font-body); color: var(--ks-text-muted); }
.ksc-empty__text a { color: var(--ks-color-link); }

/* ---------- sheets: the sort sheet and quick add (dialogs) ---------- */
.ksc-sheet { padding: 0; margin: 0 0 0 auto; border: 0; width: min(440px, 100%); max-width: none; height: 100%; max-height: none; inset-block: 0;
	background: var(--ks-bg-surface); color: var(--ks-text); }
.ksc-sheet::backdrop { background: color-mix(in srgb, var(--ks-color-graphite) 55%, transparent); }
.ksc-sheet[open] { display: flex; }
.ksc-sheet__in { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.ksc-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-3); padding: var(--ks-space-3) var(--ks-space-3) var(--ks-space-3) var(--ks-space-5);
	border-bottom: 1px solid var(--ks-color-divider); }
.ksc-sheet__head h2 { font: 700 var(--ks-font-size-h3) / 1.2 var(--ks-font-heading); }
.ksc-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--ks-space-5); display: grid; align-content: start; gap: var(--ks-space-6); }
.ksc-sheet__foot { display: flex; gap: var(--ks-space-3); padding: var(--ks-space-3) var(--ks-space-5) calc(var(--ks-space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ks-color-divider); }
.ksc-sheet__foot .ks-btn { flex: 1; padding-inline: var(--ks-space-4); }
@media (prefers-reduced-motion: no-preference) { .ksc-sheet[open] { animation: ksc-in-right var(--ks-duration-slow) var(--ks-ease); } }
@keyframes ksc-in-right { from { translate: 40px 0; opacity: 0; } }
@keyframes ksc-in-up { from { translate: 0 40px; opacity: 0; } }
.ksc-sortlink { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-3); min-height: var(--ks-size-tap); color: var(--ks-text); text-decoration: none; font: 400 var(--ks-font-size-body) / 1.3 var(--ks-font-body); }
.ksc-sortlink svg { visibility: hidden; }
.ksc-sortlink[aria-current] { font-weight: 700; }
.ksc-sortlink[aria-current] svg { visibility: visible; }
.ksc-sortlist { display: grid; }

.ksc-quick__top { display: grid; grid-template-columns: 96px 1fr; gap: var(--ks-space-4); align-items: center; }
.ksc-quick__top img { width: 96px; height: 120px; object-fit: cover; border-radius: var(--ks-radius-md); background: var(--ks-image-fill); }
.ksc-quick__top > div { display: grid; gap: var(--ks-space-1); justify-items: start; }
.ksc-quick__name { font: 700 var(--ks-font-size-h4) / 1.3 var(--ks-font-heading); }
.ksc-quick__price { font: 700 var(--ks-font-size-price) / 1.2 var(--ks-font-heading); color: var(--ks-color-price); }
.ksc-quick__price del { font: 400 var(--ks-font-size-small) / 1.2 var(--ks-font-body); color: var(--ks-text-muted); }
.ksc-quick__price ins { text-decoration: none; }
.ksc-quick__opts { display: grid; gap: var(--ks-space-5); }
.ksc-qopt { display: grid; gap: var(--ks-space-3); }
.ksc-qopt__label { font: 600 var(--ks-font-size-small) / 1.2 var(--ks-font-heading); }
.ksc-qopt__label span + span { font: 400 var(--ks-font-size-small) / 1.2 var(--ks-font-body); margin-inline-start: var(--ks-space-2); }
.ksc-qopt__items { display: flex; flex-wrap: wrap; gap: var(--ks-space-3); }
.ksc-qopt .ks-pill[aria-checked="true"] { background: var(--ks-selected-bg); color: var(--ks-selected-text); border-color: var(--ks-color-graphite); font-weight: 700; }
.ksc-quick .ks-btn--cta[aria-disabled="true"] { background: var(--ks-disabled-bg); color: var(--ks-disabled-text); cursor: not-allowed; }
.ksc-quick .ks-btn--cta[aria-disabled="true"]::before { display: none; }
.ksc-link { display: inline-flex; align-items: center; gap: var(--ks-space-1); min-height: var(--ks-size-tap); padding: 0; border: 0; background: none; cursor: pointer;
	color: var(--ks-color-link); font: 600 var(--ks-font-size-small) / 1.2 var(--ks-font-heading); text-decoration: underline; text-underline-offset: 3px; }
.ksc-quick [hidden] { display: none !important; }

/* ---------- the filter drawer: WooCommerce Product Filters in its overlay, opened by "All filters" / the dock ---------- */
.ksc .wc-block-product-filters { display: block; height: 0; --wc-product-filters-overlay-background-color: var(--ks-bg-surface); --wc-product-filters-overlay-text-color: var(--ks-text); }
.ksc .wc-block-product-filters__open-overlay { display: none !important; }
.ksc .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay { background-color: color-mix(in srgb, var(--ks-color-graphite) 55%, transparent); z-index: 70; }
.ksc .wc-block-product-filters__overlay { z-index: 70; }
.ksc .wc-block-product-filters__overlay-dialog { width: min(440px, 100%); }
.ksc .wc-block-product-filters__overlay-header { position: absolute; top: var(--ks-space-2); right: var(--ks-space-2); padding: 0; z-index: 2; }
.ksc .wc-block-product-filters__close-overlay { width: var(--ks-size-tap); height: var(--ks-size-tap); justify-content: center; border-radius: 50%; cursor: pointer; }
.ksc .wc-block-product-filters__close-overlay svg { width: 24px; height: 24px; }
.ksc .wc-block-product-filters__overlay-content { gap: var(--ks-space-6); padding: var(--ks-space-4) var(--ks-space-5) var(--ks-space-5); overflow-y: auto; overscroll-behavior: contain; }
.ksc .wc-block-product-filters__overlay-content > h2 { min-height: var(--ks-size-tap); display: flex; align-items: center; margin: 0; padding-bottom: var(--ks-space-3); border-bottom: 1px solid var(--ks-color-divider);
	font: 700 var(--ks-font-size-h3) / 1.2 var(--ks-font-heading); }
.ksc .wc-block-product-filters__overlay-content h3 { margin: 0 0 var(--ks-space-3); font: 700 0.75rem / 1 var(--ks-font-heading); letter-spacing: 0.06em; text-transform: uppercase; }
.ksc .wc-block-product-filters__overlay-footer { box-shadow: none; border-top: 1px solid var(--ks-color-divider); padding: var(--ks-space-3) var(--ks-space-5) calc(var(--ks-space-3) + env(safe-area-inset-bottom, 0px)); }
.ksc .wc-block-product-filters__apply { min-height: var(--ks-height-control); border: 0; border-radius: var(--ks-radius-pill); background: var(--ks-color-graphite); color: var(--ks-color-parchment);
	font: 700 var(--ks-font-size-btn) / 1 var(--ks-font-heading); cursor: pointer; }
body.darkmode .ksc .wc-block-product-filters__apply { background: var(--ks-color-lime); color: var(--ks-color-graphite); }
.ksc .wc-block-product-filter-checkbox-list__items { display: grid; gap: 0; }
.ksc .wc-block-product-filter-checkbox-list__label { display: flex; align-items: center; gap: var(--ks-space-3); min-height: var(--ks-size-tap); cursor: pointer; font: 400 var(--ks-font-size-body) / 1.3 var(--ks-font-body); }
.ksc .wc-block-product-filter-checkbox-list__input-wrapper, .ksc input[type=checkbox].wc-block-product-filter-checkbox-list__input { width: 22px; height: 22px; flex: none; }
.ksc .wc-block-product-filter-checkbox-list__input-wrapper::before { display: none; }
.ksc input[type=checkbox].wc-block-product-filter-checkbox-list__input { border: 1px solid var(--ks-border-color); border-radius: var(--ks-radius-sm); background: var(--ks-bg-surface); }
.ksc input[type=checkbox].wc-block-product-filter-checkbox-list__input:checked { background: var(--ks-selected-bg); border-color: var(--ks-color-graphite); }
.ksc svg.wc-block-product-filter-checkbox-list__mark { width: 22px; height: 22px; padding: 5px; color: var(--ks-color-graphite); }
.ksc .wc-block-product-filter-checkbox-list__text-wrapper { flex: 1; justify-content: space-between; font-size: var(--ks-font-size-body); line-height: 1.3; }
.ksc .wc-block-product-filter-checkbox-list__input:checked ~ .wc-block-product-filter-checkbox-list__text-wrapper { font-weight: 700; }
.ksc .wc-block-product-filter-checkbox-list__count { font: 400 var(--ks-font-size-fine) / 1.45 var(--ks-font-body); color: var(--ks-text-muted); }
.ksc .wc-block-product-filter-checkbox-list__show-more-button { min-height: var(--ks-size-tap); color: var(--ks-color-link); font: 600 var(--ks-font-size-small) / 1.2 var(--ks-font-heading); }
@media (hover: hover) { .ksc .wc-block-product-filter-checkbox-list__label:hover input { border-color: var(--ks-color-strawberry); } }
.ksc .wc-block-product-filter-removable-chips__items { gap: var(--ks-space-2); }
.ksc .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item { min-height: var(--ks-size-tap); padding-inline: var(--ks-space-4) var(--ks-space-3); border: 0;
	border-radius: var(--ks-radius-pill); background: var(--ks-bg-tint); color: var(--ks-text); font: 600 var(--ks-font-size-small) / 1 var(--ks-font-heading); }
.ksc .wc-block-product-filter-price-slider { --wc-product-filter-price-slider: var(--ks-text); --wc-product-filter-price-slider-handle: var(--ks-bg-surface); --wc-product-filter-price-slider-handle-border: var(--ks-border-color-strong); }
.ksc .wc-block-product-filter-price-slider input[type="text"] { min-height: var(--ks-size-tap); border: 1px solid var(--ks-border-color); border-radius: var(--ks-radius-pill); background: var(--ks-bg-surface); color: var(--ks-text);
	font: 600 var(--ks-font-size-small) / 1.2 var(--ks-font-heading); text-align: center; }
.ksc-switch { display: flex; align-items: center; gap: var(--ks-space-3); min-height: var(--ks-size-tap); color: var(--ks-text); text-decoration: none; font: 600 var(--ks-font-size-body) / 1.2 var(--ks-font-heading); }
.ksc-switch__ui { position: relative; width: 48px; height: 28px; flex: none; border-radius: var(--ks-radius-pill); border: 1px solid var(--ks-border-color); background: var(--ks-bg-surface); transition: background-color var(--ks-duration) var(--ks-ease); }
.ksc-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ks-text-muted); transition: translate var(--ks-duration) var(--ks-ease), background-color var(--ks-duration) var(--ks-ease); }
.ksc-switch[aria-checked="true"] .ksc-switch__ui { background: var(--ks-selected-bg); border-color: var(--ks-color-graphite); }
.ksc-switch[aria-checked="true"] .ksc-switch__ui::after { translate: 20px 0; background: var(--ks-color-graphite); }
.ksc-switch__name { flex: 1; }

/* ---------- active filters: removable chips (two or more on the catalog, where the sign names one) ---------- */
.ksc-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-2); padding-block: var(--ks-space-2) var(--ks-space-1); }
.ksc-active:empty { display: none; }
.gl-catalog .ksc-active:not(:has(.ksc-achip + .ksc-achip)) { display: none; }
.ksc-achip { display: inline-flex; align-items: center; gap: var(--ks-space-2); min-height: var(--ks-size-tap); padding-inline: var(--ks-space-4) var(--ks-space-3);
	border-radius: var(--ks-radius-pill); background: var(--ks-color-white); color: var(--ks-color-graphite); text-decoration: none; font: 600 var(--ks-font-size-small) / 1 var(--ks-font-heading); }
@media (hover: hover) { .ksc-achip:hover { background: var(--ks-color-lime); } }
.ksc-tone--paper .ksc-achip { background: var(--ks-bg-tint); color: var(--ks-text); }
.ksc-cbar .ksc-active .ksc-link { color: inherit; }

/* ---------- product cards outside the Product Template (search shelves, best sellers) ---------- */
.ksc .ksc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-space-6) var(--ks-space-5); list-style: none; margin: 0; padding: 0; }

/* ---------- search results (search 2B: Answer + Explore) ---------- */
.ksc-tone--paper { --tone-bg: var(--ks-bg); --tone-ink: var(--ks-text); }
.ksc-tone--paper :is(.ksc-tchip, .ksc-fbtn, .ksc-sort, .ksc-view) { border: 1px solid var(--ks-border-color); background: var(--ks-bg-surface); color: var(--ks-text); }
.ksc-tone--paper .ksc-n, .ksc-tone--paper .ksc-sort__label { color: var(--ks-text-muted); }
.ksc-tone--paper .ksc-tchip[aria-current] { background: var(--ks-selected-bg); color: var(--ks-selected-text); border-color: var(--ks-color-graphite); }
.ksc-tone--paper .ksc-tchip[aria-current] .ksc-n { color: inherit; }
.kss-bar { border-bottom: 1px solid var(--ks-color-divider); padding-block: var(--ks-space-3); }
.kss-bar .ksc-cbar__row { gap: var(--ks-space-3); }
.kss-bar .kss-filterbtn { flex: none; padding-inline: var(--ks-space-5); border-color: var(--ks-border-color-strong); font-size: var(--ks-font-size-body); line-height: 1; }
.kss-bar .ksc-cbar__end { margin-inline-start: auto; }
.kss-band { display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 32vw) auto; align-items: center; gap: var(--ks-space-4) var(--ks-space-7);
	padding: var(--ks-space-5) var(--ksc-gutter); background: var(--ks-bg-soft); color: var(--ks-text); }
.kss-band__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ks-space-2); min-width: 0; }
.kss-band__tag { margin: 0 0 var(--ks-space-1); }
.kss-word { font: 800 var(--ks-font-size-display) / 1.04 var(--ks-font-heading); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.kss-band__line { max-width: 60ch; font: 500 var(--ks-font-size-body-lg) / 1.5 var(--ks-font-body); }
.kss-band__dry { font: 400 var(--ks-font-size-body) / 1.6 var(--ks-font-body); color: var(--ks-text-muted); }
.kss:not(.is-none) :is(.kss-band__line, .kss-band__dry) { display: none; }
.kss-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 112px; height: 112px; margin: 0; text-align: center; color: var(--ks-color-graphite); }
.kss-seal b { font: 800 1.75rem / 1 var(--ks-font-heading); }
.kss-seal span { font: 700 0.75rem / 1 var(--ks-font-heading); letter-spacing: 0.06em; text-transform: uppercase; }
/* FiboSearch, dressed as the design's search pill (icon button at the start) */
.kss-search { position: relative; min-width: 0; }
.kss-search .dgwt-wcas-search-wrapp { width: 100%; max-width: none; min-width: 0; margin: 0; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp { padding: 0; background: none; border: 0; box-shadow: none; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { height: auto; min-height: var(--ks-height-control); padding: 0 var(--ks-space-4) 0 52px;
	border: 1px solid var(--ks-border-color); border-radius: var(--ks-radius-pill); background: var(--ks-bg-surface); color: var(--ks-text); font: 400 1rem / 1.4 var(--ks-font-body); box-shadow: none; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { color: var(--ks-text-muted); opacity: 1; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit { position: absolute; inset-inline: 4px auto; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; justify-content: center;
	width: var(--ks-size-tap); height: var(--ks-size-tap); min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ks-text); box-shadow: none; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::before { display: none; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg { width: 20px; height: 20px; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg path { fill: currentColor; }
.kss-search .dgwt-wcas-search-wrapp .dgwt-wcas-preloader { inset-inline: auto var(--ks-space-3); }

.kss .ksc-main { padding-top: var(--ks-space-5); }
.kss-answer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-3) var(--ks-space-5); flex-wrap: wrap; margin-bottom: var(--ks-space-4); }
.kss-answer__title { font: 700 var(--ks-font-size-h2) / 1.12 var(--ks-font-heading); letter-spacing: -0.015em; }
.kss-answer__head .ks-btn { min-height: var(--ks-size-tap); }
.kss-back { margin-bottom: var(--ks-space-3); color: var(--ks-color-link); }
.kss-explore { margin-top: var(--ks-space-7); padding-top: var(--ks-space-6); border-top: 1px solid var(--ks-color-divider); }
.kss-explore .kss-answer__head { flex-direction: column; align-items: flex-start; gap: var(--ks-space-1); margin-bottom: var(--ks-space-5); }
.kss-explore__sub { font: 400 var(--ks-font-size-body) / 1.6 var(--ks-font-body); color: var(--ks-text-muted); }
.kss-shelves { display: flex; flex-direction: column; gap: var(--ks-space-6); }
.kss-shelf { display: flex; flex-direction: column; gap: var(--ks-space-4); min-width: 0; }
.kss-shelf__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-4); }
.kss-shelf__title { display: inline-flex; align-items: center; gap: var(--ks-space-3); margin: 0; font: 700 var(--ks-font-size-h3) / 1.2 var(--ks-font-heading); letter-spacing: -0.015em; }
.kss-shelf__title q { quotes: "\201C" "\201D"; }
.kss-shelf__n { letter-spacing: 0.04em; }
.kss-shelf__nav { display: flex; gap: var(--ks-space-2); }
.kss-shelf__nav .ks-icon-btn { border: 1px solid var(--ks-border-color); }
.kss-shelf__row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * var(--ks-space-4)) / 6.35); gap: var(--ks-space-4); list-style: none;
	margin: 0 calc(-1 * var(--ksc-gutter)); padding: 4px var(--ksc-gutter) var(--ks-space-2); scroll-padding-inline: var(--ksc-gutter);
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; contain: paint; }
.kss-shelf__row::-webkit-scrollbar { display: none; }
.kss-shelf__row > li { scroll-snap-align: start; min-width: 0; }
.kss-shelf__end { display: flex; list-style: none; }
.kss-endcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ks-space-1); width: 100%; aspect-ratio: 4 / 5;
	border-radius: 999px 999px var(--ks-radius-lg) var(--ks-radius-lg); background: var(--ks-color-lime); color: var(--ks-color-graphite); text-decoration: none;
	font: 600 1rem / 1.2 var(--ks-font-heading); text-align: center; }
.kss-endcard b.kss-endcard__word { font: 700 var(--ks-font-size-h4) / 1.3 var(--ks-font-heading); }
.kss-endcard .ks-icon { margin-top: var(--ks-space-2); }
@media (hover: hover) { .kss-endcard:hover { background: var(--ks-color-strawberry-tint); } }
.kss-sechead { display: flex; flex-direction: column; gap: var(--ks-space-1); margin-bottom: var(--ks-space-5); }
.kss-sechead__title { font: 700 var(--ks-font-size-h2) / 1.12 var(--ks-font-heading); letter-spacing: -0.015em; }
.kss-sechead__sub { font: 400 var(--ks-font-size-body) / 1.6 var(--ks-font-body); color: var(--ks-text-muted); }
.kss-best { margin-top: var(--ks-space-7); }
.kss-paths { display: flex; flex-direction: column; gap: var(--ks-space-4); }
.kss-paths .kss-sechead { margin-bottom: 0; }
.kss-catlinks { display: flex; flex-wrap: wrap; gap: var(--ks-space-2); list-style: none; margin: 0; padding: 0; }
.kss-catlink { display: inline-flex; align-items: center; gap: var(--ks-space-2); min-height: var(--ks-size-tap); padding-inline: var(--ks-space-5);
	border: 1px solid var(--ks-border-color); border-radius: var(--ks-radius-pill); color: var(--ks-text); text-decoration: none; font: 600 0.9375rem / 1 var(--ks-font-heading); }
.kss-catlink__n { font: 500 0.8125rem / 1 var(--ks-font-body); color: var(--ks-text-muted); }
@media (hover: hover) { .kss-catlink:hover { background: var(--ks-bg-tint); border-color: var(--ks-color-strawberry); } }
.kss-askus { padding-block: var(--ks-space-2); font: 400 var(--ks-font-size-body) / 1.6 var(--ks-font-body); }
.kss-askus a { color: var(--ks-color-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.kss-few { margin-top: var(--ks-space-5); }
/* modes: browse = 4 best matches + shelves; all = the plain grid; few = grid + Ask us + best sellers; none = the no-results block */
.kss.is-browse .wc-block-product-template > li:nth-child(n+5) { display: none; }
.kss.is-browse :is(.ksc-count, .ksc-more) { display: none; }
.kss:not(.is-browse) :is(.kss-answer__head, .kss-explore) { display: none; }
.kss.is-browse .kss-explore .kss-answer__head { display: flex; }
.kss:not(.is-all) .kss-back { display: none; }
.kss:not(.is-few) .kss-few { display: none; }
.kss.is-none :is(.kss-bar, .ksc-count, .ksc-dock) { display: none; }
.kss.is-few .ksc-more { display: none; }

@media (max-width: 1100px) and (min-width: 783px) {
	.kss-band { grid-template-columns: minmax(0, 1fr) auto; }
	.kss-band .kss-search { grid-column: 1 / -1; grid-row: 2; width: min(520px, 100%); }
}
@media (max-width: 782px) {
	.kss-band { grid-template-columns: minmax(0, 1fr) auto; gap: var(--ks-space-3); padding-block: var(--ks-space-4); }
	.kss-band .kss-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
	.kss-word { font-size: var(--ks-font-size-h1); line-height: 1.08; }
	.kss-seal { width: 84px; height: 84px; }
	.kss-seal b { font-size: 1.25rem; line-height: 1; }
	.kss-bar { padding-block: var(--ks-space-2); }
	.kss-bar .kss-filterbtn { display: none; }
	.kss-answer__title, .kss-sechead__title { font-size: var(--ks-font-size-h3); line-height: 1.2; }
	.kss-shelf__nav { display: none; }
	.kss-shelf__row { grid-auto-columns: 42%; gap: var(--ks-space-3); }
	.ksc .ksc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-space-5) var(--ks-space-3); }
}

/* ---------- the phone dock ---------- */
.ksc-dock { display: none; }

/* ---------- tablet & phone ---------- */
@media (max-width: 782px) {
	.ksc-band2 { padding-block: var(--ks-space-4); align-items: flex-start; }
	.ksc-band2__title { font-size: var(--ks-font-size-h1); line-height: 1.08; }
	.ksc-band2__seal { width: 84px; height: 84px; padding: 10px; }
	.ksc-cbar__end { display: none; }
	.ksc-sign2 { padding-block: var(--ks-space-2); gap: var(--ks-space-3); }
	.ksc-sign2__name { font-size: var(--ks-font-size-h3); line-height: 1.2; }
	.ksc-sign2__n { display: block; margin: 0; }
	.ksc-sign2__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.ksc-sign2__back { width: var(--ks-size-tap); padding: 0; justify-content: center; }
	.ksc-main { padding-top: var(--ks-space-3); }
	.ksc .wc-block-product-template.wc-block-product-template, .ksc-main[data-view] .wc-block-product-template.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-space-5) var(--ks-space-3); grid-auto-flow: row dense; }
	.ksc-main[data-view="1"] .wc-block-product-template.wc-block-product-template { grid-template-columns: minmax(0, 1fr); gap: var(--ks-space-6); }
	.ksc li.wc-block-product .wp-block-post-title { font-size: var(--ks-font-size-small); line-height: 1.3; }
	.ksc-main[data-view="1"] li.wc-block-product .wp-block-post-title { font-size: var(--ks-font-size-body); line-height: 1.3; }
	.ksc li.wc-block-product .wc-block-components-product-image__inner-container { top: var(--ks-space-2); left: var(--ks-space-2); }
	.ksc-more { margin-bottom: var(--ks-space-9); }
	/* a tile is a full row on phones: the next piece fills the gap it leaves */
	.ksc-btile { grid-column: span 2; }
	.ksc-btile a { flex-direction: row; align-items: stretch; min-height: 188px; padding: var(--ks-space-4) var(--ks-space-4) 0; }
	.ksc-btile__txt { order: 0; flex: 1; align-content: center; padding: 0 0 var(--ks-space-4); }
	.ksc-btile__pics { order: -1; flex: 0 0 46%; min-height: 0; margin: 0; }
	.ksc-btile__img:nth-child(n+3) { display: none; }
	.ksc-btile__pics[data-n] .ksc-btile__img { width: 62%; top: 50%; bottom: auto; }
	.ksc-btile__pics[data-n] .ksc-btile__img:nth-child(1) { left: 2%; right: auto; translate: 0 -54%; rotate: -8deg; }
	.ksc-btile__pics[data-n] .ksc-btile__img:nth-child(2) { left: auto; right: 0; translate: 0 -46%; rotate: 7deg; }
	.ksc-btile__pics[data-n="1"] .ksc-btile__img:nth-child(1) { left: 19%; rotate: -4deg; }
	.ksc-btile__name { font-size: var(--ks-font-size-h3); line-height: 1.15; }
	.ksc-btile__arrow { display: none; }
	.ksc-dock { position: fixed; z-index: 45; left: 50%; bottom: calc(var(--ks-space-4) + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; align-items: center; gap: var(--ks-space-1);
		padding: var(--ks-space-1); border-radius: var(--ks-radius-pill); background: var(--ks-color-graphite); color: var(--ks-color-parchment); border: 1px solid var(--ks-border-color); }
	.ksc-dock__btn { display: inline-flex; align-items: center; gap: var(--ks-space-2); min-height: var(--ks-size-tap); padding-inline: var(--ks-space-4); border: 0; border-radius: var(--ks-radius-pill);
		background: transparent; color: inherit; cursor: pointer; font: 600 var(--ks-font-size-small) / 1 var(--ks-font-heading); }
	.ksc-dock .ksc-view { background: transparent; }
	.ksc-dock .ksc-view button { color: inherit; width: var(--ks-size-tap); justify-content: center; padding: 0; }
	.ksc-dock .ksc-view button[aria-pressed="true"] { background: var(--ks-color-lime); color: var(--ks-color-graphite); }
	.ksc-sheet { margin: auto 0 0; width: 100%; height: auto; max-height: 88dvh; inset-block: auto 0; border-radius: var(--ks-radius-xl) var(--ks-radius-xl) 0 0; }
	.ksc-sheet__in { max-height: 88dvh; }
	@media (prefers-reduced-motion: no-preference) { .ksc-sheet[open] { animation-name: ksc-in-up; } }
	.ksc .wc-block-product-filters__overlay-dialog { inset: auto 0 0 0; width: 100%; max-height: 88dvh; border-radius: var(--ks-radius-xl) var(--ks-radius-xl) 0 0; --wc-product-filters-closed-translate-x: 0; transform: translateY(100%); }
	.ksc .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.ksc *, .ksc *::before, .ksc *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}