/* ==========================================================================
   Masoud Jewellery — storefront design system
   Ported from the Claude Design build (masoud-jewellery-design-system-c88fa77).
   Tokens first, then components, then views, then responsive.
   ========================================================================== */

/* ---------- Tokens: colour ------------------------------------------------ */
:root{
  --ink-1000:#000000; --ink-900:#0B0B0C; --ink-800:#121214; --ink-700:#191A1C;
  --ink-600:#232427;  --ink-500:#33343A; --ink-400:#4C4E56; --ink-300:#75777F;
  --ink-200:#A2A4AC;  --ink-100:#CFD0D5;

  --gold-700:#6E5320; --gold-600:#8F6E2B; --gold-500:#C9A24B; --gold-400:#DCBE79;
  --gold-300:#E9D6A6; --gold-200:#F2E7C9; --gold-100:#FAF4E4;

  --ivory-50:#FBF9F4; --ivory-100:#F4F0E7; --ivory-200:#E7E1D3;

  --sale-500:#B8462B; --sale-100:#F5DED6;
  --success-500:#3F7D5A; --success-100:#DCEBE2;
  --whatsapp-500:#25D366;

  --gold-sheen:linear-gradient(100deg,var(--gold-600) 0%,var(--gold-300) 38%,var(--gold-500) 58%,var(--gold-600) 100%);
  --scrim-bottom:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 35%,rgba(0,0,0,0) 100%);
  --scrim-top:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%);

  --surface-page:var(--ink-900);   --surface-raised:var(--ink-800);
  --surface-card:var(--ink-700);   --surface-inset:var(--ink-1000);
  --surface-light:var(--ivory-50); --surface-gold:var(--gold-500);
  --surface-overlay:rgba(6,6,7,.78);

  --text-primary:var(--ivory-50);  --text-secondary:var(--ink-200);
  --text-muted:var(--ink-300);     --text-gold:var(--gold-400);
  --text-on-gold:var(--ink-900);   --text-on-light:var(--ink-900);
  --text-sale:var(--sale-500);

  --border-hairline:rgba(233,214,166,.14); --border-subtle:var(--ink-600);
  --border-strong:var(--ink-500);          --border-gold:var(--gold-600);
  --border-focus:var(--gold-400);

  --action-primary:var(--gold-500); --action-primary-hover:var(--gold-400);
  --action-primary-press:var(--gold-600); --action-quiet:transparent;
  --action-quiet-hover:rgba(233,214,166,.08);
  --action-disabled:var(--ink-600); --text-disabled:var(--ink-400);
}

/* ---------- Tokens: type -------------------------------------------------- */
:root{
  --font-display:"Jost","Noto Sans Devanagari","Helvetica Neue",Arial,sans-serif;
  --font-body:"Manrope","Noto Sans Devanagari","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-arabic:"Noto Kufi Arabic","Jost",sans-serif;

  --text-display-xl:clamp(40px,6.2vw,88px);
  --text-display-l:clamp(32px,4.4vw,60px);
  --text-display-m:clamp(26px,3vw,34px);
  --text-heading-l:26px; --text-heading-m:20px; --text-heading-s:17px;
  --text-body-l:17px; --text-body-m:15px; --text-body-s:13px;
  --text-eyebrow:11px; --text-caption:12px;

  --leading-tight:1.04; --leading-snug:1.22; --leading-normal:1.5; --leading-loose:1.75;
  --weight-light:400; --weight-regular:500; --weight-medium:600;
  --weight-semibold:600; --weight-bold:700;

  --tracking-display:.10em; --tracking-heading:.06em; --tracking-eyebrow:.28em;
  --tracking-button:.16em;  --tracking-body:0;

  --type-body-m:var(--weight-regular) var(--text-body-m)/var(--leading-normal) var(--font-body);
}

/* ---------- Tokens: space, radius, elevation, motion ---------------------- */
:root{
  --space-0:0px;  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  --gutter:24px; --section-y:96px; --section-y-tight:64px;
  --container-max:1240px; --container-narrow:760px;
  --control-h-s:34px; --control-h-m:44px; --control-h-l:54px;

  --radius-none:0px; --radius-xs:2px; --radius-sm:3px; --radius-md:4px;
  --radius-lg:6px; --radius-pill:999px;
  --radius-card:var(--radius-sm); --radius-control:var(--radius-xs);
  --radius-image:var(--radius-none);

  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --shadow-md:0 8px 24px rgba(0,0,0,.55);
  --shadow-lg:0 24px 64px rgba(0,0,0,.65);
  --shadow-gold-glow:0 0 0 1px rgba(201,162,75,.35),0 12px 40px rgba(201,162,75,.12);
  --ring-focus:0 0 0 2px var(--ink-900),0 0 0 4px var(--gold-400);
  --blur-glass:saturate(1.1) blur(14px);

  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --ease-entrance:cubic-bezier(.16,1,.3,1);
  --duration-instant:90ms; --duration-fast:160ms; --duration-base:260ms;
  --duration-slow:520ms;
  --transition-control:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
  --transition-media:transform var(--duration-slow) var(--ease-standard),opacity var(--duration-base) var(--ease-standard);
  --lift-hover:translateY(-2px); --press-scale:scale(.985); --zoom-media:scale(1.045);
}

/* ==========================================================================
   Base — scoped to .mj-site so pages we do not own keep Astra's styling
   ========================================================================== */
html.mj-html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--ink-900)}
body.mj-body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body-m)}
body.mj-body *,body.mj-body *::before,body.mj-body *::after{box-sizing:border-box}
body.mj-body img{max-width:100%}
.mj-site{min-height:100vh;background:var(--surface-page);overflow-x:hidden}
/* :where() holds this at zero specificity, so an <a> carrying a component
   class — a button, a filter tag, a category tile — keeps that component's
   own colour instead of being repainted link-gold. Without it every solid
   button renders gold-on-gold. */
:where(.mj-site a){color:var(--text-gold);text-decoration:none;transition:var(--transition-control)}
:where(.mj-site a:hover){color:var(--gold-300)}
.mj-site ::selection{background:var(--gold-500);color:var(--text-on-gold)}
.mj-site *:focus-visible{outline:none;box-shadow:var(--ring-focus)}
/* Visually hidden rather than parked at left:-9999px — in RTL a far-negative
   offset extends the scrollable area and gives the whole page a horizontal
   scrollbar thousands of pixels wide. */
.mj-skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;z-index:100;
  background:var(--gold-500);color:var(--text-on-gold)}
.mj-skip:focus{position:fixed;inset-inline-start:var(--space-4);top:var(--space-4);
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
  padding:var(--space-3) var(--space-5)}
