/* Mobile layer — frame `Pagrindinis - mobile` (254:1694), canvas 360, gutter 16, content 328.
   Fluid: 328 == calc(100% - 32px). Offsets are frame-absolute values from
   design/figma-cache/frames/pagrindinis-mobile.json (status bar 0-43 excluded). */
@media (max-width: 767px) {
  /* P-01 — „Pranešti kai bus" does not fit a 360 card's pill (147 / 102 wide), so the pill
     says the PDP's sold-out word instead („Išparduota", `data-short`); it still links to the
     notify card and its aria-label still says both */
  .pcard__add--notify span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pcard__add--notify::after { content: attr(data-short); white-space: nowrap; }
  :root { --container: calc(100% - 32px); --gutter: 16px; --header-h: 58px; }
  html, body { overflow-x: clip; }
  /* The 360 canvas, scaled to the viewport the same way >=768px scales 1728 — uncapped and
     uncentred, so 375/390/414/430 render the comp pixel-exact and full-bleed stays full-bleed
     all the way to 767 (design/DEVIATIONS.md, `Responsive strategy (R5-F)`). */
  body { zoom: var(--canvas-zoom, 1); width: 360px; }
  .container { width: var(--container); }
  .mobile-only { display: initial; }
  .desktop-only { display: none; }
  br.mobile-only { display: inline; }

  /* ---- Component 16: announcement band 40px + bar 58px ---- */
  .announce {
    display: flex; align-items: flex-start; justify-content: center; height: 40px; padding-top: 16.4px;  /* cap +20 */
    background: #403632; color: var(--cream); text-transform: uppercase;
    font-weight: 300; font-size: 12px; line-height: 15.6px; letter-spacing: .6px;
  }
  .announce span { width: 328px; text-align: center; }   /* 276:937 — the comp's text box */
  .site-header { height: 58px; }
  .site-header__inner { width: 100%; padding: 0 16px; }
  .burger {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 14px; height: 14px; flex: none; padding: 0;
  }
  .burger span { display: block; height: 1px; background: var(--sand); transition: transform var(--t-move) var(--ease-out), opacity var(--t-tint) var(--ease-out); }
  .site-header__logo { width: 91px; height: 22px; margin-left: 24px; }          /* 54 - 16 - 14 */
  .site-header__logo img { width: 91px; height: 22px; }
  .site-nav { display: none; }
  .site-header__actions { height: 14px; margin-top: 0; align-self: center; gap: 24px; }   /* 293 -> 331 */
  /* 254:1748 — the mobile bar draws its OWN 14x14 search glyph, not the 18x18 one scaled */
  .site-header__actions .icon-btn:nth-child(1) img {
    content: url("../img/icons/icon-search-mobile.svg"); width: 14px; height: 14px;
  }
  .site-header__actions .icon-btn--desktop, .acct-menu { display: none; }   /* no 360 comp draws them */
  .site-header__actions .icon-btn:nth-child(2) { margin-left: 0; }
  .cart-pill { height: 14px; padding: 0; background: none; border-radius: 0; gap: 0; position: relative; }
  .cart-pill img { content: url("../img/icons/icon-bag-mobile.svg"); width: 13px; height: 14px; }   /* 276:947 — 12.49x14 */
  .cart-pill span {
    position: absolute; top: -8px; right: -10px; min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px; background: var(--accent); color: var(--cream);
    font-size: 9px; line-height: 14px; text-align: center; font-weight: 500;
  }
  .cart-pill span[data-cart-count="0"], .cart-pill span:empty { display: none; }
  /* M1/M4 — tap areas. The comp's glyphs stay 14/13px; an invisible ::before grows each HIT box
     to 40x40 inside the 58px bar (bar y 0-58 → boxes 9-49). Search 293-307 and bag 331-344 sit
     24px apart, so their boxes split that gap and meet at x319 instead of overlapping. */
  .burger, .site-header__logo, .site-header__actions .icon-btn { position: relative; }
  .burger::before, .site-header__logo::before, .site-header__actions .icon-btn::before,
  .cart-pill::before { content: ""; position: absolute; }
  .burger::before { inset: -13px; }                                  /* 3-43: logo starts at 54 */
  .site-header__logo::before { inset: -9px 0; }                      /* 91x22 → 91x40 */
  .site-header__actions .icon-btn::before { inset: -13px -12px -13px -15px; }   /* 278-319 */
  .cart-pill::before { inset: -13px -15px -13px -12px; }                       /* 319-359 */

  /* ---- Hero: 360x602 @141; scrim @+48 h554 .7; title cap @+392; sub @+428; buttons stacked ---- */
  .hero { height: 602px; }
  .hero__scrim { top: 48px; height: 554px; }
  .hero__inner { padding-top: 378px; }            /* cap top 392: 48px line, 20px cap -> +14 */
  /* balance: a two-line title (EN) splits evenly instead of orphaning its last word (V10) */
  .hero__title { font-size: 32px; line-height: 48px; white-space: normal; text-wrap: balance; }
  .hero__sub { font-size: 14px; line-height: 18.2px; margin-top: -2.2px; }   /* cap 428 -> line 423.8 */
  .hero__cta { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 20px; }  /* 462 */
  /* Frame 2 254:1765 hugs its label (125 + 2x24 = 173): a fixed 173 left no slack under the
     zoom's rounding and wrapped at 375-414 (V6), so both pills hug and never wrap; the
     min-width keeps the comp's box where our advance runs a few px short. */
  .hero__cta .btn--solid { min-width: 173px; }
  .hero__cta .btn { height: 42px; padding: 16px 24px; font-size: 14px; line-height: 18.2px;
                    white-space: nowrap; }

  /* ---- USP: Group 5390 — 58px, single centred line, cycled by JS ---- */
  .usp { height: 58px; }
  .usp__list { width: 100%; display: grid; letter-spacing: 0; justify-items: center; }
  .usp__list li { grid-area: 1 / 1; width: auto !important; opacity: 0; }
  .usp__list li.is-current { opacity: 1; }
  .no-js .usp__list li:first-child { opacity: 1; }

  /* ---- Tiles: Group 5418 — 2 x 2 of 180x257, bottom scrim only ---- */
  .tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 257px; height: auto; margin-top: 0; }
  .tile__scrim--top { display: none; }
  .tile__scrim--bottom { top: 132px; height: 125px; }
  .tile__title { transform: none; left: 16px; top: 211.2px; width: auto; right: 56px; font-weight: 400; font-size: 16px; line-height: 20.8px; }  /* cap 216 */
  .tile__go { right: 16px; top: 208px; width: 24px; height: 25px; border-radius: 16px; }
  .tile__go img { content: url("../img/icons/icon-chevron-right-cream-mobile.svg"); width: 5px; height: 8px; }   /* Vector 42 276:1394 — 3.5x7 path + .54 stroke */

  /* ---- Collections: Group 5480 — h2 18px @+40; tabs; peeking card carousel; left dots ---- */
  .collections { padding-top: 35.6px; }             /* cap 1355 */
  .t-section { font-size: 18px; line-height: 23.4px; letter-spacing: 1.8px; }
  .section-head__title { margin-top: 0; }
  .collections .section-head .btn-pill { display: none; }
  /* M11: each tab is 13px taller at the top (a 40px tap target) and the strip starts 13px
     higher, so the labels and the ink line stay where the comp draws them */
  .tabs { gap: 32px; margin-top: 16.8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 0; }   /* cap 1408 */
  .tabs::-webkit-scrollbar { display: none; }
  /* the strip is wider than the phone (587 vs 328) — fade the right edge so it reads as
     scrollable; JS drops the mask once the strip is scrolled to its end */
  .js .tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .js .tabs.is-scroll-end { mask-image: none; }
  .tab { font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px; padding: 13px 0 8px; }
  .tab.is-active { font-weight: 300; }
  .tabs .tab:nth-child(n) { width: auto; }
  /* the strip overflows, so the pinned first tab needs flex:none or it shrinks to its ink */
  .tabs .tab:nth-child(1) { width: 57px; flex: none; }   /* 323:1003 — tab 2 lands on the comp */
  .collections .carousel { margin-top: 11px; margin-inline: -16px; }
  .pgrid { gap: 16px; padding: 0 16px; scroll-padding-left: 16px; }
  .pcard { width: 242px; height: 472px; padding: 0; }
  .pcard__badge { left: 16px; top: 16px; }
  .pcard__wish { right: 18px; top: 19px; }
  /* M11: invisible 40x40 hit boxes around the comp's small controls — the painted glyphs keep
     their size. Hearts: 18x16 → 40x40, stopping where the photo starts (+47). Dots: 40 tall,
     only as wide as the gap allows, so neighbours never share a tap. */
  .pcard__wish::before, .fcard__wish::before { content: ""; position: absolute; }   /* sized per grid */
  .pgrid .pcard__wish::before, .wish-grid .pcard__wish::before, .fcard__wish::before { inset: -13px -11px -11px; }
  .collections .dots .dot, .best .dots .dot { position: relative; }
  .collections .dots .dot::before, .best .dots .dot::before { content: ""; position: absolute; inset: -16px -3px; }
  .pcard__media { margin: 47px 8px 0; }
  .pcard__media img { width: 226px; height: 249px; }
  .pcard__media img[src*="fill-666effd14cf92151"] { object-view-box: inset(14.89% 19.19% 15.02% 19.21%); }
  .pcard__brand { margin: 13.4px 16px 0; }          /* cap +312 */
  .pcard__name { margin: 4.4px 16px 0; }            /* cap +332 */
  .pcard__summary { margin: 4.6px 16px 0; }         /* cap +355 */
  .pcard__row { margin: 7.6px 16px 0; }             /* price cap +381 */
  .pcard__actions { margin: 13.8px 16px 0; gap: 16px; }   /* +409 */
  .pcard__add { width: 147px; }
  .dots { margin: 16px 0 0; }
  .dots.dots--lg { margin-inline: auto; }

  /* ---- Quote: 360x221, text 24/32 centred, 2 lines @+82 ---- */
  .quote { height: 221px; margin-top: 40px; }
  .quote .container { padding-top: 82px; width: 312px; }
  .quote__text { white-space: normal; font-size: 24px; line-height: 32px; text-align: center; }
  /* 254:2046 — STRETCH crop of the same photo: x 12.518%, width 38.518% of the source, full
     height. That crop has the box's own 360:221 ratio, so it IS `cover` (height-bound) slid to
     x = 12.518 / (100 - 38.518) = 20.36% — no object-view-box, which Firefox and Safari < 26
     ignore and then stretched the whole 1920x454 band into the box (M6) */
  .quote__bg { object-position: 20.36% 0; }
  /* an uploaded phone photo (home.quote_bg_mobile) is its own crop */
  picture > .quote__bg { object-position: 50% 50%; }

  /* ---- Bestsellers: Group 5420 — centred h2; full-bleed 360x606 card; 254px image below ---- */
  .best { padding-top: 34.6px; }                    /* cap 2239 */
  .best__title { text-align: center; }
  .best__body { flex-direction: column; margin-top: 18.6px; }   /* card top 2276 */
  .best__left { width: 100%; margin-left: 0; height: 606px; }
  .best__nav { display: none; }
  .fcard-stage { left: 0; top: 0; width: 100%; height: 606px; }
  .fcard { width: 100%; height: 606px; padding: 0; }
  .fcard__badge { left: 24px; top: 16px; }
  .fcard__wish { right: 24px; top: 20px; }
  .fcard__video { display: none; }  /* the mobile stage has no hover */
  .fcard__media { width: calc(100% - 48px); height: 343px; object-fit: cover; margin: 47px 24px 0; }
  .fcard__info { width: auto; margin: 0; text-align: left; }
  .fcard__brand { margin: 5.4px 24px 0; }           /* cap +398 */
  .fcard__name { margin: 4.4px 24px 0; }            /* +418 */
  .fcard__summary { margin: 4.6px 24px 0; }         /* +441 */
  .fcard__row { margin: 7px 24px 0; justify-content: space-between; gap: 0; }   /* price cap 2700 */
  .fcard__price { font-size: 14px; line-height: 18.2px; font-weight: 400; }
  .fcard__actions { margin: 13.8px 24px 0; gap: 16px; }
  .fcard__actions form { flex: 1; }
  .fcard__add { width: 100%; }
  /* M8: the 606px card (z 2) covers the dots, which the comp draws ON the card */
  .best__left .dots { top: 558.4px; gap: 6.4px; z-index: 3; }        /* Group 5347 @154,2791 */
  .best__left .dots .dot { width: 8px; height: 8px; }
  .best__right { height: 254px; flex: none; }

  /* ---- Quiz: Group 5429 — image 328x228 over panel 360x344 ---- */
  .quiz { height: 456px; margin-top: 40px; }
  .quiz__img { left: 16px; top: 0; width: calc(100% - 32px); height: 228px; }
  .quiz__panel { left: 0; top: 112px; }
  .quiz__copy { left: 16px; right: 16px; top: 134px; width: auto; }     /* title cap 148 */
  .quiz__title { font-size: 32px; line-height: 48px; width: auto; white-space: normal; }
  .quiz__text { font-size: 14px; line-height: 18.2px; letter-spacing: .7px; margin-top: 5.9px; }    /* cap +192 */
  .quiz__cta { height: 42px; padding: 16px 24px; font-size: 14px; line-height: 18.2px; margin-top: 19.6px; }

  /* ---- Editorial: Group 5398 ---- */
  .editorial { padding-top: 35.8px; }               /* eyebrow cap 3672 */
  /* 276:1233 / 324:1349 — the comp centres the eyebrow and the CTA on x175.5, not on the
     title's and the text's 180 */
  .editorial__eyebrow { font-size: 14px; line-height: 18.2px; letter-spacing: 2.8px; position: relative; left: -4.5px; }
  .editorial__title { font-size: 24px; line-height: 48px; white-space: normal; width: auto; margin-top: -4px; }    /* cap 3698 */
  .editorial__img { width: 100%; height: 178px; margin-top: 7px; }       /* 3737 */
  .editorial__text { width: 100%; font-size: 14px; line-height: 22px; margin-top: 17.9px;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }   /* the comp truncates at 5 lines */
  .editorial__cta { width: 104px; height: 42px; padding: 16px 24px; font-weight: 400; border-radius: 56px; margin-top: 18.5px; position: relative; left: -4.5px; }

  /* ---- Blog: Group 5424 — white 360x510; rows of 120px thumb + text ---- */
  .blog { padding: 40px 0 0; margin-top: 40px; min-height: 510px; }
  .blog .section-head { align-items: flex-start; }
  .blog .section-head__title { margin-top: -5.4px; }
  .blog .btn-pill { width: auto; height: auto; padding: 0; border: 0; font-weight: 300; font-size: 12px; line-height: 15.6px; margin-top: 3.6px; }
  .blog .btn-pill { text-decoration: underline; text-decoration-color: transparent; }
  .blog .btn-pill:hover, .blog .btn-pill:focus-visible { background: none; color: var(--accent); text-decoration-color: currentColor; }
  .blog .btn-pill { position: relative; }   /* M11: 16px link → 40px tap target, ink unchanged */
  .blog .btn-pill::before { content: ""; position: absolute; inset: -12px 0; }
  .blog .carousel { margin-top: 19px; overflow: visible; }
  .blog__grid { flex-direction: column; gap: 17px; overflow: visible; }
  .bcard { display: flex; gap: 16px; width: 100%; }
  .bcard__media { flex: none; }
  .bcard img { width: 120px; height: 120px; }
  .bcard__body { min-width: 0; }
  .bcard__cat { font-size: 10px; line-height: 13px; margin-top: 12px; }     /* cap +15 */
  .bcard__title { font-size: 16px; line-height: 20.8px; font-weight: 400; margin-top: 5.2px; }   /* cap +34 */
  .bcard__excerpt { margin-top: 2.4px; height: 3lh; -webkit-line-clamp: 3; }   /* cap +61; 192x44 = 3 lines */
  .bcard:nth-child(n+4) { display: none; }
  .blog .dots { display: none; }

  /* ---- Newsletter: Group 5431 — 360x329, dark overlay .8, stacked field + button ---- */
  .nl { height: 329px; }
  .nl__bg { filter: none; }
  /* 276:1271 — the dark scrim sits ON the photo (both are absolutely positioned) */
  .nl::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(44, 36, 32, .8); }
  .nl__inner { width: var(--container); padding-top: 20px; z-index: 2; }   /* cap 4693 */
  .nl__title { font-size: 24px; line-height: 56px; text-align: center; }
  .nl__sub { font-size: 14px; line-height: 18.2px; letter-spacing: 0; margin-top: -1.2px; }   /* cap 4732 */
  .nl__sub br { display: none; }
  .nl__field { flex-wrap: wrap; height: auto; border: 0; border-radius: 0; margin-top: 27.8px; gap: 16px; }
  .nl__field input { width: 100%; height: 50px; border: 1px solid var(--cream); border-radius: 40px; text-align: center; font-weight: 400; }
  .nl__field button { width: 100%; height: 42px; background: var(--cream); font-size: 14px; line-height: 18.2px; }
  .nl__consent { margin-top: 24px; font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px; gap: 14px; }   /* 16 - the box's 2 */
  .nl__consent input { margin: 0; }   /* 276:1265 @16 — the UA checkbox margin (3 3 3 4) pushed it to 20,+3 */

  /* ---- Footer: Component 15 — 360x700 accordion ---- */
  .site-footer { padding-top: 40.7px; }             /* cap 5021 */
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__cols > nav:first-child { padding-left: 0; }
  .fcol__toggle { pointer-events: auto; width: 100%; justify-content: space-between; }
  .fcol__toggle img { display: block; position: relative; top: -2.43px;         /* Vector 43 @4976 */
    transition: transform var(--t-move) var(--ease-out); }
  /* Vector 42 @5072 points up: its ink sits 0.5 under the label cap, Vector 43's 2.5 above it — the
     turn alone lands the open one 1.5 high (ink-measured against the @2x render) */
  .fcol[data-open] .fcol__toggle img { transform: translateY(1.5px) rotate(180deg); }
  .site-footer__label { margin: 0; padding-bottom: 31.8px; }   /* label pitch 50 */
  .fcol .site-footer__label { position: relative; top: -5.87px; }   /* cap tops 4978/5028 */
  .fcol__list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-move) var(--ease-out); }
  .fcol__list > * { overflow: hidden; }
  .fcol__list { overflow: hidden; }
  .fcol[data-open] .fcol__list { grid-template-rows: 1fr; }
  .js .fcol__list { display: block; max-height: 0; overflow: hidden; transition: max-height var(--t-move) var(--ease-out); }
  .js .fcol[data-open] .fcol__list { max-height: 400px; }
  /* M2/M21 — a folded list is clipped to 0 but its links were still tabbable and still laid out
     under the next toggle. Hidden once the fold has finished, shown at once on open. */
  .fcol:not([data-open]) .fcol__list { visibility: hidden; }
  .js .fcol:not([data-open]) .fcol__list {
    transition: max-height var(--t-move) var(--ease-out), visibility 0s linear var(--t-move);
  }
  .fcol[data-open] .site-footer__label { padding-bottom: 4.03px; }       /* first link cap 5105 vs label 5071 */
  .site-footer__cols li + li { margin-top: 11.8px; }   /* pitch 30 */
  .site-footer__cols a { letter-spacing: 0; }
  /* 34 (label cap → first link cap) = 5.87 (the label's lift) + 18.2 + 4.03 + 5.9; the 5.9 sits
     INSIDE the list's clip so the first link's tap area is not cut off at the top. 50 (last link
     cap → next label cap) = 18.2 + 37.67 - 5.87, the next label being lifted too */
  .fcol[data-open] .fcol__list { padding-top: 5.9px; padding-bottom: 37.67px; }
  /* M2 — footer tap areas, invisible ::before boxes; the painted rows do not move. A toggle
     grows to 40 (its neighbours are 32.8 / 16.75 / 26.9 away), a link to its 30px pitch —
     the most the comp's rhythm leaves without two links sharing a strip. */
  .js .fcol__list > * { overflow: visible; }      /* the li clip is for the no-JS grid only */
  .fcol__toggle, .fcol__list a, .lang-switch__chip, .site-footer__social a { position: relative; }
  .fcol__toggle::before, .fcol__list a::before, .lang-switch__chip::before,
  .site-footer__social a::before, .newsletter__consent::before { content: ""; position: absolute; }
  .fcol__toggle::before { inset: -12px 0 -10px; }                     /* 18.2 → 40.2 */
  .fcol__list a::before { inset: -5.9px -24px -5.9px 0; }             /* 18.2 → 30 = the pitch */
  .lang-switch__chip::before { inset: -13px -4px; }   /* flag + chevron 34.6x14 → 42.6x40 */
  .site-footer__social a::before { inset: -10px; }                    /* 20x20 → 40x40, 4px apart */
  .site-footer__cookies { position: relative; }
  .site-footer__cookies::before { content: ""; position: absolute; inset: -11px -4px; }   /* 18.2 → 40 */
  /* the consent row is a <label> holding the privacy LINK: its box goes UNDER the row's own
     content (z -1 in the label's stacking context), so the link still takes its own taps */
  .newsletter__consent { position: relative; z-index: 0; }
  .newsletter__consent::before { z-index: -1; inset: -12px 0; }       /* 16 → 40 */
  /* rule 5295 = the folded APIE label's cap + 50 (the label pitch), which lies 2.14 above the
     column's lifted box end; label cap 5335 */
  .newsletter { border-top: 1px solid rgba(139, 99, 85, .4); padding-top: 35.24px; margin-top: -2.14px; }
  .newsletter .site-footer__label { padding-bottom: 0; margin-bottom: 15.8px; }
  .newsletter__copy { letter-spacing: 0; }
  .newsletter__field { gap: 15px; }                 /* Frame 7 @301 */
  .newsletter__input { width: 270px; }              /* Rectangle 15 270x42 @16 */
  .site-footer__rule { margin-top: 39.49px; }       /* 5523 */
  .site-footer__bottom { grid-template-columns: 1fr; gap: 19.8px; padding: 19.31px 0 40px; letter-spacing: 0; }
  .site-footer__social { gap: 24px; }
  /* 519:4795 — the picker @16,5586 and the socials @228 share one row, 39px under the copyright */
  .site-footer__end { justify-content: space-between; }
}

