/* ===========================================================================
   MIRA REDESIGN — purchase flow (Phase 3)

   The `casual` theme's third Mira layer: bag, wishlist, checkout, order
   confirmed, payment failed, invoice, track. Loaded after `mira.css` and
   `mira-shop.css` (see theme.json), so tokens and atoms are already declared
   here and are never redeclared.

   WHY A THIRD FILE and not an append: same reason as Phase 2. Each phase owns
   a layer so two sessions cannot lose each other's work, and a phase can be
   rolled back by removing one entry from theme.json.

   ⚠️ NO BLOCK NAME DECLARED HERE MAY EXIST IN mira.css OR mira-shop.css.
   `.mira-search` was Phase 1's header pill and Phase 2 nearly redeclared it for
   the search page, which would have restyled the header on every screen. The
   later sheet silently wins. Gated by checks/mira_layer_check.py.

   Blocks owned by this file, and nothing else owns them:
     .mira-bag      the cart screen        (SF:843-890)
     .mira-wish     the wishlist grid      (SF:1010-1028)
     .mira-co       checkout               (SF:895-963)
     .mira-done     order confirmed        (SF:968-988)
     .mira-fail     payment failed         (SF:991-1006)
     .mira-inv      invoice sheet          (SF:1296-1342)
     .mira-track    track order            (SF:1380-1413)

   ---------------------------------------------------------------------------
   THE CENTRAL PROBLEM OF THIS PHASE: the platform's cart is a five-column
   <table> and the design is a flowing list.

   The table is NOT cosmetic. `$('#cart_tbody').html(data.markup)` re-injects
   <tr> rows after every quantity change, and `.load(location.href + " .custom--table.table-border.radius-10")`
   re-fetches by that exact selector after a remove. Both are in the page's own
   script, which is a THEME file here — but the markup partial
   `markup_for_controller/cart_products.blade.php` is what the CONTROLLER
   renders, so the row shape must match on both sides or the first quantity
   click reverts the design.

   The answer is to keep the table ELEMENTS and re-declare their display. A
   <tr> can be `display:flex` and a <td> can be `display:contents`; the DOM
   contract is untouched, the AJAX still finds `#cart_tbody`, and the design's
   row renders exactly. Rewriting the markup to <div>s would have been the
   obvious move and would have broken both AJAX paths.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Shared page furniture.

   Cart, wishlist and track all open with the same title block — SF:844-845,
   SF:1011-1012, SF:1382-1383. One rule, three screens.
   --------------------------------------------------------------------------- */

/* ⚠️ `.mira-pagehead` is OWNED BY mira.css, where it is the surface-tinted
   BAND behind the breadcrumb and the shared <h1> on every page. mira-flow.css
   loads after it, so redeclaring the base here restyled that band site-wide.

   This is a different thing that happened to want the same name: the title
   block INSIDE cart / wishlist / track, on those screens' own ground. It is a
   modifier, so the band keeps its background and this only overrides layout.

   The blade carries `class="mira-pagehead mira-pagehead--flow"`. */
.mira-pagehead--flow {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    padding-block-end: 0;
    margin-block-end: clamp(20px, 2.6cqi, 34px);
}

/* ⚠️ Scoped to `--flow`. Unscoped, this would set a clamp(30px,4cqi,52px)
   display face on the SHARED breadcrumb <h1> that mira.css draws on every
   page of the site, not just these three screens. */
.mira-pagehead--flow .mira-pagehead__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(30px, 4cqi, 52px);
    line-height: 1.05;
    color: var(--mira-ink);
    padding-inline: 0;
}

.mira-pagehead--flow .mira-pagehead__sub {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-sub);
}

/* The screen padding shared by every Phase 3 page — SF:843. */
.mira-flowpage {
    padding-block: clamp(26px, 3.4cqi, 48px) clamp(46px, 6cqi, 84px);
    padding-inline: clamp(18px, 4.2cqi, 64px);
}

/* The centred variant — success, failure, track — SF:968, SF:991, SF:1380. */
.mira-flowpage--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* ---------------------------------------------------------------------------
   2. The bag (cart) — SF:843-890.

   Pattern B: `flex:1.6` list beside a `flex:1` sticky summary.
   --------------------------------------------------------------------------- */

.mira-bag {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(22px, 3cqi, 44px);
    align-items: flex-start;
    margin-block-start: clamp(20px, 2.6cqi, 34px);
}

