/* ===========================================================================
   MIRA REDESIGN — base layer
   ===========================================================================

   The `casual` theme's Mira layer. Loaded AFTER style.css (see theme.json), so
   every selector here is prefixed `.mira` to outrank the legacy sheet and the
   six core sheets that load after the theme's own.

   WHY A NEW FILE and not an append to style.css: two sessions appending to one
   stylesheet lose each other's work, and style.css's pre-Mira half still serves
   every screen not yet ported. Each phase gets its own layer.

   READ FIRST — how colour works here
   ----------------------------------
   Nothing in this theme names a colour. Nine tokens carry the whole palette and
   five palettes re-declare those nine and nothing else. A literal hex in a rule
   is a bug: it is exactly what stops the palette switcher working.

     --mira-bg    page ground
     --mira-pp    card / panel surface
     --mira-sf    surface tint: page heads, bands, chips, inputs
     --mira-ink   text, dark blocks
     --mira-sub   secondary text, meta, placeholders
     --mira-acc   accent: buttons, active states, badges
     --mira-acd   accent deep: prices, links on light, hover
     --mira-ln    hairline border
     --mira-oac   text ON an accent surface

   Three traps the palettes set, all of which have a wrong-looking-but-correct
   answer:

   1. Noir & gold INVERTS. --mira-ink is the LIGHT colour there, and --mira-acd
      is LIGHTER than --mira-acc, the reverse of the other four. So a hover may
      never pick "a darker shade" by hand; it goes through a token or it breaks
      in that palette.
   2. Ivory noir sets --mira-acc EQUAL to --mira-ink. An accent surface and ink
      text are then the same colour. That is what --mira-oac is for: text on an
      accent surface is ALWAYS var(--mira-oac), never #FFF and never ink.
   3. --mira-pp is lighter than --mira-bg in palettes 1-3 and darker in Noir.
      Never infer a direction; a card is --mira-pp because it is a card.

   Borders and shadows recolour with the palette too — the ink RGB triplet is
   published as --mira-ink-rgb so rgba() shades track the palette.

   Tokens are declared on `.mira`, the wrapper element itself, NEVER on :root.
   A declaration on the element beats an inherited one whatever the source
   order, and the tenant's override block (css-variable.blade.php) targets the
   same element. A :root block cannot reach them.

   Units are `cqi`, not `vw`. The frame is a container
   (container-type:inline-size) and the design is authored against it. This
   differs from the Orchid layer deliberately.

   Radii: Mira is ROUNDED. 8/9/10/12/14/16/18/20/22px on surfaces, 999px on
   pills, 50% on circles. Orchid's "0 or 999px only" rule does NOT apply here.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Tokens — the default palette (Blush rose) and the four alternates.

   The palette is chosen by a data attribute on the same element, so switching
   is one attribute and never a second stylesheet. An unconfigured shop has no
   attribute at all and gets the block below, which is why the default must be
   the bare `.mira` rule rather than [data-mira-pal="blush"].
   --------------------------------------------------------------------------- */

.mira {
    /* Blush rose — the shipped default */
    --mira-bg:  #FBF5F3;
    --mira-pp:  #FFFDFC;
    --mira-sf:  #F4E5E0;
    --mira-ink: #2E2226;
    --mira-sub: #93797E;
    --mira-acc: #B96C79;
    --mira-acd: #7E4450;
    --mira-ln:  rgba(46, 34, 38, .13);
    --mira-oac: #FFF8F6;

    /* Published separately so rgba() shades follow the palette. Any rule that
       needs a translucent ink uses rgba(var(--mira-ink-rgb), .N). */
    --mira-ink-rgb: 46, 34, 38;

    /* The hero's warm highlight is NOT a palette token — the design uses one
       fixed warm tone over photography in every palette, because it sits on an
       image rather than on the page ground. */
    --mira-warm: #F0C9A8;

    /* Two more fixed values, for the same reason: they sit on PHOTOGRAPHY or on
       a white overlay, where a palette token cannot be read. The design uses
       one dark scrim and one ink under every palette. Named rather than
       sprinkled, so a literal hex in a rule is still a bug.

         --mira-scrim    the badge/pill ground over a product photo
         --mira-onwhite  text and icons on a white(ish) overlay card */
    --mira-scrim:   rgba(24, 16, 20, .72);
    --mira-onwhite: #2E2226;

    /* The close button inside the white size-popover. The design writes
       `background:#F0EFEB` on it in all three places it appears (SF:251, 448,
       672) — a fixed warm grey, because the popover it sits in is a fixed
       white card rather than a palette surface. Named here for the same reason
       --mira-scrim is: a fixed value is fine, the same fixed value sprinkled
       through three rules is not. */
    --mira-onwhite-sf: #F0EFEB;

    /* Header height, used by every `position:sticky` offset in the theme.
       Declared once here so a header change cannot desync the sidebars. */
    --mira-head-h: 76px;

    /* Status semantics — positive / caution / negative. Deliberately NOT
       palette-derived: "your refund was rejected" must not be rendered in a
       friendly rose just because the shop picked the blush palette. A status
       colour carries MEANING, and the meaning has to survive a repaint.

       They live here, as named tokens, for the same reason --mira-scrim does:
       a fixed value is fine, a fixed value sprinkled through the rules is not.
       Each pair is a tinted ground plus text that meets contrast on it. */
    --mira-pos:    #34633C;
    --mira-pos-bg: #E3F0E4;
    --mira-cau:    #6B4E18;
    --mira-cau-bg: #FBF0DF;
    --mira-cau-ln: rgba(160, 120, 40, .22);
    --mira-neg:    #8E332E;
    --mira-neg-bg: #F7E0DE;
    --mira-neg-st: #B4453F;
    --mira-on-neg: #FFF8F6;
}

