/* ===========================================================================
   MIRA REDESIGN — homepage (Phase 5)

   The `casual` theme's fifth Mira layer: the 16 homepage bands, in the design's
   stacking order. Loaded after mira.css, mira-shop.css, mira-flow.css and
   mira-content.css, so tokens and atoms already exist and are never
   redeclared.

   ⚠️ NO BLOCK NAME DECLARED HERE MAY EXIST IN AN EARLIER LAYER. The later
   sheet silently wins everywhere. Gated by checks/mira_layer_check.py.

   Blocks owned by this file, in stacking order:
     .mira-hero     hero slider              (SF:153-183)
     .mira-marq     word marquee             (SF:186-195)
     .mira-crail    category rail            (SF:197-225)
     .mira-prail    new-in product rail      (SF:226-275)
     .mira-promo    dual promo banners       (SF:277-291)
     .mira-coupon   coupon strip             (SF:292-300)
     .mira-look     shop the look            (SF:303-338)
     .mira-occ      occasion tiles           (SF:340-360)
     .mira-fit      fit finder               (SF:362-393)
     .mira-camp     campaign countdown       (SF:395-424)
     .mira-tabs     tabbed collection grid   (SF:425-475)
     .mira-flash    flash sale rail          (SF:477-517)
     .mira-svc      services strip           (SF:519-531)
     .mira-testi    testimonials             (SF:533-557)
     .mira-jcards   journal cards            (SF:559-579)
     .mira-brands   brand marquee            (SF:581-590)
     .mira-news     newsletter band          (SF:592-603)

   `.mira-band`, `.mira-band__row`, `.mira-eyebrow` and `.mira-medallion` are
   NOT redeclared — they live in mira-content.css and are reused.

   ---------------------------------------------------------------------------
   TWO THINGS THAT SHAPE EVERY BAND HERE

   1. EACH BAND IS ITS OWN `.mira` WRAPPER. A PageBuilder page is assembled from
      independent addons, so a band cannot assume it sits inside a themed
      element. Every addon view carries `class="mira ..."` and its own palette
      attribute. That also means `container-type: inline-size` is set per band,
      so `cqi` resolves against the BAND, which is what the design assumes.

   2. RAILS ARE NATIVE SCROLL, NOT A CAROUSEL LIBRARY. The design writes
      `overflow-x:auto` + `scroll-snap-type:x mandatory` + `scrollbar-width:none`
      with `flex:0 0 clamp(...)` children. The arrows call `scrollBy()`. No
      slick, no swiper — the theme already dropped slick on the PDP in Phase 2
      for the same reason. One shared `.mira-rail` primitive serves the four
      rails (category, new-in, flash, and the lookbook's chips).
   =========================================================================== */


/* ---------------------------------------------------------------------------
   0. Shared primitives.
   --------------------------------------------------------------------------- */

/* The scroll rail. Direction-agnostic: `scrollBy()` with a signed delta works
   in both directions because the browser flips the axis under RTL.

   ⚠️ NAMED `.mira-hrail`, NOT `.mira-rail`. Phase 2 already took `.mira-rail`
   for the PDP's related-products SECTION (mira-shop.css §"Related rail"),
   where it is a block wrapper carrying page padding — a completely different
   thing. mira-home.css loads AFTER mira-shop.css, so declaring `.mira-rail`
   here would turn that section into a flex scroller and break the PDP.
   Two layers, two meanings, two names. */
.mira-hrail {
    display: flex;
    gap: clamp(14px, 1.8cqi, 22px);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-block-end: 6px;
}

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

.mira-hrail > * {
    scroll-snap-align: start;
}

/* Rail arrows — SF:205-206. 40px outline circles that invert on hover. */
.mira-arrows {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

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

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

/* The underlined "see all" link — SF:204. */
.mira-seeall {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-ink);
    border-block-end: 1px solid var(--mira-ink);
    padding-block-end: 4px;
    transition: color .2s ease, border-color .2s ease;
}

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

/* A band heading: eyebrow over an h2, with the actions pushed to the end. */
.mira-bhead {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-end: clamp(22px, 3cqi, 38px);
}

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

.mira-bhead__acts {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mira-btitle {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(28px, 3.6cqi, 46px)
        * var(--mira-crail-scale)
        * var(--mira-prail-scale)
        * var(--mira-occ-scale)
        * var(--mira-tabs-scale)
        * var(--mira-testi-scale)
        * var(--mira-jcards-scale));
    line-height: 1.1;
    color: var(--mira-ink);
}

/* The centred variant — SF:426, SF:534. */
.mira-bhead--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}


