/* The two card overlays: `pranesti` 377:5245 and `quick-popup` 377:5293.
   Both comps paint the page flat #403632 — that is #2c2420 at 91% over the cream page — and
   draw the header LIT above it, so the overlay sits under the sticky header (z 50) and the
   focus trap, not a z-index, is what keeps the page behind unreachable. */

.modal {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  opacity: 0; transition: opacity var(--t-tint) var(--ease-out);
}
.modal[hidden] { display: none; }
.modal[hidden]:target { display: grid; opacity: 1; }   /* JS off: the opener is an anchor */
.modal.is-open { opacity: 1; }
.modal__scrim { position: absolute; inset: 0; background: rgba(44, 36, 32, .91); }
.modal__card { position: relative; background: var(--cream); }
/* every box in a card is placed from the comp, so nothing carries the document's own rhythm */
.modal__card h2, .modal__card p, .modal__card hr, .modal__card fieldset, .modal__card legend
  { margin: 0; padding: 0; }
.modal__card fieldset { border: 0; }
.js .modal__card { transform: translateY(12px); transition: transform var(--t-move) var(--ease-out); }
.js .modal.is-open .modal__card, .js .modal[hidden]:target .modal__card { transform: none; }

.modal__close {                                     /* Group 5450 — 10x10, 16 in from the corner */
  position: absolute; top: 16px; right: 16px; width: 10px; height: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-move) var(--ease-out), opacity var(--t-tint) var(--ease-out);
}
.modal__close:hover { transform: rotate(90deg); }
.modal__close:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }

/* ---- `pranesti` — Rectangle 2984 547x314 @591,353 ---- */
.modal--notify { padding-top: 65px; }               /* 65 = where the comp's 314 card sits on
                                                       the 955 canvas: centred, the header above */