.mj-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.mj-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.mj-eyebrow{font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-gold)}
.mj-rule{height:1px;background:var(--border-hairline);border:0}
.mj-price{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mj-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Our components set display explicitly, which beats the UA [hidden] rule.
   Everything toggled with el.hidden needs this to actually disappear. */
.mj-site [hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){.mj-site *{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* Arabic / RTL — tracking collapses, Kufi replaces the Latin faces */
.mj-site[dir="rtl"]{font-family:var(--font-arabic)}
.mj-site[dir="rtl"] h1,.mj-site[dir="rtl"] h2,.mj-site[dir="rtl"] h3,.mj-site[dir="rtl"] p,
.mj-site[dir="rtl"] li,.mj-site[dir="rtl"] span,.mj-site[dir="rtl"] div,.mj-site[dir="rtl"] a,
.mj-site[dir="rtl"] button,.mj-site[dir="rtl"] label,.mj-site[dir="rtl"] input,
.mj-site[dir="rtl"] select,.mj-site[dir="rtl"] textarea{font-family:var(--font-arabic);letter-spacing:0 !important}
.mj-site[dir="rtl"] .mj-price,.mj-site[dir="rtl"] .mj-mono,
.mj-site[dir="rtl"] .mj-pricetag__was,.mj-site[dir="rtl"] .mj-pricetag__now,
.mj-site[dir="rtl"] .mj-ticker__v,.mj-site[dir="rtl"] .mj-headphone{font-family:var(--font-mono) !important}
.mj-site[dir="rtl"] .mj-mark{font-family:var(--font-display) !important;letter-spacing:.34em !important}
.mj-site[dir="rtl"] .mj-mark-sub{font-family:var(--font-body) !important;letter-spacing:.4em !important}
.mj-site[dir="rtl"] .mj-wa-float{right:auto;left:var(--space-8)}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Icon (lucide glyph as a CSS mask, so it inherits colour) ------------- */
.mj-icon{display:inline-block;flex:0 0 auto;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  width:18px;height:18px}

/* --- Button --------------------------------------------------------------- */
.mj-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  height:var(--control-h-m);padding:0 var(--space-6);font-size:12px;
  font-family:var(--font-body);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-button);text-transform:uppercase;
  border-radius:var(--radius-control);cursor:pointer;text-decoration:none;
  white-space:nowrap;border:1px solid transparent;
  transition:var(--transition-control),transform var(--duration-instant) var(--ease-standard)}
.mj-btn:active{transform:var(--press-scale)}
.mj-btn--s{height:var(--control-h-s);padding:0 var(--space-4);font-size:11px}
.mj-btn--l{height:var(--control-h-l);padding:0 var(--space-8);font-size:13px}
.mj-btn--full{width:100%}
.mj-btn--primary{background:var(--action-primary);color:var(--text-on-gold);border-color:var(--action-primary)}
.mj-btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--text-on-gold)}
.mj-btn--outline{background:transparent;color:var(--text-gold);border-color:var(--border-gold)}
.mj-btn--outline:hover{background:var(--action-quiet-hover);color:var(--gold-300);border-color:var(--gold-400)}
.mj-btn--ghost{background:transparent;color:var(--text-primary);border-color:transparent}
.mj-btn--ghost:hover{background:var(--action-quiet-hover);color:var(--text-primary)}
.mj-btn--light{background:var(--surface-light);color:var(--text-on-light);border-color:var(--surface-light)}
.mj-btn--light:hover{background:var(--ivory-200);color:var(--text-on-light)}
.mj-btn--whatsapp{background:var(--whatsapp-500);color:#06301A;border-color:var(--whatsapp-500)}
.mj-btn--whatsapp:hover{background:#37E077;color:#06301A}
.mj-btn[disabled],.mj-btn--disabled{background:var(--action-disabled);color:var(--text-disabled);border-color:var(--action-disabled);cursor:not-allowed}

/* --- IconButton ----------------------------------------------------------- */
.mj-iconbtn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-control);cursor:pointer;border:1px solid transparent;
  background:transparent;color:var(--text-primary);transition:var(--transition-control)}
.mj-iconbtn:hover{background:var(--action-quiet-hover);color:var(--gold-300)}
.mj-iconbtn--s{width:34px;height:34px}
.mj-iconbtn--s .mj-icon{width:16px;height:16px}
.mj-iconbtn--l{width:54px;height:54px}
.mj-iconbtn--l .mj-icon{width:22px;height:22px}
.mj-iconbtn--outline{border-color:var(--border-subtle)}
.mj-iconbtn--outline:hover{border-color:var(--gold-400)}
.mj-iconbtn--solid{background:var(--action-primary);color:var(--text-on-gold)}
.mj-iconbtn--solid:hover{background:var(--action-primary-hover);color:var(--text-on-gold)}

/* --- Badge ---------------------------------------------------------------- */
.mj-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--space-3);
  border:1px solid transparent;border-radius:var(--radius-xs);font-family:var(--font-body);
  font-size:10px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase}
.mj-badge--gold{background:var(--gold-500);color:var(--text-on-gold)}
.mj-badge--sale{background:var(--sale-500);color:var(--ivory-50)}
.mj-badge--outline{background:rgba(0,0,0,.5);color:var(--gold-300);border-color:var(--border-gold)}
.mj-badge--neutral{background:var(--ink-600);color:var(--text-secondary)}
.mj-badge--success{background:var(--success-500);color:var(--ivory-50)}

/* --- Tag (filter pill) ---------------------------------------------------- */
.mj-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:32px;
  padding:0 var(--space-4);border-radius:var(--radius-pill);cursor:pointer;
  background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle);
  font-family:var(--font-body);font-size:var(--text-body-s);font-weight:var(--weight-medium);
  letter-spacing:.04em;text-decoration:none;white-space:nowrap;transition:var(--transition-control)}
.mj-tag:hover{background:var(--action-quiet-hover);border-color:var(--gold-600);color:var(--text-secondary)}
.mj-tag--on{background:var(--gold-500);color:var(--text-on-gold);border-color:var(--gold-500)}
.mj-tag--on:hover{background:var(--gold-400);border-color:var(--gold-400);color:var(--text-on-gold)}

