/* Category listing — frames `kategorijos` (47:263) and `kategorijos-filtras-drop` (347:2685),
   canvas 1728x5573. Offsets are frame-absolute values from the cached node JSON; the header
   is 72px tall, so a section's CSS top is its frame y minus 72.
   Cap-trimmed text (Figma `leadingTrim: CAP_HEIGHT`) is positioned by its INK top: the
   offsets subtracted below are (lineHeight - 1.235em)/2 + .99em - .7em for DM Sans. */

/* ---- Hero: Rectangle 6 1728x471 @72, scrim #2c2420 .5 ---- */
.cat-hero { position: relative; height: 471px; overflow: hidden; }
/* the photo's swap part (a category's own hero, PH-06) — a wrapper with no box of its own */
.cat-hero__media, .cat-banner__media { display: contents; }
.cat-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-hero__scrim { position: absolute; inset: 0; background: var(--ink); opacity: .5; }
.cat-hero__inner { position: relative; height: 100%; }

.cat-hero__title {                                   /* 47:309 — 295,150, Cormorant 80/72 */
  position: absolute; left: 1px; top: 78px; margin: 0; width: max-content;
  font-family: var(--font-display); font-weight: 500; font-size: 80px; line-height: 72px;
  color: var(--cream);
}
.cat-hero__desc {                                    /* 47:310 — 296,262 cap, 556 wide, 3 lines */
  position: absolute; left: 2px; top: 183.2px; width: 556px; margin: 0;
  font-size: 16px; line-height: 24px; color: var(--cream);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ---- Group 5438: 4 circles 80px @296,361 (pitch 104), labels 12/20 cap @457 ---- */
.cat-chips { position: absolute; left: 2px; top: 289px; display: flex; gap: 24px; margin: 0; padding: 0; }
.cat-chip { display: block; width: 80px; text-align: center; }
.cat-chip img {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block;
  /* Figma's INSIDE strokes paint OVER the 80px photo (325:2344-2347), so the rings are
     negative-offset outlines: the photo stays 80 in every state (a border shrank it to 72) */
  outline: 2px solid transparent; outline-offset: -2px;
}
/* motion.css's `.js img[loading="lazy"]` (0,2,1, and loaded AFTER this file) sets the
   transition SHORTHAND, which resets the property list to `opacity` alone — the chip's
   ring then snapped. Re-declared above it, carrying the lazy fade along. */
.cat-chips .cat-chip img[loading] {
  transition: opacity var(--t-reveal) var(--ease-out), outline-color var(--t-tint) var(--ease-out);
}
/* hover 325:2345 = 2px #f5f0e8 ring + cream label; active 325:2344 = 4px #c9a882 ring */
.cat-chip:hover img, .cat-chip:focus-visible img { outline-color: var(--cream); }
.cat-chip.is-active img { outline: 4px solid var(--gold); outline-offset: -4px; }
.cat-chip span {
  display: block; margin-top: 12.1px;                /* label cap top 457 */
  font-size: 12px; line-height: 20px; color: var(--sand);
  transition: color var(--t-tint) var(--ease-out);
}
.cat-chip:hover span, .cat-chip:focus-visible span { color: var(--cream); }

/* ---- Toolbar ---- */
.cat-toolbar { position: relative; padding-top: 16px; }   /* breadcrumb @559 */

.cat-crumbs {                                        /* Group 5360 — 294,559 gap 16 */
  display: flex; align-items: center; gap: 16px; height: 16px;
  font-size: 12px; line-height: 15.6px; font-weight: 300; color: var(--sand);
}
.cat-crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.cat-crumbs a:hover, .cat-crumbs a:focus-visible { color: var(--accent); }
.cat-crumbs [aria-current] { color: var(--muted); font-weight: 400; }
.cat-crumbs img { margin: -0.5px -0.75px; flex: none; }   /* Vector 3 337:2873 — 3.5x7 path in a 5x8 export */

/* ---- The toolbar row — client corrections 2026-10-28 #3/#4, no comp (design/DEVIATIONS.md):
        the count left, then the view pill, a divider and the dropdown's toggle on the right.
        The type is the site's 14px rhythm; the count lost the comp's 32px ExtraLight caps. ---- */
.cat-filter { position: relative; display: flex; align-items: center; gap: 16px; min-height: 34px; margin-top: 24px; }
.cat-count {
  flex: 1; min-width: 0; margin: 0; color: var(--accent);
  font-weight: 400; font-size: 14px; line-height: 18.228px;
}
.cat-filter__divider { flex: none; width: 1px; height: 20px; background: var(--sand); }
.cat-filter__toggle {
  display: flex; align-items: center; gap: 8px; height: 34px; width: max-content;
  cursor: pointer; list-style: none; white-space: nowrap; color: var(--ink);
  font-size: 14px; line-height: 18.228px;
  transition: color var(--t-tint) var(--ease-out);
}
.cat-filter__toggle::-webkit-details-marker { display: none; }
.cat-filter__toggle:hover, .cat-filter__toggle:focus-visible,
.cat-filter__wrap[open] .cat-filter__toggle { color: var(--accent); }
.cat-filter__badge {                                 /* Frame 68 — 18x15 */
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 15px; border-radius: 24px; background: var(--accent);
  color: var(--cream); font-weight: 500; font-size: 10px; line-height: 13.02px;
  letter-spacing: .5px;
}
.cat-filter__caret { transition: transform var(--t-move) var(--ease-out); }
.cat-filter__wrap[open] .cat-filter__caret { transform: rotate(180deg); }

/* The dropdown: the ASSETS dropdown chrome (Group 5708 — white r16, 1px #d4c5b5, the drop
   shadow) under the toolbar's right edge, wide enough for the price panel (460 + 2x23 + 2x1).
   It fades in and back out the way every filter dropdown did (comment 19). */
.cat-filter__body {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; box-sizing: border-box;
  width: 508px; padding: 8px 23px 23px;
  background: var(--white); border: 1px solid var(--sand); border-radius: 16px;
  box-shadow: var(--drop-shadow);
}
.cat-filter__wrap[open] .cat-filter__body { animation: cat-drop-in var(--t-move) var(--ease-out); }
.cat-filter__wrap.is-closing .cat-filter__body {
  animation: cat-drop-out var(--t-move) var(--ease-out) forwards; pointer-events: none;
}
.cat-filter__title {                                 /* the sort list's heading */
  float: left; width: 100%; margin: 8px 0 8px; padding: 0; color: var(--accent);
  text-transform: uppercase; font-weight: 500; font-size: 12px; line-height: 15.624px; letter-spacing: .6px;
}
.cfilter--sort { min-width: 0; margin: 0; padding: 0; border: 0; }
.cfilter--sort .cfilter__panel { clear: both; }

/* ---- The filter rows: a full-width disclosure each, divider #e6dace (`filtro-drop-as`) ---- */
.cfilter { position: relative; }
.cfilter__chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap;
  box-sizing: border-box; width: 100%; height: 48px; padding: 0;
  border-bottom: 1px solid var(--shell); cursor: pointer; list-style: none;
  color: var(--ink); font-size: 14px; line-height: 18.228px;
  transition: color var(--t-tint) var(--ease-out);
}
.cfilter__chip::-webkit-details-marker { display: none; }
.cfilter__chip:hover, .cfilter__chip:focus-visible, .cfilter[open] .cfilter__chip { color: var(--accent); }
.cfilter__chip.is-on { font-weight: 500; }           /* a row carrying an applied filter */
.cfilter__chip img { transition: transform var(--t-move) var(--ease-out); }
.cfilter[open] .cfilter__chip img { transform: rotate(180deg); }
/* A row's options open in place under it (the dropdown is the panel now) */
.cfilter__panel {
  max-height: 320px; overflow: auto; padding: 8px 0 16px;
  animation: cat-drop-in var(--t-move) var(--ease-out);
}
.cfilter--sort .cfilter__panel { max-height: none; padding: 0 0 8px; border-bottom: 1px solid var(--shell); animation: none; }
/* Closed, a details' content still computes a box (`content-visibility: hidden`) — at its
   collapsed width the price values ran past the 360 viewport. Nothing closed takes a box. */
