/* Category, brand and search pages (.cat-*). Load shop-base.css first.
   --cat-sticky-top is the stuck header height from hdr.css (58 + 42 on desktop, 56 on phones): keep them in sync. */

.cat { --cat-sticky-top: 56px; }
@media (min-width: 992px) { .cat { --cat-sticky-top: 100px; } }

/* width: 100% is needed: as a flex item, the auto margins would shrink it to its content */
.cat-wrap { width: 100%; max-width: 1170px; margin-left: auto; margin-right: auto; padding: 0 15px 48px; }
.cat-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Breadcrumbs */
.cat-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--sk-muted); padding: 12px 0 0; }
.cat-crumbs-current { color: var(--sk-ink); }
.cat-id { display: block; font-size: 11px; margin-top: 4px; }

/* Banner (slim) / title */
.cat-banner { position: relative; height: 150px; margin: 10px 0 0; border-radius: var(--sk-radius-sm); overflow: hidden; background: var(--sk-soft); }
.cat-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cat-banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 26, 36, .62) 0%, rgba(20, 26, 36, .28) 45%, rgba(20, 26, 36, 0) 75%); }
.cat-banner-text { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #fff; }
.cat-banner-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.cat-banner .cat-h1 { color: #fff; }
.cat-banner .cat-count { color: rgba(255, 255, 255, .88); }
.cat-h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; color: var(--sk-ink); }
.cat-h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--sk-ink); }
.cat-count { font-size: 13px; color: var(--sk-muted); }
.cat-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 12px 0 0; }
@media (min-width: 768px) {
	.cat-banner { height: 220px; margin-top: 14px; border-radius: var(--sk-radius); }
	.cat-banner-text { left: 32px; bottom: 22px; gap: 8px; }
	.cat-banner-row { gap: 14px; }
	.cat-h1 { font-size: 40px; }
	.cat-count { font-size: 15px; }
	.cat-head { margin-top: 18px; }
	.cat-head .cat-h1 { font-size: 34px; }
}