.mira-bag__list {
    flex: 1.6 1 min(400px, 100%);
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

/* --- The table-to-list conversion ----------------------------------------
   See the file header. The elements stay, the display changes.

   `display:contents` on the <td> makes its children direct flex items of the
   <tr>, so the design's row (image · body · price) is achievable without
   touching the five-cell DOM the AJAX depends on. */
.mira-bag__table,
.mira-bag__table tbody,
.mira-bag__table thead {
    display: block;
    inline-size: 100%;
    border: 0;
    background: none;
}

/* The column headings are a table affordance. The design has none, and the
   row is self-describing, so they are removed visually but left in the DOM
   for screen readers. */
.mira-bag__table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mira-bag__table tr {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-block: 18px;
    border-block-start: 1px solid var(--mira-ln);
    background: none;
}

.mira-bag__table td {
    display: contents;
    padding: 0;
    border: 0;
    background: none;
}

/* ⚠️ `[hidden]` must be restored AFTER the rule above. The design's row shows
   the image, the body and the line total; the platform's row has five cells
   and the other two must still EXIST so the controller-rendered markup keeps
   the same shape. They are marked `hidden` — but a class/element rule that
   sets `display` beats the `hidden` attribute's UA `display:none`, so without
   this the unit price and an empty cell would print into the row. Same trap as
   the Phase 2 lightbox. */
.mira-bag__table td[hidden] {
    display: none;
}

/* ⚠️ The legacy sheet renders the responsive table by printing `data-label`
   into a ::before pseudo-element under 991px. With `display:contents` that
   label becomes a stray flex item and the row reads
   "Product<image>Price<price>". It is suppressed here rather than by removing
   the attribute, because the attribute is what the legacy sheet keys on and
   other themes still use it. */
.mira-bag__table td::before {
    content: none !important;
    display: none !important;
}

.mira-bag__thumb {
    inline-size: 84px;
    block-size: 104px;
    flex: none;
    border-radius: 12px;
    background: var(--mira-sf);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mira-bag__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.mira-bag__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-inline-size: 0;
    flex: 1;
}

.mira-bag__name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.25;
    color: var(--mira-ink);
    transition: color .2s ease;
}

.mira-bag__name:hover {
    color: var(--mira-acc);
}

.mira-bag__meta {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mira-sub);
}

.mira-bag__row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-start: 6px;
    flex-wrap: wrap;
}

/* The quantity pill — SF:855-859. Smaller than the PDP's (34×36 vs 42×46).

   ⚠️ The legacy `.product-quantity` class MUST stay on this element: the cart
   script reads `el.parent().find('.quantity-input')`. Its legacy rule sets
   `position:absolute`, a fixed width and a margin, so each is unwound here on
   the SAME property — a rule that does not mention `position` cannot override
   one that does. Same fix as the PDP stepper in Phase 2. */
.mira-bag .mira-qty2.product-quantity {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: transparent;
    flex: none;
}

.mira-bag .mira-qty2 .substract,
.mira-bag .mira-qty2 .plus {
    position: static;
    inset: auto;
    transform: none;
    inline-size: 34px;
    block-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--mira-ink);
    cursor: pointer;
    transition: color .2s ease;
}

.mira-bag .mira-qty2 .substract:hover,
.mira-bag .mira-qty2 .plus:hover {
    color: var(--mira-acc);
}

.mira-bag .mira-qty2 .o-i {
    font-size: 16px;
}

.mira-bag .mira-qty2 .quantity-input {
    position: static;
    inline-size: 30px;
    min-inline-size: 22px;
    block-size: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    text-align: center;
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    -moz-appearance: textfield;
}

.mira-bag .mira-qty2 .quantity-input::-webkit-outer-spin-button,
.mira-bag .mira-qty2 .quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove / move-to-wishlist — SF:860. Text links, not icon buttons.

   ⚠️ `.close-table-cart` / `.close-table-wishlist` / `.move-to-wishlist` are
   the platform's own hooks and the handlers require a `.ff-jost` ANCESTOR
   (`$(document).on('click', '.ff-jost .close-table-cart', ...)`), so that class
   stays on the cell even though it is a font utility we do not want. Its only
   legacy declaration is a font-family, overridden here. */
.mira-bag__act {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--mira-sub);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease;
}

.mira-bag__act:hover {
    color: var(--mira-acc);
}

.mira-bag__act .o-i {
    font-size: 15px;
}

/* The legacy cells carry `.ff-jost`, which names a font this theme does not
   load. Reset it so the row inherits Tajawal. */
