/* ===========================================================================
   MIRA REDESIGN — shop layer (Phase 2)
   ===========================================================================

   Loaded AFTER mira.css (see theme.json). Covers the five commerce screens:

     shop listing      Storefront `isShop`   SF:606-704
     category          Storefront `isCat`    SF:1169-1227
     search            Storefront `isSearch` SF:1229-1259
     compare           Storefront `isCompare` SF:1261-1293
     product detail    Storefront `isPdp`    SF:706-841

   Plus the PDP half of Widgets card 08 — the sticky add-to-bag bar, which the
   design draws in the same card as the mobile tab bar but on the product page
   only.

   WHY A SECOND FILE and not an append to mira.css: the parallel-session rule.
   Two sessions appending to one stylesheet silently lose each other's work, so
   every phase gets its own layer. mira.css keeps the tokens, the atoms and the
   chrome; this file may USE those tokens but must never redeclare one.

   The three rules from mira.css that bite hardest here, restated because this
   is where they get broken:

   1. No literal colour. Nine tokens carry the palette. The only fixed values
      allowed are the ones the design itself fixes — text and panels that sit on
      PHOTOGRAPHY or on a white overlay, where a palette token cannot be read.
      Those go through --mira-scrim / --mira-onwhite, declared in mira.css,
      so they are still named rather than sprinkled.

   2. Pattern A grids use `auto-fill`, never `auto-fit`. The design writes
      auto-fit because its mock always fills a row; a real filter returning two
      products would render two enormous cards. Compare is the ONE exception —
      there, stretching to fill is the intent, because the empty "add another"
      slot is part of the design.

   3. cqi, not vw.

   And one specific to this phase:

   4. The card is ONE file. `mira-card.blade.php` is rendered by the shop grid,
      the category grid, search results and the related rail. Density is set by
      the GRID that wraps it, never by the card, so the same markup serves the
      220px listing and the 210-260px rail.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Shared: the product card.

   Design source: SF:663-694 (shop), repeated verbatim at SF:1192-1223 (category)
   and in a reduced form at SF:1247-1256 (search). One card, three densities.
   --------------------------------------------------------------------------- */

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

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

/* The link covers the whole frame and carries the primary image. */
.mira-pcard__media > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.mira-pcard__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* The hover image. Opacity AND transform are enumerated with different
   durations, exactly as the design has them — the crossfade is quicker than
   the drift.

   ⚠️ TWO REQUIREMENTS THAT LOOK CONTRADICTORY, and both must hold:
     - it must paint ABOVE the anchor, or there is nothing to crossfade TO —
       the anchor contains the primary image, so an alt image below it fades in
       behind and is never seen;
     - it must not eat the click, which is exactly what it did before.

   `pointer-events: none` separates the two. Paint order and hit-testing are
   different questions, so the decoration can sit on top and still be
   transparent to the pointer; the click lands on the anchor underneath.
   Raising the anchor instead — the obvious fix — kills the hover swap. */
.mira-pcard__alt {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease, transform .8s ease;
}

.mira-pcard:hover .mira-pcard__alt {
    opacity: 1;
    transform: scale(1.05);
}

/* With no second image there is nothing to fade to, so the primary drifts
   instead of sitting dead. */
.mira-pcard__media--single img {
    transition: transform .8s ease;
}

.mira-pcard:hover .mira-pcard__media--single img {
    transform: scale(1.05);
}

.mira-pcard__badges {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* A scrim badge, not an accent badge: it sits on the photograph. */
.mira-pcard__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mira-scrim);
    color: #FFF;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
}

/* --- The hover action rail ------------------------------------------------
   The platform emits `ul.collection-icon-list > li.lists > a.icon` and binds
   wishlist / quick-view / add-to-cart to the anchors inside it. The design has
   no such rail, but removing it would remove three working controls, so it is
   restyled into the card's inline-end edge and revealed on hover.

   Below 768px there is no hover, so it is always visible there — see the
   structural block at the end of this file. */
.mira-pcard__media .collection-icon-list {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .3s ease, transform .3s ease;
}

/* RTL: the rail lives on the opposite edge, so it must slide in from the
   opposite direction too. */
[dir="rtl"] .mira-pcard__media .collection-icon-list {
    transform: translateX(-8px);
}

.mira-pcard:hover .mira-pcard__media .collection-icon-list,
.mira-pcard__media .collection-icon-list:focus-within {
    opacity: 1;
    transform: translateX(0);
}

.mira-pcard__media .collection-icon-list .icon {
    inline-size: 36px;
    block-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--mira-onwhite);
    font-size: 16px;
    transition: background .25s ease, color .25s ease;
}

.mira-pcard__media .collection-icon-list .icon:hover {
    background: var(--mira-acc);
    color: var(--mira-oac);
}

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

.mira-pcard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.mira-pcard__rating {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    color: var(--mira-ink);
    white-space: nowrap;
}

/* The platform's own star markup renders inside here; neutralise its sizing so
   the row keeps the design's 10.5px rhythm. */
.mira-pcard__rating i,
.mira-pcard__rating .las,
.mira-pcard__rating .lar {
    font-size: 11px;
    color: var(--mira-acc);
}

.mira-pcard__rating span {
    font-weight: 400;
    color: var(--mira-sub);
}

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

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

