/* ==========================================================================
   THE DESIGNERS HUB — Cart review
   Source of truth: Figma frame "корзина комп" #2278:4140 (1440 x 962).

   This frame draws its own header (0-76) and footer (742-962) rather than
   leaving them to the style guide, and both match the shared chrome — so the
   partials are used and every content coordinate below is the Figma value
   MINUS 76, putting main's origin at the bottom of the header.
   main is therefore 742 - 76 = 666 tall.

   The footer here is the SLIM variant (two columns) — see partials/
   footer-slim.html and the .site-footer--slim block in chrome.css.

   Line steps (Inter auto line-height is 1.2102em):
     h1        Inter 700 36, 1.06em -> 38px
     price     Inter 700/500 18     -> 22px
     item name Inter 600 16 UPPER   -> 19px
     qty       Inter 300/400 15     -> 18px
     row       Inter 400 14         -> 17px
     meta      Inter 400/500/600 13 -> 16px
     small     Inter 400/600 12     -> 15px
     tabby     Inter 400 11         -> 13px
     permo     Inter 400 10         -> 12px
   ========================================================================== */

.page-cart main { position: relative; }

/* Prices are catalogue-driven; keep each value on one line so a wider price like
   "3,800 AED" (or its RU/AR form) is never wrapped and clipped by its pinned box. */
.ct-item__price, .ct-line-total { white-space: nowrap; }

.ct {
  --muted:    #666666;          /* fill_6763ac18 */
  --ink-900:  #1A1A1A;          /* fill_aaa5ba5c — item name + price */
  --hairline: #E0E0E0;          /* the rule above Subtotal */
  --ph:       #A3A3A3;          /* promo placeholder */
  --tabby:    #00BC55;
}

/* --------------------------------------------------------------------------
   Flow fallback (below 1200px) — unverified reflow, desktop is the port.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .ct section { position: relative; padding: var(--space-24) var(--page-pad-mob); }
  .ct img { max-width: 100%; height: auto; }
  .ct-pattern { display: none; }
  .ct-plate { background: var(--color-surface-dark); padding: var(--space-16); }
  .ct-item, .ct-totals { background: var(--white); padding: var(--space-16); margin-bottom: var(--space-16); }
}

/* The date line is NOT on the 1440 frame — but it IS on both small ones
   (#2278:4228 at 390 and #2278:4305 at 768). Hidden by default so desktop is
   unaffected; the mobile and tablet blocks at the end each turn it on. */
.ct-item__date { display: none; }

/* --- shared type -------------------------------------------------------- */
.ct-title { font-family: var(--font-heading); font-weight: var(--fw-bold); text-transform: uppercase; }

.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-surface-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-med);
  font-size: 13px;
  line-height: 16px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.ct-btn:hover, .ct-btn:focus-visible { background: var(--black); }

