/* ============================================================================
   Blue Moon storefront — design system
   Ported from the dc-runtime mockup into maintainable classes.
   Theming via CSS custom properties; dark mode toggles body.bm-dark.
   ============================================================================ */

/* ---- reset ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; }
button { font-family: inherit; }

:root {
  color-scheme: light;
  --bg:#faf8f5; --surface:#ffffff; --surface2:#f2eee8; --brand:#0b2d72; --ink:#12224a; --body:#3c4a72;
  --muted:#5e688a; --faint:#5f6890; --border:#e4ddd2; --border2:#ece6dc; --border3:#d8d0c2;
  --field:#8f8369;                /* form-input borders — WCAG 1.4.11 ≥3:1 (empty fields need the boundary) */
  --headbg:rgba(250,248,245,.92); --btn:#0b2d72; --btnink:#e8e2db; --btnhover:#08214f; --gold:#c9a24b;
  --navy:#0b2d72; --onnavy:#e8e2db; --navymuted:#aeb8d6;
  --accent:#e7ddc4;
  /* Small grey text (--faint above) and errors, both measured ≥4.5:1 on the page,
     the cards and the tinted panels. --faint was 4.0–4.4 and failed at 12 px. */
  --err:#b8382a;
  --cursor:#0b2d72;              /* custom cursor ring — brand navy */
  --cloud:rgba(190,206,242,.72);  /* drifting clouds (light theme) */
  --sale:#9b2c3a;                 /* a sale's price, as text (7:1 on cream) */
  --sale-bg:#9b2c3a;              /* a sale's pill, under white text */
  --announce-bg:#0b2d72;          /* the announcement bar; a season repaints it */
  --announce-ink:#e8e2db;
  /* One stack for both languages. The Arabic face carries only Arabic code
     points, so Latin letters and every digit come from the Latin file, which
     is the same design (assets/fonts/fonts.css has the comparison). Marcellus
     stays for the brand's display headings; it cannot draw a digit, and Arabic
     inside a heading goes to a semibold cut of the same Plex. */
  --font-body:'IBM Plex Sans','IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-head:'Marcellus','BM Arabic Heading','IBM Plex Sans', serif;
  /* The same six steps the dashboard uses (admin.html), each at least 1.25x the
     one below it, so a size is a level of hierarchy rather than a nudge. This
     page grew a size every half pixel from 9 to 36; the tokens are the scale to
     move onto, and --t-xs is the floor for anything a shopper actually reads.
     The micro-pills on a three-up phone tile are the one exception, and they
     say so where they are written. */
  --t-xs:12px;    /* pills, badges, counts */
  --t-sm:15px;    /* everything that is read */
  --t-lg:19px;
  --t-xl:24px;
  --t-2xl:30px;
  --t-3xl:40px;
}
body.bm-dark {
  color-scheme: dark;
  --bg:#0b1022; --surface:#141b38; --surface2:#1a2348; --brand:#ccd8f6; --ink:#e8e2db; --body:#b6c0dd;
  --muted:#8d98bb; --faint:#8a94b7; --border:#26305a; --border2:#222c52; --border3:#33406b;
  --headbg:rgba(11,16,34,.9); --btn:#3d5fbe; --btnink:#f0ece5; --btnhover:#2c4b9e; --gold:#d8b563;
  --navy:#0e1c45; --onnavy:#e8e2db; --navymuted:#9daacf;
  --field:#5a6791;                /* form-input borders (dark) — ≥3:1 on --bg */
  --accent:#e7ddc4; --cursor:#ccd8f6;   /* light-blue cursor on dark theme */
  --err:#f08a7e;                        /* the light theme's red read 3.1:1 on navy */
  --cloud:rgba(150,178,235,.42);        /* clouds on the dark theme */
  --sale:#f0a3ad;                       /* a sale's price on the dark theme */
  --sale-bg:#b23a49;                    /* the pill stays dark enough for white text */
}

body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Nothing on a shop page is meant to be scrolled to sideways.
     Two declarations, on purpose. `clip` is the one that is wanted: it makes no
     scroll container, so the sticky header and the sticky shop bar still stick.
     Safari only learned `clip` in 16, so `hidden` goes first for anything
     older; it does make a scroll container, so a sticky bar may not stick
     there, which is a smaller thing to lose than the page.
     This is a net, not a fix. When the page really did slide sideways the
     cause was a strip of cards that was not a containing block, so its
     overflow clipped nothing (.bm-vrow-track) - and note that NEITHER of these
     declarations stopped it, because what escaped was positioned against
     #bm-root, not against the page. A net is still worth having; it is just
     not the thing that holds. */
  overflow-x: hidden;
  overflow-x: clip;
}
/* Arabic needs no font swap of its own any more: --font-body already reaches
   IBM Plex Sans Arabic for every Arabic code point. It used to switch the whole
   page to Lateef, which is where the unreadable 13px product copy came from. */
#bm-root[dir="rtl"] { font-family:var(--font-body); }

a { color: var(--brand); text-decoration: none; }
a:hover { opacity: .82; }
::selection { background:#0b2d72; color:#fff; }

/* smooth theme cross-fade */
body.bm-anim, body.bm-anim * {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease !important;
}

.bm-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Parked above the page, not off its left edge: on an Arabic page, where
   <html> is right-to-left, 9,999 px past the left edge is 9,999 px of page to
   scroll sideways into, and the whole Arabic shop became that. */
.bm-skip { position:absolute; inset-inline-start:0; top:0; z-index:300; background:var(--btn); color:var(--btnink);
  padding:10px 18px; border-end-end-radius:10px; transform:translateY(-120%); }
.bm-skip:focus { transform:none; }

/* Navy, not gold: the gold ring measured 2.2:1 against the cream page, under
   the 3:1 a focus indicator needs to be seen. Gold stays where the ground is
   navy, which is where it reads. */
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.bm-footer :focus-visible, .bm-hero :focus-visible, .bm-announce :focus-visible { outline-color:var(--gold); }

/* ---- keyframes ---- */
@keyframes bmFadeUp { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
@keyframes bmSlideIn { from{transform:translateX(100%);} to{transform:translateX(0);} }
@keyframes bmSlideInL { from{transform:translateX(-100%);} to{transform:translateX(0);} }
@keyframes bmPop { 0%{transform:scale(.85);} 60%{transform:scale(1.06);} 100%{transform:scale(1);} }
@keyframes bmMarquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes bmSpin { from{transform:rotate(0) scale(.6);opacity:.3;} to{transform:rotate(360deg) scale(1);opacity:1;} }

/* ============================================================ custom cursor */
.cursor-ring, .cursor-dot {
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:250; opacity:0;
  transform: translate3d(-50%,-50%,0); will-change: transform, opacity;
}
.cursor-ring {
  width:38px; height:38px; border:1.5px solid var(--cursor);
  /* Its size is never animated: app.js grows it over something clickable with
     the same transform that moves it, so the page does no layout per frame. */
  transition: background .25s, border-color .25s, opacity .3s;
}
.cursor-dot { width:8px; height:8px; background: var(--cursor); transition: opacity .3s; }
body.cursor-on { cursor: none; }
body.cursor-on a, body.cursor-on button, body.cursor-on input,
body.cursor-on select, body.cursor-on textarea, body.cursor-on label,
body.cursor-on .interactive { cursor: none; }
body.cursor-on .cursor-ring, body.cursor-on .cursor-dot { opacity:1; }
.cursor-ring.hot { background: color-mix(in srgb, var(--cursor) 16%, transparent); border-color: var(--gold); }
.cursor-dot.hot { opacity:0; }
@media (hover: none), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display:none; }
  body.cursor-on { cursor:auto; }
}

/* ============================================================ hand-sketched clouds */
/* The sky's height is pinned to the LARGE viewport, not to `inset:0`.
   A fixed element with inset:0 is as tall as the viewport is at this instant,
   and on a phone that changes every time the browser's address bar slides away
   or comes back — which is exactly when a scroll starts and when it stops. Each
   of those was a resize, and a resize re-measured the sky: every cloud's laid-out
   top moved, the wrap-around span (app.js cloudTop) changed with it, and the
   whole field jumped at once. That was the shake. 100lvh is the height with the
   bar retracted and never changes while scrolling; 100vh is the same number for
   browsers that do not know lvh. */
#bm-clouds { position:fixed; top:0; inset-inline:0; height:100vh; height:100lvh;
  z-index:0; pointer-events:none; overflow:hidden; }
#bm-root { position:relative; z-index:1; }         /* content sits above the background layers */
.cloud-wrap { position:absolute; will-change:transform; }
/* No will-change here, deliberately. A transform animation is put on the
   compositor by the browser for as long as it runs; will-change on top of that
   buys nothing and pins a GPU texture for every cloud for the life of the page.
   With forty of them inside a fixed, full-viewport sky that is what made
   scrolling stutter. The wrap keeps it — that one IS written from JS. */
.cloud-wrap img {
  display:block; width:100%; height:auto;
  opacity:.5;                                      /* subtle ambient clouds on the cream sections */
  animation-name:bmDrift; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; animation-direction:alternate; animation-duration:40s;
}
/* At night the picture is already pale lines on nothing (app.js cloudSrc), so
   it can carry more of its own weight than the day's drawing does. */
body.bm-dark .cloud-wrap img { opacity:.46; }
/* Fewer and fainter on a phone, where there is no margin and every cloud is
   near some words. */
@media (max-width:700px) {
  .cloud-wrap img { opacity:.38; }
  body.bm-dark .cloud-wrap img { opacity:.36; }
}
/* continuous left↔right float; amplitude set per-cloud via --amp */
@keyframes bmDrift {
  from { transform:translateX(calc(-1 * var(--amp,60px))); }
  to   { transform:translateX(var(--amp,60px)); }
}

