/* Quiz — frames `Quizas 7` (intro, 376:9776), `Quizas 1…6` (347:12276 … 376:8307) and
   `Quizas - rezultatai` (483:4390 — 376:8406 left DIZAINAS on 2026-10-12), canvas 1728. Offsets below are frame-absolute values
   from design/figma-cache/frames/quizas-*.json. Text tops are ink tops (Figma cap-trims).
   The comps place the question title at three different tops (603/627/643); each step
   takes its own frame's (see `.qz-block--first`). */

.qz { padding-bottom: 120px; }                    /* every frame: last block -> footer */

/* ---- Hero: Rectangle 6/8 @0,72 (1728x400), title @756,236 (80/72) ---- */
.qz-hero { position: relative; height: 400px; overflow: hidden; }
.qz-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qz-hero__scrim { position: absolute; inset: 0; background: var(--ink); opacity: .5; }
.qz-hero__title {
  position: absolute; left: 0; right: 0; top: 164px;         /* 236 - 72 */
  margin: 0; text-align: center; color: var(--cream);
  font-family: var(--font-display); font-weight: 500; font-size: 80px; line-height: 72px;
}

.qz-body { width: var(--container); margin: 0 auto; }

/* ---- Breadcrumb @294,488 — 16px under the hero, 12/15.6 ---- */
.qz-crumbs {
  display: flex; align-items: center; gap: 16px; height: 16px; margin-top: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.qz-crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.qz-crumbs a:hover { color: var(--accent); }
.qz-crumbs span { color: var(--muted); }
.qz-crumbs img { width: 3.5px; height: 7px; flex: none; }

/* ---- Intro: lead @488,544 (48/56), discount @691,688 (24/31.2 ls 2.4), CTA @800,737 ---- */
.qz-intro { text-align: center; }
.qz-intro__lead {
  width: 752px; margin: 40px auto 0;                         /* crumb box 504 -> ink 544 */
  color: var(--ink); font-family: var(--font-display);
  font-weight: 500; font-size: 48px; line-height: 56px;
}
/* The comp's 752 box holds the second line with 1px to spare, so every zoomed canvas wrapped
   „jums.” onto a third line (V19). The text's own line box overhangs the 752 box by 12px a
   side (centred, so the ink does not move) to give the rounding room; balance keeps the EN
   split the same at every zoom. design/DEVIATIONS.md */
.qz-intro__lead > span { display: block; margin: 0 -12px; text-wrap: balance; }
.qz-intro__discount {
  margin: 24.8px 0 0; text-transform: uppercase; color: var(--accent);
  font-weight: 400; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
}
.qz-intro__cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 25px; height: 50px; padding: 0 32px; box-sizing: border-box;
  background: var(--ink); color: var(--cream); border-radius: var(--r-pill);
  text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 20.8px;
  transition: background var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.qz-intro__cta:hover, .qz-intro__cta:focus-visible { background: var(--ink-hover); }

/* ---- Step strip @477…1252,544 — 16/20.8 ls 1.6, 64px gaps, underline @+19 ---- */
.qz-strip { position: relative; margin-top: 36.2px; height: 20px; }
.qz-strip__list {
  display: flex; align-items: flex-start; justify-content: center; gap: 64px;
  margin: 0; padding: 0; list-style: none; text-transform: uppercase;
  font-weight: 300; font-size: 16px; line-height: 20.8px; letter-spacing: 1.6px;
}
/* Each label ends in a tracking space; trimming it keeps the row's ink 775 wide (477..1252)
   and the one 65px gap the comp draws after PATIRTIS is the +1 below. */
.qz-strip__item { position: relative; margin-right: -1.6px; color: var(--muted); }
.qz-strip__item:first-child { margin-right: -0.6px; }
.qz-strip__item a { color: inherit; transition: color var(--t-tint) var(--ease-out); }
.qz-strip__item a:hover { color: var(--accent); }
.qz-strip__item.is-active { color: var(--accent); font-weight: 400; }
.qz-strip__item.is-active::after {                           /* underline @563 */
  content: ""; position: absolute; left: 0; right: 1.6px; top: 22.8px;
  height: 1px; background: var(--accent);
}
/* Vector 97 @297,550 — a 24px rule at the strip's left edge; it is the way back. */
.qz-strip__back {
  position: absolute; left: 3px; top: 3px;                   /* 297 - 294, 550 - 547 */
  display: inline-flex; align-items: center; gap: 12px;
  text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 12px; line-height: 15.6px; letter-spacing: 1.2px;
}
.qz-strip__back-rule {
  width: 24px; height: 1px; background: currentColor; flex: none;
  transition: width var(--t-move) var(--ease-out);
}
.qz-strip__back:hover .qz-strip__back-rule { width: 32px; }

/* ---- Question block: title @627 (40/48), hint @+16, pills @+40 ---- */
.qz-form { margin: 0; padding: 0; border: 0; }
/* The panel `quiz.js` fetches and swaps: the strip and the question form, or the results.
   It cross-fades over --t-tint on the way out and back in; with JS off it is a bare
   wrapper the layout never notices (no padding, no border — the margins still collapse). */
.qz-panel { opacity: 1; transition: opacity var(--t-tint) var(--ease-out); }
.qz-panel.is-leaving { opacity: 0; }
.qz-block { margin: 0; padding: 0; border: 0; min-width: 0; }
.qz-block + .qz-block { margin-top: 40px; }
/* Step 2 asks a second question only once the first is answered — frame `Quizas 2`
   375:7479 is the state before, 375:7619 the state after. `:has()` does the reveal, so it
   needs no JavaScript. */
.qz-block--reveal { display: none; }
/* pill box 875 -> hint ink 915: 40px, of which the hint's own margin and ink offset spend 23 */
.qz-block + .qz-block--reveal { margin-top: 16.84px; }
.qz-form:has(.qz-block--first :checked) .qz-block--reveal { display: block; }
.qz-block--first { margin-top: 66.8px; }                     /* strip box 560 -> ink 627 */
/* Each step frame puts its question at its own top and its footer 120px under the last pill:
   627 on `Quizas 2`/`3` (above), 643 on `Quizas 1` 347:12276, 603 on `Quizas 4-A/B/C`, `5`
   and `6` (376:7869 … 376:8307). The active strip item says which frame this is. */
@media (min-width: 768px) {
  .qz-panel:has(.qz-strip__item:first-child.is-active) .qz-block--first { margin-top: 82.8px; }
  .qz-panel:has(.qz-strip__item:nth-child(n+4).is-active) .qz-block--first { margin-top: 42.8px; }
  /* `Quizas 2` 375:7479 asks one two-pill question yet keeps `Quizas 1`'s 1495 frame: the
     form holds the step-1 height (title box 627 -> last pill 1015, footer 1135) until the
     second question is revealed (375:7619 grows to its own content). */
  .qz-form:has(.qz-block--reveal):not(:has(.qz-block--first :checked)) { min-height: 388px; }
}
.qz-block__title {
  display: block; width: 100%; padding: 0; margin: 0; text-align: center; color: var(--ink);
  font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 48px;
}
.qz-block__hint {
  margin: 16px 0 0; text-align: center; color: var(--muted);
  font-weight: 400; font-size: 14px; line-height: 24px;
}
.qz-block__title + .qz-block__hint { margin-top: 8.8px; }    /* title box 675 -> ink 691 */

/* ---- Answer pills: 558 wide, 59 tall (85 with a note), 16px apart ---- */
.qz-pills {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-top: 33.2px;                                        /* hint ink 701 -> pill 741 */
}
.qz-block__title + .qz-pills { margin-top: 40px; }           /* no hint: title ink 675 -> 715 */
.qz-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 558px; height: 59px; box-sizing: border-box; padding: 0 32px; cursor: pointer;
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--r-pill);
  color: var(--accent); text-align: center; font-family: var(--font-body);
  transition: background var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out),
              color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.qz-pill--tall {                                             /* label ink @+24, note ink @+51 */
  height: 85px; justify-content: flex-start; padding-top: 19.23px; gap: 2.8px;
}
.qz-pill__label {
  text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 20.8px;
  letter-spacing: 1.6px;
}
.qz-pill__note {
  color: var(--ink); font-weight: 400; font-size: 14px; line-height: 24px;
  transition: color var(--t-tint) var(--ease-out);
}
.qz-pill:hover, .qz-pill:focus-visible { border-color: var(--accent); transform: translateY(var(--lift)); }
/* the pills settle in one after another — 40ms apart, nothing moves more than 12px */
.js .qz-pills .qz-pill { animation: qz-pill-in var(--t-reveal) var(--ease-out) backwards; }
.js .qz-pills .qz-pill:nth-child(2) { animation-delay: calc(1 * var(--stagger-tight)); }
.js .qz-pills .qz-pill:nth-child(3) { animation-delay: calc(2 * var(--stagger-tight)); }
.js .qz-pills .qz-pill:nth-child(4) { animation-delay: calc(3 * var(--stagger-tight)); }
.js .qz-pills .qz-pill:nth-child(5) { animation-delay: calc(4 * var(--stagger-tight)); }
.js .qz-pills .qz-pill:nth-child(n+6) { animation-delay: calc(5 * var(--stagger-tight)); }
@keyframes qz-pill-in { from { opacity: 0; transform: translateY(8px); } }
.qz-pill.is-picked, .qz-pill:has(:checked) {
  background: var(--accent); border-color: var(--accent); color: var(--cream);
}
.qz-pill--tall.is-picked, .qz-pill--tall:has(:checked) { color: var(--white); }
.qz-pill.is-picked .qz-pill__note, .qz-pill:has(:checked) .qz-pill__note { color: var(--shell); }
.qz-pill:focus-visible, .qz-pill:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