.mira[data-mira-pal="terracotta"] {
    --mira-bg:  #FAF5EC;
    --mira-pp:  #FFFEF9;
    --mira-sf:  #F1E3CF;
    --mira-ink: #33241A;
    --mira-sub: #95795F;
    --mira-acc: #BC6740;
    --mira-acd: #7F3D1E;
    --mira-ln:  rgba(51, 36, 26, .13);
    --mira-oac: #FFF7EF;
    --mira-ink-rgb: 51, 36, 26;
}

.mira[data-mira-pal="olive"] {
    --mira-bg:  #F5F6EF;
    --mira-pp:  #FCFDF8;
    --mira-sf:  #E6EAD8;
    --mira-ink: #252A1E;
    --mira-sub: #7B8370;
    --mira-acc: #71804F;
    --mira-acd: #41502B;
    --mira-ln:  rgba(37, 42, 30, .13);
    --mira-oac: #F8FAF1;
    --mira-ink-rgb: 37, 42, 30;
}

/* Noir & gold — the inverting one. See trap 1 in the header comment. */
.mira[data-mira-pal="noir"] {
    --mira-bg:  #141114;
    --mira-pp:  #1D181D;
    --mira-sf:  #262027;
    --mira-ink: #F2EAE0;
    --mira-sub: #A2958F;
    --mira-acc: #C9A35B;
    --mira-acd: #E4CD96;
    --mira-ln:  rgba(242, 234, 224, .17);
    --mira-oac: #1A1510;
    --mira-ink-rgb: 242, 234, 224;
}

/* Ivory noir — accent EQUALS ink. See trap 2. */
.mira[data-mira-pal="ivory"] {
    --mira-bg:  #FFFFFF;
    --mira-pp:  #FAFAF8;
    --mira-sf:  #F0EFEB;
    --mira-ink: #141414;
    --mira-sub: #7C7C76;
    --mira-acc: #141414;
    --mira-acd: #454540;
    --mira-ln:  rgba(20, 20, 20, .13);
    --mira-oac: #FFFFFF;
    --mira-ink-rgb: 20, 20, 20;
}


/* ---------------------------------------------------------------------------
   2. The wrapper itself.

   The palette cross-fades rather than snapping, which is the design's own
   behaviour on the frame, header and footer. Enumerated to two properties —
   `transition: all` is off the motion table and would animate layout too.
   --------------------------------------------------------------------------- */

.mira {
    background: var(--mira-bg);
    color: var(--mira-ink);
    font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
    transition: background .5s ease, color .5s ease;

    /* Card-level widgets size against their own width, not the viewport, so
       one dropped into a narrow PageBuilder column still reads correctly. */
    container-type: inline-size;
}


/* ---------------------------------------------------------------------------
   3. Vendor resets.

   Bootstrap and the legacy casual sheet bring their own radii, heading margins,
   line-clamps and button padding, and every one of them silently overrides a
   measured design value. Zero them on the elements this layer restyles rather
   than layering on top.

   The line-clamp reset is not hypothetical: the legacy sheet clamps every
   h1-h6 to two lines and every <p> to three with -webkit-box + ellipsis. A Mira
   rule outranks an element selector only for properties it DECLARES, so a
   headline rendered as "…" until this block existed. Same bug, same fix as the
   Orchid layer.
   --------------------------------------------------------------------------- */

/* ⚠️ Every reset in this block is wrapped in `:where()` for the specificity
   reason spelled out on the anchor and button resets below. A bare
   `.mira h2` is (0,1,1) and OUTRANKS a component class like `.mira-btitle`
   (0,1,0) — so `font-weight: inherit` here would quietly defeat the ~349
   font-weight declarations the component sheets make, and the design's
   typographic hierarchy would collapse to a single weight.

   `:where()` keeps the normalisation (it still beats the legacy sheet's bare
   element rules) while losing to anything that names its own value. */
.mira :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    font-weight: inherit;

    /* ⚠️ `color: inherit` is what makes the per-section "Text Color" setting
       reach headlines at all, and it is not optional decoration.

       The legacy sheet declares `h1, h2, h3, h4, h5, h6 { color:
       var(--heading-color) }` (style.css:239). An INHERITED colour always
       loses to a declaration, no matter how weak, so every Mira headline that
       does not name its own colour was painted heading-color regardless of
       what the band above it set. Redefining --mira-ink on the section did
       nothing for those nodes because they never read --mira-ink; they were
       simply expected to inherit, which the legacy rule prevented.

       Verified on the live page: a section carrying
       `color:rgb(255,254,254);--mira-ink:…` still rendered
       `.mira-camp__title` and `.mira-promo__title` in rgb(27,28,37), with
       DevTools showing style.css:239 as the winning rule.

       `:where()` keeps this at (0,1,0) via `.mira`, which beats the legacy
       element rule at (0,0,1) while still losing to any component class that
       names a colour of its own (`.mira-hero__title { color: #FFF }`). */
    color: inherit;
}

.mira :where(p) {
    margin: 0;
    display: block;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}

.mira :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ⚠️ `blockquote` MUST be reset here.
   `style.css` styles the bare element site-wide with
   `padding: 50px; border-left: 5px solid var(--main-color-one)`, which is the
   legacy theme's accent — a red bar. The testimonials band uses a semantic
   <blockquote> for the quote, so that bar appeared down its edge and no rule
   under `.mira-testi` explained it. Wrapped in `:where()` like every other
   reset in this block, so a component can still opt back in. */
.mira :where(blockquote) {
    margin: 0;
    padding: 0;
    border: 0;
}

/* ⚠️ `:where(a)`, NOT a bare `a`. `.mira a` is (0,1,1) — one class plus one
   ELEMENT — which OUTRANKS every single-class rule like `.mira-buy__bag`
   (0,1,0). So `color: inherit` beat the accent button's own colour and the
   "Add to Cart" label rendered in ink. Wrapping the element in `:where()`
   drops it to (0,1,0), which still outranks the legacy sheet's bare `a`
   (0,0,1) while losing to any component that names its own colour.
   Element selectors are counted, and this is the trap that hides it. */