/* --- PriceTag ------------------------------------------------------------- */
.mj-pricetag{display:inline-flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.mj-pricetag__was{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  text-decoration:line-through;font-variant-numeric:tabular-nums}
.mj-pricetag__now{font-family:var(--font-mono);font-size:16px;font-weight:600;
  color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mj-pricetag__cur{font-family:var(--font-body);font-size:10px;letter-spacing:.14em;color:var(--text-muted)}
.mj-pricetag--sale .mj-pricetag__now{color:var(--text-gold)}
.mj-pricetag--s .mj-pricetag__was{font-size:10px}
.mj-pricetag--s .mj-pricetag__now{font-size:13px}
.mj-pricetag--s .mj-pricetag__cur{font-size:8px}
.mj-pricetag--l .mj-pricetag__was{font-size:18px}
.mj-pricetag--l .mj-pricetag__now{font-size:24px}
.mj-pricetag--l .mj-pricetag__cur{font-size:15px}
.mj-pricetag__ask{font-family:var(--font-body);font-size:var(--text-body-s);color:var(--text-gold);
  letter-spacing:.04em}
.mj-pricetag--l .mj-pricetag__ask{font-size:var(--text-body-m)}

/* --- RatingStars ---------------------------------------------------------- */
.mj-stars{display:inline-flex;align-items:center;gap:var(--space-2)}
.mj-stars__row{display:inline-flex;gap:2px}
.mj-stars__star{position:relative;display:inline-block;width:12px;height:12px}
.mj-stars__star .mj-icon{position:absolute;inset:0;width:100%;height:100%;color:var(--ink-500)}
.mj-stars__fill{position:absolute;inset:0;overflow:hidden}
.mj-stars__fill .mj-icon{color:var(--gold-400)}
.mj-stars__count{font-family:var(--font-body);font-size:var(--text-body-s);color:var(--text-muted)}

/* --- Card ----------------------------------------------------------------- */
.mj-card{background:var(--surface-card);color:var(--text-primary);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:var(--space-6);transition:transform var(--duration-base) var(--ease-standard),var(--transition-control)}
.mj-card--raised{background:var(--surface-raised)}
.mj-card--inset{background:var(--surface-inset)}
.mj-card--pad8{padding:var(--space-8)}
.mj-card--interactive:hover{border-color:var(--border-gold);box-shadow:var(--shadow-gold-glow);transform:var(--lift-hover)}

/* --- SectionHeading ------------------------------------------------------- */
.mj-sechead{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
  text-align:center;margin-bottom:var(--space-12)}
.mj-sechead__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.mj-sechead__eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-gold)}
.mj-sechead__eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.mj-sechead__title{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:var(--text-display-m);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.mj-sechead__caption{margin:0;font-family:var(--font-body);font-size:var(--text-body-m);color:var(--text-muted)}
.mj-sechead--split{flex-direction:row;align-items:flex-end;justify-content:space-between;text-align:left}
.mj-sechead--split .mj-sechead__inner{align-items:flex-start}
.mj-site[dir="rtl"] .mj-sechead--split{text-align:right}

/* --- Breadcrumb ----------------------------------------------------------- */
.mj-crumbs{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  font-family:var(--font-body);font-size:var(--text-body-s);color:var(--text-muted)}
.mj-crumbs a{color:var(--text-muted)}
.mj-crumbs a:hover{color:var(--gold-300)}
.mj-crumbs .mj-icon{width:13px;height:13px;color:var(--ink-400)}
.mj-site[dir="rtl"] .mj-crumbs .mj-icon{transform:scaleX(-1)}
.mj-crumbs__here{color:var(--text-secondary)}

/* --- Tabs ----------------------------------------------------------------- */
.mj-tabs{display:flex;gap:var(--space-8);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.mj-tab{position:relative;padding:0 0 var(--space-4);background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-body-s);font-weight:600;
  letter-spacing:var(--tracking-button);text-transform:uppercase;color:var(--text-muted);
  transition:var(--transition-control)}
.mj-tab:hover{color:var(--text-primary)}
.mj-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-base) var(--ease-standard)}
.mj-tab[aria-selected="true"]{color:var(--text-gold)}
.mj-tab[aria-selected="true"]::after{transform:scaleX(1)}
.mj-tabpanel[hidden]{display:none}

/* --- Form controls -------------------------------------------------------- */
.mj-field{display:block}
.mj-label{display:block;font-family:var(--font-body);font-size:var(--text-eyebrow);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)}
.mj-inputwrap{display:flex;align-items:center;gap:var(--space-3);height:var(--control-h-m);
  padding:0 var(--space-4);background:var(--surface-inset);border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);transition:var(--transition-control)}
.mj-inputwrap:focus-within{border-color:var(--border-focus)}
.mj-inputwrap input{flex:1;min-width:0;border:0;outline:none;background:transparent;
  color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body-m)}
.mj-inputwrap input::placeholder{color:var(--ink-400)}
.mj-textarea{width:100%;padding:var(--space-3) var(--space-4);background:var(--surface-inset);
  border:1px solid var(--border-subtle);border-radius:var(--radius-control);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--text-body-m);line-height:var(--leading-normal);
  outline:none;resize:vertical;transition:var(--transition-control)}
.mj-textarea::placeholder{color:var(--ink-400)}
.mj-textarea:focus{border-color:var(--border-focus)}
.mj-selectwrap{position:relative;display:flex;align-items:center;height:var(--control-h-m);
  background:var(--surface-inset);border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);transition:var(--transition-control)}
.mj-selectwrap:focus-within{border-color:var(--border-focus)}
.mj-selectwrap select{appearance:none;-webkit-appearance:none;flex:1;height:100%;
  padding:0 var(--space-10) 0 var(--space-4);background:transparent;border:0;outline:none;
  color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body-m);cursor:pointer}
.mj-selectwrap select option{background:#0B0B0C}
.mj-selectwrap .mj-icon{position:absolute;right:14px;pointer-events:none;color:var(--gold-400);width:16px;height:16px}
.mj-site[dir="rtl"] .mj-selectwrap select{padding:0 var(--space-4) 0 var(--space-10)}
.mj-site[dir="rtl"] .mj-selectwrap .mj-icon{right:auto;left:14px}
.mj-check{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;position:relative;
  font-family:var(--font-body);font-size:var(--text-body-m);color:var(--text-secondary)}
.mj-check input{position:absolute;opacity:0;width:0;height:0}
.mj-check__box{width:18px;height:18px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);background:var(--surface-inset);border:1px solid var(--border-strong);
  transition:var(--transition-control)}
.mj-check__box .mj-icon{width:12px;height:12px;opacity:0;color:var(--text-on-gold)}
.mj-check input:checked + .mj-check__box{background:var(--gold-500);border-color:var(--gold-500)}
.mj-check input:checked + .mj-check__box .mj-icon{opacity:1}
.mj-check input:focus-visible + .mj-check__box{box-shadow:var(--ring-focus)}
.mj-stepper{display:inline-flex;align-items:center;border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);background:var(--surface-inset)}
.mj-stepper button{width:40px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
.mj-stepper button:hover{color:var(--gold-300)}
.mj-stepper .mj-icon{width:14px;height:14px}
.mj-stepper input{width:34px;min-width:34px;text-align:center;background:transparent;border:0;outline:none;
  font-family:var(--font-mono);font-size:var(--text-body-m);color:var(--text-primary);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.mj-stepper input::-webkit-outer-spin-button,.mj-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* --- Gold rate ticker ----------------------------------------------------- */
.mj-ticker{display:flex;align-items:center;gap:var(--space-6);height:40px;padding:0 var(--space-6);
  background:var(--surface-inset);border-bottom:1px solid var(--border-hairline);
  font-family:var(--font-body);font-size:var(--text-body-s);color:var(--text-secondary);overflow:hidden}
.mj-ticker__label{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-eyebrow);
  font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--gold-400);white-space:nowrap}