.mira-bag .ff-jost {
    font-family: var(--mira-ui);
}

.mira-bag__line {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1;
    color: var(--mira-acd);
    white-space: nowrap;
    flex: none;
}

/* Promo row — SF:866-869. */
.mira-bag__promo {
    display: flex;
    gap: 8px;
    padding-block: 18px;
    border-block-start: 1px solid var(--mira-ln);
}

.mira-bag__promo input {
    flex: 1;
    min-inline-size: 0;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-pp);
    padding: 12px 18px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-ink);
    outline: none;
    transition: border-color .2s ease;
}

.mira-bag__promo input:focus {
    border-color: var(--mira-acc);
}

.mira-bag__promo button {
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-ink);
    color: var(--mira-bg);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.mira-bag__promo button:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

/* Clear cart, kept from the platform but demoted to a quiet link. */
.mira-bag__clear {
    align-self: flex-start;
    margin-block-start: 4px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    color: var(--mira-sub);
    transition: color .2s ease;
}

.mira-bag__clear:hover {
    color: var(--mira-acc);
}


/* --- The summary card — SF:871-888 --------------------------------------- */

.mira-sum {
    flex: 1 1 min(300px, 100%);
    background: var(--mira-pp);
    border: 1px solid var(--mira-ln);
    border-radius: 18px;
    padding: clamp(20px, 2.6cqi, 30px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    inset-block-start: var(--mira-head-h);
    min-inline-size: 0;
}

.mira-sum__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    color: var(--mira-ink);
}

/* The platform emits these as `ul > li`; the design draws a flex row. Both the
   list and the item are styled so the AJAX total refresh
   (`.price-total ... .find('span').last()`) keeps working. */
.mira-sum__row,
.mira-sum ul.coupon-contents-details-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-sub);
    border: 0;
}

.mira-sum li.coupon-contents-details-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    inline-size: 100%;
    padding: 0;
    border: 0;
    list-style: none;
}

/* The value side of every row. The platform wraps some in <h6>, which the
   base layer already un-clamps. */
.mira-sum__row > span:last-child,
.mira-sum li.coupon-contents-details-list-item > span:last-child {
    color: var(--mira-ink);
    font-weight: 700;
}

.mira-sum__row h6,
.mira-sum li h6 {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-sum__rule {
    block-size: 1px;
    background: var(--mira-ln);
}

/* Total — the one gradient-free display figure on this screen. */
.mira-sum__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.mira-sum__total-label {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-sum__total-value,
.mira-sum li.price-total .coupon-price {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--mira-acd);
}

.mira-sum li.price-total .coupon-title {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-ink);
}

/* Free-shipping progress — SF:877-880. */
.mira-sum__ship {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mira-sum__track {
    block-size: 5px;
    border-radius: 99px;
    background: var(--mira-sf);
    overflow: hidden;
}

.mira-sum__bar {
    block-size: 100%;
    background: var(--mira-acc);
    border-radius: 99px;
    transition: width .5s ease;
}

.mira-sum__note {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--mira-sub);
}

.mira-sum__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease;
}

.mira-sum__cta:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

.mira-sum__cta .o-i {
    font-size: 17px;
}

.mira-sum__continue {
    text-align: center;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: var(--mira-sub);
    transition: color .2s ease;
}

.mira-sum__continue:hover {
    color: var(--mira-acc);
}

/* Payment chips — SF:883-887. */
.mira-sum__pays {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.mira-sum__pay {
    padding: 5px 9px;
    border: 1px solid var(--mira-ln);
    border-radius: 7px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 8.5px;
    line-height: 1;
    color: var(--mira-sub);
}


/* ---------------------------------------------------------------------------
   3. Empty bag.

   The design has no empty-cart screen, so this is built from the design system
   — the success screen's centred column with the shop CTA. Flagged as an
   invented screen in the handoff.
   --------------------------------------------------------------------------- */

/* ⚠️ `.mira-empty` is OWNED BY mira-shop.css, which declares the base block
   (centred column, icon, bare h3/p) for the "no products match these filters"
   state. mira-flow.css loads AFTER it, so redeclaring the base here silently
   restyled every shop empty state.

   The empty BAG is the same idea at a different scale — a whole-page state
   rather than an in-grid one — so it is a MODIFIER of the shared block, not a
   second definition of it. Only the delta is declared.

   The blade carries `class="mira-empty mira-empty--page"`. */
.mira-empty--page {
    gap: 16px;
    padding-block: clamp(50px, 7cqi, 100px);
    padding-inline: clamp(18px, 4.2cqi, 64px);
}

.mira-empty__mark {
    inline-size: 88px;
    block-size: 88px;
    border-radius: 50%;
    background: var(--mira-sf);
    color: var(--mira-acd);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mira-empty__mark .o-i {
    font-size: 40px;
}

.mira-empty__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(26px, 3.6cqi, 44px);
    line-height: 1.1;
    color: var(--mira-ink);
}

.mira-empty__text {
    max-inline-size: 46ch;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.85;
    color: var(--mira-sub);
}


/* ---------------------------------------------------------------------------
   4. Wishlist — SF:1010-1028.

   Pattern A at 230px. The card is NOT `.mira-pcard`: the design draws a
   different one here (filled heart badge, "move to bag" outline button, 3/3.8
   ratio rather than 3/3.9), so it is its own block rather than a variant.
   --------------------------------------------------------------------------- */

.mira-wish {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 46%), 1fr));
    gap: clamp(14px, 1.8cqi, 22px);
    margin-block-start: clamp(20px, 2.6cqi, 34px);
}

