/* =============================================================================
   CART — the first step of the checkout funnel, both trade directions.

   Reference: Docs/Redesign/Approved/cart/Daric Cart (standalone).html
   Tokens:    tailwind/input.css, STEP 16 (read its mapping notes before adding a colour)

   NAMESPACE. Every class here is `ct-`. The legacy cart selectors (.cart-content,
   .cart-information, .cart-rightside, .cart-leftside, .plus-minus-content,
   .cart-desc-row, .price-payable …) therefore do not match this page at all, so
   there is no specificity fight with shop.css or css/Cart/Cart.css and almost
   nothing to neutralise. The two legacy hooks kept verbatim are `.status-page`
   and `data-page="cart"`, which are a contract with shop.js.

   NO TAILWIND UTILITIES. Same call as Steps 8/10/11/13/14/15: this is a
   hand-written component sheet consuming the --brand-* tokens as raw var(), and
   Tailwind never scans wwwroot, so a utility class here would never be
   generated.

   ONE RESPONSIVE TREE. There is no width-based JavaScript on this page. Every
   difference between the 1440 desktop and the 390 phone is a media query at
   991.98px; no node is duplicated for a second width, and a resize across the
   breakpoint needs no reload.

   SECTIONS
     0  Page frame, resets and shared atoms
     1  Page head, breadcrumb, basket switch
     2  Body layout — the two columns, and how they stack
     3  The line list, its head and its foot
     4  A cart LINE, including the semantic colour rule
     5  The quantity stepper
     6  The removed-item ghost slot
     7  The summary column
     8  The discount-code panel
     9  The mobile sticky total bar
    10  Notices — change acknowledgement, merge, guest, price lock, sell framing
    11  The spread explainer
    12  The empty state
    13  MOBILE (max-width: 991.98px)
   ============================================================================= */


/* =============================================================================
   SECTION 0 — PAGE FRAME, RESETS AND SHARED ATOMS
   ============================================================================= */

.ct-page {
    /* The redesigned surfaces are 1440, not .container-manual's 1366 — see the
       2026-09-02 note about the storefront's two page widths. The cart joins
       .home-page and the footer panel rather than staying behind with the
       legacy pages. */
    max-width: var(--frame-w, 1440px);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 26px var(--cart-gutter) 48px;
    color: var(--brand-text);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Preflight is OFF, so an inline <svg> carrying only a viewBox inflates to
   300x150 and fills any flex parent (2026-09-07 in the gotchas log). This is the
   floor; every specific rule below overrides it. */
:where(.ct-page, .ct-bar) svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* Preflight is off, so <button> keeps its UA chrome. Written as :where() so it
   scores (0,0,1) and ANY class below wins automatically — the 2026-09-01 lesson
   about a namespaced element reset out-specifying every component under it. */
:where(.ct-page, .ct-bar) button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}

:where(.ct-page, .ct-bar) input {
    font: inherit;
    color: inherit;
}

/* Preflight is off, so a list keeps the UA's 40px padding-inline-start as well
   as its markers — reset BOTH, per the 2026-09-01 roadmap-connector entry. */
:where(.ct-page) ol,
:where(.ct-page) ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ct-page a {
    color: inherit;
    text-decoration: none;
}

/* [hidden] RESTATEMENT. Preflight is off, so the only [hidden] rule in play is
   the UA's — and ANY author `display` beats a UA rule regardless of specificity
   (2026-08-30). Every element below that is toggled with the attribute also
   carries a display rule, so this has to be restated. */
.ct-page [hidden],
.ct-bar[hidden] {
    display: none !important;
}

/* Money and its unit are ONE run. A price broken across a line into the figure
   and a lonely «تومان» reads as two separate facts. */
.ct-nowrap {
    white-space: nowrap;
}

.ct-unit {
    font-weight: 500;
    font-size: .78em;
    color: var(--brand-text-muted);
}

.ct-chip {
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-chip-sm);
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

/* A coupon is a Latin token inside an RTL paragraph; without the isolate the
   bidi algorithm reorders it against the surrounding Persian. */
.ct-code {
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    padding: 2px 7px;
    font: 500 10px/1.6 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--brand-text);
    unicode-bidi: isolate;
}

.ct-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-success);
    flex: none;
}

.ct-rule {
    height: 1px;
    background: linear-gradient(90deg, var(--brand-primary-hairline), transparent 70%);
}

/* The gold CTA. One definition, used by the summary, the empty state and the
   sticky bar, so the funnel's primary action cannot drift between them. */
.ct-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    border-radius: var(--radius-brand-md);
    background: var(--brand-primary);
    color: var(--brand-primary-ink);
    font-size: 14.5px;
    font-weight: 800;
    box-shadow: var(--brand-shadow-cart-cta);
    transition: background .18s ease, color .18s ease;
}

.ct-cta:hover {
    background: var(--brand-primary-deep);
    color: #FFF9E9;
}

.ct-cta svg {
    width: 17px;
    height: 17px;
}

.ct-cta--compact {
    height: 46px;
    padding: 0 22px;
    font-size: 13px;
}

.ct-cta--off {
    background: var(--brand-disabled-face);
    color: var(--brand-disabled-ink);
    box-shadow: none;
    cursor: not-allowed;
}

.ct-cta-ghost {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 20px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-md);
    background: var(--brand-card-face);
    color: var(--brand-primary-deep);
    font-size: 13px;
    font-weight: 700;
}

.ct-cta-ghost:hover {
    background: var(--brand-primary-band);
}


/* =============================================================================
   SECTION 1 — PAGE HEAD, BREADCRUMB, BASKET SWITCH
   ============================================================================= */

.ct-crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-crumbs a:hover {
    color: var(--brand-primary-deep);
}

.ct-crumbs svg {
    width: 13px;
    height: 13px;
    color: var(--brand-text-soft);
}

.ct-crumbs span[aria-current] {
    font-weight: 700;
    color: var(--brand-text);
}

.ct-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.ct-head__identity {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.ct-head__titles {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.ct-head__title {
    margin: 0;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--brand-text);
}

.ct-head__mode {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-sell-band);
    border: 1px solid var(--brand-sell-edge);
    border-radius: 9px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-sell-deep);
}

.ct-head__mode svg {
    width: 14px;
    height: 14px;
}

.ct-head__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text-soft);
}

.ct-head__sub {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-head__switch {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: none;
}

.ct-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    border-radius: 13px;
    padding: 4px;
    box-shadow: var(--brand-shadow-cart-card);
}

.ct-switch__seg > a,
.ct-switch__seg > span {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--radius-brand);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text-muted);
    border: 1px solid transparent;
}

.ct-switch__seg > a:hover {
    background: var(--brand-surface-recess);
    color: var(--brand-text);
}

.ct-switch__seg svg {
    width: 15px;
    height: 15px;
}