.mira :where(a) {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.mira :where(img) {
    max-width: 100%;
    display: block;
}

/* ⚠️ `:where()` is LOAD-BEARING, exactly as it is on the anchor reset above.
   `.mira button` would be (0,1,1) — a class plus an ELEMENT — which beats any
   single-class button rule like `.mira-auth__submit` (0,1,0). That is not
   hypothetical: it silently stripped the fill off the login and register
   submit buttons, rendering the design's filled pill as bare text.

   `:where()` contributes ZERO specificity, so the reset still normalises every
   bare <button> while losing to any component class that styles one. */
.mira :where(button) {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

.mira :where(input, select, textarea) {
    font: inherit;
    color: inherit;
}

.mira input::placeholder,
.mira textarea::placeholder {
    color: var(--mira-sub);
    opacity: .85;
}

.mira *,
.mira *::before,
.mira *::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------------------------
   4. Icons.

   Every icon is a Material Symbols ligature in a span, never an SVG set and
   never an emoji.

   ⚠️ A `font:` SHORTHAND on any selector that can also reach `.o-i` resets
   font-family and the ligature NAME prints as literal text ("search",
   "favorite"). Class count is compared before element count, so
   `.mira .m-search span` (2 classes + 1 element) beats `.mira .o-i`
   (2 classes) and the fix is `:not(.o-i)` on the offending selector — never
   bumping .o-i's specificity. Before adding a font shorthand to a bare
   span/a/* selector, check whether an .o-i can live inside it.

   The class name `.o-i` is kept rather than renamed to `.m-i`: it is already
   the platform-wide icon span in this codebase and renaming it would fork the
   convention for no gain.
   --------------------------------------------------------------------------- */

.mira .o-i {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
}


/* ---------------------------------------------------------------------------
   5. Type scale.

   Cormorant Garamond is Latin-only and Tajawal covers both scripts, so every
   display stack names both IN THAT ORDER: Arabic falls through Cormorant to
   Tajawal, exactly as Fraunces→Tajawal does on the Orchid theme. Never drop
   the second name.

   Letter-spacing is a LATIN treatment — it looks broken on Arabic — so all
   tracking is scoped to LTR at the end of this block.
   --------------------------------------------------------------------------- */

.mira {
    --mira-display: 'Cormorant Garamond', 'Tajawal', serif;
    --mira-ui: 'Tajawal', system-ui, -apple-system, sans-serif;
}

.mira-display {
    font-family: var(--mira-display);
}

/* Hero headline. The design puts an italic <em> inside, in the warm tone. */
.mira-h1 {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(40px, 6.4cqi, 96px);
    line-height: 1.04;
    letter-spacing: -.01em;
}

.mira-h1 em {
    font-style: italic;
    color: var(--mira-warm);
}

.mira-h2 {
    font-family: var(--mira-display);
    font-weight: 500;
    font-size: clamp(26px, 3.4cqi, 46px);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.mira-h3 {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: clamp(17px, 1.6cqi, 22px);
    line-height: 1.25;
}

.mira-body {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: clamp(12.5px, 1.1cqi, 15px);
    line-height: 1.85;
    color: var(--mira-sub);
    text-wrap: pretty;
}

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

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

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

.mira-price--was {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--mira-sub);
    text-decoration: line-through;
}

/* Tracking, LTR only. Arabic does not take letter-spacing. */
.mira:not([dir="rtl"]) .mira-kicker { letter-spacing: .22em; }
.mira:not([dir="rtl"]) .mira-brand__name { letter-spacing: .24em; }
.mira:not([dir="rtl"]) .mira-brand__sub  { letter-spacing: .34em; }

/* Numerals stay LTR inside Arabic text — prices, order numbers, phones.
   `.o-ltr` is an ALIAS, not a duplicate: the aromatic theme named this class
   `.o-ltr` and that name is in muscle memory, so Phase 2 blades were written
   with it and the isolation silently did nothing — "1 / 4" rendered as "4 / 1"
   in an Arabic page. Both names now resolve. */
.mira .mira-ltr,
.mira .o-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}


/* ---------------------------------------------------------------------------
   6. Atoms — buttons.

   Built once here and composed by every screen, so a value is measured in one
   place instead of per screen. Text on an accent surface is var(--mira-oac);
   see trap 2.
   --------------------------------------------------------------------------- */

.mira-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    border: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* Primary — accent fill. Hover deepens THROUGH the token, never by hand. */
.mira-btn--primary {
    background: var(--mira-acc);
    color: var(--mira-oac);
}

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

/* Ink — the design's second filled button, used in the mobile drawer. */
.mira-btn--ink {
    background: var(--mira-ink);
    color: var(--mira-bg);
}

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

.mira-btn--outline {
    background: transparent;
    color: var(--mira-ink);
    border-color: var(--mira-ln);
    font-weight: 400;
}

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

/* On photography, where the page tokens cannot be read against the image. */
.mira-btn--onimage {
    background: #FFF;
    color: #1A1014;
}

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

.mira-btn--ghost {
    background: transparent;
    color: #FFF;
    border-color: rgba(255, 255, 255, .5);
    font-weight: 400;
}

.mira-btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #FFF;
}

.mira-btn--block {
    display: flex;
    width: 100%;
}

.mira-btn--sm {
    padding: 11px 18px;
    font-size: 11.5px;
}


/* ---------------------------------------------------------------------------
   7. Atoms — fields, chips, icon buttons, badges.
   --------------------------------------------------------------------------- */

.mira-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--mira-pp);
    border: 1px solid var(--mira-ln);
    border-radius: 12px;
    font-family: var(--mira-ui);
    font-size: 13.5px;
    line-height: 1;
    color: var(--mira-ink);
    transition: border-color .2s ease;
}

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

.mira-field input,
.mira-field textarea,
.mira-field select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
}

