/* ============================================================================
   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:#6a739a; --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;
  --cursor:#0b2d72;               /* custom cursor ring — brand navy */
  --cloud:rgba(190,206,242,.72);  /* drifting clouds (light theme) */
  --font-body:'Karla', sans-serif;
  --font-head:'Marcellus','Lateef', serif;
}
body.bm-dark {
  color-scheme: dark;
  --bg:#0b1022; --surface:#141b38; --surface2:#1a2348; --brand:#ccd8f6; --ink:#e8e2db; --body:#b6c0dd;
  --muted:#8d98bb; --faint:#6b7699; --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 */
  --cloud:rgba(150,178,235,.42);        /* clouds on the dark theme */
}

body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"] body, body[dir="rtl"] { --font-body:'Lateef','Karla', sans-serif; }
#bm-root[dir="rtl"] { font-family:'Lateef','Karla', sans-serif; }

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; }
.bm-skip { position:absolute; left:-9999px; top:0; z-index:300; background:var(--btn); color:var(--btnink);
  padding:10px 18px; border-radius:0 0 10px 0; }
.bm-skip:focus { left:0; }

:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

/* ---- 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);
  transition: width .25s, height .25s, 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 { width:64px; height:64px; 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; }
}

/* ============================================================ dark-mode cloud video */
#bm-cloud-video {
  position:fixed; inset:0; width:100%; height:100%;
  object-fit:contain;                                /* scaled down to fit, not cropped */
  background:#000;                                   /* black fills any exposed border */
  z-index:0; pointer-events:none; opacity:0; transition:opacity .6s ease;
}
body.bm-dark #bm-cloud-video { opacity:1; }         /* only shows in dark mode */