.mj-ticker__dot{width:6px;height:6px;border-radius:50%;background:var(--gold-400);flex:0 0 auto}
.mj-ticker__rates{display:flex;gap:var(--space-8);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.mj-ticker__rates::-webkit-scrollbar{display:none}
.mj-ticker__rate{display:inline-flex;align-items:baseline;gap:var(--space-2);white-space:nowrap;
  opacity:.55;transition:opacity var(--duration-base) var(--ease-standard)}
.mj-ticker__rate.is-on{opacity:1}
.mj-ticker__k{letter-spacing:.1em;color:var(--text-muted)}
.mj-ticker__v{font-family:var(--font-mono);color:var(--text-primary);font-variant-numeric:tabular-nums}
.mj-ticker__d{font-size:11px;display:inline-flex;align-items:center;gap:2px;color:var(--success-500)}
.mj-ticker__d.is-down{color:var(--sale-500)}
.mj-ticker__d .mj-icon{width:12px;height:12px}
.mj-ticker__updated{color:var(--text-muted);white-space:nowrap}

/* --- Header --------------------------------------------------------------- */
.mj-headwrap{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mj-header{background:rgba(11,11,12,.86);border-bottom:1px solid var(--border-hairline);position:relative}
.mj-header__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.mj-nav{display:flex;gap:var(--space-8);flex:1;align-items:center}
.mj-nav a{font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1;
  text-transform:uppercase;padding-bottom:4px;letter-spacing:var(--tracking-button);
  color:var(--text-secondary);border-bottom:1px solid transparent}
.mj-nav a:hover{color:var(--gold-300)}
.mj-nav a.is-on{color:var(--gold-400);border-bottom-color:var(--gold-500)}
.mj-site[dir="rtl"] .mj-nav a{letter-spacing:0}
.mj-brand{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none}
.mj-brand:hover{color:inherit}
.mj-mark{font:400 20px/1 var(--font-display);letter-spacing:.34em;text-transform:uppercase;
  color:var(--ivory-50);padding-left:.34em}
.mj-mark-sub{font:600 8px/1 var(--font-body);letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold-500);padding-left:.4em}
.mj-brand img{display:block;max-height:44px;width:auto}
.mj-headact{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2)}
.mj-headphone{font:500 12px/1 var(--font-mono);color:var(--text-muted);
  margin-inline-end:var(--space-3);white-space:nowrap;direction:ltr}
.mj-langbtn{background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-control);
  height:34px;padding:0 var(--space-4);cursor:pointer;color:var(--text-secondary);
  font-family:var(--font-body);font-size:11px;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;transition:var(--transition-control)}
.mj-langbtn:hover{color:var(--gold-300);border-color:var(--gold-600)}
.mj-bagcount{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--gold-500);
  color:var(--text-on-gold);font:700 10px/18px var(--font-mono);text-align:center;
  margin-inline-start:-10px;position:relative;top:-10px}
.mj-bagcount[hidden]{display:none}
.mj-burger{display:none}

/* --- Hero ----------------------------------------------------------------- */
.mj-hero{position:relative;min-height:620px;display:flex;align-items:center;overflow:hidden}
.mj-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.42}
.mj-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.72) 45%,rgba(11,11,12,.30) 100%)}
.mj-site[dir="rtl"] .mj-hero__scrim{background:linear-gradient(270deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.72) 45%,rgba(11,11,12,.30) 100%)}
.mj-hero__body{position:relative;max-width:var(--container-max);margin:0 auto;
  padding:var(--space-24) var(--gutter);width:100%}
.mj-hero__col{max-width:660px;display:flex;flex-direction:column;gap:var(--space-6)}
.mj-hero__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-display-xl);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--ivory-50);text-wrap:pretty}
.mj-hero__lede{margin:0;max-width:520px;font:500 var(--text-body-l)/1.7 var(--font-body);color:var(--text-secondary)}
.mj-hero__badges{display:flex;gap:var(--space-3);flex-wrap:wrap}
.mj-hero__cta{display:flex;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap}
.mj-site[dir="rtl"] .mj-hero__title,.mj-site[dir="rtl"] .mj-sechead__title,
.mj-site[dir="rtl"] .mj-trust__title,.mj-site[dir="rtl"] .mj-shophead__title,
.mj-site[dir="rtl"] .mj-pdp__title,.mj-site[dir="rtl"] .mj-legal__title{letter-spacing:0}

/* --- USP strip ------------------------------------------------------------ */
.mj-usps{border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);
  background:var(--surface-inset)}
.mj-usps__grid{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr)}
.mj-usp{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-8) var(--space-6);
  border-inline-start:1px solid var(--border-hairline)}
.mj-usp .mj-icon{width:22px;height:22px;color:var(--gold-400)}
.mj-usp__t{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-s);
  line-height:1.3;letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.mj-usp__c{font:500 var(--text-body-s)/1.5 var(--font-body);color:var(--text-muted);margin-top:4px}

/* --- Sections ------------------------------------------------------------- */
.mj-section{padding:var(--section-y) 0}
.mj-section--bottom{padding:0 0 var(--section-y)}
.mj-section--raised{background:var(--surface-raised)}
.mj-section--shophead{padding:var(--space-10) 0 var(--space-12)}
.mj-section--pdp{padding:var(--space-10) 0 var(--section-y)}
.mj-section--page{padding:var(--space-12) 0 var(--section-y)}
.mj-railhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);
  margin-bottom:var(--space-12);flex-wrap:wrap}
.mj-railhead .mj-sechead{margin-bottom:0;flex:1}

/* --- Product grid + card -------------------------------------------------- */
.mj-grid{display:grid;gap:var(--space-6)}
.mj-grid--4{grid-template-columns:repeat(4,1fr)}
.mj-grid--3{grid-template-columns:repeat(3,1fr)}
.mj-cell{display:grid;grid-template-rows:1fr auto;gap:var(--space-2);height:100%}
.mj-cell__foot{display:flex;flex-direction:column;gap:var(--space-2)}
.mj-cell__spec{min-height:14px;font:500 11px/1.2 var(--font-mono);color:var(--gold-400)}
.mj-cell__acts{display:flex;gap:var(--space-2)}
.mj-cell__acts > *{flex:1}

.mj-pcard{display:flex;flex-direction:column;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;
  height:100%;position:relative;
  transition:transform var(--duration-base) var(--ease-standard),var(--transition-control)}
.mj-pcard:hover{border-color:var(--border-gold);transform:var(--lift-hover);box-shadow:var(--shadow-md)}
.mj-pcard__media{position:relative;aspect-ratio:1 / 1;overflow:hidden;background:var(--ink-800)}
.mj-pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:var(--transition-media)}
.mj-pcard:hover .mj-pcard__media img{transform:var(--zoom-media)}
.mj-pcard__badge{position:absolute;top:var(--space-3);inset-inline-start:var(--space-3);z-index:2}
.mj-pcard__quick{position:absolute;inset-inline-end:var(--space-3);bottom:var(--space-3);z-index:2;
  display:flex;gap:var(--space-2);opacity:0;transform:translateY(6px);
  transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.mj-pcard:hover .mj-pcard__quick,.mj-pcard:focus-within .mj-pcard__quick{opacity:1;transform:none}
.mj-pcard__quick .mj-iconbtn{background:rgba(0,0,0,.6)}
.mj-pcard__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.mj-pcard__cat{font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.mj-pcard__name{margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-s);
  letter-spacing:var(--tracking-heading);color:var(--text-primary);transition:var(--transition-control)}
.mj-pcard__name a{color:inherit}
.mj-pcard__name a::after{content:"";position:absolute;inset:0;z-index:1}
.mj-pcard:hover .mj-pcard__name{color:var(--gold-300)}
.mj-pcard__price{margin-top:var(--space-1)}
.mj-pcard__out{font:500 var(--text-body-s) var(--font-body);color:var(--text-muted)}

/* --- CategoryTile --------------------------------------------------------- */
/* One wide feature tile leads and the rest follow beneath it. Only categories
   holding stock get a tile, so the row has to close up rather than leave a hole
   where an empty category used to be. */
.mj-cats{display:flex;flex-direction:column;gap:var(--space-6)}
.mj-cats__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.mj-cats__row--1up{grid-template-columns:minmax(0,420px);justify-content:center}
.mj-cats__row--2up{grid-template-columns:repeat(2,1fr)}
.mj-cats__row--4up{grid-template-columns:repeat(4,1fr)}
.mj-cattile{position:relative;display:block;aspect-ratio:3 / 4;overflow:hidden;
  border-radius:var(--radius-card);background:var(--ink-800);text-decoration:none}
.mj-cattile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:var(--transition-media)}
.mj-cattile:hover img{transform:scale(1.06)}
.mj-cattile__scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.mj-cattile__ring{position:absolute;inset:0;box-shadow:inset 0 0 0 1px transparent;transition:var(--transition-control)}
.mj-cattile:hover .mj-cattile__ring{box-shadow:inset 0 0 0 1px var(--gold-500)}
.mj-cattile__body{position:absolute;inset-inline:var(--space-6);bottom:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-2)}
.mj-cattile__rule{height:1px;width:24px;background:var(--gold-500);transition:width var(--duration-base) var(--ease-standard)}
.mj-cattile:hover .mj-cattile__rule{width:56px}
.mj-cattile__t{font-family:var(--font-display);font-weight:400;font-size:var(--text-heading-l);
  letter-spacing:var(--tracking-heading);color:var(--ivory-50)}