/* ============================================================ layout helpers */
.bm-wrap { max-width:1240px; margin:0 auto; }
.bm-section-pad { padding:48px 28px 8px; }
.bm-eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* buttons */
.bm-btn { border:none; cursor:pointer; font-family:inherit; border-radius:999px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:11px 20px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.bm-btn-primary { background:var(--btn); color:var(--btnink); }
.bm-btn-primary:hover { background:var(--btnhover); }
.bm-btn-ghost { background:var(--surface); color:var(--brand); border:1.5px solid var(--border3); }
.bm-btn-ghost:hover { border-color:var(--brand); }
.bm-icon-btn { background:var(--surface); border:1.5px solid var(--border3); color:var(--brand);
  border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.bm-icon-btn:hover { border-color:var(--brand); }

/* logo mark */
.bm-logo { display:flex; align-items:center; gap:12px; }
/* THE LOCKUP, as supplied — one drawn wordmark whose O's are the moon and the
   star. What was here before was a circle, a ring and a star assembled in CSS
   with "BLUE MOON" set beside them in Marcellus: a good imitation, and not the
   logo. Type cannot put a moon inside an O.

   Two files, one shape: both were tinted from a single alpha mask, so the navy
   and the cream lockups cannot drift apart at the edges. The swap is here
   rather than in JavaScript so it is right before the first paint. */
.bm-wordmark { display:block; height:26px; aspect-ratio:1200/184; flex:none;
  background:url('/assets/brand/wordmark-navy.png') no-repeat left center/contain; }
body.bm-dark .bm-wordmark { background-image:url('/assets/brand/wordmark-cream.png'); }
/* The footer sits on navy in both themes, so it is always the cream one. */
.bm-footer .bm-wordmark { background-image:url('/assets/brand/wordmark-cream.png'); }
.bm-star { display:inline-block; background:var(--brand); clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%); }

/* ============================================================ announcement */
.bm-announce { background:var(--announce-bg); color:var(--announce-ink); overflow:hidden; white-space:nowrap;
  padding:8px 0; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
.bm-announce-track { display:inline-block; animation: bmMarquee 22s linear infinite; }
.bm-announce-track span { padding:0 32px; }
/* The brand star between messages, drawn rather than typed (it was ✦). */
.bm-announce-track .bm-star { width:7px; height:7px; background:var(--announce-ink); vertical-align:middle; }

/* ============================================================ seasons
   Content → Theme dresses the shop: the bar and buttons take the season's
   colours, each section's title gets a small drawn ornament, the sale banners
   follow, and a few decorations drift in the sky (app.js initClouds). Nothing
   below applies without a theme on, so the shop's own look is untouched. */
/* A season repaints the page itself, not only its trim: the ground under
   everything (--bg), the section titles and links (--brand), the footer
   (--navy), the sticky header (--headbg) and the drifting clouds (--cloud).
   Two things are deliberately held still. --surface stays white, so a product
   photo never sits on a tinted card and the lashes keep their real colour; and
   the text colours measured against the cream page (--ink, --body, --muted,
   --faint, --field) are only nudged, never recoloured far enough to undo the
   contrast this file records. Every season's own ink was checked the same way
   against its own ground. */
body.bm-theme-college {
  /* Back to college: the shop's own navy and gold, on notebook paper. */
  --bg:#f8f3e6; --surface2:#f1e9d6; --accent:#e3b53f;
  --border:#e2d7bd; --border2:#ebe2cd; --border3:#d2c4a4; --field:#8a7c5c;
  --headbg:rgba(248,243,230,.93); --cloud:rgba(206,193,150,.6);
  --announce-bg:#0b2d72; --announce-ink:#fdf6d8; --gold:#e3b53f;
  --sale:#9b2c3a; --sale-bg:#9b2c3a;
}
/* Back to college, at night.
 *
 * This block has to exist. The season's own block is further down the file than
 * body.bm-dark and carries exactly the same weight, so on source order alone it
 * won — and every colour it names (the paper, the header, the borders) stayed
 * the daytime cream while the words went to their night colours. Cream on
 * cream. The other two seasons each had one of these; this one did not.
 *
 * What is the season keeps: the gold, and the navy announcement bar. What was
 * notebook paper takes the shop's own night, which is the palette body.bm-dark
 * already holds — these are its values, restated so they survive the cascade. */
body.bm-theme-college.bm-dark {
  --bg:#0b1022; --surface2:#1a2348;
  --border:#26305a; --border2:#222c52; --border3:#33406b; --field:#5a6791;
  --headbg:rgba(11,16,34,.9); --cloud:rgba(150,178,235,.42);
  --sale:#f0a3ad; --sale-bg:#b23a49;
}
body.bm-theme-halloween {
  /* Dusk: a violet ground, deep purple titles, an orange accent. */
  --bg:#f4f0f8; --surface2:#eae2f2; --accent:#e8792b;
  --brand:#3a2260; --ink:#241a38; --body:#463a60; --muted:#5f5478; --faint:#605677;
  --border:#ded3ea; --border2:#e7dff1; --border3:#cabddd; --field:#786a92;
  --headbg:rgba(244,240,248,.93); --cloud:rgba(176,156,208,.5);
  --navy:#1d1330; --navymuted:#c3b2dd;
  --announce-bg:#1d1330; --announce-ink:#ffd9a8; --gold:#e8792b;
  --btn:#3a2260; --btnhover:#2a1745; --btnink:#ffeede;
  --sale:#a4410c; --sale-bg:#b8460f; --cursor:#3a2260;
}
/* The words take the shop's night colours back, too. The daytime block names
   --ink, --body, --muted and --faint, and on source order it beat body.bm-dark
   for them: dusk-purple text on the midnight-violet ground, about 1.1:1. */
body.bm-theme-halloween.bm-dark {
  --ink:#e8e2db; --body:#b6c0dd; --muted:#8d98bb; --faint:#8a94b7;
  --bg:#150e26; --surface:#211634; --surface2:#2a1c42; --brand:#d9c2ff;
  --border:#33245a; --border2:#2c2050; --border3:#43316e; --headbg:rgba(21,14,38,.92);
  --navy:#120b20; --cloud:rgba(150,120,200,.34); --cursor:#d9c2ff;
  --btn:#6b46a8; --btnhover:#5a379a; --sale:#ffb183; --sale-bg:#a4410c;
}
body.bm-theme-christmas {
  /* Snow and fir: a cool pale ground, forest-green titles, a red sale. */
  --bg:#f1f6f1; --surface2:#e6eee6; --accent:#c9a24b;
  --brand:#0f4d3a; --ink:#12261d; --body:#33503d; --muted:#4e6a57; --faint:#4d6956;
  --border:#d6e3d7; --border2:#e2ece2; --border3:#c0d2c2; --field:#6a836f;
  --headbg:rgba(241,246,241,.93); --cloud:rgba(168,194,214,.6);
  --navy:#0f4d3a; --navymuted:#b3cdbe;
  --announce-bg:#0f4d3a; --announce-ink:#f3e7cf; --gold:#c9a24b;
  --btn:#14563f; --btnhover:#0e4230; --btnink:#f4ece0;
  --sale:#9d1f2c; --sale-bg:#9d1f2c;
}
/* The same for the words: fir-green text on the night-green ground, before. */
body.bm-theme-christmas.bm-dark {
  --ink:#e8e2db; --body:#b6c0dd; --muted:#8d98bb; --faint:#8a94b7;
  --bg:#08170f; --surface:#0f241a; --surface2:#143020; --brand:#a8e0c2;
  --border:#1d4030; --border2:#19392a; --border3:#2a5540; --headbg:rgba(8,23,15,.92);
  --navy:#061109; --cloud:rgba(150,185,210,.34); --cursor:#a8e0c2;
  --btn:#2f8a67; --btnhover:#256f53; --sale:#f5a3ac; --sale-bg:#9d1f2c;
}
body.bm-theme-national {
  /* Iraqi National Day (3 October): "Night of Baghdad". It is a night season,
     so app.js puts the page in its night classes for its days (nightOn) and
     the palette below, under .bm-dark, is how the shop looks. This daytime
     block is only what shows for a blink before the script runs. */
  --announce-bg:#070f26; --announce-ink:#e3c46f; --gold:#c9a24b;
  --sale:#b0101f; --sale-bg:#ce1126;
}
/* Night of Baghdad: a deep navy evening, gold titles and buttons, the words in
   warm cream, and the flag's red only where a price is cut. */
body.bm-theme-national.bm-dark {
  --bg:#0c1838; --surface:#14214a; --surface2:#1a2a5a; --brand:#e3c46f;
  --ink:#f3ead8; --body:#c9d1ea; --muted:#9aa6c8; --faint:#97a3c6;
  --border:#26356a; --border2:#213062; --border3:#34467f; --field:#6070a0;
  --headbg:rgba(9,18,44,.93); --cloud:rgba(170,190,240,.4);
  --navy:#070f26; --navymuted:#b9c6e6; --onnavy:#f3ead8;
  --announce-bg:#070f26; --announce-ink:#e3c46f; --gold:#e3c46f; --accent:#e3c46f;
  --btn:#d9b25a; --btnhover:#e8c473; --btnink:#0b1a3a; --cursor:#e3c46f;
  --sale:#ff9aa6; --sale-bg:#ce1126;
}
/* The product cards stay cream, so a photo and its price read as they do all
   year: inside a card the shop's own daytime colours come back. */
body.bm-theme-national.bm-dark:not(.bm-deep) .bm-card {
  --surface:#fbf6ec; --surface2:#f2e9d8; --brand:#0b2d72;
  --ink:#1a2240; --body:#3c4466; --muted:#5a6080; --faint:#5c6282;
  --border:#e6dcc6; --border2:#ece4d2; --border3:#d6c9ad; --field:#80745a;
  --btn:#0b2d72; --btnhover:#14306e; --btnink:#fdf6e3; --gold:#b08a35;
  --sale:#b0101f; --cursor:#0b2d72;
  border-color:rgba(227,196,111,.55); box-shadow:0 18px 40px -28px rgba(0,0,0,.7); }
/* Her moon button on National Day: a shade deeper, nearer midnight, and the
   cards go dark with the page. */
body.bm-theme-national.bm-deep {
  --bg:#060b1c; --surface:#0d1630; --surface2:#121d3d; --headbg:rgba(6,11,28,.94);
  --border:#1c2850; --border2:#18234a; --border3:#28376a;
}
/* The flag along the bar's lower edge: red, white, black, as it is flown. */
body.bm-theme-national .bm-announce {
  background:linear-gradient(to bottom, var(--announce-bg) calc(100% - 6px), #ce1126 calc(100% - 6px) calc(100% - 4px),
    #fff calc(100% - 4px) calc(100% - 2px), #000 calc(100% - 2px)); }

/* ============================================================ welcome screen
   The season's welcome, first in the page (lib/welcome.js), until she taps
   her way in; its own script there takes it away. Always the season's night:
   these are each season's own night values, restated because the page's theme
   classes arrive with the script, after this has already painted. */
.bm-welcome { --w-bg:#0b1022; --w-disc:#141d45; --w-accent:#e3b53f; --w-title:#e8e2db; --w-soft:#b6c0dd;
  position:fixed; inset:0; z-index:400; display:grid; place-items:center; overflow:hidden;
  background:var(--w-bg); color:var(--w-title); font-family:var(--font-body); text-align:center; }
.bm-welcome-halloween { --w-bg:#150e26; --w-disc:#211634; --w-accent:#e8792b; --w-title:#d9c2ff; --w-soft:#c3b2dd; }
.bm-welcome-national { --w-bg:#0c1838; --w-disc:#14214a; --w-accent:#e3c46f; --w-title:#f3ead8; --w-soft:#c9d1ea; }
.bm-welcome-christmas { --w-bg:#08170f; --w-disc:#0f241a; --w-accent:#c9a24b; --w-title:#a8e0c2; --w-soft:#b3cdbe; }
.bm-welcome.is-leaving { opacity:0; visibility:hidden; transition:opacity .55s ease, visibility 0s linear .55s; }
html.bm-welcoming, html.bm-welcoming body { overflow:hidden; }
.bm-welcome-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:12px; padding:24px 16px; max-width:100%; box-sizing:border-box; }
.bm-welcome-logo { width:min(190px, 48vw); height:auto; margin-bottom:6px; }
.bm-welcome-moon { position:relative; width:min(290px, 60vw); aspect-ratio:1; display:grid; place-items:center;
  border-radius:50%; background:var(--w-disc); margin:8px 0 6px; }
.bm-welcome-ring { position:absolute; inset:-12px; width:calc(100% + 24px); height:calc(100% + 24px);
  transform:rotate(-90deg); overflow:visible; }
.bm-welcome-ring circle { fill:none; stroke-width:1.4; }
.bm-welcome-ring .track { stroke:var(--w-accent); stroke-opacity:.22; }
/* It fills as the shop loads: most of the way on its own, the rest when app.js
   says the shop is ready. */
.bm-welcome-ring .fill { stroke:var(--w-accent); stroke-linecap:round; stroke-dasharray:100 100;
  stroke-dashoffset:100; animation:bmWelcomeRing 2.4s cubic-bezier(.2,.7,.3,1) forwards; }
.bm-welcome.is-ready .bm-welcome-ring .fill { animation:none; stroke-dashoffset:0; transition:stroke-dashoffset .35s ease; }
@keyframes bmWelcomeRing { to { stroke-dashoffset:12; } }
.bm-welcome-girl { width:92%; height:auto; animation:bmWelcomeFloat 4s ease-in-out infinite; }
@keyframes bmWelcomeFloat { 50% { transform:translateY(-8px); } }
.bm-welcome-season { margin:0; display:flex; flex-direction:column; gap:4px; }
.bm-welcome-season [lang="ar"] { font-size:var(--t-lg); font-weight:600; color:var(--w-accent); }
.bm-welcome-season [lang="en"] { font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--w-soft); }
.bm-welcome-title { margin:0; font-size:clamp(34px, 8vw, 52px); font-weight:600; line-height:1.25; color:var(--w-title); }
.bm-welcome-sub { margin:0; font-family:var(--font-head); font-size:var(--t-xl); color:var(--w-soft); }
.bm-welcome-go { margin-top:10px; min-height:44px; padding:10px 24px; border-radius:999px;
  border:1.5px solid var(--w-accent); background:transparent; color:var(--w-title);
  font:inherit; font-size:var(--t-sm); cursor:pointer; }
.bm-welcome-go:hover { background:var(--w-disc); }
/* Once the shop is ready the way in fills with the season's colour: the one
   thing left to do on this screen. */
.bm-welcome-go { transition:background-color .35s ease, color .35s ease; }
.bm-welcome.is-ready .bm-welcome-go { background:var(--w-accent); color:var(--w-bg); font-weight:600; }
.bm-welcome.is-ready .bm-welcome-go:hover { background:var(--w-title); border-color:var(--w-title); }
.bm-welcome-go:focus-visible { outline:2px solid var(--w-accent); outline-offset:3px; }
.bm-welcome-cloud { position:absolute; z-index:0; height:auto; pointer-events:none;
  animation:bmWelcomeDrift 14s ease-in-out infinite alternate; }
.bm-welcome-cloud.c1 { width:min(420px, 62vw); top:3%; left:-9%; }
.bm-welcome-cloud.c2 { width:min(360px, 54vw); top:14%; right:-11%; animation-delay:-5s; }
.bm-welcome-cloud.c3 { width:min(380px, 58vw); bottom:2%; left:-7%; animation-delay:-9s; }
@keyframes bmWelcomeDrift { to { transform:translateX(26px); } }
@media (prefers-reduced-motion: reduce) {
  .bm-welcome-cloud, .bm-welcome-girl { animation:none; }
  .bm-welcome-ring .fill { animation:none; stroke-dashoffset:12; }
  .bm-welcome.is-leaving { transition-duration:.01s; }
}

/* The wash over the hero video follows the season too — it was navy in every
   one of them, which is most of why a themed shop still opened looking the same. */
body.bm-theme-halloween .bm-hero-full .bm-hero-scrim {
  background:
    linear-gradient(to top, rgba(29,19,48,.82) 0%, rgba(29,19,48,.44) 30%, rgba(29,19,48,0) 60%),
    linear-gradient(to bottom, rgba(29,19,48,.32), rgba(29,19,48,0) 20%); }
/* Nearly black with a green cast, not forest green. A saturated wash at this
   strength sits over the hero's warm marble and turns the product footage
   swampy; the season is carried by the bar, the ground and the buttons, and the
   video is left looking like itself. */
body.bm-theme-christmas .bm-hero-full .bm-hero-scrim {
  background:
    linear-gradient(to top, rgba(7,26,19,.82) 0%, rgba(7,26,19,.42) 30%, rgba(7,26,19,0) 60%),
    linear-gradient(to bottom, rgba(7,26,19,.3), rgba(7,26,19,0) 20%); }
body.bm-theme-halloween .bm-hero-full .bm-hero-campaign { background:rgba(29,19,48,.55); }
body.bm-theme-christmas .bm-hero-full .bm-hero-campaign { background:rgba(10,44,32,.55); }
body.bm-theme-halloween .bm-hero-full .bm-hero-campaign .go { background:#ffd9a8; color:#1d1330; }
body.bm-theme-christmas .bm-hero-full .bm-hero-campaign .go { background:#f3e7cf; color:#0f4d3a; }

/* The ornament beside a section's title: a pencil, a pumpkin, holly. */
.bm-orn { display:none; }
body.bm-themed .bm-orn { display:inline-block; width:1em; height:1em; margin-inline-end:.4em;
  vertical-align:-.12em; background:currentColor; }
body.bm-theme-college .bm-orn {                                            /* a pencil */
  -webkit-mask:var(--orn-college) center/contain no-repeat; mask:var(--orn-college) center/contain no-repeat; color:var(--gold); }
body.bm-theme-halloween .bm-orn {                                          /* a pumpkin */
  -webkit-mask:var(--orn-pumpkin) center/contain no-repeat; mask:var(--orn-pumpkin) center/contain no-repeat; color:var(--gold); }
body.bm-theme-christmas .bm-orn {                                          /* holly */
  -webkit-mask:var(--orn-holly) center/contain no-repeat; mask:var(--orn-holly) center/contain no-repeat; color:#1f7a54; }
body.bm-theme-national .bm-orn {                                           /* a date palm */
  -webkit-mask:var(--orn-palm) center/contain no-repeat; mask:var(--orn-palm) center/contain no-repeat; color:var(--gold); }
:root {
  --orn-college:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1.4-4.6L15.3 5.5l3.2 3.2L7.6 19.6 3 21zM16.8 4l1.7-1.7a1.6 1.6 0 0 1 2.3 0l.9.9a1.6 1.6 0 0 1 0 2.3L20 7.2 16.8 4z'/%3E%3C/svg%3E");
  --orn-pumpkin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4.4c0-1 .6-1.8 1.4-2.2l.9 1.7c-.3.2-.5.5-.5.8v1.5c2.9-.9 5.7 1.7 5.7 5.6 0 4.3-2.6 8.2-5.6 8.2-.7 0-1.3-.2-1.9-.5-.6.3-1.2.5-1.9.5-3 0-5.6-3.9-5.6-8.2 0-3.9 2.8-6.5 5.7-5.6V4.4z'/%3E%3C/svg%3E");
  --orn-holly:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13c-2.6 2.6-6 3-8 2 1-1.6 1-3.4 0-5 2.2-.6 4.6 0 6 1.2.3-2.4 1.2-4.6 2.6-6.2C13 6.6 13 9 12 13zm2-2.6c1.6-1.7 4-2.3 6-1.7-1 1.6-1 3.4 0 5-2 1-5.4.6-8-2 1.2 0 1.6-.8 2-1.3z'/%3E%3Ccircle cx='12' cy='17' r='1.7'/%3E%3Ccircle cx='15' cy='18.6' r='1.4'/%3E%3C/svg%3E");
  --orn-palm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 22c.3-3.6.6-7.2 1-10.6h1c-.2 3.4-.3 7-.2 10.6z'/%3E%3Cpath d='M12.4 11.2C10.6 8 7 7 3.5 8.6c3.3-.2 5.9 1 8.1 3z'/%3E%3Cpath d='M12.6 11.2c1.8-3.2 5.4-4.2 8.9-2.6-3.3-.2-5.9 1-8.1 3z'/%3E%3Cpath d='M12.2 10.8C11 7.6 8.4 5 4.8 4.4c3 1.2 5 3.4 6.4 6.8z'/%3E%3Cpath d='M12.8 10.8c1.2-3.2 3.8-5.8 7.4-6.4-3 1.2-5 3.4-6.4 6.8z'/%3E%3Cpath d='M12.4 10.6c-.4-3 .2-6 2-8.6-.6 2.8-.8 5.6-.9 8.6z'/%3E%3Ccircle cx='11.2' cy='12.8' r='.9'/%3E%3Ccircle cx='13.6' cy='12.8' r='.9'/%3E%3C/svg%3E");
  --deco-ishtar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,1 14,7.2 19.8,4.2 16.8,10 23,12 16.8,14 19.8,19.8 14,16.8 12,23 10,16.8 4.2,19.8 7.2,14 1,12 7.2,10 4.2,4.2 10,7.2'/%3E%3C/svg%3E");
  --deco-plane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11.5 22 3l-6.6 18-3.2-6.6L2 11.5zm10.6 3.2 2.1 4.3 4.3-11.7-6.4 7.4z'/%3E%3C/svg%3E");
  --deco-bat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.5c.6 0 1 .5 1.2 1 .6-1 1.8-1.6 3-1.6.4 0 .8 0 1.2.2-.3-.6-.4-1.2-.4-1.9 1.4 1.3 3.3 1.9 5 1.6-1 1-1.6 2.4-1.6 3.9v1.6c-1.6-.6-3.4-.2-4.6 1-.8.8-1.9 1.3-3 1.3h-.8c-1.1 0-2.2-.5-3-1.3-1.2-1.2-3-1.6-4.6-1v-1.6c0-1.5-.6-2.9-1.6-3.9 1.7.3 3.6-.3 5-1.6 0 .7-.1 1.3-.4 1.9.4-.2.8-.2 1.2-.2 1.2 0 2.4.6 3 1.6.2-.5.6-1 1.2-1z'/%3E%3C/svg%3E");
  --deco-flake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 1.8h1.6v20.4h-1.6z'/%3E%3Cpath d='M2.4 6.6l.8-1.4 17.6 10.2-.8 1.4z'/%3E%3Cpath d='M20.8 5.2l.8 1.4L4 16.8l-.8-1.4z'/%3E%3C/svg%3E");
}
/* ============================================================ Moon Girl
   The shop's character, drawn by the season and only where Content switches her
   on. She is decoration beside words that already say the same thing, so she
   carries no alt text and never takes a pointer event.
   Her three styles are shaped differently and cannot share one size: the vector
   and sticker are square cut-outs of her, the starfield is a wide scene. */
.bm-moon { display:block; pointer-events:none; user-select:none; }
/* An empty bag, and a search that found nothing: she is the invitation, above
   the words, at the size of a small illustration. */
.bm-moon-bagempty { width:min(190px,48vw); height:auto; margin:0 auto 16px; }
.bm-moon-bagempty.bm-moon-s-starfield { width:min(460px,90%); border-radius:14px; }
.bm-noresults .bm-moon-bagempty { margin-bottom:12px; }
/* A bag with something in it: she sits beside the total, pleased, small enough
   that the subtotal and the checkout button stay the point of the panel. */
.bm-drawer-foot { position:relative; }
/* She stands ON the line above the total, not over it: at top:-46px she hid
   half of "38,000 IQD", the one number in the bag that has to be read. The
   list above makes room for her, so its last line can scroll out from behind. */
.bm-moon-bagfull { position:absolute; bottom:100%; inset-inline-end:18px; width:62px; height:auto; pointer-events:none; }
.bm-moon-bagfull.bm-moon-s-starfield { width:132px; border-radius:10px; margin-bottom:6px; }
.bm-drawer:has(.bm-moon-bagfull) .bm-drawer-list { padding-block-end:84px; }

/* On a discounted card she leans in from the bottom corner. The card's photo is
   already the positioning context (.bm-card-media), and the drawn banner owns
   the opposite corner, so the two never sit on top of each other. */
/* Written against .bm-card-media img, not .bm-moon-banner on its own: the card's
   own rule for the photo it holds (position, inset, width, height, object-fit)
   is the more specific of the two, and it stretched her to cover the whole
   photograph. Everything it sets has to be undone by name. */
.bm-card-media img.bm-moon-banner { position:absolute; z-index:3;
  inset:auto; bottom:0; inset-inline-end:6px; width:clamp(56px, 27%, 98px); height:auto; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.bm-card-media img.bm-moon-banner.bm-moon-s-starfield { width:clamp(84px, 40%, 148px); border-radius:10px; }
/* She scales with the card: at a fixed 98px she filled most of a narrow card's
   photo (the home page's rows, a phone's tiles) and pressed against its edge. */

/* Beside a section's title, off to the side and out of the words' way. She is
   dropped on a narrow screen, where the heading needs the whole width. */
.bm-shop-head { position:relative; }
/* Above the heading, not beside it. The right-hand end of this row is where the
   category filters live, and anchored there she was drawn over the last one —
   she cannot be clicked through, but a control she covers is a control nobody
   can read. Sitting clear above the row she peeks over the section instead. */
.bm-moon-corners { position:absolute; z-index:1; bottom:100%; margin-bottom:-12px;
  inset-inline-end:0; width:86px; height:auto; }
.bm-moon-corners.bm-moon-s-starfield { width:200px; border-radius:10px; }
@media (max-width:900px) { .bm-moon-corners { display:none; } }

/* Her greeting under the hero, in a strip of its own. The night-sky style is a
   wide scene rather than a cut-out of her, so it spans the page instead. */
.bm-moon-greet { display:flex; justify-content:center; padding:30px 20px 0; }
.bm-moon-greet .bm-moon-greeter { width:min(160px,40vw); height:auto; }
.bm-moon-greet .bm-moon-greeter.bm-moon-s-starfield { width:min(1000px,100%); border-radius:16px; }

/* The sky's decorations: the same wraps the clouds use, so they loop with them. */
.cloud-wrap.deco span { display:block; width:100%; aspect-ratio:1/1; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  animation-name:bmDrift; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  animation-direction:alternate; animation-duration:26s; }
.deco-college span { color:var(--gold); opacity:.5; --amp:70px;
  -webkit-mask-image:var(--deco-plane); mask-image:var(--deco-plane); }
/* A bat is a wide, thin silhouette, so it needs more weight than a plane or a
   flake to read as a shape rather than a smudge at this size. */
.deco-halloween span { color:#241041; opacity:.62; --amp:90px;
  -webkit-mask-image:var(--deco-bat); mask-image:var(--deco-bat); }
body.bm-dark .deco-halloween span { color:#c9a9ff; opacity:.5; }
.deco-christmas span { color:#9fc4e8; opacity:.75; --amp:26px;
  -webkit-mask-image:var(--deco-flake); mask-image:var(--deco-flake);
  animation-name:bmSnow; animation-timing-function:linear; animation-direction:normal; }
body.bm-dark .deco-christmas span { color:#dbe8fb; }
/* The eight-pointed star of Ishtar, from Babylon's own gate, drifting in gold. */
.deco-national span { color:var(--gold); opacity:.55; --amp:60px;
  -webkit-mask-image:var(--deco-ishtar); mask-image:var(--deco-ishtar); }
body.bm-dark .deco-national span { color:#e3c46f; opacity:.6; }
/* Snow falls the height of the screen and starts again above it. */
@keyframes bmSnow {
  from { transform:translate3d(-12px,-12vh,0) rotate(0); }
  to   { transform:translate3d(12px,112vh,0) rotate(220deg); }
}

/* The night sky's stars: the logo's four-point sparkle, small, in the margins
   with the clouds, twinkling where they are. Drawn in every sky (app.js
   initClouds) and shown only once the lights are off, so dark mode needs no
   redraw. Reduced motion holds them lit and still (the deco rule below). */
.deco-star { display:none; }
body.bm-dark .deco-star { display:block; }
.cloud-wrap.deco-star span { color:#e8e2db; opacity:.7;
  -webkit-mask-image:var(--deco-star); mask-image:var(--deco-star);
  animation-name:bmTwinkle; animation-timing-function:ease-in-out; animation-direction:alternate; }
@keyframes bmTwinkle {
  from { opacity:.12; transform:scale(.7); }
  to   { opacity:.8;  transform:scale(1); }
}
:root {
  --deco-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.3 5.7 11.4 12 12-6.3.6-11.4 5.7-12 12-.6-6.3-5.7-11.4-12-12C6.3 11.4 11.4 6.3 12 0z'/%3E%3C/svg%3E");
}

/* ---- words stay clear of the drawings ----
   The clouds keep to the margins now (app.js skyLeft), but on a narrow screen
   there are no margins, and a heading or a line of copy that sits straight on
   the page can still have a pencil stroke pass behind it. This halo is the
   page's own colour, so it cannot be seen against the page — only where it
   covers a stroke, which it lifts out from behind the letters. Only on words
   that sit on the page itself: inside a white card the cream would show. */
:is(.bm-shop-head h2, .bm-shop-head p, .bm-finder h2, .bm-finder .prompt,
    .bm-lookbook-head h2, .bm-lookbook-head p, .bm-lookbook-head .bm-eyebrow,
    .bm-about h2, .bm-about p, .bm-about li, .bm-about .bm-eyebrow,
    .bm-product-more > h2, .bm-back, .bm-checkout > h1, .bm-checkout > .lede,
    .bm-legal > h1, .bm-product-gone h1, .bm-product-gone p) {
  /* var(--bg) here, on the words, not in a variable set on :root: a variable
     resolves where it is declared, and dark mode and the seasons set --bg on
     body — so a :root halo was the light page's cream, glowing round every
     heading at night. */
  text-shadow:0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}

/* ============================================================ header */
.bm-header { position:sticky; top:0; z-index:50; background:var(--headbg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.bm-header-in { max-width:1240px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; gap:18px; }
.bm-nav { display:flex; gap:20px; margin:0 10px; font-size:13.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--body); }
.bm-nav a { color:var(--body); display:inline-block; padding-block:6px; }
.bm-nav a:hover { color:var(--brand); opacity:1; }
.bm-grow { flex:1; }
.bm-search { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--field);
  border-radius:999px; padding:7px 14px; width:210px; }
.bm-search .ic { color:var(--faint); width:16px; height:16px; }
.bm-search input { border:none; outline:none; font-family:inherit; font-size:16px; line-height:1.2; width:100%; min-height:26px; background:transparent; color:var(--ink); }
/* The magnifier is a button now (go to the results) and a cross joins it while
   there is something to clear. Both are drawn at the size of the icon that was
   there before, with the touch target grown outwards by ::after so the pill
   does not get taller on a phone. */
.bm-search-btn { flex:none; display:flex; align-items:center; justify-content:center; position:relative;
  width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer; color:var(--faint); }
.bm-search-btn::after { content:''; position:absolute; inset:-14px -4px; }
.bm-search-btn:hover, .bm-search-btn:focus-visible { color:var(--brand); }
.bm-search-btn .ic { width:16px; height:16px; }
.bm-desk-tools { display:flex; align-items:center; gap:8px; }
.bm-lang-btn { background:var(--surface); border:1.5px solid var(--border3); color:var(--brand);
  border-radius:999px; padding:7px 13px; cursor:pointer; font-family:var(--font-body); font-size:14px; font-weight:600; line-height:1; }
.bm-lang-btn:hover { border-color:var(--brand); }
.bm-cart-btn { position:relative; display:flex; align-items:center; gap:8px; background:var(--btn); color:var(--btnink);
  border:none; border-radius:999px; padding:9px 18px; cursor:pointer; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.bm-cart-btn:hover { background:var(--btnhover); }
.bm-wish-btn { position:relative; background:none; border:none; cursor:pointer; font-size:19px; color:var(--brand); padding:6px; }
.bm-badge { position:absolute; top:0; inset-inline-end:-4px; background:var(--btn); color:#fff; font-size:11px;
  border-radius:999px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); }
.bm-burger { display:none; flex-direction:column; gap:4px; background:none; border:1.5px solid var(--border3);
  border-radius:10px; width:38px; height:36px; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.bm-burger span { width:16px; height:2px; background:var(--brand); border-radius:2px; }

/* ============================================================ hero
   Three layouts, picked in Content → Hero (hero.layout), from the same markup:
     .bm-hero-full   the video full screen and bright; the words at the bottom over a soft shade
     .bm-hero-split  the words on the page's own background; the video in a rounded frame beside them
     .bm-hero-wall   the words beside a main video and two smaller clips
   The campaign line is a pill above the title that links somewhere. */
.bm-hero { position:relative; }
.bm-hero video { display:block; width:100%; height:100%; object-fit:cover; }
.bm-hero-campaign { display:inline-flex; align-items:center; gap:10px; max-width:100%; margin:0 0 18px;
  padding:6px 6px 6px 16px; border-radius:999px; font-size:13.5px; line-height:1.3; text-decoration:none; }
[dir="rtl"] .bm-hero-campaign { padding:6px 16px 6px 6px; }
.bm-hero-campaign .bm-star { width:8px; height:8px; flex:none; background:currentColor; }
.bm-hero-campaign .txt { overflow-wrap:anywhere; }
.bm-hero-campaign .go { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:999px;
  font-weight:600; font-size:12.5px; white-space:nowrap; }
.bm-hero-campaign .go .ic { width:14px; height:14px; }

/* ---- full: the video fills the screen, bright; the words sit low, over a shade only where they are ---- */
.bm-hero-full { min-height:calc(100vh - 110px); min-height:calc(100dvh - 110px);
  overflow:hidden; display:flex; align-items:flex-end; background:#0b1a3d; }
.bm-hero-full > video { position:absolute; inset:0; z-index:0; }
.bm-hero-full .bm-hero-scrim { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(11,26,61,.8) 0%, rgba(11,26,61,.42) 30%, rgba(11,26,61,0) 60%),
    linear-gradient(to bottom, rgba(11,26,61,.3), rgba(11,26,61,0) 20%); }
.bm-hero-full .bm-hero-campaign { background:rgba(11,26,61,.5); color:#fff; border:1px solid rgba(232,226,219,.5); }
.bm-hero-full .bm-hero-campaign .go { background:#e8e2db; color:#0b2d72; }
/* These two sit in opposite top corners of the hero. They must use PHYSICAL
   sides, not inset-inline-*: each carries its own dir attribute in app.js
   (kicker dir="ltr", the Arabic line dir="rtl"), and an absolutely positioned
   element resolves its logical insets against its own direction. So
   inset-inline-end on the dir="rtl" element resolved to the LEFT edge and
   stacked it on top of the kicker. Mirrored below for the Arabic page. */
.bm-hero-full .bm-hero-kicker { position:absolute; top:28px; left:32px; right:auto; z-index:3; color:#e8e2db; }
.bm-hero-full .bm-hero-ar { position:absolute; top:24px; right:32px; left:auto; z-index:3; color:#e8e2db; }
[dir="rtl"] .bm-hero-full .bm-hero-kicker { left:auto; right:32px; }
[dir="rtl"] .bm-hero-full .bm-hero-ar { right:auto; left:32px; }
.bm-hero-full .bm-hero-inner { position:relative; z-index:3; max-width:880px; padding:0 48px 124px; }
.bm-hero-full .bm-hero-inner .bm-hero-title { font-size:clamp(40px,4.8vw,68px); color:#fff; text-shadow:0 2px 24px rgba(11,26,61,.45); }
.bm-hero-full .bm-hero-inner p.sub { color:#efe9e1; text-shadow:0 1px 14px rgba(11,26,61,.55); }
.bm-hero-full .bm-hero-cta .primary { background:#e8e2db; color:#0b2d72; }
.bm-hero-full .bm-hero-cta .primary:hover { background:#fff; opacity:1; }
.bm-hero-full .bm-hero-cta .ghost { color:#e8e2db; }
.bm-hero-full .bm-hero-cta .ghost:hover { background:rgba(232,226,219,.15); opacity:1; }
.bm-hero-full .bm-hero-stats { position:absolute; bottom:0; left:0; right:0; z-index:3; padding:18px 48px 24px; color:#e8e2db; }
.bm-hero-full .bm-hero-stats strong { color:#fff; }
/* Where the video meets the page, a bank of cloud in the page's own colour, so
   the film sinks into the sky the shop sits in instead of stopping at a ruled
   edge. A mask, not an image, so it takes --bg in every theme and in dark mode.
   The stats and the words sit higher by the cloud's height to stay clear of it. */
.bm-hero-full::after { content:''; position:absolute; left:0; right:0; bottom:-1px; z-index:3; pointer-events:none;
  height:var(--bm-cloud-h,40px); background:var(--bg);
  -webkit-mask:var(--bm-cloud-edge) left bottom / auto 100% repeat-x;
          mask:var(--bm-cloud-edge) left bottom / auto 100% repeat-x; }
.bm-hero-full { --bm-cloud-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' width='240' height='48'%3E%3Cg fill='%23000'%3E%3Ccircle cx='0' cy='52' r='30'/%3E%3Ccircle cx='50' cy='50' r='24'/%3E%3Ccircle cx='96' cy='54' r='36'/%3E%3Ccircle cx='150' cy='50' r='22'/%3E%3Ccircle cx='196' cy='52' r='30'/%3E%3Ccircle cx='240' cy='52' r='30'/%3E%3Crect x='0' y='40' width='240' height='8'/%3E%3C/g%3E%3C/svg%3E"); }
/* Dark mode has no flat page colour to match: the night-sky video runs behind
   the page. So there the hero film dissolves into it instead of meeting a cloud. */
body.bm-dark .bm-hero-full::after { display:none; }
body.bm-dark .bm-hero-full {
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--bm-cloud-h,40px) - 24px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - var(--bm-cloud-h,40px) - 24px), transparent); }
.bm-hero-full .bm-hero-inner { padding-bottom:calc(124px + var(--bm-cloud-h,40px)); }
.bm-hero-full .bm-hero-stats { padding-bottom:calc(24px + var(--bm-cloud-h,40px)); }

/* The pieces every layout shares; colour comes from the layout. */
.bm-hero-kicker { display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.28em; text-transform:uppercase; }
.bm-hero-kicker .bm-star { width:9px; height:9px; background:currentColor; }
.bm-hero-ar { font-family:'BM Arabic Heading',sans-serif; font-size:17px; margin:0; }
.bm-hero-inner .bm-hero-title { font-family:var(--font-head); font-weight:400; line-height:1.12; margin:0 0 14px; text-wrap:balance; }
.bm-hero-inner p.sub { font-size:17px; line-height:1.6; max-width:52ch; margin:0 0 28px; }
.bm-hero-cta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.bm-hero-cta .primary, .bm-hero-cta .ghost { display:inline-flex; align-items:center; border-radius:999px; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; }
.bm-hero-cta .primary { padding:15px 32px; }
.bm-hero-cta .ghost { padding:13.5px 28px; border:1.5px solid currentColor; }
.bm-hero-stats { display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,64px); font-size:13px; }
.bm-hero-stats strong { display:block; font-family:var(--font-body); font-weight:500; font-size:22px; letter-spacing:-.01em; }

/* ---- split and wall: the words on the page's own background, the video framed beside them ---- */
.bm-hero-split, .bm-hero-wall { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center;
  gap:clamp(28px,4vw,64px); max-width:1320px; margin:0 auto; padding:clamp(28px,4vw,56px) 28px;
  min-height:calc(100vh - 110px); min-height:calc(100dvh - 110px); }
.bm-hero-wall { grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); }
.bm-hero-kick { display:flex; flex-direction:column; gap:6px; margin:0 0 20px; color:var(--muted); }
.bm-hero-split .bm-hero-ar, .bm-hero-wall .bm-hero-ar { color:var(--body); font-size:16px; align-self:flex-start; }
.bm-hero-split .bm-hero-title, .bm-hero-wall .bm-hero-title { font-size:clamp(38px,4.3vw,64px); color:var(--brand); }
.bm-hero-split p.sub, .bm-hero-wall p.sub { color:var(--body); }
.bm-hero-split .bm-hero-cta .primary, .bm-hero-wall .bm-hero-cta .primary { background:var(--btn); color:var(--btnink); }
.bm-hero-split .bm-hero-cta .primary:hover, .bm-hero-wall .bm-hero-cta .primary:hover { background:var(--btnhover); opacity:1; }
.bm-hero-split .bm-hero-cta .ghost, .bm-hero-wall .bm-hero-cta .ghost { color:var(--brand); }
.bm-hero-split .bm-hero-stats, .bm-hero-wall .bm-hero-stats { margin-top:34px; padding-top:22px; border-top:1px solid var(--border2); color:var(--muted); }
.bm-hero-split .bm-hero-stats strong, .bm-hero-wall .bm-hero-stats strong { color:var(--brand); }
.bm-hero-split .bm-hero-campaign, .bm-hero-wall .bm-hero-campaign { background:var(--surface); color:var(--brand); border:1px solid var(--border3); }
.bm-hero-split .bm-hero-campaign .go, .bm-hero-wall .bm-hero-campaign .go { background:var(--btn); color:var(--btnink); }
.bm-hero-frame { position:relative; overflow:hidden; border-radius:28px; background:#0b1a3d;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.4); }
.bm-hero-split .bm-hero-frame { width:100%; aspect-ratio:4/5; max-height:calc(100dvh - 170px); }
.bm-hero-wallgrid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:1fr 1fr;
  gap:14px; height:min(72vh,640px); height:min(72dvh,640px); }
.bm-hero-wallgrid .main { grid-row:1 / span 2; }
.bm-hero-wallgrid .bm-hero-frame { height:100%; border-radius:22px; }
.bm-hero-wallgrid:not(:has(.clip)) { grid-template-columns:minmax(0,1fr); }

/* ============================================================ shop / grid */
.bm-shop-head { display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.bm-shop-head h2 { font-family:var(--font-head); font-weight:400; font-size:34px; margin:0; color:var(--brand); }
.bm-shop-head p { margin:6px 0 0; color:var(--muted); font-size:14.5px; }
.bm-filters { display:flex; gap:8px; flex-wrap:wrap; }
.bm-tab { border:1.5px solid var(--border3); background:var(--surface); color:var(--body); border-radius:999px;
  padding:9px 18px; cursor:pointer; font-size:13px; letter-spacing:.06em; text-transform:uppercase; transition:all .2s ease; }
.bm-tab.active { border-color:var(--btn); background:var(--btn); color:var(--btnink); }
.bm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; padding-bottom:40px; }
.bm-noresults { text-align:center; padding:60px 0; color:var(--muted); font-size:15px; }
/* "Show all products" under the home page's first few. */
.bm-more { display:flex; justify-content:center; margin:8px 0 40px; }
.bm-more .bm-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:12px 26px; text-decoration:none; }
.bm-more-n { opacity:.7; }

.bm-card { background:var(--surface); border-radius:18px; overflow:hidden; border:1px solid var(--border2);
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.bm-card:hover { transform:translateY(-4px); box-shadow:0 24px 48px -24px rgba(11,45,114,.3); }
.bm-card-media { position:relative; cursor:pointer; aspect-ratio:1/.86; overflow:hidden; background:var(--surface2); }
.bm-card-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s ease; z-index:1; }
.bm-card-media img.hover { opacity:0; }
/* Skeleton: a card's frame is already the right shape before its photo lands
   (aspect-ratio above, so nothing jumps), and this sweeps across it so the wait
   reads as loading rather than as an empty box. app.js adds .is-ready when that
   card's own photo has arrived. Transform, not background-position: it runs on
   the compositor, so thirty waiting cards cost no repaints. */
.bm-card-media::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-100%); animation:bm-skel 1.4s ease-in-out infinite; }
.bm-card-media.is-ready::after { display:none; }
@keyframes bm-skel { to { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .bm-card-media::after { animation:none; transform:none; opacity:.5; } }
/* A photo offered at several widths is an <img> inside a <picture> (app.js
   pic()). The wrapper takes no part in layout, so every "… img" rule on this
   page lays the image out exactly as it did when it stood alone. */
picture { display:contents; }
/* With the wrapper gone from layout its <source> would stand in the layout on
   its own: in Our Story's two-column grid it took the first cell, pushing the
   photo right and the words down a row. A <source> is never drawn. */
picture > source { display:none; }
.bm-card:hover .bm-card-media img.hover { opacity:1; }
.bm-card-badge { position:absolute; top:14px; inset-inline-start:14px; background:var(--btn); color:var(--btnink);
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:6px 12px; }
.bm-sold-badge { position:absolute; top:14px; inset-inline-start:14px; background:rgba(11,26,61,.82); color:#fff;
  font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:6px 12px; backdrop-filter:blur(3px); }
.bm-card.is-sold .bm-card-media img { filter:grayscale(.5) opacity(.72); }
.bm-wish-toggle { position:absolute; top:12px; inset-inline-end:12px; width:38px; height:38px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; color:#9aa3bd; }
.bm-wish-toggle.on { color:#0b2d72; }
.bm-wish-toggle:hover { background:#fff; }
.bm-card-body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.bm-card-body .row1 { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.bm-card-body h3 { font-family:var(--font-head); font-weight:400; font-size:19px; margin:0; color:var(--brand); cursor:pointer; }
.bm-price { font-size:16px; font-weight:600; color:var(--brand); white-space:nowrap; }
.bm-likes { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }

/* ============================================================ a sale: was / now, and the banners
   The was price crossed out before the new one; the banner the shop picked in
   Catalogue → Pricing on the photo. The drawn banners (ribbon, tag, college
   band) own the photo's top corner, so the product's own badge moves to the
   bottom; where a layout is too small to draw them, a small pill says it. */
.bm-was { color:var(--muted); font-weight:400; font-size:.8em; text-decoration-thickness:1.5px; margin-inline-end:4px; white-space:nowrap; }
.bm-now { white-space:nowrap; }
.bm-price.is-sale .bm-now, .bm-product-price.is-sale .bm-now, .bm-quick-info .price.is-sale .bm-now { color:var(--sale); }
.bm-card-media .bm-wish-toggle { z-index:3; }
.bm-flags { position:absolute; top:14px; inset-inline-start:14px; z-index:2; display:flex; flex-wrap:wrap; align-items:center;
  gap:6px; max-width:calc(100% - 72px); pointer-events:none; }
.bm-flags .bm-card-badge { position:static; }
.bm-flags-low { top:auto; bottom:14px; }
.bm-pgal .bm-flags { top:16px; inset-inline-start:16px; }
.bm-pgal .bm-flags-low { top:auto; bottom:92px; }
.bm-quick-media .bm-flags { top:16px; inset-inline-start:16px; }
.bm-sale-pill { display:inline-flex; align-items:center; background:var(--sale-bg); color:#fff; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.02em; border-radius:999px; padding:6px 11px; font-variant-numeric:tabular-nums; direction:ltr; }
.bm-sale-mini { display:none; }

.bm-sale-ribbon { position:absolute; top:0; inset-inline-start:0; z-index:2; width:150px; height:150px; overflow:hidden; pointer-events:none; }
.bm-sale-ribbon > span { position:absolute; top:34px; left:-46px; width:200px; padding:7px 0; transform:rotate(-45deg);
  background:#c9a24b; color:#0b2d72; text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; box-shadow:0 6px 14px -8px rgba(0,0,0,.4); }
[dir="rtl"] .bm-sale-ribbon > span { left:auto; right:-46px; transform:rotate(45deg); letter-spacing:0; }

.bm-sale-tag { position:absolute; top:0; inset-inline-start:26px; z-index:2; display:flex; flex-direction:column; align-items:center;
  transform-origin:50% 0; animation:bmTagSway 3.6s ease-in-out infinite alternate; pointer-events:none; }
.bm-sale-tag .string { width:1.5px; height:22px; background:#0b2d72; opacity:.7; }
.bm-sale-tag .card { position:relative; min-width:54px; padding:15px 10px 8px; background:#fbf8f1; color:#0b2d72;
  border:1.5px solid #0b2d72; border-radius:6px 6px 12px 12px; font-size:14px; font-weight:700; text-align:center;
  font-variant-numeric:tabular-nums; direction:ltr; box-shadow:0 8px 16px -10px rgba(0,0,0,.45); }
.bm-sale-tag .card::before { content:''; position:absolute; top:5px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; border:1.5px solid #0b2d72; background:var(--surface2); }
@keyframes bmTagSway { from { transform:rotate(-5deg); } to { transform:rotate(5deg); } }

/* The college band: a strip of lined notebook paper, red margin and all, wrapped
   over the photo's corner, with a pen resting across it. */
.bm-sale-college { position:absolute; top:0; inset-inline-start:0; z-index:2; width:270px; max-width:100%; height:210px;
  overflow:hidden; pointer-events:none; }
.bm-sale-college .band { position:absolute; top:52px; left:-78px; width:330px; padding:10px 0 9px; transform:rotate(-32deg);
  background:
    linear-gradient(to right, transparent 92px, rgba(197,64,76,.6) 92px, rgba(197,64,76,.6) 93.5px, transparent 93.5px),
    repeating-linear-gradient(to bottom, #fbf8f1 0 10px, rgba(86,120,196,.32) 10px 11px);
  color:#0b2d72; text-align:center; font-family:var(--font-head); font-size:15px; white-space:nowrap;
  box-shadow:0 10px 18px -12px rgba(0,0,0,.45); }
/* The pen rests along the band's lower edge, past the words, at the band's own angle. */
.bm-pen { position:absolute; top:40px; left:96px; width:124px; height:auto; transform:rotate(-32deg);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
[dir="rtl"] .bm-sale-college .band { left:auto; right:-78px; transform:rotate(32deg); }
[dir="rtl"] .bm-pen { left:auto; right:96px; transform:rotate(32deg) scaleX(-1); }

/* The season band on National Day: a strip of the Ishtar Gate along the top
   of the photo (glazed lapis bricks, a gold lion walking, rosettes above and
   below; one lion's length, repeated), a gold medallion hung from it with
   the saving, and the greeting on a navy label beside it. */
.bm-sale-national { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.bm-frieze { position:absolute; top:0; left:0; right:0; height:58px;
  background:url('/assets/moon/ishtar-frieze.webp') repeat-x left top/auto 100%;
  border-bottom:2px solid #e3c46f; box-shadow:0 8px 16px -8px rgba(0,0,0,.5); }
.bm-medal { position:absolute; top:30px; inset-inline-start:16px; width:68px; height:68px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, #fff3cc 0, #ecc96e 32%, #c4932f 72%, #8f6420 100%);
  box-shadow:0 0 0 3px #0b2d72, 0 0 0 4.5px #e3c46f, 0 10px 18px -4px rgba(0,0,0,.45); }
.bm-medal .off { color:#0b2d72; font-weight:800; font-size:18px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.bm-sale-national .label { position:absolute; top:68px; inset-inline-start:92px; white-space:nowrap;
  background:#0b2d72; color:#f3e2a6; font-size:12px; font-weight:700; line-height:1; padding:7px 13px;
  border-radius:999px; border:1px solid #e3c46f; box-shadow:0 6px 12px -6px rgba(0,0,0,.5); }

/* Too small to draw a banner: the list's thumbnail and a phone's tiles get the pill. */
/* A season dresses the banners too: a pumpkin pill with a bat, a holly ribbon. */
body.bm-theme-halloween .bm-sale-pill::after { content:''; width:13px; height:13px; margin-inline-start:6px;
  background:currentColor; -webkit-mask:var(--deco-bat) center/contain no-repeat; mask:var(--deco-bat) center/contain no-repeat; }
body.bm-theme-halloween .bm-sale-ribbon > span { background:var(--gold); color:#1d1330; }
body.bm-theme-christmas .bm-sale-pill::before { content:''; width:13px; height:13px; margin-inline-end:6px;
  background:currentColor; -webkit-mask:var(--orn-holly) center/contain no-repeat; mask:var(--orn-holly) center/contain no-repeat; }
body.bm-theme-christmas .bm-sale-ribbon > span { background:#14563f; color:#f4ece0; }
body.bm-theme-christmas .bm-sale-tag .card { border-color:#14563f; color:#14563f; }
body.bm-theme-national .bm-sale-pill::before { content:''; width:13px; height:13px; margin-inline-end:6px;
  background:currentColor; -webkit-mask:var(--orn-palm) center/contain no-repeat; mask:var(--orn-palm) center/contain no-repeat; }
body.bm-theme-national .bm-sale-ribbon > span { color:#fff;
  background:linear-gradient(to bottom, #ce1126 0 4px, #0b2d72 4px calc(100% - 4px), #111 calc(100% - 4px)); }
body.bm-theme-national .bm-sale-tag .card { border-color:#ce1126; }
body.bm-theme-national .bm-sale-tag .string { background:#ce1126; }

.bm-tile .bm-sale:not(.bm-sale-pill), .bm-lrow .bm-sale:not(.bm-sale-pill) { display:none; }
.bm-tile .bm-sale-mini, .bm-lrow .bm-sale-mini { display:inline-flex; }
.bm-tile .bm-flags, .bm-lrow .bm-flags { top:6px; bottom:auto; inset-inline-start:6px; gap:4px; max-width:calc(100% - 40px); }
.bm-tile .bm-sale-pill, .bm-lrow .bm-sale-pill { font-size:11px; padding:3px 7px; }
/* The like, and its count. The only number on a card a customer can move, so
   it has to look pressable rather than printed — and it has to stay legible at
   the small size a card gives it. */
.bm-likes { display:flex; align-items:center; gap:8px; }
.bm-like { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px;
  border:1px solid var(--border2, rgba(0,0,0,.12)); border-radius:999px;
  background:transparent; color:var(--body); font:inherit; font-size:13px; line-height:1;
  cursor:pointer; transition:border-color .18s ease, color .18s ease, background-color .18s ease; }
.bm-like svg { width:15px; height:15px; }
.bm-like:hover { border-color:var(--brand); color:var(--brand); }
.bm-like.on { color:var(--brand); border-color:var(--brand); }
.bm-like-n { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
/* Below ten likes the button says "Like" instead of showing a small number. */
.bm-like-w { font-size:12px; }
/* The fill is the confirmation, so it earns a beat of its own. */
@keyframes bmLikePop { 0% { transform:scale(1); } 45% { transform:scale(1.28); } 100% { transform:scale(1); } }
.bm-like.on svg { animation:bmLikePop .32s ease; }
@media (prefers-reduced-motion: reduce) { .bm-like.on svg { animation:none; } }
.bm-card-body .blurb { margin:0; font-size:13.5px; line-height:1.55; color:var(--body); flex:1; }
.bm-card-actions { display:flex; gap:10px; margin-top:6px; }
/* One line per button. "ADD TO BAG" was breaking onto two lines inside a pill
   at the three-across desktop width, which made every card a different height
   of button. */
.bm-card-actions .bm-btn { white-space:nowrap; padding-inline:14px; letter-spacing:.05em; }
.bm-card-actions .add { flex:1; }

/* ============================================================ lash finder */
.bm-finder { color:var(--body); padding:56px 28px; margin:0; background:transparent; }
.bm-finder-in { max-width:1000px; margin:0 auto; text-align:center; }
.bm-finder .bm-star { width:12px; height:12px; background:var(--brand); }
.bm-finder h2 { font-family:var(--font-head); font-weight:400; font-size:32px; margin:0 0 10px; color:var(--brand); }
.bm-finder .prompt { margin:0 0 32px; color:var(--muted); font-size:15.5px; }
.bm-finder-opts { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.bm-finder-opt { background:transparent; color:var(--brand); border:1.5px solid var(--border3); border-radius:999px;
  padding:13px 26px; cursor:pointer; font-size:14px; letter-spacing:.06em; transition:all .2s ease; }
.bm-finder-opt:hover { border-color:var(--brand); }
.bm-finder-opt.active { background:var(--btn); color:var(--btnink); border-color:var(--btn); }
.bm-finder-result { margin-top:32px; background:var(--surface); border:1px solid var(--border2);
  border-radius:16px; padding:22px 26px; display:inline-flex; align-items:center; gap:18px; text-align:start;
  animation:bmPop .35s ease; box-shadow:0 20px 40px -28px rgba(11,45,114,.3); }
.bm-finder-result img { width:84px; height:84px; object-fit:cover; border-radius:12px; }
.bm-finder-result .label { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.bm-finder-result .name { font-family:var(--font-head); font-size:21px; margin-bottom:8px; color:var(--brand); }
.bm-finder-result .go { background:var(--btn); color:var(--btnink); border:none; border-radius:999px; padding:9px 20px; cursor:pointer; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }

/* ============================================================ lookbook rail */
.bm-lookbook { max-width:1320px; margin:0 auto; padding:40px 28px 8px; }
.bm-lookbook-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.bm-lookbook-head h2 { font-family:var(--font-head); font-weight:400; font-size:32px; margin:6px 0 0; color:var(--brand); }
.bm-lookbook-head p { margin:6px 0 0; color:var(--muted); font-size:14.5px; }
.rail { overflow:hidden; cursor:grab; touch-action:pan-y; }        /* mask, NOT a scroll container */
.rail.dragging { cursor:grabbing; }
.rail-track { display:flex; gap:22px; width:max-content; will-change:transform; }
.rail-track.animating { transition:transform .55s cubic-bezier(.16,1,.3,1); }
.rail-card { flex:0 0 auto; width:min(60vw,520px); position:relative; border-radius:20px; overflow:hidden;
  background:var(--surface2); border:1px solid var(--border2); cursor:pointer; }
.rail-card.video { width:min(74vw,720px); }
/* height:100% as well as the ratio: a photo card is shorter than a video card
   beside it, the row stretches it to the video's height, and the photo has to
   stretch with it — or a band of empty card shows under it, and the caption
   meant to sit on the photo sits on that band instead, white on cream. The
   ratio still sizes whichever card sets the row's height. */
.rail-card .media { position:relative; aspect-ratio:4/3; height:100%; overflow:hidden; background:#0b1a3d; }
.rail-card img, .rail-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rail-card .play-badge { position:absolute; top:14px; inset-inline-start:14px; z-index:2; display:flex; align-items:center; gap:8px;
  background:rgba(11,26,61,.55); color:#fff; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px); }
.rail-card .cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 20px 16px; color:#fff;
  font-family:var(--font-head); font-size:19px; background:linear-gradient(to top, rgba(11,26,61,.78), transparent); }
.rail-controls { display:flex; align-items:center; gap:16px; max-width:1320px; margin:18px auto 0; padding:0 28px; }
.rail-controls button { width:44px; height:44px; border-radius:50%; border:1.5px solid var(--border3); background:var(--surface);
  color:var(--brand); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; flex:none; transition:border-color .2s; }
.rail-controls button:hover:not(:disabled) { border-color:var(--brand); }
.rail-controls button:disabled { opacity:.35; cursor:default; }
.rail-progress { flex:1; height:4px; background:var(--border); border-radius:999px; position:relative; overflow:hidden; }
.rail-progress span { position:absolute; top:0; height:100%; background:var(--btn); border-radius:999px; }

/* ============================================================ about */
.bm-about { max-width:1240px; margin:0 auto; padding:40px 28px 72px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
/* A set shape, cropped to fit: the story photo is a tall portrait, and at full
   column width it made a block about 1,400 px tall beside four lines of text. */
.bm-about img { width:100%; aspect-ratio:4/5; max-height:620px; object-fit:cover; border-radius:18px; display:block; }
.bm-about h2 { font-family:var(--font-head); font-weight:400; font-size:32px; color:var(--brand); margin:0 0 16px; }
.bm-about p { font-size:16px; line-height:1.7; color:var(--body); margin:0 0 18px; }
.bm-about ul { margin:0; padding:0; list-style:none; display:grid; gap:12px; font-size:14.5px; color:var(--ink); }
.bm-about li { display:flex; gap:12px; align-items:center; }
.bm-about li .bm-star { width:9px; height:9px; flex:none; }

/* ============================================================ footer */
/* The shop's name, its list and sign-up; then where to go (Shop) and who to ask
   (Help, when the shop has a WhatsApp number). */
.bm-footer { background:var(--navy); color:var(--navymuted); padding:56px 28px 28px; }
.bm-footer-in { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:36px 56px; align-items:start; }
.bm-footer-in.has-help { grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr) minmax(0,.75fr); }
.bm-footer p.blurb { margin:14px 0 0; font-size:14px; max-width:44ch; line-height:1.6; }
.bm-foot-brand .bm-news { margin-top:22px; max-width:440px; }
.bm-foot-col h3 { margin:4px 0 10px; font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#e8e2db; }
.bm-foot-col nav { display:flex; flex-direction:column; align-items:flex-start; }
.bm-foot-col a { display:inline-flex; align-items:center; min-height:40px; color:var(--navymuted); text-decoration:none; font-size:14.5px; }
.bm-foot-col a:hover { color:#e8e2db; text-decoration:underline; text-underline-offset:3px; }
.bm-news { display:flex; gap:10px; background:rgba(232,226,219,.08); border:1px solid rgba(232,226,219,.4);
  border-radius:999px; padding:6px 6px 6px 20px; }
.bm-news input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:#e8e2db; font-family:inherit; font-size:16px; }
.bm-news input::placeholder { color:var(--navymuted); }
.bm-news button { background:#e8e2db; color:#0b2d72; border:none; border-radius:999px; padding:11px 22px; cursor:pointer; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.bm-footer-base { max-width:1240px; margin:40px auto 0; border-top:1px solid rgba(232,226,219,.28); padding-top:20px;
  display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.06em; }
.bm-footer-base .ar { font-family:var(--font-body); font-size:14px; letter-spacing:0; }
/* The small print, on the bottom line where it is looked for. It comes first in
   the markup so a keyboard reaches it before the copyright; the copyright is
   pushed to the end of the row instead of the links being pushed to the start. */
.bm-foot-legal { display:flex; flex-wrap:wrap; gap:6px 18px; order:-1; margin-inline-end:auto; }
.bm-foot-legal a { color:inherit; opacity:.8; text-decoration:none; }
.bm-foot-legal a:hover, .bm-foot-legal a:focus-visible { opacity:1; text-decoration:underline; }

/* The policy pages. Prose, so they are narrow: a line of text 100 characters
   wide is a line nobody finishes. */
/* The page's own drifting clouds are a decoration on a shop; behind six
   hundred words of terms they are something to read through. Prose gets a page
   of its own to sit on. */
.bm-legal { position:relative; z-index:1; max-width:800px; margin:30px auto 80px; padding:32px 40px 56px;
  background:var(--surface); border:1px solid var(--border2); border-radius:22px; }
@media (max-width:640px) { .bm-legal { margin:16px 12px 56px; padding:22px 20px 40px; border-radius:16px; } }
.bm-legal h1 { font-family:var(--font-head); font-size:var(--t-2xl); color:var(--ink); margin:0 0 18px; }
.bm-legal-tabs { margin-bottom:26px; }
.bm-legal-tabs .bm-tab { text-decoration:none; }
.bm-legal-body { color:var(--body); font-size:var(--t-sm); line-height:1.75; }
.bm-legal-h2 { font-family:var(--font-head); font-size:var(--t-lg); color:var(--ink);
  margin:30px 0 8px; font-weight:400; }
.bm-legal-body h2:first-child { margin-top:0; }
.bm-legal-body p { margin:0 0 12px; }
/* Paying another way: a quiet second choice under the button that is the real
   one. Deliberately not a primary button - cash on delivery is still how this
   shop sells, and this must read as the alternative it is. */
.bm-paywa { display:flex; align-items:center; gap:10px; margin-top:12px;
  padding:12px 16px; min-height:48px; border:1px solid var(--border3); border-radius:14px;
  background:var(--surface); color:var(--brand); text-decoration:none;
  font-size:var(--t-sm); line-height:1.3; }
.bm-paywa:hover, .bm-paywa:focus-visible { border-color:var(--btn); background:var(--surface2); }
.bm-paywa span { flex:1; min-width:0; }
.bm-paywa .ic { width:18px; height:18px; flex:none; }
/* In the bag drawer it sits under the checkout button, inside a footer that
   already spaces its children. */
.bm-drawer-foot .bm-paywa { margin-top:10px; }

/* The line on the checkout that says what placing the order agrees to. */
.bm-consent a { color:var(--brand); text-decoration:underline; }

/* ============================================================ overlays: cart drawer */
.bm-overlay { position:fixed; inset:0; z-index:100; background:rgba(11,25,58,.45); }
.bm-drawer { position:absolute; top:0; bottom:0; inset-inline-end:0; width:min(420px,92vw); background:var(--bg);
  display:flex; flex-direction:column; box-shadow:0 0 60px rgba(11,25,58,.35); animation:bmSlideIn .3s ease; }
[dir="rtl"] .bm-drawer { inset-inline-end:auto; inset-inline-start:0; animation:bmSlideInL .3s ease; }
.bm-drawer-head { padding:22px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.bm-drawer-head h3 { font-family:var(--font-head); font-weight:400; font-size:21px; margin:0; color:var(--brand); }
.bm-x { background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted); line-height:1;
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; border-radius:999px; }
.bm-drawer-tabs { display:flex; border-bottom:1px solid var(--border); }
.bm-drawer-tabs button { flex:1; padding:12px; border:none; cursor:pointer; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; background:transparent; color:var(--body); }
.bm-drawer-tabs button.active { background:var(--btn); color:var(--btnink); }
.bm-ship { padding:16px 24px 0; }
.bm-ship .msg { font-size:12.5px; color:var(--body); margin-bottom:8px; }
.bm-ship .bar { height:6px; background:var(--border); border-radius:999px; overflow:hidden; }
/* The fill is the whole bar, slid in from its start by how far is left (app.js
   sets --fill, 0 to 1): a transform, not a width, so it moves without layout,
   and a slide keeps its rounded end where a scale would squash it. */
.bm-ship .bar > span { display:block; width:100%; height:100%; background:var(--btn); border-radius:999px;
  transform:translateX(calc((var(--fill, 0) - 1) * 100%)); transition:transform .4s cubic-bezier(.22,1,.36,1); }
[dir="rtl"] .bm-ship .bar > span { transform:translateX(calc((1 - var(--fill, 0)) * 100%)); }
.bm-drawer-list { flex:1; overflow:auto; padding:18px 24px; display:flex; flex-direction:column; gap:16px; }
.bm-line { display:flex; gap:14px; align-items:center; }
.bm-line img { width:64px; height:64px; object-fit:cover; border-radius:12px; flex:none; }
.bm-line .name { font-size:14px; font-weight:600; color:var(--brand); }
.bm-line .sub { font-size:12.5px; color:var(--muted); margin:2px 0 6px; }
.bm-qty { display:flex; align-items:center; border:1px solid var(--border3); border-radius:999px; }
.bm-qty button { background:none; border:none; padding:6px 10px; min-width:32px; min-height:28px; cursor:pointer; color:var(--brand); font-size:15px; }
.bm-qty span { font-size:13px; min-width:18px; text-align:center; }
.bm-remove { background:none; border:none; cursor:pointer; font-size:12px; color:var(--faint); text-decoration:underline; padding:6px 4px; }
.bm-line .lineTotal { font-weight:700; color:var(--brand); font-size:14.5px; margin-inline-start:auto; }
.bm-drawer-foot { padding:20px 24px; border-top:1px solid var(--border); }
/* "Complete your set", above the total: the product, its price, one tap. */
.bm-suggest { display:flex; align-items:center; gap:12px; padding:10px 12px; margin:0 0 14px;
  background:var(--surface); border:1px solid var(--border2); border-radius:14px; }
.bm-suggest img { width:52px; height:52px; object-fit:cover; border-radius:10px; flex:none; }
.bm-suggest-main { flex:1; min-width:0; }
.bm-suggest .k { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
[dir="rtl"] .bm-suggest .k { letter-spacing:0; }
.bm-suggest .name { font-size:14px; font-weight:600; color:var(--brand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bm-suggest .bm-price { font-size:13px; color:var(--body); }
.bm-suggest-add { display:inline-flex; align-items:center; gap:6px; flex:none; cursor:pointer;
  border:1.5px solid var(--btn); background:transparent; color:var(--btn); border-radius:999px;
  padding:7px 13px; min-height:38px; font:inherit; font-size:13px; font-weight:600; }
.bm-suggest-add:hover { background:var(--btn); color:var(--btnink); }
.bm-suggest-add .ic { width:15px; height:15px; }
.bm-drawer-foot .sub { display:flex; justify-content:space-between; font-size:15px; margin-bottom:14px; color:var(--body); }
.bm-drawer-foot .sub strong { color:var(--brand); }
.bm-empty { text-align:center; color:var(--muted); padding:48px 0; font-size:14.5px; }
.bm-mini { margin-top:10px; text-align:center; font-size:12px; color:var(--faint); }
.bm-wish-line .add { background:var(--btn); color:var(--btnink); border:none; border-radius:999px; padding:8px 14px; cursor:pointer; font-size:12px; }

/* ============================================================ quick view modal */
.bm-modal { position:fixed; inset:0; z-index:90; background:rgba(11,25,58,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.bm-quick { background:var(--bg); border-radius:20px; max-width:880px; width:100%; max-height:88vh; overflow:auto;
  display:grid; grid-template-columns:1fr 1fr; animation:bmPop .3s ease; }
.bm-quick-media { position:relative; background:var(--surface2); }
.bm-quick-media img { width:100%; height:100%; object-fit:cover; display:block; min-height:380px; }
.bm-quick-thumbs { position:absolute; bottom:14px; inset-inline-start:14px; display:flex; gap:8px; }
/* Weighted above .bm-quick-media img on purpose. Both matched the thumbnails
   with equal weight, so the phone rule further down (min-height:240px) won by
   coming later and drew each thumbnail as a 240 px-tall strip across the photo. */
.bm-quick-media .bm-quick-thumbs img { width:54px; height:54px; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid rgba(255,255,255,.8); min-height:0; }
.bm-quick-thumbs img.active { border-color:#0b2d72; }
.bm-quick-info { padding:32px 30px; display:flex; flex-direction:column; gap:14px; }
.bm-quick-info h3 { font-family:var(--font-head); font-weight:400; font-size:26px; margin:0; color:var(--brand); }
.bm-quick-info .cat { font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.bm-quick-info .price { font-size:22px; font-weight:700; color:var(--brand); }
.bm-quick-info p.desc { margin:0; font-size:14.5px; line-height:1.65; color:var(--body); }
.bm-quick-info .ar { font-family:var(--font-body); font-size:16px; line-height:1.7; color:var(--muted); }
.bm-quick-buy { display:flex; gap:14px; align-items:center; margin-top:auto; }
.bm-quick-qty { display:flex; align-items:center; border:1.5px solid var(--border3); border-radius:999px; }
.bm-quick-qty button { background:none; border:none; padding:10px 16px; cursor:pointer; font-size:16px; color:var(--brand); }
.bm-quick-qty span { min-width:24px; text-align:center; font-weight:600; }
.bm-quick-buy .add { flex:1; padding:14px 0; }

/* ============================================================ checkout / success */
.bm-checkout { max-width:1100px; margin:0 auto; padding:44px 28px 80px; animation:bmFadeUp .5s ease both; }
.bm-back { background:none; border:none; color:var(--muted); cursor:pointer; font-family:inherit; font-size:13.5px; padding:6px 0; margin-bottom:12px; }
.bm-checkout h1 { font-family:var(--font-head); font-weight:400; font-size:36px; margin:0 0 6px; color:var(--brand); }
.bm-checkout .lede { margin:0 0 34px; color:var(--muted); font-size:14.5px; }
.bm-checkout-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start; }
.bm-panel { background:var(--surface); border:1px solid var(--border2); border-radius:18px; padding:26px; }
.bm-panel h3 { font-family:var(--font-head); font-weight:400; font-size:20px; margin:0 0 18px; color:var(--brand); }
.bm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bm-field { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted); letter-spacing:.04em; }
.bm-field input { border:1.5px solid var(--field); border-radius:12px; padding:12px 14px; font-family:inherit; font-size:16px; background:var(--bg); color:var(--ink); outline:none; }
.bm-field input:focus { border-color:var(--brand); }
.bm-field input.err { border-color:var(--err); }
.bm-field.wide { grid-column:1 / -1; }

/* The discount box. Quiet until it works, because most people never use one. */
.bm-promo { grid-column:1 / -1; }
.bm-promo-ask { background:none; border:0; padding:4px 0; font:inherit; font-size:14px; color:var(--brand);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:36px; }
.bm-promo input { text-transform:uppercase; letter-spacing:.06em; }
.bm-promo.on input { border-color:var(--brand); background:var(--surface2); }
.bm-promo-ok { margin-top:6px; font-size:12.5px; color:var(--brand); letter-spacing:0; }
.bm-promo-no { margin-top:6px; font-size:12.5px; color:var(--err); letter-spacing:0; }
.bm-promo-x { background:none; border:none; padding:0 0 0 8px; color:var(--faint);
  font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }
.bm-summary .totals .r.off span:last-child { color:var(--brand); }

/* The optional second currency. Deliberately quiet and deliberately prefixed
   with ~: the shop sells in dinars, and this is a courtesy, not a price. */
.bm-usd { display:block; font-size:var(--t-xs); font-weight:400; color:var(--faint);
  letter-spacing:0; margin-top:1px; }

/* Governorate / area pickers.
   A native <select> next to these rounded inputs looks like a different form,
   so the browser chrome is turned off and the field is drawn to match. The
   chevron is a rotated border rather than a glyph: it stays put in RTL, needs
   no font, and inherits the theme. */
.bm-sel { position:relative; display:block; }
.bm-sel select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; box-sizing:border-box; border:1.5px solid var(--field); border-radius:12px;
  padding:12px 38px 12px 14px; font-family:inherit; font-size:16px; line-height:1.3;
  background:var(--bg); color:var(--ink); outline:none; cursor:pointer;
  text-overflow:ellipsis; transition:border-color .16s ease;
}
[dir="rtl"] .bm-sel select { padding:12px 14px 12px 38px; }
.bm-sel select:focus { border-color:var(--brand); }
.bm-sel select:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.bm-sel select.err { border-color:var(--err); }
.bm-sel select.ph { color:var(--faint); }
.bm-sel::after {
  content:''; position:absolute; top:50%; right:16px; width:7px; height:7px; margin-top:-5px;
  border-right:1.6px solid var(--faint); border-bottom:1.6px solid var(--faint);
  transform:rotate(45deg); pointer-events:none;
}
[dir="rtl"] .bm-sel::after { right:auto; left:16px; }
.bm-sel.off select { background:var(--surface2); border-style:dashed; color:var(--faint); cursor:not-allowed; }
.bm-sel.off::after { opacity:.35; }
.bm-sel.busy::after {
  width:12px; height:12px; margin-top:-6px; border:1.6px solid var(--border3);
  border-top-color:var(--brand); border-radius:50%; transform:none;
  animation:bmSpin .7s linear infinite;
}
@keyframes bmSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .bm-sel.busy::after { animation:none; } }

/* The area: a box to type in, with the matching areas under it and "Add …"
   when hers is not there (the staff order form's picker). The chevron stays,
   so it still reads as a choice rather than free text. */
.bm-combo { position:relative; }
/* Room for the chevron on the side the PAGE puts it (as for the select above),
   not the side the typed text runs to: an English name typed on the Arabic
   page must not slide under it. */
.bm-sel input { width:100%; box-sizing:border-box; padding-right:38px; }
[dir="rtl"] .bm-sel input { padding-right:14px; padding-left:38px; }
.bm-sel.off input { background:var(--surface2); border-style:dashed; cursor:not-allowed; }
.bm-combo-list { position:absolute; inset-inline:0; top:100%; margin-top:4px; z-index:30; max-height:280px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border2); border-radius:12px; box-shadow:0 12px 30px rgba(11,45,114,.14); }
.bm-combo-list:empty { display:none; }
.bm-combo-opt { display:flex; justify-content:space-between; gap:10px; width:100%; min-height:44px; padding:11px 14px;
  background:none; border:0; border-bottom:1px solid var(--border2); font:inherit; font-size:15px; color:var(--ink);
  text-align:start; letter-spacing:0; cursor:pointer; }
.bm-combo-opt:last-child { border-bottom:0; }
.bm-combo-opt:hover, .bm-combo-opt:focus-visible { background:var(--surface2); outline:none; }
.bm-combo-opt .alt { color:var(--faint); font-size:13px; }
.bm-combo-opt.add { color:var(--brand); font-weight:600; }
.bm-combo-none { padding:12px 14px; font-size:14px; color:var(--faint); letter-spacing:0; }

/* Where it's going, confirmed back to the customer the moment they pick. The
   cascade asks two questions; this is what it bought them. */
.bm-dest {
  grid-column:1 / -1; display:flex; align-items:center; gap:9px;
  background:var(--surface2); border:1px solid var(--border2); border-radius:12px;
  padding:11px 14px; font-size:13.5px; color:var(--body); letter-spacing:0;
  animation:bmFadeUp .3s ease both;
}
.bm-dest .pin { flex:none; font-size:14px; line-height:1; }
.bm-dest b { color:var(--brand); font-weight:600; }
.bm-dest .fee { margin-inline-start:auto; font-size:12.5px; color:var(--faint); white-space:nowrap; }
.bm-form-error { margin-top:12px; color:var(--err); font-size:13px; }
/* The phone code at checkout */
.bm-otp { margin-top:16px; padding:16px; border:1.5px solid var(--brand); border-radius:14px; background:var(--surface2); }
.bm-otp-h { font-size:15px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.bm-otp-p { margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--body); }
.bm-otp-row { display:flex; gap:10px; flex-wrap:wrap; }
.bm-otp-row input { flex:1 1 150px; min-width:0; border:1.5px solid var(--field); border-radius:12px; padding:12px 14px;
  font-family:inherit; font-size:20px; letter-spacing:.35em; text-align:center; background:var(--bg); color:var(--ink);
  font-variant-numeric:tabular-nums; outline:none; }
.bm-otp-row input:focus { border-color:var(--brand); }
.bm-otp-row .bm-btn { flex:0 0 auto; padding:12px 22px; }
.bm-otp-links { display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; }
.bm-otp-links button { background:none; border:none; padding:4px 0; font:inherit; font-size:13px; color:var(--brand);
  text-decoration:underline; cursor:pointer; }
.bm-otp-links button[disabled] { color:var(--faint); text-decoration:none; cursor:default; }
/* The code in a pop-up over the checkout (otpModalHTML): the same box,
   centred, above everything, with its own way out. */
.bm-otp-modal { z-index:120; }
.bm-otp-dialog { position:relative; width:min(440px,100%); max-height:90vh; overflow:auto; border-radius:20px; border:1px solid var(--border3);
  background:var(--surface); box-shadow:0 30px 70px -30px rgba(0,0,0,.6); }
.bm-otp-dialog .bm-otp { margin:0; border:none; background:none; padding:28px 24px 22px; }
.bm-otp-dialog .bm-otp-h { font-size:19px; font-family:var(--font-head); color:var(--brand); padding-inline-end:36px; }
.bm-otp-x { position:absolute; top:12px; inset-inline-end:12px; width:36px; height:36px; display:grid; place-items:center;
  border:none; border-radius:50%; background:var(--surface2); color:var(--ink); cursor:pointer; }
.bm-otp-x .ic { width:18px; height:18px; }
/* Her five minutes: the box on the thank-you and order pages, and the line
   at the top of the checkout while she changes the order. */
.bm-editbox { margin:18px auto 6px; max-width:520px; padding:16px 18px; border:1.5px solid var(--brand);
  border-radius:16px; background:var(--surface2); text-align:start; }
.bm-editbox-h { font-weight:700; color:var(--ink); margin-bottom:4px; }
.bm-editbox p { margin:0 0 12px; color:var(--body); font-size:14px; }
.bm-editbox-row { display:flex; gap:10px; flex-wrap:wrap; }
.bm-editbox-row .bm-btn { flex:1 1 160px; }
.bm-editbox-row .bm-btn.armed { border-color:var(--sale); color:var(--sale); font-weight:700; }
.bm-edit-left { font-variant-numeric:tabular-nums; }
.bm-editbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:6px 0 18px; padding:12px 16px; border-radius:14px; background:var(--surface2); border:1.5px solid var(--brand); color:var(--ink); }
.bm-editbar .bm-btn { padding:9px 16px; }
.bm-pay { border:2px solid var(--brand); border-radius:14px; padding:18px 20px; display:flex; align-items:center; gap:16px; background:var(--bg); }
.bm-pay .radio { width:22px; height:22px; border:2px solid var(--brand); border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.bm-pay .radio span { width:11px; height:11px; background:var(--brand); border-radius:50%; }
.bm-pay .t { flex:1; }
.bm-pay .t .lbl { font-weight:700; font-size:15.5px; color:var(--brand); }
.bm-pay .t .note { font-size:13px; color:var(--muted); margin-top:2px; }
.bm-summary { position:sticky; top:96px; }
.bm-summary .items { display:flex; flex-direction:column; gap:14px; max-height:260px; overflow:auto; }
.bm-summary .items .it { display:flex; gap:12px; align-items:center; }
.bm-summary .items img { width:50px; height:50px; object-fit:cover; border-radius:10px; }
.bm-summary .items .nm { flex:1; font-size:13.5px; color:var(--ink); }
.bm-summary .items .nm .q { color:var(--muted); font-size:12px; }
.bm-summary .items .amt { font-weight:600; color:var(--brand); font-size:13.5px; }
.bm-summary .totals { border-top:1px solid var(--border); margin:16px 0; padding-top:14px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--body); }
.bm-summary .totals .r { display:flex; justify-content:space-between; }
.bm-summary .totals .grand { font-size:17px; font-weight:700; color:var(--brand); margin-top:4px; }
.bm-summary .place { width:100%; padding:15px 0; margin-top:4px; }

.bm-success { max-width:620px; margin:0 auto; padding:70px 28px 90px; text-align:center; animation:bmFadeUp .5s ease both; }
.bm-success .check { width:74px; height:74px; border-radius:50%; background:var(--btn); margin:0 auto 22px; display:flex; align-items:center; justify-content:center; animation:bmPop .5s ease; }
.bm-success .check span { color:var(--btnink); font-size:32px; }
.bm-success h1 { font-family:var(--font-head); font-weight:400; font-size:34px; margin:0 0 10px; color:var(--brand); }
.bm-success p { color:var(--body); font-size:15.5px; line-height:1.65; margin:0 0 8px; }
.bm-orderno { display:inline-block; background:var(--surface); border:1px dashed var(--border3); border-radius:12px; padding:12px 22px; margin:14px 0 6px; font-size:14px; color:var(--muted); }
.bm-orderno strong { color:var(--brand); letter-spacing:.08em; }

/* ============================================================ mobile menu + toast */
.bm-menu-overlay { position:fixed; inset:0; background:rgba(11,25,58,.5); z-index:105; }
.bm-menu { position:absolute; top:0; left:0; right:0; background:var(--bg); border-radius:0 0 22px 22px;
  padding:22px 20px 26px; display:flex; flex-direction:column; gap:16px; animation:bmFadeUp .25s ease; box-shadow:0 30px 60px rgba(11,25,58,.35); }
.bm-menu-head { display:flex; justify-content:space-between; align-items:center; }
.bm-menu-nav { display:flex; flex-direction:column; gap:2px; font-size:16px; }
.bm-menu-nav a { padding:12px 6px; border-bottom:1px solid var(--border); color:var(--ink); }
.bm-menu-nav a:last-child { border-bottom:none; }
.bm-menu-row { display:flex; gap:10px; }
.bm-menu-row button { flex:1; background:var(--surface); border:1.5px solid var(--border3); color:var(--brand); border-radius:999px; padding:11px 0; cursor:pointer; font-size:15px; }

/* A status line, never a control: taps go straight through it, so it can
   never stand between somebody and the button underneath. */
.bm-toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--btn); color:var(--btnink);
  border-radius:999px; padding:12px 26px; font-size:13.5px; letter-spacing:.04em; z-index:120; animation:bmPop .3s ease;
  box-shadow:0 14px 34px -12px rgba(11,25,58,.5); pointer-events:none; }
/* While the bag is open its checkout button owns the bottom of the screen. */
.bm-toast.bm-toast-top { bottom:auto; top:calc(18px + env(safe-area-inset-top, 0px)); }

/* ============================================================ scroll reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }

/* ============================================================ responsive */
@media (max-width:900px) {
  .bm-checkout-grid { grid-template-columns:1fr; }
  .bm-summary { position:static; }
  .bm-quick { grid-template-columns:1fr; }
  .bm-quick-media img { min-height:240px; }
  .rail-card { width:82vw; }
  .rail-card.video { width:88vw; }
}
/* The full header needs the room: at 768 its links wrapped onto two lines and
   the search box shrank to a stub. Below 1024 the menu holds them. Only the
   header's own search is hidden; the one inside the menu used to go with it. */
@media (max-width:1023px) {
  .bm-nav, .bm-header-in > .bm-search, .bm-desk-tools { display:none; }
  .bm-burger { display:flex; }
  .bm-header-in { padding:10px 18px; gap:10px; }
}
@media (max-width:760px) {
  .bm-header-in { padding:10px 14px; }
  .bm-wordmark { height:19px; }
  .bm-hero-full .bm-hero-ar { display:none; }
  /* Full: seven tenths of the phone, so the shop starts sooner. */
  .bm-hero-full { min-height:calc(70svh - 20px); }
  .bm-hero-full { --bm-cloud-h:28px; }
  .bm-hero-full .bm-hero-inner { padding:0 20px calc(108px + var(--bm-cloud-h)); }
  .bm-hero-full .bm-hero-inner .bm-hero-title { font-size:clamp(32px,8.6vw,42px); }
  .bm-hero-full .bm-hero-inner p.sub { font-size:15px; margin-bottom:20px; }
  .bm-hero-full .bm-hero-stats { padding:14px 20px calc(18px + var(--bm-cloud-h)); }
  .bm-hero-stats { gap:18px; }
  /* Split and wall: the video first, then the words, so nothing is written over the product. */
  .bm-hero-split, .bm-hero-wall { grid-template-columns:minmax(0,1fr); min-height:0; gap:22px; padding:16px 18px 32px; }
  .bm-hero-media { order:-1; }
  .bm-hero-split .bm-hero-frame { max-height:62svh; }
  .bm-hero-split .bm-hero-title, .bm-hero-wall .bm-hero-title { font-size:clamp(32px,8.6vw,42px); }
  .bm-hero-split p.sub, .bm-hero-wall p.sub { font-size:15px; margin-bottom:20px; }
  .bm-hero-wallgrid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; height:auto; gap:10px; }
  .bm-hero-wallgrid .main { grid-column:1 / -1; grid-row:auto; aspect-ratio:4/5; max-height:56svh; }
  .bm-hero-wallgrid .clip { aspect-ratio:1/1; }
  .bm-section-pad { padding:36px 18px 8px; }
  .bm-about { grid-template-columns:1fr; padding:28px 18px 56px; gap:28px; }
  /* The name, list and sign-up across the top; Shop and Help side by side under it. */
  .bm-footer-in, .bm-footer-in.has-help { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
  .bm-foot-brand, .bm-footer-in:not(.has-help) .bm-foot-col { grid-column:1 / -1; }
  .bm-footer-base { flex-direction:column; align-items:flex-start; }
  .bm-form-grid { grid-template-columns:1fr; }
  .bm-checkout { padding:30px 18px 60px; }
  /* The bag takes the whole phone. At 92vw it left a 30px strip of the page
     beside it: too narrow to tap with any confidence, wide enough to look like
     something could be. */
  .bm-drawer { width:100vw; box-shadow:none; }
}

/* ============================================================ Arabic tracking */
/* Tracking is for capitals. Arabic is joined script: letter-spacing pulls the
   joins apart, and every uppercase-style label here (buttons, tabs, badges,
   the announcement) carried .06-.18em of it into the Arabic page, where it has
   no capitals to space and only connections to break. */
[dir="rtl"] :is(.bm-btn, .bm-nav, .bm-cart-btn, .bm-tab, .bm-card-badge, .bm-sold-badge, .bm-eyebrow,
  .bm-announce, .bm-drawer-tabs button, .bm-finder-opt, .bm-finder-result .go, .bm-hero-cta .primary,
  .bm-hero-cta .ghost, .bm-news button, .bm-quick-info .cat, .bm-field, .bm-finder-result .label,
  .rail-card .play-badge, .bm-footer-base, .bm-hero-stats) { letter-spacing:0; }

/* ============================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .bm-announce-track { animation:none; }
  .cloud-wrap.deco span { animation:none; }          /* the season's sky holds still */
  .reveal { opacity:1; transform:none; }
  body.bm-anim, body.bm-anim * { transition:none !important; }
}


/* ---- product options (size, colour) ----------------------------------
   Only rendered when a product actually has more than one, so a plain
   product's card is exactly as it was. */
.bm-opts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.bm-opt{background:transparent;border:1.5px solid var(--line,#e4ddd2);border-radius:999px;
  padding:4px 12px;font-family:inherit;font-size:12.5px;color:var(--body,#3c4a72);cursor:pointer;
  transition:border-color .15s,background .15s}
.bm-opt:hover{border-color:var(--navy,#0b2d72)}
.bm-opt.on{background:var(--navy,#0b2d72);border-color:var(--navy,#0b2d72);color:#fff}
.bm-opt.out{opacity:.4;cursor:default;text-decoration:line-through}
.bm-opt.out:hover{border-color:var(--line,#e4ddd2)}
.bm-vlabel{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;
  border:1px solid var(--line,#e4ddd2);font-size:var(--t-xs);color:var(--muted,#6b7699);vertical-align:middle}


/* ==========================================================================
   The phone's navigation, at the bottom
   ==========================================================================
   Wide screens keep the header they had: the nav, the search box, the language
   and dark buttons, Saved and the Bag are all up there and all in reach of a
   mouse. On a phone none of that is in reach of a thumb, so the four things a
   shopper reaches for move to the bottom of the screen and the header keeps
   the wordmark (which is home) and the burger.

   --bm-navh is how tall it is, declared where the bar exists so that the two
   bars that stick to the bottom of the product page and the checkout can sit
   ON it rather than under it, and so the page can leave room for it. Nothing
   outside a phone reads it. */
.bm-botnav { display: none; }

@media (max-width: 760px) {
  :root { --bm-navh: 58px; }
  /* Room at the end of the page, so the footer's last line is never under the
     bar. On the footer and not on the body: the body's background is the cream
     of the page, and padding there would have shown a cream strip under the
     navy footer, behind a bar that is half see-through. The footer is drawn on
     every page, so this is every page. */
  .bm-footer { padding-bottom: calc(28px + var(--bm-navh) + env(safe-area-inset-bottom, 0px)); }

  .bm-botnav { position: fixed; bottom: 0; inset-inline: 0; z-index: 60;
    display: flex; align-items: stretch;
    height: calc(var(--bm-navh) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--headbg); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border2); }
  .bm-bt { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-width: 0; padding: 0; border: none; background: none; cursor: pointer;
    font-family: inherit; color: var(--muted); -webkit-tap-highlight-color: transparent; }
  .bm-bt .ic { width: 22px; height: 22px; }
  .bm-bt-ic { position: relative; display: flex; }
  .bm-bt-l { font-size: var(--t-xs); line-height: 1; letter-spacing: .02em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The page you are on. Colour alone would not carry it, so the icon is
     filled as well — that is the part that reads at a glance. */
  .bm-bt.on { color: var(--brand); }
  .bm-bt.on .ic { stroke-width: 2.2; }
  .bm-bt:active { color: var(--brand); }
  /* A count, on the icon rather than beside the word: the words are already as
     wide as a quarter of a phone allows. */
  .bm-bt-n { position: absolute; top: -5px; inset-inline-start: 13px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--btn); color: var(--btnink); font-size: 10.5px; font-weight: 600; line-height: 1; }

  /* Saved and the Bag left the header for the bar; the wordmark and the burger
     are what is left, which is what a phone header should have been all along. */
  .bm-header-in > .bm-cart-btn, .bm-header-in > #bm-wishwrap { display: none; }

  /* The two bars that stick to the bottom of a page now stop above the nav
     instead of under it, and the nav pads the home indicator for both. */
  .bm-product-buy, .bm-paybar { bottom: calc(var(--bm-navh) + env(safe-area-inset-bottom, 0px)) !important; }
  .bm-product-buy { padding-bottom: 12px !important; }
  .bm-paybar { padding-bottom: 12px !important; }
  /* And the toast clears all of it. */
  .bm-toast { bottom: calc(var(--bm-navh) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ==========================================================================
   /shop — the full catalogue with filters
   ==========================================================================
   Desktop: a sidebar that stays put while the results scroll, so what you
   applied is still on screen when you want to change it.
   Mobile: the same panel as a full-height sheet with one apply button.
   Everything uses logical properties, so RTL needs no mirrored rules. */

.bm-facet { border-bottom: 1px solid var(--border2); }
.bm-facet:last-child { border-bottom: 0; }
.bm-facet > summary {
  cursor: pointer; list-style: none; padding: 15px 0; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; font-size: 15px;
}
.bm-facet > summary::-webkit-details-marker { display: none; }
.bm-facet > summary::after { content: '−'; color: var(--faint); font-size: 18px; }
.bm-facet:not([open]) > summary::after { content: '+'; }
.bm-facet-body { padding-bottom: 14px; }

.bm-facet-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer;
  border-radius: 8px; color: var(--body); font-size: 14px;
  min-height: 44px;                       /* thumb-sized, per the mobile guidance */
}
.bm-facet-row:hover { background: var(--surface2); }
.bm-facet-row input { inline-size: 17px; block-size: 17px; accent-color: var(--btn); flex: none; }
.bm-facet-label { flex: 1; }
.bm-facet-count { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.bm-facet-row.is-on { color: var(--ink); font-weight: 600; }
/* Shown, not hidden: an option that disappears mid-reach teaches nothing. */
.bm-facet-row.is-dead { opacity: .42; cursor: not-allowed; }
.bm-facet-row.is-dead:hover { background: none; }

/* ---- price ---- */
.bm-price-fields { display: flex; gap: 10px; margin: 4px 0 14px; }
.bm-price-fields label { flex: 1; display: block; }
.bm-price-fields span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.bm-price-fields input {
  inline-size: 100%; padding: 10px 11px; border: 1px solid var(--field); border-radius: 9px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 16px;
}
.bm-price-fields input:focus-visible { outline: 2px solid var(--btn); outline-offset: 1px; }

/* Two ranges stacked into one track. The thumbs take the pointer, the tracks
   do not, or the upper input would swallow every drag aimed at the lower one. */
.bm-range { position: relative; block-size: 26px; margin-bottom: 4px; }
.bm-range::before {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 11px;
  block-size: 4px; border-radius: 2px; background: var(--border3);
}
.bm-range input {
  position: absolute; inset-inline: 0; inset-block-start: 0; inline-size: 100%;
  margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.bm-range input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; inline-size: 18px; block-size: 18px;
  border-radius: 50%; background: var(--btn); border: 2px solid var(--surface); cursor: grab;
}
.bm-range input::-moz-range-thumb {
  pointer-events: auto; inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--btn); border: 2px solid var(--surface); cursor: grab;
}
.bm-range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }

/* ---- applied filters ---- */
.bm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bm-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border: 1px solid var(--border3); border-radius: 999px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.bm-chip:hover { border-color: var(--btn); }
.bm-chip .x { color: var(--faint); font-size: 16px; line-height: 1; }
.bm-chip-clear { background: none; border: 0; color: var(--btn); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 7px 4px; }

.bm-noresults .hint { color: var(--muted); font-size: 14px; margin: 8px 0 16px; }
.bm-tab-all { text-decoration: none; }

/* ---- the shop row ----
   One row under the heading: the category buttons, and at its end a Filter &
   sort button that opens the panel with the rest (app.js filtersHTML). On a
   phone the row holds on under the header while the products scroll past, so
   changing what is shown never means scrolling back up past the hero; the
   buttons scroll sideways and the Filter & sort button stays put. */
.bm-shopbar { display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.bm-filters-bar { flex:1; min-width:0; }
.bm-filter-btn { display:inline-flex; align-items:center; gap:8px; flex:none; margin-inline-start:auto;
  border:1.5px solid var(--border3); background:var(--surface); color:var(--ink); border-radius:999px;
  padding:9px 16px; min-height:40px; font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; }
.bm-filter-btn:hover { border-color:var(--btn); color:var(--btn); }
.bm-filter-btn .ic { width:17px; height:17px; }
.bm-filter-btn .short { display:none; }
.bm-filter-btn .n { display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--btn); color:var(--btnink); font-size:11.5px; font-weight:600; }
.bm-filter-btn .n[hidden] { display:none; }
@media (max-width: 760px) {
  .bm-shopbar {
    position: sticky; top: var(--bm-headh, 65px); z-index: 40;
    margin: 0 -18px 18px; padding: 10px 18px 10px 0; gap: 8px;
    background: var(--bg); border-block-end: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  [dir="rtl"] .bm-shopbar { padding: 10px 0 10px 18px; }
  /* Stuck under the header (app.js syncShopBar): a line and a shade, so the
     products are seen to pass under it rather than vanish into the page. */
  .bm-shopbar.is-stuck { border-block-end-color: var(--border); box-shadow: 0 10px 22px -18px rgba(11,26,61,.45); }
  /* position: relative for the same reason as .bm-vrow-track: this row
     scrolls sideways, and overflow can only clip what this rule is the
     containing block of. The fade at its end says there is more to swipe to. */
  .bm-filters-bar {
    position: relative;
    display: flex; flex-wrap: nowrap; gap: 8px; margin: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 0 18px; scroll-padding-inline: 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  [dir="rtl"] .bm-filters-bar {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
  }
  .bm-filters-bar::-webkit-scrollbar { display: none; }
  .bm-filters-bar .bm-tab { flex: none; min-height: 40px; padding: 8px 15px; font-size: 12px; white-space: nowrap; }
  .bm-filter-btn { padding: 8px 13px; font-size: 13px; }
  .bm-filter-btn .long { display: none; }
  .bm-filter-btn .short { display: inline; }
}

/* ---- the Filter & sort panel ----
   A .bm-drawer, so on a wide screen it is the bag's panel on the other side of
   the same page: the same width, the same head, the same way in and out. On a
   phone it comes up from the bottom instead, under the thumb that opened it,
   and leaves the top of the list showing so the change can be seen. */
.bm-sheet-body { flex: 1; overflow: auto; padding: 6px 24px 12px; overscroll-behavior: contain; }
.bm-sheet .bm-facet > summary { font-size: 15px; }
.bm-sortlist { border: 0; margin: 0; padding: 0; border-bottom: 1px solid var(--border2); }
.bm-sortlist legend { padding: 15px 0; font-weight: 600; color: var(--ink); font-size: 15px; }
.bm-sortlist .bm-facet-row { min-height: 42px; }
.bm-sortlist input { accent-color: var(--btn); inline-size: 17px; block-size: 17px; flex: none; margin: 0; }
.bm-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.bm-sheet-foot .bm-btn { flex: 1; max-width: 240px; }
@media (max-width: 760px) {
  .bm-drawer.bm-sheet, [dir="rtl"] .bm-drawer.bm-sheet {
    top: auto; bottom: 0; inset-inline: 0; width: 100%; max-height: 82svh;
    border-radius: 22px 22px 0 0; animation: bmSheetUp .3s cubic-bezier(.22,1,.36,1);
  }
  .bm-sheet .bm-drawer-head { padding: 16px 20px; }
  .bm-sheet-body { padding: 4px 20px 10px; }
  .bm-sheet-foot { padding-inline: 20px; }
}
@keyframes bmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ==========================================================================
   Shop polish (2026-09)
   ========================================================================== */

/* Drawn icons (app.js icon()), sized to the text they sit in. An arrow follows
   the reading direction: "back" points left in English and right in Arabic. */
.ic { width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; }
.ic.fill { fill:currentColor; }
.ic-back { transform:scaleX(-1); }
[dir="rtl"] .ic-back { transform:none; }
[dir="rtl"] .ic-fwd { transform:scaleX(-1); }
.bm-tab-all .ic { margin-inline-start:6px; }
.bm-back { display:inline-flex; align-items:center; gap:8px; }
.bm-wish-btn { display:inline-flex; align-items:center; justify-content:center; }
.bm-wish-btn .ic { width:20px; height:20px; }
.bm-wish-toggle .ic { width:19px; height:19px; }
.bm-icon-btn .ic { width:17px; height:17px; }
.bm-x .ic { width:20px; height:20px; }
.bm-qty button, .bm-quick-qty button { display:inline-flex; align-items:center; justify-content:center; }
.bm-qty .ic, .bm-quick-qty .ic { width:14px; height:14px; }
.rail-controls .ic { width:18px; height:18px; }
.rail-card .play-badge .ic { width:10px; height:10px; }
.bm-mini .ic { width:15px; height:15px; margin-inline-end:6px; vertical-align:-.25em; color:var(--brand); }
.bm-menu-nav a .ic { margin-inline-end:8px; }
.bm-menu .bm-search { width:auto; }
.bm-menu-row button .ic { width:18px; height:18px; vertical-align:-.25em; }

/* What used to be inline style="" in the templates. */
.bm-checkout-col { display:flex; flex-direction:column; gap:22px; }
.bm-pay-ic { display:flex; color:var(--brand); }
.bm-pay-ic .ic { width:28px; height:28px; }
.bm-pay-only { margin-top:12px; font-size:12.5px; color:var(--faint); }
.bm-success .check .ic { width:34px; height:34px; color:var(--btnink); stroke-width:2.2; }
.bm-success-cod { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  font-size:14px; color:var(--muted); margin-bottom:30px; }
.bm-success-cod .ic { width:18px; height:18px; color:var(--brand); }
.bm-success-cod strong { color:var(--brand); }

/* Checkout: each wrong field says why, details can be kept, and on a phone the
   total and the button stay on screen. */
.bm-field label { cursor:pointer; }
.bm-field-err { font-size:12.5px; line-height:1.45; color:var(--err); letter-spacing:0; }
/* Under the phone field: that an unfinished checkout may get a WhatsApp message. */
.bm-field-note { margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted); letter-spacing:0; }
.bm-remember { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 16px; margin-top:14px; font-size:13.5px; color:var(--body); }
.bm-remember label { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.bm-remember input { width:20px; height:20px; margin:0; flex:none; accent-color:var(--brand); }
.bm-remember button { background:none; border:none; padding:0; min-height:44px; font:inherit; font-size:13px; color:var(--brand); text-decoration:underline; cursor:pointer; }
.bm-dest .pin { display:flex; }
.bm-dest .pin .ic { width:17px; height:17px; color:var(--brand); }
.bm-paybar { display:none; }
@media (max-width:900px) {
  .bm-summary .place { display:none; }
  .bm-paybar { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:14px;
    margin:22px -28px -80px; padding:12px 28px calc(12px + env(safe-area-inset-bottom, 0px));
    background:var(--bg); border-top:1px solid var(--border2); box-shadow:0 -14px 30px -20px rgba(11,25,58,.4); }
  .bm-paybar-t { display:flex; flex-direction:column; gap:1px; font-size:12px; color:var(--muted); line-height:1.25; }
  .bm-paybar-t strong { font-size:17px; color:var(--brand); white-space:nowrap; }
  .bm-paybar .bm-btn { flex:1; padding:14px 0; }
}
@media (max-width:760px) {
  .bm-paybar { margin:22px -18px -60px; padding-inline:18px; }
}

/* After the order: what happens next, the number with a copy button, and
   Check my order with the order's progress. */
.bm-orderno { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 12px; }
.bm-copy { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; margin-inline-end:-10px;
  background:none; border:none; border-radius:999px; font:inherit; font-size:13px; color:var(--brand); cursor:pointer; }
.bm-copy:hover { background:var(--surface2); }
.bm-copy .ic { width:16px; height:16px; }
.bm-next { list-style:none; margin:22px auto 28px; padding:0; max-width:430px; display:flex; flex-direction:column; gap:10px; text-align:start; }
.bm-next li { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border2);
  border-radius:14px; padding:13px 16px; font-size:14.5px; line-height:1.5; color:var(--body); }
.bm-next li .ic { width:22px; height:22px; flex:none; color:var(--brand); }
.bm-next strong { color:var(--brand); white-space:nowrap; }
.bm-success-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.bm-success-actions .bm-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; text-decoration:none; }
.bm-success-actions .ic { width:18px; height:18px; }
.bm-footer-link { display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.bm-order { max-width:760px; }
.bm-order .bm-track { margin-top:22px; }
.bm-recent { margin-bottom:16px; font-size:12.5px; color:var(--muted); }
.bm-recent .bm-chips { margin:8px 0 0; }
.bm-chip.on { border-color:var(--brand); color:var(--brand); background:var(--surface2); }
.bm-recent .bm-chip { min-height:44px; padding-inline:16px; }
.bm-order-go { width:100%; padding:15px 0; margin-top:18px; }
.bm-track-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; margin-bottom:20px; }
.bm-track-h { font-family:var(--font-head); font-weight:400; font-size:20px; margin:0; color:var(--brand); outline:none; }
.bm-track-now { font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:5px 12px; border-radius:999px; background:var(--btn); color:var(--btnink); }
.bm-track-now.ended { background:var(--surface2); color:var(--err); }
.bm-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.bm-steps li { position:relative; display:flex; align-items:center; gap:12px; padding-bottom:20px; font-size:14.5px; color:var(--body); }
.bm-steps li:last-child { padding-bottom:0; }
.bm-steps li:not(:last-child)::before { content:''; position:absolute; inset-inline-start:11px; top:24px; bottom:0; width:2px; background:var(--border2); }
.bm-steps li.done:not(:last-child)::before { background:var(--brand); }
.bm-steps .dot { width:24px; height:24px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--border3); background:var(--bg); box-sizing:border-box; }
.bm-steps li.done .dot { background:var(--btn); border-color:var(--btn); }
.bm-steps .dot .ic { width:14px; height:14px; color:var(--btnink); stroke-width:2.4; }
.bm-steps li.todo { color:var(--faint); }
.bm-steps time { margin-inline-start:auto; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.bm-track-items { border-top:1px solid var(--border); margin-top:20px; padding-top:14px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--body); }
.bm-track-items .r { display:flex; justify-content:space-between; gap:12px; }
.bm-track-items .grand { margin-top:4px; font-size:16px; font-weight:700; color:var(--brand); }
.bm-quick-top { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.bm-soldout-btn { flex:1; opacity:.7; cursor:default; }
.bm-line-main { flex:1; min-width:0; }
.bm-line-ctl { display:flex; align-items:center; gap:10px; }
.bm-drawer-go { width:100%; padding:15px 0; }

/* Thumb-sized targets on phones and tablets: 44 px, the touch guideline. The
   header, card, bag and close buttons were 29–40 px. Desktop keeps its sizes. */
@media (max-width:1023px) {
  .bm-btn { min-height:44px; }
  .bm-wish-btn { min-width:44px; min-height:44px; }
  .bm-search input { min-height:44px; }
  .bm-search { padding-block:0; }
  .bm-remove { min-width:44px; }
  .bm-cart-btn { min-height:44px; }
  .bm-burger { width:44px; height:44px; }
  .bm-logo { min-height:44px; }
  .bm-tab { min-height:44px; }
  .bm-card-actions .bm-btn { min-height:44px; }
  .bm-wish-toggle { width:44px; height:44px; }
  .bm-x { min-width:44px; min-height:44px; }
  .bm-qty button { min-width:44px; min-height:44px; padding:0; }
  .bm-quick-qty button { min-width:44px; min-height:44px; padding:0 12px; }
  .bm-drawer-tabs button { min-height:48px; }
  .bm-remove { min-height:44px; padding:0 6px; }
  .bm-wish-line .add { min-height:44px; padding:0 18px; }
  .bm-back { min-height:44px; }
  .bm-news input, .bm-news button { min-height:44px; }
  .bm-menu-row button, .bm-menu .bm-search { min-height:44px; }
  .bm-filter-btn { min-height:44px; }
  .bm-price-fields input { min-height:44px; }
  .bm-hero-cta .primary, .bm-hero-cta .ghost, .bm-finder-opt { min-height:44px; }
  .bm-otp-links button, .bm-promo-x { min-height:44px; }
}

/* ==========================================================================
   Product views (public/shop-views.js), chosen in the dashboard per place.
   Built from the card's own parts, so a price, a sold-out mark or the heart
   looks the same whichever view the shop picked.
   ========================================================================== */

/* big — one large card per row on a phone, two on a tablet, three on a computer */
.bm-view-big { grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)); }
.bm-view-big .bm-card-media { aspect-ratio:1/1; }
@media (max-width:640px) { .bm-view-big { grid-template-columns:1fr; } }

/* list — one product per line */
.bm-view-list { display:flex; flex-direction:column; gap:12px; padding-bottom:40px; }
.bm-lrow { display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--border2); border-radius:16px; padding:10px; }
.bm-lrow .bm-card-media { aspect-ratio:1/1; border-radius:12px; }
.bm-lrow .bm-card-badge, .bm-lrow .bm-sold-badge { top:6px; inset-inline-start:6px; font-size:11px; padding:4px 8px; }
.bm-lrow .bm-wish-toggle { display:none; }        /* the row's photo is too small to put a button on */
.bm-lrow-body { min-width:0; display:flex; flex-direction:column; gap:4px; }
.bm-lrow-body h3 { font-family:var(--font-head); font-weight:400; font-size:17px; margin:0; color:var(--brand); cursor:pointer; }
.bm-lrow-body .bm-opts { margin:2px 0 0; }
.bm-lrow-act .bm-btn { white-space:nowrap; min-height:44px; }
.bm-lrow.is-sold .bm-card-media img { filter:grayscale(.5) opacity(.72); }
@media (max-width:520px) {
  .bm-lrow { grid-template-columns:80px 1fr; }
  /* An 80 px photo is mostly badge once "Bestseller" sits on it; sold out stays. */
  .bm-lrow .bm-card-badge { display:none; }
  .bm-lrow-act { grid-column:1 / -1; }
  .bm-lrow-act .bm-btn { width:100%; }
  .bm-lrow .bm-likes { display:none; }
}

/* rows — a row per category that swipes sideways */
.bm-view-rows { display:flex; flex-direction:column; gap:30px; padding-bottom:40px; }
.bm-vrow-h { font-family:var(--font-head); font-weight:400; font-size:22px; margin:0 0 12px; color:var(--brand); }
/* The row's name, and ‹ › for a mouse beside it: a finger swipes the row, so
   the buttons show only for a fine pointer, and only on a row wider than the
   page (app.js syncRows removes [hidden]). The same buttons as the lookbook's. */
.bm-vrow-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.bm-vrow-head .bm-vrow-h { margin:0; }
.bm-vrow-nav { display:none; gap:8px; flex:none; }
@media (hover:hover) and (pointer:fine) { .bm-vrow-nav:not([hidden]) { display:flex; } }
.bm-vrow-btn { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--border3); background:var(--surface);
  color:var(--brand); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s, opacity .2s; }
.bm-vrow-btn:hover:not(:disabled) { border-color:var(--brand); }
.bm-vrow-btn:disabled { opacity:.35; cursor:default; }
/* `position: relative` is load-bearing, not decoration.
   A strip is 5,000 px of cards behind a 354 px window, and `overflow-x: auto`
   is what keeps the other 4,600 px out of the page. But overflow only clips a
   descendant it is the CONTAINING BLOCK of, and a static element is nobody's
   containing block - so every absolutely positioned thing inside a card looked
   straight past this strip to the nearest positioned ancestor, #bm-root, and
   was laid out there. The screen-reader text beside each like (.bm-sr, 1 px
   wide) did exactly that: on the home page's five strips it put a hundred 1 px
   boxes at the cards' positions along the strip, in the PAGE's coordinates.
   The document went to 5,245 px against a 390 px screen, and the shop slid
   sideways out from under its own fixed header and bottom bar. One word makes
   this strip the containing block, so overflow can do its job. */
.bm-vrow-track { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw,300px); gap:18px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:12px;
  scrollbar-width:thin; }
.bm-vrow-item { scroll-snap-align:start; display:flex; }
.bm-vrow-item .bm-card { flex:1; }

/* tiles — square photos, name and price over them */
.bm-view-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; padding-bottom:40px; }
.bm-tile { position:relative; border-radius:16px; overflow:hidden; background:var(--surface2); }
.bm-tile .bm-card-media { aspect-ratio:1/1; }
.bm-tile .bm-card-media img.hover { display:none; }
.bm-tile-cap { position:absolute; inset-inline:0; bottom:0; padding:28px 14px 12px; pointer-events:none;
  background:linear-gradient(to top, rgba(11,26,61,.82), transparent); color:#fff;
  display:flex; justify-content:space-between; align-items:flex-end; gap:8px; }
.bm-tile-cap h3 { font-family:var(--font-head); font-weight:400; font-size:15px; margin:0; color:#fff; pointer-events:auto; cursor:pointer; }
.bm-tile-cap .bm-price { color:#fff; font-size:13.5px; }
.bm-tile-cap .bm-usd { color:rgba(255,255,255,.8); }
.bm-tile.is-sold .bm-card-media img { filter:grayscale(.5) opacity(.72); }
@media (max-width:640px) {
  .bm-view-tiles { grid-template-columns:repeat(3,1fr); gap:8px; }
  .bm-tile { border-radius:10px; }
  .bm-tile-cap { padding:22px 7px 7px; flex-direction:column; align-items:flex-start; gap:2px; }
  .bm-tile-cap h3 { font-size:12px; line-height:1.25; }
  .bm-tile-cap .bm-price { font-size:var(--t-xs); }
  /* A third of a phone is too small for a badge, a heart and a photo at once:
     the text badge goes (sold out stays), and the heart is drawn smaller with
     its touch area still 44 px. */
  .bm-tile .bm-card-badge { display:none; }
  .bm-tile .bm-sold-badge { top:6px; inset-inline-start:6px; font-size:11px; padding:3px 7px; }
  .bm-tile .bm-wish-toggle { top:4px; inset-inline-end:4px; width:30px; height:30px; }
  .bm-tile .bm-wish-toggle::after { content:''; position:absolute; inset:-7px; }
  .bm-tile .bm-wish-toggle .ic { width:15px; height:15px; }
}

/* spotlight — the first product large, the rest in a grid under it */
.bm-view-spotlight { display:flex; flex-direction:column; gap:26px; }
.bm-spot { display:grid; grid-template-columns:1.1fr .9fr; background:var(--surface); border:1px solid var(--border2);
  border-radius:22px; overflow:hidden; }
.bm-spot .bm-card-media { aspect-ratio:auto; min-height:420px; }
.bm-spot-body { padding:34px 32px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.bm-spot-body h3 { font-family:var(--font-head); font-weight:400; font-size:clamp(26px,3vw,36px); margin:0; color:var(--brand); cursor:pointer; }
.bm-spot-body .blurb { margin:0; font-size:15.5px; line-height:1.65; color:var(--body); }
.bm-spot-body .bm-price { font-size:22px; }
.bm-spot-body .bm-card-actions { margin-top:8px; }
.bm-spot.is-sold .bm-card-media img { filter:grayscale(.5) opacity(.72); }
.bm-spot-rest { padding-bottom:40px; }
@media (max-width:900px) {
  .bm-spot { grid-template-columns:1fr; }
  .bm-spot .bm-card-media { min-height:0; aspect-ratio:1/.9; }
  .bm-spot-body { padding:22px 20px 24px; }
}

/* magazine — wide rows, photo and words trading sides */
.bm-view-magazine { display:flex; flex-direction:column; gap:26px; padding-bottom:40px; }
.bm-mag { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--surface);
  border:1px solid var(--border2); border-radius:22px; overflow:hidden; }
.bm-mag.flip .bm-card-media { order:2; }
.bm-mag .bm-card-media { aspect-ratio:auto; min-height:340px; }
.bm-mag-body { padding:32px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.bm-mag-body h3 { font-family:var(--font-head); font-weight:400; font-size:clamp(22px,2.4vw,30px); margin:0; color:var(--brand); cursor:pointer; }
.bm-mag-body .blurb { margin:0; font-size:15px; line-height:1.65; color:var(--body); }
.bm-mag-body .bm-price { font-size:20px; }
.bm-mag.is-sold .bm-card-media img { filter:grayscale(.5) opacity(.72); }
@media (max-width:760px) {
  .bm-mag { grid-template-columns:1fr; }
  .bm-mag.flip .bm-card-media { order:0; }
  .bm-mag .bm-card-media { min-height:0; aspect-ratio:1/.86; }
  .bm-mag-body { padding:20px; }
}

/* ==========================================================================
   A product's own page (/store/p/<id>)
   ========================================================================== */
.bm-card-body h3 a, .bm-lrow-body h3 a, .bm-tile-cap h3 a, .bm-spot-body h3 a, .bm-mag-body h3 a {
  color:inherit; text-decoration:none; }
.bm-card-media[data-act="go-product"] { cursor:pointer; }
.bm-quick-more { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:14px; color:var(--brand); padding-block:10px; box-sizing:border-box; }
.bm-product { padding-top:32px; }
.bm-product-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px; align-items:start; margin-top:4px; }
.bm-pgal { position:relative; }
/* Same reason as .bm-vrow-track: a scroller that is not a containing block
   cannot clip what is absolutely positioned inside it. */
.bm-pgal-track { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; border-radius:22px; background:var(--surface2); scrollbar-width:none; }
.bm-pgal-track::-webkit-scrollbar { display:none; }
.bm-pgal-slide { scroll-snap-align:start; aspect-ratio:1/1; position:relative; }
.bm-pgal-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bm-pgal .bm-card-badge, .bm-pgal .bm-sold-badge { top:16px; inset-inline-start:16px; }
.bm-pgal-thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.bm-pgal-thumb { width:64px; height:64px; padding:0; border-radius:12px; overflow:hidden; border:2px solid transparent;
  background:var(--surface2); cursor:pointer; }
.bm-pgal-thumb.on { border-color:var(--brand); }
.bm-pgal-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* On a card, like the spotlight and magazine views: on the open page the drawn
   clouds ran behind the price, the quantity and the buttons. */
.bm-product-info { display:flex; flex-direction:column; gap:14px; background:var(--surface);
  border:1px solid var(--border2); border-radius:22px; padding:30px 32px; }
.bm-product-info .cat { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
[dir="rtl"] .bm-product-info .cat { letter-spacing:0; }
.bm-product-info h1 { font-family:var(--font-head); font-weight:400; font-size:clamp(28px,3.4vw,40px); line-height:1.2; margin:0; color:var(--brand); }
.bm-product-price { font-size:26px; font-weight:700; color:var(--brand); }
.bm-product-info .desc { margin:0; font-size:15.5px; line-height:1.7; color:var(--body); }
.bm-product-buy { display:flex; gap:12px; align-items:center; margin-top:6px; }
.bm-product-buy .add, .bm-product-buy .bm-soldout-btn { flex:1; padding:15px 0; }
.bm-product-facts { list-style:none; margin:6px 0 0; padding:14px 0 0; border-top:1px solid var(--border);
  display:grid; gap:10px; font-size:14px; color:var(--body); }
.bm-product-facts li { display:flex; align-items:center; gap:10px; }
.bm-product-facts .ic { width:20px; height:20px; color:var(--brand); }
.bm-product-tools { display:flex; gap:10px; flex-wrap:wrap; }
.bm-product-tools .bm-btn { display:inline-flex; align-items:center; gap:8px; }
.bm-product-tools .bm-btn.on { border-color:var(--brand); }
/* Delivery to a place the shopper picks, inline: the picker reads as part of
   the sentence ("Delivery to Baghdad · 5,000 IQD · 1–2 days"), not as a form. */
.bm-pdeliv { flex-wrap:wrap; }
.bm-pdeliv > span { display:inline; line-height:1.9; }
.bm-pdeliv b { color:var(--brand); font-weight:600; }
.bm-pgov { font:inherit; font-weight:600; color:var(--brand); background:transparent; cursor:pointer;
  border:0; border-bottom:1.5px dashed var(--border3); border-radius:0; padding:0 2px 1px;
  appearance:none; -webkit-appearance:none; max-width:14em; }
.bm-pgov:hover, .bm-pgov:focus-visible { border-bottom-color:var(--brand); outline:none; }

/* In the box / How to apply: two plain cards under the photo and the buy box,
   side by side where there is room. Checks for what is in it, numbers for the
   steps — the numbers in the heading face, so the steps read as a sequence. */
.bm-pdetails { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin-top:34px; }
.bm-pbox { background:var(--surface); border:1px solid var(--border2); border-radius:20px; padding:24px 26px; }
.bm-pbox h2 { font-family:var(--font-head); font-weight:400; font-size:22px; margin:0 0 14px; color:var(--brand); }
.bm-inbox, .bm-howto { list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:15px; line-height:1.55; color:var(--body); }
.bm-inbox li { display:flex; gap:10px; align-items:flex-start; }
.bm-inbox .ic { width:18px; height:18px; color:var(--brand); margin-top:3px; }
.bm-howto { counter-reset:step; }
.bm-howto li { counter-increment:step; display:flex; gap:14px; align-items:baseline; }
.bm-howto li::before { content:counter(step); flex:none; font-family:var(--font-head); font-size:22px; line-height:1;
  color:var(--brand); min-width:1.1em; text-align:center; }

.bm-product-more { margin-top:56px; }
.bm-product-more h2 { font-family:var(--font-head); font-weight:400; font-size:28px; margin:0 0 18px; color:var(--brand); }
.bm-product-gone { text-align:center; padding-block:80px; }
.bm-product-gone h1 { font-family:var(--font-head); font-weight:400; font-size:32px; color:var(--brand); margin:18px 0 10px; }
.bm-product-gone p { color:var(--body); margin:0 0 24px; }
@media (max-width:900px) {
  .bm-product-grid { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:760px) {
  .bm-product { padding-top:18px; }
  .bm-pgal-track { border-radius:16px; }
  .bm-product-info { padding:20px 18px 0; border-radius:16px; }
  /* On a phone the quantity and Add stay in reach while the words scroll. */
  .bm-product-buy { position:sticky; bottom:0; z-index:5; background:var(--bg);
    margin-inline:-18px; padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -10px 24px -18px rgba(11,25,58,.35); }
}

/* ==========================================================================
   Tap targets (audit fix list #28)
   The like button drew 27px tall and a product's name link 24px, against the
   ~44px a thumb needs. They look the same; an invisible margin around each
   takes the tap.
   ========================================================================== */
.bm-like { position:relative; }
.bm-like::after { content:""; position:absolute; inset:-9px -4px; }
.bm-card-body h3 a, .bm-lrow-body h3 a, .bm-tile-cap h3 a, .bm-spot-body h3 a, .bm-mag-body h3 a {
  position:relative; }
.bm-card-body h3 a::after, .bm-lrow-body h3 a::after, .bm-tile-cap h3 a::after,
.bm-spot-body h3 a::after, .bm-mag-body h3 a::after { content:""; position:absolute; inset:-10px -6px; }