details.cfilter:not([open]) .cfilter__panel,
.cat-filter__wrap:not([open]) .cat-filter__body { display: none; }
@keyframes cat-drop-in { from { opacity: 0; transform: translateY(-8px); } }
.cfilter.is-closing .cfilter__panel {   /* own name: `cat-drop-in reverse` never restarts, never ends */
  animation: cat-drop-out var(--t-move) var(--ease-out) forwards; pointer-events: none;
}
@keyframes cat-drop-out { to { opacity: 0; transform: translateY(-8px); } }
.cfilter__panel label {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 14px; line-height: 18.228px; color: var(--ink); cursor: pointer;
}
/* Rectangle 15 452:4443: a row is 26 tall at a 30 pitch, its text 8 in; the highlighted one
   (pointer or keyboard) is #f5f0e8 r8 and its text stays ink */
.cfilter__panel > label {
  height: 26px; padding: 0 8px; border-radius: 8px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.cfilter__panel > label + label { margin-top: 4px; }
.cfilter__panel > label:hover, .cfilter__panel > label:has(:focus-visible) { background: var(--cream); }
/* The sort list is the ASSETS list itself — text rows, no control drawn: the radio stays for the
   keyboard and JS-off as an unpainted layer over its whole row, and the chosen row keeps the
   highlight */
.cfilter--sort .cfilter__panel > label { position: relative; }
.cfilter--sort .cfilter__panel input[type="radio"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.cfilter--sort .cfilter__panel > label:has(:checked) { background: var(--cream); }
.cfilter__panel i { color: var(--muted); font-style: normal; }
/* The dropdown's boxes: the frame draws no open panel, so they are the site's design checkbox
   (468:4362 — 20x20 r8, white + 1px sand; checked accent, white 9x6 tick at +6,+7; see
   design/DEVIATIONS.md). The real input, so JS off and the keyboard still work. */
.cfilter__panel input[type="checkbox"] {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 0;
  border: 1px solid var(--sand); border-radius: 8px; background: var(--white);
  cursor: pointer;
  transition: background-color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.cfilter__panel input[type="checkbox"]:checked {       /* the tick sits at +6,+7 of the border box */
  background: var(--accent) url("../img/icons/icon-check-white.svg") 5px 6px / 9px 6px no-repeat;
  border-color: var(--accent);
}
.cfilter__panel input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The price dropdown — ASSETS Group 5442 331:2765, a 460x115 panel (the chrome above): the
   title 16/300 ls1.6 #8b6355 upper, cap @+24,+24; „nuo €20“ / „iki €100“ 12/400 #8b6355, caps
   @+59 at the two ends (+24 in); Vector 59 a 412x2 #f5f0e8 track centred @+83; Vector 60 the
   #8b6355 fill between the handles; Ellipse 185/186 15px white handles with a 5px INSIDE #8b6355
   ring @+76, the low one's left edge on the track's start. Offsets are from the padding box (the
   1px stroke sits outside it). The handles are two native ranges (keyboard, a11y); without JS
   the two number fields stand in — they carry the names either way. */
.cprice__fields { display: flex; gap: 8px; }
.cfilter__price input[type="number"] {
  width: 84px; height: 34px; margin-left: 8px; padding: 0 12px;
  border: 1px solid var(--sand); border-radius: 32px; font-size: 14px; color: var(--ink);
  transition: border-color var(--t-tint) var(--ease-out);
}
.cfilter__price input[type="number"]::placeholder { color: var(--muted); opacity: 1; }   /* ASSETS #b0a191, not the UA grey */
.cfilter__price input[type="number"]:hover, .cfilter__price input[type="number"]:focus { border-color: var(--accent); outline: none; }
.cprice__title, .cprice__values, .cprice__slider { display: none; }
.js .cfilter[data-cfilter="price"] .cfilter__panel {   /* the ASSETS card, in place under its row */
  position: relative; box-sizing: border-box; width: 460px; height: 115px; max-height: none;
  margin: 8px 0; padding: 0; overflow: visible;
  background: var(--white); border: 1px solid var(--sand); border-radius: 16px;
}
.js .cprice__fields { display: none; }
.js .cprice__title {
  display: block; position: absolute; left: 23px; top: 19.2px; margin: 0; white-space: nowrap;
  color: var(--accent); text-transform: uppercase; font-weight: 300; font-size: 16px;
  line-height: 20.83px; letter-spacing: 1.6px;
}
.js .cprice__values {
  position: absolute; left: 23px; right: 23px; top: 55.4px; display: flex;
  justify-content: space-between; margin: 0; white-space: nowrap; color: var(--accent);
  font-weight: 400; font-size: 12px; line-height: 15.62px;
}
.js .cprice__slider { position: absolute; left: 23px; top: 75px; display: block; width: 412px; height: 15px; }
.cprice__slider::before, .cprice__fill {          /* the track centred @+83: rows 82–84 */
  content: ""; position: absolute; top: 6px; height: 2px; pointer-events: none;
}
.cprice__slider::before { left: 0; right: 0; background: var(--cream); }
.cprice__fill {                                    /* thumb centre to thumb centre */
  left: calc(7.5px + var(--lo) * (100% - 15px)); width: calc((var(--hi) - var(--lo)) * (100% - 15px));
  background: var(--accent);
}
.cprice__range {
  position: absolute; inset: 0; width: 100%; height: 15px; margin: 0; padding: 0;
  appearance: none; background: none; pointer-events: none;   /* only the handles take the pointer */
}
.cprice__range:focus { outline: none; }
.cprice__range[data-price-handle="min"].is-top { z-index: 1; }
.cprice__range::-webkit-slider-runnable-track { height: 15px; background: none; }
.cprice__range::-moz-range-track { height: 15px; background: none; }
.cprice__range::-webkit-slider-thumb {
  appearance: none; width: 15px; height: 15px; border: 0; border-radius: 50%; cursor: pointer;
  pointer-events: auto; background: var(--white); box-shadow: inset 0 0 0 5px var(--accent);
  transition: box-shadow var(--t-tint) var(--ease-out);
}
.cprice__range::-moz-range-thumb {
  width: 15px; height: 15px; border: 0; border-radius: 50%; cursor: pointer;
  pointer-events: auto; background: var(--white); box-shadow: inset 0 0 0 5px var(--accent);
  transition: box-shadow var(--t-tint) var(--ease-out);
}
/* no hover state is drawn: a pointed or keyboard-focused handle takes the chips' ink stroke */
.cprice__range:hover::-webkit-slider-thumb,
.cprice__range:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 5px var(--ink); }
.cprice__range:hover::-moz-range-thumb,
.cprice__range:focus-visible::-moz-range-thumb { box-shadow: inset 0 0 0 5px var(--ink); }

/* The word filter — no comp node: a full-width 34px pill under the filter rows */
.cat-word {
  box-sizing: border-box; display: flex;
  align-items: center; width: 100%; height: 34px; margin-top: 16px; padding: 0 16px;
  border: 1px solid var(--sand); border-radius: 32px; cursor: text;
  transition: border-color var(--t-tint) var(--ease-out);
}
.cat-word:hover, .cat-word:focus-within { border-color: var(--accent); }
.cat-word input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  color: var(--ink); font: inherit; font-size: 14px; line-height: 18.228px;
}
.cat-word input::placeholder { color: var(--muted); opacity: 1; }
/* The comp draws no clear control; the native one is off-design (design/DEVIATIONS.md) */
/* Two rules, never one list: Chrome drops a whole selector list over the unknown `::-ms-clear`. */
.cat-word input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.cat-word input::-ms-clear { display: none; }
.cat-word__clear {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; background: none;
  opacity: 1; transition: opacity var(--t-tint) var(--ease-out);
}
.cat-word__clear.is-hidden { opacity: 0; pointer-events: none; }
.cat-word__clear:hover, .cat-word__clear:focus-visible { opacity: .6; }
.cat-word__clear img { display: block; width: 10px; height: 10px; }

.cat-filter__submit {                                /* Frame 67 — 34 tall r24 #2c2420, full width */
  display: block; width: 100%; height: 34px; margin-top: 16px;
  border-radius: 24px; background: var(--ink); color: var(--cream); text-transform: uppercase;
  font-weight: 500; font-size: 12px; line-height: 15.624px; letter-spacing: .6px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.cat-filter__submit:hover, .cat-filter__submit:focus-visible { background: var(--ink-hover); }   /* ASSETS 452:4464 */

.cat-view {                                          /* Eiliskumas — 68x34 r40 */
  flex: none; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; width: 68px; height: 34px; padding: 9px 16px;
  border: 1px solid var(--sand); border-radius: 40px;
  transition: border-color var(--t-tint) var(--ease-out);
}
/* ASSETS Eiliskumas 452:4399 → 452:4472: inactive glyph #d4c5b5, active #8b6355; pointed at
   (or focused), the stroke and the active glyph turn ink. The exports fill `currentColor`,
   which an <img> cannot inherit (it painted black), so the glyph is a mask over the colour. */
.cat-view__btn { display: block; width: 14px; height: 14px; color: var(--sand);
  background: currentColor; -webkit-mask: var(--glyph) center / 14px 14px no-repeat;
  mask: var(--glyph) center / 14px 14px no-repeat;
  transition: color var(--t-tint) var(--ease-out); }
.cat-view__btn:first-child { --glyph: url("../img/icons/icon-grid-4.svg"); }
.cat-view__btn:last-child { --glyph: url("../img/icons/icon-grid-3.svg"); }
.cat-view__btn.is-active { color: var(--accent); }
.cat-view:hover, .cat-view:focus-within { border-color: var(--ink); }
.cat-view:hover .cat-view__btn.is-active, .cat-view:focus-within .cat-view__btn.is-active { color: var(--ink); }
/* the mask also clips the global focus ring, so the focused glyph itself turns ink */
.cat-view__btn:focus-visible { color: var(--ink); outline: none; }
.cat-view__btn { flex: none; }                       /* else the row shrinks it below the 14px comp box */
.cat-view__btn img { display: block; width: 14px; height: 14px; opacity: 0; }

/* ---- Active tags (Group 5473) at the dropdown's foot, over a #e6dace rule ---- */
.cat-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px;
  border-top: 1px solid var(--shell); padding-top: 15px;
}
.cat-tags:not(:has(a)) { display: none; }
.cat-tag { min-width: 113px; justify-content: space-between;
  display: inline-flex; align-items: center; gap: 16px; height: 26px; padding: 8px 16px;
  box-sizing: border-box; border-radius: 32px; background: var(--shell); color: var(--ink);
  font-weight: 500; font-size: 14px; line-height: 18.228px;
  transition: background-color var(--t-tint) var(--ease-out), opacity var(--t-tint) var(--ease-out);
}
.cat-tag:hover, .cat-tag:focus-visible { background: var(--sand); }   /* ASSETS Group 5473 → 5671 */
.cat-tags__clear {
  color: var(--accent); font-size: 12px; line-height: 15.624px;
  transition: color var(--t-tint) var(--ease-out), opacity var(--t-tint) var(--ease-out);
}
.cat-tags__clear:hover, .cat-tags__clear:focus-visible { opacity: .65; }

/* ---- Grid: 4 x 267 gap 24 @715 · wide view 3 x 363 gap 25.5 (Component 77) ---- */
.cat-grid { display: grid; gap: 24px; margin-top: 28.7px; }
.cat-grid--4 { grid-template-columns: repeat(4, 267px); }
.cat-grid--3 { grid-template-columns: repeat(3, 363px); column-gap: 25.5px; row-gap: 24px; }

.cat-grid--3 .pcard { width: 363px; height: 578px; padding: 24px; }
.cat-grid--3 .pcard__badge { left: 24px; top: 24px; height: 23px; border-radius: 16px; }
.cat-grid--3 .pcard__wish { right: 23px; top: 23px; }
.cat-grid--3 .pcard__media { margin-top: 39px; }               /* image @894, card @831 */
.cat-grid--3 .pcard__media img {
  width: 315px; height: 313px; object-view-box: inset(0 0 0 0);
}
.cat-grid--3 .pcard__brand { margin-top: 11.4px; }             /* brand cap @1221 */
.cat-grid--3 .pcard__name { margin-top: 7.2px; }               /* name cap @1245 */
.cat-grid--3 .pcard__summary { margin-top: 7.4px; }            /* summary cap @1272 */
.cat-grid--3 .pcard__row { margin-top: 8.8px; }                /* price cap @1298 */
.cat-grid--3 .pcard__actions { margin-top: 14px; }             /* buttons @1326 */
/* the comp's copy column is 235 wide (318..553), not the card's full 315 inner width */
.cat-grid--3 .pcard__brand, .cat-grid--3 .pcard__name,
.cat-grid--3 .pcard__summary { max-width: 235px; }
.cat-grid--3 .pcard__add { width: 260px; }

.cat-empty {
  margin: 30.7px 0 0; max-width: 556px; font-size: 16px; line-height: 24px; color: var(--ink);
}

/* ---- Pager: no comp — sits inside the comp's own 120px gap below the grid ---- */
.cat-pager { display: flex; flex-wrap: wrap; gap: 8px; margin: 43px 0 -77px; }   /* wraps at 360 past 8 pages */
.cat-pager__page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--sand); border-radius: 32px; color: var(--ink);
  font-size: 14px; line-height: 18.228px;
  transition: background-color var(--t-tint) var(--ease-out),
    border-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