.mira-wish__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-inline-size: 0;
}

.mira-wish__media {
    position: relative;
    aspect-ratio: 3 / 3.8;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mira-sf);
    cursor: pointer;
}

.mira-wish__media > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.mira-wish__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.mira-wish__card:hover .mira-wish__media img {
    transform: scale(1.05);
}

/* The filled heart. It is the REMOVE control here, so it must sit above the
   cover link and stay clickable — the opposite of the product card's hover
   image, which is decoration and is click-through. */
.mira-wish__heart {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--mira-acc);
    color: var(--mira-oac);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    transition: background .25s ease;
}

.mira-wish__heart:hover {
    background: var(--mira-acd);
}

.mira-wish__heart .o-i {
    font-size: 17px;
}

.mira-wish__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-inline: 4px;
}

.mira-wish__name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.3;
    color: var(--mira-ink);
    transition: color .2s ease;
}

.mira-wish__name:hover {
    color: var(--mira-acc);
}

.mira-wish__price {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-acd);
}

.mira-wish__move {
    margin-block-start: 4px;
    padding: 11px;
    border: 1px solid var(--mira-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.mira-wish__move:hover {
    background: var(--mira-ink);
    color: var(--mira-bg);
}


/* ---------------------------------------------------------------------------
   5. Checkout — SF:895-963.
   --------------------------------------------------------------------------- */

.mira-co__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-block-end: clamp(22px, 3cqi, 38px);
}

.mira-co__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(30px, 4cqi, 52px);
    line-height: 1.05;
    color: var(--mira-ink);
}

/* Step indicator — SF:897-905. */
.mira-co__steps {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mira-co__step {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mira-co__step-n {
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mira-sub);
    border: 1px solid var(--mira-ln);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

.mira-co__step.is-active .mira-co__step-n {
    background: var(--mira-acc);
    color: var(--mira-oac);
    border-color: var(--mira-acc);
}

.mira-co__step.is-done .mira-co__step-n {
    background: var(--mira-sf);
    color: var(--mira-acd);
    border-color: var(--mira-acc);
}

.mira-co__step-l {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-co__step.is-active .mira-co__step-l {
    color: var(--mira-ink);
}

.mira-co__step-line {
    inline-size: 26px;
    block-size: 1px;
    background: var(--mira-ln);
}

.mira-co__body {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(22px, 3cqi, 44px);
    align-items: flex-start;
}

.mira-co__main {
    flex: 1.5 1 min(400px, 100%);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.6cqi, 30px);
    min-inline-size: 0;
}

/* The billing form is one column of blocks. Styled through the PLATFORM's
   `.checkout-form` class rather than a Mira one: the class has to be there
   anyway — `.proceed_checkout_btn` submits with
   `$('form.checkout-form').trigger('submit')` — so adding a second name for
   the same element would be redundant. */
.mira-co .checkout-form {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.6cqi, 30px);
}

.mira-co__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mira-co__legend {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    color: var(--mira-ink);
}

/* Two-up field grid — SF:911. */
.mira-co__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
}

.mira-co__span {
    grid-column: 1 / -1;
}

/* The design has NO field labels — placeholders carry the meaning. The
   platform's blades emit <label>, which is better for accessibility, so the
   labels are kept in the DOM and hidden visually rather than deleted. */