.mira-pcard__prices {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

.mira-pcard__was {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    color: var(--mira-sub);
    text-decoration: line-through;
}

/* Outline accent button, filling on hover. This is the design's own card CTA;
   it is NOT .mira-btn--outline, which is an ink-on-hairline control. */
.mira-pcard__add {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border: 1px solid var(--mira-acc);
    border-radius: 999px;
    background: transparent;
    color: var(--mira-acd);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    transition: background .3s ease, color .3s ease;
}

.mira-pcard__add:hover {
    background: var(--mira-acc);
    color: var(--mira-oac);
}

.mira-pcard__add .o-i {
    font-size: 14px;
}

/* Compact variant — search results and the related rail, where the design
   drops the meta row and the CTA and shrinks the name. */
.mira-pcard--slim {
    gap: 11px;
}

.mira-pcard--slim .mira-pcard__media {
    aspect-ratio: 3 / 3.8;
}

.mira-pcard--slim .mira-pcard__name {
    font-size: 16px;
}


/* ---------------------------------------------------------------------------
   2. Empty state.

   Not in the design — the mock always has results. It is still required: a
   filter that matches nothing must say so rather than render a blank column.
   Built from the design's own atoms so it does not read as a foreign element.
   --------------------------------------------------------------------------- */

.mira-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: clamp(40px, 6cqi, 80px) 20px;
    text-align: center;
}

.mira-empty .o-i {
    font-size: 40px;
    color: var(--mira-sub);
}

.mira-empty h3 {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
}

.mira-empty p {
    font-family: var(--mira-ui);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--mira-sub);
}


/* ---------------------------------------------------------------------------
   3. Shop listing — SF:606-704.
   --------------------------------------------------------------------------- */

/* The screen wrappers. `.mira` already carries the tokens and the ground; these
   two exist so a screen can be targeted as a whole, and because the shop and
   category pages must not inherit the page-master's own section padding — the
   design pads every band itself. */
.mira-shop,
.mira-cat {
    display: block;
    padding: 0;
}

.mira-shop__head {
    background: var(--mira-sf);
    padding: clamp(30px, 4cqi, 54px) clamp(18px, 4.2cqi, 64px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background .5s ease;
}

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

.mira-shop__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(32px, 4.4cqi, 58px);
    line-height: 1.05;
}

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

.mira-shop__wrap {
    display: flex;
    gap: clamp(20px, 3cqi, 44px);
    padding: clamp(26px, 3.4cqi, 46px) clamp(18px, 4.2cqi, 64px) clamp(46px, 6cqi, 84px);
    align-items: flex-start;
    flex-wrap: wrap;
}

/* The design's aside is a fixed 236px rail. `flex-wrap` on the parent plus a
   100% basis floor is what stacks it above the grid on a narrow screen with no
   media query — the same mechanism Pattern C uses. */
.mira-shop__aside {
    flex: 0 1 236px;
    min-inline-size: min(236px, 100%);
    position: sticky;
    inset-block-start: var(--mira-head-h);
}

.mira-shop__main {
    flex: 999 1 62%;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- The filter rail ------------------------------------------------------ */

.mira-filters {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.mira-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

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

.mira-filters__clear {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    color: var(--mira-acc);
}

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

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

/* The platform emits every filter group as `ul.active-list > li.list`, and
   marks the chosen one `.active`. Those two class names are the contract; the
   shapes below are keyed off them so no JS has to change. */

/* Category rows — a name and a count, flush to the rail's edges. */
.mira-filters .category-lists li.list {
    display: block;
}

.mira-filters .cat-header,
.mira-filters .cat-child > a,
.mira-filters .cat-grandchild > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mira-ink);
    cursor: pointer;
    transition: color .2s ease;
}

.mira-filters .cat-header:hover,
.mira-filters .cat-child > a:hover,
.mira-filters .cat-grandchild > a:hover {
    color: var(--mira-acc);
}

.mira-filters li.list.active > .cat-header,
.mira-filters li.list.active > a {
    color: var(--mira-acc);
    font-weight: 700;
}

.mira-filters .cat-name {
    flex: 1;
    min-inline-size: 0;
}

.mira-filters .cat-count {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-filters .cat-toggle {
    inline-size: 18px;
    block-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mira-sub);
    font-size: 11px;
    flex: none;
    transition: transform .25s ease, color .25s ease;
}

.mira-filters .cat-parent.open > .cat-header .cat-toggle,
.mira-filters .cat-child.open > a .cat-toggle {
    transform: rotate(90deg);
    color: var(--mira-acc);
}

[dir="rtl"] .mira-filters .cat-parent.open > .cat-header .cat-toggle,
[dir="rtl"] .mira-filters .cat-child.open > a .cat-toggle {
    transform: rotate(-90deg);
}

/* The nested lists are collapsed by height, not by display, so the chevron can
   animate. The ceilings are deliberately generous — a category tree that
   exceeds them would clip, and clipping is worse than a slower slide. */
.mira-filters .cat-children,
.mira-filters .cat-grandchildren {
    overflow: hidden;
    max-block-size: 0;
    transition: max-block-size .35s ease;
}

.mira-filters .cat-parent.open > .cat-children {
    max-block-size: 900px;
}

.mira-filters .cat-child.open > .cat-grandchildren {
    max-block-size: 600px;
}

.mira-filters .cat-child > a {
    padding-inline-start: 14px;
}

.mira-filters .cat-grandchild > a {
    padding-inline-start: 26px;
    font-size: 12px;
    color: var(--mira-sub);
}

