/* Cart page — frame `Krepšelis FULL` (347:10013), canvas 1728x1823. Offsets are
   frame-absolute values from design/figma-cache/frames/krepselis-full.json; the section
   starts at the header bottom (y72). Text tops are ink tops (Figma cap-trims).
   Rows are in flow (pitch 178) so the blocks below follow the real line count. */

.cart { position: relative; padding-bottom: 0; }

.crumbs {                                             /* Frame 75 @294,88 — 12/15.6 */
  position: absolute; left: 294px; top: 16px; height: 16px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--muted); }
.crumbs img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

.cart__title {                                        /* 375:3839 @295,144 — 32/41.7 ls3.2 */
  position: absolute; left: 295px; top: 63.4px; margin: 0;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}

/* ---- Column heads @206 and the rule @222 ---- */
.cart__cols {
  position: absolute; left: 0; right: 0; top: 131.4px; height: 15.62px;
  text-transform: uppercase; color: var(--accent);
  font-weight: 500; font-size: 12px; line-height: 15.62px;
}
.cart__cols p { position: absolute; top: 0; margin: 0; line-height: 15.62px; }
.cart__cols p:nth-child(1) { left: 295px; }
.cart__cols p:nth-child(2) { left: 806px; }
.cart__cols p:nth-child(3) { left: 1058px; }
.cart__cols p:nth-child(4) { left: 1401px; }

.cart-list { margin: 0; padding: 150px 0 0; }         /* first rule at y222 */

/* ---- One line: 178px tall (194 with a variant row), rule on top
       (Vector 48/49/50 @222/400/594 — a ::before so the row's own offsets stay exact) ---- */
.cart-row { position: relative; height: 178px; }
.cart-row:has(.cart-row__variant) { height: 194px; }
.cart-row::before, .cart-bottom::before {
  content: ""; position: absolute; left: 294px; top: 0; width: 1140px; height: 1px;
  background: var(--shell);
}
.cart-row__media {                                    /* Rectangle 10 @295,246 — 130x130 */
  position: absolute; left: 295px; top: 24px; width: 130px; height: 130px;
  background: var(--shell); overflow: hidden;
}
.cart-row__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-move) var(--ease-out); }
.cart-row__media:hover img { transform: scale(var(--zoom)); }

.cart-row__body {                                     /* Group 5549 @457,293 — centred block */
  position: absolute; left: 457px; top: 67.2px; width: 211px;   /* name ink @+71 */
}
.cart-row:has(.cart-row__variant) .cart-row__body { top: 55.2px; }   /* name ink @+59 */
.cart-row__body > * { margin: 0; }
.cart-row__name {                                     /* 16/20.8 ls1.6 UPPER */
  text-transform: uppercase; color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 20.83px; letter-spacing: 1.6px;
  height: 20.83px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;   /* one line */
}
.cart-row__name a { transition: color var(--t-tint) var(--ease-out); }
.cart-row__name a:hover { color: var(--accent); }
.cart-row__brand {                                    /* 375:3855 @457,320 — 12/15.6 w500 */
  margin-top: 7.34px; text-transform: uppercase; color: var(--accent);
  font-weight: 500; font-size: 12px; line-height: 15.62px;
}
.cart-row__variant {                                  /* Group 5642 @458,508 — swatch + name */
  margin-top: 8.98px; height: 13px; display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-weight: 400; font-size: 12px; line-height: 13px;
}
.cart-row__swatch {
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--sand); flex: none;
}

.cart-row__unit, .cart-row__total {                   /* @806,305 and @1396,305 — 16/20.8 */
  position: absolute; top: 79.2px; margin: 0; color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 20.83px;
}
.cart-row__unit { left: 806px; }
/* right-flush on the 1434 column like SUMA (375:3895): €120 @1396 and €140 @1405 both end there,
   and a longer price (€15,99) no longer runs 12px past it */