/* ---------------------------------------------------------------------------
   0b. Per-section size multiplier.

   Every band exposes a "Section Size (%)" slider (mira_style_fields()), which
   arrives as a custom property on the band's own root element. Declared here
   at 1 so a band whose merchant never touched the slider is unaffected, and
   so the `calc()`s below always resolve even when the attribute is absent.

   Only the band's HEADLINE and its most characteristic metric scale. Scaling
   every value would break the grids — the design's column counts and gaps are
   fixed by the layout, not by taste.

   Named per block, never shared, because two bands stacked in one page each
   carry their own value and a shared name would let the later one win.
   --------------------------------------------------------------------------- */

.mira {
    --mira-hero-scale:   1;
    --mira-crail-scale:  1;
    --mira-prail-scale:  1;
    --mira-promo-scale:  1;
    --mira-coupon-scale: 1;
    --mira-look-scale:   1;
    --mira-occ-scale:    1;
    --mira-fit-scale:    1;
    --mira-camp-scale:   1;
    --mira-tabs-scale:   1;
    --mira-flash-scale:  1;
    --mira-svc-scale:    1;
    --mira-testi-scale:  1;
    --mira-jcards-scale: 1;
    --mira-news-scale:   1;
}

/* The multipliers are applied ON each block's own font-size declaration, in
   the section that owns it — NOT as a second copy of the rule here. An
   override block at the top of the file would lose to the original further
   down at equal specificity, silently doing nothing. */


/* ---------------------------------------------------------------------------
   1. Hero slider — SF:153-183.
   --------------------------------------------------------------------------- */

.mira-hero {
    position: relative;
    overflow: hidden;
    block-size: clamp(520px, 60cqi, 740px);
    background: var(--mira-ink);
}

.mira-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease;
}

.mira-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.mira-hero__slide img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transform: scale(1.03);
}

/* A FIXED dark gradient, not a token: it sits on photography, where a palette
   colour cannot be read. Same reasoning as the scrim in mira.css. */
.mira-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(20, 14, 18, .8) 0%,
        rgba(20, 14, 18, .32) 48%,
        rgba(20, 14, 18, .1) 100%);
}

.mira-hero__body {
    position: absolute;
    inset-inline: clamp(20px, 4.4cqi, 72px);
    inset-block-end: clamp(76px, 9cqi, 110px);
    max-inline-size: 820px;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.8cqi, 22px);
    color: #FFF;
}

/* Slide number · rule · kicker. The warm tone is the design's one fixed
   highlight over photography — see --mira-warm in mira.css. */
.mira-hero__pre {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mira-hero__num {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--mira-warm);
}

.mira:not([dir="rtl"]) .mira-hero__num {
    letter-spacing: .1em;
}

.mira-hero__rule {
    inline-size: 30px;
    block-size: 1px;
    background: var(--mira-warm);
}

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

.mira:not([dir="rtl"]) .mira-hero__kicker {
    letter-spacing: .26em;
}

.mira-hero__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(40px, 6.4cqi, 96px) * var(--mira-hero-scale));
    line-height: 1.04;
    color: #FFF;
}

.mira:not([dir="rtl"]) .mira-hero__title {
    letter-spacing: -.01em;
}

/* The italic second half — SF:164. */
.mira-hero__title em {
    font-style: italic;
    color: var(--mira-warm);
}

.mira-hero__sub {
    max-inline-size: 52ch;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: clamp(12.5px, 1.1cqi, 15px);
    line-height: 1.85;
    color: rgba(255, 255, 255, .82);
    text-wrap: pretty;
}

.mira-hero__acts {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mira-hero__cta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    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-hero__cta:hover {
    background: var(--mira-acd);
    color: var(--mira-oac);
    transform: translateY(-2px);
}

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

/* The glass chip. Fixed whites: it sits on the photograph. */
.mira-hero__chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
    color: #FFF;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    transition: background .25s ease;
}

.mira-hero__chip:hover {
    background: rgba(255, 255, 255, .22);
    color: #FFF;
}