.mira-label {
    display: block;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: var(--mira-sub);
    margin-block-end: 8px;
}

/* Pill — filter chips, tabs, category chips. */
.mira-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--mira-ln);
    background: transparent;
    color: var(--mira-ink);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

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

.mira-chip.is-active {
    background: var(--mira-acc);
    color: var(--mira-oac);
    border-color: var(--mira-acc);
    font-weight: 700;
}

/* Circular icon button — header actions, rail arrows, social links. */
.mira-iconbtn {
    position: relative;
    inline-size: 42px;
    block-size: 42px;
    display: inline-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-iconbtn:hover {
    background: var(--mira-sf);
    border-color: var(--mira-acc);
}

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

/* Count bubble. ALWAYS rendered, empty when the basket is — the platform's
   counter refresh only sets text, and an element that does not exist cannot be
   updated. `:empty` hides it instead. */
.mira-count {
    position: absolute;
    inset-block-start: -4px;
    inset-inline-end: -4px;
    min-inline-size: 17px;
    block-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mira-acc);
    color: var(--mira-oac);
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
}

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

.mira-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    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-card {
    background: var(--mira-pp);
    border: 1px solid var(--mira-ln);
    border-radius: 18px;
}


/* ---------------------------------------------------------------------------
   8. Layout patterns.

   Three, and there is no fourth. Reproduced as utilities so a screen composes
   them instead of re-measuring.

   Pattern A note — `auto-fill`, NOT `auto-fit`, on anything data-driven.
   auto-fit COLLAPSES the tracks it cannot fill and hands their width to the
   survivors, so a filter returning two products renders two enormous cards.
   The design files write auto-fit throughout only because their mock lists
   always fill a row; that is a property of the mock, not an instruction.
   `--fit` is kept for the fixed-count rows (service strip, occasion tiles)
   where stretching IS the intent.
   --------------------------------------------------------------------------- */

.mira-grid {
    display: grid;
    gap: clamp(14px, 1.8cqi, 22px);
}

.mira-grid--200 { grid-template-columns: repeat(auto-fill, minmax(min(200px, 46%), 1fr)); }
.mira-grid--220 { grid-template-columns: repeat(auto-fill, minmax(min(220px, 46%), 1fr)); }
.mira-grid--230 { grid-template-columns: repeat(auto-fill, minmax(min(230px, 46%), 1fr)); }
.mira-grid--300 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.mira-grid--fit-200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 46%), 1fr)); }
.mira-grid--fit-230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 46%), 1fr)); }
.mira-grid--fit-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* Pattern B — two-pane split. No min(), so it stacks below ~700px on its own. */
.mira-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(20px, 3cqi, 44px);
}

.mira-split--stretch { align-items: stretch; }
.mira-split--start   { align-items: start; }

/* A field that must span the whole row inside a Pattern B form grid. */
.mira-span-all { grid-column: 1 / -1; }

/* Pattern C — sidebar + content. Flex, not grid. min-inline-size:0 on both is
   mandatory: without it long words and tables refuse to shrink and the page
   overflows horizontally. */
.mira-aside {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2.6cqi, 34px);
    align-items: flex-start;
}

.mira-aside__side {
    flex: 1 1 min(300px, 100%);
    min-inline-size: 0;
    position: sticky;
    inset-block-start: var(--mira-head-h);
}

.mira-aside__main {
    flex: 999 1 62%;
    min-inline-size: 0;
}

/* Wide tables SCROLL, they never crush into unreadable slivers. The inner
   element carries the min-width; the wrapper carries the scroll. */
.mira-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ---------------------------------------------------------------------------
   9. Section rhythm.
   --------------------------------------------------------------------------- */

.mira-section {
    padding-block: clamp(38px, 5cqi, 76px);
    padding-inline: clamp(20px, 4cqi, 60px);
}

.mira-section--tint {
    background: var(--mira-sf);
}

.mira-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-block-end: clamp(20px, 2.6cqi, 34px);
}


/* ---------------------------------------------------------------------------
   10. Motion.

   The design's complete keyframe set. No other durations exist, and there is
   no `transition: all` anywhere in this theme.

   Marquees reverse travel under RTL, so both keyframe sets ship and the RTL
   one is selected by the direction attribute, not by mirroring a transform.
   --------------------------------------------------------------------------- */

@keyframes mira-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mira-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mira-kb {
    from { transform: scale(1.03); }
    to   { transform: scale(1.13); }
}

@keyframes mira-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes mira-marquee-r {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

@keyframes mira-spin {
    to { transform: rotate(360deg); }
}

@keyframes mira-pop {
    0%   { transform: scale(.4);  opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1);   opacity: 1; }
}

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

/* Respect a reduced-motion preference: the marquees, ken burns and the
   rotating seal are decorative and looping. */
@media (prefers-reduced-motion: reduce) {
    .mira *,
    .mira *::before,
    .mira *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ===========================================================================
   11. CHROME — announcement bar, header, mega menu, mobile drawer
   ===========================================================================

   ONE structural switch, at 768px, and it is the only width-based media query
   this theme is allowed. Everything else is fluid. Below 768 the header is
   hamburger · centred logo · search · bag with a drawer; at or above it is
   search pill · centred logo · three counted icons, with a nav row under them
   and mega menus on hover.
   =========================================================================== */

/* --- Announcement bar ---------------------------------------------------- */

.mira-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    block-size: 38px;
    padding-inline: 16px;
    background: var(--mira-ink);
    color: var(--mira-bg);
    transition: background .5s ease, color .5s ease;
}

.mira-topbar__nav {
    inline-size: 22px;
    block-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: .55;
    flex: none;
    transition: opacity .2s ease;
}

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

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

/* The message stack. Only one child is visible at a time, so the wrapper is
   what the arrows sit against — without a width it collapses to the current
   message and the arrows jump every time a longer line rotates in. */
.mira-topbar__msgs {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
}