/* Gender siblings: Men · Women · Kids (small and neutral; inside the banner when there is one) */
.cat-alt { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cat-alt-link { display: inline-flex; align-items: center; min-height: 28px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.cat-alt-link:hover { text-decoration: none; }
.cat-alt-text { color: var(--sk-ink); }
.cat-alt-link:hover .cat-alt-text { color: var(--sk-accent-dark); }
.cat-alt-link--on { border-bottom-color: var(--sk-ink); }
.cat-banner .cat-alt-text, .cat-banner .cat-alt-link:hover .cat-alt-text { color: #fff; }
.cat-banner .cat-alt-link--on { border-bottom-color: #fff; }
.cat-banner .cat-alt-link:hover { border-bottom-color: rgba(255, 255, 255, .5); }

/* Tiles (subcategories / brand categories / see also) */
.cat-tiles { display: flex; gap: 14px; margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.cat-tiles::-webkit-scrollbar { display: none; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; flex: 0 0 auto; text-align: center; }
.cat-tile:hover { text-decoration: none; }
.cat-tile-img { width: 76px; height: 76px; border-radius: 50%; background: var(--sk-soft); border: 1px solid var(--sk-line); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease; }
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; }
/* Product photo: white circle showing the whole product; scene images are cropped to fill */
.cat-tile-img--photo { background: #fff; }
.cat-tile-img--photo img { object-fit: contain; padding: 6px; }
.cat-tile:hover .cat-tile-img { border-color: var(--sk-ink); }
.cat-tile--on .cat-tile-img { border: 2px solid var(--sk-ink); }
.cat-tile-name { font-size: 12px; font-weight: 500; line-height: 1.3; }
.cat-tile-more-n { font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.cat-tiles--folded .cat-tile--extra { display: none; }
.cat-tiles--open .cat-tile--more { display: none; }

/* Band (brand page): one scrolling row instead of two. Frame and arrows come from rail.js,
   like the front page bands and "Recently viewed". */
.cat-rail-viewport { position: relative; }
.cat-rail-viewport::before, .cat-rail-viewport::after {
	content: ""; position: absolute; top: 0; bottom: 8px; width: 56px; z-index: 1;
	opacity: 0; transition: opacity .18s; pointer-events: none;
}
.cat-rail-viewport::before { left: -1px; background: linear-gradient(90deg, #fff 20%, rgba(255, 255, 255, 0)); }
.cat-rail-viewport::after { right: -1px; background: linear-gradient(270deg, #fff 20%, rgba(255, 255, 255, 0)); }
.cat-rail-viewport.has-prev::before, .cat-rail-viewport.has-next::after { opacity: 1; }
.cat-rail-nav {
	position: absolute; top: calc(50% - 18px); z-index: 2; display: none;
	align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 50%; font-size: 26px; line-height: 1; padding-bottom: 3px;
	color: var(--sk-ink); background: #fff; border: 1px solid var(--sk-line);
	box-shadow: 0 2px 10px rgba(55, 63, 80, .16); cursor: pointer;
}
.cat-rail-nav--prev { left: -12px; }
.cat-rail-nav--next { right: -12px; }
.cat-rail-nav:hover { border-color: var(--sk-line-strong); }
.cat-rail-nav:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }
@media (min-width: 992px) {
	.cat-rail-nav { display: flex; opacity: 0; transition: opacity .15s; }
	.cat-rail-viewport:hover .cat-rail-nav, .cat-rail-viewport:focus-within .cat-rail-nav { opacity: 1; }
	/* As on the other bands: :hover outweighs [disabled] */
	.cat-rail-viewport:hover .cat-rail-nav[disabled], .cat-rail-viewport:focus-within .cat-rail-nav[disabled] { opacity: 0; pointer-events: none; }
}
@media (min-width: 768px) {
	.cat-tiles { gap: 28px; margin-top: 26px; flex-wrap: wrap; overflow: visible; }
	/* The band scrolls on large screens too, where the other tile rows wrap */
	.cat-tiles--band { flex-wrap: nowrap; overflow-x: auto; }
	.cat-tile { width: 112px; gap: 10px; }
	.cat-tile-img { width: 100px; height: 100px; }
	.cat-tile-name { font-size: 14px; }
}

/* Our favorites: best buys on a shelf above the list
   Phones and tablets: a full-width swipeable row with the third card peeking in. Desktop: four slots sized like the list.
   Same beige as the header's USP row, so it reads as part of the shop, not an ad. The cards are the list's own .cat-card. */
.cat-shelf { margin: 18px -15px 0; padding: 18px 0; background: var(--sk-soft); }
.cat-shelf-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding: 0 15px; }
.cat-shelf-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.cat-shelf-ic { width: 22px; height: 22px; stroke-width: 1.8; color: var(--sk-accent); }
.cat-shelf-by { font-size: 13px; }
/* The row runs to the screen edge so cards slide off it, and snaps 15px in.
   Sideways only: a row that scrolls on x also scrolls on y, and the color layer below a card
   (.cat-card-more, hidden or not) made the box scroll up and down. It is left out of the swipeable row. */
.cat-shelf-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 15px; padding: 0 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-shelf-row::-webkit-scrollbar { display: none; }
.cat-shelf-row > .cat-cell { flex: 0 0 150px; scroll-snap-align: start; }
@media (max-width: 991.98px) {
	.cat-shelf .cat-card-more { display: none; }
}
@media (min-width: 768px) {
	.cat-shelf-row > .cat-cell { flex-basis: 210px; }
}
@media (min-width: 992px) {
	.cat-shelf { margin: 30px 0 0; padding: 22px 24px 24px; border-radius: var(--sk-radius); }
	.cat-shelf-head { flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 18px; padding: 0; }
	.cat-shelf-title { font-size: 22px; }
	.cat-shelf-by { font-size: 14px; }
	.cat-shelf-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; }
}
/* The color layer that unfolds below a hovered card must cover the filter bar (z-index 20) just below.
   The shelf itself gets no z-index, or it would cover the sticky bar when scrolling past. */
@media (hover: hover) and (pointer: fine) {
	.cat-shelf .cat-cell:hover, .cat-shelf .cat-cell:focus-within { z-index: 21; }
}

/* Filter bar (sticks below the header) */
.cat-tools { position: sticky; top: var(--cat-sticky-top); z-index: 20; margin: 18px -15px 0; padding: 10px 15px; background: #fff; border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); transition: box-shadow .15s ease; }
.cat-tools.is-stuck { box-shadow: 0 6px 16px rgba(42, 49, 64, .08); }
.cat-tools-inner { position: relative; display: flex; align-items: center; gap: 10px; }
/* Chips on one row: flex-wrap + fixed height + overflow hide the ones that wrap to a second line.
   They are all in the "All filters" drawer too, so nothing is lost. */
.cat-chips { display: none; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 24px 8px; height: 38px; overflow: hidden; }
.cat-tools-m { display: flex; flex: 1 1 0; }
.cat-tools-inner > .cat-chip--all { display: none; }
@media (min-width: 992px) {
	.cat-tools { margin: 30px 0 0; padding: 12px 0; }
	.cat-chips { display: flex; }
	.cat-tools-inner > .cat-chip--all { display: inline-flex; flex: 0 0 auto; }
	.cat-tools-m { display: none; }
	.cat-sort { margin-left: auto; }
}
.cat-chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 14px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); color: var(--sk-ink); font-size: 14px; font-weight: 500; background: #fff; white-space: nowrap; }
.cat-chip .cat-ic { color: var(--sk-muted); }
.cat-chip:hover { border-color: var(--sk-ink); }
.cat-chip.is-active { border-color: var(--sk-ink); background: var(--sk-soft); }
.cat-chip[aria-expanded="true"] { border-color: var(--sk-ink); background: var(--sk-soft); }
.cat-chip[aria-expanded="true"] .cat-ic { transform: rotate(180deg); }
.cat-chip-sel:not(:empty) { margin-left: -6px; }
.cat-chip-sel:not(:empty)::before { content: ":\00a0"; }
.cat-chip--all { background: var(--sk-ink); color: #fff; border-color: var(--sk-ink); }
.cat-chip--all .cat-ic { color: #fff; }
.cat-chip--all:hover { background: var(--sk-accent-dark); border-color: var(--sk-accent-dark); }
/* "All filters" shares .cat-chip but must stay dark while the drawer is open,
   or its white text ends up on a light background */
.cat-chip--all[aria-expanded="true"] { background: var(--sk-ink); border-color: var(--sk-ink); color: #fff; }
.cat-chip--all[aria-expanded="true"] .cat-ic { transform: none; color: #fff; }
.cat-chip-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: var(--sk-ink); font-size: 12px; font-weight: 700; }
.cat-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; flex: 1 1 0; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); color: var(--sk-ink); font-size: 14px; font-weight: 500; }
.cat-mbtn--dark { background: var(--sk-ink); color: #fff; border-color: var(--sk-ink); }
/* margin: 0 because the sort box is a <label>, and the theme gives labels a bottom margin that lifted it 3px above the Filter button */
.cat-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0; padding: 0 34px 0 14px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); background: #fff; color: var(--sk-ink); font-size: 14px; font-weight: 500; white-space: nowrap; flex: 1 1 0; min-width: 0; cursor: pointer; }
.cat-sort:hover { border-color: var(--sk-ink); }
.cat-sort-label { color: var(--sk-muted); font-weight: 400; }
.cat-sort select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cat-sort > .cat-ic { position: absolute; right: 12px; color: var(--sk-muted); pointer-events: none; }
.cat-sort-value { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) { .cat-sort { height: 38px; flex: 0 0 auto; } .cat-mbtn { height: 38px; } }

/* Popover below a chip */
.cat-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 340px; max-width: calc(100vw - 30px); background: #fff; border: 1px solid var(--sk-line); border-radius: var(--sk-radius); box-shadow: 0 16px 32px rgba(42, 49, 64, .18); }
.cat-pop-slot { padding: 6px 16px 0; max-height: min(60vh, 460px); overflow: auto; }
.cat-pop-slot .cat-group { border: 0; padding: 8px 0 4px; }
.cat-pop-slot .cat-group-h { display: none; }
.cat-pop-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--sk-line); }

/* Active filters as pills */
.cat-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.cat-active-label { font-size: 13px; }
.cat-active-list { display: contents; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 15px; background: var(--sk-soft); color: var(--sk-ink); font-size: 13px; font-weight: 500; }
.cat-pill .cat-ic { width: 14px; height: 14px; color: var(--sk-muted); }
.cat-pill:hover { background: var(--sk-line); }
.cat-link { font-size: 13px; color: var(--sk-accent); text-decoration: underline; }
.cat-link:hover { color: var(--sk-accent-dark); }

/* Filter groups (shared by drawer and popover) */
.cat-group { border-bottom: 1px solid var(--sk-line); padding: 4px 0 14px; }
.cat-group-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 0 4px; text-align: left; font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.cat-group-h .cat-ic { margin-left: auto; color: var(--sk-muted); transition: transform .15s ease; }
.cat-group-h[aria-expanded="false"] .cat-ic { transform: rotate(-90deg); }
.cat-group-h[aria-expanded="false"] + .cat-group-body { display: none; }
.cat-group-sel { font-size: 12px; font-weight: 500; color: var(--sk-muted); }
.cat-group-body { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cat-options { display: flex; flex-direction: column; gap: 9px; }
.cat-options--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cat-options.is-collapsed .cat-opt:nth-child(n + 9) { display: none; }
.cat-opt { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 14px; color: var(--sk-ink); cursor: pointer; }
.cat-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat-box { width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid var(--sk-line-strong); border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cat-box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cat-opt input:checked + .cat-box { background: var(--sk-ink); border-color: var(--sk-ink); }
.cat-opt input:focus-visible + .cat-box { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
.cat-opt.is-hidden { display: none; }
.cat-options--grid .cat-opt { justify-content: center; min-height: 40px; padding: 0 4px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); font-size: 13px; text-align: center; }
.cat-options--grid .cat-box { display: none; }
.cat-options--grid .cat-opt:has(input:checked) { background: var(--sk-ink); border-color: var(--sk-ink); }
/* Color goes on the text, not the <label>: the theme's dark label color beat the selected button's white text.
   nowrap keeps ranges like "46-48cm" from breaking at the hyphen. */
.cat-opt-text { color: var(--sk-ink); }
.cat-options--grid .cat-opt-text { white-space: nowrap; }
.cat-options--grid input:checked ~ .cat-opt-text { color: #fff; }
/* Size buttons (.cat-map): head circumference, ski and pole lengths in cm, EU/UK/US for shoes. Multi-select.
   For head size, one value selects every range it fits. Color sits on an inner span, because the theme colors buttons. */
.cat-map { margin: 0 0 12px; padding: 0 0 14px; border-bottom: 1px solid var(--sk-line); }
.cat-map--alone { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.cat-hs-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--sk-ink); }
.cat-hs-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--sk-muted); }
.cat-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; margin-top: 10px; }
.cat-map--head .cat-map-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cat-map-btn { min-height: 36px; padding: 2px 4px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); background: #fff; font-size: 13px; line-height: 1.2; cursor: pointer; }
.cat-map-btn-text { color: var(--sk-ink); white-space: nowrap; }
/* Clothing sizes: the letter with the Danish number below */
.cat-map--clothes .cat-map-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 42px; }
.cat-map-btn-sub { font-size: 11px; line-height: 1.1; color: var(--sk-muted); }
.cat-map-btn[aria-pressed="true"] .cat-map-btn-sub { color: #fff; }
.cat-map-btn:hover { border-color: var(--sk-ink); }
.cat-map-btn:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
.cat-map-btn[aria-pressed="true"] { background: var(--sk-ink); border-color: var(--sk-ink); }
.cat-map-btn[aria-pressed="true"] .cat-map-btn-text { color: #fff; }
/* EU/UK/US switch, same look as on the product page (.pdp-sys) */
.cat-sys { display: inline-flex; padding: 2px; border: 1px solid var(--sk-line-strong); border-radius: 5px; background: #fff; }
.cat-sys-btn { padding: 4px 12px; border-radius: 3px; font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1.3; cursor: pointer; }
.cat-sys-btn-text { color: var(--sk-muted); }
.cat-sys-btn:hover .cat-sys-btn-text { color: var(--sk-ink); }
.cat-sys-btn[aria-pressed="true"] { background: var(--sk-ink); }
.cat-sys-btn[aria-pressed="true"] .cat-sys-btn-text { color: #fff; }
.cat-sys-btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.cat-hs-or { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--sk-ink); }
.cat-fsearch { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); color: var(--sk-muted); }
.cat-fsearch input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--sk-ink); }
.cat-group-more { align-self: flex-start; font-size: 13px; color: var(--sk-accent); text-decoration: underline; }
.cat-swatches { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.cat-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 46px; cursor: pointer; }
.cat-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat-swatch-dot { display: block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); object-fit: cover; }
/* Multi: the color has no hex code and its image is missing, so the dot is drawn here */
.cat-swatch-dot--multi { background: conic-gradient(from 90deg, #ef4b4b, #f0a12b, #ecdd2b, #5fc44f, #2bbdb0, #3b8ae0, #8a5ce0, #e04ab0, #ef4b4b); }
.cat-swatch input:checked + .cat-swatch-dot { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
.cat-swatch-name { font-size: 11px; color: var(--sk-muted); text-align: center; line-height: 1.2; }
.cat-price { display: flex; align-items: center; gap: 10px; }
.cat-price-in { flex: 1 1 0; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); font-size: 14px; color: var(--sk-ink); }
.cat-price-in span { font-size: 12px; color: var(--sk-muted); }
.cat-price-in input { width: 100%; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--sk-ink); background: transparent; -moz-appearance: textfield; }
.cat-price-in input::-webkit-outer-spin-button, .cat-price-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cat-price-dash { width: 10px; height: 1px; background: var(--sk-line-strong); }

/* Drawer */
.cat-drawer-bg { position: fixed; inset: 0; z-index: 1040; background: rgba(42, 49, 64, .45); }
.cat-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1041; width: 100%; max-width: 420px; background: #fff; display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(42, 49, 64, .18); }
.cat-drawer-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--sk-line); }
.cat-drawer-title { font-size: 20px; font-weight: 700; color: var(--sk-ink); }
.cat-drawer-close { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--sk-muted); }
.cat-drawer-body { flex: 1 1 auto; overflow: auto; padding: 0 20px; -webkit-overflow-scrolling: touch; }
.cat-drawer-sel { padding: 14px 0; border-bottom: 1px solid var(--sk-line); }
.cat-drawer-sel-h { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.cat-drawer-sel .cat-active-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cat-drawer-sel .cat-active-list:empty { display: none; }
.cat-drawer-f { display: flex; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--sk-line); background: #fff; }
.cat-drawer-f .cat-btn { flex: 1 1 0; }
.cat-drawer-f .cat-btn--ghost { flex: 0 0 auto; }
.cat-drawer-open { overflow: hidden; }

/* Buttons */
.cat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--sk-radius-sm); background: var(--sk-ink); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.2; transition: background-color .15s ease; }
.cat-btn:hover { background: var(--sk-accent-dark); color: #fff; }
.cat-btn:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
.cat-btn--ghost { background: #fff; color: var(--sk-ink); border: 1px solid var(--sk-line-strong); }
.cat-btn--ghost:hover { background: var(--sk-soft); color: var(--sk-ink); }
.cat-btn--sm { min-height: 40px; min-width: 120px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.cat-btn--wide { min-width: 240px; }

/* Products */
.cat-list { margin-top: 14px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Skeleton cards while JS reloads the list (filter, sort, "Show more"). They reuse the real card markup, so nothing jumps.
   Each line is an invisible space in the card's font, with only a band in the middle colored.
   cat.js shows them after a short delay, so fast responses don't flash. */
.cat-grid.is-skeleton > .cat-cell:not(.cat-cell--skel) { display: none; }
.cat-skel .cat-card-media { aspect-ratio: 1 / 1; background: var(--sk-soft); }
.cat-skel-line { display: block; width: 100%; background: linear-gradient(var(--sk-soft), var(--sk-soft)) 0 50% / 100% .8em no-repeat; border-radius: 3px; }
.cat-skel-line--short { width: 60%; }
.cat-skel-line--price { width: 34%; }
.cat-skel .cat-card-title, .cat-skel .cat-card-desc { display: block; }
.cat-skel .cat-card-media, .cat-skel .cat-skel-line { animation: cat-skel-pulse 1.4s ease-in-out infinite; }
@keyframes cat-skel-pulse { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .cat-skel .cat-card-media, .cat-skel .cat-skel-line { animation: none; } }
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cat-list { margin-top: 24px; } }
@media (min-width: 992px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.cat-cell { position: relative; min-width: 0; }
.cat-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; height: 100%; background: #fff; border: 1px solid var(--sk-line); border-radius: var(--sk-radius); padding: 8px 8px 12px; transition: border-color .15s ease; }
.cat-card:hover { text-decoration: none; }
.cat-card-media { position: relative; display: block; overflow: hidden; border-radius: var(--sk-radius-sm); }
.cat-card-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
/* Second image (image_2 from the webshop API): sits on top of the first and fades in on hover.
   cat.js sets its src on the first hover, so the page doesn't load twice the images. */
.cat-card-media .cat-img2 { position: absolute; left: 0; top: 0; height: auto; background: #fff; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.cat-card-media .cat-badges, .cat-card-media .cat-card-kit { z-index: 1; }
/* A color sibling as the main image while its thumbnail is hovered (cat.js) */
.cat-card-media .cat-img-sib { position: absolute; left: 0; top: 0; height: auto; background: #fff; opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
	.cat-cell:hover .cat-img2.is-loaded { opacity: 1; }
	.cat-cell.is-sib .cat-img-sib.is-loaded { opacity: 1; }
	.cat-cell.is-sib .cat-img2.is-loaded { opacity: 0; }
	.cat-sib.is-on { border-color: var(--sk-ink); }
}
@media (prefers-reduced-motion: reduce) { .cat-card-media .cat-img2 { transition: none; } }
.cat-badges { position: absolute; left: 6px; top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cat-badge { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 4px 8px; border-radius: var(--sk-radius-sm); line-height: 1.2; }
.cat-badge--save { background: #fff; color: var(--sk-ink); border: 1px solid var(--sk-line-strong); }
.cat-badge--end { background: #ffd83d; color: var(--sk-ink); }
.cat-badge--free { background: var(--sk-save); color: #fff; }
.cat-badge--last { background: var(--sk-ink); color: #fff; }
.cat-card-kit { position: absolute; right: 6px; bottom: 6px; font-size: 11px; font-weight: 500; color: var(--sk-muted); background: #fff; border: 1px solid var(--sk-line-strong); border-radius: 3px; padding: 1px 6px; }
.cat-card-title { margin-top: 6px; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card-price { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: auto; padding-top: 2px; }
.cat-card-price-now { font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.cat-card-price del { color: var(--sk-muted); font-size: 12px; }
.cat-card-colors-touch { font-size: 12px; }

/* Fixed two-line height, so description and sizes can swap without resizing the card. Hidden on phones. */
.cat-card-mid { display: none; position: relative; height: 34px; overflow: hidden; }
.cat-card-desc { display: -webkit-box; font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card-sizes { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding-top: 5px; overflow: hidden; visibility: hidden; }
.cat-size { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 6px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-sm); font-size: 12px; color: var(--sk-ink); white-space: nowrap; }
.cat-size--n { border-color: transparent; color: var(--sk-muted); padding: 0 2px; min-width: 0; }

/* Color siblings: unfold below the card as a layer over the page */
.cat-card-more { display: none; }
.cat-sib { display: flex; width: 44px; height: 44px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-sm); overflow: hidden; background: var(--sk-soft); align-items: center; justify-content: center; }
.cat-sib img { width: 100%; height: 100%; object-fit: cover; }
.cat-sib:hover { border-color: var(--sk-ink); }
.cat-sib--n { font-size: 12px; color: var(--sk-muted); border-color: transparent; background: none; }

@media (min-width: 768px) {
	.cat-card { padding: 10px 12px 14px; gap: 5px; }
	.cat-badges { left: 8px; top: 8px; }
	.cat-card-title { font-size: 14px; min-height: 38px; }
	.cat-card-mid { display: block; }
	.cat-card-price-now { font-size: 16px; }
	.cat-card-price del { font-size: 13px; }
}

/* Hover state for real mice only; touch devices keep the color text */
@media (hover: hover) and (pointer: fine) {
	.cat-card-colors-touch { display: none; }
	.cat-cell:hover, .cat-cell:focus-within { z-index: 15; }
	.cat-cell:hover .cat-card, .cat-cell:focus-within .cat-card { border-color: var(--sk-line-strong); box-shadow: 0 12px 28px rgba(42, 49, 64, .14); }
	.cat-cell:hover .cat-card-sizes, .cat-cell:focus-within .cat-card-sizes { visibility: visible; }
	.cat-cell:hover .cat-card-desc:has(~ .cat-card-sizes), .cat-cell:focus-within .cat-card-desc:has(~ .cat-card-sizes) { visibility: hidden; }
	.cat-card-more { position: absolute; left: 0; right: 0; top: calc(100% - 6px); display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 12px; background: #fff; border: 1px solid var(--sk-line-strong); border-top: 0; border-radius: 0 0 var(--sk-radius) var(--sk-radius); box-shadow: 0 12px 28px rgba(42, 49, 64, .14); clip-path: inset(0 -40px -40px -40px); visibility: hidden; opacity: 0; transition: opacity .12s ease; }
	.cat-cell:hover .cat-card-more, .cat-cell:focus-within .cat-card-more { visibility: visible; opacity: 1; }
	.cat-cell:has(.cat-card-more):hover .cat-card, .cat-cell:has(.cat-card-more):focus-within .cat-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
}

/* Show more */
.cat-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 28px 0 0; }
.cat-more-text { font-size: 14px; font-weight: 500; color: var(--sk-ink); }
.cat-progress { width: 200px; height: 3px; background: var(--sk-line); border-radius: 2px; overflow: hidden; }
.cat-progress i { display: block; height: 100%; width: 0; background: var(--sk-ink); transition: width .2s ease; }
.cat-empty { padding: 40px 0; text-align: center; font-size: 15px; color: var(--sk-muted); }
@media (min-width: 768px) { .cat-more { margin-top: 36px; } }

/* See also */
.cat-seealso { margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--sk-line); }

/* SEO text: fully expanded, one column (two columns left gaps around headings and video) */
.cat-seo { margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--sk-line); }
.cat-seo-cols { font-size: 15px; line-height: 1.6; color: var(--sk-text); }
.cat-seo-cols h1, .cat-seo-cols h2 { margin: 24px 0 10px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--sk-ink); letter-spacing: -0.01em; }
.cat-seo-cols h1:first-child, .cat-seo-cols h2:first-child { margin-top: 0; }
.cat-seo-cols h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 700; color: var(--sk-ink); }
.cat-seo-cols h4 { margin: 14px 0 4px; font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.cat-seo-cols p, .cat-seo-cols ul, .cat-seo-cols ol { margin: 0 0 12px; }
.cat-seo-cols ul, .cat-seo-cols ol { padding-left: 20px; }
.cat-seo-cols img { border-radius: var(--sk-radius-sm); margin: 8px 0; }
.cat-seo-cols iframe { max-width: 100%; border-radius: var(--sk-radius-sm); margin: 0 0 16px; }
.cat-seo-cols table { max-width: 100%; }
@media (min-width: 992px) { .cat-seo { margin-top: 56px; padding-top: 36px; } }