.mj-cattile__c{font-family:var(--font-body);font-size:var(--text-body-s);color:var(--ink-100)}
.mj-cattile__go{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);
  font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:600;
  letter-spacing:var(--tracking-button);text-transform:uppercase;color:var(--gold-400);
  opacity:.65;transition:var(--transition-control)}
.mj-cattile:hover .mj-cattile__go{opacity:1}
.mj-cattile__go .mj-icon{width:14px;height:14px}
.mj-site[dir="rtl"] .mj-cattile__go .mj-icon{transform:scaleX(-1)}
/* How many pieces are actually in the category, so a tile never oversells. */
.mj-cattile__n{position:absolute;top:var(--space-5);inset-inline-end:var(--space-5);
  padding:7px 11px;border-radius:var(--radius-pill);background:rgba(10,10,10,.5);
  border:1px solid var(--border-hairline);backdrop-filter:blur(6px);
  font-family:var(--font-body);font-size:10px;font-weight:600;line-height:1;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ivory-100);
  transition:var(--transition-control)}
.mj-cattile:hover .mj-cattile__n{border-color:var(--border-gold);color:var(--gold-300)}
/* The lead tile is a landscape banner: its copy sits in the dark left third of
   the photograph, so it gets a side scrim on top of the usual bottom one. */
.mj-cattile--wide{aspect-ratio:24 / 9}
.mj-cattile--wide .mj-cattile__scrim{background:
  linear-gradient(90deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.6) 38%,rgba(8,8,8,.06) 70%),
  var(--scrim-bottom)}
/* The lead photograph is composed with its subject on one side, so it is
   mirrored in RTL to keep the empty half under the copy. */
.mj-site[dir="rtl"] .mj-cattile--wide img{transform:scaleX(-1)}
.mj-site[dir="rtl"] .mj-cattile--wide:hover img{transform:scaleX(-1) scale(1.06)}
.mj-site[dir="rtl"] .mj-cattile--wide .mj-cattile__scrim{background:
  linear-gradient(270deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.6) 38%,rgba(8,8,8,.06) 70%),
  var(--scrim-bottom)}
.mj-cattile--wide .mj-cattile__body{max-width:440px;gap:var(--space-3)}
.mj-cattile--wide .mj-cattile__t{font-size:var(--text-display-m);line-height:var(--leading-tight)}
.mj-cattile--wide .mj-cattile__c{font-size:var(--text-body-m)}

/* --- Trust / visit blocks ------------------------------------------------- */
.mj-split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-16);align-items:center}
.mj-trust{display:flex;flex-direction:column;gap:var(--space-5)}
.mj-trust__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-display-l);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-heading)}
.mj-trust__lede{margin:0;font:500 var(--text-body-l)/1.8 var(--font-body);color:var(--text-secondary)}
.mj-principles{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-4)}
.mj-principles li{display:flex;gap:var(--space-4);align-items:baseline;
  border-top:1px solid var(--border-hairline);padding-top:var(--space-4);flex-wrap:wrap}
.mj-principles__t{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-s);
  letter-spacing:var(--tracking-heading);color:var(--gold-400);min-width:150px}
.mj-principles__p{font:500 var(--text-body-m)/1.6 var(--font-body);color:var(--text-muted)}
.mj-trust__close{margin:0;font:500 var(--text-body-m)/1.8 var(--font-body);color:var(--text-secondary)}
.mj-trust__brand{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1;
  letter-spacing:var(--tracking-heading);color:var(--ivory-50)}
.mj-shotwrap{position:relative}
.mj-shotwrap img{width:100%;display:block;border-radius:var(--radius-card);border:1px solid var(--border-hairline)}
.mj-shotwrap__tag{position:absolute;inset-inline-start:-1px;bottom:-1px;padding:var(--space-4) var(--space-6);
  background:var(--surface-inset);border:1px solid var(--border-gold);font-family:var(--font-body);
  font-size:10px;font-weight:600;line-height:1;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--gold-400)}
/* Right-hand column of the about block: showroom photograph, then the owner. */
.mj-aside{display:flex;flex-direction:column;gap:var(--space-4)}
.mj-owner{margin:0;display:flex;align-items:center;gap:var(--space-5);
  padding:var(--space-4);background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:var(--radius-card)}
.mj-owner__img{width:132px;height:165px;flex:0 0 auto;display:block;object-fit:cover;
  object-position:center 22%;border:1px solid var(--border-gold);border-radius:var(--radius-card)}
.mj-owner__cap{display:flex;flex-direction:column;gap:var(--space-2)}
.mj-owner__name{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-m);
  letter-spacing:var(--tracking-heading);color:var(--ivory-50)}
.mj-owner__role{font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-400)}
.mj-site[dir="rtl"] .mj-owner__name{letter-spacing:0}

.mj-visit{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--space-6);align-items:stretch}
.mj-inforow{display:flex;gap:var(--space-3);align-items:flex-start;
  font:500 var(--text-body-m)/1.6 var(--font-body);color:var(--text-secondary)}
.mj-inforow .mj-icon{width:16px;height:16px;color:var(--gold-400);margin-top:3px}
.mj-map{width:100%;min-height:340px;border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  filter:grayscale(.6) invert(.92) hue-rotate(180deg) contrast(.9)}
.mj-map--s{min-height:300px}
.mj-infocard{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6)}
.mj-infocard__rows{display:flex;flex-direction:column;gap:var(--space-4)}

/* --- Shop ----------------------------------------------------------------- */
.mj-shophead{display:flex;flex-direction:column;gap:var(--space-6)}
.mj-shophead__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-display-l);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-heading)}
.mj-shophead__lede{margin:0;max-width:640px;font:500 var(--text-body-m)/1.7 var(--font-body);color:var(--text-muted)}
.mj-shoplayout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-12);align-items:start}
.mj-facets{position:sticky;top:150px;display:flex;flex-direction:column;gap:var(--space-8)}
.mj-facet{display:flex;flex-direction:column;gap:var(--space-4)}
.mj-facet__h{font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-400)}
.mj-facet__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.mj-sell{border-top:1px solid var(--border-hairline);padding-top:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-3)}
.mj-sell__t{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-s);
  letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.mj-sell__p{margin:0;font:500 var(--text-body-s)/1.6 var(--font-body);color:var(--text-muted)}