.mira-topbar__msg {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 11.5px;
    line-height: 1;
    text-align: center;
    /* One long message must not push the arrows off the bar. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Only the current message is shown; the rest stay in the DOM so the control
   is real markup rather than a JS-built string. */
.mira-topbar__msg:not(.is-active) {
    display: none;
}


/* --- Header shell -------------------------------------------------------- */

.mira-header {
    position: relative;
    z-index: 50;
    background: var(--mira-bg);
    border-block-end: 1px solid var(--mira-ln);
    transition: background .5s ease;
}

.mira-header__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 18px clamp(20px, 4cqi, 60px) 12px;
}

.mira-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Brand mark — centred column of name over kicker. */
.mira-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mira-brand__name {
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: clamp(26px, 2.6cqi, 38px);
    line-height: 1;
    color: var(--mira-ink);
}

/* The design offsets the name by its own tracking so a letter-spaced string
   stays optically centred — the trailing space is only on the end side. */
.mira:not([dir="rtl"]) .mira-brand__name {
    padding-inline-start: .24em;
}

.mira-brand__name img {
    max-block-size: 46px;
    inline-size: auto;
}

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

/* Header search pill. */
.mira-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--mira-ln);
    border-radius: 999px;
    max-inline-size: 280px;
    color: var(--mira-sub);
    transition: border-color .2s ease;
}

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

.mira-search .o-i {
    font-size: 18px;
    flex: none;
}

/* `:not(.o-i)` is load-bearing — a font shorthand here would otherwise reset
   the icon span's family and print "search" as a word. See section 4. */
.mira-search input:not(.o-i) {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1;
    color: var(--mira-ink);
}


/* --- Nav row + mega menu -------------------------------------------------- */

/* The nav row and the mega panel share a positioning context, so the panel can
   span the full header width regardless of which item opened it. */
.mira-nav-wrap {
    position: relative;
}

.mira-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.2cqi, 32px);
    padding: 6px clamp(20px, 4cqi, 60px) 0;
    flex-wrap: wrap;
}

.mira-nav > li > a,
.mira-nav__link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 2px 14px;
    border-block-end: 2px solid transparent;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1;
    color: var(--mira-ink);
    transition: color .2s ease, border-color .2s ease;
}

.mira-nav > li > a:hover,
.mira-nav > li.is-active > a,
.mira-nav__link:hover {
    color: var(--mira-acc);
    border-block-end-color: var(--mira-acc);
}

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

/* --- Mega panel ----------------------------------------------------------
   ⚠️ The design draws this as a SIBLING of the nav (Storefront 130), but the
   markup does not come from us. `render_frontend_menu()` is a rendering slot:
   MenuBuilder emits a NESTED `<ul class="sub-menu">` inside the `<li>` that has
   children, and `MenuBuilderFrontendRender::render_children_item()` is the only
   place that shape is decided. We own the wrapper and the CSS; we do not own
   the item data.

   So the panel is built from the real DOM instead of the mock's:

       li.menu-item-has-children          the nav item
         └ ul.sub-menu                    ← THE PANEL (position:absolute)
             └ li                         ← a COLUMN
                 ├ a                      ← the column heading
                 └ ul.sub-menu            ← the links (position:static)

   The nesting depth carries the meaning, which is exactly what MenuSeed's
   `mira_mega_columns()` writes: each column is a child node whose own children
   are the links. Get this wrong and the submenu renders as flat visible text
   under the header — which is what it did before this block existed.

   `position: static` on the parent `li` is what lets the absolutely-positioned
   panel span the full header width rather than the width of its own nav item. */
.mira-nav > li {
    position: static;
}

/* Any nav item with children gets the chevron. Added by CSS, not by the blade,
   because the blade cannot reach inside the MenuBuilder render. */
.mira-nav > li.menu-item-has-children > a::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-size: 15px;
    line-height: 1;
    color: var(--mira-sub);
}

.mira-nav ul.sub-menu {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 48;
    display: none;
    /* The design draws `repeat(3, 1fr) 1.1fr` — three link columns plus a promo
       image card. That fourth track is NOT reproduced: the promo image has no
       source, because MenuBuilder emits menu items and nothing else. Hardcoding
       four tracks against three columns leaves a dead quarter of the panel and
       squeezes the columns into three-quarters of the width.
       auto-fit spreads however many columns the tenant actually built. */
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: clamp(18px, 3cqi, 44px);
    padding: 30px clamp(24px, 5cqi, 80px) 34px;
    background: var(--mira-pp);
    border-block-end: 1px solid var(--mira-ln);
    box-shadow: 0 34px 54px -28px rgba(0, 0, 0, .3);
    animation: mira-fade .22s ease-out;
}

/* Hover AND focus-within: a panel reachable only by pointer is unusable from a
   keyboard. */
.mira-nav > li.menu-item-has-children:hover > ul.sub-menu,
.mira-nav > li.menu-item-has-children:focus-within > ul.sub-menu {
    display: grid;
}

/* A column. */
.mira-nav ul.sub-menu > li {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The column heading. */
.mira-nav ul.sub-menu > li > a {
    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-nav ul.sub-menu > li > a {
    letter-spacing: .22em;
}

/* The links inside a column. Static, so it flows in its column instead of
   opening a second floating panel. */
.mira-nav ul.sub-menu ul.sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
}

.mira-nav ul.sub-menu ul.sub-menu > li > a {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    color: var(--mira-ink);
}

.mira-nav ul.sub-menu ul.sub-menu > li > a:hover {
    color: var(--mira-acc);
}

/* A third level would open a panel inside a panel. The design has no such
   thing, and the platform's Menu Builder lets a tenant nest arbitrarily deep,
   so flatten anything past the second level rather than let it break out. */
.mira-nav ul.sub-menu ul.sub-menu ul.sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline-start: 12px;
}