/* no comp: the pager takes the ASSETS chip (sand → ink stroke) and dark-pill (→ #403632) states */
.cat-pager__page:hover, .cat-pager__page:focus-visible { border-color: var(--ink); }
.cat-pager__page.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.cat-pager__page.is-active:hover, .cat-pager__page.is-active:focus-visible {
  background: var(--ink-hover); border-color: var(--ink-hover); }

/* ---- Group 5436: full-bleed band 1728x640 @2257 ---- */
.cat-banner { position: relative; height: 640px; margin-top: 120px; overflow: hidden; }
.cat-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-banner__scrim { position: absolute; inset: 0; background: var(--ink); opacity: .5; }
.cat-banner__copy { position: relative; padding-top: 266px; text-align: center; }
.cat-banner__title {                                  /* 254:1660 — 2523, Cormorant 80/72 */
  width: max-content; margin: 0 auto;
  font-family: var(--font-display); font-weight: 500; font-size: 80px; line-height: 72px;
  color: var(--cream);
}
/* 254:1661 */
.cat-banner__sub {                                    /* 254:1661 — cap @2619, ls 3.2 */
  width: max-content; margin: 18.8px auto 0; font-size: 16px; line-height: 20.832px; letter-spacing: 3.2px;
  padding-left: 3.2px;              /* balances the trailing letter-spacing: the ink is centred */
  color: var(--cream);
}