/* ============================================================ hand-sketched clouds */
#bm-clouds { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body.bm-dark #bm-clouds { display:none; }           /* dark mode uses the video instead */
#bm-root { position:relative; z-index:1; }         /* content sits above the background layers */
.cloud-wrap { position:absolute; will-change:transform; }
.cloud-wrap img {
  display:block; width:100%; height:auto;
  opacity:.5;                                      /* subtle ambient clouds on the cream sections */
  will-change:transform;
  animation-name:bmDrift; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; animation-direction:alternate; animation-duration:40s;
}
body.bm-dark .cloud-wrap img { opacity:.34; }
/* 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)); }
}

/* ============================================================ click ripple */
.bm-ripple {
  position:fixed; z-index:210; pointer-events:none; width:26px; height:26px;
  margin:-13px 0 0 -13px; border-radius:50%;
  border:3px solid var(--cursor);
  background:radial-gradient(circle, color-mix(in srgb, var(--cursor) 32%, transparent), transparent 66%);
  opacity:1; animation:bmRippleAnim .62s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes bmRippleAnim { from{ transform:scale(.3); opacity:1; } to{ transform:scale(5.4); opacity:0; } }

/* ============================================================ 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; }
.bm-mark { position:relative; width:38px; height:34px; display:inline-block; flex:none; }
.bm-mark .ring { position:absolute; left:14px; top:3px; width:26px; height:26px; border:2.5px solid var(--brand); border-radius:50%; }
.bm-mark .moon { position:absolute; left:0; top:0; width:32px; height:32px; background:var(--brand); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.bm-mark .star { width:13px; height:13px; background:var(--bg); clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%); }
.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%); }
.bm-logo-text { font-family:var(--font-head); letter-spacing:.32em; color:var(--brand); font-size:21px; white-space:nowrap; }

/* ============================================================ announcement */
.bm-announce { background:#0b2d72; color:#e8e2db; 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; }

/* ============================================================ 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); }
.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 span { color:var(--faint); font-size:14px; }
.bm-search input { border:none; outline:none; font-family:inherit; font-size:13.5px; width:100%; background:transparent; color:var(--ink); }
.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:'Lateef','Karla',serif; font-size:15px; font-weight:700; 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:10px;
  border-radius:999px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-family:'Karla',sans-serif; }
.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 */
.bm-hero { position:relative; min-height:calc(100vh - 110px); min-height:calc(100dvh - 110px);
  overflow:hidden; display:flex; align-items:center; justify-content:center; background:#0b1a3d; }
.bm-hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bm-hero-scrim { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,26,61,.45), rgba(11,26,61,.12) 40%, rgba(11,26,61,.55)); }
/* 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-kicker { position:absolute; top:28px; left:32px; right:auto; display:flex; align-items:center; gap:10px;
  color:#e8e2db; font-size:12px; letter-spacing:.28em; text-transform:uppercase; z-index:3; }
.bm-hero-kicker .bm-star { width:9px; height:9px; background:#e8e2db; }
.bm-hero-ar { position:absolute; top:24px; right:32px; left:auto; font-family:'Lateef',serif; font-size:24px; color:#e8e2db; margin:0; z-index:3; }
[dir="rtl"] .bm-hero-kicker { left:auto; right:32px; }
[dir="rtl"] .bm-hero-ar { right:auto; left:32px; }
.bm-hero-inner { position:relative; z-index:3; text-align:center; padding:0 28px; max-width:900px; }
.bm-hero-inner h1 { font-family:var(--font-head); font-weight:400; font-size:clamp(42px,5.2vw,72px);
  line-height:1.14; margin:0 0 14px; color:#fff; text-shadow:0 2px 30px rgba(11,26,61,.5); }
.bm-hero-inner p.sub { font-size:17px; line-height:1.6; color:#e8e2db; max-width:56ch; margin:0 auto 30px; text-shadow:0 1px 16px rgba(11,26,61,.6); }
.bm-hero-cta { display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; }
.bm-hero-cta .primary { background:#e8e2db; color:#0b2d72; border-radius:999px; padding:15px 32px; font-size:14px; letter-spacing:.1em; text-transform:uppercase; display:inline-block; }
.bm-hero-cta .primary:hover { background:#fff; opacity:1; }
.bm-hero-cta .ghost { border:1.5px solid #e8e2db; color:#e8e2db; border-radius:999px; padding:13.5px 28px; font-size:14px; letter-spacing:.1em; text-transform:uppercase; display:inline-block; backdrop-filter:blur(4px); }
.bm-hero-cta .ghost:hover { background:rgba(232,226,219,.15); opacity:1; }
.bm-hero-stats { position:absolute; bottom:0; left:0; right:0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(28px,6vw,80px); padding:18px 28px 22px; color:#e8e2db; font-size:13px; z-index:3;
  background:linear-gradient(to top, rgba(11,26,61,.55), transparent); text-align:center; }
.bm-hero-stats strong { display:block; font-family:var(--font-head); font-size:22px; color:#fff; }

/* ============================================================ 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; }

.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; }
.bm-card-media img.hover { opacity:0; }
.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:11px; 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:11px; 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-rating { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.bm-stars { color:var(--gold); letter-spacing:2px; }
.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; }
.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); }
.rail-card .media { position:relative; aspect-ratio:4/3; 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:11px; 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; }
.bm-about img { width:100%; 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 */
.bm-footer { background:var(--navy); color:var(--navymuted); padding:52px 28px 32px; }
.bm-footer-in { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.bm-footer .bm-logo-text { color:#e8e2db; }
.bm-footer .bm-mark .ring { border-color:#e8e2db; }
.bm-footer .bm-mark .moon { background:#e8e2db; }
.bm-footer .bm-mark .star { background:#0b2d72; }
.bm-footer p.blurb { margin:14px 0 0; font-size:14px; max-width:44ch; line-height:1.6; }
.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; background:transparent; border:none; outline:none; color:#e8e2db; font-family:inherit; font-size:14px; }
.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:32px auto 0; border-top:1px solid rgba(232,226,219,.28); padding-top:20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.06em; }
.bm-footer-base .ar { font-family:'Lateef',serif; font-size:17px; }

/* ============================================================ 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; }
.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; }
.bm-ship .bar > span { display:block; height:100%; background:var(--btn); border-radius:999px; transition:width .4s ease; }
.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:4px 10px; 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; }
.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); }
.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; }
.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:11.5px; 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:'Lateef',serif; font-size:20px; 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:0; margin-bottom:18px; }
.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:14.5px; background:var(--bg); color:var(--ink); outline:none; }
.bm-field input:focus { border-color:var(--brand); }
.bm-field input.err { border-color:#c0392b; }
.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 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:#c0392b; 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:11.5px; 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:14.5px; 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:#c0392b; }
.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; } }

/* 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:#c0392b; font-size:13px; }
.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; }

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

/* ============================================================ 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; }
}
@media (max-width:760px) {
  .bm-nav, .bm-search, .bm-desk-tools, .bm-wish-btn { display:none; }
  .bm-burger { display:flex; }
  .bm-header-in { padding:10px 14px; gap:10px; }
  .bm-logo-text { font-size:15px; }
  .bm-hero-ar { display:none; }
  .bm-hero { min-height:calc(100svh - 90px); }
  .bm-hero-stats { gap:18px; }
  .bm-section-pad { padding:36px 18px 8px; }
  .bm-about { grid-template-columns:1fr; padding:28px 18px 56px; gap:28px; }
  .bm-footer-in { grid-template-columns:1fr; }
  .bm-form-grid { grid-template-columns:1fr; }
  .bm-checkout { padding:30px 18px 60px; }
}

/* ============================================================ 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; }
  .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:11px;color:var(--muted,#6b7699);vertical-align:middle}