/* Segment tabs — SF:173-178. Bars, not dots. */
.mira-hero__tabs {
    position: absolute;
    z-index: 10;
    inset-inline-start: clamp(20px, 4.4cqi, 72px);
    inset-block-end: clamp(26px, 3.4cqi, 46px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mira-hero__seg {
    inline-size: clamp(28px, 3.4cqi, 44px);
    block-size: 4px;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .35);
    padding: 0;
    cursor: pointer;
    transition: background .4s ease;
}

.mira-hero__seg.is-active,
.mira-hero__seg:hover {
    background: #FFF;
}

.mira-hero__count {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
    margin-inline-start: 6px;
}

.mira:not([dir="rtl"]) .mira-hero__count {
    letter-spacing: .12em;
}

/* Prev is glass, next is accent — SF:180-181. */
.mira-hero__nav {
    position: absolute;
    z-index: 10;
    inset-inline-end: clamp(18px, 3cqi, 44px);
    inset-block-end: clamp(20px, 3cqi, 40px);
    display: flex;
    gap: 9px;
}

.mira-hero__prev,
.mira-hero__next {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mira-hero__prev {
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(5px);
    color: #FFF;
    transition: background .3s ease;
}

.mira-hero__prev:hover {
    background: rgba(255, 255, 255, .3);
}

.mira-hero__next {
    border: 0;
    background: var(--mira-acc);
    color: var(--mira-oac);
    transition: transform .3s ease;
}

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

.mira-hero__prev .o-i,
.mira-hero__next .o-i {
    font-size: 19px;
}


/* ---------------------------------------------------------------------------
   2. Word marquee — SF:186-195 — and 16. brand marquee — SF:581-590.

   Two speeds, one mechanism. The track is duplicated in the blade so the loop
   is seamless; the keyframes translate by -50%, which is exactly one copy.

   ⚠️ RTL reverses the travel. `mira-marquee-r` exists in mira.css for this and
   is selected by the direction attribute, never by mirroring a transform —
   a transform would also flip the text inside.
   --------------------------------------------------------------------------- */

.mira-marq,
.mira-brands {
    border-block: 1px solid var(--mira-ln);
    overflow: hidden;
}

.mira-marq {
    padding-block: clamp(14px, 1.8cqi, 22px);
}

.mira-brands {
    padding-block: clamp(12px, 1.6cqi, 20px);
}

.mira-marq__track,
.mira-brands__track {
    display: flex;
    inline-size: max-content;
    animation: mira-marquee 34s linear infinite;
}

.mira-brands__track {
    animation-duration: 46s;
}

.mira[dir="rtl"] .mira-marq__track,
.mira[dir="rtl"] .mira-brands__track {
    animation-name: mira-marquee-r;
}

/* Pausing on hover lets someone actually read a word they noticed. */
.mira-marq:hover .mira-marq__track,
.mira-brands:hover .mira-brands__track {
    animation-play-state: paused;
}

.mira-marq__item {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4cqi, 34px);
    padding-inline-end: clamp(16px, 2.4cqi, 34px);
    white-space: nowrap;
}

.mira-marq__word {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(18px, 2.2cqi, 30px);
    line-height: 1;
    color: var(--mira-ink);
}

.mira:not([dir="rtl"]) .mira-marq__word {
    letter-spacing: .04em;
}

/* Every other word is muted — SF:190 alternates `mq.fg`. */
.mira-marq__item:nth-child(even) .mira-marq__word {
    color: var(--mira-sub);
}

.mira-marq__star {
    color: var(--mira-acc);
    font-size: clamp(12px, 1.4cqi, 18px);
}

.mira-brands__item {
    display: flex;
    align-items: center;
    gap: clamp(22px, 3cqi, 44px);
    padding-inline-end: clamp(22px, 3cqi, 44px);
    white-space: nowrap;
}

.mira-brands__name {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(15px, 1.8cqi, 22px);
    line-height: 1;
    color: var(--mira-sub);
}

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

.mira-brands__dot {
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--mira-acc);
    opacity: .5;
}


/* ---------------------------------------------------------------------------
   3. Category rail — SF:197-225.
   --------------------------------------------------------------------------- */

.mira-crail__item {
    flex: 0 0 clamp(190px, 21cqi, 250px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--mira-ink);
}

.mira-crail__media {
    position: relative;
    block-size: clamp(240px, 28cqi, 330px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mira-sf);
}

.mira-crail__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.mira-crail__item:hover .mira-crail__media img {
    transform: scale(1.07);
}

.mira-crail__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-inline: 6px;
}

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

.mira-crail__name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
}

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

.mira-crail__go {
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--mira-ln);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mira-acc);
    flex: none;
    transition: background .3s ease, color .3s ease;
}

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

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


/* ---------------------------------------------------------------------------
   4. Product rail — SF:226-275 (new-in) and reused by any rail of products.

   The card is a RAIL card, not `.mira-pcard`: fixed flex basis, a taller media
   box, the colour dots and the size popover. The shop card has none of those.
   --------------------------------------------------------------------------- */