/* Size chips — SF:626-628. */
.mira-filters .size-lists,
.mira-filters .tag-lists {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.mira-filters .size-lists li.list > a,
.mira-filters .tag-lists li.list > a {
    min-inline-size: 38px;
    block-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: transparent;
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.mira-filters .size-lists li.list > a:hover,
.mira-filters .tag-lists li.list > a:hover {
    border-color: var(--mira-ink);
}

.mira-filters .size-lists li.list.active > a,
.mira-filters .tag-lists li.list.active > a {
    background: var(--mira-ink);
    border-color: var(--mira-ink);
    color: var(--mira-bg);
}

/* Colour dots — SF:634-636. The inner ring is the page ground, so a pale
   swatch still reads as a disc rather than bleeding into the rail. */
.mira-filters .color-lists {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.mira-filters .color-lists li.list > a {
    inline-size: 26px;
    block-size: 26px;
    display: block;
    border-radius: 50%;
    border: 1px solid var(--mira-ln);
    transition: transform .2s ease, box-shadow .2s ease;
}

.mira-filters .color-lists li.list > a:hover {
    transform: scale(1.18);
}

.mira-filters .color-lists li.list.active > a {
    box-shadow: 0 0 0 2px var(--mira-bg), 0 0 0 4px var(--mira-acc);
}

/* Rating rows — the platform emits five anchors of stars per row. */
.mira-filters .filter-lists li.list {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    cursor: pointer;
    color: var(--mira-sub);
    font-size: 14px;
    transition: color .2s ease;
}

.mira-filters .filter-lists li.list:hover,
.mira-filters .filter-lists li.list.active {
    color: var(--mira-acc);
}

/* Price slider. noUiSlider brings its own skin; only the parts the design
   draws are restated. */
.mira-filters .ui-range-slider {
    block-size: 4px;
    border-radius: 999px;
    background: var(--mira-sf);
    border: 0;
    box-shadow: none;
    margin: 6px 0 18px;
    /* The library positions its handles with physical percentages, so the
       track itself stays LTR whatever the page direction. */
    direction: ltr;
}

.mira-filters .noUi-connect {
    background: var(--mira-acc);
}

.mira-filters .noUi-handle {
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--mira-pp);
    border: 2px solid var(--mira-acc);
    box-shadow: none;
    cursor: pointer;
}

.mira-filters .noUi-handle::before,
.mira-filters .noUi-handle::after {
    display: none;
}

.mira-filters .ui-range-values {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-ink);
    flex-wrap: wrap;
}

.mira-filters .ui-price-title {
    color: var(--mira-sub);
}

/* The rail's closing promo block — SF:648-651. */
.mira-filters__promo {
    padding: 20px;
    border-radius: 16px;
    background: var(--mira-sf);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mira-filters__promo-title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
}

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

/* Phone-only collapse trigger. Hidden above the breakpoint; the rail is open
   markup by default so the desktop layout needs no JS at all. */
.mira-filters__toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    inline-size: 100%;
    padding: 13px 18px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-pp);
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
}

/* --- Toolbar — SF:655-661 -------------------------------------------------- */

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

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

.mira-toolbar__sort {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: var(--mira-ink);
    transition: border-color .2s ease;
}

.mira-toolbar__sort:hover,
.mira-toolbar__sort:focus-within {
    border-color: var(--mira-ink);
}

/* The nice-select plugin is a no-op in this theme's main.js, so the control
   that ships is the browser's own <select>. Strip its chrome and let the pill
   above be the visible shape. */
.mira-toolbar__sort select {
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    padding-inline-end: 4px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.mira-toolbar__sort .o-i {
    font-size: 16px;
    color: var(--mira-sub);
    pointer-events: none;
}

/* Grid / list toggle — SF:972-975 (Widgets `isToolbar`). */
.mira-toolbar__views {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
}

.mira-toolbar__views .shop-icons .icon {
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--mira-sub);
    transition: background .2s ease, color .2s ease;
}

.mira-toolbar__views .shop-icons.active .icon {
    background: var(--mira-ink);
    color: var(--mira-bg);
}

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

/* Selected-filter chips. The platform's own strip, restyled. */
.mira-shop__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--mira-ui);
    font-size: 11.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-shop__chips .selected-clear-items,
.mira-shop__chips .selected-flex-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mira-shop__chips .show-value a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    color: var(--mira-ink);
    font-size: 11.5px;
}

.mira-shop__chips .show-value a::after {
    content: '×';
    color: var(--mira-sub);
}

.mira-shop__chips .show-value a:hover {
    border-color: var(--mira-acc);
    color: var(--mira-acc);
}

.mira-shop__chips .click-hide-parent {
    color: var(--mira-acc);
}

/* --- Grid + pager — SF:662, SF:696-700 ------------------------------------ */

.mira-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 46%), 1fr));
    gap: clamp(14px, 1.8cqi, 22px);
}

.mira-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-start: 14px;
}

.mira-pager .pagination-list {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mira-pager .page-number {
    min-inline-size: 40px;
    block-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--mira-ln);
    border-radius: 50%;
    background: transparent;
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.mira-pager .page-number:hover {
    border-color: var(--mira-ink);
}

.mira-pager .page-number.current {
    background: var(--mira-ink);
    border-color: var(--mira-ink);
    color: var(--mira-bg);
}

/* --- List view ------------------------------------------------------------
   The design has no list view; the platform's toggle does, and dropping it
   would break a control that works. So the same card is laid on its side. */

.mira-plist {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mira-lrow {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--mira-ln);
    flex-wrap: wrap;
}

.mira-lrow__media {
    position: relative;
    flex: 0 0 min(180px, 40%);
    aspect-ratio: 3 / 3.6;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mira-sf);
}

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

.mira-lrow__body {
    flex: 999 1 min(280px, 100%);
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mira-lrow__name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
}

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

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

.mira-lrow__actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-block-start: 4px;
}