/* The design's own mega markup (.mira-mega*) is NOT reproduced here: the
   panel comes from MenuBuilder as a nested ul.sub-menu, styled above. Keeping
   a second unused block would be two selectors for one component and only one
   of them ever matching. */


/* Live-search suggestions. Anchored to the pill and clipped to its width, so a
   long product name cannot widen the header.

   ⚠️ The platform ships `.product-suggestion-list-item { width: calc(100%/6 - 20px) }`
   — a six-column CARD grid, meant for a full-width results page. Dropped into a
   280px dropdown that makes every row ~26px, and the text inside vanishes while
   the thumbnail still shows. Repurposing platform markup means resetting its
   LAYOUT rules, not just restyling it. */
.mira-suggest {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 8px);
    z-index: 60;
    max-block-size: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.mira-suggest .product-suggestion-list:empty {
    display: none;
}

.mira-suggest .product-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--mira-pp);
    border: 1px solid var(--mira-ln);
    border-radius: 14px;
    box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .3);
}

.mira-suggest .product-suggestion-list-item,
.mira-suggest .product-suggestion-list > li {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 0;
}

.mira-suggest .product-suggestion-list > li:hover {
    background: var(--mira-sf);
}

.mira-suggest .product-suggestion-list img {
    inline-size: 40px;
    block-size: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex: none;
}

/* Account dropdown.

   ⚠️ `display:none` here is LOAD-BEARING, not decoration. The menu is plain
   markup in the header, so without it every link renders inline beside the
   brand — "تسجيل الدخول اشتراك" spilling across the header, which is exactly
   what happened when this block was briefly deleted. */
.mira-acct {
    position: relative;
}

.mira-acct__menu {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 60;
    min-inline-size: 176px;
    padding: 8px;
    background: var(--mira-pp);
    border: 1px solid var(--mira-ln);
    border-radius: 14px;
    box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .3);
    flex-direction: column;
    gap: 2px;
    animation: mira-fade .18s ease-out;
}

.mira-acct:hover .mira-acct__menu,
.mira-acct:focus-within .mira-acct__menu {
    display: flex;
}

.mira-acct__menu a {
    padding: 10px 12px;
    border-radius: 10px;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    color: var(--mira-ink);
    white-space: nowrap;
}

.mira-acct__menu a:hover {
    background: var(--mira-sf);
    color: var(--mira-acc);
}


/* --- Language / region switchers ----------------------------------------
   These are NOT ours. `tenant/frontend/partials/navbar.blade.php` injects them
   into the header at runtime, hunting for a container per theme (Pattern D is
   the Mira one). We only restyle what lands.

   Without this block they arrive with the injector's own inline defaults —
   a grey 6px-radius box with hardcoded #d1d5db borders that ignores the palette
   entirely and sits at a different height to the 42px circular icon buttons
   beside it.

   Everything here needs `!important`: the injector writes its rules inline and
   with `!important` of its own, because it has to survive eight themes it
   cannot see. */
.mira .ov-lang-switcher.mira-lang,
.mira .ov-region-switcher.mira-lang {
    display: inline-flex !important;
    align-items: center;
}

.mira .mira-lang .selected-language,
.mira .mira-lang .ov-region-current {
    display: flex !important;
    align-items: center;
    gap: 5px;
    block-size: 42px;
    padding: 0 15px !important;
    border: 1px solid var(--mira-ln) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--mira-ink) !important;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 12px !important;
    line-height: 1;
    transition: background .2s ease, border-color .2s ease;
}

.mira .mira-lang .selected-language:hover,
.mira .mira-lang .ov-region-current:hover {
    background: var(--mira-sf) !important;
    border-color: var(--mira-acc) !important;
}

/* The injector's caret is a Line Awesome <i>, not a Material Symbol. Sized to
   sit with the two-letter label rather than restyled into something else. */
.mira .mira-lang .selected-language i,
.mira .mira-lang .ov-region-current i {
    font-size: 10px !important;
    color: var(--mira-sub) !important;
}

/* The dropdown. Matches the account menu above it, since they are siblings in
   the same row and open the same way. */
.mira .mira-lang .language_dropdown ul,
.mira .mira-lang .ov-region-dd ul {
    min-inline-size: 136px !important;
    padding: 8px !important;
    background: var(--mira-pp) !important;
    border: 1px solid var(--mira-ln) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .3) !important;
}

.mira .mira-lang .language_dropdown ul li a,
.mira .mira-lang .ov-region-dd ul li a {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-family: var(--mira-ui);
    font-size: 13px !important;
    color: var(--mira-ink) !important;
}

.mira .mira-lang .language_dropdown ul li a:hover,
.mira .mira-lang .ov-region-dd ul li a:hover,
.mira .mira-lang .ov-region-dd ul li a.active {
    background: var(--mira-sf) !important;
    color: var(--mira-acc) !important;
}

/* In the mobile row the pill sits between the brand and the icon buttons, so it
   loses its label and keeps only the two-letter code. */
.mira .mira-header__mob .mira-lang .selected-language,
.mira .mira-header__mob .mira-lang .ov-region-current {
    block-size: 38px;
    padding: 0 11px !important;
    font-size: 11px !important;
}


/* --- Mobile header + drawer ---------------------------------------------- */

.mira-header__mob {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px clamp(14px, 3.6cqi, 22px);
}

.mira-header__mob .mira-brand {
    margin-inline: auto;
    gap: 2px;
}

.mira-header__mob .mira-brand__name {
    font-size: 24px;
}

.mira-header__mob .mira-brand__sub {
    font-size: 8px;
}

.mira:not([dir="rtl"]) .mira-header__mob .mira-brand__name { padding-inline-start: .2em; }
.mira:not([dir="rtl"]) .mira-header__mob .mira-brand__sub  { letter-spacing: .3em; }