/* No comp: a step whose last question is multi-choice still needs a way forward. */
.qz-next {
  display: block; margin: 40px auto 0; height: 50px; padding: 0 32px; cursor: pointer;
  background: var(--ink); color: var(--cream); border: 0; border-radius: var(--r-pill);
  text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 20.8px;
  transition: background var(--t-tint) var(--ease-out);
}
.qz-next:hover, .qz-next:focus-visible { background: var(--ink-hover); }

/* ---- Results (`Quizas - rezultatai` 483:4390) — one absolutely-positioned stage. The
   panel starts at the crumb box's bottom (canvas y 504), so every top below is the comp's
   own y minus 504; the stage ends with the CTA row (2735 + 50). ---- */
.qz-res { position: relative; height: 2281px; }

/* 483:4398 @294,632 — 64/64 Cormorant, and the element `quiz.js` focuses after a swap. */
.qz-results__title {
  position: absolute; left: 0; top: 128px; width: 548px; margin: 0;
  color: var(--accent); font-family: var(--font-display);
  font-weight: 500; font-size: 64px; line-height: 64px;
}

/* Frames 5579 @294/457/594,736 — the visitor's own answers, 8px apart, width from content. */
.qz-res__chips {
  position: absolute; left: 0; top: 232px; display: flex; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
/* The label's cap top is the comp's 8px inset (489:4221 @744 in a pill @736), which is the
   line box's own top plus 4.68 — centring the line instead lands it 4.8px high. */
.qz-res__chip {
  display: inline-block; height: 26px; white-space: nowrap;
  box-sizing: border-box; padding: 4.68px 16px 0;
  background: var(--shell); color: var(--ink); border-radius: var(--r-btn);
  font-weight: 500; font-size: 14px; line-height: 18.2px;
}

/* 483:4399 @294,782 ink — 16/20.8, ls .8 */
.qz-res__body {
  position: absolute; left: 0; top: 274.21px; width: 558px; margin: 0;
  color: var(--ink); font-weight: 400; font-size: 16px; line-height: 20.8px;
  letter-spacing: .8px;
}

/* Rectangle 2988 @876,592 — 558x361. */
.qz-res__photo {
  position: absolute; left: 582px; top: 88px; width: 558px; height: 361px;
  object-fit: cover;
}

/* Rectangle 2983 @0,1073 — a flat white 803x859 block, left-bleeding out of the 1140
   column by exactly one gutter (never `100vw`, which counts the scrollbar). */
.qz-res__panel {
  position: absolute; left: calc(var(--gutter) * -1); top: 569px;
  width: 803px; height: 859px; background: var(--white);
}

/* The three labelled slots. Each label's ink bottom sits 24px above its card — that is how
   the comp draws a one-line (490:4316/4319) and a two-line (490:4318) label on one baseline
   grid, so the label is anchored to the card, not to a hard-coded top. */
/* `.qz-res` prefix: slot 1 and the extra row are `.cat-grid`s, whose own 28.7px top margin
   would otherwise win — category.css is linked after this sheet. */
.qz-res .qz-res__slot { position: absolute; margin: 0; }
.qz-res__slot--1 { left: 0; top: 730px; grid-template-columns: 363px; }  /* card @294,1234 */
.qz-res__slot--2 { left: 582px; top: 806px; }                            /* card @876,1310 */
.qz-res__slot--3 { left: 873px; top: 806px; }                            /* card @1167,1310 */
.qz-res__label {
  position: absolute; left: 0; bottom: 100%; width: 267px; margin: 0 0 17.01px;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
}
.qz-res__slot--1 .qz-res__label { width: 363px; }
/* 490:4318's own box is 163 wide, i.e. the comp wraps this label to two lines. */
.qz-res__slot--2 .qz-res__label { width: 163px; }

/* Frame 77 @294,854 (193x59) — the send lane. A native disclosure, so the field is
   reachable with no JavaScript at all; a rejected address comes back already open.
   The comp's 1px INSIDE ink stroke (V5) is a border, so the side padding is 32 - 1 and the
   pill HUGS its label (129 + 2x32 = 193): a fixed 193 had no slack and wrapped on every
   zoomed canvas (V7). The comp's 193 stays as the floor, where our advance runs short. */
.qz-res__send { position: absolute; left: 0; top: 350px; }
.qz-res__send summary {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  min-width: 193px; height: 59px; padding: 24px 31px; box-sizing: border-box; white-space: nowrap;
  border: 1px solid var(--ink); border-radius: 48px; color: var(--ink); list-style: none;
  text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 20.8px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out),
    border-color var(--t-tint) var(--ease-out);
}
.qz-res__send summary::-webkit-details-marker { display: none; }
.qz-res__send summary:hover, .qz-res__send summary:focus-visible {
  background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream);
}
.qz-res__send summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* No comp: the field the disclosure reveals. It opens into the stage's own empty column,
   so nothing that is measured moves. */