.mira-lrow__actions .icon-list .icon {
    inline-size: 40px;
    block-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mira-ln);
    border-radius: 50%;
    color: var(--mira-ink);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mira-lrow__actions .icon-list .icon:hover {
    background: var(--mira-sf);
    border-color: var(--mira-acc);
    color: var(--mira-acc);
}


/* ---------------------------------------------------------------------------
   4. Category — SF:1169-1227.
   --------------------------------------------------------------------------- */

.mira-cathero {
    position: relative;
    block-size: clamp(220px, 26cqi, 340px);
    overflow: hidden;
    background: var(--mira-ink);
}

.mira-cathero img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: .85;
}

.mira-cathero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 14, 18, .78), rgba(20, 14, 18, .16));
}

.mira-cathero__body {
    position: absolute;
    z-index: 2;
    inset-inline-start: clamp(18px, 4.2cqi, 64px);
    inset-inline-end: clamp(18px, 4.2cqi, 64px);
    inset-block-end: clamp(20px, 3cqi, 36px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #FFF;
}

.mira-cathero__crumb {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, .75);
}

.mira-cathero__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(32px, 4.4cqi, 58px);
    line-height: 1.05;
}

.mira-cathero__sub {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
    max-inline-size: 56ch;
}

.mira-cat__body {
    padding: clamp(20px, 2.6cqi, 34px) clamp(18px, 4.2cqi, 64px) clamp(46px, 6cqi, 84px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mira-cat__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

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


/* ---------------------------------------------------------------------------
   5. Search — SF:1229-1259.
   --------------------------------------------------------------------------- */

.mira-srp {
    padding: clamp(26px, 3.4cqi, 48px) clamp(18px, 4.2cqi, 64px) clamp(46px, 6cqi, 84px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

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

.mira-srp__form {
    display: flex;
    gap: 8px;
    inline-size: min(520px, 100%);
    padding: 6px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-pp);
    align-items: center;
    transition: border-color .2s ease;
}

.mira-srp__form:focus-within {
    border-color: var(--mira-acc);
}

.mira-srp__form .o-i {
    padding-inline-start: 12px;
    font-size: 19px;
    color: var(--mira-sub);
}

.mira-srp__form input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 10px 4px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-srp__btn {
    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;
    transition: background .25s ease;
}

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

.mira-srp__chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

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

.mira-srp__chip {
    padding: 7px 14px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    color: var(--mira-ink);
    transition: border-color .2s ease, color .2s ease;
}

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

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


/* ---------------------------------------------------------------------------
   6. Compare — SF:1261-1293.

   The one place `auto-fit` is correct: the empty "add another" slot is part of
   the design, so stretching two columns across the row is the intent.
   --------------------------------------------------------------------------- */

.mira-compare {
    padding: clamp(26px, 3.4cqi, 48px) clamp(18px, 4.2cqi, 64px) clamp(46px, 6cqi, 84px);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mira-compare__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

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

.mira-compare__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(12px, 1.6cqi, 20px);
}

.mira-ccol {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mira-ln);
    border-radius: 18px;
    background: var(--mira-pp);
    overflow: hidden;
}

.mira-ccol__media {
    position: relative;
    block-size: clamp(200px, 22cqi, 280px);
    background: var(--mira-sf);
}

.mira-ccol__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.mira-ccol__remove {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: var(--mira-onwhite);
    transition: background .2s ease;
}

.mira-ccol__remove:hover {
    background: #FFF;
}

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

.mira-ccol__body {
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
}

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

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

.mira-ccol__price {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1;
    color: var(--mira-acd);
    margin: 8px 0 4px;
}

.mira-ccol__spec {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-block-start: 1px solid var(--mira-ln);
}

.mira-ccol__spec-k {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    color: var(--mira-sub);
}

.mira-ccol__spec-v {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1.4;
    text-align: end;
}

.mira-ccol__add {
    margin-block-start: 12px;
    padding: 12px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    transition: background .25s ease;
}

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

.mira-cslot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1.5px dashed var(--mira-ln);
    border-radius: 18px;
    min-block-size: 260px;
    color: var(--mira-sub);
    transition: border-color .25s ease, color .25s ease;
}

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

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

.mira-cslot__label {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}


/* ---------------------------------------------------------------------------
   7. Product detail — SF:706-841.
   --------------------------------------------------------------------------- */

.mira-pdp__crumb {
    padding: 18px clamp(18px, 4.2cqi, 64px) 0;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-pdp__main {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 3.4cqi, 54px);
    padding: clamp(20px, 2.6cqi, 36px) clamp(18px, 4.2cqi, 64px) clamp(46px, 6cqi, 84px);
    align-items: flex-start;
}

/* --- Gallery -------------------------------------------------------------- */

.mira-gal {
    flex: 1.1 1 min(380px, 100%);
    display: flex;
    gap: 12px;
    min-inline-size: 0;
}

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

.mira-gal__thumb {
    inline-size: clamp(58px, 6.6cqi, 80px);
    block-size: clamp(72px, 8.4cqi, 100px);
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    background: var(--mira-sf);
    opacity: .55;
    transition: opacity .3s ease, border-color .3s ease;
}

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

.mira-gal__thumb:hover {
    opacity: 1;
}

.mira-gal__thumb.is-active {
    opacity: 1;
    border-color: var(--mira-acc);
}

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

.mira-gal__stage {
    position: relative;
    block-size: clamp(430px, 54cqi, 620px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mira-sf);
}

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

.mira-gal__badge {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-start: 18px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--mira-scrim);
    color: #FFF;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

.mira-gal__zoom {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: var(--mira-onwhite);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
}

.mira-gal__zoom .o-i {
    font-size: 14px;
}

.mira-gal__zoom:hover {
    background: #FFF;
}

/* The zoom lightbox.

   `[hidden]` alone is not enough: this rule sets `display:flex`, and a class
   rule beats the `hidden` ATTRIBUTE's UA `display:none`, so the overlay would
   sit open over the page forever. The `[hidden]` guard below restores it. */
.mira-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4cqi, 56px);
    background: var(--mira-scrim);
    animation: mira-fade .2s ease;
    cursor: zoom-out;
}