.ct-switch__badge {
    min-width: 20px;
    height: 20px;
    box-sizing: border-box;
    padding: 0 5px;
    border-radius: var(--radius-brand);
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* The active segment takes the direction's own accent — gold when buying from
   us, the sell channel's green when selling to us. */
.ct-switch__seg.is-on > a,
.ct-switch__seg.is-on > span {
    background: var(--brand-primary-band);
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    font-weight: 700;
}

.ct-switch__seg.is-on .ct-switch__badge {
    background: var(--brand-primary);
    border-color: transparent;
    color: var(--brand-primary-ink);
    font-weight: 800;
    line-height: 20px;
}

.ct-page--sell .ct-switch__seg.is-on > a,
.ct-page--sell .ct-switch__seg.is-on > span {
    background: var(--brand-sell-band);
    border-color: var(--brand-sell-edge);
    color: var(--brand-sell-deep);
}

.ct-page--sell .ct-switch__seg.is-on .ct-switch__badge {
    background: var(--brand-sell);
    color: var(--brand-sell-ink);
}

.ct-head__other {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.ct-head__other svg {
    width: 13px;
    height: 13px;
}


/* =============================================================================
   SECTION 2 — BODY LAYOUT
   -----------------------------------------------------------------------------
   A flex ROW at >=992px (list, then the 372px summary column) and a flex COLUMN
   below it with the summary ordered after the list. The summary is rendered
   ONCE and re-laid-out; it is never duplicated for a second width.
   ============================================================================= */

.ct-body {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.ct-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-aside {
    flex: none;
    width: var(--cart-aside-w);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* A flex column's items default to flex-shrink: 1, so a card with its own
   overflow silently compresses instead of overflowing — the 2026-09-07 entry
   about the listing sidebar clipping its own price control. */
.ct-aside > *,
.ct-main > * {
    flex: none;
}

/* From five lines up the summary sticks, so the amount stays in view while the
   list scrolls past. Offset by the collapsed header, which is fixed. */
.ct-aside.is-sticky {
    position: sticky;
    top: calc(var(--header-compact-height, 58px) + 18px);
}

.ct-aside__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-panel);
    padding: 14px 16px;
    font-size: 11.5px;
    line-height: 1.85;
    color: var(--brand-text-muted);
    text-wrap: pretty;
}

.ct-aside__note svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--brand-primary-deep);
}


/* =============================================================================
   SECTION 3 — THE LINE LIST
   ============================================================================= */

.ct-list {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-card-lg);
    box-shadow: var(--brand-shadow-cart-card);
    overflow: hidden;
}

.ct-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-surface-recess);
}

.ct-list__title {
    font-size: 12.5px;
    font-weight: 700;
}

.ct-list__live {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

/* The hairline between rows stops short of the card's edge, exactly as the
   reference draws it — a full-bleed rule would cut the rounded corner. */
.ct-list__row + .ct-list__row .ct-line:not([class*="ct-line--good"]):not([class*="ct-line--bad"]):not([class*="ct-line--clamped"]) {
    border-top: 1px solid var(--brand-border);
}

.ct-list__row + .ct-list__row .ct-line--good,
.ct-list__row + .ct-list__row .ct-line--bad,
.ct-list__row + .ct-list__row .ct-line--clamped,
.ct-list__row + #ct-removed .ct-gone {
    border-top: 1px solid var(--brand-border);
}

.ct-list__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 22px;
    border-top: 1px solid var(--brand-border);
    background: var(--brand-surface-recess);
}

.ct-list__more {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-primary-deep);
}

.ct-list__more svg {
    width: 14px;
    height: 14px;
}

.ct-list__clear-form {
    margin: 0;
}

.ct-list__clear {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
    padding: 4px;
}

.ct-list__clear:hover {
    color: var(--brand-danger);
}


/* =============================================================================
   SECTION 4 — A CART LINE
   -----------------------------------------------------------------------------
   ⚠ THE COLOUR RULE, and it is the easiest thing on this page to get backwards.

     ARROW DIRECTION = the direction the PRICE moved.
     COLOUR          = the EFFECT ON THE CUSTOMER.

   The two are independent because the effect INVERTS between the directions: a
   rise costs a buyer money and pays a seller more. So there is no
   `.ct-line--up` / `.ct-line--down` here — the classes are `--good` / `--bad`,
   decided server-side by CartLineModel.Effect, and the arrow glyph is chosen
   separately from CartItemDto.PriceMove. Neither may be derived from the other.

   `--clamped` is a third, informational family: a quantity reduced by stock is
   neither good nor bad news, it is a fact about availability.
   ============================================================================= */

.ct-line {
    position: relative;
}

.ct-line__grid {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: var(--cart-row-pad) 22px;
}

/* The money column: unit price over line total, right-aligned, at a FIXED width
   so every row's total lines up whatever the product is called. `.ct-line__split`
   is the mobile tier rule and has no job here. */
.ct-line__amounts {
    flex: none;
    width: var(--cart-price-col);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.ct-page--sell .ct-line__amounts {
    width: var(--cart-price-col-sell);
}

.ct-line__split {
    display: none;
}

/* From five lines the rows compress — 72px thumbnail, tighter gutters — so a
   seven-line basket still shows its summary without scrolling past it. */
.ct-line--compact .ct-line__grid,
.ct-page--sell .ct-line--compact .ct-line__grid {
    gap: 18px;
    padding: 14px 22px;
}

.ct-line--compact .ct-line__amounts,
.ct-page--sell .ct-line--compact .ct-line__amounts {
    width: var(--cart-price-col-compact);
}

/* ── The affected-row families ──────────────────────────────────────────────── */
.ct-line--bad {
    border-inline-start: 3px solid var(--brand-discount);
    background: var(--brand-discount-band);
}

.ct-line--good {
    border-inline-start: 3px solid var(--brand-success);
    background: var(--brand-success-band);
}

.ct-line--clamped {
    border-inline-start: 3px solid var(--brand-info);
    background: var(--brand-info-band);
}

/* On a tinted row the attribute chips need a lighter fill or they disappear
   into it. */
.ct-line--bad .ct-chip,
.ct-line--good .ct-chip,
.ct-line--clamped .ct-chip {
    background: var(--brand-card-face);
}

.ct-line__banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 19px 0;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.7;
}

.ct-line__banner svg {
    width: 13px;
    height: 13px;
}

.ct-line--bad .ct-line__banner { color: var(--brand-discount); }
.ct-line--good .ct-line__banner { color: var(--brand-success); }
.ct-line--clamped .ct-line__banner { color: var(--brand-info); }

.ct-line__banner + .ct-line__grid {
    padding-top: 12px;
    padding-inline: 19px;
}

/* ── Thumbnail ──────────────────────────────────────────────────────────────── */
.ct-line__thumb {
    position: relative;
    width: var(--cart-thumb);
    height: var(--cart-thumb);
    border-radius: var(--radius-brand-lg);
    border: 1px solid var(--brand-primary-rule);
    background: linear-gradient(160deg, #FFFCF4, #F7F1E4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
}

/* The gilded dot grid sits BEHIND whatever the thumbnail holds, so a product
   with no image — or one whose image fails to load, which cart.js removes —
   lands on the reference's hatch rather than on flat cream or a broken glyph. */
.ct-line__thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brand-primary-pale) 1px, transparent 1.1px);
    background-size: 11px 11px;
    opacity: .45;
}

.ct-line--compact .ct-line__thumb {
    width: var(--cart-thumb-compact);
    height: var(--cart-thumb-compact);
    border-radius: var(--radius-brand-md);
}

/* shop.css:22-27 forces `img[alt] { display: flex }`, which is (0,1,1) — this
   has to match it to win. */
.ct-line__thumb img[alt] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

.ct-line__thumb-blank {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-image: radial-gradient(var(--brand-primary-pale) 1px, transparent 1.1px);
    background-size: 11px 11px;
    opacity: .55;
}