.qz-res__send-form {
  display: flex; flex-direction: column; gap: 8px; width: 320px; margin-top: 12px;
}
.qz-res__send-form label { color: var(--ink); font-size: 12px; line-height: 15.6px; }
/* The field — h44 r32 #f5f0e8, 16 in; its states are the ASSETS input's (437:4356): the
   placeholder 14/400 #b0a191, the value 14/500 ink, hover/focus #8b6355, error #fb6262. */
.qz-res__send-form input {
  height: 44px; padding: 0 16px; box-sizing: border-box; font-family: var(--font-body);
  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--r-btn);
  color: var(--ink); font-weight: 500; font-size: 14px;
  transition: border-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.qz-res__send-form input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.qz-res__send-form input:hover, .qz-res__send-form input:focus { border-color: var(--accent); outline: none; }
.qz-res__send-form input[aria-invalid="true"] { border-color: var(--danger); color: var(--danger); font-weight: 400; }
.qz-res__send-form button {
  height: 44px; padding: 0 24px; cursor: pointer; background: var(--ink); color: var(--cream);
  border: 0; border-radius: var(--r-pill); text-transform: uppercase;
  font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 18.2px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.qz-res__send-form button:hover, .qz-res__send-form button:focus-visible { background: var(--ink-hover); }
.qz-res__error { color: var(--danger); font-size: 12px; line-height: 15.6px; }
.qz-res__sent {
  position: absolute; left: 0; top: 425px; margin: 0; width: 558px;
  color: var(--accent); font-size: 14px; line-height: 18.2px;
}

/* 376:8588 @727,2052 ink and the three 363x578 cards @294/682/1071,2093. */
.qz-results__more {
  /* -2.4px takes back the trailing letter-space the tracking adds, so a centred run is
     centred on its INK — the same compensation `.qz-strip__item` makes. */
  position: absolute; left: 0; top: 1542.31px; width: 1137.6px; margin: 0;
  text-align: center; text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
}
.qz-res .qz-results__grid--more { position: absolute; left: 0; top: 1589px; margin: 0; }

/* Frame 2 @658,2735 (227x50, filled) and Frame 3 @901,2735 (170x50, bare). The restart is
   a real form post to `shop.quiz_restart`, so it works with JavaScript off. */
.qz-res__restart { position: absolute; left: 364px; top: 2231px; margin: 0; }
.qz-res__restart button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 227px; height: 50px; padding: 0 32px; box-sizing: border-box; cursor: pointer;
  background: var(--ink); color: var(--cream); border: 0; border-radius: var(--r-pill);
  text-transform: uppercase; font-family: var(--font-body); white-space: nowrap;
  font-weight: 400; font-size: 16px; line-height: 20.8px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.qz-res__restart button:hover, .qz-res__restart button:focus-visible { background: var(--ink-hover); }
/* Frame 3's 1px INSIDE ink stroke (V5) — the same hugging outline pill as Frame 77. */
.qz-res__all {
  position: absolute; left: 607px; top: 2231px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 170px; height: 50px; padding: 0 31px; box-sizing: border-box; white-space: nowrap;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  color: var(--ink); text-transform: uppercase;
  font-weight: 400; font-size: 16px; line-height: 20.8px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out),
    border-color var(--t-tint) var(--ease-out);
}
.qz-res__all:hover, .qz-res__all:focus-visible { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream); }