.mira-lightbox[hidden] {
    display: none;
}

.mira-lightbox img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    border-radius: 16px;
    cursor: default;
}

.mira-lightbox__close {
    position: absolute;
    inset-block-start: clamp(12px, 3cqi, 28px);
    inset-inline-end: clamp(12px, 3cqi, 28px);
    inline-size: 44px;
    block-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--mira-onwhite);
    transition: background .2s ease;
}

.mira-lightbox__close:hover {
    background: #FFF;
}

.mira-lightbox__close .o-i {
    font-size: 22px;
}

.mira-gal__nav {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.mira-gal__nav button {
    inline-size: 42px;
    block-size: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: var(--mira-onwhite);
    transition: transform .25s ease;
}

.mira-gal__nav button:hover {
    transform: scale(1.1);
}

.mira-gal__nav button:last-child {
    background: var(--mira-acc);
    color: var(--mira-oac);
}

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

.mira-gal__count {
    position: absolute;
    inset-block-end: 22px;
    inset-inline-start: 16px;
    z-index: 2;
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: #FFF;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* Rating strip under the stage — SF:733-743. */
.mira-gal__strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border: 1px solid var(--mira-ln);
    border-radius: 14px;
    background: var(--mira-pp);
}

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

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

.mira-gal__stars-row {
    color: var(--mira-acc);
    font-size: 11px;
}

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

/* Fit meter — SF:739-742. */
.mira-gal__fit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    flex: none;
}

.mira-gal__fit-label {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

.mira-gal__fit-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mira-gal__fit-track {
    inline-size: 90px;
    block-size: 4px;
    border-radius: 999px;
    background: var(--mira-sf);
    overflow: hidden;
    display: block;
}

.mira-gal__fit-bar {
    display: block;
    block-size: 100%;
    background: var(--mira-acc);
}

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

/* --- Buy box -------------------------------------------------------------- */

.mira-buy {
    flex: 1 1 min(340px, 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-inline-size: 0;
}

.mira-buy__cat {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--mira-acc);
}

.mira-buy__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(28px, 3.4cqi, 44px);
    line-height: 1.1;
}

.mira-buy__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mira-ui);
    font-size: 11.5px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-buy__rating i,
.mira-buy__rating .las,
.mira-buy__rating .lar {
    color: var(--mira-acc);
}

.mira-buy__prices {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

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

.mira-buy__was {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    color: var(--mira-sub);
    text-decoration: line-through;
}

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

.mira-buy__stock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
}

/* --- Variant pickers ------------------------------------------------------
   The platform emits `.value-input-area > span.input-title + ul.size-lists`,
   and its JS reads `li[data-value]` and toggles `.active`. Both survive; only
   the shapes change.

   ⚠️ `.size-lists` is NOT unique to the buy box — the quick-view modal uses the
   same class, and the shop rail uses it for FILTERS. Every rule here is scoped
   under .mira-buy for that reason. */

.mira-buy .value-input-area {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mira-buy .input-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--mira-sub);
}

.mira-buy .input-title strong {
    font-weight: 700;
    color: var(--mira-sub);
}

/* The readonly mirror input is how the platform reports the chosen value. It
   is not a field here, it is the "— Rose" after the label. */
.mira-buy .input-title input[type="text"] {
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    inline-size: 12ch;
    color: var(--mira-ink);
    font-weight: 700;
    text-transform: none;
}

.mira-buy .size-lists {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mira-buy .size-lists li {
    min-inline-size: 46px;
    block-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: transparent;
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.mira-buy .size-lists li:hover {
    border-color: var(--mira-ink);
}

.mira-buy .size-lists li.active {
    background: var(--mira-ink);
    border-color: var(--mira-ink);
    color: var(--mira-bg);
}

/* A combination the inventory does not carry. The platform adds `.disabled`. */
.mira-buy .size-lists li.disabled {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* The colour list is dots, not pills — the platform paints the swatch with an
   inline background-color, so only the shape is set here. */
.mira-buy .size-lists.color-list li {
    inline-size: 30px;
    min-inline-size: 30px;
    block-size: 30px;
    padding: 0;
    border-width: 2px;
    border-radius: 50%;
}

.mira-buy .size-lists.color-list li:hover {
    transform: scale(1.14);
}

.mira-buy .size-lists.color-list li.active {
    border-color: var(--mira-acc);
}

/* --- Quantity + actions — SF:775-783 -------------------------------------- */

/* --- Quantity + actions — SF:775-783 --------------------------------------

   ⚠️ `.product-quantity` and `.quantity-btn` are on these elements because the
   platform's syncStock() shows and hides them by those names. They are NOT
   free: the legacy casual sheet styles both, and it wins wherever it names an
   element this layer does not.

     .product-quantity            { position: relative; z-index: 3 }
     .product-quantity .plus      { position: absolute; left: 5px; top: 50% }
     .product-quantity .substract { position: absolute; right: 5px }
     .quantity-input              { width: 130px; height: 45px; border: 1px solid #999 }
     .quantity-btn                { gap: 30px; margin-top: 25px }

   That is what pushed the − and + outside the pill and left a bare 130px box
   floating between the buttons. Every one of those declarations is unwound
   below, on the SAME properties, because a rule that does not mention
   `position` cannot override a rule that does. */

.mira-buy__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: 4px;
}

/* Legacy `.quantity-btn` sets gap:30px and margin-top:25px. */
.mira-buy .mira-buy__actions.quantity-btn {
    gap: 10px;
    margin-block-start: 4px;
}

.mira-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    flex: none;
    overflow: hidden;
}

/* Undo `.product-quantity { position: relative; z-index: 3 }` so the absolute
   children below have nothing to anchor to. */
.mira-buy .mira-qty.product-quantity {
    position: static;
    z-index: auto;
}

/* The − and + are absolutely positioned by the legacy sheet, with PHYSICAL
   left/right. Returned to flow. */
.mira-buy .mira-qty .plus,
.mira-buy .mira-qty .substract {
    position: static;
    transform: none;
    inset: auto;
    inline-size: 42px;
    block-size: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mira-ink);
    cursor: pointer;
    font-size: 15px;
    transition: color .2s ease;
}

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