.mira-co__field label,
.mira-co .label-title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ⚠️ `.form--control` is the platform's field class and is emitted by
   partials this phase does not own (country/state/city selects, the payment
   helper). Styling the class rather than only our own wrapper is what makes
   those inherit the design. */
.mira-co input[type="text"],
.mira-co input[type="tel"],
.mira-co input[type="email"],
.mira-co input[type="password"],
.mira-co input[type="number"],
.mira-co select,
.mira-co textarea,
.mira-co .form--control {
    inline-size: 100%;
    border: 1px solid var(--mira-ln);
    border-radius: 12px;
    background: var(--mira-pp);
    padding: 13px 16px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mira-ink);
    outline: none;
    transition: border-color .2s ease;
}

.mira-co input:focus,
.mira-co select:focus,
.mira-co textarea:focus,
.mira-co .form--control:focus {
    border-color: var(--mira-acc);
}

.mira-co textarea,
.mira-co .form--message {
    min-block-size: 96px;
    resize: vertical;
    line-height: 1.7;
}

/* Choice cards — shipping SF:928-932 and payment SF:939-944 share one shape.
   1.5px border, and the selected state is accent border + tinted ground. */
.mira-co__choice {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    border: 1.5px solid var(--mira-ln);
    border-radius: 14px;
    background: var(--mira-pp);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}

.mira-co__choice:hover {
    border-color: var(--mira-acc);
}

.mira-co__choice.is-selected {
    border-color: var(--mira-acc);
    background: var(--mira-sf);
}

/* The radio dot. The real <input type=radio> stays in the DOM — the platform
   reads `input[type=radio][name=shipping_method]` and `:checked` — but is
   visually replaced by this, so the design's dot is what shows. */
.mira-co__dot {
    inline-size: 15px;
    block-size: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--mira-ln);
    background: transparent;
    flex: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.mira-co__choice.is-selected .mira-co__dot {
    border-color: var(--mira-acc);
    background: var(--mira-acc);
    box-shadow: inset 0 0 0 3px var(--mira-pp);
}

.mira-co__choice input[type="radio"],
.mira-co__choice input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    inline-size: 1px;
    block-size: 1px;
}

.mira-co__choice-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-inline-size: 0;
}

.mira-co__choice-h {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-co__choice-p {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    color: var(--mira-sub);
}

.mira-co__choice-v {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: var(--mira-acd);
    white-space: nowrap;
}

.mira-co__choice .o-i {
    font-size: 19px;
    color: var(--mira-acc);
}

.mira-co__choice-s {
    margin-inline-start: auto;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-co__choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mira-co__choices--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
}

/* Place order — SF:947. */
.mira-co__place {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease;
}

.mira-co__place:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

.mira-co__place .o-i {
    font-size: 18px;
}

/* Order summary aside — SF:949-962. Narrower than the cart's (290 vs 300). */
.mira-co__aside {
    flex: 1 1 min(290px, 100%);
    background: var(--mira-pp);
    border: 1px solid var(--mira-ln);
    border-radius: 18px;
    padding: clamp(20px, 2.6cqi, 28px);
    display: flex;
    flex-direction: column;
    gap: 13px;
    position: sticky;
    inset-block-start: var(--mira-head-h);
    min-inline-size: 0;
}

.mira-co__oitem {
    display: flex;
    gap: 11px;
    align-items: center;
}

.mira-co__oitem img {
    inline-size: 46px;
    block-size: 56px;
    object-fit: cover;
    border-radius: 9px;
    flex: none;
    background: var(--mira-sf);
}

.mira-co__oitem-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-inline-size: 0;
}

.mira-co__oitem-name {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    color: var(--mira-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mira-co__oitem-q {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-co__oitem-line {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: var(--mira-acd);
    white-space: nowrap;
}

/* Coupon and gift card share the promo shape. The platform emits a <form>
   with `.coupon-code` + `.coupon-btn`, both of which the script reads. */
.mira-co__promo {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mira-co__promo input,
.mira-co__promo .form--control {
    flex: 1;
    min-inline-size: 0;
    inline-size: auto;
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 12px;
}

.mira-co__promo button {
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-ink);
    color: var(--mira-bg);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease;
}

.mira-co__promo button:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

/* The gift-card remove button ships with an inline red background from the
   platform; it is a destructive action, so it keeps a distinct treatment but
   through the palette rather than a hardcoded #dc3545. */
.mira-co__promo .gift-card-remove-btn {
    background: var(--mira-sf) !important;
    color: var(--mira-acd);
}

/* Agreement + terms row. */
.mira-co__agree {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--mira-sub);
}

.mira-co__agree input[type="checkbox"] {
    inline-size: 15px;
    block-size: 15px;
    flex: none;
    accent-color: var(--mira-acc);
}

.mira-co__agree a {
    color: var(--mira-acd);
    font-weight: 700;
}

/* The payment-gateway list is rendered by PaymentGatewayRenderHelper as
   `ul > li[data-gateway]` and the script toggles `.selected` on the <li>.
   Styled to the design's choice card without touching that markup. */
.mira-co .payment-gateway-wrapper ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mira-co .payment-gateway-wrapper ul li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border: 1.5px solid var(--mira-ln);
    border-radius: 14px;
    background: var(--mira-pp);
    cursor: pointer;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-ink);
    transition: border-color .25s ease, background .25s ease;
}