.ct-line__off {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    background: var(--brand-discount);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-end-end-radius: 8px;
}

/* ── Identity ───────────────────────────────────────────────────────────────── */
.ct-line__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-line--compact .ct-line__body {
    gap: 6px;
}

.ct-line__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-text);
    line-height: 1.5;
}

.ct-line--compact .ct-line__title {
    font-size: 14px;
}

.ct-line__title:hover {
    color: var(--brand-primary-deep);
}

.ct-line__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ct-line--compact .ct-line__attrs {
    /* One attribute row at compact height, so every row tiles to the same
       height whatever its variant carries. */
    max-height: 25px;
    overflow: hidden;
}

.ct-line__saving {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    background: var(--brand-discount-band);
    border: 1px solid var(--brand-discount-rule);
    border-radius: var(--radius-brand-chip);
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-discount);
}

.ct-line__saving svg {
    width: 12px;
    height: 12px;
}

.ct-line__note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-info);
}

.ct-line__note svg {
    width: 12px;
    height: 12px;
}

.ct-line__merge-badge {
    width: max-content;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-success-rule);
    border-radius: var(--radius-brand-chip-sm);
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--brand-success-ink);
}

/* ── Quantity cell ──────────────────────────────────────────────────────────── */
.ct-line__qty {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ct-line__remove {
    flex: none;
}

/* ── Money cell ─────────────────────────────────────────────────────────────── */
.ct-line__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: end;
}

.ct-line__pricing {
    display: flex;
    justify-content: flex-end;
}

.ct-line__unit,
.ct-line__prices {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-line__unit-now {
    color: var(--brand-text);
    font-weight: 600;
}

.ct-strike {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
    text-decoration: line-through;
    text-decoration-color: var(--brand-discount);
}

.ct-line__total {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--brand-text);
}

.ct-line__foot {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.ct-line__foot--sell {
    font-weight: 600;
    color: var(--brand-sell-deep);
}

/* «قیمت پیشین ← قیمت فعلی». The old figure is muted and the new one carries the
   effect colour; the arrow between them is horizontal and means "becomes". */
.ct-was-now {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-was-now svg {
    width: 13px;
    height: 13px;
}

.ct-was {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.ct-now {
    font-size: 12px;
    font-weight: 700;
}

.ct-line--bad .ct-now,
.ct-line--bad .ct-was-now__arrow { color: var(--brand-discount); }

.ct-line--good .ct-now,
.ct-line--good .ct-was-now__arrow { color: var(--brand-success); }

/* ── Remove ─────────────────────────────────────────────────────────────────── */
.ct-line__remove-btn {
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--brand-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.ct-line__remove-btn:hover {
    border-color: var(--brand-discount-rule);
    background: var(--brand-discount-band);
    color: var(--brand-discount);
}

.ct-line--bad .ct-line__remove-btn:hover,
.ct-line--good .ct-line__remove-btn:hover,
.ct-line--clamped .ct-line__remove-btn:hover {
    background: var(--brand-card-face);
}

.ct-line__remove-btn svg {
    width: 15px;
    height: 15px;
}

.ct-line__form {
    display: none;
}


/* =============================================================================
   SECTION 5 — THE QUANTITY STEPPER
   ============================================================================= */

.ct-stepper {
    display: flex;
    align-items: center;
    height: 38px;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand);
    background: var(--brand-card-face);
    overflow: hidden;
}

.ct-stepper--single {
    background: var(--brand-surface-recess);
}

.ct-stepper--flag {
    border-color: var(--brand-info-rule);
}

.ct-stepper__btn {
    width: 36px;
    height: 38px;
    color: var(--brand-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}

.ct-stepper__btn:hover:not(:disabled) {
    background: var(--brand-surface-recess);
    color: var(--brand-primary-deep);
}

.ct-stepper__btn:disabled {
    background: var(--brand-surface-recess);
    color: var(--brand-text-soft);
    cursor: not-allowed;
}

.ct-stepper--single .ct-stepper__btn:disabled {
    background: transparent;
}

.ct-stepper__btn svg {
    width: 13px;
    height: 13px;
}

.ct-stepper__value {
    min-width: 34px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-text);
    border-inline: 1px solid var(--brand-border);
    background: var(--brand-card-face);
}

.ct-stepper--flag .ct-stepper__value {
    color: var(--brand-info);
    font-weight: 800;
    border-inline-color: var(--brand-info-rule);
}

.ct-stepper__note {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
    text-align: center;
}

.ct-stepper__note--flag {
    font-weight: 700;
    color: var(--brand-info);
}

/* Only the arrows dim while a change is in flight — the figure must stay
   readable, because it is the thing about to change. */
.ct-stepper.is-busy .ct-stepper__btn {
    opacity: .45;
    pointer-events: none;
}


/* =============================================================================
   SECTION 6 — THE REMOVED-ITEM GHOST SLOT
   -----------------------------------------------------------------------------
   Drawn IN THE LIST, in the place the line occupied — the design's own rule. The
   hatched ground is what marks the slot as vacated rather than occupied.
   ============================================================================= */

.ct-gone {
    padding: 15px 22px;
    background: repeating-linear-gradient(135deg,
        var(--brand-surface-recess),
        var(--brand-surface-recess) 9px,
        #F6F3EC 9px,
        #F6F3EC 18px);
}

.ct-gone__inner {
    display: grid;
    grid-template-columns: var(--cart-thumb) minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    background: var(--brand-card-face);
    border: 1px dashed color-mix(in oklab, var(--brand-text-soft) 55%, #FFFFFF);
    border-radius: var(--radius-brand-lg);
    padding: 14px 16px;
}

.ct-gone__thumb {
    position: relative;
    width: var(--cart-thumb);
    height: var(--cart-thumb);
    border-radius: var(--radius-brand-lg);
    border: 1px solid var(--brand-border);
    background: var(--brand-surface-recess);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-gone__thumb img[alt] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    filter: grayscale(1);
    opacity: .42;
}

.ct-gone__cross {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text-muted);
}

.ct-gone__cross svg {
    width: 14px;
    height: 14px;
}

.ct-gone__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ct-gone__head {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.ct-gone__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--brand-text-muted);
}

.ct-gone__badge {
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-chip-sm);
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand-text-muted);
}

.ct-gone__text {
    font-size: 12px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--brand-text-muted);
    text-wrap: pretty;
}

.ct-gone__amount {
    color: var(--brand-text);
    font-weight: 600;
}

.ct-gone__link {
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: 9px;
    background: var(--brand-primary-band);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-primary-deep);
}

.ct-gone__link:hover {
    background: var(--brand-primary-tint);
}

.ct-gone__link svg {
    width: 13px;
    height: 13px;
}

.ct-gone__dismiss {
    align-self: flex-start;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--brand-text-soft);
    font-size: 11px;
    font-weight: 600;
}

.ct-gone__dismiss:hover {
    background: var(--brand-surface-recess);
    color: var(--brand-text);
}


/* =============================================================================
   SECTION 7 — THE SUMMARY COLUMN
   ============================================================================= */

.ct-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-summary__card {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-card-lg);
    box-shadow: var(--brand-shadow-cart-summary);
    overflow: hidden;
}

.ct-summary--sell .ct-summary__card {
    border-color: var(--brand-sell-edge);
}

.ct-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 20px 13px;
    background: var(--brand-primary-band);
    border-bottom: 1px solid var(--brand-primary-edge);
}

