/*
 * Mobile refinement layer — loaded LAST, on purpose.
 *
 * ⚠️ THIS LIVED IN style.css AND SILENTLY DID NOTHING.
 *
 * xl-checkout-theme.php injects its stylesheet at wp_enqueue_scripts priority
 * 20, after the theme's at 10. Its plain `:root` therefore overrode the token
 * values set here inside a media query — same specificity, later in the
 * cascade — and its `.form-row label` rule beat this one for the same reason.
 *
 * The symptom was not a broken page: the radii changed (tokenised in the
 * source files) while the type sizes and padding did not, so it looked like a
 * partial success rather than a cascade problem. Its own file at priority 30
 * puts it after everything it needs to refine.
 */
/* ══ Mobile refinement layer ══════════════════════════════════════════════ */
/*
 * Everything below applies only on phones, where nearly all of this store's
 * traffic is. It is deliberately last in the file so it wins on source order
 * without needing !important or deeper selectors.
 *
 * Written from a measured audit of the cart and checkout, not from taste:
 * eight corner radii on one page, form labels at 13px, and tap targets down to
 * 8×18px.
 */
@media (max-width: 47.99rem) {

  :root {
    /*
     * Corners tighten. A 20px radius on a full-width card at 390px reads soft
     * and bulky.
     *
     * These went to 14/12/8 first, which was still visibly rounded at phone
     * width — a card that spans the whole screen shows its corners against the
     * page edge, so the same radius reads much heavier than it does on a narrow
     * desktop column. 10px is the point where the card still reads as a card
     * but the page reads as sharp.
     *
     * --x-r-pill is deliberately untouched: buttons stay fully round, and the
     * contrast against squarer cards is what makes them read as pressable.
     */
    --x-r-sm: 0.375rem;   /*  6px */
    --x-r-md: 0.5rem;     /*  8px */
    --x-r-lg: 0.625rem;   /* 10px */

    /* 18px gutters instead of 20px — two extra pixels of content on each side
       matters when the viewport is 390. */
    --x-pad: 1.125rem;
  }

  /* ── Type ──────────────────────────────────────────────────────────────── */
  /*
   * ⚠️ 13px IS THE FLOOR FOR ANYTHING FUNCTIONAL, NOT THE DEFAULT.
   *
   * The audit found form labels, rung labels and summary rows at 11–13px.
   * At arm's length on a phone that is legible-if-you-squint, and the places it
   * appeared were the ones a customer has to read to give you money: field
   * labels, the shipping line, the discount row.
   *
   * Legal fine print stays small on purpose — it is reference, not instruction.
   */
  .woocommerce form .form-row label,
  .x-co__stepnote,
  .x-cart__unit,
  .x-sum__line,
  .x-sum__line span,
  .x-drawer__laddertext {
    font-size: 0.875rem;      /* 14px */
    line-height: 1.5;
  }

  .x-drawer__runglabel { font-size: 0.75rem; }   /* 11px -> 12px */

  .woocommerce form .form-row .description,
  #billing_phone-description { font-size: 0.8125rem; line-height: 1.5; }

  /* Prices and totals carry weight rather than size, so the row stays compact. */
  .x-sum__total,
  .x-sum__total strong { font-size: 1.0625rem; }

  /* ── Space ─────────────────────────────────────────────────────────────── */
  /*
   * Card padding drops from 24px to 18px. On a 390px screen that is 12px of
   * width returned per card and, stacked five deep on a checkout, ~60px of
   * scroll — without the layout feeling tight, because the gutters shrank too.
   */
  /*
   * ⚠️ `.x-cart__main` IS A LAYOUT COLUMN, NOT A CARD — IT WAS IN THIS LIST.
   *
   * Padding it inset the ladder and the item card by 16px while the order
   * summary, which is the other grid column, sat flush against the container.
   * The two cards on the bag page therefore had different left edges and
   * different widths, which reads as a rendering fault rather than a design.
   * The cards inside it carry their own padding; the column carries none.
   */
  .x-co__step,
  #customer_details .woocommerce-shipping-fields,
  #customer_details .woocommerce-additional-fields,
  #order_review,
  .x-sum {
    padding: 1rem;
  }

  .x-cart__main { padding: 0; }

  /*
   * ⚠️ THE GAP BETWEEN CARDS MUST EXCEED THE PADDING INSIDE THEM.
   *
   * Cards sat 12px apart with 18px of padding inside, so the space within a
   * step was larger than the space between steps — and the eye groups by
   * proximity, not by borders. Three separate steps read as one lumpy column.
   *
   * The rhythm is now, smallest to largest:
   *   6px   label to its input        — they are one thing
   *   14px  field to field            — siblings
   *   16px  note to the first field   — end of the preamble
   *   20px  card to card              — a different step
   *
   * Every value is on the 2px grid the rest of the theme uses, and each level
   * is visibly bigger than the one below it. That ordering is what makes the
   * grouping legible without a single extra line or box.
   *
   * ⚠️ THE LADDER IS THE CONSTRAINT, NOT THE NUMBERS.
   *
   * These were each cut by 4px to make the page sleeker, in step, so the
   * ordering survived. Card padding is 16px and the gap between cards is 20px —
   * shrinking the gap alone would put the space inside a step above the space
   * between steps again, and the three steps would re-merge into one column.
   */
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    gap: 0.875rem 0.75rem;   /* 14px between rows, 12px between first/last name */
  }

  .woocommerce form .form-row label { margin-bottom: 0.375rem; }

  .x-co__step,
  #customer_details .woocommerce-shipping-fields,
  #customer_details .woocommerce-additional-fields { margin-bottom: 1.25rem; }

  .x-co__stephead { margin-bottom: 0.375rem; }
  .x-co__stepnote { margin-bottom: 1rem; }

  /*
   * ⚠️ ONE-CONTROL CARDS DO NOT NEED A FULL CARD'S PADDING.
   *
   * "Ship to a different address?" is a single checkbox and "Delivery
   * instructions" a single textarea, but both carried the same 18px box as a
   * nine-field address step. Equal weight for unequal content is what made the
   * lower half of the page feel padded out.
   */
  #customer_details .woocommerce-shipping-fields:not(:has(.shipping_address)) {
    padding: 0.875rem 1.125rem;
  }

  /* The OTP row sat in a pocket of its own making: a margin above the button,
     another below, then the description's own margin on top of that. */
  .xl-otp-row { margin: 0.625rem 0 0; }
  #xl-otp-status { margin-top: 0.25rem; }
  .woocommerce form .form-row .description { margin-top: 0.5rem; }

  /* The gate note is an interruption, not a section — it should sit close to
     the fields it is explaining. */
  .x-co__steplock { margin-bottom: 1.125rem; padding: 0.75rem 0.875rem; }

  /* ── Targets ───────────────────────────────────────────────────────────── */
  /*
   * ⚠️ MEASURED, EACH ONE.
   *
   * Remove was 43×19. Update bag 67×15. The coupon "×" was 8×18 — an eight
   * pixel wide target next to a discount somebody is trying to keep. The
   * padding is invisible; the underline and layout stay where the design put
   * them.
   */
  .x-cart__remove,
  .x-cart__update,
  .x-cart__continue,
  .showcoupon,
  .woocommerce-remove-coupon,
  .xl-bar__back {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0.5rem;
    touch-action: manipulation;
  }

  .x-sum__drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: -0.75rem 0;
    touch-action: manipulation;
  }

  /* The quantity stepper in the cart — a different class from the one on
     product cards, which is why the earlier fix missed it. */
  .x-qtybox__step {
    width: 2.5rem;
    height: 2.5rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Chrome ────────────────────────────────────────────────────────────── */
  /* The checkout bar is navigation, not content; it should not cost a fifth of
     the first screen. */
  .xl-bar { padding: 0.85rem var(--x-pad) 0.7rem; }
  .xl-bar__logo img { height: 1.15rem; }

  /* WooCommerce notices are transient. Full card padding on a message that
     disappears on the next page load is scroll spent on nothing. */
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    padding: 0.75rem 0.9rem !important;
    font-size: 0.8125rem;
    border-radius: var(--x-r-md);
  }
}