/* ---- Group 5380: quiz band @3017 (panel 1434x704 @294, photo 846x588 @0,3075) ---- */
.cat-quiz { position: relative; height: 704px; margin-top: 120px; }
.cat-quiz__panel { position: absolute; left: 294px; right: 0; top: 0; bottom: 0; background: var(--accent); }
.cat-quiz__photo { position: absolute; left: 0; top: 58px; width: 846px; height: 588px; object-fit: cover; }
.cat-quiz__copy { position: absolute; left: 973px; top: 234px; width: 461px; }
.cat-quiz__title {                                    /* 254:1665 — 973,3251, Cormorant 88/48 */
  width: max-content; margin: 0;
  font-family: var(--font-display); font-weight: 500; font-size: 88px; line-height: 48px;
  color: var(--cream);
}
.cat-quiz__text {                                     /* cap @3355, ls .8 */
  margin: 52.2px 0 0; font-size: 16px; line-height: 20.832px; letter-spacing: .8px;
  color: var(--cream);
}
.cat-quiz__cta { text-transform: uppercase;                                      /* Frame 76 — 159x59 @973,3428 r48 */
  display: inline-flex; align-items: center; justify-content: center;
  /* the comp's 159x59 pill is a minimum: a real label never wraps inside it */
  box-sizing: border-box; min-width: 159px; width: max-content; height: 59px; padding: 0 24px;
  margin-top: 34.6px; white-space: nowrap;           /* @3428 under the two-line text */
  border: 1px solid var(--cream); border-radius: 48px; color: var(--cream);
  font-size: 16px; line-height: 20.832px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.cat-quiz__cta:hover, .cat-quiz__cta:focus-visible { background: var(--cream); color: var(--ink); }

/* ---- SEO bands: 864x686 @0,3841 and 868x686 @864,4527 ---- */
.cat-seo { position: relative; height: 686px; margin-top: 120px; }
.cat-seo--flip { margin-top: 0; }
.cat-seo__photo { position: absolute; left: 0; top: 0; width: 864px; height: 686px; object-fit: cover; }
.cat-seo--flip .cat-seo__photo { left: 864px; width: 864px; }  /* comp 868 overflows the 1728 canvas */
.cat-seo__copy { position: absolute; left: 973px; top: 147.7px; width: 461px; }
.cat-seo--flip .cat-seo__copy { left: 294px; }
.cat-seo__title {                                     /* cap @+156, 32/41.66 ExtraLight ls 3.2 */
  margin: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.664px; letter-spacing: 3.2px;
}
/* 53:842 cap @4143 = 40.3 under the title's last cap (53:840): the line boxes are 23.5 apart */
.cat-seo__text { margin: 23.5px 0 0; font-size: 16px; line-height: 24px; color: var(--ink); }
/* the admin's own description: paragraphs a blank line apart, clamped to the 15 lines the band
   holds under the three-line title (147.7 + 3 x 41.664 + 23.5 + 15 x 24 = 656 < 686). The
   paragraph gap is one line, so every line sits on the 24px grid and max-height cuts exactly
   after line 15 — the line clamp alone counts lines, not the gaps between paragraphs. */
.cat-seo__text--own {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 15; overflow: hidden;
  max-height: 360px;
}
.cat-seo__text--own > * { margin: 0; }
/* an editor image (PH-14) keeps the band's 24px grid: four lines tall, never wider than the copy */
.cat-seo__text--own img { display: block; max-width: 100%; width: auto; height: 96px; object-fit: contain; }
.cat-seo__text--own > * + * { margin-top: 24px; }

/* ---- Mobile: no full category frame — `filtro-drop-as` (329:2348) drives the filter panel,
        the rest follows the home page's mobile conventions (container 16px, card 242) ---- */
@media (max-width: 767px) {
  /* `Mobile mini cart` 254:2650 is MISNAMED — it is the 360 listing (T-073): Rectangle 14 360x311,
     „Visos" 24/48 Cormorant cap @181, the lead 12/20 #d4c5b5 cap @220, Group 5438 80px circles
     @16,308 at a 96 pitch (the strip scrolls), labels 12px cap @404 (status bar = 43 above) */
  .cat-hero { height: 311px; }
  .cat-hero__title { left: 0; top: 24px; font-size: 24px; line-height: 48px; }
  .cat-hero__desc { left: 0; top: 74px; width: auto; right: 0; -webkit-line-clamp: 3;
    font-size: 12px; line-height: 20px; color: var(--sand); }
  .cat-chips { left: 0; right: 0; top: 167px; gap: 16px; overflow-x: auto; padding-bottom: 4px; }
  /* M15: „Stimuliuojantys“ (88px, the longest LT/EN word) must fit its label — the label box is
     circle + gap (96), centred under the circle. 12/15.6 (the 12px rhythm used across the site)
     so a three-line label (`Vandens pagrindo lubrikantai`) ends at 306, inside the 311 hero
     (12/20 would clip its third line) */
  /* the label box is the 96 pitch (circle + the 16 gap), so neighbours meet, never overlap */
  .cat-chip span { margin-inline: -8px; margin-top: 12px; line-height: 15.6px; }

  /* Frame 80 @16,468: 10/13, 16 between a crumb and its chevron; Vector 58 — a full-width
     #e6dace rule 16 under the crumbs and 16 over the toolbar row */
  .cat-crumbs { gap: 16px; height: 13px; overflow-x: auto; white-space: nowrap;
    font-size: 10px; line-height: 13px; }
  .cat-filter { flex-wrap: wrap; gap: 0 10px; margin-top: 16px; padding-top: 16px; }
  .cat-filter::before { content: ""; position: absolute; top: 0; left: -16px; right: -16px;
    height: 1px; background: var(--shell); }
  /* one line; a count too long for the row takes its own and the controls wrap under it, right */
  .cat-count { flex: 1 0 auto; white-space: nowrap; font-size: 12px; line-height: 15.6px; }
  .cat-grid { margin-top: 16px; }
  /* The toolbar row at 360 (client corrections 2026-10-28 #3/#4): the view pill loses its
     stroke, its two 14px glyphs 26 apart so their 40x40 tap boxes meet; the toggle 12px */
  .cat-view { height: 34px; width: auto; gap: 26px; margin-left: auto; padding: 0; border: 0;
    border-radius: 0; }
  .cat-filter__toggle { gap: 6px; font-size: 12px; line-height: 15.6px; }
  .cat-filter__caret { display: none; }              /* the row's width: the filter icon stays */
  .cat-filter__toggle, .cat-view__btn { position: relative; }
  .cat-filter__toggle::before { content: ""; position: absolute; inset: -3px 0; }
  .cat-view__btn::before { content: ""; position: absolute; inset: -13px; }
  /* the dropdown spans the column; `filtro-drop-as` rows are 58 apart */
  .cat-filter__body { left: 0; width: auto; padding: 0 15px 15px; }
  .cfilter__chip { height: 58px; }
  /* the price row: no 360 comp opens it — the panel's values and slider flow full width under
     the row's own „Kaina“ (which stands in for the panel title) */
  .js .cfilter[data-cfilter="price"] .cfilter__panel { width: auto; height: auto; margin: 0;
    padding: 8px 0 20px; border: 0; border-radius: 0; }
  .js .cprice__title { display: none; }
  .js .cprice__values, .js .cprice__slider { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .js .cprice__slider { margin-top: 12px; }
  .cat-tag { min-width: 113px; }
  .cat-tags__clear { width: 100%; margin-top: 6px; }
  .cat-filter__submit { height: 42px; margin-top: 24px; }   /* Frame 67 — 42 tall at 360 */
  /* M12 — view 4 is the 2-up mini-card grid shared with the favourites page (mobile.css,
     `Listing grids`); 12px past the gutter puts the cards at the comp's x4 / x182. View 3 =
     the quiz comp's wide card (Component 36 492:4472 — 328x551 @16). */
  .cat-grid--4 { margin-inline: -12px; }
  [data-swap-slot="grid"] > .cat-grid--3 { grid-template-columns: 1fr; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard { width: 100%; height: 551px; padding: 0; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__badge { left: 24px; top: 24px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__wish { right: 24px; top: 24px; width: 19px; height: 16px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__media { margin: 55px 0 0 24px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__media img { width: 283px; height: 312px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__brand { margin: 4.4px 0 0 24px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__name { margin: 7.2px 0 0 24px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__summary { margin: 7.4px 0 0 24px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__row { margin: 9.8px 24px 0; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__actions { margin: 14px 0 0 24px; gap: 16px; }
  [data-swap-slot="grid"] > .cat-grid--3 .pcard__add { width: 217px; }
  /* Group 5435 325:2265 — 360x240, 24 under the grid: the photo under a black gradient (.75 at
     the top to 0 at the foot), „Pažink save artimiau.“ 32/48 Cormorant cap @+124 and the sub
     16/20.8 cap @+168 (two lines), both LEFT-aligned in the 16px gutter */
  .cat-banner { height: 240px; margin-top: 24px; }
  .cat-pager { margin-bottom: 0; }   /* the banner's 24 is measured from the pager (1728 tucks it into its 120) */
  .cat-banner__scrim { opacity: 1; background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); }
  .cat-banner__copy { padding: 109.8px 16px 0; text-align: left; }
  .cat-banner__title { width: auto; margin: 0; font-size: 32px; line-height: 48px; }
  .cat-banner__sub { width: auto; margin: 5.5px 0 0 1px; padding: 0; font-size: 16px; letter-spacing: 0; }
  /* Group 5429 324:2209 — 360x456, 40 under the banner: the photo 328x228 @16, the #8b6355 panel
     from +112 to the foot, „Sex toy quiz“ 32/48 cap @+260, the text 14/18.2 ls .7 cap @+304
     (three lines), the CTA Frame 3 103x42 @+374 — 1px #f5f0e8 stroke, r56, 24 in. The copy is in
     flow, so a longer text grows the band instead of running out of it */
  .cat-quiz { height: auto; min-height: 456px; margin-top: 40px; padding: 245.8px 16px 40px; }
  .cat-quiz__panel { left: 0; top: 112px; }
  .cat-quiz__photo { left: 16px; top: 0; width: 328px; height: 228px; }
  .cat-quiz__copy { position: relative; left: 0; top: 0; width: auto; }
  .cat-quiz__title { width: auto; font-size: 32px; line-height: 48px; }
  .cat-quiz__text { margin: 6px 0 0; font-size: 14px; line-height: 18.228px; letter-spacing: .7px; }
  .cat-quiz__cta { min-width: 0; height: 42px; padding: 0 24px; margin-top: 19.5px; border-radius: 56px;
    font-size: 14px; line-height: 18.228px; }
  /* 254:3275 / 254:3278 — 360x240 photos, the first right under the quiz band; titles 18/28
     ExtraLight ls 1.8 cap 40 under the photo (two lines), bodies 14/20 cap @+65 under the title
     cap; a band ends 35 under its last line (the next photo, or the footer, 40 under its cap) */
  .cat-seo, .cat-seo--flip { height: auto; margin-top: 0; padding-bottom: 35px; }
  .cat-seo__photo, .cat-seo--flip .cat-seo__photo { position: relative; left: 0; width: 100%; height: 240px; }
  /* top: auto — the 1728 band's 147.7 offset would slide the in-flow copy under the next band */
  .cat-seo__copy, .cat-seo--flip .cat-seo__copy { position: relative; left: 0; top: auto; width: auto; padding: 0 16px; }
  .cat-seo__title { padding-top: 32.5px; font-size: 18px; line-height: 28px; letter-spacing: 1.8px; }
  .cat-seo__text { margin-top: 11.6px; font-size: 14px; line-height: 20px; }
  .cat-seo__text--own { display: block; -webkit-line-clamp: none; overflow: visible; max-height: none; }
  .cat-seo__text--own img { width: 100%; height: auto; }
  /* tap target: the 34px pills keep their paint, an unpainted box takes 3px of each 8px gap
     → 40x40 (inset off the padding box, inside the 1px border) */
  .cat-pager__page { position: relative; }
  .cat-pager__page::before { content: ""; position: absolute; inset: -4px; }
}