/* ---- mini-cart, `Mini krepselis - mobile` 428:6103: full-width sheet, 16px gutter,
        70px thumb, the same 110x35 qty pill ---- */
@media (max-width: 767px) {
  .cart-drawer__panel { width: 100%; }
  .cart-drawer__head { height: 48px; padding: 14.28px 16px 0; }
  /* M25: Group 5450 428:6818 is a 16x16 cross @328,99 here, not the desktop's 10x10 */
  .cart-drawer__close { right: 16px; top: 16px; width: 16px; height: 16px; }
  .cart-drawer__close img { content: url("../img/icons/icon-close-16.svg"); width: 16px; height: 16px; }
  /* R2-07: the 360 comp is one 1060-tall sheet with the foot AFTER the recommendations, so the
     whole body scrolls — an anchored foot cut the recommendation buttons on a real phone */
  .cart-drawer__body { overflow-y: auto; overscroll-behavior: contain; }
  .cart-drawer__scroll { flex: none; overflow: visible; padding: 0 16px; }
  .cart-drawer__foot { margin-top: auto; padding: 20.16px 16px 35.42px; }   /* band 816 → cap 840, trust ink → 1060: 40 */
  /* M25 — lead cap 155, bar 181, note cap 195 (428:6758/6755/6754), each less the 83 band */
  .cart-ship__lead { margin-top: 19.8px; font-weight: 600; font-size: 14px; line-height: 18.2px; letter-spacing: 0; text-transform: none; }
  .cart-ship__lead-wide { display: none; }
  .cart-ship__lead-phone { display: inline; }
  .cart-ship__bar { margin-top: 12px; }
  .cart-ship__note { margin-top: 3.41px; font-size: 12px; }
  .cart-lines { margin-top: 18.6px; }                                  /* photo @245 (M25) */
  .cart-line { grid-template-columns: 70px 1fr; column-gap: 16px; }   /* image 70 @16, text @102 */
  .cart-line__img { width: 70px; height: 70px; }
  /* M25: the name's and the price's CAP sit on the photo's top edge (Sona3 / €120 @245), the
     struck price's cap on the brand's (€140 @272) — less DM Sans' 3.84 / 2.57 cap offsets */
  .cart-line__name { margin-top: -3.84px; padding-right: 52px; }
  .cart-line__price { top: -3.84px; }
  .cart-line__was { top: 24.43px; }
  .cart-line__row, .cart-line__variant + .cart-line__price + .cart-line__row,
  .cart-line__variant + .cart-line__price + .cart-line__was + .cart-line__row { margin-top: 11px; }   /* pill @296 */
  /* M25 — band 473 (24 under the last pill), title cap 521, photos 553, band end 816 = 40
     under the buttons (Group 5676 428:6903, Rectangle 9 @816) */
  .cart-recs { margin: 24px -16px 0; padding: 43.8px 16px 40px; height: auto; }
  .cart-recs__list { margin-top: 18px; }
  .cart-recs__nav { right: 16px; }
  /* M24: the comp's 10/12px glyphs keep their ink; a transparent box takes the tap — 40x40,
     34 wide where the edit/delete pair sits 28px apart */
  .cart-drawer :is(.cart-drawer__close, .qty__btn, .cart-line__edit, .cart-line__del,
    .rec__add, .cart-continue)::before { content: ""; position: absolute; }
  .cart-drawer :is(.qty__btn, .cart-line__edit, .cart-line__del, .rec__add, .cart-continue) {
    position: relative;
  }
  .cart-drawer__close::before { inset: -12px; }
  .cart-drawer :is(.qty__btn, .cart-line__del)::before { inset: -14px; }
  .cart-line__edit::before { inset: -14px -8px -14px -14px; }
  .cart-line__edit + .cart-line__del::before { left: -8px; }
  .cart-drawer .rec__add::before { inset: -9.5px 0; }    /* off the padding box, inside the 1px stroke */
  /* the list scrolls sideways, so it clips — room for the box under the last row */
  .cart-drawer .cart-recs__list { padding-bottom: 9px; margin-bottom: -9px; }
  .cart-drawer .cart-continue::before { inset: -11px 0; }
}