.modal--notify .modal__card { width: 547px; height: 314px; }
.modal__title {                                     /* 377:5260 @655,417 — 32/41.7 w200 ls 3.2 */
  position: absolute; top: 54.15px; left: 0; width: 100%; text-align: center; white-space: nowrap;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.7px; letter-spacing: 3.2px;
}
.notify__input {                                    /* Frame 82 364x50 @683,479 — r40, 14/24 */
  position: absolute; top: 126px; left: 92px; width: 364px; height: 50px;
  padding: 0 20px; border: 0; border-radius: 40px; background: var(--white);
  font-family: inherit; font-size: 14px; line-height: 24px; color: var(--ink);
}
.notify__input::placeholder { color: var(--muted); }
.notify__submit {                                   /* Frame 77 363x50 @683,553 — r48 */
  position: absolute; top: 200px; left: 92px; width: 363px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 48px; background: var(--ink); color: var(--white);
  text-transform: uppercase; font-size: 16px; line-height: 20.8px;
  transition: background-color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.notify__submit:hover, .notify__submit:focus-visible { background: var(--ink-hover); transform: translateY(var(--lift)); }
.notify__msg {                                      /* no frame: the endpoint's answer */
  position: absolute; top: 262px; left: 92px; width: 364px; text-align: center;
  color: var(--accent); font-size: 12px; line-height: 15.6px;
  opacity: 0; transition: opacity var(--t-tint) var(--ease-out);
}
.notify__msg:not(:empty) { opacity: 1; }

/* ---- `quick-popup` — Rectangle 2984 946x456 @391,249 ---- */
.modal--quick .qv { width: 946px; height: 456px; }
.qv__media { position: absolute; top: 0; left: 0; width: 458px; height: 456px; }
.qv__media img { width: 100%; height: 100%; object-fit: cover; }
.qv__badge {                                        /* Frame 67 57x23 @776,265 — r16 */
  position: absolute; top: 16px; right: 16px; height: 23px; padding: 0 8px;
  display: flex; align-items: center; border-radius: var(--r-badge);
  background: var(--accent); color: var(--cream);
  text-transform: uppercase; font-weight: 500; font-size: 10px; line-height: 13px;
  letter-spacing: .5px;
}
.qv__info { position: absolute; top: 0; left: 522px; width: 360px; height: 100%; }
.qv__title {                                        /* 377:5382 @913,313 — 32/41.7 w500 ls 3.2 */
  position: absolute; top: 54.15px; left: 0; width: 100%;
  text-transform: uppercase; color: var(--ink);
  font-weight: 500; font-size: 32px; line-height: 41.7px; letter-spacing: 3.2px;
  height: 41.7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;   /* one line */
}
.qv__brand {                                        /* 377:5394 @913,351 — 14/18.2 w600 */
  position: absolute; top: 97.9px; left: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 600; font-size: 14px; line-height: 18.2px;
}
.qv__lead {                                         /* 377:5361 @913,385 — 12/15.6 w300 */
  position: absolute; top: 133.2px; left: 0; width: 100%; color: var(--muted);
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.qv__rule {                                         /* Vector 47 @913,409 — 360x1 #d4c5b5 */
  position: absolute; top: 160px; left: 0; width: 360px; height: 0;
  border: 0; border-top: 1px solid var(--sand);
}
/* P-03: price + old price share a row (gap 972 - (913 + 48) = 11), so a longer price pushes
   the old one along. The row sits at the price's old top; the old price keeps its 3.9px drop
   (`.qv__prices` in the selector: `.modal__card p { margin: 0 }` outranks a bare class). */
.qv__prices { position: absolute; top: 170px; left: 0; display: flex; align-items: flex-start; gap: 11px; }
.qv__price {                                        /* 377:5396 @913,425 — 20/26 w500 */
  color: var(--ink); white-space: nowrap;
  font-weight: 500; font-size: 20px; line-height: 26px;
}
.qv__prices .qv__compare {                          /* 377:5397 @972,427 — 14/18.2 #fb6262 */
  margin-top: 3.9px; color: var(--danger); white-space: nowrap;
  font-size: 14px; line-height: 18.2px;
}
.qv__compare s { text-decoration-line: line-through; }
.qv__opt { position: absolute; top: 214px; left: 0; width: 100%; height: 24px; }
.qv__opt legend {                                   /* 377:5384 @913,470 — 14/18.2 w300 ls 1.4 */
  position: absolute; top: 2.9px; left: 0; text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px;
}
.qv__swatches {                                     /* 24px dots @991, pitch 36 */
  position: absolute; top: 0; left: 78px; display: flex; gap: 12px;
}
.qv__swatch { width: 24px; height: 24px; cursor: pointer; }
.qv__swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.qv__swatch > span:first-of-type {
  display: block; width: 24px; height: 24px; border-radius: 50%;
  transition: box-shadow var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.qv__swatch:hover > span:first-of-type { transform: scale(1.03); }
.qv__swatch.is-active > span:first-of-type,
.qv__swatch:focus-within > span:first-of-type { box-shadow: 0 0 0 1px var(--cream), 0 0 0 2px var(--accent); }
/* P-01: a colour with no stock — see .pdp__swatch.is-soldout (DEVIATIONS.md) */
.qv__swatch.is-soldout { position: relative; cursor: not-allowed; }
.qv__swatch.is-soldout > span:first-of-type { opacity: .35; }
.qv__swatch.is-soldout:hover > span:first-of-type { transform: none; }
.qv__swatch.is-soldout::after {
  content: ""; position: absolute; left: 11.5px; top: -2px; width: 1px; height: 28px;
  background: var(--ink); transform: rotate(45deg);
}
.qv__soldout {                                      /* the PDP's 377:6865 status, in the swatch row */
  position: absolute; top: 214px; left: 0; margin: 0; text-transform: uppercase; color: var(--danger);
  font-weight: 300; font-size: 18px; line-height: 23.4px;
}
.qv__add {                                          /* Frame 4 360x47 @913,569 — r40 */
  position: absolute; top: 320px; left: 0; width: 360px; height: 47px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 40px; background: var(--ink); color: var(--cream);
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.2px;
  transition: background-color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.qv__add:hover, .qv__add:focus-visible { background: var(--ink-hover); transform: translateY(var(--lift)); }
.qv__more {                                         /* Group 5589 @913,632 — text + a 24px rule */
  position: absolute; top: 378.1px; left: 0;
  display: flex; align-items: center; gap: 18px;    /* Vector 97 sits 16 past the comp's advance */
  color: var(--accent); font-weight: 300; font-size: 14px; line-height: 18.2px;
  transition: color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.qv__more:hover { transform: translateX(var(--nudge)); }
.qv__more-rule { width: 24px; height: 1px; background: currentColor; }

/* The standalone quick-view page is the comp's state: header, card, nothing else. */
.page-quick .site-footer { display: none; }
.page-quick #main { min-height: calc(100vh - var(--header-h)); }

/* ---- 360: no comp draws either overlay on mobile, so both reflow (design/DEVIATIONS.md) ---- */
@media (max-width: 767px) {
  .modal { padding: 16px; align-content: center; overflow-y: auto; }
  .modal--notify { padding-top: calc(var(--header-h) + 16px); }
  .modal--notify .modal__card { width: 100%; max-width: 328px; height: auto; padding: 48px 20px 24px; }
  /* 288 of card room under 22px ls2.2 is 4px short of „Įveskite savo el. paštą" on one line: wrap it */
  .modal__title { position: static; width: 100%; font-size: 22px; line-height: 28.6px; letter-spacing: 2.2px;
    white-space: normal; text-wrap: balance; }
  .notify__input, .notify__submit { position: static; width: 100%; margin-top: 16px; }
  .notify__msg { position: static; width: 100%; margin-top: 12px; }

  .modal--quick .qv { width: 100%; max-width: 328px; height: auto; padding-bottom: 24px; }
  .qv__media { position: relative; width: 100%; height: 280px; }
  .qv__info { position: relative; top: 0; left: 0; width: auto; height: auto; padding: 20px 20px 0; }
  .qv__title { position: static; font-size: 22px; line-height: 28.6px; letter-spacing: 2.2px; height: 28.6px; }
  .qv__brand, .qv__lead, .qv__prices, .qv__rule, .qv__opt, .qv__soldout, .qv__add, .qv__more {
    position: static; margin-top: 12px;
  }
  .qv__prices { align-items: baseline; }
  .qv__prices .qv__compare { margin: 0; }
  .qv__rule { width: 100%; }
  .qv__opt { height: auto; }
  .qv__opt legend { position: static; margin-bottom: 8px; }
  .qv__swatches { position: static; }
  .qv__add { width: 100%; }
  /* M42 — at 360 the photo spans the card, so the badge (top/right 16) sat ON the 10px close and
     took its taps. The close gets the pop-up's cream disc above the photo, the badge the
     photo's other corner (no mobile comp — design/DEVIATIONS.md). */
  .modal--quick .modal__close {
    top: 12px; right: 12px; width: 28px; height: 28px; z-index: 1;
    border-radius: 50%; background: var(--cream);
  }
  .modal--quick .qv__badge { right: auto; left: 16px; }
  /* every close: an invisible 40x40 tap box around the drawn glyph */
  .modal__close::before { content: ""; position: absolute; inset: -15px; }      /* 10 → 40 */
  .modal--quick .modal__close::before, .modal--promo .modal__close::before { inset: -6px; }  /* 28 → 40 */
}

/* Both new frames paint their scrim as rgba(0,0,0,.64) over the LIT home hero and start it
   under the header — a different value from the two card overlays above, read off the nodes
   (Rectangle 2991 #367:4896 / #428:8112). */
.modal--age .modal__scrim, .modal--promo .modal__scrim {
  top: var(--header-h); background: rgba(0, 0, 0, .64);
}

/* ---- `amziaus-patvirtinimas` 347:12935 (2026-09-25 revision: ONE card) — Group 5531 524x249
        @602,353 = the centre of the 1728x955 canvas; comment 07 „išcentruoti pagal rezoliuciją“,
        so the card is centred in the VIEWPORT at every resolution ------------------------- */
/* The gate has no close and no refusal state: the comp draws neither. „NĖRA“ is a link away,
   „TAIP YRA“ posts the cookie, and the page behind cannot be scrolled while it is up. */
.modal--age { align-items: center; }
html:has(.modal--age) { overflow: hidden; }   /* on the root — see `drawer-open` in app.css */
.modal--age .modal__card { width: 524px; height: 249px; }
.age__title {                                       /* 367:4921 @666,576 — 32/41.7 w200 ls 3.2 */
  position: absolute; top: 54.15px; left: 0; width: 100%; text-align: center;
  text-transform: uppercase; color: var(--accent);
  /* 3.2 trimmed to 2.95: our rasterisation runs 5px wider than Figma's over these 21
     characters, which pushed the centred ink 4px left — design/DEVIATIONS.md */
  font-weight: 200; font-size: 32px; line-height: 41.7px; letter-spacing: 2.95px;
}
.age__no, .age__yes {                               /* Frame 78 / Frame 77 130x59 @726|872,638 */
  display: flex; align-items: center; justify-content: center;
  width: 130px; height: 59px; border-radius: 48px;
  text-transform: uppercase; 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), transform var(--t-move) var(--ease-out);
}
.age__no { position: absolute; top: 126px; left: 124px;
           border: 1px solid var(--accent); color: var(--accent); }
.age__no:hover, .age__no:focus-visible { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream); transform: translateY(var(--lift)); }
.age__yes-form { position: absolute; top: 126px; left: 270px; }
.age__yes { background: var(--ink); color: var(--white); }
.age__yes:hover, .age__yes:focus-visible { background: var(--ink-hover); transform: translateY(var(--lift)); }
.age__no:focus-visible, .age__yes:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ---- `pop-up` 428:8091 — Rectangle 2984 750x374 @490,123 ------------------------------- */
.modal--promo { align-items: start; padding-top: 123px; }
.modal--promo .modal__card { width: 750px; height: 374px; }
/* z-index: the photo tile is positioned and comes later in the DOM, so at 360 — where it
   spans the full width — it would paint over the close. */
.modal--promo .modal__close { width: 16px; height: 16px; z-index: 1; }  /* Group 5450 16x16 @1208,139 */
.promo__media {                                     /* Rectangle 2992 372x374 @488,123 */
  position: absolute; top: 0; left: -2px; width: 372px; height: 374px; object-fit: cover;
}
.promo__title {                                     /* 428:8151 @900,222 — 24/31.2 w200 ls 2.4 */
  position: absolute; top: 91.9px; left: 410px; width: 300px;
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 24px; line-height: 31.2px; letter-spacing: 2.4px;
}
.promo__body {                                      /* 428:8150 @900,262 — 14/22 w300 */
  position: absolute; top: 133px; left: 410px; width: 300px;
  color: var(--ink); font-weight: 300; font-size: 14px; line-height: 22px;
}
.promo__cta {                                       /* Frame 77 159x59 @900,362 — r48 */
  position: absolute; top: 239px; left: 410px; width: 159px; height: 59px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 48px; background: var(--ink); color: var(--white);
  text-transform: uppercase; font-size: 16px; line-height: 20.8px;
  transition: background-color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.promo__cta:hover, .promo__cta:focus-visible { background: var(--ink-hover); transform: translateY(var(--lift)); }
/* The code state — Frame 82 302x50 @900,742 on the comp's second card. It takes the CTA's
   slot here, so the block keeps one rhythm (design/DEVIATIONS.md). */
.promo__code {
  position: absolute; top: 239px; left: 410px; width: 302px; height: 50px;
  display: none; align-items: center; border-radius: 40px; background: var(--white);
  font-size: 14px; line-height: 24px;
}
.promo__code-label { position: absolute; left: 20px; color: var(--muted); }
.promo__code-value { position: absolute; left: 77px; color: #403632; }
.promo__copy {
  position: absolute; right: 20px; width: 16px; height: 16px;
  transition: opacity var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.promo__copy:hover { transform: scale(1.03); }
.promo__copy.is-copied { opacity: .5; }
/* JS off: the CTA is an anchor, `:target` swaps the state — the same lane the notify card uses */
.promo:has(#promo-code:target) .promo__cta { display: none; }
#promo-code:target, .promo.is-code .promo__code { display: flex; }
.promo.is-code .promo__cta { display: none; }

/* ---- 360: neither overlay has a comp on mobile, so both reflow (design/DEVIATIONS.md) --- */
@media (max-width: 767px) {
  .modal--age, .modal--promo { align-items: center; padding: 16px; }
  /* M41 — the pop-up card is taller than a wide phone's canvas (600x900 = 540 canvas px), so
     centring it in the whole viewport slid its close UNDER the sticky header (z 50), where no tap
     could reach it. It centres below the header, and never above the scroll start. */
  .modal--promo { padding-top: calc(var(--header-h) + 16px); align-content: safe center; align-items: safe center; }
  /* the pop-up opens at the top of the home page, where the 40px announcement band still sits
     above the sticky bar */
  body:has(.announce) .modal--promo { padding-top: calc(var(--header-h) + 56px); }
  .modal--age .modal__card { width: 100%; max-width: 328px; height: auto; padding: 32px 20px; }
  .age__title { position: static; font-size: 22px; line-height: 28.6px; letter-spacing: 2.2px; }
  .age__no, .age__yes { width: 100%; }
  .age__no { position: static; margin-top: 24px; }
  .age__yes-form { position: static; margin-top: 12px; }

  .modal--promo .modal__card { width: 100%; max-width: 328px; height: auto; padding-bottom: 24px; }
  /* the card's top-right corner is the PHOTO at 360, so the dark X gets a cream disc to sit on */
  .modal--promo .modal__close {
    top: 12px; right: 12px; width: 28px; height: 28px;
    border-radius: 50%; background: var(--cream);
  }
  .promo__media { position: relative; left: 0; width: 100%; height: 220px; }
  /* `.modal--promo` prefix: `.modal__card h2/p { margin: 0 }` (0,1,1) outranked the bare classes,
     so the title and body ran flush to the card edge */
  .modal--promo .promo__title, .modal--promo .promo__body, .promo__cta, .promo__code {
    position: static; width: auto; margin: 16px 20px 0;
  }
  .promo__cta, .promo__code { width: calc(100% - 40px); }
}

/* ---- `Error - saugikliai` 347:13061 — the storefront confirm dialog (partials/confirm_dialog.html).
        Both cards are Group 5531's 524-wide cream card, so it is centred in the viewport the
        way the age gate's identical card is. Card 1 #377:4889 524x249: title 377:4892 cap top
        @+64 (one line), pills Frame 78/77 59 tall @+126, 16 apart, 64 of card under them.
        Card 2 #377:4897 524x283: title 377:4900 395 wide, two lines, pills @+160. So the gap
        under the title follows the line count: 126 - 55.41 - 41.66 = 28.93 after one line,
        160 - 55.41 - 83.33 = 21.26 after two (`.confirm--two-line`). ---------------------- */
.modal--confirm .modal__card {
  width: 524px; padding: 55.41px 0 64px;           /* 54.15 + 1.26: DM Sans' cap sits 1.26 higher
                                                       in Chrome's line box than the age gate's math */
  display: flex; flex-direction: column; align-items: center;
}
.confirm__title {                                   /* 32/41.7 w200 ls 3.2, centred in a 395 box */
  width: 395px; text-align: center; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.664px; letter-spacing: 3.2px;
}
.confirm__form { display: flex; flex-direction: column; align-items: center; }
.confirm__actions { display: flex; justify-content: center; gap: 16px; margin-top: 28.93px; }
.confirm--two-line .confirm__actions { margin-top: 21.26px; }
.confirm__btn {                                     /* Frame 78 — 130x59 r48, 1px accent INSIDE */
  display: flex; align-items: center; justify-content: center;
  min-width: 130px; height: 59px; padding: 0 31px;    /* comp 32: our glyphs run ~2px wider over
                                                         „Pirkimas“, so a hugging pill would be 135, not 133 */
  border: 1px solid var(--accent); border-radius: 48px; background: none; color: var(--accent);
  cursor: pointer; text-transform: uppercase; font-family: inherit;
  font-weight: 400; font-size: 16px; line-height: 20.8px; white-space: nowrap;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out),
              border-color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.confirm__btn--wide { min-width: 140px; }           /* card 2: both pills 140 */
.confirm__btn:hover, .confirm__btn:focus-visible {   /* ASSETS 452:4469 — the outline pill's hover, as `.age__no` */
  border-color: var(--ink-hover); background: var(--ink-hover); color: var(--cream); transform: translateY(var(--lift));
}
.confirm__btn--primary { border-color: var(--ink); background: var(--ink); color: var(--white); }  /* Frame 77 #2c2420 */
.confirm__btn--primary:hover, .confirm__btn--primary:focus-visible {   /* ASSETS 452:4464 */
  border-color: var(--ink-hover); background: var(--ink-hover); color: var(--white);
}
.confirm__btn--danger { border-color: var(--danger); background: var(--danger); color: var(--white); }  /* Frame 77 #fb6262 */
.confirm__btn--danger:hover, .confirm__btn--danger:focus-visible {   /* no ASSETS danger hover: the lift alone */
  border-color: var(--danger); background: var(--danger); color: var(--white);
}
.confirm__btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
/* card 2's password — no comp draws it (DEVIATIONS.md): the notify card's 364x50 white pill, in
   the card's own title-to-pill gap, the pills 16 under it */
.confirm__field {
  width: 364px; height: 50px; margin-top: 21.26px; padding: 0 20px;
  border: 1px solid var(--sand); border-radius: 40px; background: var(--white);
  font-family: inherit; font-size: 14px; line-height: 24px; color: var(--ink);
  transition: border-color var(--t-tint) var(--ease-out);
}
.confirm__field::placeholder { color: var(--muted); }
.confirm__field:hover, .confirm__field:focus { border-color: var(--accent); outline: none; }
.confirm__field + .confirm__actions { margin-top: 16px; }

/* ---- 360: no comp draws the dialog on mobile — it reflows the age gate's way (DEVIATIONS.md) */
@media (max-width: 767px) {
  .modal--confirm { align-items: center; }
  .modal--confirm .modal__card { width: 100%; max-width: 328px; padding: 32px 20px; }
  .confirm__title { width: 100%; font-size: 22px; line-height: 28.6px; letter-spacing: 2.2px; }
  .confirm__actions, .confirm--two-line .confirm__actions { margin-top: 24px; }
  .confirm__field { width: 100%; margin-top: 24px; }
  .confirm__field + .confirm__actions { margin-top: 16px; }
  .confirm__btn { min-width: 0; flex: 1 1 0; padding: 0 16px; }
  .confirm__actions, .confirm__form { align-self: stretch; }
}

/* ---- the cookie consent card (partials/consent.html) — NO comp: the age-gate / confirm card
        family (cream card, accent title, outline pills) as a bottom banner, design/DEVIATIONS.md.
        Non-modal: no scrim, the page stays usable. z 45 = above the PDP sticky bar (30), the
        compare bar and the card overlays (40); under the header (50) and the drawers (100/120).
        1140 wide = the container, 24 off the bottom of the 1728 canvas (the body zoom scales it). */
.consent {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 45;
  width: 1140px; margin: 0 auto; padding: 24px 32px; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px;
  grid-template-areas: "title actions" "text actions" "settings settings";
  background: var(--cream); border: 1px solid var(--sand); box-shadow: var(--drop-shadow);
  color: var(--ink);
  transition: opacity var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.consent[hidden] { display: none; }
.consent[hidden]:target { display: grid; }        /* JS off: the footer link / the cookie page reopen it */
/* CSS-driven entry, so a script that never ran cannot leave the card invisible. `backwards`,
   not `both`: a finished animation must not hold opacity/transform over the exit transition. */
.consent:not([hidden]) { animation: consent-in var(--t-move) var(--ease-out) backwards; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }
.consent.is-leaving { opacity: 0; transform: translateY(12px); pointer-events: none; }
.consent__form { display: contents; }             /* its parts sit in the card's own grid */
.consent__title {                                 /* `.confirm__title` at banner size */
  grid-area: title; margin: 0; outline: none; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 22px; line-height: 28.6px; letter-spacing: 2.2px;
}
.consent__title:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.consent__text { grid-area: text; margin: 8px 0 0; font-size: 14px; line-height: 18.2px; color: var(--ink); }
.consent__text a { color: inherit; text-decoration: underline; }
.consent__actions { grid-area: actions; align-self: end; display: flex; align-items: center; gap: 16px; }
.consent__btn {                                   /* `.confirm__btn` — the outline pill, accent 4.61:1 on cream */
  display: flex; align-items: center; justify-content: center;
  min-width: 130px; height: 44px; padding: 0 24px; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: 48px; background: none; color: var(--accent);
  cursor: pointer; text-transform: uppercase; font-family: inherit;
  font-weight: 400; font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px; white-space: nowrap;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out),
              border-color var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
/* „Priimti visus“ and „Tik būtini“: one box, so neither choice is the bigger one (EN included) */
.consent__actions .consent__btn { width: 200px; padding: 0 16px; }
.consent__btn:hover, .consent__btn:focus-visible {   /* ASSETS 452:4469, as `.confirm__btn` */
  border-color: var(--ink-hover); background: var(--ink-hover); color: var(--cream); transform: translateY(var(--lift));
}
.consent__btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.consent__more {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--accent); font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-tint) var(--ease-out);
}
.consent__more:hover, .consent__more:focus-visible { color: var(--ink-hover); }
.consent__more:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.consent__close {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--accent);
  transition: color var(--t-tint) var(--ease-out);
}
.consent__close[hidden] { display: none; }
.consent__close::before, .consent__close::after {  /* the overlays' 16px × in 1px strokes */
  content: ""; position: absolute; left: 12px; top: 19.5px; width: 16px; height: 1px;
  background: currentColor; transform: rotate(45deg);
}
.consent__close::after { transform: rotate(-45deg); }
.consent__close:hover, .consent__close:focus-visible { color: var(--ink-hover); }
.consent__close:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }

/* the per-category switches: „Nustatymai“ (JS) or `:target` (JS off) */
.consent__settings {
  grid-area: settings; display: none; margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start;
}
.consent.is-settings .consent__settings, .consent:target .consent__settings { display: grid; }
.consent__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  min-height: 40px; padding: 12px 0; border-top: 1px solid var(--sand);
  font-size: 14px; line-height: 18.2px;
}
label.consent__row { cursor: pointer; }
.consent__name { grid-column: 1; grid-row: 1; color: var(--ink); font-weight: 500; }
.consent__desc { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; color: var(--ink); }
.consent__on, .consent__switch { grid-column: 2; grid-row: 1; }
.consent__on { color: var(--accent); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }
.consent__switch {                                /* a native checkbox drawn as a switch */
  appearance: none; position: relative; width: 36px; height: 20px; margin: 0; flex: none;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--cream); cursor: pointer;
  transition: background-color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.consent__switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); transition: transform var(--t-move) var(--ease-out), background-color var(--t-tint) var(--ease-out);
}
.consent__switch:checked { background: var(--accent); }
.consent__switch:checked::before { background: var(--cream); transform: translateX(16px); }
.consent__switch:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.consent__settings > .consent__btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

/* ≤767: the 360 sheet — 16 off the sides and the bottom, actions stacked full width, and a
   card that scrolls inside itself so the open settings fit a 360x640 phone */
@media (max-width: 767px) {
  .consent {
    left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px 16px 16px;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "settings" "actions";
    /* under the header (z 50) AND the 40px announcement band above it at the top of the page,
       16 clear of both: the open settings scroll inside the card */
    max-height: calc(100dvh / var(--canvas-zoom, 1) - var(--header-h) - 40px - 32px); overflow-y: auto; overscroll-behavior: contain;
  }
  .consent__title { padding-right: 32px; font-size: 18px; line-height: 23.4px; letter-spacing: 1.8px; }
  .consent__text a { position: relative; }
  .consent__text a::before { content: ""; position: absolute; inset: -11px -2px; }   /* 18.2 → 40 */
  .consent__actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px; }
  .consent__btn, .consent__actions .consent__btn { width: 100%; min-width: 0; }
  .consent__more { justify-content: center; min-height: 40px; }
  .consent__settings { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .consent__settings > .consent__btn { justify-self: stretch; }
}