/* ══ Checkout summary fold ════════════════════════════════════════════════ */
@media (max-width: 47.99rem) {
  .x-review__foldsum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--x-ink-soft, #6f6a5e);
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
  }
  /* Safari still draws its own triangle without this. */
  .x-review__foldsum::-webkit-details-marker { display: none; }

  .x-review__foldhint {
    font-size: 0.8125rem;
    color: var(--x-ink, #201f1c);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .x-review__fold[open] .x-review__foldhint { text-decoration: none; opacity: 0.6; }
  .x-review__fold[open] .x-review__foldhint::after { content: " ▴"; }
  .x-review__fold:not([open]) .x-review__foldhint::after { content: " ▾"; }
}

/* The fold is a phone affordance only — on desktop the summary sits in a
   column with room to spare, and a disclosure there is just a hidden list. */
@media (min-width: 48rem) {
  .x-review__foldsum { display: none; }
}

/* ══ Mini cart drawer ═════════════════════════════════════════════════════ */
@media (max-width: 47.99rem) {
  /*
   * ⚠️ 90%, NOT FULL WIDTH.
   *
   * `width: min(26rem, 100%)` resolves to 100% on any phone, so the drawer
   * covered the screen edge to edge and stopped reading as a layer over the
   * shop — it looked like a page navigation, which invites the back button
   * rather than a tap outside to dismiss.
   *
   * Leaving a strip of the darkened page visible is what tells someone the
   * shop is still underneath and still there to go back to.
   */
  .x-drawer__panel {
    width: 90%;
    max-width: 90%;

    /* The border is doing the separating job the shadow now does better. */
    border-left: 0;

    /* Warm-tinted to match the shadows already in the theme — a neutral grey
       shadow reads cold against this palette. Deep enough to register against
       the scrim, which is already rgba(24,20,18,.45). */
    box-shadow: -1.25rem 0 2.5rem rgba(24, 20, 18, 0.28);

    /* Only the leading edge is rounded; the other three meet the screen. */
    border-radius: var(--x-r-lg) 0 0 var(--x-r-lg);

    /*
     * ⚠️ WITHOUT THIS THE RADIUS DOES NOTHING VISIBLE.
     *
     * The head and footer have their own backgrounds and paint over the
     * panel's rounded corner, so the sheet rendered square while the CSS
     * claimed otherwise. Clipping at the panel is safe here because the body
     * scrolls inside itself — nothing needs to escape the sheet.
     */
    overflow: hidden;
  }
}

/* ══ Checkout, phone ══════════════════════════════════════════════════════ */
@media (max-width: 47.99rem) {

  /*
   * ⚠️ THE STEP NOTE WAS INDENTED TO CLEAR THE NUMBER BADGE. NOTHING ELSE IS.
   *
   * `padding-left: 2.5rem` lines the note up under the step title, which reads
   * fine beside a heading on desktop. On a phone the fields below start at the
   * card edge, so the note alone sits 40px in and the card gets a ragged left
   * margin — the sort of thing that reads as sloppy without being nameable.
   */
  .x-co__stepnote { padding-left: 0; }

  /*
   * ⚠️ THE ONE CONTROL THAT UNLOCKS THE PAGE LOOKED THE LEAST IMPORTANT.
   *
   * Every address field is disabled until the phone is verified, so "Verify
   * phone" is the only thing a new customer can do — and it was a 12px ghost
   * pill under the field, quieter than the labels around it. It now reads as
   * the action it is, and clears 44px.
   */
  /*
   * ⚠️ FULL WIDTH, BECAUSE IT IS THE ONLY THING ON THE PAGE THAT WORKS YET.
   *
   * A pill sized to its own text sits in the middle of an otherwise full-width
   * column of inputs and reads as secondary — but every field below it is
   * disabled until this button is pressed. Matching the width of the field it
   * belongs to makes it look like the next step in the same flow, and gives it
   * the largest possible target on the screen where it matters most.
   */
  #xl-otp-verify {
    background: var(--x-dark) !important;
    color: var(--x-bg) !important;
    border-color: var(--x-dark) !important;
    flex: 1 1 100%;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.01em;
    touch-action: manipulation;
  }

  .xl-otp-row { gap: 0.5rem; flex-wrap: wrap; }

  /* "Change number" is a quiet text control and should sit under the button,
     not compete with it for the row. */
  #xl-otp-change { flex: 1 1 100%; text-align: center; min-height: 2.25rem; }

  /*
   * ⚠️ AN EMPTY STATUS LINE MUST NOT RESERVE A ROW.
   *
   * `flex: 1 1 100%` gave this span a full row of its own plus the row gap,
   * whether or not it had anything to say — which is most of the time, since it
   * is only written to while an OTP is in flight. That is dead vertical space
   * directly under the primary button.
   *
   * `:empty` is exact here: the script sets it with .text(), so it genuinely has
   * no child nodes when idle, and it re-appears the moment a message lands.
   */
  #xl-otp-status { flex: 1 1 100%; }
  #xl-otp-status:empty { display: none; }

  /*
   * ⚠️ THE PLACEHOLDER DID NOT FIT THE BOX.
   *
   * "Landmark, gate code, preferred time — anything that helps us find you"
   * wraps to three lines at this width and the textarea was sized for two, so
   * the hint was cut off mid-sentence — which looks like a rendering fault
   * rather than a long placeholder.
   */
  .woocommerce form .form-row textarea { min-height: 6.5rem; line-height: 1.5; }

  /*
   * ⚠️ STEP 3'S HEADING SAT OUTSIDE ITS CARD; STEPS 1 AND 2 SIT INSIDE THEIRS.
   *
   * Three numbered steps should look like three of the same thing. Pulling the
   * heading onto the card closes the gap and makes the rhythm read.
   */
  /*
   * ⚠️ THE ID SELECTOR WINS — THIS MUST BE `.x-co__asidehead`.
   *
   * The class rule below was already here and looked correct, but the heading
   * kept a 16px bottom margin: xl-checkout-theme.php sets
   * `.x-co__asidehead { margin: 0 0 1rem }`, and an ID beats a class no
   * matter which stylesheet loads last. So the heading's tinted band and the
   * card body's tinted band rendered as two separate slabs with a stripe of
   * page background between them — measured at exactly 16px.
   *
   * Matching on the ID as well as the class is what actually closes the seam.
   */
  /*
   * ⚠️ STEP 3 WAS PAYING FOR ITS PADDING TWICE — 34px AGAINST 16px ELSEWHERE.
   *
   * `#order_review` is the step card and gets `padding: 1rem` with the others,
   * but `.x-review` inside it brings its own
   * `padding: clamp(1.125rem, 2.5vw, 1.5rem)` from woocommerce.css — plus its
   * own border, radius and background. So step 3 was a card inside a card:
   * visibly roomier than steps 1 and 2, and 18px narrower in content.
   *
   * The inner box gives all four up on phones. `#order_review` is the card; the
   * summary is just its contents. (This is the third place on this page where
   * two reasonable rules each added a gutter — see the notes on the side
   * gutters and on the top spacing.)
   */
  #order_review .x-review {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .x-co__asidehead.x-co__asidehead,
  .x-co__asidehead {
    margin: 0;
    padding: 1rem 1rem 0;
    background: var(--x-surface-warm, #efe7dd);
    border: 1px solid var(--x-line, #e1dace);
    border-bottom: 0;
    border-radius: var(--x-r-lg) var(--x-r-lg) 0 0;
  }
  #order_review {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
  }
}

/* ══ Checkout gutters ═════════════════════════════════════════════════════ */
@media (max-width: 47.99rem) {
  /*
   * ⚠️ THE GUTTER WAS BEING PAID FOR TWICE.
   *
   * xl-checkout-theme.php puts `padding: 0 1.25rem 4rem` on <main> for the
   * checkout, and `.x-container` inside it adds `padding-inline: var(--x-pad)`
   * again. Both look reasonable in isolation; nested, they gave 38px of gutter
   * per side and left 244px of usable width on a 320px phone.
   *
   * `.x-container` is the one that should own it — it is the rule every other
   * page uses, so the checkout lines up with the rest of the site. <main> keeps
   * its bottom padding, which is doing a different job.
   */
  /*
   * ⚠️ 64px OF EMPTY PAGE UNDER THE LAST THING ON IT.
   *
   * <main> carries `padding: 0 1.25rem 4rem`. On a browsing page that bottom
   * 4rem keeps the last product clear of the footer. The checkout has no footer
   * — it ends at the trust marks under "Place order" — so the padding rendered
   * as a blank cream band roughly a fifth of a phone screen tall, which reads as
   * the page having failed to finish loading.
   */
  /*
   * ⚠️ `:not(.woocommerce-order-received)` IS HERE TO WIN, NOT TO EXCLUDE.
   *
   * xl-checkout-theme.php prints `body.woocommerce-checkout:not(.woocommerce-order-received) main
   * { padding: 0 1.25rem 4rem }` in an inline block — (0,3,1). This rule was
   * (0,1,1) and lost, so it has never applied: the 1.25rem stayed, and stacked on
   * the inner `.x-container`'s own 15.6rem-clamped padding to inset the checkout
   * 36px from each edge where the cart and shop sit at 16px.
   *
   * Matching the inline rule's shape is what makes this take effect. The
   * order-received selector keeps its own bottom-padding fix.
   */
  body.woocommerce-checkout:not(.woocommerce-order-received) main,
  body.woocommerce-order-received main {
    padding-inline: 0;
    padding-bottom: 1.5rem;
  }

  /*
   * ⚠️ 56px OF NOTHING BETWEEN THE HEADER AND THE FIRST THING TO READ.
   *
   * Two rules were stacking again, the same way the side gutters did:
   *
   *     .xl-bar + .xl-rule   margin-bottom: 32px   (below the header rule)
   *     .x-container         padding-top:    24px  (every page's top breathing)
   *
   * On a browsing page the container's top padding is the only separation there
   * is, so it earns its 24px. On the checkout the hairline rule under the brand
   * bar already draws the boundary, so the padding is paying twice for one job —
   * and on a 320px screen it pushed the first step card most of a screen down.
   *
   * The rule keeps a margin, just a phone-sized one.
   */
  /*
   * ⚠️ `:not(.co-header__bar)` — THE BRAND BAR IS AN `.x-container` TOO.
   *
   * header.php prints it as `<div class="x-container co-header__bar">`, so this
   * rule was stripping the 13px above the logo as well as below it: the bar
   * measured 39px with its contents flush to y=0, and the logo's ascenders sat
   * against the top edge of the screen. The comment above describes removing
   * padding from the page content under the bar, which is what this now does.
   */
  /*
   * ⚠️ `main` — BECAUSE THE HEADER AND FOOTER ARE `.x-container`s TOO.
   *
   * The `:not(.co-header__bar)` above was the first attempt at this and it only
   * spared the CHECKOUT brand bar. The site header prints
   * `<div class="x-container x-header__bar">`, the promo strip prints
   * `<div class="x-container x-promo__inner">`, and the footer prints
   * `<div class="x-container x-footer__inner">` — none of which are that class,
   * so all three had their top padding stripped on every checkout and
   * order-received page.
   *
   * Measured on the confirmation page against the homepage: the promo strip came
   * out 26px instead of 36, the header bar 52 instead of 64, with bottom padding
   * intact in both — the signature of a rule zeroing only the top. The header
   * looked subtly squashed on exactly the pages a customer is most careful on.
   *
   * The comment above says the intent is "removing padding from the page content
   * under the bar". `main` is that content, and the header and footer are
   * outside it, so scoping to `main` says what was meant and cannot catch
   * chrome again.
   */
  body.woocommerce-checkout main .x-container,
  body.woocommerce-order-received main .x-container {
    padding-top: 0;
  }

  body.woocommerce-checkout .xl-bar + .xl-rule,
  body.woocommerce-order-received .xl-bar + .xl-rule {
    margin-bottom: 0.875rem;   /* 14px, from 32px */
  }

  /* The brand bar itself is navigation, not content — it should not own the
     top fifth of a phone screen. */
  .xl-bar { padding: 0.75rem var(--x-pad) 0.7rem; }

  /* The coupon row is an aside most customers skip; it does not need a
     full card's worth of air beneath it. */
  .woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 0.875rem; }

  /*
   * Step titles were set at 21.6px for a desktop column. At phone width that
   * competes with the page heading and forces the numbered badge to grow with
   * it, so each card opened with a heavy two-line block before any content.
   */
  .x-co__steptitle { font-size: 1.125rem !important; }   /* 18px, from 21.6px */
  .x-co__stepno { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
}

/* ══ Cart page ════════════════════════════════════════════════════════════ */
@media (max-width: 47.99rem) {
  /*
   * ⚠️ THE ROW RAN OFF THE SCREEN. IT HAD TWO CAUSES, NOT ONE.
   *
   * `.x-cart__head` puts the name and the line total side by side, and
   * `.x-cart__money` is `white-space: nowrap`. At 320px the detail column is
   * about 168px wide once the gutters, card padding and thumbnail are taken
   * out; the total needs ~78px of that and refuses to wrap, so the name was
   * left ~74px and broke into four lines — and the total still overflowed the
   * card, taking the quantity stepper with it.
   *
   * Side by side simply does not fit at this width, so the head stops being a
   * row. `display: contents` dissolves it into the flex column around it,
   * which lets the name, the total and the stepper be ordered directly without
   * touching the markup — the alternative was a wrapper that exists only on
   * phones.
   */
  /*
   * The same rhythm the checkout uses, so the two pages feel like one flow:
   *   16px  inside a card
   *   20px  between cards
   * Anything looser and the bag reads as padded out; anything tighter and the
   * ladder, the items and the summary stop reading as three separate things.
   */
  .x-cart { gap: 1.25rem; }
  .x-cart .x-drawer__ladder { margin-bottom: 1.25rem; }
  .x-cart__tools { margin-top: 0.75rem; }
  .x-cart__continue { margin-top: 1rem; }

  .x-sum__title { font-size: 1.125rem; margin-bottom: 0.75rem; }
  .x-sum__line { padding: 0.25rem 0; }

  .x-cart__item {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem;
  }

  .x-cart__head { display: contents; }
  .x-cart__head > div:first-child { order: 1; min-width: 0; }
  .x-cart__money { order: 2; text-align: left; font-size: 0.9375rem; }
  .x-cart__row   { order: 3; }

  .x-cart__detail { gap: 0.5rem; }
  .x-cart__name { font-size: 0.9375rem; line-height: 1.3; }

  /*
   * ⚠️ "Remove" WAS BEING CUT OFF BY THE CARD EDGE.
   *
   * The stepper needs about 132px once its buttons are grown to a tap target,
   * and "Remove" another 55px with the gap — roughly 203px in a column that is
   * about 172px wide at 320px. It overflowed rather than wrapped, because a flex
   * row does not wrap unless told to.
   *
   * Both are done here: the pieces shrink to what a phone actually needs, and
   * `flex-wrap` is the guarantee — whatever the width, the row folds instead of
   * running off the card.
   */
  .x-cart__row {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  .x-qtybox__step { width: 2.25rem; height: 2.25rem; }
  .x-qtybox__n { width: 2rem; }

  /*
   * ⚠️ THE LADDER LABELS OVERLAPPED INTO ONE WORD.
   *
   * Each rung is absolutely positioned at its own percentage with a 6rem label
   * centred beneath it. Free shipping (₹699) and Buy 2 (₹799) sit close
   * together on the scale, so at phone width their labels were about 60px apart
   * with 96px of text each — they overprinted and read as
   * "Free shippingBuy 2 @ ₹799".
   *
   * Narrower labels alone cannot fix it; two rungs can always be closer than
   * any label is wide. Staggering them onto two lines means they never share a
   * band, whatever the spend thresholds are set to.
   */
  .x-drawer__track { height: 6rem; }
  .x-drawer__rung { width: 5rem; }
  .x-drawer__runglabel { font-size: 0.6875rem; line-height: 1.25; }
  .x-drawer__rung:nth-of-type(even) .x-drawer__runglabel { margin-top: 1.5rem; }
}