.ct-summary--sell .ct-summary__head {
    background: var(--brand-sell-band);
    border-bottom-color: var(--brand-sell-edge);
}

.ct-summary__title {
    font-size: 13.5px;
    font-weight: 700;
}

.ct-summary__badge {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-sell-edge);
    border-radius: 20px;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand-sell-deep);
}

.ct-summary__updated {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-primary-deep);
}

.ct-summary__updated .ct-dot {
    width: 6px;
    height: 6px;
}

.ct-summary__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ct-row__label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-row__label--code {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ct-row__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
}

.ct-row__value--off {
    font-weight: 700;
    color: var(--brand-discount);
}

.ct-row__value--off .ct-unit {
    color: inherit;
}

.ct-row__value--muted {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--brand-text-muted);
}

.ct-row__value--free {
    font-weight: 700;
    color: var(--brand-success);
}

/* The price-change row. Same colour rule as a line banner, one level up. */
.ct-summary__change {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-radius: var(--radius-brand);
    padding: 9px 11px;
}

.ct-summary__change.is-bad {
    background: var(--brand-discount-band);
    border: 1px solid var(--brand-discount-rule);
    color: var(--brand-discount);
}

.ct-summary__change.is-good {
    background: var(--brand-success-band);
    border: 1px solid var(--brand-success-rule);
    color: var(--brand-success);
}

.ct-summary__change-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-summary__change-title {
    font-size: 11.5px;
    font-weight: 700;
}

.ct-summary__change-link {
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: underline;
}

.ct-summary__change-amount {
    font-size: 13px;
    font-weight: 800;
}

.ct-summary__change-amount .ct-unit {
    color: inherit;
    font-size: 10.5px;
}

.ct-summary__rule {
    height: 1px;
    background: var(--brand-border);
}

.ct-summary__payable {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.ct-summary__payable-label {
    font-size: 13px;
    font-weight: 700;
}

.ct-summary__payable-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .01em;
}

.ct-summary__payable-value .ct-unit {
    font-size: 12px;
    font-weight: 600;
}

.ct-summary__note,
.ct-summary__guest {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--brand-text-muted);
    text-wrap: pretty;
}

.ct-summary__note svg,
.ct-summary__guest svg {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    color: var(--brand-text-soft);
}

.ct-summary__guest {
    justify-content: center;
    text-align: center;
}

.ct-summary__confirm {
    font-size: 11px;
    line-height: 1.75;
    font-weight: 500;
    color: var(--brand-text-muted);
    text-align: center;
}

.ct-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.ct-trust__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.ct-trust__item svg {
    width: 13px;
    height: 13px;
    color: var(--brand-success);
}


/* =============================================================================
   SECTION 8 — THE DISCOUNT-CODE PANEL
   ============================================================================= */

.ct-discount {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-panel);
    box-shadow: var(--brand-shadow-cart-card);
    overflow: hidden;
}

.ct-discount--applied {
    border-color: var(--brand-success-rule);
}

.ct-discount--invalid {
    border-color: var(--brand-discount-rule);
}

.ct-discount--guestprompt {
    border-color: var(--brand-primary-edge);
}

.ct-discount__toggle {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    text-align: start;
}

.ct-discount__toggle:hover {
    background: var(--brand-surface-recess);
}

.ct-discount__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--brand-border);
}

.ct-discount__toggle-icon svg,
.ct-discount__head svg {
    width: 17px;
    height: 17px;
    color: var(--brand-primary-deep);
}

.ct-discount__toggle-title {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-text);
}

.ct-discount__toggle-chev svg {
    width: 15px;
    height: 15px;
    color: var(--brand-text-soft);
    transition: transform .18s ease;
}

.ct-discount__toggle[aria-expanded="true"] .ct-discount__toggle-chev svg {
    transform: rotate(180deg);
}

.ct-discount__panel {
    padding: 15px 18px 17px;
    border-top: 1px solid var(--brand-border);
}

.ct-discount__toggle + .ct-discount__panel {
    border-top: 1px solid var(--brand-border);
}

.ct-discount__head + .ct-discount__panel {
    border-top: 0;
}

.ct-discount__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.ct-discount__field-row {
    display: flex;
    gap: 8px;
}

.ct-discount__field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 13px;
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand);
    box-shadow: var(--brand-shadow-inset);
}

.ct-discount__field:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-tint);
}

.ct-discount__field.is-invalid {
    background: var(--brand-card-face);
    border-color: var(--brand-discount);
    box-shadow: 0 0 0 3px var(--brand-discount-band);
}

.ct-discount__field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: 500 12.5px "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--brand-text);
    text-align: left;
}

.ct-discount__field input::placeholder {
    color: var(--brand-text-soft);
}

.ct-discount__apply {
    flex: none;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-brand);
    background: var(--brand-primary);
    color: var(--brand-primary-ink);
    font-size: 12.5px;
    font-weight: 700;
}

.ct-discount__apply:disabled {
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-soft);
    cursor: not-allowed;
}

.ct-discount__hint {
    font-size: 11px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.ct-discount__error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.75;
    font-weight: 600;
    color: var(--brand-discount);
}

.ct-discount__error svg {
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.ct-discount__offers {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-primary-deep);
}

/* ── Applied ────────────────────────────────────────────────────────────────── */
.ct-discount__applied {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    background: var(--brand-success-band);
}

.ct-discount__tick {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-success-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-success);
}

.ct-discount__tick svg {
    width: 15px;
    height: 15px;
}

.ct-discount__applied-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ct-discount__applied-head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ct-discount__applied-head .ct-code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 11.5px;
}

.ct-discount__applied-state {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-success);
}

.ct-discount__applied-amount {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.ct-discount__applied form {
    margin: 0;
}

.ct-discount__drop {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--brand-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-discount__drop:hover {
    border-color: var(--brand-discount-rule);
    background: var(--brand-card-face);
    color: var(--brand-discount);
}

.ct-discount__drop svg {
    width: 13px;
    height: 13px;
}

/* ── The guest prompt ───────────────────────────────────────────────────────── */
.ct-discount__guest {
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-md);
    padding: 13px 14px;
}

.ct-discount__guest-head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.ct-discount__guest-head svg {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--brand-primary-deep);
}

.ct-discount__guest-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: 4px;
}

.ct-discount__guest-body {
    display: block;
    font-size: 11px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-discount__guest-actions {
    display: flex;
    gap: 8px;
}

.ct-discount__guest-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: var(--radius-brand);
    background: var(--brand-primary);
    color: var(--brand-primary-ink);
    font-size: 12.5px;
    font-weight: 800;
}

.ct-discount__guest-cta:hover {
    background: var(--brand-primary-deep);
    color: #FFF9E9;
}

.ct-discount__guest-later {
    flex: none;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand);
    background: var(--brand-card-face);
    color: var(--brand-primary-deep);
    font-size: 12px;
    font-weight: 700;
}


/* =============================================================================
   SECTION 9 — THE MOBILE STICKY TOTAL BAR
   -----------------------------------------------------------------------------
   Desktop has the summary column, so the bar is display:none there and becomes
   a fixed bar below 992px. It sits ABOVE the site's own bottom navigation, never
   over it: `bottom` is the nav's height plus the safe-area inset, and the footer
   already reserves 150px + safe-area on this page through shop.js's
   `.has-cart-cta` class.
   ============================================================================= */