.ct-btn--tabby { background: var(--tabby); }
.ct-btn--tabby:hover, .ct-btn--tabby:focus-visible { background: #00a349; }

/* Any button with a transparent background needs appearance:none, or Chrome
   keeps the native theme and paints its own grey over it. */
.ct-qty__step, .ct-remove {
  -webkit-appearance: none;
  appearance: none;
}

/* quantity stepper: a 1px white box on the dark plate */
.ct-qty__step {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 15px;
  line-height: 18px;
  cursor: pointer;
}

.ct-qty__step:hover { color: var(--gold); }

/* ==========================================================================
   DESKTOP — the 1440 Figma canvas, literal coordinates (frame y minus 76)
   ========================================================================== */
@media (min-width: 1200px) {

  .page-cart main {
    width: var(--frame-desktop);
    height: 666px;
    margin-inline: auto;
  }

  .ct section { position: absolute; left: 0; width: var(--frame-desktop); padding: 0; }
  .ct section > * { position: absolute; }
  .page-cart main img { max-width: none; object-fit: fill; }

  .ct-title, .ct-item__meta, .ct-row, .ct-tabby__note, .ct-tabby__mo { white-space: nowrap; }

  .ct-title {
    left: 80px; top: 46px; width: 252px;
    color: var(--color-text);
    font-size: var(--fs-h1);
    line-height: 38px;
  }

  /* #2278:4142 — a faint 6% white line pattern over the whole block. Its SVG
     bounding box (1272x837) is smaller than the node box because the node
     dimensions include the stroke; scaled to the node box, which is fine for
     a decorative texture at this opacity. It overflows main at the bottom and
     is painted under the footer, as in the file. */
  .ct-pattern { left: 27px; top: -95px; width: 1292.8px; height: 898.09px; }

  .ct-plate { left: 80px; top: 130px; width: 1280px; height: 498px; background: var(--color-surface-dark); }

  /* ---------------- the line item ---------------- */
  .ct-item { left: 112px; top: 163px; width: 436px; height: 166px; background: var(--white); }

  /* node render is 133x159 — the 2px stroke sits OUTSIDE the 129x155 image
     box, so this is placed at (117-2, 245-2) in frame terms */
  .ct-item__img { left: 115px; top: 167px; width: 133px; height: 159px; }

  .ct-item__name {
    left: 274px; top: 182px; width: 198px;
    color: var(--ink-900);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: var(--fs-body);
    line-height: 19px;
    text-transform: uppercase;
  }

  .ct-item__meta { left: 274px; color: var(--muted); font-size: 13px; line-height: 16px; }
  .ct-item__meta--1 { top: 225px; width: 134px; }
  .ct-item__meta--2 { top: 247px; width: 140px; }

  .ct-item__price {
    left: 274px; top: 292px; width: 92px;
    color: var(--ink-900);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lead);
    line-height: 22px;
  }

  .ct-note {
    left: 112px; top: 340px; width: 392px;
    color: var(--white);
    font-size: 13px;
    line-height: 16px;
  }

  /* ---------------- quantity + line total ---------------- */
  .ct-qty {
    left: 566px; top: 290px;
    width: 101px; height: 39px;
    border: var(--stroke-1) solid var(--white);
  }

  /* the three controls carry their own Figma x rather than being spaced */
  .ct-qty__step--minus { left: 575px; top: 301px; width: 7px; }
  .ct-qty__step--plus  { left: 649px; top: 300px; width: 10px; }

  .ct-qty__value {
    left: 613px; top: 301px; width: 7px;
    color: var(--white);
    font-size: 15px;
    line-height: 17px;
    text-align: center;
  }

  .ct-line-total {
    left: 687px; top: 298px; width: 89px;
    color: var(--white);
    font-weight: var(--fw-med);
    font-size: var(--fs-lead);
    line-height: 22px;
  }

  /* #2278:4217 — 46x38 with a 1px white edge on the left and right only */
  .ct-remove {
    left: 796px; top: 291px;
    width: 46px; height: 38px;
    padding: 0;
    background: none;
    border: 0;
    border-left: var(--stroke-1) solid var(--white);
    border-right: var(--stroke-1) solid var(--white);
    cursor: pointer;
  }

  .ct-remove img { position: absolute; left: 17px; top: 12.33px; width: 12px; height: 13.33px; }

  /* ---------------- cart totals ---------------- */
  .ct-totals { left: 955px; top: 163px; width: 372px; height: 433px; background: var(--white); }

  .ct-totals__title {
    left: 971px; top: 177px; width: 112px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    line-height: 19px;
    text-transform: uppercase;
  }

  .ct-promo__label {
    left: 971px; top: 212px; width: 78px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    font-size: 13px;
    line-height: 16px;
  }

  .ct-promo__input {
    left: 971px; top: 237px;
    width: 227px; height: 39px;
    padding: 0 0 0 9px;
    background: var(--white);
    border: var(--stroke-1) solid var(--black);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 15px;
  }

  .ct-promo__input::placeholder { color: var(--ph); opacity: 1; }

  .ct-promo__apply {
    left: 1214px; top: 237px;
    width: 98px; height: 39px;
    font-weight: var(--fw-semi);
    font-size: 12px;
    line-height: 15px;
  }

  .ct-rule { left: 971px; top: 291.5px; width: 341px; height: 1px; background: var(--hairline); }

  .ct-row { color: var(--color-text); font-size: 14px; line-height: 17px; }
  .ct-row--value { text-align: right; }

  .ct-row--subtotal   { left: 971px;  top: 308px; width: 56px; }
  .ct-row--subtotalv  { left: 1244px; top: 308px; width: 68px; }
  .ct-row--discount   { left: 971px;  top: 334px; width: 59px; }
  .ct-row--discountv  { left: 1298px; top: 334px; width: 14px; }

  .ct-checkout { left: 971px; top: 367px; width: 341px; height: 45px; }

  /* the "— or —" divider */
  .ct-or       { left: 1134px; top: 427px; width: 14px; color: var(--color-text); font-size: 14px; line-height: 17px; }
  .ct-or-dash  { color: var(--color-text); font-size: 14px; line-height: 17px; text-align: right; }
  .ct-or-dash--l { left: 1111px; top: 427px; width: 14px; }
  .ct-or-dash--r { left: 1157px; top: 427px; width: 14px; }

  .ct-applepay { left: 971px; top: 459px; width: 341px; height: 35px; }
  .ct-tabby    { left: 971px; top: 503px; width: 341px; height: 35px; }

  /* the labels and logos sit at their own Figma x, not centred in the button */
  .ct-pay__label { position: absolute; font-weight: var(--fw-med); font-size: 13px; line-height: 16px; }
  .ct-applepay .ct-pay__label { left: 119px; top: 10px; width: 54px; }
  .ct-tabby    .ct-pay__label { left: 114px; top: 10px; width: 53px; }

  .ct-pay__logo { position: absolute; }
  .ct-applepay .ct-pay__logo { left: 177px; top: 7px; width: 43px; height: 23.89px; }
  .ct-tabby    .ct-pay__logo { left: 176px; top: 10px; width: 43.84px; height: 17.47px; }

  .ct-tabby__note { left: 971px;  top: 548px; width: 179px; color: var(--muted); font-size: 11px; line-height: 13px; }
  .ct-tabby__mo   { left: 1253px; top: 548px; width: 59px;  color: var(--color-text); font-size: 10px; line-height: 12px; text-align: right; }
}