/* ---- Paieška: no 360 comp for `paieskos-rezultatai` (design/DEVIATIONS.md) — the bar
        keeps the mobile header's 16px gutter and the grid follows the listing's reflow ---- */
@media (max-width: 767px) {
  .hsearch { height: 98px; }              /* the announcement band + the 58px bar it replaces */
  /* M17: 40px tap targets, icons and text where they were — the input is 40 tall (its text
     stays centred in the bar), the 18/17px icons get padding eaten back by negative margins */
  .hsearch__input { height: 40px; margin-left: 16px; font-size: 18px; line-height: 24px; }
  .hsearch__go { margin: -11px; padding: 11px; }
  .hsearch__close { margin: -11.5px -11.5px -11.5px 4.5px; padding: 11.5px; }
  .search { padding-bottom: 64px; }
  .search__tabs { gap: 28px; padding-top: 28px; }
  .search .cat-grid, .search .cat-empty { margin-top: 24px; margin-left: 0; }
  .search .cat-grid { margin-inline: -12px; }       /* the listing's 2-up mini cards @4/@182 */
}

/* ---- Listing grids (M12): the category listing (view 4), search and favourites. The 360 file
        draws no listing; its only product grid is `quizas-rezultatai-mobile`'s (492:4346) mini
        cards — Component 19 492:4470: 174x357 @4/@182, 4px apart. Row gap = that 4px (no comp
        value; design/DEVIATIONS.md). Values = quiz.css's `.qz-mini`; each page's own sheet
        sets the margin that puts the first card at x4. ---- */