.mira-prail__item {
    flex: 0 0 clamp(230px, 24cqi, 290px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mira-prail__media {
    position: relative;
    block-size: clamp(290px, 32cqi, 380px);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mira-sf);
    cursor: pointer;
}

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

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

/* ⚠️ The hover image paints ABOVE the cover link and is click-through. Both
   halves are required: below the link there is nothing to crossfade to, and
   without pointer-events:none it swallows the click. This is the exact bug
   that shipped twice in Phase 2 — see the rev 4/rev 5 notes. */
.mira-prail__alt {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease, transform .8s ease;
}

.mira-prail__item:hover .mira-prail__alt {
    opacity: 1;
    transform: scale(1.05);
}

.mira-prail__badge {
    position: absolute;
    z-index: 3;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mira-scrim);
    backdrop-filter: blur(4px);
    color: #FFF;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
}

.mira:not([dir="rtl"]) .mira-prail__badge {
    letter-spacing: .06em;
}

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

.mira-prail__wish:hover {
    transform: scale(1.12);
}

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

/* Colour dots — SF:245-247. A white pill on the photograph. */
.mira-prail__dots {
    position: absolute;
    z-index: 3;
    inset-block-end: 10px;
    inset-inline-start: 10px;
    display: flex;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(3px);
}

.mira-prail__dot {
    inline-size: 11px;
    block-size: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
}

/* The size popover — SF:248-258. The design's answer to "add to bag" on a
   product that has sizes: never a blind add. */
.mira-pick {
    display: none;
    position: absolute;
    inset-inline: 10px;
    inset-block-end: 10px;
    z-index: 4;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    color: var(--mira-onwhite);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35);
}

.mira-pick.is-open {
    display: flex;
    animation: mira-rise .25s ease;
}

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

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

.mira-pick__close {
    inline-size: 22px;
    block-size: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--mira-onwhite-sf);
    color: var(--mira-onwhite);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.mira-pick__close .o-i {
    font-size: 13px;
}

.mira-pick__sizes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mira-pick__size {
    min-inline-size: 36px;
    block-size: 32px;
    padding: 0 9px;
    border: 1px solid rgba(46, 34, 38, .2);
    border-radius: 999px;
    background: transparent;
    color: var(--mira-onwhite);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.mira-pick__size:hover {
    background: var(--mira-onwhite);
    color: #FFF;
}

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

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

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

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

.mira-prail__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);
}

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

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

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

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

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

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

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

.mira-prail__add {
    margin-inline-start: auto;
    display: 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;
    cursor: pointer;
    white-space: nowrap;
    transition: background .3s ease, color .3s ease;
}

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

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


/* ---------------------------------------------------------------------------
   5. Dual promo banners — SF:277-291.
   --------------------------------------------------------------------------- */

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

.mira-promo__item {
    position: relative;
    min-block-size: clamp(200px, 24cqi, 280px);
    border-radius: 20px;
    overflow: hidden;
    display: block;
    color: #FFF;
    background: var(--mira-sf);
}

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

.mira-promo__item:hover img {
    transform: scale(1.06);
}

/* ⚠️ The veil direction follows the TEXT DIRECTION, not the banner's position
   in the pair. SF:282 reads `bn.grad`, and SF:1941 builds it as
   `grad: ar ? 'left' : 'right'` — one value for the whole row, chosen by
   locale. Both banners always darken on the side the copy sits on.

   An earlier revision mistook the per-item indirection for per-item variation
   and flipped every second banner with `:nth-child(even)`, which lit the side
   the text was written on. Same error as the occasion tiles' invented arch:
   the value is templated because the design is data-driven, not because it
   alternates. */
.mira-promo__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(20, 14, 18, .72) 20%, rgba(20, 14, 18, .12) 70%);
}

/* Under RTL the copy moves to the right, so the dark side moves with it. */
.mira[dir="rtl"] .mira-promo__veil {
    background: linear-gradient(to left, rgba(20, 14, 18, .72) 20%, rgba(20, 14, 18, .12) 70%);
}

.mira-promo__body {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inset-inline-start: clamp(18px, 3cqi, 34px);
    max-inline-size: 32ch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

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

.mira:not([dir="rtl"]) .mira-promo__kick {
    letter-spacing: .24em;
}

.mira-promo__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(21px, 2.5cqi, 32px) * var(--mira-promo-scale));
    line-height: 1.15;
}

.mira-promo__sub {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.mira-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-block-start: 4px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #FFF;
    color: var(--mira-onwhite);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
    transition: transform .25s ease;
}

.mira-promo__item:hover .mira-promo__cta {
    transform: translateY(-2px);
}

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


/* ---------------------------------------------------------------------------
   6. Coupon strip — SF:292-300. An accent band, so every child is --mira-oac.
   --------------------------------------------------------------------------- */

.mira-coupon {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2cqi, 24px);
    flex-wrap: wrap;
    padding-block: clamp(16px, 2.2cqi, 24px);
    padding-inline: clamp(18px, 3cqi, 32px);
    border-radius: 20px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    transition: background .5s ease;
}