.mira-co .payment-gateway-wrapper ul li:hover {
    border-color: var(--mira-acc);
}

.mira-co .payment-gateway-wrapper ul li.selected {
    border-color: var(--mira-acc);
    background: var(--mira-sf);
}

.mira-co .payment-gateway-wrapper ul li img {
    max-block-size: 26px;
    inline-size: auto;
}


/* ---------------------------------------------------------------------------
   6. Order confirmed — SF:968-988 — and payment failed — SF:991-1006.

   One block, two marks: the success mark is an accent FILL, the failure mark
   is a tinted ground with an accent BORDER. Not a red/green pair; the design
   keeps both inside the palette.
   --------------------------------------------------------------------------- */

.mira-res {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    padding-block: clamp(50px, 7cqi, 100px);
    padding-inline: clamp(18px, 4.2cqi, 64px);
}

.mira-res__mark {
    inline-size: 88px;
    block-size: 88px;
    border-radius: 50%;
    background: var(--mira-acc);
    color: var(--mira-oac);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mira-pop .6s ease both;
}

.mira-res__mark .o-i {
    font-size: 42px;
}

.mira-res__mark--fail {
    background: var(--mira-sf);
    color: var(--mira-acd);
    border: 2px solid var(--mira-acc);
}

.mira-res__mark--fail .o-i {
    font-size: 40px;
}

.mira-res__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(30px, 4.2cqi, 56px);
    line-height: 1.1;
    color: var(--mira-ink);
}

/* The order number — a dashed accent pill, SF:971. */
.mira-res__no {
    padding: 8px 18px;
    border: 1px dashed var(--mira-acc);
    border-radius: 999px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-acd);
}

.mira-res__text {
    max-inline-size: 52ch;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.85;
    color: var(--mira-sub);
}

/* Horizontal step dots — SF:973-983. */
.mira-res__steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-block: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.mira-res__step {
    display: flex;
    align-items: center;
}

.mira-res__step-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-inline-size: 86px;
}

.mira-res__dot {
    inline-size: 13px;
    block-size: 13px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--mira-ln);
}

.mira-res__step.is-done .mira-res__dot {
    background: var(--mira-acc);
    border-color: var(--mira-acc);
}

.mira-res__step-l {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--mira-sub);
}

.mira-res__step.is-done .mira-res__step-l {
    color: var(--mira-ink);
}

.mira-res__step-line {
    inline-size: clamp(20px, 4cqi, 54px);
    block-size: 1.5px;
    background: var(--mira-ln);
    margin-block-end: 20px;
}

/* Failure reasons — SF:996-1000. */
.mira-res__reasons {
    inline-size: min(520px, 100%);
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: start;
}

.mira-res__reason {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--mira-ln);
    border-radius: 13px;
    background: var(--mira-pp);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mira-sub);
}

.mira-res__reason .o-i {
    font-size: 16px;
    color: var(--mira-acc);
    flex: none;
}

.mira-res__acts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.mira-res__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease;
}

.mira-res__btn:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

.mira-res__btn .o-i {
    font-size: 16px;
}

.mira-res__btn--ghost {
    border: 1px solid var(--mira-ln);
    background: transparent;
    color: var(--mira-ink);
    font-weight: 400;
    transition: background .25s ease;
}

.mira-res__btn--ghost:hover {
    background: var(--mira-sf);
    color: var(--mira-ink);
}


/* ---------------------------------------------------------------------------
   7. Invoice sheet — SF:1296-1342.
   --------------------------------------------------------------------------- */

.mira-inv {
    display: flex;
    justify-content: center;
}