/* Legacy: width 130px, height 45px, a grey border and a light-colour text. */
.mira-buy .mira-qty input.quantity-input {
    inline-size: 46px;
    block-size: 46px;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--mira-ink);
    -moz-appearance: textfield;
}

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

.mira-buy__bag {
    flex: 1;
    min-inline-size: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    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;
    transition: background .25s ease, transform .25s ease;
}

.mira-buy__bag:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
    transform: translateY(-2px);
}

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

/* The design's row is quantity + ONE filled button + one round wishlist, and
   the button takes every pixel the other two leave (SF:770). It had to share
   the row with a second full-size CTA, which is why it read narrow.

   `flex:1` with a 190px floor is the design's own declaration, and it now
   actually gets the space. */
.mira-buy__altact {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: 12px;
}

/* Buy Now and Compare, demoted from buttons to text links so the row above
   matches the design while the features stay reachable. */
.mira-buy__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--mira-sub);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    transition: color .2s ease;
}

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

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

/* The loading wash is drawn as a rounded block; on a bare text link that reads
   as a stray rectangle, so it is suppressed and the link just dims. */
:where(.mira) .mira-buy__link.cart-loading::before {
    display: none;
}

:where(.mira) .mira-buy__link.cart-loading.active-loading {
    opacity: .5;
    color: var(--mira-acc);
}

.mira-buy__icon {
    inline-size: 48px;
    block-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mira-ln);
    border-radius: 50%;
    background: transparent;
    color: var(--mira-ink);
    flex: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mira-buy__icon:hover {
    background: var(--mira-sf);
    border-color: var(--mira-acc);
    color: var(--mira-acc);
}

.mira-buy__icon .o-i {
    font-size: 20px;
}

/* Out of stock — the notify button replaces the whole action row. */
.mira-buy__notify {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 26px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-sf);
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    transition: background .25s ease, color .25s ease;
}

.mira-buy__notify:hover {
    background: var(--mira-acc);
    color: var(--mira-oac);
}

/* --- Perks, delivery, meta — SF:784-793 ----------------------------------- */

.mira-buy__perks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-block: 1px solid var(--mira-ln);
    margin-block-start: 6px;
}

.mira-buy__perk {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--mira-sub);
}

.mira-buy__perk .o-i,
.mira-buy__perk i {
    font-size: 16px;
    color: var(--mira-acc);
}

.mira-buy__eta {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border-radius: 14px;
    background: var(--mira-sf);
}

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

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

.mira-buy__eta-value {
    margin-inline-start: auto;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: var(--mira-acd);
}

.mira-buy__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--mira-sub);
}

.mira-buy__meta a {
    color: var(--mira-ink);
}

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

.mira-buy__share {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    /* single_post_share() emits bare <li>. The theme's reset targets
       `.mira ul, .mira ol`, so a <div> wrapper never matched it and the markers
       showed as dots between the icons. Belt and braces, since the helper is
       shared and could be wrapped differently elsewhere. */
    list-style: none;
    margin: 0;
    padding: 0;
}

.mira-buy__share li {
    list-style: none;
}

.mira-buy__share a {
    inline-size: 36px;
    block-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mira-ln);
    border-radius: 50%;
    color: var(--mira-ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.mira-buy__share a:hover {
    background: var(--mira-acc);
    border-color: var(--mira-acc);
    color: var(--mira-oac);
}

/* --- Complete the look — SF:794-804 --------------------------------------- */

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

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

.mira-ctl__list {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.mira-ctl__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px 7px 7px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-pp);
    transition: border-color .3s ease;
}

/* The 7px/13px asymmetry follows the image, which sits at the inline START. */
[dir="rtl"] .mira-ctl__item {
    padding: 7px 7px 7px 13px;
}

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

.mira-ctl__item img {
    inline-size: 32px;
    block-size: 32px;
    object-fit: cover;
    border-radius: 50%;
    flex: none;
}

.mira-ctl__name {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.3;
}

.mira-ctl__price {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    color: var(--mira-acd);
}

/* --- Info accordion — SF:805-817 ------------------------------------------
   Replaces the old tab strip. The platform's tab panes keep their ids, so the
   review form and the "see more" ajax stay wired. */

.mira-acc {
    display: flex;
    flex-direction: column;
}

.mira-acc__item {
    border-block-end: 1px solid var(--mira-ln);
}

.mira-acc__head {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 2px;
    background: transparent;
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    text-align: start;
}

.mira-acc__head .o-i {
    font-size: 19px;
    color: var(--mira-sub);
    transition: transform .3s ease, color .3s ease;
}