.mira-coupon > .o-i {
    font-size: 26px;
}

.mira-coupon__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-inline-size: 220px;
}

.mira-coupon__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(17px, 1.8cqi, 24px) * var(--mira-coupon-scale));
    line-height: 1.2;
}

.mira-coupon__sub {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.5;
    opacity: .85;
}

/* The dashed code chip — SF:298. */
.mira-coupon__code {
    padding: 10px 18px;
    border: 1.5px dashed var(--mira-oac);
    border-radius: 12px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.mira:not([dir="rtl"]) .mira-coupon__code {
    letter-spacing: .14em;
}

.mira-coupon__cta {
    padding: 13px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--mira-oac);
    color: var(--mira-acd);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    transition: transform .25s ease;
}

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


/* ---------------------------------------------------------------------------
   7. Shop the look — SF:303-338.

   A list of looks beside a stack of images; hovering a look crossfades its
   image. The active look carries the accent border-inline-start.
   --------------------------------------------------------------------------- */

.mira-look {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 4cqi, 64px);
    align-items: stretch;
}

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

.mira-look__title {
    max-inline-size: 16ch;
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(28px, 3.6cqi, 46px) * var(--mira-look-scale));
    line-height: 1.15;
    color: var(--mira-ink);
}

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

.mira-look__list {
    display: flex;
    flex-direction: column;
    margin-block-start: 8px;
}

.mira-look__row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 14px;
    border-block-start: 1px solid var(--mira-ln);
    border-inline-start: 3px solid transparent;
    cursor: pointer;
    background: transparent;
    text-align: start;
    transition: border-color .3s ease, background .3s ease;
}

.mira-look__row:hover,
.mira-look__row.is-active {
    background: rgba(255, 255, 255, .28);
    border-inline-start-color: var(--mira-acc);
}

.mira-look__n {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1;
    color: var(--mira-sub);
    min-inline-size: 40px;
    transition: color .3s ease;
}

.mira-look__row.is-active .mira-look__n {
    color: var(--mira-acc);
}

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

.mira-look__name {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--mira-ink);
}

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

.mira-look__chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-block-start: 2px;
}

.mira-look__chip {
    padding: 6px 11px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-pp);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-look__stage {
    flex: 1 1 min(360px, 100%);
    position: relative;
    min-block-size: clamp(380px, 50cqi, 600px);
    border-radius: 22px;
    overflow: hidden;
    background: var(--mira-pp);
}

.mira-look__img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
}

.mira-look__img.is-active {
    opacity: 1;
}

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

.mira-look__tag {
    position: absolute;
    z-index: 5;
    inset-block-end: 16px;
    inset-inline-start: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(24, 16, 20, .55);
    backdrop-filter: blur(6px);
    color: #FFF;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
}

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


/* ---------------------------------------------------------------------------
   8. Occasion tiles — SF:340-360.
   --------------------------------------------------------------------------- */

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

.mira-occ__item {
    position: relative;
    block-size: clamp(230px, 26cqi, 320px);

    /* ⚠️ A FLAT radius on every tile, and 16px exactly — SF:347 sets
       `border-radius:{{ oc.r }}`, and SF:1950 builds every occasion with
       `r: '16px'`. There is no alternation and no arch.

       An earlier revision read the `oc.r` indirection as implying a per-tile
       shape and gave odd tiles `border-start-*-radius: 999px`, turning half
       the row into arches. That was invented, not measured: the value is
       templated only because the whole design is data-driven, not because it
       varies. Read the data before inferring intent from the markup. */
    border-radius: 16px;
    overflow: hidden;
    background: var(--mira-sf);
    display: block;
    color: #FFF;
}

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

.mira-occ__item:hover img {
    transform: scale(1.07);
}

.mira-occ__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(24, 16, 20, .68), transparent 55%);
}

.mira-occ__body {
    position: absolute;
    inset-block-end: 16px;
    inset-inline: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

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

.mira-occ__name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: calc(clamp(18px, 1.9cqi, 24px) * var(--mira-occ-scale));
    line-height: 1.2;
}

.mira-occ__sub {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10.5px;
    line-height: 1;
    opacity: .8;
}

.mira-occ__go {
    inline-size: 34px;
    block-size: 34px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background .3s ease, color .3s ease;
}

.mira-occ__item:hover .mira-occ__go {
    background: #FFF;
    color: var(--mira-onwhite);
}

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


/* ---------------------------------------------------------------------------
   9. Fit finder — SF:362-393.
   --------------------------------------------------------------------------- */