/* Rectangle 2990 @0,2905 (1728x578) — full-bleed like the panel above, and the comp draws
   nothing between it and the footer, so it takes back `.qz`'s 120px tail. */
.qz-res__band-pic { display: contents; }
.qz-res__band {
  display: block; width: calc(100% + var(--gutter) * 2); max-width: none;
  height: 578px; object-fit: cover;
  margin: 120px calc(var(--gutter) * -1) -120px;
}
/* The extra row's pager exists for the phone only — the 1728 comp draws no dots. The
   `.qz-res` prefix is load-bearing: `home.css` is linked after this sheet, so a bare
   `.qz-res__dots` would lose to `.dots`, and the pager's 24px top margin would collapse
   out of the empty carousel wrapper and push the whole absolute stage down. */
.qz-res .qz-res__dots { display: none; }

/* ---- Mobile: a STEP is `Quizas mobile` 347:12281 (360x1653, revision 2026-10-02 — it used
   to be chrome only) and the RESULTS page `Quizas mobile` 492:4346 (360x3464). Both comps
   carry the phone status bar, so every top below is the comp's y minus 43. The INTRO still
   has no 360 frame and reflows on the step's rhythm (design/DEVIATIONS.md). ---- */
@media (max-width: 767px) {
  .qz { padding-bottom: 64px; }
  /* 492:4349/4351 — the one mobile quiz comp gives a 240px hero and a 40/72 title. */
  .qz-hero { height: 240px; }
  .qz-hero__title { top: 84px; font-size: 40px; line-height: 72px; }
  .qz-body { width: auto; margin: 0 16px; }
  /* Frame 80 492:4312 @16,397 — 10/13, 16px under the hero, as on the results comp. */
  .qz-crumbs { height: 13px; font-size: 10px; line-height: 13px; }
  .qz-intro__lead { width: auto; font-size: 30px; line-height: 38px; }
  .qz-intro__lead > span { margin: 0; }            /* the gutter is the slack here */
  .qz-intro__discount { font-size: 18px; line-height: 24px; letter-spacing: 1.8px; }
  /* Group 5725 492:4343 — PATIRTIS @16,450 (16/20.8 ls1.6, the 1728 type), 48px between the
     trimmed labels (KAM @137, POJŪTIS @222, TIPAS @342), the rule Vector 47 @16,469 72 wide.
     The list scrolls sideways, which clips vertically too, so it carries 4px of padding for
     the rule. The back link (steps 2–6; 347:12281 is step 1 and draws none) takes a row of
     its own above the strip. */
  .qz-strip { height: auto; margin-top: 36.21px; }   /* crumb box 367 -> cap 407 */
  .qz-strip:has(.qz-strip__back) { padding-top: 28px; }
  .qz-strip__list { gap: 48px; overflow-x: auto; justify-content: flex-start;
                    padding-bottom: 4px; scrollbar-width: none; }
  .qz-strip__item, .qz-strip__item:first-child { margin-right: -1.6px; }
  .qz-strip__list::-webkit-scrollbar { display: none; }
  /* the same right-edge affordance the collection tabs use (mobile.css `.tabs`) */
  .js .qz-strip__list { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .js .qz-strip__list.is-scroll-end { mask-image: none; }
  .qz-strip__item { flex: none; }
  .qz-strip__back { top: 0; left: 0; }
  /* „Atgal” is 16px of ink; its unpainted ::before makes the row a 40px hit box (the strip's
     labels start 12px under it, the hero crumbs end 31px above). */
  .qz-strip__back::before { content: ""; position: absolute; inset: -12px -8px; }
  /* 492:4324 @16,509 — the question, 24/32 Cormorant centred in 328. */
  .qz-block--first { margin-top: 37.01px; }        /* cap 407 -> question box 466 */
  .qz-block__title { font-size: 24px; line-height: 32px; }
  /* Frames 68/81/82/71 — 328 wide, 16 apart, 24px under the question; label 14/18.2 ls1.4
     with the comp's 24px cap padding (18.9 + the 1px stroke around an 18.2 line box): 58 for
     one line, 76 for two, text box 281 wide. */
  .qz-pills, .qz-block__title + .qz-pills { margin-top: 24px; }
  .qz-pill { width: 100%; height: auto; padding: 18.9px 22.5px; }
  .qz-pill__label { font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px; }
  .qz-pill--tall { min-height: 85px; }
  .qz-form { margin-bottom: 16px; }                 /* last pill -> footer 80 (.qz pays 64) */
  /* ---- Results (`Quizas mobile` 492:4346) — the desktop stage pins every child to the
     1728 canvas, so the grid is unwound first and the page reflows. The unwind carries the
     `.qz-res` prefix because the rules it undoes do too. ---- */
  .qz-res { height: auto; }
  .qz-res .qz-results__title, .qz-res .qz-res__chips, .qz-res .qz-res__body,
  .qz-res .qz-res__send, .qz-res .qz-res__sent, .qz-res .qz-res__slot,
  .qz-res .qz-results__more, .qz-res .qz-results__grid--more,
  .qz-res .qz-res__restart, .qz-res .qz-res__all {
    position: static; left: auto; top: auto; width: auto;
  }
  /* 492:4452 @16,450 — 32/64 Cormorant. */
  .qz-res .qz-results__title { margin-top: 18px; font-size: 32px; line-height: 64px; }  /* +3: crumbs 13 tall */
  /* 492:4443/4446/4449 — the row WRAPS: chip 3 opens a second line 8px under chip 1. */
  .qz-res .qz-res__chips { flex-wrap: wrap; margin-top: 10px; }
  /* 492:4453 @16,586 — 14/18.2 ls .7. */
  .qz-res .qz-res__body {
    margin-top: 19.8px; font-size: 14px; line-height: 18.2px; letter-spacing: .7px;
  }
  /* Frame 77 492:4454 — 177x58, label 14/18.2. */
  .qz-res .qz-res__send { margin-top: 19.6px; }
  .qz-res__send summary {
    min-width: 177px; height: 58px; padding: 24px 31px;            /* hugs 113 + 2x32 */
    font-size: 14px; line-height: 18.2px;
  }
  .qz-res__send-form { width: 100%; }
  /* The comp draws no editorial photo at 360, and its white field (Rectangle 2983 492:4469)
     IS slot 1's own background — so neither desktop element is drawn. */
  .qz-res__photo, .qz-res__panel { display: none; }

  /* Slot 1: the white field @0,762 (360x621) with the label @16,794 and the 328x551 card
     (Component 36 492:4472) @16,831 inside it. */
  .qz-res .qz-res__slot--1 {
    grid-template-columns: 1fr; justify-content: stretch; gap: 0;
    margin: 48px -16px 0; padding: 26.6px 16px 1px; background: var(--white);
  }
  .qz-res .qz-res__label {
    position: static; width: auto; margin: 0 0 19px;
    font-size: 18px; line-height: 23.4px; letter-spacing: 1.8px;
  }
  .qz-res .qz-res__slot--1 .pcard { width: 100%; height: 551px; padding: 0; }
  .qz-res .qz-res__slot--1 .pcard__badge { left: 24px; top: 24px; }
  .qz-res .qz-res__slot--1 .pcard__wish { right: 24px; top: 24px; width: 19px; height: 16px; }
  .qz-res .qz-res__slot--1 .pcard__media { margin: 55px 0 0 24px; }
  .qz-res .qz-res__slot--1 .pcard__media img { width: 283px; height: 312px; }
  .qz-res .qz-res__slot--1 .pcard__brand { margin: 4.4px 0 0 24px; }      /* cap +375 */
  .qz-res .qz-res__slot--1 .pcard__name { margin: 7.2px 0 0 24px; }       /* cap +399 */
  .qz-res .qz-res__slot--1 .pcard__summary { margin: 7.4px 0 0 24px; }    /* cap +426 */
  .qz-res .qz-res__slot--1 .pcard__row { margin: 9.8px 24px 0; }          /* price cap +452 */
  .qz-res .qz-res__slot--1 .pcard__actions { margin: 14px 0 0 24px; gap: 16px; }
  .qz-res .qz-res__slot--1 .pcard__add { width: 217px; }
  .qz-res .qz-res__slot--1 .pcard__brand, .qz-res .qz-res__slot--1 .pcard__name,
  .qz-res .qz-res__slot--1 .pcard__summary { max-width: 235px; }

  /* Slots 2 and 3 (492:4470 / 492:4471): two 174x357 cards 4px apart, bleeding 12px past
     the gutter to the comp's own x4 / x182. The labels bottom-align, which is how the comp
     draws a two-line and a one-line label over cards that start on one line. */
  .qz-res__pair { display: flex; gap: 4px; margin: 91px -12px 0; }
  .qz-res .qz-res__pair .qz-res__slot { position: relative; flex: 1 1 0; margin: 0; }
  /* The label hangs above its own card — the same anchoring the 1728 stage uses, and the
     reason a one-line and a two-line label still put their cards on one line. */
  .qz-res .qz-res__pair .qz-res__label {
    position: absolute; left: 8px; right: 0; bottom: 100%; margin: 0 0 10.6px;
  }

  /* „Papildomai siūlome“ 492:4634 @12,1871 over two more mini cards, paged 2 at a time. */
  .qz-res .qz-results__more {
    margin: 34.6px 0 0 -4px; text-align: left;
    font-weight: 200; font-size: 18px; line-height: 23.4px; letter-spacing: 1.8px;
  }
  .qz-res__more { overflow: hidden; margin: 19px -12px 0; }
  .qz-res .qz-results__grid--more {
    display: flex; justify-content: flex-start; gap: 4px; margin: 0; padding: 0;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .qz-res .qz-results__grid--more::-webkit-scrollbar { display: none; }
  .qz-res .qz-results__grid--more > * { flex: none; scroll-snap-align: start; }
  /* Group 5347 @169,2281 — the 2-dot pager `motion.js` fills in. */
  .qz-res .qz-res__dots { display: flex; margin: 16px auto 0; }

  /* The mini card (174x357) both rows draw — scoped to the results block, never onto the
     shared `.pcard`, which the home and category grids size for themselves. */
  .qz-res .qz-mini .pcard { width: 174px; height: 357px; padding: 0; }
  .qz-res .qz-mini .pcard__badge {
    left: 8px; top: 8px; height: 16px; padding: 0 6px; border-radius: 16px;
    font-size: 8px; line-height: 10.4px; letter-spacing: .4px;
  }
  .qz-res .qz-mini .pcard__wish { right: 5px; top: 8px; width: 16px; height: 14px; }
  .qz-res .qz-mini .pcard__media { margin: 30px 0 0 8px; }
  .qz-res .qz-mini .pcard__media img { width: 158px; height: 174px; }
  .qz-res .qz-mini .pcard__brand {
    margin: 5px 16px 0; font-size: 10px; line-height: 13px;                /* cap +212 */
  }
  .qz-res .qz-mini .pcard__name { margin: 4.8px 16px 0; font-size: 14px; line-height: 18.2px; }
  .qz-res .qz-mini .pcard__summary {                                       /* 142x22 = 2 lines */
    margin: 5.2px 16px 0; line-height: 14px; height: 2lh; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .qz-res .qz-mini .pcard__row { margin: 4.6px 16px 0; }                   /* price cap +287 */
  .qz-res .qz-mini .pcard__actions { margin: 8px 16px 0; gap: 8px; }
  .qz-res .qz-mini .pcard__add { width: 102px; height: 32px; padding: 0; }
  /* Frame 4 492:4470;324:1764 holds the bag glyph alone — the label stays for a screen
     reader, since a button whose only child is a decorative image has no name. */
  .qz-res .qz-mini .pcard__add span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .qz-res .qz-mini .pcard__go { width: 32px; height: 32px; }

  /* Frame 2 492:4788 @16,2329 and Frame 3 492:4790 @16,2395 — both full width. */
  .qz-res .qz-res__restart { margin-top: 40px; }
  .qz-res__restart button { width: 100%; }
  .qz-res .qz-res__all { display: flex; width: 100%; margin-top: 16px; }
  /* Rectangle 2990 492:4792 @0,2485 (360x319) — flush against the footer, as at 1728. */
  .qz-res__band { height: 319px; margin: 40px -16px -64px; }
}