.mira-acc__item.is-open .mira-acc__head .o-i {
    transform: rotate(180deg);
    color: var(--mira-acc);
}

.mira-acc__panel {
    display: none;
    padding: 0 2px 16px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--mira-sub);
}

.mira-acc__item.is-open .mira-acc__panel {
    display: block;
    animation: mira-fade .3s ease;
}

/* The review form and list live inside a panel; give the platform's controls a
   shape that belongs to this theme. */
.mira-acc__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block-end: 18px;
}

.mira-acc__form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.mira-acc__panel .form-control,
.mira-acc__panel textarea,
.mira-acc__panel input[type="text"],
.mira-acc__panel input[type="password"] {
    inline-size: 100%;
    padding: 12px 16px;
    border: 1px solid var(--mira-ln);
    border-radius: 12px;
    background: var(--mira-pp);
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-size: 13px;
    line-height: 1.6;
    outline: 0;
    transition: border-color .2s ease;
}

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

.mira-acc__panel .cmn-btn,
.mira-acc__panel .auth-form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    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;
    transition: background .25s ease;
}

.mira-acc__panel .cmn-btn:hover,
.mira-acc__panel .auth-form-btn:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
}

.mira-review {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-block-start: 1px solid var(--mira-ln);
}

.mira-review img {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

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

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

/* --- Related rail — SF:820-839 -------------------------------------------- */

.mira-rail {
    padding: 0 clamp(18px, 4.2cqi, 64px) clamp(46px, 6cqi, 84px);
}

.mira-rail__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-end: 20px;
}

.mira-rail__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(22px, 2.8cqi, 34px);
    line-height: 1.1;
}

.mira-rail__nav {
    margin-inline-start: auto;
    display: flex;
    gap: 9px;
}

.mira-rail__nav button {
    inline-size: 40px;
    block-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mira-ln);
    border-radius: 50%;
    background: transparent;
    color: var(--mira-ink);
    transition: background .25s ease, color .25s ease;
}

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

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

.mira-rail__track {
    display: flex;
    gap: clamp(14px, 1.8cqi, 22px);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-block-end: 6px;
}

.mira-rail__track::-webkit-scrollbar {
    display: none;
}

.mira-rail__track > * {
    flex: 0 0 clamp(210px, 22cqi, 260px);
    scroll-snap-align: start;
}


/* ---------------------------------------------------------------------------
   8. The PDP sticky add-to-bag bar — Widgets card 08, second bar.

   Ahmed confirmed during Phase 1: the tab bar is site-wide, THIS one is the
   product page only. It rides directly above the tab bar, so its offset reads
   the same --mira-mobilenav-h the toast does.

   Hidden until the real buy box has scrolled out of view — a duplicate CTA
   stacked under the live one is noise, not help.
   --------------------------------------------------------------------------- */

.mira-sticky {
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--mira-mobilenav-h, 0px);
    z-index: 960;
    display: none;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: var(--mira-bg);
    border-block-start: 1px solid var(--mira-ln);
    box-shadow: 0 -10px 30px -18px rgba(var(--mira-ink-rgb), .5);
    transform: translateY(100%);
    transition: transform .3s ease;
}

.mira-sticky.is-shown {
    transform: translateY(0);
}

.mira-sticky img {
    inline-size: 42px;
    block-size: 52px;
    object-fit: cover;
    border-radius: 9px;
    flex: none;
}

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

.mira-sticky__name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.mira-sticky__btn {
    margin-inline-start: auto;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
    flex: none;
    transition: background .25s ease;
}

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


/* ---------------------------------------------------------------------------
   10. Legacy accent containment.

   The casual sheet paints a family of shared controls from `--main-color-one`,
   which is the OLD theme-colour setting — a red on a stock shop. Those controls
   are the platform's, not the theme's, so they render on Mira screens and drag
   that red in with them. Four of them are visible on the shop page alone:

     .cart-loading::before   the wash over a button mid-ajax  (add to cart)
     .noUi-connect/.noUi-handle  the price slider bar and knobs
     .filter-lists .list::before  the rating radio dots
     .back-to-top            the scroll-to-top button

   Every one is re-pointed at the palette here. There is no way to do this from
   the token layer: `--main-color-one` is set on :root by the tenant's old
   colour settings, and Mira must not read or write it — a shop that switches
   back to the legacy theme still needs its own colour intact.

   ⚠️ `.back-to-top` is rendered by `tenant/frontend/partials/backtop.blade.php`,
   which is OUTSIDE the `.mira` wrapper, so its rule cannot be scoped to `.mira`
   and is written against the body instead. That is why it is the one selector
   in this file with no `.mira` ancestor.
   --------------------------------------------------------------------------- */

/* The loading wash.

   The legacy `.cart-loading::before` is a SOLID overlay across the whole
   button — `height/width:100%`, `z-index:5`, a `loading-cart.gif` centred, and
   `background-color: var(--main-color-one)`. It is `opacity:0` at rest and
   revealed by `.active-loading` during the ajax.

   Two bugs, one rule:
     1. it was the tenant's legacy RED, on an accent button;
     2. it COVERS THE LABEL, so "إضافة إلى السلة" vanished the moment you
        clicked and the button read as an empty coloured block.

   The design has no such overlay, but the request does need feedback. So the
   wash becomes a translucent DEEPENING of the accent — the button visibly
   presses — and the label is lifted above it instead of being buried.

   ⚠️ The legacy sheet has deeper, CONTEXT-SCOPED copies of this rule, e.g.
   `.signle-collection .collction-thumb .collection-icon-list.color-three
   .cart-loading::before` (0,4,0). `:where()` adds the .mira scope at ZERO
   specificity, so these are (0,3,0)/(0,5,0) and outrank them all without an
   !important. */