.mira-fit {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3cqi, 44px);
    align-items: center;
    padding: clamp(24px, 3.4cqi, 44px);
    border: 1px solid var(--mira-ln);
    border-radius: 24px;
    background: var(--mira-pp);
}

.mira-fit__side {
    flex: 1 1 min(300px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-inline-size: 0;
}

.mira-fit__title {
    max-inline-size: 18ch;
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(24px, 3cqi, 38px) * var(--mira-fit-scale));
    line-height: 1.15;
    color: var(--mira-ink);
}

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

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

.mira-fit__group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

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

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

.mira-fit__opts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mira-fit__opt {
    padding: 10px 18px;
    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: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.mira-fit__opt:hover {
    border-color: var(--mira-ink);
}

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

.mira-fit__result {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--mira-sf);
    animation: mira-fade .4s ease;
}

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

.mira-fit__result-t {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--mira-ink);
}

.mira-fit__size {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--mira-acd);
}

.mira-fit__cta {
    margin-inline-start: auto;
    padding: 10px 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;
    transition: background .25s ease;
}

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


/* ---------------------------------------------------------------------------
   10. Campaign countdown — SF:395-424. An ink band with a rotating ring.
   --------------------------------------------------------------------------- */

.mira-camp {
    background: var(--mira-ink);
    color: var(--mira-bg);
    position: relative;
    overflow: hidden;
    transition: background .5s ease, color .5s ease;
}

.mira-camp__row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 4cqi, 60px);
    align-items: center;
    position: relative;
}

.mira-camp__side {
    flex: 1.2 1 min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2cqi, 22px);
    min-inline-size: 0;
}

.mira-camp__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(34px, 4.6cqi, 64px) * var(--mira-camp-scale));
    line-height: 1.05;
}

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

.mira-camp__cd {
    display: flex;
    gap: clamp(8px, 1.2cqi, 14px);
    flex-wrap: wrap;
}

/* ⚠️ A NEUTRAL grey border, not --mira-ln. The ground is --mira-ink, which
   INVERTS in Noir & gold: a token border would be invisible in one palette and
   glaring in another. The design writes rgba(128,128,128,.35) for this reason,
   and the sale hero in mira-content.css does the same. */
.mira-camp__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-inline-size: clamp(62px, 7cqi, 86px);
    padding: 14px 10px;
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: 14px;
}

.mira-camp__v {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: clamp(26px, 3cqi, 40px);
    line-height: 1;
}

.mira-camp__l {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    opacity: .6;
}

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

.mira-camp__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 15px 30px;
    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: transform .25s ease;
}

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

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

.mira-camp__media {
    flex: 1 1 min(320px, 100%);
    position: relative;
    min-inline-size: 0;
}

.mira-camp__img {
    position: relative;
    block-size: clamp(340px, 40cqi, 480px);
    border-radius: 18px;
    overflow: hidden;
}

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

/* The rotating discount seal — SF:415-421. */
.mira-camp__ring {
    position: absolute;
    inset-block-start: -26px;
    inset-inline-start: -14px;
    inline-size: clamp(96px, 12cqi, 132px);
    block-size: clamp(96px, 12cqi, 132px);
    border-radius: 50%;
    background: var(--mira-acc);
    color: var(--mira-oac);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mira-camp__ring svg {
    position: absolute;
    inset: 6px;
    inline-size: auto;
    block-size: auto;
    animation: mira-spin 14s linear infinite;
}

.mira-camp__ring text {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    fill: currentColor;
    opacity: .9;
}

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

.mira-camp__pct {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: clamp(22px, 2.6cqi, 30px);
    line-height: 1;
}


/* ---------------------------------------------------------------------------
   11. Tabbed collection grid — SF:425-475.

   Pattern A at 230px, which is the SHOP grid — so `.mira-pcard` is reused and
   only the tabs and the view-all are declared here.
   --------------------------------------------------------------------------- */

.mira-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    /* ⚠️ The design nests the pills INSIDE the centred band head (SF:429), so
       the head's own `margin-block-end` falls below them. Our markup keeps the
       tablist as a sibling — the head is a shared partial and the pills need
       `role="tablist"` on their own container — so the head's margin lands
       ABOVE the pills and only this rule separates them from the product grid.
       Without the bottom margin the pills sit against the first card. */
    margin-block-start: 6px;
    margin-block-end: clamp(22px, 3cqi, 38px);
}

.mira-tabs__tab {
    padding: 9px 20px;
    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 .3s ease, color .3s ease, border-color .3s ease;
}

.mira-tabs__tab:hover {
    border-color: var(--mira-ink);
}