.cart-row__total { right: 294px; text-align: right; }
.cart-row__total span { display: block; transition: opacity var(--t-tint) var(--ease-out); }
.cart-row__total s {                                  /* 375:3878 @1405,485 — 12/15.6 */
  display: block; margin: 11.4px 0 0; color: var(--danger);
  font-weight: 400; font-size: 12px; line-height: 15.62px; text-decoration-thickness: 1px;
}
.cart-row--sale .cart-row__total { top: 54.2px; }     /* two-line block @1396,458 */
.cart-row.is-busy .cart-row__total span { opacity: .25; }

:where(.cart) .qty {                                                /* Group 4393 @1058,293 — 110x35 r40 */
  position: absolute; left: 1058px; top: 71px; width: 110px; height: 35px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  border: 1px solid var(--shell); border-radius: 40px;
  transition: border-color var(--t-tint) var(--ease-out);
}
:where(.cart) .qty:hover { border-color: var(--accent); }
:where(.cart) .qty__btn {
  width: 16px; height: 100%; color: var(--ink); font-size: 16px; line-height: 1;
  transition: color var(--t-tint) var(--ease-out);
}
:where(.cart) .qty__btn:hover { color: var(--accent); }
:where(.cart) .qty__value {                                         /* 375:3847 @1110,305 — 16/20.8 ls1.6 */
  font-weight: 500; font-size: 16px; line-height: 20.83px; letter-spacing: 1.6px;
  color: var(--ink); text-align: center; min-width: 8px;
}
.cart-row__del { position: absolute; left: 1422px; top: 109px; }   /* Delete @1422,331 */
.cart-row__del button {
  width: 12px; height: 12px; display: block; transition: opacity var(--t-tint) var(--ease-out);
}
.cart-row__del button:hover { opacity: .55; }
.cart-row__del img { width: 12px; height: 12px; }

/* Removal: the row collapses instead of vanishing (no frame — DEVIATIONS.md). */
.cart-row { transition: height var(--t-move) var(--ease-out), opacity var(--t-tint) var(--ease-out); }
.cart-row.is-removing { opacity: 0; }
.cart-row.is-removing::before { opacity: 0; }

/* ---- Everything below the last rule (origin = y594) ---- */
.cart-bottom { position: relative; height: 475px; }

:where(.cart) .cart-recs { position: static; margin: 0; padding: 0; min-height: 0; }
:where(.cart) .cart-recs__title {                                   /* 375:3914 @295,636 — 14/18.2 ls1.4 */
  position: absolute; left: 295px; top: 37.8px; margin: 0;
  text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 14px; line-height: 18.23px; letter-spacing: 1.4px;
}
:where(.cart) .cart-recs__nav { position: absolute; left: 820px; right: auto; top: 40px; display: flex; gap: 4px; }
:where(.cart) .cart-recs__arrow {
  width: 14px; height: 14px; display: grid; place-items: center;
  border: 1px solid var(--sand); border-radius: 50%;
  transition: opacity var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
:where(.cart) .cart-recs__arrow:is(:hover, :focus-visible) { opacity: .6; border-color: var(--accent); }
:where(.cart) .cart-recs__arrow img { width: 5px; height: 7px; }
:where(.cart) .cart-recs__list {                                    /* cards @295/488/683 — 169 wide, pitch 193/195;
                                                         the strip ends with card 3 @852 */
  position: absolute; left: 295px; top: 76px; width: 557px; margin: 0;
  display: flex; align-items: stretch; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
}
:where(.cart) .cart-recs__list::-webkit-scrollbar { display: none; }
/* comment 35: the card is a flow at the comp's cap-to-cap rhythm (name 897-925 → 16 → price
   941-949 → 16 → button 965), so a one-line name no longer leaves the price floating.
   V17: the cards stretch to the row's tallest and the button takes the slack, so a name that
   wraps to two lines (only at a zoomed width, or a long one) no longer drops its button below
   its neighbours' — the price stays 16 under its own name. */
.crec { position: relative; width: 169px; flex: none; display: flex; flex-direction: column; }
.crec:nth-child(3) { margin-left: 2px; }   /* comp pitch 193, 195 */
.crec p, .crec form { margin: 0; }
.crec__img { display: block; width: 169px; height: 187px; object-fit: cover; background: var(--shell);
  transition: opacity var(--t-tint) var(--ease-out); }
.crec:hover .crec__img { opacity: .88; }
.crec .crec__brand {                                  /* @295,873 — 12/15.6 w500 UPPER */
  margin-top: 13.4px; text-transform: uppercase; color: var(--accent);
  font-weight: 500; font-size: 12px; line-height: 15.62px;
}
.crec .crec__name {                                   /* @295,897 — 14/18 UPPER, 2 lines */
  margin-top: 6.78px; width: 169px; text-transform: uppercase; color: var(--ink);
  font-weight: 400; font-size: 14px; line-height: 18px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.crec .crec__price {                                  /* @295,941 — 12/18 w300 */
  margin-top: 7.6px; color: var(--ink);
  font-weight: 300; font-size: 12px; line-height: 18px;
}
.crec form { margin-top: auto; padding-top: 10.6px; }
.crec__add {                                          /* Frame 8 @295,965 — 169x24 r40 */
  width: 169px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sand); border-radius: 40px; color: var(--accent);
  text-transform: uppercase; font-weight: 500; font-size: 12px; line-height: 15.62px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out),
    border-color var(--t-tint) var(--ease-out);
}
.crec__add:hover, .crec__add:focus-visible {                         /* ASSETS Frame 8 → 5565 */
  background: var(--ink-hover); border-color: var(--ink-hover); color: var(--cream); }