.mira-inv__sheet {
    inline-size: min(760px, 100%);
    border: 1px solid var(--mira-ln);
    border-radius: 22px;
    background: var(--mira-pp);
    overflow: hidden;
}

.mira-inv__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: clamp(20px, 2.8cqi, 30px);
    background: var(--mira-sf);
    transition: background .5s ease;
}

.mira-inv__brand {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mira-inv__brand-name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira:not([dir="rtl"]) .mira-inv__brand-name {
    letter-spacing: .16em;
}

.mira-inv__label,
.mira-inv__date {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    color: var(--mira-sub);
}

.mira-inv__meta {
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    text-align: end;
}

.mira-inv__no {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-inv__status {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
}

.mira-inv__parties {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: clamp(18px, 2.6cqi, 28px);
    border-block-end: 1px solid var(--mira-ln);
}

.mira-inv__party {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-inline-size: 0;
}

.mira-inv__party-h {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--mira-sub);
}

.mira:not([dir="rtl"]) .mira-inv__party-h {
    letter-spacing: .18em;
}

.mira-inv__party-n {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
    color: var(--mira-ink);
}

.mira-inv__party-t {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.7;
    color: var(--mira-sub);
}

.mira-inv__lines {
    padding: clamp(18px, 2.6cqi, 28px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mira-inv__line {
    display: flex;
    gap: 13px;
    align-items: center;
    padding-block: 13px;
    border-block-end: 1px solid var(--mira-ln);
}

.mira-inv__line img {
    inline-size: 52px;
    block-size: 64px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--mira-sf);
    flex: none;
}

.mira-inv__line-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-inline-size: 0;
}

.mira-inv__line-n {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: var(--mira-ink);
}

.mira-inv__line-m {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.5;
    color: var(--mira-sub);
}

.mira-inv__line-v {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-acd);
    white-space: nowrap;
}

.mira-inv__sum {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 10px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-inv__sum:first-of-type {
    padding-block: 14px 10px;
}

.mira-inv__sum > span:last-child {
    color: var(--mira-ink);
    font-weight: 700;
}

.mira-inv__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--mira-ln);
}

.mira-inv__total-l {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-inv__total-v {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--mira-acd);
}

.mira-inv__acts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-inline: clamp(18px, 2.6cqi, 28px);
    padding-block-end: clamp(18px, 2.6cqi, 28px);
}

.mira-inv__btn {
    flex: 1;
    min-inline-size: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-ink);
    color: var(--mira-bg);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.mira-inv__btn:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

.mira-inv__btn .o-i {
    font-size: 16px;
}

.mira-inv__btn--ghost {
    border: 1px solid var(--mira-ln);
    background: transparent;
    color: var(--mira-ink);
}

.mira-inv__btn--ghost:hover {
    background: var(--mira-sf);
    color: var(--mira-ink);
}

/* Printing. The design's sheet IS the print artefact, so the chrome is
   dropped and the sheet loses its frame rather than being re-laid-out. */
@media print {
    .mira-inv__acts,
    .mira-nav,
    .mira-header,
    .mira-footer,
    .mira-crumb,
    .mira-sticky,
    .mira-mobnav,
    .back-to-top {
        display: none !important;
    }

    .mira-inv__sheet {
        border: 0;
        inline-size: 100%;
    }
}


/* ---------------------------------------------------------------------------
   8. Track order — SF:1380-1413.
   --------------------------------------------------------------------------- */

.mira-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.mira-track__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.mira-track__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(30px, 4cqi, 52px);
    line-height: 1.05;
    color: var(--mira-ink);
}

.mira-track__sub {
    max-inline-size: 52ch;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--mira-sub);
}

/* The lookup pill — SF:1385-1388. Field and button share one rounded shell. */
.mira-track__form {
    display: flex;
    gap: 8px;
    inline-size: min(480px, 100%);
    padding: 6px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-pp);
}