.mira-tabs__tab.is-active {
    background: var(--mira-ink);
    border-color: var(--mira-ink);
    color: var(--mira-bg);
}

.mira-tabs__panel {
    display: none;
}

.mira-tabs__panel.is-active {
    display: grid;
    animation: mira-fade .5s ease both;
}

.mira-viewall {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(24px, 3cqi, 40px);
}

.mira-viewall__btn {
    padding: 14px 32px;
    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: 13px;
    line-height: 1;
    transition: background .3s ease, color .3s ease;
}

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


/* ---------------------------------------------------------------------------
   12. Flash sale rail — SF:477-517. A bordered card holding its own rail.
   --------------------------------------------------------------------------- */

.mira-flash {
    border: 1px solid var(--mira-ln);
    border-radius: 24px;
    background: var(--mira-pp);
    overflow: hidden;
}

.mira-flash__head {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2cqi, 26px);
    flex-wrap: wrap;
    padding: clamp(18px, 2.6cqi, 30px) clamp(16px, 2.6cqi, 30px);
}

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

.mira-flash__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--mira-acc);
}

.mira:not([dir="rtl"]) .mira-flash__eyebrow {
    letter-spacing: .26em;
}

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

.mira-flash__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(24px, 3cqi, 38px) * var(--mira-flash-scale));
    line-height: 1.1;
    color: var(--mira-ink);
}

.mira-flash__timer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    flex-wrap: wrap;
}

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

.mira:not([dir="rtl"]) .mira-flash__ends {
    letter-spacing: .14em;
}

/* An ink pill, so it inverts with the palette. */
.mira-flash__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-inline-size: 46px;
    padding: 8px 6px;
    border-radius: 11px;
    background: var(--mira-ink);
    color: var(--mira-bg);
    transition: background .5s ease, color .5s ease;
}

.mira-flash__v {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
}

.mira-flash__l {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 8.5px;
    line-height: 1;
    text-transform: uppercase;
    opacity: .65;
}

.mira:not([dir="rtl"]) .mira-flash__l {
    letter-spacing: .14em;
}

/* Smaller arrows than the section rails — SF:492-493. */
.mira-flash__timer .mira-arrow {
    inline-size: 38px;
    block-size: 38px;
}

.mira-flash__timer .mira-arrow:first-of-type {
    margin-inline-start: 8px;
}

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

.mira-flash__rail {
    gap: clamp(12px, 1.6cqi, 20px);
    padding-inline: clamp(16px, 2.6cqi, 30px);
    padding-block-end: clamp(18px, 2.6cqi, 30px);
}

.mira-flash__item {
    flex: 0 0 clamp(210px, 22cqi, 260px);
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--mira-ln);
    border-radius: 18px;
    background: var(--mira-bg);
    transition: transform .3s ease, box-shadow .3s ease;
}

.mira-flash__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -18px rgba(var(--mira-ink-rgb), .28);
}

.mira-flash__media {
    position: relative;
    block-size: clamp(200px, 22cqi, 260px);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mira-sf);
    cursor: pointer;
}

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

.mira-flash__item:hover .mira-flash__media img {
    transform: scale(1.06);
}

.mira-flash__badge {
    position: absolute;
    z-index: 2;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
}

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

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

.mira-flash__prices {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-inline: 2px;
}

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

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

.mira-flash__add {
    margin-inline-start: auto;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--mira-ln);
    border-radius: 50%;
    background: transparent;
    color: var(--mira-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

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

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

/* Stock progress — SF:509-512. */
.mira-flash__stock {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-inline: 2px;
    padding-block-end: 2px;
}

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

.mira-flash__bar {
    block-size: 100%;
    background: var(--mira-acc);
    border-radius: 99px;
}

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


/* ---------------------------------------------------------------------------
   13. Services strip — SF:519-531.
   --------------------------------------------------------------------------- */

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

.mira-svc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: clamp(18px, 2.6cqi, 36px);
}

.mira-svc__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.mira-svc__icon {
    font-size: calc(26px * var(--mira-svc-scale));
    color: var(--mira-acc);
    flex: none;
}

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

.mira-svc__h {
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: calc(13.5px * var(--mira-svc-scale));
    line-height: 1.3;
    color: var(--mira-ink);
}

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


/* ---------------------------------------------------------------------------
   14. Testimonials — SF:533-557. One quote crossfading, avatars below.
   --------------------------------------------------------------------------- */

.mira-testi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-inline-size: 820px;
    margin-inline: auto;
    text-align: center;
}

.mira-testi__stars {
    color: var(--mira-acc);
    font-size: 15px;
}

.mira:not([dir="rtl"]) .mira-testi__stars {
    letter-spacing: .3em;
}