.mj-results{display:flex;flex-direction:column;gap:var(--space-6)}
.mj-results__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  border-bottom:1px solid var(--border-hairline);padding-bottom:var(--space-4);flex-wrap:wrap}
.mj-results__n{font:500 var(--text-body-s) var(--font-body);color:var(--text-muted)}
.mj-results__cat{font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.mj-empty{padding:var(--space-16) 0;text-align:center;color:var(--text-muted);
  font:500 var(--text-body-m) var(--font-body)}
.mj-pager{display:flex;gap:var(--space-2);justify-content:center;padding-top:var(--space-8);flex-wrap:wrap}
.mj-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-control);
  color:var(--text-secondary);font:600 var(--text-body-s) var(--font-body)}
.mj-pager .page-numbers.current{background:var(--gold-500);border-color:var(--gold-500);color:var(--text-on-gold)}
.mj-pager a.page-numbers:hover{border-color:var(--gold-400);color:var(--gold-300)}

/* --- Product detail ------------------------------------------------------- */
.mj-pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start}
.mj-pdp__media{position:relative;border:1px solid var(--border-hairline);background:var(--ink-800);
  aspect-ratio:1 / 1;overflow:hidden}
.mj-pdp__media img{width:100%;height:100%;object-fit:cover;display:block}
.mj-pdp__thumbs{display:flex;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap}
.mj-pdp__thumb{width:72px;height:72px;border:1px solid var(--border-hairline);background:var(--ink-800);
  padding:0;cursor:pointer;overflow:hidden;transition:var(--transition-control)}
.mj-pdp__thumb.is-on{border-color:var(--gold-500)}
.mj-pdp__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mj-pdp__col{display:flex;flex-direction:column;gap:var(--space-5)}
.mj-pdp__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-display-m);
  line-height:1.22;letter-spacing:var(--tracking-heading)}
.mj-pdp__badges{display:flex;gap:var(--space-2);flex-wrap:wrap}
.mj-pdp__blurb{margin:0;font:500 var(--text-body-m)/1.8 var(--font-body);color:var(--text-secondary)}
.mj-pdp__blurb p{margin:0 0 var(--space-3)}
.mj-pdp__acts{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--border-hairline);padding-top:var(--space-6)}
.mj-pdp__note{font:500 12px/1.6 var(--font-body);color:var(--text-muted)}
.mj-specs{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border-hairline);margin-top:var(--space-2)}
.mj-specs__row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;
  border-bottom:1px solid var(--border-hairline);font:500 var(--text-body-s) var(--font-body)}
.mj-specs__k{color:var(--text-muted);text-transform:uppercase;font-size:11px;font-weight:600;
  letter-spacing:var(--tracking-button)}
.mj-specs__v{color:var(--text-secondary);text-align:end}
.mj-tabwrap{margin-top:var(--space-20)}
.mj-tabbody{padding-top:var(--space-8);max-width:760px;display:flex;flex-direction:column;gap:var(--space-4)}
.mj-tabbody p{margin:0;font:500 var(--text-body-m)/1.8 var(--font-body);color:var(--text-secondary)}
.mj-related{margin-top:var(--space-24)}

/* --- Contact -------------------------------------------------------------- */
.mj-contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start}
.mj-contact__side{display:flex;flex-direction:column;gap:var(--space-6)}
.mj-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.mj-form__wide{grid-column:1 / -1}
.mj-sent{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.mj-sent .mj-icon{width:28px;height:28px;color:var(--gold-400)}
.mj-sent__h{margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-m);
  letter-spacing:var(--tracking-heading)}
.mj-formerr{grid-column:1 / -1;margin:0;padding:var(--space-3) var(--space-4);
  border:1px solid var(--sale-500);border-radius:var(--radius-control);
  background:rgba(184,70,43,.12);color:var(--ivory-50);font:500 var(--text-body-s) var(--font-body)}
.mj-socials{display:flex;gap:var(--space-2);padding-top:var(--space-2)}

/* --- Legal ---------------------------------------------------------------- */
.mj-legal{display:flex;flex-direction:column;gap:var(--space-5)}
.mj-legal__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-display-l);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-heading)}
.mj-legal__date{font:500 13px var(--font-mono);color:var(--text-muted)}
.mj-legal__intro{margin:0;font:500 var(--text-body-l)/1.8 var(--font-body);color:var(--text-secondary)}
.mj-legal__secs{display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-4)}
.mj-legal__sec{display:flex;flex-direction:column;gap:var(--space-3);
  border-top:1px solid var(--border-hairline);padding-top:var(--space-6)}
.mj-legal__sec h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-m);
  letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.mj-legal__sec p{margin:0;font:500 var(--text-body-m)/1.8 var(--font-body);color:var(--text-muted)}
.mj-legal__acts{display:flex;gap:var(--space-4);margin-top:var(--space-8);flex-wrap:wrap}

/* --- Footer --------------------------------------------------------------- */
.mj-footer{border-top:1px solid var(--border-hairline);background:var(--surface-inset)}
.mj-footer__grid{max-width:var(--container-max);margin:0 auto;
  padding:var(--space-16) var(--gutter) var(--space-8);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-12)}
.mj-footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.mj-footer__h{font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-400);
  margin-bottom:var(--space-2)}
.mj-footer__col p,.mj-footer__col a{margin:0;font:500 14px/1.7 var(--font-body);color:var(--text-muted)}
.mj-footer__col a:hover{color:var(--gold-300)}
.mj-footer__legal{max-width:var(--container-max);margin:0 auto;padding:var(--space-6) var(--gutter);
  border-top:1px solid var(--border-hairline);font:500 12px var(--font-body);color:var(--text-muted)}

/* --- Floating WhatsApp ---------------------------------------------------- */
.mj-wa-float{position:fixed;right:var(--space-8);bottom:var(--space-8);z-index:41;
  display:inline-flex;align-items:center;gap:var(--space-3);height:52px;padding:0 var(--space-5);
  border-radius:var(--radius-pill);background:var(--whatsapp-500);color:#06301A;text-decoration:none;
  font-family:var(--font-body);font-size:var(--text-body-s);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-button);text-transform:uppercase;box-shadow:var(--shadow-md);
  transition:var(--transition-control)}
.mj-wa-float:hover{background:#37E077;color:#06301A}
.mj-wa-float .mj-icon{width:20px;height:20px}
.mj-wa-float__label{max-width:0;overflow:hidden;white-space:nowrap;
  transition:max-width var(--duration-base) var(--ease-standard)}
.mj-wa-float:hover .mj-wa-float__label,.mj-wa-float:focus-visible .mj-wa-float__label{max-width:220px}

/* --- Enquiry drawer ------------------------------------------------------- */
.mj-drawer[hidden]{display:none}
.mj-drawer{position:fixed;inset:0;z-index:60;background:var(--surface-overlay);
  backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);
  display:flex;align-items:stretch;justify-content:flex-end;
  animation:mjFade var(--duration-base) var(--ease-entrance)}