:where(.mira) .cart-loading::before,
:where(.mira) .collection-icon-list .cart-loading::before,
:where(.mira) .mira-pcard .cart-loading::before,
:where(.mira) .mira-buy .cart-loading::before {
    background-color: rgba(var(--mira-ink-rgb), .28);
    color: var(--mira-oac);
    border-radius: 999px;
    border-color: transparent;
}

/* Lift the label and its icon over the overlay. The overlay is z-index 5, so
   anything the button actually says has to sit above that or it is hidden the
   moment the request starts. */
:where(.mira) .cart-loading {
    position: relative;
}

:where(.mira) .cart-loading > * {
    position: relative;
    z-index: 6;
}

/* While the request is in flight the label stays legible on the deepened
   ground, and the control reads as busy rather than as broken. */
:where(.mira) .cart-loading.active-loading {
    color: var(--mira-oac);
}

/* The card's outline CTA is transparent at rest, so a deepening wash over it
   would be invisible — it fills with the accent instead. */
:where(.mira) .mira-pcard__add.cart-loading::before {
    background-color: var(--mira-acc);
}

:where(.mira) .mira-pcard__add.cart-loading.active-loading {
    color: var(--mira-oac);
}

/* Price slider.

   ⚠️ SPECIFICITY, not source order. The legacy sheet writes these five and four
   classes deep:

     .price-range-slider .ui-range-slider.noUi-target .noUi-base .noUi-connect  (0,5,0)
     .price-range-slider .ui-range-slider.noUi-target .noUi-handle              (0,4,0)

   `.mira .noUi-connect` is (0,2,0) and LOSES, whatever the load order — so the
   bar stayed red even with a rule that looked like it covered it. Matched at
   the same depth here. The aromatic layer hit this exact trap and its note is
   what caught mine. */
.mira .price-range-slider .ui-range-slider.noUi-target .noUi-base .noUi-connect {
    background: var(--mira-acc);
}

.mira .price-range-slider .ui-range-slider.noUi-target .noUi-handle {
    inline-size: 15px;
    block-size: 15px;
    inset-block-start: -6px;
    border-radius: 50%;
    background: var(--mira-pp);
    border: 2px solid var(--mira-acc);
    box-shadow: none;
}

/* The library draws a white dot inside each handle. */
.mira .price-range-slider .ui-range-slider.noUi-target .noUi-handle::before,
.mira .price-range-slider .ui-range-slider.noUi-target .noUi-handle::after {
    display: none;
}

/* Rating rows.

   ⚠️ The legacy dot is written SIX classes deep:
     `.single-shop-left .shop-left-title .shop-left-list .filter-lists
      .list.active::before`  (0,6,0)
   The Mira rail does not use those wrappers, so nothing here can match them
   positionally — `:where(.mira)` is free specificity, and the star anchor and
   the dot are both raised past it. */
:where(.mira) .filter-lists .list::before,
:where(.mira) .filter-lists .list.active::before,
:where(.mira) .mira-filters .filter-lists .list::before,
:where(.mira) .mira-filters .filter-lists .list.active::before {
    display: none;
    background: var(--mira-acc);
    border-color: var(--mira-acc);
}

:where(.mira) .filter-lists .list a,
:where(.mira) .mira-filters .filter-lists .list a {
    color: inherit;
}

/* Scroll-to-top. `backtop.blade.php` is branched so the casual copy carries the
   `mira` class ITSELF — the tokens are declared on `.mira`, so an element that
   is not inside one cannot read them, and the partial renders outside the page
   wrapper. Hence `.mira.back-to-top`, not `.mira .back-to-top`. */
.mira.back-to-top {
    background-color: var(--mira-acc);
    color: var(--mira-oac);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color .25s ease;
}

.mira.back-to-top:hover {
    background-color: var(--mira-acd);
}

.mira.back-to-top .o-i {
    font-size: 22px;
    color: var(--mira-oac);
}


/* ---------------------------------------------------------------------------
   11. The structural switches.

   768px is the theme's one layout breakpoint (see mira.css). 991.98px is not a
   layout choice — it is where the platform's own bottom tab bar appears, so
   anything that must sit above it shares that number.
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* The filter rail becomes a disclosure. It also stops being sticky: a
       sticky full-width block on a phone pins the filters over the results. */
    .mira-shop__aside {
        position: static;
        flex-basis: 100%;
    }

    .mira-filters__toggle {
        display: flex;
    }

    .mira-filters {
        display: none;
    }

    .mira-filters.is-open {
        display: flex;
        margin-block-start: 18px;
        animation: mira-fade .25s ease;
    }

    /* No hover on a touch screen, so the card's action rail is always out. */
    .mira-pcard__media .collection-icon-list {
        opacity: 1;
        transform: translateX(0);
    }

    /* The gallery thumbs move under the stage and scroll sideways. */
    .mira-gal {
        flex-direction: column;
    }

    .mira-gal__thumbs {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .mira-gal__thumbs::-webkit-scrollbar {
        display: none;
    }

    .mira-gal__stage {
        block-size: clamp(360px, 92cqi, 520px);
    }
}

@media (max-width: 991.98px) {
    /* The sticky bar exists only where the tab bar does. */
    .mira-sticky {
        display: flex;
    }

    /* And the page needs room to scroll past both of them. */
    .mira-pdp--sticky .mira-rail {
        padding-block-end: calc(clamp(46px, 6cqi, 84px) + 80px);
    }
}