.ct-bar {
    display: none;
}


/* =============================================================================
   SECTION 10 — NOTICES
   ============================================================================= */

/* ── The change acknowledgement ─────────────────────────────────────────────── */
.ct-notice {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-card-lg);
    box-shadow: var(--brand-shadow-cart-card);
    overflow: hidden;
}

.ct-notice__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 20px 15px;
    background: linear-gradient(180deg, var(--brand-primary-band), var(--brand-card-face));
}

.ct-notice__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
}

.ct-notice__icon svg {
    width: 19px;
    height: 19px;
}

.ct-notice__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-notice__title {
    font-size: 14.5px;
    font-weight: 800;
}

.ct-notice__body {
    font-size: 12.5px;
    line-height: 1.85;
    font-weight: 500;
    color: var(--brand-text-muted);
    max-width: 760px;
    text-wrap: pretty;
}

.ct-notice__net {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--brand-border);
}

.ct-notice__net-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-notice__net-value {
    font-size: 16px;
    font-weight: 800;
}

.ct-notice__net-value .ct-unit {
    color: inherit;
    font-size: 11px;
}

.ct-notice__net-value.is-bad { color: var(--brand-discount); }
.ct-notice__net-value.is-good { color: var(--brand-success); }

.ct-notice__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 13px 20px 15px;
    border-top: 1px solid var(--brand-border);
}

.ct-notice__chip {
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--radius-brand);
    padding: 7px 11px;
    font-size: 11.5px;
    font-weight: 700;
}

.ct-notice__chip svg {
    width: 13px;
    height: 13px;
}

.ct-notice__chip.is-bad {
    background: var(--brand-discount-band);
    border: 1px solid var(--brand-discount-rule);
    color: var(--brand-discount);
}

.ct-notice__chip.is-good {
    background: var(--brand-success-band);
    border: 1px solid var(--brand-success-rule);
    color: var(--brand-success);
}

.ct-notice__chip.is-info {
    background: var(--brand-info-band);
    border: 1px solid var(--brand-info-rule);
    color: var(--brand-info);
}

.ct-notice__chip.is-neutral {
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
}

.ct-notice__ack {
    margin-inline-start: auto;
}

.ct-notice__ack-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand);
    background: var(--brand-card-face);
    color: var(--brand-text);
    font-size: 11.5px;
    font-weight: 700;
}

.ct-notice__ack-btn:hover {
    border-color: var(--brand-primary-edge);
    background: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

/* ── The merge notice ───────────────────────────────────────────────────────── */
.ct-merge {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-success-rule);
    border-radius: var(--radius-brand-card-lg);
    overflow: hidden;
}

.ct-merge__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 20px 15px;
    background: var(--brand-success-band);
}

.ct-merge__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-success-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-success);
}

.ct-merge__icon svg {
    width: 19px;
    height: 19px;
}

.ct-merge__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-merge__title {
    font-size: 14.5px;
    font-weight: 800;
}

.ct-merge__body {
    font-size: 12.5px;
    line-height: 1.85;
    font-weight: 500;
    color: var(--brand-text-muted);
    max-width: 820px;
    text-wrap: pretty;
}

.ct-merge__close {
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--brand-success-rule);
    border-radius: 9px;
    background: var(--brand-card-face);
    color: var(--brand-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-merge__close svg {
    width: 14px;
    height: 14px;
}

.ct-merge__counts {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--brand-border);
}

.ct-merge__count {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: 11px;
    padding: 9px 13px;
}

.ct-merge__count--result {
    background: var(--brand-success-band);
    border-color: var(--brand-success-rule);
    color: var(--brand-success);
}

.ct-merge__count-label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-merge__count--result .ct-merge__count-label {
    color: inherit;
    font-weight: 600;
}

.ct-merge__count-value {
    font-size: 13px;
    font-weight: 800;
}

.ct-merge__plus {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-text-soft);
}

/* ── The guest ribbon ───────────────────────────────────────────────────────── */
.ct-guest {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-panel);
    padding: 14px 18px;
}

.ct-guest__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-brand);
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text-muted);
}

.ct-guest__icon svg {
    width: 17px;
    height: 17px;
}

.ct-guest__text {
    flex: 1;
    font-size: 12px;
    line-height: 1.85;
    font-weight: 500;
    color: var(--brand-text);
    text-wrap: pretty;
}

.ct-guest__cta {
    flex: none;
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand);
    background: var(--brand-primary-band);
    color: var(--brand-primary-deep);
    font-size: 12px;
    font-weight: 700;
}

.ct-guest__cta:hover {
    background: var(--brand-primary-tint);
}

/* ── The price-lock reassurance and the sell framing ────────────────────────── */
.ct-lock,
.ct-estimate,
.ct-photos {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border-radius: var(--radius-brand-lg);
    padding: 14px 17px;
}

.ct-lock {
    align-items: center;
    background: var(--brand-info-band);
    border: 1px solid var(--brand-info-rule);
}

.ct-lock__icon svg {
    width: 18px;
    height: 18px;
    color: var(--brand-info);
}

.ct-lock__text {
    font-size: 12px;
    line-height: 1.85;
    font-weight: 500;
    color: var(--brand-text);
    text-wrap: pretty;
}

.ct-estimate {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-sell-edge);
    border-radius: var(--radius-brand-panel);
    padding: 15px 18px;
}

.ct-estimate__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-brand);
    background: var(--brand-sell-band);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-sell-deep);
}

.ct-estimate__icon svg {
    width: 18px;
    height: 18px;
}

.ct-estimate__text,
.ct-photos__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ct-estimate__title,
.ct-photos__title {
    font-size: 13px;
    font-weight: 700;
}

.ct-estimate__body,
.ct-photos__body {
    font-size: 12px;
    line-height: 1.85;
    font-weight: 500;
    color: var(--brand-text-muted);
    max-width: 720px;
    text-wrap: pretty;
}

.ct-photos {
    align-items: center;
    gap: 16px;
    background: var(--brand-card-face);
    border: 1px dashed var(--brand-primary-edge);
    border-radius: var(--radius-brand-panel);
    padding: 16px 18px;
}

.ct-photos__icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-brand);
    background: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
}

.ct-photos__icon svg {
    width: 20px;
    height: 20px;
}


/* =============================================================================
   SECTION 11 — THE SPREAD EXPLAINER
   ============================================================================= */

.ct-spread {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-panel);
    box-shadow: var(--brand-shadow-cart-card);
    overflow: hidden;
}

.ct-spread.is-open {
    border-color: var(--brand-primary-edge);
}

.ct-spread__toggle {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    text-align: start;
}

.ct-spread__toggle:hover {
    background: var(--brand-surface-recess);
}

.ct-spread.is-open .ct-spread__toggle {
    background: var(--brand-primary-band);
    border-bottom: 1px solid var(--brand-primary-edge);
}

.ct-spread__icon svg {
    width: 17px;
    height: 17px;
    color: var(--brand-primary-deep);
}

.ct-spread__question {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.6;
    font-weight: 700;
}

.ct-spread__chev svg {
    width: 15px;
    height: 15px;
    color: var(--brand-text-soft);
    transition: transform .18s ease;
}

.ct-spread.is-open .ct-spread__chev svg {
    transform: rotate(180deg);
}