.mira-drawer {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 49;
    background: var(--mira-bg);
    border-block-end: 1px solid var(--mira-ln);
    box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .35);
    padding: 16px clamp(14px, 3.6cqi, 22px) 22px;
    flex-direction: column;
    gap: 2px;
    animation: mira-rise .25s ease-out;
    max-block-size: 78vh;
    overflow-y: auto;
}

.mira-drawer.is-open {
    display: flex;
}

/* The drawer's search field is full width, unlike the header pill. */
.mira-search--drawer {
    max-inline-size: none;
    margin-block-end: 12px;
    background: var(--mira-sf);
}

.mira-drawer__links ul {
    display: flex;
    flex-direction: column;
}

.mira-drawer li > a,
.mira-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 4px;
    border-block-end: 1px solid var(--mira-ln);
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    color: var(--mira-ink);
}

.mira-drawer li > a:hover,
.mira-drawer__link:hover {
    color: var(--mira-acc);
}

/* The chevron is direction-resolved in PHP, not mirrored with a transform. */
.mira-drawer li > a .o-i,
.mira-drawer__link .o-i {
    font-size: 17px;
    color: var(--mira-acc);
}

.mira-drawer__cta {
    display: flex;
    gap: 10px;
    margin-block-start: 16px;
}

.mira-drawer__cta > * {
    flex: 1;
}

/* Nested submenus in the drawer. Same MenuBuilder markup as the mega panel, but
   there is no room for a floating panel on a phone — so the children render as
   an indented list under their parent instead.

   Without this block the drawer inherits the mega panel's `position:absolute`
   and every child link stacks on top of the header. The Dresses item alone
   carries three columns and twelve links, so this is not a corner case. */
.mira-drawer__links ul.sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    padding-inline-start: 14px;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
}

.mira-drawer__links ul.sub-menu > li > a {
    padding-block: 11px;
    font-size: 13.5px;
    color: var(--mira-sub);
}

/* The column headings inside the drawer keep the accent, so the tree still
   reads as grouped rather than as one long list. */
.mira-drawer__links > ul > li > ul.sub-menu > li > a {
    color: var(--mira-acc);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
}

.mira:not([dir="rtl"]) .mira-drawer__links > ul > li > ul.sub-menu > li > a {
    letter-spacing: .16em;
}


/* --- The one structural switch, 768px ------------------------------------ */

/* Hidden default stated at MATCHING specificity, then flipped inside the
   query. A bare `display` rule outside a query would win at every width —
   that is exactly how the mobile bottom nav once rendered on desktop, under
   the footer. Anything replacing a conditionally-displayed element must
   reproduce its whole display CONTRACT, not just its looks. */
.mira .mira-header__wide { display: block; }
.mira .mira-header__narrow { display: none; }

@media (max-width: 767.98px) {
    .mira .mira-header__wide { display: none; }
    .mira .mira-header__narrow { display: block; }
}


/* ===========================================================================
   12. Page head + breadcrumb
   =========================================================================== */

/* The surface-tinted band that carries the trail and the page title. Screens
   with their own hero suppress the title and keep only the trail. */
.mira-pagehead {
    background: var(--mira-sf);
    padding-block-end: clamp(18px, 2.2cqi, 30px);
    transition: background .5s ease;
}

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

.mira-pagehead__title {
    padding-inline: clamp(16px, 2.8cqi, 44px);
    color: var(--mira-ink);
}

.mira-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px clamp(16px, 2.8cqi, 44px);
}

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

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

.mira-crumb .is-current {
    color: var(--mira-ink);
}

.mira-crumb__sep {
    color: var(--mira-sub);
    opacity: .6;
}


/* ===========================================================================
   13. Footer
   =========================================================================== */

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

/* Oversized brand watermark behind the columns. pointer-events:none is
   load-bearing — it spans the whole footer and would swallow every click. */
.mira-footer__mark {
    position: absolute;
    inset-block-end: -4cqi;
    inset-inline: 0;
    text-align: center;
    font-family: var(--mira-display);
    font-weight: 600;
    font-size: 24cqi;
    line-height: 1;
    opacity: .05;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}

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

.mira-footer__body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 4cqi, 70px);
    padding: clamp(44px, 6cqi, 80px) clamp(18px, 4.2cqi, 64px) clamp(26px, 3cqi, 44px);
}

/* The widget zones. Basis differs per zone, so the brand column stays wider
   than the link columns without a grid. */
.mira-footer__brandzone { flex: 1.3 1 min(280px, 100%); }
.mira-footer__linkzone  { flex: 1 1 150px; }
.mira-footer__contact   { flex: 1.2 1 min(240px, 100%); }

.mira-footer__brandzone,
.mira-footer__linkzone,
.mira-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-inline-size: 0;
}

.mira-footer__brandzone { gap: 16px; }

.mira-footer .mira-brand {
    align-items: flex-start;
    gap: 4px;
}

.mira-footer .mira-brand__name {
    font-size: 34px;
    color: inherit;
}

.mira-footer .mira-brand__sub {
    font-size: 10px;
    color: inherit;
    opacity: .6;
}

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

.mira-footer__tagline {
    max-inline-size: 38ch;
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.9;
    opacity: .72;
    text-wrap: pretty;
}

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

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

.mira-footer__linkzone a,
.mira-footer__contact a {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: inherit;
    opacity: .85;
}

.mira-footer__linkzone a:hover,
.mira-footer__contact a:hover {
    opacity: 1;
    color: var(--mira-acc);
}

/* The link list is a MenuBuilder render, so the <ul>/<li> come from the
   platform and only the spacing is ours. */
.mira-footer__links {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* A footer menu can have children too — the tenant picks which menu goes in
   each column, and nothing stops them choosing the primary nav. Flatten it
   rather than let the mega panel's absolute positioning escape into the
   footer. */
.mira-footer__links ul.sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-block-start: 13px;
    padding: 0;
    padding-inline-start: 12px;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
}