.mj-site[dir="rtl"] .mj-drawer{justify-content:flex-start}
@keyframes mjFade{from{opacity:0}to{opacity:1}}
@keyframes mjSlide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.mj-drawer__panel{width:400px;max-width:100%;overflow:auto;background:var(--surface-raised);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);
  animation:mjSlide var(--duration-base) var(--ease-entrance);display:flex;flex-direction:column}
.mj-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-hairline)}
.mj-drawer__head h3{margin:0;font-family:var(--font-display);font-weight:500;
  font-size:var(--text-heading-m);letter-spacing:var(--tracking-heading)}
.mj-drawer__body{padding:var(--space-6);flex:1}
.mj-bagempty{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
  padding:var(--space-12) 0;color:var(--text-muted);text-align:center}
.mj-bagempty .mj-icon{width:28px;height:28px;color:var(--ink-400)}
.mj-baglist{display:flex;flex-direction:column;gap:var(--space-5)}
.mj-bagitem{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:var(--space-4);align-items:start}
.mj-bagitem__img{width:72px;height:72px;background-size:cover;background-position:center;
  border:1px solid var(--border-hairline)}
.mj-bagitem__col{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.mj-bagitem__n{font-family:var(--font-display);font-weight:500;font-size:var(--text-heading-s);
  letter-spacing:var(--tracking-heading)}
.mj-bagitem__c{font:500 12px var(--font-body);color:var(--text-muted)}
.mj-bagitem__s{font:500 11px var(--font-mono);color:var(--gold-400)}
.mj-bagfoot{display:flex;flex-direction:column;gap:var(--space-3);
  border-top:1px solid var(--border-hairline);margin-top:var(--space-8);padding-top:var(--space-6)}
.mj-bagfoot__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.mj-bagfoot__k{font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.mj-bagfoot__note{font:500 12px/1.5 var(--font-body);color:var(--text-muted);text-align:center}

/* --- Preview banner ------------------------------------------------------- */
.mj-preview{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--gold-500);
  color:var(--text-on-gold);font:600 12px/1.4 var(--font-body);letter-spacing:.04em;
  padding:var(--space-3) var(--space-6);display:flex;gap:var(--space-4);
  align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.mj-preview a{color:var(--ink-900);text-decoration:underline}
.mj-preview a:hover{color:var(--ink-900)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .mj-grid--4{grid-template-columns:repeat(3,1fr)}
  /* mj-shoplayout-minmax:start */
  /* The facet pill rows go nowrap + overflow-x:auto just below, but a plain
     `1fr` track is minmax(auto,1fr), so the track still sized itself to the
     widest pill row (503px at a 375px viewport). That pushed .mj-facets and
     .mj-results past the viewport, and .mj-site's overflow:hidden clipped the
     right-hand product column instead of scrolling it. Cap the track and let
     the two items shrink, so the pill rows scroll as intended. */
  .mj-shoplayout{grid-template-columns:minmax(0,1fr)}
  .mj-shoplayout>*{min-width:0}
  /* mj-shoplayout-minmax:end */
  .mj-cattile--wide{aspect-ratio:16 / 9}
  .mj-facets{position:static}
  .mj-facet__tags{overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--space-2)}
  .mj-split{grid-template-columns:1fr;gap:var(--space-10)}
  .mj-visit{grid-template-columns:1fr}
  .mj-usps__grid{grid-template-columns:repeat(2,1fr)}
  .mj-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
}
@media (max-width:860px){
  :root{--section-y:64px;--gutter:20px}
  .mj-pdp{grid-template-columns:1fr;gap:var(--space-8)}
  .mj-contact{grid-template-columns:1fr;gap:var(--space-8)}
  .mj-cats__row{grid-template-columns:repeat(2,1fr)}
  .mj-grid--4,.mj-grid--3{grid-template-columns:repeat(2,1fr)}
  .mj-hero{min-height:520px}
  .mj-hero__body{padding:var(--space-16) var(--gutter)}
  .mj-sechead--split{flex-direction:column;align-items:flex-start;text-align:left}
  .mj-headphone{display:none}
  .mj-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink-900);
    border-bottom:1px solid var(--border-hairline);flex-direction:column;align-items:stretch;
    gap:0;padding:var(--space-2) var(--gutter) var(--space-4);z-index:5}
  .mj-nav.is-open{display:flex}
  .mj-nav a{padding:var(--space-4) 0;border-bottom:1px solid var(--border-hairline);font-size:12px}
  .mj-nav a.is-on{border-bottom-color:var(--gold-500)}
  .mj-burger{display:inline-flex}
  .mj-header__inner{height:64px;gap:var(--space-3)}
  .mj-headact{gap:0}
  .mj-mark{font-size:17px}
  .mj-ticker{gap:var(--space-4);padding:0 var(--space-4)}
  .mj-ticker__updated{display:none}
  .mj-form{grid-template-columns:1fr}
  .mj-principles li{flex-direction:column;gap:var(--space-1)}
  .mj-principles__t{min-width:0}
  .mj-wa-float{right:var(--space-4);bottom:var(--space-4)}
  .mj-site[dir="rtl"] .mj-wa-float{left:var(--space-4)}
  .mj-tabwrap{margin-top:var(--space-12)}
  .mj-related{margin-top:var(--space-16)}
}
@media (max-width:520px){
  .mj-cats__row{grid-template-columns:1fr}
  .mj-cattile--wide{aspect-ratio:4 / 3}
  .mj-cattile--wide .mj-cattile__body{max-width:none}
  .mj-cattile--wide .mj-cattile__t{font-size:var(--text-heading-l)}
  .mj-grid--4,.mj-grid--3{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .mj-usps__grid{grid-template-columns:1fr}
  .mj-footer__grid{grid-template-columns:1fr}
  .mj-pcard__body{padding:var(--space-3)}
  .mj-cell__acts{flex-direction:column}
  .mj-ticker__label span:last-child{display:none}
  .mj-drawer__panel{width:100%}
  .mj-pdp__acts{gap:var(--space-3)}
  .mj-pdp__acts .mj-btn{flex:1 1 100%}
}

/* --- Language switcher ---------------------------------------------------- */
/* mj-lang-switcher:start */
.mj-lang{position:relative}
.mj-lang>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;
  -webkit-tap-highlight-color:transparent}
.mj-lang>summary::-webkit-details-marker{display:none}
.mj-lang>summary::marker{content:""}
.mj-lang>summary:focus-visible{box-shadow:var(--ring-focus);outline:none}
.mj-lang__code{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em}
.mj-lang__caret{width:12px;height:12px;transition:transform var(--duration-fast) var(--ease-standard)}
.mj-lang[open]>summary{color:var(--gold-300);border-color:var(--gold-600)}
.mj-lang[open] .mj-lang__caret{transform:rotate(180deg)}

.mj-lang__menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;
  min-width:184px;margin:0;padding:6px;list-style:none;
  background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);box-shadow:var(--shadow-md)}