.ct-spread__panel {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-spread__intro {
    margin: 0;
    font-size: 12px;
    line-height: 1.9;
    font-weight: 500;
    color: var(--brand-text-muted);
    text-wrap: pretty;
}

.ct-spread__table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-md);
    overflow: hidden;
}

.ct-spread__cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-top: 1px solid var(--brand-border);
}

.ct-spread__cell:first-child {
    border-top: 0;
    background: var(--brand-surface-recess);
}

.ct-spread__cell-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.ct-spread__cell-value {
    font-size: 12px;
    font-weight: 700;
}

.ct-spread__cell-value--sell {
    color: var(--brand-sell-deep);
}

.ct-spread__cell--diff {
    background: var(--brand-primary-band);
}

.ct-spread__cell--diff .ct-spread__cell-label {
    font-weight: 700;
    color: var(--brand-primary-deep);
}

.ct-spread__diff {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.ct-spread__diff-value {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--brand-primary-deep);
}

.ct-spread__diff-pct {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.ct-spread__example {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.ct-spread__reasons {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ct-spread__reasons li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 11.5px;
    line-height: 1.75;
    font-weight: 500;
    color: var(--brand-text);
}

.ct-spread__num {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-brand-chip-sm);
    background: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--brand-primary-deep);
    margin-top: 1px;
}

.ct-spread__foot {
    border-top: 1px solid var(--brand-border);
    padding-top: 13px;
    font-size: 11.5px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-spread__foot a {
    font-weight: 700;
    color: var(--brand-primary-deep);
}


/* =============================================================================
   SECTION 12 — THE EMPTY STATE
   ============================================================================= */

.ct-empty {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ct-empty__stale {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-success-band);
    border: 1px solid var(--brand-success-rule);
    border-radius: var(--radius-brand-panel);
    padding: 13px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-success-ink);
}

.ct-empty__stale svg {
    width: 16px;
    height: 16px;
    color: var(--brand-success);
}

.ct-empty__card {
    position: relative;
    overflow: hidden;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-section);
    padding: 44px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ct-empty--sell .ct-empty__card {
    border-color: var(--brand-sell-edge);
}

.ct-empty__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brand-primary-pale) 1px, transparent 1.1px);
    background-size: 16px 16px;
    opacity: .35;
}

.ct-empty__bracket {
    position: absolute;
    width: 20px;
    height: 20px;
}

.ct-empty__bracket--tr {
    top: 14px;
    right: 14px;
    border-top: 1px solid var(--brand-primary-bracket);
    border-right: 1px solid var(--brand-primary-bracket);
    border-top-right-radius: 6px;
}

.ct-empty__bracket--bl {
    bottom: 14px;
    left: 14px;
    border-bottom: 1px solid var(--brand-primary-bracket);
    border-left: 1px solid var(--brand-primary-bracket);
    border-bottom-left-radius: 6px;
}

.ct-empty__medallion {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 1px solid var(--brand-primary-edge);
    background: linear-gradient(165deg, #FFFDF6, #F6F0E1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
    box-shadow: var(--brand-shadow-empty-icon);
}

.ct-empty--sell .ct-empty__medallion {
    border-color: var(--brand-sell-edge);
    color: var(--brand-sell-deep);
}

.ct-empty__medallion svg {
    width: 44px;
    height: 44px;
}

.ct-empty__coin {
    position: absolute;
    bottom: -4px;
    inset-inline-start: -4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(160deg, #F9EACB, #D2A64C);
    border: 2px solid var(--brand-card-face);
    box-shadow: 0 2px 6px rgba(59, 46, 12, .2);
}

.ct-empty__text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

.ct-empty__title {
    font-size: 19px;
    font-weight: 800;
}

.ct-empty__body {
    font-size: 12.5px;
    line-height: 1.95;
    font-weight: 500;
    color: var(--brand-text-muted);
    text-align: center;
    max-width: 440px;
    text-wrap: pretty;
}

.ct-empty__amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 2px;
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand);
    padding: 7px 12px;
}

.ct-empty__amount-label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.ct-empty__amount-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--brand-text);
}

.ct-empty__actions {
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.ct-empty__chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--brand-border);
    width: 100%;
    box-sizing: border-box;
}

.ct-empty__chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-text);
}

.ct-empty__chip:hover {
    border-color: var(--brand-primary-edge);
    background: var(--brand-primary-band);
    color: var(--brand-primary-deep);
}

.ct-empty__chip-shape {
    width: 14px;
    height: 14px;
    flex: none;
}

.ct-empty__chip-shape--coin {
    border-radius: 50%;
    background: conic-gradient(from 205deg, #F7E7C2, #C9A24A 25%, #FCF4E2 50%, #BC9236 75%, #F7E7C2);
}

.ct-empty__chip-shape--bar {
    width: 16px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(135deg, #F7E7C2, #C9A24A 40%, #BC9236);
}

.ct-empty__chip-shape--melt {
    height: 12px;
    border-radius: 50% 42% 56% 44%;
    background: radial-gradient(circle at 34% 30%, #FDF6E4, #D6AE55 60%, #B58C2C);
}

.ct-empty__rates {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--brand-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct-empty__rates-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-text-muted);
    text-align: center;
}

.ct-empty__rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 9px;
}

.ct-empty__rate {
    border: 1px solid var(--brand-border);
    border-radius: 11px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--brand-surface-recess);
}

.ct-empty__rate-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.ct-empty__rate-value {
    font-size: 12px;
    font-weight: 700;
}

.ct-empty__rate-note {
    font-size: 10px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.ct-empty__other {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-lg);
    padding: 13px 16px;
}

.ct-empty__other--sell {
    border-color: var(--brand-sell-edge);
}

.ct-empty__other-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--brand-primary-band);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
}

.ct-empty__other--sell .ct-empty__other-icon {
    background: var(--brand-sell-band);
    color: var(--brand-sell-deep);
}

.ct-empty__other-icon svg {
    width: 15px;
    height: 15px;
}

.ct-empty__other-text {
    flex: 1;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--brand-text);
}

.ct-empty__other-cta {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--brand-primary-edge);
    border-radius: 9px;
    background: var(--brand-card-face);
    color: var(--brand-primary-deep);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.ct-empty__other--sell .ct-empty__other-cta {
    border-color: var(--brand-sell-edge);
    color: var(--brand-sell-deep);
}


/* =============================================================================
   SECTION 13 — MOBILE
   -----------------------------------------------------------------------------
   Everything below 992px. The same nodes, re-laid-out: the two columns become
   one, each row becomes a two-tier card, and the summary's payable figure is
   repeated by the fixed bar at the bottom of the screen.

   992, not 768, because that is where the approved mobile header takes over and
   where `.menu-bottom-site` appears — the bar has to clear the same furniture
   the header does.
   ============================================================================= */