/* ==========================================================================
   MOBILE — the 390 canvas, frame "корзина моб" #2278:4220 (390 x 1358).

   FRAME IDENTITY: this is the real cart. Three frames in the file are named
   "корзина моб" and the other two (#2129:5653 / #2129:5715) are the two states
   of the SCHEDULE page, not carts. All five commerce frames were opened before
   any was built — see CLAUDE.md.

   Like the 1440 frame it draws its own chrome: a 390x81 dark header band
   (#2278:4231) at y:0 and the footer group (#2278:4273) at y:970, 385x388 at
   x:3 — which is exactly the verified mobile footer box. So main runs from the
   bottom of the header to the top of the footer and is 970 - 81 = 889, and
   every coordinate below is THE FIGMA VALUE MINUS 81.

   Stroke alignment read off node renders. Everything is INSIDE — the qty box
   #2278:4240 (1px), the promo input #2278:4251 (1px) and the remove button
   #2278:4245 ("0px 1px", i.e. side edges only) all return their declared size —
   EXCEPT #2278:4230, the item photo: declared 129x155, drawn 133x159, so it is
   OUTSIDE 2 and is placed at its stroke box with no CSS border. That is the
   same box the 1440 frame uses, so the desktop bitmap is reused unchanged.

   NO <picture> WRAPPERS ON THIS PAGE. The three photos are the same crops the
   1440 build already exports, just larger (ct-item.png is 399x477 = 3x the
   133x159 box; the Apple Pay and Tabby logos match their mobile aspect ratios
   to within 0.5%). Reusing them avoids introducing the grandchild-of-section
   problem that unpositioned nine images elsewhere.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---------------------------------------------------------------- shell */
  .page-cart main {
    position: relative;
    width: 390px;
    height: 889px;
    margin: 0;
    padding: 0;
  }

  /* the <=1199 fallback's `.ct img` is (0,1,1) and outranks a bare per-image
     rule; beaten here on source order at equal specificity */
  .ct img { max-width: none; width: auto; height: auto; object-fit: fill; }

  .ct section {
    position: absolute;
    left: 0; top: 0;
    width: 390px;
    height: 889px;
    padding: 0;
    margin: 0;
    overflow: hidden;   /* the pattern bleeds far off both edges, as in Figma */
  }
  .ct section > * { position: absolute; margin: 0; }

  /* #2278:4222 — re-shown at mobile (the fallback hides it). NOTE: this node's
     declared box (1292.8x898.09) and its own node render (1272x837) disagree,
     the same discrepancy the events rings have. It is placed at the DECLARED
     box, which is what the 1440 build does with its equivalent node, and the
     stroke is rgba(248,248,248,0.06) at 0.36px so the visual cost either way is
     very small. Flagged rather than silently trusted. */
  /* `.page-cart` is load-bearing: the `.ct img` reset above is (0,1,1) and a
     bare `.ct-pattern` at (0,1,0) loses to it, leaving the SVG at its own
     intrinsic 1272x837 — which is exactly the ink-bounds figure the node
     render reports, confirming the file simply trims the transparent margin
     and that stretching it to the declared box is what the 1440 build does. */
  .page-cart .ct-pattern { display: block; left: -516px; top: -108px;
                           width: 1292.8px; height: 898.09px;
                           z-index: 1; }   /* over the plate, as in the file */

  .ct-plate { left: 0; top: 15px; width: 390px; height: 864px;
              background: var(--color-surface-dark); padding: 0; }

  /* PAINT ORDER. Figma draws plate (#2278:4221) -> pattern (#2278:4222) ->
     title (#2278:4223), but the DOM has the title FIRST, because at 1440 the
     title sits above the plate and never overlaps it. At 390 the plate starts
     at y:15 and the title at y:45, so the opaque plate painted the title out
     entirely — invisible in the build, and only the pixel diff caught it
     (every measurement still passed, because the element was in the right
     place; it just could not be seen). Fixed with z-index rather than by
     reordering the DOM, so the verified desktop paint order is untouched. */
  .ct-title {
    left: 8px; top: 45px; width: 154px;
    z-index: 2;
    color: var(--white);
    font-size: 22px;
    line-height: 23px;   /* 22 at 1.06em = 23.32 -> 23 */
  }

  /* ---- line item ------------------------------------------------------- */
  .ct-item { left: 8px; top: 92px; width: 374px; height: 166px;
             background: var(--white); border-radius: 2px; padding: 0;
             margin: 0; }

  /* OUTSIDE 2px stroke: declared 129x155 at (13,179), drawn 133x159, so it
     sits at the stroke box and carries no CSS border. */
  .page-cart .ct-item__img { left: 11px; top: 96px;
                             width: 133px; height: 159px; border: 0; }

  .ct-item__name {
    left: 162px; top: 111px; width: 198px;
    color: var(--ink-900);
    font-weight: var(--fw-semi);
    font-size: 16px;
    line-height: 19px;
    text-transform: uppercase;
  }

  .ct-item__meta {
    left: 162px;
    color: var(--muted);
    font-weight: var(--fw-reg);
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;   /* meta rows are pinned one line apart — keep them one line, like desktop */
  }
  .ct-item__meta--1 { top: 154px; width: 134px; }
  .ct-item__meta--2 { top: 176px; width: 140px; }

  .ct-item__date {
    display: block;
    left: 162px; top: 200px; width: 189px;
    color: #999999;
    font-weight: var(--fw-reg);
    font-size: 13px;
    line-height: 16px;
  }
  .ct-item__date span { color: var(--gold); }

  .ct-item__price {
    left: 162px; top: 221px; width: auto; white-space: nowrap;
    color: var(--ink-900);
    font-weight: var(--fw-bold);
    font-size: 18px;
    line-height: 22px;
  }

  /* #2278:4245 — stroke "0px 1px": side edges only, no top or bottom */
  .ct-remove {
    left: 8px; top: 271px; width: 46px; height: 38px;
    appearance: none;          /* a transparent <button> otherwise keeps
                                  Chrome's native buttonface grey */
    background: none;
    border: 0;
    border-left: 1px solid var(--white);
    border-right: 1px solid var(--white);
    padding: 0;
  }
  /* measured, not derived: left:17 lands the icon at Figma's x:25 against the
     box's own x:8. There is no top border, so top is the literal 365 - 352. */
  .ct-remove img { position: absolute; left: 17px; top: 13px;
                   width: 12px; height: 13.33px; }

  .ct-line-total {
    left: 151px; top: 279px; width: auto; white-space: nowrap;
    color: var(--white);
    font-weight: var(--fw-med);
    font-size: 18px;
    line-height: 22px;
  }

  .ct-qty { left: 281px; top: 271px; width: 101px; height: 39px;
            background: none; border: 1px solid var(--white); }

  .ct-qty__step,
  .ct-qty__value {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: var(--white);
    text-align: center;
    line-height: 18px;
  }
  .ct-qty__step--minus { left: 290px; top: 282px; width: 7px; height: 18px;
                         font-weight: var(--fw-light); font-size: 15px; }
  .ct-qty__value       { left: 328px; top: 282px; width: 7px; height: 17px;
                         font-weight: var(--fw-reg); font-size: 15px;
                         line-height: 17px; }
  .ct-qty__step--plus  { left: 364px; top: 281px; width: 10px; height: 18px;
                         font-weight: var(--fw-light); font-size: 15px; }

  /* ---- cart totals ------------------------------------------------------ */
  .ct-totals { left: 8px; top: 351px; width: 372px; height: 438px;
               background: var(--white); padding: 0; margin: 0; }

  .ct-totals__title {
    left: 24px; top: 365px; width: 112px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 16px;
    line-height: 19px;
    text-transform: uppercase;
  }

  .ct-promo__label {
    left: 24px; top: 400px; width: 78px;
    color: var(--color-text);
    font-weight: var(--fw-semi);
    font-size: 13px;
    line-height: 16px;
  }

  /* placeholder sits at Figma x:33 — the box starts at 24 and carries a 1px
     border, so the padding is 33 - 24 - 1 */
  .ct-promo__input {
    left: 24px; top: 425px; width: 227px; height: 39px;
    background: var(--white);
    border: 1px solid #000;
    padding: 0 0 0 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 15px;
  }
  .ct-promo__input::placeholder { color: var(--ph); }

  .ct-promo__apply {
    left: 267px; top: 425px; width: 98px; height: 39px;
    font-weight: var(--fw-semi);
    font-size: 12px;
    line-height: 15px;
  }

  .ct-rule { left: 24px; top: 480px; width: 341px; height: 1px;
             background: var(--hairline); }

  .ct-row {
    color: var(--color-text);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 17px;
  }
  .ct-row--subtotal  { left: 24px;  top: 496px; width: 56px; }
  .ct-row--subtotalv { left: 297px; top: 496px; width: 68px; text-align: right; white-space: nowrap; }
  .ct-row--discount  { left: 24px;  top: 522px; width: 59px; }
  .ct-row--discountv { left: 351px; top: 522px; width: 14px; text-align: right; }

  /* ---- pay buttons ------------------------------------------------------ */
  .ct-checkout { left: 24px; top: 555px; width: 341px; height: 45px; }

  .ct-or-dash, .ct-or {
    top: 615px;
    color: var(--color-text);
    font-weight: var(--fw-reg);
    font-size: 14px;
    line-height: 17px;
  }
  .ct-or-dash--l { left: 164px; width: 14px; text-align: right; }
  .ct-or         { left: 187px; width: 14px; }
  .ct-or-dash--r { left: 210px; width: 14px; text-align: right; }

  .ct-applepay { left: 24px; top: 647px; width: 341px; height: 35px; }
  .ct-tabby    { left: 24px; top: 691px; width: 341px; height: 35px; }

  .ct-applepay .ct-pay__logo { width: 43px;    height: 23.89px; }
  .ct-tabby    .ct-pay__logo { width: 43.84px; height: 17.47px; }

  .ct-tabby__note {
    left: 24px; top: 736px; width: 179px;
    color: var(--muted);
    font-weight: var(--fw-reg);
    font-size: 11px;
    line-height: 13px;
  }

  .ct-tabby__mo {
    left: 306px; top: 736px; width: 59px;
    color: var(--color-text);
    font-weight: var(--fw-reg);
    font-size: 10px;
    line-height: 12px;
    text-align: right;
    white-space: nowrap;
  }

  /* below the totals card, back on the dark plate.
     269 not Figma's declared 270: the file breaks this before "to" and the
     browser pulls that word up onto line 1. Measured window 257-269, held at
     the top of it. FOURTH frame on this file where Figma refuses to end a line
     on a two-letter word (programs "to", article "to"/"of", program "It"). */
  .ct-note {
    left: 24px; top: 807px; width: 269px;
    color: var(--white);
    font-weight: var(--fw-light);
    font-size: 12px;
    line-height: 15px;
  }
}