@media (max-width: 767px) {
  :is(.cat-grid--4, .wish-grid) { grid-template-columns: repeat(2, 174px); gap: 4px; justify-content: start; }
  /* visible, so the heart's hit box may reach above the card (the card itself clips nothing:
     the photo's ≤1.03 hover zoom stays inside its 8px margins) */
  :is(.cat-grid--4, .wish-grid) .pcard { width: 174px; height: 357px; padding: 0; overflow: visible; }
  :is(.cat-grid--4, .wish-grid) .pcard__badge {
    left: 8px; top: 8px; height: 16px; padding: 0 6px; border-radius: 16px;
    font-size: 8px; line-height: 10.4px; letter-spacing: .4px;
  }
  :is(.cat-grid--4, .wish-grid) .pcard__wish { right: 5px; top: 8px; width: 16px; height: 14px; }
  :is(.cat-grid--4, .wish-grid) .pcard__media { margin: 30px 0 0 8px; }
  :is(.cat-grid--4, .wish-grid) .pcard__media img { width: 158px; height: 174px; }
  :is(.cat-grid--4, .wish-grid) .pcard__brand { margin: 5px 16px 0; font-size: 10px; line-height: 13px; }
  :is(.cat-grid--4, .wish-grid) .pcard__name { margin: 4.8px 16px 0; font-size: 14px; line-height: 18.2px; }
  :is(.cat-grid--4, .wish-grid) .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;
  }
  :is(.cat-grid--4, .wish-grid) .pcard__row { margin: 4.6px 16px 0; }
  :is(.cat-grid--4, .wish-grid) .pcard__actions { margin: 8px 16px 0; gap: 8px; }
  :is(.cat-grid--4, .wish-grid) .pcard__add { position: relative; width: 102px; height: 32px; padding: 0; }
  :is(.cat-grid--4, .wish-grid) .pcard__add span {      /* Frame 4: the bag glyph alone */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  :is(.cat-grid--4, .wish-grid) .pcard__go { position: relative; width: 32px; height: 32px; }
  /* 40px hit boxes: the 32px buttons grow 4px all round (the 8px gap between them is split, the
     price row ends 8px above). The 16x14 heart's box is 40x40 ending at the photo (+30): 18px
     up (4 of row gap + 6 of the empty foot of the card above, whose buttons' boxes end 12px
     higher), 19 left, and 5 right to the card edge. */
  :is(.cat-grid--4, .wish-grid) .pcard__add::before, :is(.cat-grid--4, .wish-grid) .pcard__go::before {
    content: ""; position: absolute; inset: -4px;
  }
  :is(.cat-grid--4, .wish-grid) .pcard__wish::before { inset: -18px -5px -8px -19px; }
}

/* Outside the mobile frame there is only the 1728 canvas: scale it proportionally
   (motion.js sets --canvas-zoom) so the pixel-matched layout fills any viewport >= 768px. */
@media (min-width: 768px) {
  html { overflow-x: hidden; }
  body { zoom: var(--canvas-zoom, 1); width: 1728px; }   /* the canvas, scaled to the viewport */
}

/* iOS zoom-on-focus (M3 M10 M16 M22 M28 M30 M31). iOS Safari zooms the page into a focused field
   whose font is under 16px. Every field in the comps is 14px; WebKit's `zoom` scales the computed
   font size, so on the 360 sheet that is 14 x innerWidth/360 — 14 at 360, 15.2 at 390, 16.0 from
   412 up. This lifts a field only as far as its EFFECTIVE size needs (16.1 / zoom: 16.1 at 360,
   14.9 at 390, untouched ≥412) and only on iOS; the 18px search bar is already over. Pinch zoom
   stays enabled (no maximum-scale) — design/DEVIATIONS.md. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    input:not([type=checkbox]):not([type=radio]):not(.hsearch__input), select, textarea {
      font-size: max(14px, calc(16.1px / var(--canvas-zoom, 1))) !important;
    }
  }
}