@media (max-width: 991.98px) {

    .ct-page {
        padding: 12px var(--cart-gutter-sm) 24px;
        gap: 14px;
    }

    /* No extra clearance here, deliberately. The FOOTER follows the cart on every
       page, and shop.js already gives it `.has-cart-cta` — which footer-redesign.css
       SECTION 6 answers with `padding-bottom: calc(150px + env(safe-area-inset-bottom))`,
       enough for the bar AND the bottom nav. Reserving the same space again on
       .ct-page would open ~150px of dead band between the last cart row and the
       footer, which is what a naive reading of "the bar overlaps content" produces.
       A small tail keeps the summary card off the bar's shadow, nothing more. */
    .ct-page--has-bar {
        padding-bottom: 18px;
    }

    .ct-crumbs {
        display: none;
    }

    /* ── Head ──────────────────────────────────────────────────────────────── */
    .ct-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ct-head__title {
        font-size: 21px;
    }

    .ct-head__sub {
        font-size: 11.5px;
    }

    .ct-head__switch {
        align-items: stretch;
    }

    .ct-switch {
        border-radius: var(--radius-brand-md);
        padding: 3px;
    }

    .ct-switch__seg {
        flex: 1;
    }

    /* 44px touch targets throughout, per the reference's mobile board. */
    .ct-switch__seg > a,
    .ct-switch__seg > span {
        justify-content: center;
        height: 44px;
        padding: 0 10px;
        font-size: 12.5px;
    }

    .ct-rule {
        display: none;
    }

    /* ── Body: one column, summary after the list ──────────────────────────── */
    .ct-body {
        flex-direction: column;
        gap: 11px;
    }

    .ct-aside {
        width: auto;
        order: 2;
    }

    /* position:sticky on a full-width column below a fixed bar is noise, not
       help — the bar already keeps the amount in view. */
    .ct-aside.is-sticky {
        position: static;
    }

    .ct-main {
        order: 1;
        gap: 11px;
    }

    /* ── The list becomes free-standing cards ──────────────────────────────── */
    .ct-list {
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .ct-list__head {
        border-radius: var(--radius-brand-card-sm);
        border: 1px solid var(--brand-border);
        background: var(--brand-card-face);
        padding: 11px 13px;
    }

    .ct-list__live span:last-child {
        font-size: 10.5px;
    }

    .ct-list__row + .ct-list__row .ct-line,
    .ct-list__row + #ct-removed .ct-gone {
        border-top: 0;
    }

    .ct-list__foot {
        border-radius: var(--radius-brand-card-sm);
        border: 1px solid var(--brand-border);
        background: var(--brand-card-face);
        padding: 12px 13px;
    }

    /* ── A row: two tiers ──────────────────────────────────────────────────── */
    .ct-line {
        background: var(--brand-card-face);
        border: 1px solid var(--brand-border);
        border-radius: var(--radius-brand-card-sm);
        padding: 13px;
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .ct-line--bad {
        background: var(--brand-discount-band);
        border-color: var(--brand-discount-rule);
        border-inline-start: 3px solid var(--brand-discount);
    }

    .ct-line--good {
        background: var(--brand-success-band);
        border-color: var(--brand-success-rule);
        border-inline-start: 3px solid var(--brand-success);
    }

    .ct-line--clamped {
        background: var(--brand-info-band);
        border-color: var(--brand-info-rule);
        border-inline-start: 3px solid var(--brand-info);
    }

    .ct-line__banner,
    .ct-line__banner + .ct-line__grid {
        padding: 0;
    }

    .ct-line__banner {
        font-size: 10.5px;
    }

    /*
        Tier 1: thumbnail · identity · remove.
        Then the unit price, indented under the identity block.
        Tier 2, under a full-width hairline: stepper · line total.

        `.ct-line__amounts` dissolves so its three children can take their own
        order in the row's flex flow — no node moves and nothing is duplicated.
    */
    .ct-line__grid,
    .ct-line--compact .ct-line__grid,
    .ct-page--sell .ct-line__grid,
    .ct-page--sell .ct-line--compact .ct-line__grid {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 11px;
        padding: 0;
    }

    .ct-line__amounts,
    .ct-page--sell .ct-line__amounts,
    .ct-line--compact .ct-line__amounts,
    .ct-page--sell .ct-line--compact .ct-line__amounts {
        display: contents;
    }

    .ct-line__thumb,
    .ct-line--compact .ct-line__thumb {
        order: 1;
        width: var(--cart-thumb-sm);
        height: var(--cart-thumb-sm);
        border-radius: var(--radius-brand-md);
    }

    .ct-line__body {
        order: 2;
        gap: 7px;
    }

    .ct-line__remove {
        order: 3;
    }

    /* Indented past the thumbnail so it reads as part of the identity block,
       which is where the mobile reference puts it. */
    .ct-line__pricing {
        order: 4;
        flex: 1 0 100%;
        justify-content: flex-start;
        margin-top: -4px;
        padding-inline-start: calc(var(--cart-thumb-sm) + 11px);
    }

    .ct-line__split {
        order: 5;
        display: block;
        flex: 1 0 100%;
        height: 1px;
        background: var(--brand-border);
        margin-top: 0;
    }

    .ct-line--bad .ct-line__split { background: var(--brand-discount-rule); }
    .ct-line--good .ct-line__split { background: var(--brand-success-rule); }
    .ct-line--clamped .ct-line__split { background: var(--brand-info-rule); }

    .ct-line__qty {
        order: 6;
        flex: 0 1 auto;
    }

    .ct-line__money {
        order: 7;
        flex: 0 1 auto;
        margin-inline-start: auto;
    }

    .ct-line__title,
    .ct-line--compact .ct-line__title {
        font-size: 13.5px;
    }

    .ct-line--compact .ct-line__attrs {
        max-height: none;
    }

    .ct-chip {
        border-radius: 6px;
        padding: 3px 7px;
        font-size: 10px;
    }

    .ct-line__remove-btn {
        width: 44px;
        height: 44px;
        border-color: var(--brand-border);
        background: var(--brand-card-face);
    }

    .ct-line__qty {
        align-items: flex-start;
        gap: 4px;
    }

    .ct-line__money {
        align-items: flex-end;
        justify-content: flex-end;
        gap: 2px;
    }

    .ct-line__total {
        font-size: 15px;
    }

    .ct-line__unit,
    .ct-line__prices,
    .ct-line__foot,
    .ct-was-now {
        font-size: 10.5px;
    }

    /* ── Stepper: 44px targets ─────────────────────────────────────────────── */
    .ct-stepper {
        height: 44px;
    }

    .ct-stepper__btn {
        width: 44px;
        height: 44px;
    }

    .ct-stepper__value {
        min-width: 30px;
        height: 44px;
        line-height: 44px;
        font-size: 13px;
    }

    .ct-stepper__note {
        font-size: 9.5px;
        text-align: start;
    }

    /* ── Ghost slot ────────────────────────────────────────────────────────── */
    .ct-gone {
        padding: 0;
        background: none;
    }

    .ct-gone__inner {
        grid-template-columns: var(--cart-thumb-sm) minmax(0, 1fr);
        gap: 11px;
        padding: 13px;
        border-radius: var(--radius-brand-card-sm);
        background: var(--brand-card-face);
    }

    .ct-gone__thumb {
        width: var(--cart-thumb-sm);
        height: var(--cart-thumb-sm);
        border-radius: var(--radius-brand-md);
    }

    .ct-gone__title { font-size: 13px; }
    .ct-gone__text { font-size: 10.5px; line-height: 1.75; }

    .ct-gone__link {
        height: 44px;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .ct-gone__dismiss {
        grid-column: 1 / -1;
        align-self: stretch;
        height: 44px;
    }

    /* ── Notices ───────────────────────────────────────────────────────────── */
    .ct-notice__head {
        gap: 11px;
        padding: 14px;
    }

    .ct-notice__icon {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-brand);
    }

    .ct-notice__icon svg { width: 16px; height: 16px; }

    .ct-notice__title { font-size: 12.5px; line-height: 1.6; }
    .ct-notice__body { font-size: 11px; line-height: 1.8; }

    /* The net figure moves under the chips: at 390px a bordered column beside
       the text leaves the sentence about 140px wide. */
    .ct-notice__net {
        display: none;
    }

    .ct-notice__chips {
        gap: 6px;
        padding: 0 14px 13px;
        border-top: 0;
    }

    .ct-notice__chip {
        border-radius: var(--radius-brand-chip);
        padding: 5px 8px;
        font-size: 10.5px;
    }

    .ct-notice__ack {
        width: 100%;
        margin-inline-start: 0;
    }

    .ct-notice__ack-btn {
        width: 100%;
        height: 44px;
    }

    .ct-merge__head { padding: 13px; gap: 11px; }
    .ct-merge__title { font-size: 12.5px; }
    .ct-merge__body { font-size: 10.5px; line-height: 1.8; }
    .ct-merge__close { width: 44px; height: 44px; border-radius: var(--radius-brand); }

    .ct-merge__counts {
        gap: 8px;
        padding: 12px 13px;
    }

    .ct-merge__count {
        flex: 1;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 8px 10px;
    }

    .ct-merge__count-label { font-size: 10px; }
    .ct-merge__count-value { font-size: 11.5px; }
    .ct-merge__plus { display: none; }

    .ct-guest {
        gap: 10px;
        padding: 12px 13px;
        border-radius: var(--radius-brand-lg);
    }

    .ct-guest__icon { width: 30px; height: 30px; }
    .ct-guest__text { font-size: 10.5px; line-height: 1.75; }

    .ct-guest__cta {
        height: 44px;
        padding: 0 14px;
        font-size: 11.5px;
    }

    .ct-lock,
    .ct-estimate,
    .ct-photos {
        padding: 13px;
        border-radius: var(--radius-brand-lg);
    }

    .ct-lock__text,
    .ct-estimate__body,
    .ct-photos__body {
        font-size: 10.5px;
        line-height: 1.8;
    }

    .ct-estimate__title,
    .ct-photos__title { font-size: 12px; }

    .ct-estimate__icon,
    .ct-photos__icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .ct-estimate__icon svg,
    .ct-photos__icon svg { width: 16px; height: 16px; }

    /* ── Summary + discount ────────────────────────────────────────────────── */
    .ct-summary__card {
        border-radius: var(--radius-brand-card-sm);
        box-shadow: var(--brand-shadow-cart-card);
    }

    .ct-summary__head { padding: 13px 15px 11px; }
    .ct-summary__title { font-size: 12.5px; }
    .ct-summary__body { padding: 15px; gap: 11px; }

    .ct-row__label { font-size: 11.5px; }
    .ct-row__value { font-size: 12px; }

    .ct-summary__payable-label { font-size: 12.5px; }
    .ct-summary__payable-value { font-size: 16px; }

    /* The desktop column ends with the CTA and the trust row; on mobile the
       fixed bar carries the CTA, so the column's copy would be a second, less
       prominent one. */
    .ct-summary__body > .ct-cta,
    .ct-summary__body > .ct-cta--off,
    .ct-summary__body > .ct-trust,
    .ct-summary__body > .ct-summary__note {
        display: none;
    }

    .ct-discount { border-radius: var(--radius-brand-lg); }
    .ct-discount__toggle,
    .ct-discount__head { padding: 14px; }
    .ct-discount__panel { padding: 13px 14px 15px; }

    .ct-discount__field-row {
        flex-direction: column;
    }

    .ct-discount__field,
    .ct-discount__apply {
        height: 48px;
        border-radius: 11px;
    }

    .ct-discount__drop {
        width: 44px;
        height: 44px;
        border-color: var(--brand-border);
        background: var(--brand-card-face);
    }

    .ct-discount__guest-actions { flex-direction: column; }
    .ct-discount__guest-cta,
    .ct-discount__guest-later { height: 44px; }

    .ct-aside__note { display: none; }

    .ct-spread__toggle { padding: 14px; }
    .ct-spread__question { font-size: 12px; }
    .ct-spread__panel { padding: 14px; }

    /* ── Empty ─────────────────────────────────────────────────────────────── */
    .ct-empty__card {
        padding: 34px 20px 26px;
        border-radius: var(--radius-brand-card-lg);
        gap: 13px;
    }

    .ct-empty__medallion { width: 84px; height: 84px; }
    .ct-empty__medallion svg { width: 36px; height: 36px; }
    .ct-empty__coin { width: 28px; height: 28px; bottom: -3px; inset-inline-start: -3px; }

    .ct-empty__title { font-size: 16px; }
    .ct-empty__body { font-size: 11.5px; line-height: 1.9; }

    .ct-empty__actions {
        width: 100%;
        flex-direction: column;
    }

    .ct-empty__actions .ct-cta,
    .ct-empty__actions .ct-cta-ghost {
        width: 100%;
        box-sizing: border-box;
        height: 48px;
        justify-content: center;
    }

    .ct-empty__chip { height: 44px; padding: 0 16px; }

    .ct-empty__rates-grid { grid-template-columns: 1fr; }

    .ct-empty__other {
        gap: 10px;
        padding: 13px;
        border-radius: var(--radius-brand-lg);
    }

    .ct-empty__other-text { font-size: 11px; line-height: 1.75; }

    .ct-empty__other-cta { height: 44px; }

    /* ── THE STICKY TOTAL BAR ──────────────────────────────────────────────── */
    .ct-bar {
        position: fixed;
        inset-inline: 0;
        /* ABOVE the site's bottom navigation, never over it. */
        bottom: calc(var(--cart-bottomnav-h) + env(safe-area-inset-bottom));
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-sizing: border-box;
        padding: 11px 14px;
        background: var(--brand-surface-2);
        border-top: 1px solid var(--brand-primary-edge);
        box-shadow: var(--brand-shadow-cart-bar);
    }

    .ct-bar--sell {
        border-top-color: var(--brand-sell-edge);
    }

    .ct-bar__figure {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .ct-bar__label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10.5px;
        font-weight: 500;
        color: var(--brand-text-muted);
    }

    .ct-bar__badge {
        background: var(--brand-sell-band);
        border: 1px solid var(--brand-sell-edge);
        border-radius: 6px;
        padding: 1px 6px;
        font-size: 9px;
        font-weight: 700;
        color: var(--brand-sell-deep);
    }

    .ct-bar__value {
        font-size: 16px;
        font-weight: 800;
        color: var(--brand-text);
    }

    .ct-bar__value .ct-unit { font-size: 10px; }

    .ct-bar__note {
        font-size: 9.5px;
        font-weight: 600;
    }

    .ct-bar__note.is-bad { color: var(--brand-discount); }
    .ct-bar__note.is-good { color: var(--brand-success); }
    .ct-bar__note--muted { color: var(--brand-text-soft); }

    .ct-bar__cta {
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 48px;
        padding: 0 18px;
        border-radius: var(--radius-brand-md);
        background: var(--brand-primary);
        color: var(--brand-primary-ink);
        font-size: 13px;
        font-weight: 800;
        box-shadow: var(--brand-shadow-gold-sm);
    }

    .ct-bar__cta svg { width: 15px; height: 15px; }

    .ct-bar__cta--off {
        background: var(--brand-disabled-face);
        color: var(--brand-disabled-ink);
        box-shadow: none;
    }
}