.mira-track__form input,
.mira-track__form .form--control {
    flex: 1;
    min-inline-size: 0;
    inline-size: auto;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 10px 16px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-track__form button {
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s ease;
}

.mira-track__form button:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

.mira-track__card {
    inline-size: min(720px, 100%);
    border: 1px solid var(--mira-ln);
    border-radius: 20px;
    background: var(--mira-pp);
    padding: clamp(20px, 2.8cqi, 32px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mira-track__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mira-track__no {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-track__eta {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-track__status {
    margin-inline-start: auto;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--mira-sf);
    color: var(--mira-acd);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
}

/* Vertical timeline — SF:1397-1411. */
.mira-track__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mira-track__step {
    display: flex;
    gap: 15px;
}

.mira-track__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
}

.mira-track__mark {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mira-sub);
    border: 1.5px solid var(--mira-ln);
    flex: none;
}

.mira-track__mark .o-i {
    font-size: 15px;
}

.mira-track__step.is-done .mira-track__mark {
    background: var(--mira-acc);
    color: var(--mira-oac);
    border-color: var(--mira-acc);
}

.mira-track__step.is-current .mira-track__mark {
    background: var(--mira-sf);
    color: var(--mira-acd);
    border-color: var(--mira-acc);
}

.mira-track__line {
    inline-size: 1.5px;
    flex: 1;
    min-block-size: 26px;
    background: var(--mira-ln);
}

.mira-track__step.is-done .mira-track__line {
    background: var(--mira-acc);
}

.mira-track__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-block-end: 18px;
    flex: 1;
    min-inline-size: 0;
}

.mira-track__h {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: var(--mira-sub);
}

.mira-track__step.is-done .mira-track__h,
.mira-track__step.is-current .mira-track__h {
    color: var(--mira-ink);
}

.mira-track__p {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--mira-sub);
}

.mira-track__d {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 1;
    color: var(--mira-sub);
    white-space: nowrap;
    flex: none;
}


/* ---------------------------------------------------------------------------
   9. Sign-in panel on checkout.

   The platform offers an inline login above the billing form. The design has
   no such element on the checkout screen, so it takes the shape of the
   design's notice row (SF:998) — a bordered panel on the paper surface — and
   the form itself uses the checkout field atoms.
   --------------------------------------------------------------------------- */

.mira-co__signin {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--mira-ln);
    border-radius: 14px;
    background: var(--mira-pp);
}

.mira-co__signin-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mira-sub);
}

.mira-co__signin-head .o-i {
    font-size: 17px;
    color: var(--mira-acc);
}

.mira-co__signin-toggle {
    color: var(--mira-acd);
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}

.mira-co__signin-body {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.mira-co__signin.is-open .mira-co__signin-body {
    display: flex;
}

/* ⚠️ The legacy toggle is `.checkout-form-open` + `.active`, added by the page
   script's `.click-open-form` / `.create-accounts` handlers — NOT by a class on
   the panel. So the collapsed state is driven from that element, and the
   `.is-open` rule above only covers the always-open variant (the guest-checkout
   login panel). Both are needed; neither replaces the other. */
.mira-co .checkout-form-open {
    display: none;
}

.mira-co .checkout-form-open.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The create-account block reuses the field grid, so it opens as a grid. */
.mira-co .create-account-wrapper .checkout-form-open.active {
    display: grid;
}

/* The shift-address panel has its own toggle class (`.click-open-form3` adds
   `.active` to `.checkout-address-form-wrapper`), so it needs its own pair. */
.mira-co .checkout-address-form-wrapper {
    display: none;
}

.mira-co .checkout-address-form-wrapper.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--mira-ln);
    border-radius: 14px;
    background: var(--mira-pp);
}

/* Remember-me beside "forgot password". */
.mira-co__signin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mira-co__signin-row .mira-co__signin-toggle {
    margin-inline-start: auto;
}

.mira-co__signin-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mira-co__signin .error-wrap:empty {
    display: none;
}


/* ---------------------------------------------------------------------------
   10. Structural switch — 768px.

   The design has ZERO media queries; this is the one structural change, the
   same breakpoint as Phases 1 and 2.
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* The bag row stacks: image beside the body, price on its own line. */
    .mira-bag__table tr {
        flex-wrap: wrap;
    }

    .mira-bag__thumb {
        inline-size: 68px;
        block-size: 84px;
    }

    .mira-bag__line {
        inline-size: 100%;
        text-align: end;
    }

    /* Both sticky asides release: a sticky card taller than a phone viewport
       traps the page. */
    .mira-sum,
    .mira-co__aside {
        position: static;
    }

    .mira-co__steps {
        margin-inline-start: 0;
        inline-size: 100%;
    }

    /* The step labels are the first thing to go when the row is too tight. */
    .mira-co__step-l,
    .mira-co__step-line {
        display: none;
    }

    .mira-res__step-line {
        display: none;
    }

    .mira-inv__meta {
        margin-inline-start: 0;
        align-items: flex-start;
        text-align: start;
    }

    .mira-track__step:last-child .mira-track__body {
        padding-block-end: 0;
    }
}