.mj-lang__menu li{margin:0;padding:0}
.mj-lang__menu a{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding:9px 10px;border-radius:var(--radius-xs);
  text-decoration:none;white-space:nowrap;
  font-family:var(--font-body);font-size:var(--text-body-s);color:var(--text-secondary);
  transition:var(--transition-control)}
.mj-lang__menu a:hover,.mj-lang__menu a:focus-visible{background:var(--action-quiet-hover);color:var(--text-primary)}
.mj-lang__menu a.is-on{color:var(--gold-300)}
.mj-lang__menu a.is-on .mj-lang__tag{color:var(--gold-600)}
/* Every row is set in its own language, so the Arabic line reads right-to-left
   inside an otherwise left-to-right menu, and in its own face. */
.mj-lang__menu a[dir="rtl"] .mj-lang__name{font-family:var(--font-arabic)}
.mj-lang__tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:var(--text-muted)}

@media (max-width:520px){
  .mj-lang__menu{min-width:160px}
}
/* mj-lang-switcher:end */

/* --- Devanagari ----------------------------------------------------------- */
/* mj-lang-hi:start */
/* Devanagari hangs its vowel marks off the letter and joins conjuncts, so the
   wide tracking that gives Jost its couture feel pulls the script apart. Same
   treatment the Arabic block gets: keep the faces and sizes, drop the letter-
   spacing. */
.mj-html[lang="hi"] .mj-hero__title,
.mj-html[lang="hi"] .mj-sechead__title,
.mj-html[lang="hi"] .mj-trust__title,
.mj-html[lang="hi"] .mj-shophead__title,
.mj-html[lang="hi"] .mj-pdp__title,
.mj-html[lang="hi"] .mj-legal__title,
.mj-html[lang="hi"] .mj-cattile__t,
.mj-html[lang="hi"] .mj-owner__name{letter-spacing:0}
.mj-html[lang="hi"] .mj-eyebrow,
.mj-html[lang="hi"] .mj-sechead__eyebrow,
.mj-html[lang="hi"] .mj-pcard__cat,
.mj-html[lang="hi"] .mj-footer__h,
.mj-html[lang="hi"] .mj-facet__h,
.mj-html[lang="hi"] .mj-results__cat,
.mj-html[lang="hi"] .mj-owner__role,
.mj-html[lang="hi"] .mj-cattile__go,
.mj-html[lang="hi"] .mj-bagfoot__k,
.mj-html[lang="hi"] .mj-label{letter-spacing:.04em}
.mj-html[lang="hi"] .mj-nav a,
.mj-html[lang="hi"] .mj-btn,
.mj-html[lang="hi"] .mj-badge{letter-spacing:.02em}
/* The wordmark stays Latin whatever the page language, so it keeps its own. */
.mj-html[lang="hi"] .mj-mark{letter-spacing:.34em}
.mj-html[lang="hi"] .mj-mark-sub{letter-spacing:.4em}
/* Matras and conjuncts sit above and below the baseline, so lines that are
   tight enough for Latin caps start to collide. */
.mj-html[lang="hi"] .mj-hero__title{line-height:1.3}
.mj-html[lang="hi"] .mj-sechead__title,
.mj-html[lang="hi"] .mj-trust__title,
.mj-html[lang="hi"] .mj-shophead__title,
.mj-html[lang="hi"] .mj-pdp__title{line-height:1.35}
/* mj-lang-hi:end */

/* mj-recovery:start -------------------------------------------------------
   404, search results, and the generic page/archive view. These routes used
   to fall through to Astra, so nothing here existed before.
   ---------------------------------------------------------------------- */

.mj-nf__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center}
.mj-nf__code{font-family:var(--font-display);font-weight:400;line-height:1;
  font-size:clamp(64px,12vw,150px);letter-spacing:var(--tracking-display);
  color:var(--gold-500)}
/* The sheen is the brand's, but it is painted through the glyphs, so it only
   applies where the text stays visible without a background. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mj-nf__code{background:var(--gold-sheen);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.mj-nf__title{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:var(--text-display-m);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.mj-nf__lede{margin:0;max-width:52ch;font:500 var(--text-body-m)/1.75 var(--font-body);color:var(--text-muted)}
.mj-nf__acts{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
.mj-nf__help{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.mj-nf__none{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
  padding:var(--space-16) 0;text-align:center}
.mj-nf__nonetitle{margin:0;font-family:var(--font-display);font-weight:400;
  font-size:var(--text-display-m);letter-spacing:var(--tracking-heading);color:var(--text-primary)}

.mj-search{width:100%;max-width:520px}
.mj-search__row{display:flex;gap:var(--space-3)}
.mj-search__input{flex:1 1 auto;min-width:0;height:var(--control-h-m);padding:0 var(--space-4);
  background:var(--surface-inset);color:var(--text-primary);
  border:1px solid var(--border-subtle);border-radius:var(--radius-control);
  font:500 var(--text-body-m) var(--font-body);transition:var(--transition-control)}
.mj-search__input::placeholder{color:var(--text-muted)}
.mj-search__input:focus{outline:none;border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(220,190,121,.18)}
.mj-search__go{flex:0 0 auto}
.mj-search__head{margin:var(--space-6) 0 var(--space-10)}

.mj-prose{font:500 var(--text-body-m)/1.75 var(--font-body);color:var(--text-secondary)}
.mj-prose>*+*{margin-top:var(--space-5)}
.mj-prose h1,.mj-prose h2,.mj-prose h3,.mj-prose h4{font-family:var(--font-display);font-weight:400;
  color:var(--text-primary);letter-spacing:var(--tracking-heading);line-height:var(--leading-snug)}
.mj-prose h2{font-size:var(--text-heading-l)}
.mj-prose h3{font-size:var(--text-heading-m)}
.mj-prose h4{font-size:var(--text-heading-s)}
.mj-prose a{color:var(--text-gold);text-decoration:underline;text-underline-offset:3px}
.mj-prose img{max-width:100%;height:auto;border-radius:var(--radius-card)}
.mj-prose ul,.mj-prose ol{padding-inline-start:var(--space-6)}
.mj-prose li+li{margin-top:var(--space-2)}
.mj-prose blockquote{margin:0;padding-inline-start:var(--space-5);
  border-inline-start:2px solid var(--border-gold);color:var(--text-muted)}
/* Legacy content can carry a table wider than the column; let it scroll rather
   than push the page sideways. */
.mj-prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse}
.mj-prose th,.mj-prose td{padding:var(--space-3);text-align:start;border-bottom:1px solid var(--border-subtle)}

.mj-postlist{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:var(--space-6)}
.mj-postlist__item{padding-bottom:var(--space-6);border-bottom:1px solid var(--border-subtle)}
.mj-postlist__link{font-family:var(--font-display);font-weight:400;font-size:var(--text-heading-m);
  letter-spacing:var(--tracking-heading);color:var(--text-primary);text-decoration:none}
.mj-postlist__link:hover{color:var(--text-gold)}
.mj-postlist__ex{margin:var(--space-2) 0 0;font:500 var(--text-body-s)/1.7 var(--font-body);color:var(--text-muted)}

@media (max-width:720px){
  .mj-search__row{flex-direction:column}
  .mj-search__go{width:100%}
  .mj-nf__help{flex-direction:column;align-items:stretch}
}
/* mj-recovery:end */