/* ==========================================================================
   TABLET — literal Figma geometry, 768 canvas
   Source of truth: frame "корзина планш" #2278:4297 (768 x 1186).

   THIS FRAME DRAWS ITS OWN HEADER AND FOOTER, like the 1440 and 390 cart
   frames: header #2278:4341 (769x81) and footer #2278:4352 at y:966. The
   tablet header is 81 tall, so `main` = 966 - 81 = **885** and every
   coordinate below is THE FIGMA VALUE MINUS 81. Verified: the footer lands
   at 966, exactly where the frame draws it.

   (The frame's own header is drawn at y:2 rather than y:0 — a 2px file
   artifact. The real partial sits at 0..81 and the content coordinates are
   taken against that, which is what makes the absolute positions match.)

   The markup is FLAT: every element is a direct child of `.ct-review`, so
   there are no panel-relative offsets on this page at all.

   STROKE ALIGNMENT, batched as node renders:
     4307 item photo   129x155 -> 133x159   **OUTSIDE 2** (as at 390)
     4319 promo input, 4309 qty box, 4314 trash box  all INSIDE

   NO NEW BITMAPS. The item photo, both payment logos, the line pattern and
   the trash icon are the crops the 1440 build already exports — the same
   boxes are used here, so nothing is re-exported and no `<picture>` wrapper
   is introduced. (Same finding as the 390 cart.)

   FOOTER MISMATCH — see the note in CLAUDE.md. This frame draws the STANDARD
   three-column footer (Quick Links / Legal / Contact us), as the 390 frame
   does, while `cart.html` loads `partials/footer-slim.html` because the 1440
   frame draws the slim two-column variant. Left on the slim footer here too:
   swapping it is a shared-chrome change that also affects checkout, and two
   of three breakpoints now disagree with 1440, which is worth raising rather
   than deciding unilaterally.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  .page-cart main.ct {
    position: relative;
    width: var(--frame-tablet);
    max-width: none;
    height: 885px;               /* footer at 966 - 81 header */
    margin-inline: auto;
    padding: 0;
  }

  .page-cart .ct-review {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--frame-tablet);
    height: 885px;
    margin: 0;
    padding: 0;
  }

  /* everything on this page is positioned against the section */
  .page-cart .ct-review > * { position: absolute; margin: 0; }

  /* #2278:4298 — the dark plate the whole review sits on */
  .page-cart .ct-plate {
    left: 40px;
    top: 26px;
    width: 688px;
    height: 840px;
    background: var(--color-surface-dark);
  }

  /* #2278:4299 — the 6%-alpha line pattern. Its SVG export trims to the ink
     bounds, so it is stretched to the declared box, exactly as the 1440 and
     390 builds do with the same file. */
  .page-cart .ct-pattern {
    left: -98px;
    top: -8px;
    width: 1292.8px;
    height: 898.09px;
    max-width: none;
  }

  /* #2278:4300 — Inter Bold 22 at 1.06em -> 23 */
  .page-cart .ct-title {
    left: 76px;
    top: 56px;
    width: 154px;
    font-size: 22px;
    font-weight: var(--fw-bold);
    line-height: 23px;
    text-transform: uppercase;
    color: var(--white);
  }

  /* ---------- line item ------------------------------------------------ */

  /* #2278:4301 — the white card */
  .page-cart .ct-item {
    left: 76px;
    top: 103px;
    width: 616px;
    height: 166px;
    background: var(--white);
    border-radius: 2px;
  }

  /* #2278:4307 — OUTSIDE 2, so it is written at its 133x159 outer box and
     placed 2px back on each axis from the declared 129x155 at (81,190) */
  .page-cart .ct-item__img {
    left: 79px;
    top: 107px;
    width: 133px;
    height: 159px;
    max-width: none;
    object-fit: fill;
    border: 2px solid var(--white);
  }

  .page-cart .ct-item__name {
    left: 238px;
    top: 123px;
    width: 367px;
    font-size: 16px;
    font-weight: var(--fw-semi);
    line-height: 19px;
    text-transform: uppercase;
    color: var(--grey-900);
    white-space: nowrap;
  }

  .page-cart .ct-item__meta {
    left: 238px;
    font-size: 13px;
    font-weight: var(--fw-reg);
    line-height: 16px;
    color: #666666;
    white-space: nowrap;   /* meta rows are pinned one line apart — keep them one line, like desktop */
  }

  .page-cart .ct-item__meta--1 { top: 153px; width: 134px; }
  .page-cart .ct-item__meta--2 { top: 175px; width: 140px; }

  /* #2278:4305 — the bracketed half is gold; it is a PLACEHOLDER waiting on
     the booking integration, not copy. The base rule hides this line because
     the 1440 frame does not draw it, so it has to be turned back on here. */
  .page-cart .ct-item__date {
    display: block;
    left: 238px;
    top: 199px;
    width: 189px;
    font-size: 13px;
    font-weight: var(--fw-reg);
    line-height: 16px;
    color: #999999;
  }

  .page-cart .ct-item__date span { color: var(--gold); }

  .page-cart .ct-item__price {
    left: 238px;
    top: 227px;
    width: 92px;
    font-size: 18px;
    font-weight: var(--fw-bold);
    line-height: 22px;
    color: var(--grey-900);
  }

  /* #2278:4315 — this is the line that states the intended flow: scheduling
     happens after payment and is handled by a person. Two lines at 12/15. */
  .page-cart .ct-note {
    left: 76px;
    top: 300px;
    width: 270px;
    font-size: 12px;
    font-weight: var(--fw-light);
    line-height: 15px;
    color: var(--white);
  }

  /* ---------- quantity, line total, remove ----------------------------- */

  .page-cart .ct-qty {
    left: 416px;
    top: 293px;
    width: 101px;
    height: 39px;
    background: none;
    border: var(--stroke-1) solid var(--white);
  }

  .page-cart .ct-qty__step {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--fw-light);
    line-height: 18px;
    color: var(--white);
    cursor: pointer;
  }

  .page-cart .ct-qty__step--minus { left: 425px; top: 304px; width: 7px;  height: 18px; }
  .page-cart .ct-qty__step--plus  { left: 499px; top: 303px; width: 10px; height: 18px; }

  .page-cart .ct-qty__value {
    left: 463px;
    top: 304px;
    width: 7px;
    font-size: 15px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    text-align: center;
    color: var(--white);
  }

  .page-cart .ct-line-total {
    left: 537px;
    top: 301px;
    width: 89px;
    font-size: 18px;
    font-weight: var(--fw-med);
    line-height: 22px;
    color: var(--white);
  }

  /* #2278:4314 carries stroke "0px 1px" — left and right edges only */
  .page-cart .ct-remove {
    left: 646px;
    top: 294px;
    width: 46px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-left: var(--stroke-1) solid var(--white);
    border-right: var(--stroke-1) solid var(--white);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .page-cart .ct-remove img { width: 12px; height: 13.33px; }

  /* ---------- cart totals ---------------------------------------------- */

  .page-cart .ct-totals {
    left: 198px;
    top: 376px;
    width: 372px;
    height: 438px;
    background: var(--white);
  }

  .page-cart .ct-totals__title {
    left: 214px;
    top: 390px;
    width: 112px;
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 19px;
    text-transform: uppercase;
    color: var(--color-surface-dark);
  }

  .page-cart .ct-promo__label {
    left: 214px;
    top: 425px;
    width: 78px;
    font-size: 13px;
    font-weight: var(--fw-semi);
    line-height: 16px;
    color: var(--color-surface-dark);
  }

  .page-cart .ct-promo__input {
    left: 214px;
    top: 450px;
    width: 227px;
    height: 39px;
    padding: 0 9px;
    background: var(--white);
    border: var(--stroke-1) solid var(--black);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 15px;
    color: var(--color-surface-dark);
  }

  .page-cart .ct-promo__input::placeholder { color: #A3A3A3; }

  .page-cart .ct-promo__apply {
    left: 457px;
    top: 450px;
    width: 98px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    background: var(--color-surface-dark);
    border: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-semi);
    line-height: 15px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--white);
  }

  .page-cart .ct-rule {
    left: 214px;
    top: 505px;
    width: 341px;
    height: 1px;
    background: #E0E0E0;
  }

  .page-cart .ct-row {
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    color: var(--color-surface-dark);
  }

  .page-cart .ct-row--value { text-align: right; }

  .page-cart .ct-row--subtotal  { left: 214px; top: 521px; width: 56px; }
  .page-cart .ct-row--subtotalv { left: 487px; top: 521px; width: 68px; }
  .page-cart .ct-row--discount  { left: 214px; top: 547px; width: 59px; }
  .page-cart .ct-row--discountv { left: 541px; top: 547px; width: 14px; }

  /* ---------- the three buttons ---------------------------------------- */

  .page-cart .ct-checkout {
    left: 214px;
    top: 580px;
    width: 341px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    background: var(--color-surface-dark);
    border: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--fw-med);
    line-height: 16px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--white);
  }

  .page-cart .ct-or,
  .page-cart .ct-or-dash {
    top: 640px;
    width: 14px;
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    color: var(--color-surface-dark);
  }

  .page-cart .ct-or-dash--l { left: 354px; }
  .page-cart .ct-or         { left: 377px; }
  .page-cart .ct-or-dash--r { left: 400px; }

  /* both payment buttons place their label and logo explicitly rather than
     relying on flex centring — Figma's own x values are not the centred ones */
  .page-cart .ct-applepay,
  .page-cart .ct-tabby {
    left: 214px;
    width: 341px;
    height: 35px;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .page-cart .ct-applepay { top: 672px; background: var(--color-surface-dark); }
  .page-cart .ct-tabby    { top: 716px; background: #00BC55; }

  .page-cart .ct-pay__label {
    position: absolute;
    top: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--fw-med);
    line-height: 16px;
    color: var(--white);
  }

  .page-cart .ct-applepay .ct-pay__label { left: 119px; width: 54px; }
  .page-cart .ct-tabby    .ct-pay__label { left: 114px; width: 53px; }

  .page-cart .ct-pay__logo { position: absolute; max-width: none; }

  .page-cart .ct-applepay .ct-pay__logo { left: 177px; top: 7px;  width: 43px;    height: 23.89px; }
  .page-cart .ct-tabby    .ct-pay__logo { left: 176px; top: 10px; width: 43.84px; height: 17.47px; }

  .page-cart .ct-tabby__note {
    left: 214px;
    top: 761px;
    width: 179px;
    font-size: 11px;
    font-weight: var(--fw-reg);
    line-height: 13px;
    color: #666666;
  }

  .page-cart .ct-tabby__mo {
    left: 496px;
    top: 761px;
    width: 59px;
    font-size: 10px;
    font-weight: var(--fw-reg);
    line-height: 12px;
    text-align: right;
    color: var(--color-surface-dark);
  }
}