/* Contact rows. Three styles, chosen per row in the widget. */
.mira-footer__line {
    font-family: var(--mira-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.7;
    opacity: .85;
}

/* The phone number. Also carries dir="ltr" from the widget — a Latin numeral
   run inside Arabic text is reordered by the bidi algorithm and comes out
   visually scrambled otherwise. */
.mira-footer__line--strong {
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    opacity: 1;
}

.mira-footer__line--muted {
    font-size: 12px;
    line-height: 1.5;
    opacity: .7;
}

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

/* The border here is a neutral grey, not var(--mira-ln): the footer sits on
   ink, where an ink-derived hairline would be invisible. */
.mira-footer__social a {
    inline-size: 38px;
    block-size: 38px;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

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

.mira-footer__bottom {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px clamp(18px, 4.2cqi, 64px) 24px;
    border-block-start: 1px solid rgba(128, 128, 128, .28);
}

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

.mira-footer__pays {
    margin-inline-start: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mira-footer__pays span,
.mira-footer__pays img {
    padding: 6px 11px;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: 8px;
    font-family: var(--mira-ui);
    font-weight: 700;
    font-size: 9.5px;
    line-height: 1;
    opacity: .8;
}

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


/* ===========================================================================
   15. Mobile bottom tab bar (card 08)
   ===========================================================================

   ⚠️ READ BEFORE TOUCHING `display` HERE.

   The platform hides `.mobile-nav` with an UNCONDITIONAL `display: none` at
   (0,1,0) in custom-style.css and turns it on only INSIDE its own media query.
   So a bare `.mira .mira-mobnav { display: grid }` at (0,2,0) wins at EVERY
   width — which is how the Orchid bottom nav once rendered on desktop, in
   normal flow, under the footer, with no `position: fixed` (that lived in the
   platform's query too).

   Replacing a conditionally-displayed platform element means reproducing its
   whole display CONTRACT, not just its looks: an explicit hidden default at
   matching specificity, and every positioning property restated inside the
   query.
   =========================================================================== */

.mira .mira-mobnav {
    display: none;
}

@media (max-width: 991.98px) {
    /* Transcribed from Mira Widgets.dc.html `w.isMobBars` (281-301).
       The Storefront file does NOT draw this bar on any screen, so the widget
       card is the only spec for it.

       READING THE CARD CORRECTLY — it nests four levels and only two are real:

         div  background:var(--sf)          the card's own preview backdrop
           div  min(360px) radius:18px      a PHONE MOCKUP, not bar chrome
             div  padding:12px 14px         ← sticky add-to-bag bar, PDP ONLY
                  border-bottom:1px --ln
             div  padding:10px 8px          ← THIS bar, site-wide
               span flex:1 …                a tab

       The 18px radius and the outer border belong to the drawn phone and are
       NOT reproduced. Neither inner bar declares a background, so both show the
       mockup's `var(--bg)` — which is why this bar's ground is --mira-bg.

       The two bars are independent: the sticky one is Phase 2 (it needs the
       product page), and this one has to stand alone on every other screen. */
    .mira .mira-mobnav {
        /* `display:flex`, tabs at `flex:1` — the card's own layout. No
           column-count property is needed: flex spreads whatever number of tabs
           the tenant configured. */
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: 88;
        padding: 10px 8px;
        background: var(--mira-bg);
        /* DEVIATION, deliberate: the card has no top border here — inside the
           drawn phone, the mockup's own outline separates the bar from the
           content above it. A real fixed bar has no such outline and would
           float against the page, so the hairline is restated. */
        border-block-start: 1px solid var(--mira-ln);
        transition: background .5s ease;
    }

    .mira .mira-mobnav__item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        /* The card has no min-height — it is a static preview. A real tab is a
           tap target and never goes below 44px. Flagged deviation, not drift. */
        min-block-size: 44px;
        color: var(--mira-ink);
        font-family: var(--mira-ui);
        font-weight: 400;
        font-size: 9.5px;
        line-height: 1;
        text-align: center;
    }

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

    /* The card draws no active state (its `mt.fg` is never assigned, so every
       tab inherits ink). A live nav needs one, and the design's own treatment
       for "current" in the desktop nav is the accent — `d.nav` maps
       `fg: i === 6 ? 'var(--acc)' : 'var(--ink)'`. Same rule applied here. */
    .mira .mira-mobnav__item.is-active {
        color: var(--mira-acc);
    }

    /* The badge sits on the icon, not the whole tab, so it does not drift when
       a label wraps in one language and not the other. */
    .mira .mira-mobnav__item .mira-count {
        inset-block-start: -2px;
        inset-inline-end: calc(50% - 18px);
    }

    /* Clear the bar so the last of the page is reachable. */
    .mira-footer {
        padding-block-end: var(--mira-mobilenav-h, 62px);
    }
}


/* ===========================================================================
   16. Add-to-bag toast
   =========================================================================== */

.mira-toast {
    position: fixed;
    z-index: 90;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    display: none;
    align-items: center;
    gap: 13px;
    padding: 13px 18px 13px 13px;
    background: var(--mira-pp);
    color: var(--mira-ink);
    border: 1px solid var(--mira-ln);
    border-radius: 16px;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .4);
    animation: mira-rise .35s ease;
    max-inline-size: min(360px, calc(100vw - 32px));
}

.mira-toast.is-open {
    display: flex;
}

.mira-toast__img {
    inline-size: 46px;
    block-size: 56px;
    object-fit: cover;
    border-radius: 10px;
    flex: none;
}

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

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

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

.mira-toast__cta {
    margin-inline-start: 8px;
    flex: none;
}

/* The platform's mobile bottom nav is fixed to the bottom edge from 300px to
   991.98px. Anything else pinned there renders underneath it, so the toast
   lifts clear while that bar is on screen. */
@media (max-width: 991.98px) {
    .mira-toast {
        inset-block-end: calc(24px + var(--mira-mobilenav-h, 62px));
        inset-inline: 16px;
        max-inline-size: none;
    }
}