/* ---- Summary column @1070, 364 wide ---- */
.cart-sum { position: absolute; left: 1070px; top: 0; width: 364px; }
.cart-disc { position: absolute; top: 0; left: 0; width: 364px; }
.cart-disc__title {                                   /* 421:4959 @1070,634 — 16/20.8 ls1.6 */
  position: absolute; top: 36.2px; margin: 0; width: 364px;
  text-transform: uppercase; color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 20.83px; letter-spacing: 1.6px;
}
/* Frame 5564 @1070,661 — 251x50: the one input (`.fld`, css/app.css); the comp's stroke is
   the sheet's #d4c5b5 (421:4957), so the field is the component unchanged, only placed */
.cart-disc__field { position: absolute; top: 67px; left: 0; width: 251px; }
/* comment 33: a refused code paints the field and its message in the error colour —
   `pamirstas-slaptazodis` 369:5252's state (`.fld--error`), switched by cart.js */
.cart-disc.is-error .cart-disc__field .fld__input { border-color: var(--danger); color: var(--danger); font-weight: 400; }
.cart-disc.is-error .cart-disc__field .fld__label { color: var(--danger); }
.cart-disc.is-error .cart-disc__msg { color: var(--danger); font-weight: 400; }
.cart-disc__apply {                                   /* Frame 5563 @1337,661 — 97x50 r40 */
  position: absolute; top: 67px; left: 267px; width: 97px; height: 50px; border: 0;
  border-radius: 40px; background: #1e1e1e; color: var(--cream); cursor: pointer;
  text-transform: uppercase; font: inherit; font-weight: 500; font-size: 14px;
  line-height: 18.23px; transition: background var(--t-tint) var(--ease-out);
}
.cart-disc__apply:hover, .cart-disc__apply:focus-visible { background: var(--ink-hover); }   /* ASSETS 452:4464 */
.cart-disc__msg {                                     /* the chip's band @1070,719 — 26px */
  position: absolute; top: 124px; left: 0; margin: 0; width: 364px;
  font-weight: 300; font-size: 12px; line-height: 18px; color: var(--muted);
}
.cart-disc__clear {                                   /* only shown once a code applies */
  padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.cart-sum__rule {                                     /* Vector 52 @1070,769 */
  position: absolute; top: 175px; left: 0; width: 364px; margin: 0;
  border: 0; border-top: 1px solid var(--shell);
}
:where(.cart) .cart-ship { position: absolute; top: 0; left: 0; width: 364px; }
:where(.cart) .cart-ship__lead {                                    /* 421:4968 @1070,793 — 16/20.8 ls1.6 */
  position: absolute; top: 195.2px; margin: 0; width: 364px;
  text-transform: uppercase; color: var(--accent);
  font-weight: 300; font-size: 16px; line-height: 20.83px; letter-spacing: 1.6px;
}
:where(.cart) .cart-ship__bar {                                     /* Group 4424 @1070,811 — 363.6x6 r24 */
  position: absolute; top: 217px; width: 363.6px; height: 6px;
  border-radius: 24px; background: var(--shell); overflow: hidden;
}
:where(.cart) .cart-ship__bar span {
  display: block; height: 6px; border-radius: 24px; background: var(--accent);
  transition: width var(--t-move) var(--ease-out);
}
:where(.cart) .cart-ship__note {                                    /* 421:4964 @1070,827 — 10/18 w300 */
  position: absolute; top: 228px; margin: 0; width: 364px; color: var(--ink);
  font-weight: 300; font-size: 10px; line-height: 18px;
}
.cart-sum__label, .cart-sum__value {                  /* @1070,866 and @1395,866 — 16/20.8 */
  position: absolute; top: 268.2px; margin: 0; color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 20.83px;
}
.cart-sum__label { left: 0; width: 194px; text-transform: uppercase; letter-spacing: 1.6px; }
.cart-sum__value { right: 1px; text-align: right; }   /* ends @1433 — a longer sum grows left */
.cart-sum__cta {                                      /* Frame 4 @1070,901 — 363x47 r40 */
  position: absolute; top: 307px; width: 363px; height: 47px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cream); border-radius: 40px;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.cart-sum__cta:hover, .cart-sum__cta:focus-visible { background: var(--ink-hover); }

/* ---- Closing band: Group 5436 @-1,1069 — full bleed 1728x394 ---- */
.cart-band { position: relative; height: 394px; overflow: hidden; }
.cart-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cart-band::after { content: ""; position: absolute; inset: 0; background: rgba(44, 36, 32, .5); }
.cart-band p { position: relative; z-index: 1; margin: 0; color: var(--cream); text-align: center; }
.cart-band__title {                                   /* 428:4654 @535,1212 — Cormorant 80/72 */
  padding-top: 143px; font-family: var(--font-display);
  font-weight: 500; font-size: 80px; line-height: 72px;
}
.cart-band__title span { display: inline-block; }     /* the line box, for measurement */
.cart-band__sub {                                     /* 428:4655 @626,1308 — 16/20.8 ls3.2 */
  margin-top: 21.2px !important; font-weight: 400; font-size: 16px; line-height: 20.83px;
  letter-spacing: 3.2px;
}

/* ---- Empty cart: no frame in the file (DEVIATIONS.md). Scoped to the page: the drawer
       renders the same class names and must keep its own centred layout. ---- */
.cart--empty { height: 800px; }
.cart--empty .cart-empty__lead {
  position: absolute; left: 295px; top: 150px; margin: 0; color: var(--ink);
  font-weight: 300; font-size: 16px; line-height: 20.83px; letter-spacing: 1.6px;
}
.cart--empty .cart-empty__recs {
  position: absolute; left: 295px; top: 320px; width: 1138px;
}
.cart--empty .cart-empty__cta {
  position: absolute; left: 295px; top: 200px; width: 364px; height: 47px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cream); border-radius: 40px;
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.23px;
  transition: background-color var(--t-tint) var(--ease-out);
}
.cart--empty .cart-empty__cta:hover, .cart--empty .cart-empty__cta:focus-visible { background: var(--ink-hover); }