/* A fixed min-height so the band does not jump as quotes of different lengths
   crossfade through it. */
.mira-testi__stage {
    position: relative;
    min-block-size: clamp(120px, 15cqi, 150px);
    inline-size: 100%;
}

.mira-testi__item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    pointer-events: none;
}

.mira-testi__item.is-active {
    opacity: 1;
}

.mira-testi__q {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(19px, 2.4cqi, 30px);
    line-height: 1.5;
    font-style: italic;
    color: var(--mira-ink);
    text-wrap: pretty;
}

.mira-testi__who {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

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

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

.mira-testi__avatars {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-block-start: 4px;
    flex-wrap: wrap;
}

.mira-testi__avatar {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 2px;
    background: transparent;
    opacity: .45;
    cursor: pointer;
    transition: opacity .3s ease, border-color .3s ease;
}

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

.mira-testi__avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Stand-in for a reviewer with no photo. A real customer review should not be
   illustrated with a stock face, so the initial carries it instead. */
.mira-testi__initial {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    background: var(--mira-sf);
    color: var(--mira-acd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
   15. Journal cards — SF:559-579.

   The card is `.mira-jn__card` from mira-content.css. Only the band head lives
   here, and that is `.mira-bhead`, so this section declares nothing at all —
   kept as a comment so the next person does not go looking.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   17. Newsletter band — SF:592-603.
   --------------------------------------------------------------------------- */

.mira-news {
    background: var(--mira-sf);
    text-align: center;
    transition: background .5s ease;
}

.mira-news__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-inline-size: 640px;
    margin-inline: auto;
}

.mira-news__icon {
    font-size: 30px;
    color: var(--mira-acc);
}

.mira-news__title {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: calc(clamp(28px, 3.8cqi, 50px) * var(--mira-news-scale));
    line-height: 1.1;
    color: var(--mira-ink);
}

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

.mira-news__form {
    display: flex;
    gap: 8px;
    inline-size: min(440px, 100%);
    padding: 6px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    background: var(--mira-pp);
}

.mira-news__form input,
.mira-news__input {
    flex: 1;
    min-inline-size: 0;
    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-news__form button,
.mira-news__btn {
    padding: 12px 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;
    white-space: nowrap;
    cursor: pointer;
    transition: background .25s ease;
}

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

/* A disabled button must LOOK disabled — the label swaps to "Sending..." and
   without this the pill still invites a second click. */
.mira-news__btn:disabled {
    opacity: .6;
    cursor: default;
}

/* The response line. Not in the design — the mock has no error state — but the
   endpoint returns real validation messages and swallowing them would leave a
   shopper staring at a field that did nothing. Empty until it has something to
   say, so it takes no space in the resting layout. */
.mira-news__msg {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mira-sub);
}

.mira-news__msg:empty {
    display: none;
}

.mira-news__msg[data-mira-nl-kind="success"] {
    color: var(--mira-pos);
}

.mira-news__msg[data-mira-nl-kind="error"] {
    color: var(--mira-neg);
}

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


/* ---------------------------------------------------------------------------
   18. Structural switch — 768px. The design has zero media queries; this is the
   one break, the same as every earlier phase.
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* The hero's headline is the one value that cannot simply scale down: at
       6.4cqi it fills a phone screen. The body also lifts off the bottom so the
       nav arrows do not sit on top of the CTA.

       ⚠️ Fixed heights, not `vw`. Inside a media query `cqi` resolves against
       the CONTAINER while `vw` resolves against the VIEWPORT, and the two
       disagree the moment the page has a scrollbar or any side padding — the
       band is not full-bleed. A plain px height is honest at this one
       breakpoint; mira-content.css §10 made the same call for the same reason. */
    .mira-hero {
        block-size: 480px;
    }

    .mira-hero__body {
        inset-block-end: 96px;
    }

    /* The two nav arrows and the segment tabs would collide on a narrow
       screen, so the arrows go and the segments remain tappable. */
    .mira-hero__nav {
        display: none;
    }

    /* Rail arrows are a pointer affordance; on touch the rail is swiped. */
    .mira-bhead__acts .mira-arrow,
    .mira-flash__timer .mira-arrow {
        display: none;
    }

    /* The lookbook stage drops under its list rather than being squeezed.
       Fixed for the same reason as the hero above. */
    .mira-look__stage {
        min-block-size: 360px;
    }

    /* The seal overlaps the image corner; on a phone that corner is close to
       the edge, so it tucks in. */
    .mira-camp__ring {
        inset-block-start: -18px;
        inset-inline-start: 0;
    }

    .mira-coupon__code,
    .mira-coupon__cta {
        flex: 1;
        text-align: center;
    }
}