/* ==========================================================================
   EMPTY CART — no consultation selected (cart.js adds `.is-empty` to main.ct
   and un-hides `.ct-empty`). Figma defines no empty state, so this is a designed
   addition. One rule set for every breakpoint: main becomes an auto-height flex
   box that centres a message; the pinned line item / totals / payment controls
   are hidden. `.page-cart main.ct.is-empty` (0,3,1) beats the per-breakpoint
   height rules (`.page-cart main.ct` is 0,2,1 at tablet).
   ========================================================================== */
.ct-empty { display: none; }

.page-cart main.ct.is-empty {
  height: auto;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct.is-empty .ct-review { position: static; width: 100%; height: auto; }
.ct.is-empty .ct-review > *:not(.ct-empty) { display: none; }

.ct.is-empty .ct-empty {
  display: block;
  position: static;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
}
.ct-empty__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 14px;
}
.ct-empty__text {
  color: var(--grey-700);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 380px;
}
.ct-empty__cta { display: inline-block; }

/* ==== RTL OVERLAY (auto — tools/rtl-gen.js; mirrors horizontal geometry for Arabic, scoped to html[dir=rtl], changed decls only) ==== */
@media (min-width: 1200px) {
    html[dir="rtl"] .ct section {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .ct-title {
        right: 80px;
        left: auto
    }
    html[dir="rtl"] .ct-pattern {
        right: 27px;
        left: auto
    }
    html[dir="rtl"] .ct-plate {
        right: 80px;
        left: auto
    }
    html[dir="rtl"] .ct-item {
        right: 112px;
        left: auto
    }
    html[dir="rtl"] .ct-item__img {
        right: 115px;
        left: auto
    }
    html[dir="rtl"] .ct-item__name {
        right: 274px;
        left: auto
    }
    html[dir="rtl"] .ct-item__meta {
        right: 274px;
        left: auto
    }
    html[dir="rtl"] .ct-item__price {
        right: 274px;
        left: auto
    }
    html[dir="rtl"] .ct-note {
        right: 112px;
        left: auto
    }
    html[dir="rtl"] .ct-qty {
        right: 566px;
        left: auto
    }
    html[dir="rtl"] .ct-qty__step--minus {
        right: 575px;
        left: auto
    }
    html[dir="rtl"] .ct-qty__step--plus {
        right: 649px;
        left: auto
    }
    html[dir="rtl"] .ct-qty__value {
        right: 613px;
        left: auto
    }
    html[dir="rtl"] .ct-line-total {
        right: 687px;
        left: auto
    }
    html[dir="rtl"] .ct-remove {
        right: 796px;
        left: auto
    }
    html[dir="rtl"] .ct-remove img {
        right: 17px;
        left: auto
    }
    html[dir="rtl"] .ct-totals {
        right: 955px;
        left: auto
    }
    html[dir="rtl"] .ct-totals__title {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-promo__label {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-promo__input {
        right: 971px;
        padding: 0 9px 0 0;
        left: auto
    }
    html[dir="rtl"] .ct-promo__apply {
        right: 1214px;
        left: auto
    }
    html[dir="rtl"] .ct-rule {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-row--value {
        text-align: left
    }
    html[dir="rtl"] .ct-row--subtotal {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-row--subtotalv {
        right: 1244px;
        left: auto
    }
    html[dir="rtl"] .ct-row--discount {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-row--discountv {
        right: 1298px;
        left: auto
    }
    html[dir="rtl"] .ct-checkout {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-or {
        right: 1134px;
        left: auto
    }
    html[dir="rtl"] .ct-or-dash {
        text-align: left
    }
    html[dir="rtl"] .ct-or-dash--l {
        right: 1111px;
        left: auto
    }
    html[dir="rtl"] .ct-or-dash--r {
        right: 1157px;
        left: auto
    }
    html[dir="rtl"] .ct-applepay {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-applepay .ct-pay__label {
        right: 119px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby    .ct-pay__label {
        right: 114px;
        left: auto
    }
    html[dir="rtl"] .ct-applepay .ct-pay__logo {
        right: 177px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby    .ct-pay__logo {
        right: 176px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby__note {
        right: 971px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby__mo {
        right: 1253px;
        text-align: left;
        left: auto
    }
}
@media (max-width: 767px) {
    html[dir="rtl"] .ct section {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-pattern {
        right: -516px;
        left: auto
    }
    html[dir="rtl"] .ct-plate {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .ct-title {
        right: 8px;
        left: auto
    }
    html[dir="rtl"] .ct-item {
        right: 8px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-item__img {
        right: 11px;
        left: auto
    }
    html[dir="rtl"] .ct-item__name {
        right: 162px;
        left: auto
    }
    html[dir="rtl"] .ct-item__meta {
        right: 162px;
        left: auto
    }
    html[dir="rtl"] .ct-item__date {
        right: 162px;
        left: auto
    }
    html[dir="rtl"] .ct-item__price {
        right: 162px;
        left: auto
    }
    html[dir="rtl"] .ct-remove {
        right: 8px;
        left: auto
    }
    html[dir="rtl"] .ct-remove img {
        right: 17px;
        left: auto
    }
    html[dir="rtl"] .ct-line-total {
        right: 151px;
        left: auto
    }
    html[dir="rtl"] .ct-qty {
        right: 281px;
        left: auto
    }
    html[dir="rtl"] .ct-qty__step--minus {
        right: 290px;
        left: auto
    }
    html[dir="rtl"] .ct-qty__value {
        right: 328px;
        left: auto
    }
    html[dir="rtl"] .ct-qty__step--plus {
        right: 364px;
        left: auto
    }
    html[dir="rtl"] .ct-totals {
        right: 8px;
        left: auto
    }
    html[dir="rtl"] .ct-totals__title {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-promo__label {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-promo__input {
        right: 24px;
        padding: 0 8px 0 0;
        left: auto
    }
    html[dir="rtl"] .ct-promo__apply {
        right: 267px;
        left: auto
    }
    html[dir="rtl"] .ct-rule {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-row--subtotal {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-row--subtotalv {
        right: 297px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .ct-row--discount {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-row--discountv {
        right: 351px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .ct-checkout {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-or-dash--l {
        right: 164px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .ct-or {
        right: 187px;
        left: auto
    }
    html[dir="rtl"] .ct-or-dash--r {
        right: 210px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .ct-applepay {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby__note {
        right: 24px;
        left: auto
    }
    html[dir="rtl"] .ct-tabby__mo {
        right: 306px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .ct-note {
        right: 24px;
        left: auto
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    html[dir="rtl"] .page-cart .ct-review {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-plate {
        right: 40px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-pattern {
        right: -98px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-title {
        right: 76px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-item {
        right: 76px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-item__img {
        right: 79px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-item__name {
        right: 238px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-item__meta {
        right: 238px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-item__date {
        right: 238px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-item__price {
        right: 238px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-note {
        right: 76px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-qty {
        right: 416px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-qty__step--minus {
        right: 425px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-qty__step--plus {
        right: 499px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-qty__value {
        right: 463px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-line-total {
        right: 537px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-remove {
        right: 646px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-totals {
        right: 198px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-totals__title {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-promo__label {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-promo__input {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-promo__apply {
        right: 457px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-rule {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-row--value {
        text-align: left
    }
    html[dir="rtl"] .page-cart .ct-row--subtotal {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-row--subtotalv {
        right: 487px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-row--discount {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-row--discountv {
        right: 541px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-checkout {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-or-dash--l {
        right: 354px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-or {
        right: 377px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-or-dash--r {
        right: 400px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-applepay,
html[dir="rtl"] .page-cart .ct-tabby {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-applepay .ct-pay__label {
        right: 119px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-tabby    .ct-pay__label {
        right: 114px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-applepay .ct-pay__logo {
        right: 177px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-tabby    .ct-pay__logo {
        right: 176px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-tabby__note {
        right: 214px;
        left: auto
    }
    html[dir="rtl"] .page-cart .ct-tabby__mo {
        right: 496px;
        text-align: left;
        left: auto
    }
}