/* ---- Mobile: no full-cart frame; `Mini krepselis - mobile` (428:6103) conventions:
       16px gutter, 70px thumb, 110x35 qty pill (DEVIATIONS.md). ---- */
@media (max-width: 767px) {
  .crumbs { left: 16px; top: 16px; }
  .cart__title { left: 16px; top: 47.2px; font-size: 24px; line-height: 31.25px; letter-spacing: 2.4px; }
  .cart__cols { display: none; }
  .cart-list { padding-top: 108px; }
  .cart-row, .cart-row:has(.cart-row__variant) { height: auto; min-height: 118px; padding: 16px 16px 16px 102px; }
  .cart-row::before, .cart-bottom::before { left: 16px; width: calc(100% - 32px); }
  .cart-row__body, .cart-row:has(.cart-row__variant) .cart-row__body { position: static; top: auto; width: auto; }
  .cart-row__media { left: 16px; top: 16px; width: 70px; height: 70px; }
  .cart-row__name {                       /* stops 64px short of the absolutely placed total */
    font-size: 14px; line-height: 18.2px; letter-spacing: 1.4px; height: 18.2px; width: calc(100% - 64px);
  }
  .cart-row__brand { margin-top: 4px; }
  .cart-row__variant { margin-top: 6px; }
  .cart-row__unit { display: none; }
  :where(.cart) .qty { position: static; margin-top: 12px; }
  .cart-row__total, .cart-row--sale .cart-row__total {
    position: absolute; left: auto; right: 16px; top: 16px; text-align: right;
  }
  .cart-row__total s { margin-left: 0; }
  .cart-row__del { left: auto; right: 16px; top: auto; bottom: 24px; }
  /* the removed row collapses here too — the min-height held it at 118 and it blinked out */
  .cart-row { transition: height var(--t-move) var(--ease-out), padding var(--t-move) var(--ease-out),
    opacity var(--t-tint) var(--ease-out); }
  .cart-row.is-removing { min-height: 0; padding-block: 0; overflow: hidden; }
  /* M24: the trash and the pill's ± keep their ink; a transparent box takes the tap */
  :where(.cart) .qty__btn, .cart-row__del button, .crec__add { position: relative; }
  :where(.cart) .qty__btn::before, .cart-row__del button::before, .crec__add::before {
    content: ""; position: absolute;
  }
  :where(.cart) .qty__btn::before { inset: -3.5px -12px; }     /* 40x40 inside the 110 pill */
  .cart-row__del button::before { inset: -14px; }
  .crec__add::before { inset: -9px 0; }                    /* off the padding box, inside the stroke */
  :where(.cart) .cart-recs__list { padding-bottom: 8px; margin-bottom: -8px; }  /* it clips */
  .cart-bottom { height: auto; padding: 24px 16px 40px; }
  :where(.cart) .cart-recs { position: static; margin: 0; padding: 0; }
:where(.cart) .cart-recs__title { position: static; margin-bottom: 12px; }
  :where(.cart) .cart-recs__nav { display: none; }
  :where(.cart) .cart-recs__list { position: static; width: auto; gap: 16px; scroll-snap-type: x mandatory; }
  .crec { scroll-snap-align: start; }
  .cart-sum { position: static; width: auto; margin-top: 32px; }
  .cart-disc { position: static; width: auto; margin-bottom: 20px; }
  .cart-disc__title, .cart-disc__msg { position: static; width: auto; }
  .cart-disc__field { position: relative; top: auto; width: 100%; margin-top: 10px; }
  .cart-disc__apply { position: static; width: 100%; margin-top: 10px; height: 47px; }
  .cart-sum__rule { position: static; width: 100%; margin-bottom: 16px; }
  :where(.cart) .cart-ship { position: static; width: auto; }
  :where(.cart) .cart-ship__lead, :where(.cart) .cart-ship__note { position: static; width: auto; }
  :where(.cart) .cart-ship__bar { position: static; width: 100%; margin: 8px 0; }
  .cart-sum__label, .cart-sum__value { position: static; display: inline-block; margin-top: 24px; }
  .cart-sum__value { float: right; }
  .cart-sum__cta { position: static; width: 100%; margin-top: 16px; }
  .cart-band { height: 260px; }
  .cart-band__title { padding-top: 90px; font-size: 40px; line-height: 44px; }
  .cart-band__sub { font-size: 12px; letter-spacing: 2.4px; }
  .cart--empty { height: auto; padding-bottom: 48px; }
  .cart--empty .cart-empty__lead, .cart--empty .cart-empty__cta { left: 16px; right: 16px; width: auto; }
  /* padding, not margin: the strip is the only in-flow child, so a top margin would
     collapse through the section and land under the absolutely placed CTA */
  .cart--empty .cart-empty__recs { position: static; margin: 0 16px; padding-top: 280px; width: auto; }
}