/* ═══════════════════════════════════════════════════════════════════════════
   SHREEJI JEWELLERS — SITE DESIGN FOUNDATION  (Phase 3A)
   Premium jewellery showroom · deep maroon · warm ivory · muted champagne gold

   STATUS: foundation only. No page links this file yet, and nothing here changes
   any existing page. It sits NEXT TO public/css/theme.css (which stays untouched
   and keeps serving the current pages). Pages will opt in during Phase 3B/3C by
   adding <link rel="stylesheet" href="/css/site.css"> AFTER theme.css and the
   class "sj" on <body>.

   SAFETY RULES BUILT IN
   • Every class is prefixed  sj-   and every token  --sj-   → cannot collide with
     the legacy .btn / .card / .container / --accent-* rules in theme.css.
   • Base, typography and focus rules are scoped to  .sj  (opt-in), written with
     :where() so they carry zero specificity and are easy to override.
   • Mobile-first. Only min-width media queries: 768 / 1024 / 1440.
   • Minimum text size 12px; minimum interactive target 44px.

   CONTENTS
     1  Tokens            7  Buttons
     2  Reset / base      8  Forms
     3  Typography        9  Badges
     4  Container/layout 10  Cards (product · category · showroom · info · promo)
     5  Spacing utilities 11  States (alerts · skeleton · empty · spinner)
     6  (reserved)       12  Modal · Header · Showroom/map · Gold rate · Account
                         13  Accessibility    14  Responsive utilities    15  Motion
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════ */
:root {
    /* ── Colour: brand ── */
    --sj-maroon-900: #4A0F1A;
    --sj-maroon-800: #5E1520;       /* hover / pressed */
    --sj-maroon-700: #7A1F2B;       /* PRIMARY — same maroon the site already uses */
    --sj-maroon-100: #F3E4E6;       /* tint surfaces */
    --sj-maroon-50:  #FAF1F2;

    /* Champagne gold — an ACCENT, never a dominant fill.
       --sj-gold-500 is decorative only (hairlines, icons, selected edges, rate dot).
       Text that must be gold uses --sj-gold-700 (AA on ivory). */
    --sj-gold-700: #7A5C1E;
    --sj-gold-500: #B8975A;
    --sj-gold-300: #D9C79A;
    --sj-gold-100: #F4ECD8;

    /* ── Colour: surfaces & text ── */
    --sj-ivory:       #FAF7F2;      /* page background */
    --sj-sand:        #F3EDE3;      /* alternate section background */
    --sj-surface:     #FFFFFF;      /* cards, inputs, modals */
    --sj-charcoal:    #2B2420;      /* dark surfaces (footer, top bar) */
    --sj-text:        #2B2420;      /* 14.3:1 on ivory */
    --sj-text-soft:   #5A4F47;      /*  7.4:1 */
    --sj-text-muted:  #6B6058;      /*  5.7:1 on ivory, 5.2:1 on sand — AA */
    --sj-text-on-dark:       #FAF7F2;
    --sj-text-on-dark-muted: #C9C0B6; /* 8.5:1 on charcoal */

    /* ── Colour: borders ── */
    --sj-border:        #E4DCD0;    /* decorative hairlines */
    --sj-border-strong: #8C7F73;    /* form controls — 3.6:1 (WCAG non-text 3:1) */
    --sj-border-gold:   #D9C79A;

    /* ── Colour: status (every pair below is AA) ── */
    --sj-success:    #1B6B3F;  --sj-success-bg: #E6F3EA;
    --sj-warning:    #7A4B00;  --sj-warning-bg: #FFF3D6;
    --sj-error:      #A32B22;  --sj-error-bg:   #FBEAE8;
    --sj-info:       #2F5D7C;  --sj-info-bg:    #E8F0F6;

    /* ── Typography ──
       ONE serif + ONE sans for the whole public site AND the account area.
       Fallback chains deliberately include the fonts the site already loads today
       (DM Serif Display / Poppins) so nothing looks broken before the new fonts are
       self-hosted (see FONT STRUCTURE below). */
    --sj-font-display: 'Cormorant Garamond', 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --sj-font-ui:      'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Approved weights: Cormorant Garamond 400/500/600, Inter 400/500/600 (see FONT STRUCTURE). Never request a weight no loaded face has —
       the fallback serif (DM Serif Display) only exists at 400, so a 600 request would be a synthetic (fake) bold.
       --sj-weight-display-strong stays 500 until cormorant-garamond-600.woff2 is installed; then set it to 600. */
    --sj-weight-display: 500;
    --sj-weight-display-strong: 500;
    --sj-weight-regular: 400;
    --sj-weight-medium: 500;

    /* type scale (fluid, mobile-first; nothing under 12px) */
    --sj-text-display-xl: clamp(2.75rem, 1.6rem + 5vw, 5rem);       /* 44 → 80 */
    --sj-text-display-l:  clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);  /* 36 → 60 */
    --sj-text-h1:         clamp(2rem,    1.5rem + 2.2vw, 3rem);     /* 32 → 48 */
    --sj-text-h2:         clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); /* 26 → 36 */
    --sj-text-h3:         clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* 20 → 26 */
    --sj-text-body:       1rem;        /* 16 — comfortable on mobile */
    --sj-text-body-sm:    0.875rem;    /* 14 */
    --sj-text-caption:    0.75rem;     /* 12 — the floor */
    --sj-text-button:     0.9375rem;   /* 15 */
    --sj-text-price:      clamp(1rem, 0.94rem + 0.3vw, 1.25rem);        /* 16 → 20 */
    --sj-text-product-title: 0.9375rem;  /* 15, grows on tablet+ (see §10) */

    --sj-leading-tight: 1.15;
    --sj-leading-snug:  1.3;
    --sj-leading-body:  1.6;
    --sj-tracking-display: 0.005em;
    --sj-tracking-label:   0.14em;      /* uppercase eyebrows */
    --sj-tracking-button:  0.02em;

    /* ── Spacing: 4px base ── */
    --sj-space-1: 0.25rem;   /*  4 */
    --sj-space-2: 0.5rem;    /*  8 */
    --sj-space-3: 0.75rem;   /* 12 */
    --sj-space-4: 1rem;      /* 16 */
    --sj-space-6: 1.5rem;    /* 24 */
    --sj-space-8: 2rem;      /* 32 */
    --sj-space-12: 3rem;     /* 48 */
    --sj-space-16: 4rem;     /* 64 */
    --sj-space-20: 5rem;     /* 80 */
    --sj-space-24: 6rem;     /* 96 */

    --sj-section-y: var(--sj-space-12);          /* vertical rhythm between sections */

    /* ── Layout ── */
    --sj-gutter: var(--sj-space-4);              /* 16 mobile → 24 tablet → 32 desktop */
    --sj-container-max: 1280px;                  /* content width; header aligns to the same */
    --sj-header-h: 64px;
    --sj-topbar-h: 36px;

    /* ── Shape ── */
    --sj-radius-sm: 4px;
    --sj-radius-md: 8px;
    --sj-radius-lg: 12px;
    --sj-radius-xl: 16px;
    --sj-radius-pill: 999px;     /* ONLY status chips, small badges, filters */

    /* ── Elevation: soft, warm, never heavy black ── */
    --sj-shadow-soft:   0 1px 2px rgba(43, 36, 32, 0.05), 0 4px 16px rgba(43, 36, 32, 0.06);
    --sj-shadow-raised: 0 2px 4px rgba(43, 36, 32, 0.06), 0 12px 32px rgba(43, 36, 32, 0.12);

    /* ── Motion ── */
    --sj-dur-fast:   120ms;
    --sj-dur-normal: 200ms;
    --sj-dur-slow:   360ms;
    --sj-ease:       cubic-bezier(0.2, 0, 0, 1);

    /* ── Focus ── */
    --sj-focus-ring: 0 0 0 2px var(--sj-ivory), 0 0 0 4px var(--sj-maroon-700);
    --sj-focus-outline: 2px solid var(--sj-maroon-700);

    /* ── Hit area ── */
    --sj-hit: 44px;

    /* ── Z layers ── */
    --sj-z-header: 100;
    --sj-z-overlay: 900;
    --sj-z-modal: 1000;
}

@media (min-width: 768px) {
    :root {
        --sj-gutter: var(--sj-space-6);          /* 24 */
        --sj-section-y: var(--sj-space-16);      /* 64 */
        --sj-header-h: 72px;
        --sj-text-product-title: 1rem;
    }
}
@media (min-width: 1024px) {
    :root {
        --sj-gutter: var(--sj-space-8);          /* 32 */
        --sj-section-y: var(--sj-space-20);      /* 80 */
    }
}
@media (min-width: 1440px) {
    :root { --sj-section-y: var(--sj-space-24); }   /* 96 — content width stays capped */
}

/* ── FONT STRUCTURE (self-hosting) ─────────────────────────────────────────
   NOT ACTIVE. No font file is downloaded or requested by this file. To self-host
   (later, with approval): place WOFF2 subsets under public/fonts/ and un-comment.
   Approved set — exactly these six files (see public/fonts/README.md):
     cormorant-garamond-400.woff2   cormorant-garamond-500.woff2   cormorant-garamond-600.woff2
     inter-400.woff2                inter-500.woff2                inter-600.woff2
   Until then pages keep their current Google Fonts <link>, and the fallbacks in
   --sj-font-display / --sj-font-ui keep the layout stable. Activation checklist:
   1) add the files  2) un-comment the blocks below  3) set --sj-weight-display-strong to 600.

   @font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: normal; font-display: swap;
                src: url('/fonts/cormorant-garamond-400.woff2') format('woff2'); }
   @font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap;
                src: url('/fonts/cormorant-garamond-500.woff2') format('woff2'); }
   @font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap;
                src: url('/fonts/cormorant-garamond-600.woff2') format('woff2'); }
   @font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap;
                src: url('/fonts/inter-400.woff2') format('woff2'); }
   @font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap;
                src: url('/fonts/inter-500.woff2') format('woff2'); }
   @font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap;
                src: url('/fonts/inter-600.woff2') format('woff2'); }
   ─────────────────────────────────────────────────────────────────────── */


/* ═══ 2. RESET / BASE ═════════════════════════════════════════════════════
   <body class="sj"> is applied to every page that uses layouts/site.blade.php, including pages whose
   CONTENT still uses legacy styles. So the .sj base is deliberately minimal and safe: it does not touch
   margins, headings, paragraphs, lists or colours of legacy content.
   The full reset (typography, headings, p, ul) lives in .sj-scope — used by the shell (header, footer)
   and by pages as they are migrated in later phases. */
:where(.sj) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
:where(.sj ::selection) { background: var(--sj-maroon-100); color: var(--sj-maroon-900); }

/* full base — opt-in */
:where(.sj-scope) {
    font-family: var(--sj-font-ui);
    font-size: var(--sj-text-body);
    font-weight: var(--sj-weight-regular);
    line-height: var(--sj-leading-body);
    color: var(--sj-text-soft);
}
:where(.sj-scope *, .sj-scope *::before, .sj-scope *::after) { box-sizing: border-box; }
:where(.sj-scope img, .sj-scope svg, .sj-scope video, .sj-scope picture) { max-width: 100%; }
:where(.sj-scope img, .sj-scope video) { height: auto; }
:where(.sj-scope img) { display: block; }
:where(.sj-scope a) { color: inherit; text-decoration: none; }
:where(.sj-scope button, .sj-scope input, .sj-scope select, .sj-scope textarea) { font: inherit; color: inherit; }
:where(.sj-scope button) { cursor: pointer; }
:where(.sj-scope ul[class], .sj-scope ol[class]) { list-style: none; margin: 0; padding: 0; }
:where(.sj-scope p) { margin: 0; }


/* ═══ 3. TYPOGRAPHY ═══════════════════════════════════════════════════════ */
:where(.sj-scope) :where(h1, h2, h3, h4),
.sj-display-xl, .sj-display-l, .sj-h1, .sj-h2, .sj-h3 {
    font-family: var(--sj-font-display);
    font-weight: var(--sj-weight-display);
    color: var(--sj-text);
    line-height: var(--sj-leading-tight);
    letter-spacing: var(--sj-tracking-display);
    margin: 0;
    text-wrap: balance;
}
.sj-display-xl { font-size: var(--sj-text-display-xl); }
.sj-display-l  { font-size: var(--sj-text-display-l); }
.sj-h1 { font-size: var(--sj-text-h1); }
.sj-h2 { font-size: var(--sj-text-h2); }
.sj-h3 { font-size: var(--sj-text-h3); line-height: var(--sj-leading-snug); }
.sj-strong-display { font-weight: var(--sj-weight-display-strong); }   /* the only "bold" serif that exists */

.sj-body    { font-size: var(--sj-text-body); line-height: var(--sj-leading-body); }
.sj-body-sm { font-size: var(--sj-text-body-sm); line-height: 1.5; }
.sj-caption { font-size: var(--sj-text-caption); line-height: 1.4; color: var(--sj-text-muted); }
.sj-lead    { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--sj-text-soft); max-width: 60ch; }
.sj-muted   { color: var(--sj-text-muted); }

/* small uppercase label above a heading */
.sj-eyebrow {
    display: inline-block;
    font-family: var(--sj-font-ui);
    font-size: var(--sj-text-caption);
    font-weight: var(--sj-weight-medium);
    letter-spacing: var(--sj-tracking-label);
    text-transform: uppercase;
    color: var(--sj-maroon-700);
}

/* price + product title tokens (used by the Phase 3B card) */
.sj-price {
    font-family: var(--sj-font-display);
    font-size: var(--sj-text-price);
    font-weight: var(--sj-weight-display);      /* 500: exists in Cormorant; the DM Serif fallback has no bold, so never faux-bolded */
    color: var(--sj-maroon-700);
    line-height: 1.2;
    font-variant-numeric: lining-nums;
}
.sj-price--enquiry {                         /* "Price on request" */
    font-family: var(--sj-font-ui);
    font-size: var(--sj-text-body-sm);
    font-weight: var(--sj-weight-medium);
    color: var(--sj-text-muted);
}
.sj-product-title {
    font-family: var(--sj-font-ui);
    font-size: var(--sj-text-product-title);
    font-weight: var(--sj-weight-medium);
    line-height: 1.35;
    color: var(--sj-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);            /* equal card heights */
}
.sj-meta { font-size: var(--sj-text-body-sm); color: var(--sj-text-muted); }

/* a fine gold rule — the one "decorative" element */
.sj-rule { display: block; width: 48px; height: 1px; background: var(--sj-gold-500); border: 0; margin: var(--sj-space-4) 0; }
.sj-rule--center { margin-inline: auto; }


/* ═══ 4. CONTAINER / LAYOUT ═══════════════════════════════════════════════ */
/* One container for header AND page content, so their edges align. */
.sj-container {
    width: 100%;
    max-width: calc(var(--sj-container-max) + 2 * var(--sj-gutter));
    margin-inline: auto;
    padding-inline: var(--sj-gutter);
}
.sj-container--narrow { max-width: calc(760px + 2 * var(--sj-gutter)); }   /* policy / reading pages */

.sj-section { padding-block: var(--sj-section-y); }
.sj-section--sand { background: var(--sj-sand); }
.sj-section--dark { background: var(--sj-charcoal); color: var(--sj-text-on-dark-muted); }
.sj-section-head { display: grid; gap: var(--sj-space-3); margin-bottom: var(--sj-space-8); }
.sj-section-head--center { text-align: center; justify-items: center; }

/* Product grid — 2 columns on phones (4:5 images keep it compact), then 3, then 4. */
.sj-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sj-space-3);
}
@media (min-width: 768px)  { .sj-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sj-space-6); } }
@media (min-width: 1024px) { .sj-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sj-grid-2, .sj-grid-3 { display: grid; gap: var(--sj-space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px)  { .sj-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sj-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sj-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sj-stack > * + * { margin-top: var(--sj-stack-gap, var(--sj-space-4)); }
.sj-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-cluster-gap, var(--sj-space-3)); }


/* ═══ 5. SPACING UTILITIES (4px scale — no ad-hoc values) ═════════════════ */
.sj-mt-2 { margin-top: var(--sj-space-2); }   .sj-mt-4 { margin-top: var(--sj-space-4); }
.sj-mt-6 { margin-top: var(--sj-space-6); }   .sj-mt-8 { margin-top: var(--sj-space-8); }
.sj-mt-12 { margin-top: var(--sj-space-12); }
.sj-mb-2 { margin-bottom: var(--sj-space-2); } .sj-mb-4 { margin-bottom: var(--sj-space-4); }
.sj-mb-6 { margin-bottom: var(--sj-space-6); } .sj-mb-8 { margin-bottom: var(--sj-space-8); }
.sj-p-4 { padding: var(--sj-space-4); }       .sj-p-6 { padding: var(--sj-space-6); }
.sj-gap-2 { gap: var(--sj-space-2); }         .sj-gap-4 { gap: var(--sj-space-4); }
.sj-gap-6 { gap: var(--sj-space-6); }


/* ═══ 7. BUTTONS ══════════════════════════════════════════════════════════
   primary · secondary · outline · text · icon.   Flat colour (no gradients). */
.sj-btn {
    --_bg: transparent; --_fg: var(--sj-text); --_bd: transparent;
    --_bg-hover: var(--_bg); --_fg-hover: var(--_fg); --_bd-hover: var(--_bd);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sj-space-2);
    min-height: var(--sj-hit); padding: var(--sj-space-3) var(--sj-space-6);
    font-family: var(--sj-font-ui); font-size: var(--sj-text-button); font-weight: var(--sj-weight-medium);
    letter-spacing: var(--sj-tracking-button); line-height: 1.2; text-align: center; white-space: nowrap;
    color: var(--_fg); background: var(--_bg);
    border: 1px solid var(--_bd); border-radius: var(--sj-radius-md);
    transition: background-color var(--sj-dur-normal) var(--sj-ease), color var(--sj-dur-normal) var(--sj-ease),
                border-color var(--sj-dur-normal) var(--sj-ease), box-shadow var(--sj-dur-normal) var(--sj-ease);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer; text-decoration: none; user-select: none;
}
.sj-btn:hover  { color: var(--_fg-hover); background: var(--_bg-hover); border-color: var(--_bd-hover); }
.sj-btn:active { transform: translateY(1px); }

.sj-btn--primary   { --_bg: var(--sj-maroon-700); --_fg: #fff; --_bd: var(--sj-maroon-700); --_bg-hover: var(--sj-maroon-800); --_bd-hover: var(--sj-maroon-800); }
.sj-btn--primary:hover { box-shadow: var(--sj-shadow-soft); }
.sj-btn--secondary { --_bg: var(--sj-gold-100); --_fg: var(--sj-maroon-800); --_bd: var(--sj-gold-300); --_bg-hover: var(--sj-gold-300); --_bd-hover: var(--sj-gold-500); }
.sj-btn--outline   { --_bg: transparent; --_fg: var(--sj-maroon-700); --_bd: var(--sj-maroon-700); --_bg-hover: var(--sj-maroon-50); --_fg-hover: var(--sj-maroon-800); --_bd-hover: var(--sj-maroon-800); }
.sj-btn--text      { --_fg: var(--sj-maroon-700); --_fg-hover: var(--sj-maroon-900); padding-inline: var(--sj-space-2); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.sj-btn--text:hover { text-decoration-thickness: 2px; background: transparent; }
.sj-btn--on-dark   { --_bg: transparent; --_fg: var(--sj-text-on-dark); --_bd: rgba(250, 247, 242, 0.5); --_bg-hover: rgba(250, 247, 242, 0.1); --_bd-hover: var(--sj-text-on-dark); }

.sj-btn--sm    { padding: var(--sj-space-2) var(--sj-space-4); font-size: var(--sj-text-body-sm); }   /* still ≥ 44px tall (min-height) */
.sj-btn--lg    { padding: var(--sj-space-4) var(--sj-space-8); min-height: 52px; }
.sj-btn--block { display: flex; width: 100%; }

/* icon-only: 44×44 hit area, glyph size is up to the icon */
.sj-btn--icon, .sj-icon-btn {
    width: var(--sj-hit); height: var(--sj-hit); min-height: var(--sj-hit); padding: 0;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    color: var(--sj-text); background: transparent; border: 1px solid transparent; border-radius: var(--sj-radius-md);
    transition: background-color var(--sj-dur-normal) var(--sj-ease), color var(--sj-dur-normal) var(--sj-ease), border-color var(--sj-dur-normal) var(--sj-ease);
    cursor: pointer; position: relative;
}
.sj-btn--icon:hover, .sj-icon-btn:hover { background: var(--sj-maroon-50); color: var(--sj-maroon-700); }
.sj-btn--icon.is-active, .sj-icon-btn.is-active, .sj-icon-btn[aria-pressed="true"] { color: var(--sj-maroon-700); }
.sj-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sj-icon-btn[aria-pressed="true"] svg { fill: currentColor; }
.sj-icon-btn--surface { background: rgba(255, 255, 255, 0.92); border-color: var(--sj-border); }   /* over photos */

/* states */
.sj-btn:disabled, .sj-btn[aria-disabled="true"], .sj-btn.is-disabled {
    opacity: 1; cursor: not-allowed; transform: none; box-shadow: none;
    background: var(--sj-sand); color: var(--sj-text-muted); border-color: var(--sj-border);
}
.sj-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.sj-btn.is-loading::after {
    content: ""; position: absolute; width: 18px; height: 18px; inset: 0; margin: auto;
    border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%;
    animation: sj-spin 0.8s linear infinite;
}
.sj-btn--outline.is-loading::after, .sj-btn--secondary.is-loading::after, .sj-btn--text.is-loading::after {
    border-color: var(--sj-border); border-top-color: var(--sj-maroon-700);
}


/* ═══ 8. FORMS ════════════════════════════════════════════════════════════
   16px text on inputs so iOS Safari never zooms on focus; 44px min height. */
.sj-field { display: grid; gap: var(--sj-space-2); }
.sj-label { font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium); color: var(--sj-text); }
.sj-label .sj-req { color: var(--sj-error); margin-left: 2px; }
.sj-hint  { font-size: var(--sj-text-caption); color: var(--sj-text-muted); }

.sj-input, .sj-select, .sj-textarea {
    width: 100%; min-height: var(--sj-hit); padding: var(--sj-space-3) var(--sj-space-4);
    font-family: var(--sj-font-ui); font-size: 1rem; line-height: 1.4; color: var(--sj-text);
    background: var(--sj-surface); border: 1px solid var(--sj-border-strong); border-radius: var(--sj-radius-md);
    transition: border-color var(--sj-dur-fast) var(--sj-ease), box-shadow var(--sj-dur-fast) var(--sj-ease), background-color var(--sj-dur-fast) var(--sj-ease);
    -webkit-appearance: none; appearance: none;
}
.sj-textarea { min-height: 112px; resize: vertical; }
.sj-select {
    padding-right: var(--sj-space-12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6058' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--sj-space-4) center;
}
.sj-input::placeholder, .sj-textarea::placeholder { color: var(--sj-text-muted); opacity: 1; }
.sj-input:hover, .sj-select:hover, .sj-textarea:hover { border-color: var(--sj-text-soft); }
.sj-input:focus, .sj-select:focus, .sj-textarea:focus { outline: none; border-color: var(--sj-maroon-700); box-shadow: 0 0 0 3px var(--sj-maroon-100); }

.sj-input.is-invalid, .sj-select.is-invalid, .sj-textarea.is-invalid,
:where(.sj-input, .sj-select, .sj-textarea)[aria-invalid="true"] { border-color: var(--sj-error); background-color: var(--sj-error-bg); }
.sj-input.is-valid, .sj-select.is-valid, .sj-textarea.is-valid { border-color: var(--sj-success); }
.sj-error { font-size: var(--sj-text-body-sm); color: var(--sj-error); display: flex; gap: var(--sj-space-1); align-items: flex-start; }

.sj-input:disabled, .sj-select:disabled, .sj-textarea:disabled, .sj-input[readonly] {
    background: var(--sj-sand); color: var(--sj-text-muted); border-color: var(--sj-border); cursor: not-allowed;
}
.sj-field.is-loading .sj-input, .sj-input.is-loading {
    background-image: linear-gradient(90deg, transparent, rgba(184, 151, 90, 0.18), transparent);
    background-size: 200% 100%; animation: sj-shimmer 1.4s linear infinite;
}

/* checkbox & radio: a ≥44px tappable row; native control kept (accessible), recoloured */
.sj-check {
    display: flex; align-items: flex-start; gap: var(--sj-space-3); min-height: var(--sj-hit);
    padding: var(--sj-space-2) 0; cursor: pointer; font-size: var(--sj-text-body-sm); color: var(--sj-text);
}
.sj-check input[type="checkbox"], .sj-check input[type="radio"] {
    flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sj-maroon-700); cursor: pointer;
}
.sj-check:has(input:disabled) { color: var(--sj-text-muted); cursor: not-allowed; }

/* selectable option card (e.g. payment method radio) — visual only */
.sj-option {
    display: flex; gap: var(--sj-space-3); align-items: flex-start; padding: var(--sj-space-4);
    background: var(--sj-surface); border: 1px solid var(--sj-border-strong); border-radius: var(--sj-radius-lg);
    cursor: pointer; transition: border-color var(--sj-dur-normal) var(--sj-ease), background-color var(--sj-dur-normal) var(--sj-ease);
}
.sj-option:has(input:checked) { border-color: var(--sj-maroon-700); background: var(--sj-maroon-50); box-shadow: inset 0 0 0 1px var(--sj-maroon-700); }
.sj-option:has(input:disabled) { background: var(--sj-sand); color: var(--sj-text-muted); cursor: not-allowed; }
.sj-option input { accent-color: var(--sj-maroon-700); width: 20px; height: 20px; margin-top: 2px; flex: none; }
.sj-option__title { display: block; font-weight: var(--sj-weight-medium); color: var(--sj-text); }
.sj-option__text  { display: block; font-size: var(--sj-text-body-sm); color: var(--sj-text-muted); }


/* ═══ 9. BADGES ═══════════════════════════════════════════════════════════
   Small, 12px minimum, one per card. Pills ONLY for status/badges. */
.sj-badge {
    display: inline-flex; align-items: center; gap: var(--sj-space-1);
    padding: 2px var(--sj-space-2); min-height: 22px;
    font-family: var(--sj-font-ui); font-size: var(--sj-text-caption); font-weight: var(--sj-weight-medium);
    line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap;
    color: var(--sj-text); background: var(--sj-sand); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-sm);
}
.sj-badge--new         { color: var(--sj-success); background: var(--sj-success-bg); border-color: transparent; }
.sj-badge--bestseller  { color: var(--sj-gold-700); background: var(--sj-gold-100); border-color: var(--sj-gold-300); }
.sj-badge--sale        { color: #fff; background: var(--sj-maroon-700); border-color: transparent; }
.sj-badge--limited     { color: var(--sj-warning); background: var(--sj-warning-bg); border-color: transparent; }
.sj-badge--in-stock    { color: var(--sj-success); background: var(--sj-success-bg); border-color: transparent; }
.sj-badge--out-of-stock{ color: var(--sj-text-muted); background: var(--sj-sand); border-color: var(--sj-border); }
.sj-badge--made-to-order { color: var(--sj-info); background: var(--sj-info-bg); border-color: transparent; }
.sj-badge--status      { border-radius: var(--sj-radius-pill); padding-inline: var(--sj-space-3); }
.sj-badge--success { color: var(--sj-success); background: var(--sj-success-bg); border-color: transparent; }
.sj-badge--warning { color: var(--sj-warning); background: var(--sj-warning-bg); border-color: transparent; }
.sj-badge--error   { color: var(--sj-error);   background: var(--sj-error-bg);   border-color: transparent; }
.sj-badge--info    { color: var(--sj-info);    background: var(--sj-info-bg);    border-color: transparent; }
.sj-badge-count {                                  /* the little number on wishlist / cart icons */
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--sj-text-caption); font-weight: var(--sj-weight-medium); line-height: 1;
    color: #fff; background: var(--sj-maroon-700); border-radius: var(--sj-radius-pill);
}

/* filters / chips — pill is appropriate here */
.sj-chip {
    display: inline-flex; align-items: center; gap: var(--sj-space-2); min-height: var(--sj-hit); padding: 0 var(--sj-space-4);
    font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); background: var(--sj-surface);
    border: 1px solid var(--sj-border-strong); border-radius: var(--sj-radius-pill); cursor: pointer;
    transition: all var(--sj-dur-normal) var(--sj-ease);
}
.sj-chip:hover { border-color: var(--sj-maroon-700); color: var(--sj-maroon-700); }
.sj-chip[aria-pressed="true"], .sj-chip.is-selected { color: var(--sj-maroon-800); background: var(--sj-maroon-50); border-color: var(--sj-maroon-700); }


/* ═══ 10. CARDS ═══════════════════════════════════════════════════════════ */
.sj-card {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-lg);
    box-shadow: none; overflow: hidden;
    transition: box-shadow var(--sj-dur-normal) var(--sj-ease), border-color var(--sj-dur-normal) var(--sj-ease);
}
.sj-card--raised { box-shadow: var(--sj-shadow-soft); }
.sj-card__media { position: relative; display: block; background: var(--sj-sand); overflow: hidden; }
.sj-card__body  { display: flex; flex-direction: column; gap: var(--sj-space-2); padding: var(--sj-space-3); flex: 1; }
.sj-card__foot  { padding: 0 var(--sj-space-3) var(--sj-space-3); }

/* ── Product card (Phase 3B) ──
   ONE card for home, shop, wishlist and related products — markup lives only in
   resources/views/components/product-card.blade.php.
   image 4:5 → ONE badge → wishlist → title (2 lines) → price → metadata → Buy Now + contact icon.
   Hooks that MUST stay on the markup: data-buy-now, data-product-*, data-wishlist-toggle
   (the Buy Now modal and wishlist scripts bind to them; the wishlist script toggles .active). */
.sj-product-card { position: relative; }
.sj-product-card__media { aspect-ratio: 4 / 5; }          /* matches the 1080×1350 source photos — no square crop */
.sj-product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sj-product-card__badge { position: absolute; top: var(--sj-space-2); left: var(--sj-space-2); z-index: 1; pointer-events: none; }

/* wishlist: 44px hit area · 32px visible disc · 18px icon (outline → filled when saved) */
.sj-product-card__wishlist {
    position: absolute; top: 0; right: 0; z-index: 2; width: var(--sj-hit); height: var(--sj-hit); padding: 0;
    border: 0; background: transparent; color: var(--sj-text-soft); cursor: pointer;
}
.sj-product-card__wishlist::before {
    content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 3px rgba(43, 36, 32, 0.18); transition: background-color var(--sj-dur-normal) var(--sj-ease);
}
.sj-product-card__wishlist svg { position: relative; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sj-product-card__wishlist:hover { background: transparent; color: var(--sj-maroon-700); }
.sj-product-card__wishlist.active, .sj-product-card__wishlist[aria-pressed="true"] { color: var(--sj-maroon-700); }
.sj-product-card__wishlist.active svg, .sj-product-card__wishlist[aria-pressed="true"] svg { fill: currentColor; }

.sj-product-card .sj-card__body { padding: 10px 10px 4px; gap: 4px; }
.sj-product-title a { color: inherit; letter-spacing: 0; }
.sj-product-title a:hover { color: var(--sj-maroon-700); }
.sj-product-title { letter-spacing: 0; }
.sj-product-card__price-row { display: flex; align-items: center; gap: var(--sj-space-2); margin-top: 2px; min-height: 24px; }   /* same row height for a price and "Price on Request" → metadata lines align across cards */
.sj-product-card__price-row .sj-price, .sj-product-card__price-row .sj-price--enquiry { line-height: 1.2; white-space: nowrap; }
.sj-product-card__price-row .sj-price--enquiry { font-size: 0.8125rem; }
@media (min-width: 768px) { .sj-product-card__price-row .sj-price--enquiry { font-size: var(--sj-text-body-sm); } }
.sj-product-card__meta { min-height: 1.35em; font-size: 0.8125rem; line-height: 1.35; color: var(--sj-text-muted); }   /* "22KT · 10.5 g" — reserved so heights align */

.sj-product-card__actions { display: flex; align-items: center; gap: 6px; padding: 6px 10px 10px; }
.sj-product-card__buy { flex: 1; min-width: 0; padding: 0 var(--sj-space-2); font-size: 0.8125rem; letter-spacing: 0; }
.sj-product-card__contact {
    flex: none; width: var(--sj-hit); height: var(--sj-hit); display: inline-flex; align-items: center; justify-content: center;
    color: var(--sj-maroon-700); background: transparent; border: 1px solid var(--sj-border-strong); border-radius: var(--sj-radius-md);
    transition: background-color var(--sj-dur-normal) var(--sj-ease), border-color var(--sj-dur-normal) var(--sj-ease);
}
.sj-product-card__contact:hover { background: var(--sj-maroon-50); border-color: var(--sj-maroon-700); }
.sj-product-card__contact svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* the whole card is one tap target: the title link is stretched over the card; wishlist and actions sit above it */
.sj-product-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--sj-radius-lg); }
.sj-product-card__actions { position: relative; z-index: 2; }
.sj-product-card .sj-product-title a:focus-visible { outline: none; }
.sj-product-card .sj-product-title a:focus-visible::after { outline: var(--sj-focus-outline); outline-offset: -2px; }

/* very narrow phones (320–359): same layout, tighter padding so "Buy Now" never clips */
@media (max-width: 359px) {
    .sj-product-card .sj-card__body { padding: 8px 8px 4px; }
    .sj-product-card__actions { padding: 6px 8px 8px; gap: 4px; }
    .sj-product-card__buy { padding: 0 2px; font-size: var(--sj-text-caption); }
}

/* keyboard focus works on the card without the page opting into the .sj base scope */
.sj-product-card a:focus-visible, .sj-product-card button:focus-visible,
.sj-btn:focus-visible, .sj-icon-btn:focus-visible, .sj-chip:focus-visible, .sj-branch-tab:focus-visible {
    outline: var(--sj-focus-outline); outline-offset: 2px;
}

@media (min-width: 768px) {
    .sj-product-card .sj-card__body { padding: 14px 14px 4px; gap: 6px; }
    .sj-product-card__actions { padding: 8px 14px 14px; gap: 8px; }
    .sj-product-card__buy { padding: 0 var(--sj-space-4); font-size: 0.875rem; }
    .sj-product-card__meta { font-size: 0.875rem; }
}
@media (hover: hover) {                                    /* subtle, hover-capable devices only */
    .sj-product-card { transition: border-color var(--sj-dur-normal) var(--sj-ease), box-shadow var(--sj-dur-normal) var(--sj-ease); }
    .sj-product-card:hover { border-color: var(--sj-border-gold); box-shadow: var(--sj-shadow-soft); }
    .sj-product-card__media img { transition: transform var(--sj-dur-normal) var(--sj-ease); }
    .sj-product-card:hover .sj-product-card__media img { transform: scale(1.03); }
}

/* shop grid sits next to the filter sidebar → one column fewer than the full-width grids (3 on desktop, capped container) */
@media (min-width: 480px)  { .sj-product-grid { gap: var(--sj-space-4); } }
@media (min-width: 768px)  { .sj-product-grid { gap: var(--sj-space-6); } }
@media (min-width: 1024px) { .sj-product-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sj-empty { max-width: 480px; margin-inline: auto; }

/* ── Category card ── */
.sj-category-card { position: relative; border: 0; }
.sj-category-card__media { aspect-ratio: 4 / 5; }
.sj-category-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sj-category-card__label {
    position: absolute; inset: auto 0 0 0; padding: var(--sj-space-6) var(--sj-space-4) var(--sj-space-4);
    color: #fff; font-family: var(--sj-font-display); font-size: var(--sj-text-h3); font-weight: var(--sj-weight-display-strong);
    background: linear-gradient(to top, rgba(43, 36, 32, 0.78), rgba(43, 36, 32, 0));
}

/* ── Information card ── */
.sj-info-card { padding: var(--sj-space-6); gap: var(--sj-space-3); }
.sj-info-card__icon { width: 40px; height: 40px; color: var(--sj-gold-700); }

/* ── Promotional card (maroon, restrained — gold only as a hairline) ── */
.sj-promo-card {
    padding: var(--sj-space-8); gap: var(--sj-space-4); color: var(--sj-text-on-dark-muted);
    background: var(--sj-maroon-900); border-color: var(--sj-maroon-900); position: relative;
}
.sj-promo-card :where(h1, h2, h3, .sj-h2, .sj-h3) { color: var(--sj-text-on-dark); }
.sj-promo-card::before { content: ""; position: absolute; inset: var(--sj-space-3); border: 1px solid rgba(217, 199, 154, 0.35); border-radius: var(--sj-radius-md); pointer-events: none; }


/* ═══ 11. STATES ══════════════════════════════════════════════════════════ */
.sj-alert {
    display: flex; gap: var(--sj-space-3); align-items: flex-start; padding: var(--sj-space-4);
    font-size: var(--sj-text-body-sm); line-height: 1.5; border: 1px solid transparent; border-radius: var(--sj-radius-md);
}
.sj-alert--success { color: var(--sj-success); background: var(--sj-success-bg); border-color: rgba(27, 107, 63, 0.25); }
.sj-alert--warning { color: var(--sj-warning); background: var(--sj-warning-bg); border-color: rgba(122, 75, 0, 0.25); }
.sj-alert--error   { color: var(--sj-error);   background: var(--sj-error-bg);   border-color: rgba(163, 43, 34, 0.25); }
.sj-alert--info    { color: var(--sj-info);    background: var(--sj-info-bg);    border-color: rgba(47, 93, 124, 0.25); }

.sj-skeleton { display: block; background: linear-gradient(90deg, var(--sj-sand) 25%, #FBF8F3 50%, var(--sj-sand) 75%); background-size: 200% 100%; border-radius: var(--sj-radius-sm); animation: sj-shimmer 1.4s linear infinite; }
.sj-skeleton--media { aspect-ratio: 4 / 5; border-radius: 0; }
.sj-skeleton--line  { height: 12px; }
.sj-skeleton--line.is-short { width: 40%; }
.sj-skeleton--btn   { height: var(--sj-hit); border-radius: var(--sj-radius-md); }

.sj-empty { text-align: center; padding: var(--sj-space-12) var(--sj-space-6); color: var(--sj-text-muted); display: grid; gap: var(--sj-space-3); justify-items: center; }
.sj-empty__icon { width: 48px; height: 48px; color: var(--sj-gold-500); }
.sj-empty__title { font-family: var(--sj-font-display); font-size: var(--sj-text-h3); font-weight: var(--sj-weight-display); line-height: 1.2; color: var(--sj-text); }

.sj-spinner { width: 24px; height: 24px; border: 2px solid var(--sj-border); border-top-color: var(--sj-maroon-700); border-radius: 50%; animation: sj-spin 0.8s linear infinite; }


/* ═══ 12a. MODAL (visual foundation only — no behaviour) ══════════════════ */
.sj-modal-backdrop {
    position: fixed; inset: 0; z-index: var(--sj-z-modal); display: flex; align-items: flex-end; justify-content: center;
    background: rgba(43, 36, 32, 0.55);
}
.sj-modal {
    position: relative; width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--sj-surface); border-radius: var(--sj-radius-xl) var(--sj-radius-xl) 0 0; box-shadow: var(--sj-shadow-raised);
    padding: var(--sj-space-6) var(--sj-space-4) calc(var(--sj-space-6) + env(safe-area-inset-bottom, 0px));
}
.sj-modal__head  { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sj-space-4); margin-bottom: var(--sj-space-4); }
.sj-modal__close { margin: calc(-1 * var(--sj-space-2)) calc(-1 * var(--sj-space-2)) 0 0; }   /* 44px target, tucked into the corner */
.sj-modal__foot  { margin-top: var(--sj-space-6); display: grid; gap: var(--sj-space-3); }
@media (min-width: 768px) {
    .sj-modal-backdrop { align-items: center; padding: var(--sj-space-6); }
    .sj-modal { max-width: 520px; max-height: min(90dvh, 760px); border-radius: var(--sj-radius-xl); padding: var(--sj-space-8); }
}


/* ═══ 12b. SITE SHELL (Phase 3C) — top bar · header · navigation · mobile drawer · footer ═══════════
   Markup: resources/views/partials/site-header.blade.php and site-footer.blade.php (via layouts/site.blade.php).
   Everything is scoped to .sj-site-* so legacy page CSS cannot reach it, and every shell element sets its own
   typography (it does not depend on <body>). Aligns to .sj-container, like the page content. */

/* page lock while the drawer is open */
html.sj-lock { overflow: hidden; }
/* in-page links (#collections, #contact…) must not land under the sticky header */
html { scroll-padding-top: calc(var(--sj-header-h) + var(--sj-space-4)); }
/* Legacy CSS sets  overflow-x: hidden  on <body>, which turns body into a scroll container and silently breaks position: sticky.
   'clip' still prevents horizontal scroll but does not create a scroll container, so the sticky header works. */
body.sj { overflow-x: clip; margin: 0; }   /* legacy pages never reset the browser's default 8px body margin; the full-width top bar and header need it gone */

/* ── announcement / live-rate bar ── */
.sj-site-topbar { background: var(--sj-charcoal); color: var(--sj-text-on-dark-muted); font-family: var(--sj-font-ui); font-size: var(--sj-text-caption); line-height: 1.4; letter-spacing: 0.04em; }
.sj-site-topbar__inner { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: var(--sj-space-4); }
.sj-site-topbar a { color: var(--sj-text-on-dark); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.sj-site-topbar a:hover { text-decoration-thickness: 2px; }
.sj-site-topbar__live { display: inline-flex; align-items: center; gap: var(--sj-space-2); }
.sj-site-topbar__live .sj-live-dot { background: #5FBF8A; box-shadow: 0 0 0 3px rgba(95, 191, 138, 0.18); }   /* lighter green: AA on charcoal */
.sj-site-topbar__phone { display: none; }
@media (min-width: 768px) {
    .sj-site-topbar__inner { justify-content: space-between; }
    .sj-site-topbar__phone { display: inline; }
}

/* ── header ── */
.sj-site-header {
    position: sticky; top: 0; z-index: var(--sj-z-header);
    background: rgba(250, 247, 242, 0.97); border-bottom: 1px solid var(--sj-border);
    font-family: var(--sj-font-ui);
}
.sj-site-header__inner { height: var(--sj-header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sj-space-2); }

.sj-site-brand { display: flex; align-items: center; gap: var(--sj-space-3); min-width: 0; min-height: var(--sj-hit); color: var(--sj-text); }
.sj-site-brand__mark { flex: none; width: 36px; height: auto; }
.sj-site-brand__text {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    font-family: var(--sj-font-display); font-weight: var(--sj-weight-display); font-size: 0.8125rem;
    line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
.sj-site-brand__text span { color: var(--sj-maroon-700); }
@media (min-width: 480px) { .sj-site-brand__mark { width: 40px; } .sj-site-brand__text { flex-direction: row; gap: 0.45em; font-size: 1rem; } }
@media (min-width: 768px) { .sj-site-brand__text { font-size: 1.125rem; } }
@media (min-width: 1024px) { .sj-site-brand__text { font-size: 1.25rem; } }

.sj-site-nav { display: none; align-items: center; gap: var(--sj-space-8); }
.sj-site-nav a {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--sj-hit); min-width: var(--sj-hit);
    font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium); letter-spacing: 0.04em; color: var(--sj-text-soft);
    transition: color var(--sj-dur-normal) var(--sj-ease);
}
.sj-site-nav a::after {                                   /* fine gold underline, fades in — no movement */
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--sj-gold-500);
    opacity: 0; transition: opacity var(--sj-dur-normal) var(--sj-ease);
}
.sj-site-nav a:hover { color: var(--sj-maroon-700); }
.sj-site-nav a:hover::after, .sj-site-nav a[aria-current="page"]::after { opacity: 1; }
.sj-site-nav a[aria-current="page"] { color: var(--sj-maroon-700); }

/* legacy pages define a global  a:hover { underline }  — shell links must not inherit it */
.sj-site-header a:hover, .sj-drawer a:hover, .sj-site-footer__legal a:hover, .sj-site-footer__social a:hover, .sj-site-footer__logo:hover { text-decoration: none; }

.sj-site-actions { display: flex; align-items: center; gap: var(--sj-space-1); flex: none; }
.sj-site-actions .sj-icon-btn { color: var(--sj-text-soft); }
.sj-site-actions .sj-icon-btn:hover { color: var(--sj-maroon-700); }
.sj-site-actions__desktop { display: none; }
@media (min-width: 1024px) {
    .sj-site-nav { display: flex; }
    .sj-site-actions__desktop { display: inline-flex; }
    .sj-site-menu-btn { display: none; }
}

/* ── mobile navigation: full-height side sheet ── */
.sj-drawer-overlay {
    position: fixed; inset: 0; z-index: var(--sj-z-overlay); background: rgba(43, 36, 32, 0.5);
    opacity: 0; visibility: hidden; transition: opacity var(--sj-dur-slow) var(--sj-ease), visibility 0s linear var(--sj-dur-slow);
}
.sj-drawer-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.sj-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--sj-z-overlay) + 1);
    width: min(88vw, 380px); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: var(--sj-ivory); border-left: 1px solid var(--sj-border); box-shadow: var(--sj-shadow-raised);
    font-family: var(--sj-font-ui);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--sj-dur-slow) var(--sj-ease), visibility 0s linear var(--sj-dur-slow);
}
.sj-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.sj-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sj-space-3) var(--sj-space-4); border-bottom: 1px solid var(--sj-border); min-height: var(--sj-header-h); }
.sj-drawer__nav { display: grid; padding: var(--sj-space-4) var(--sj-space-6); }
.sj-drawer__nav a {
    display: flex; align-items: center; justify-content: space-between; min-height: 56px;
    font-family: var(--sj-font-display); font-weight: var(--sj-weight-display); font-size: 1.625rem; line-height: 1.1; color: var(--sj-text);
    border-bottom: 1px solid var(--sj-border); transition: color var(--sj-dur-normal) var(--sj-ease);
}
.sj-drawer__nav a:hover, .sj-drawer__nav a[aria-current="page"] { color: var(--sj-maroon-700); }
.sj-drawer__nav a[aria-current="page"] { border-bottom-color: var(--sj-gold-500); }
.sj-drawer__secondary { display: grid; gap: var(--sj-space-1); padding: var(--sj-space-2) var(--sj-space-6); }
.sj-drawer__secondary a { display: flex; align-items: center; gap: var(--sj-space-3); min-height: var(--sj-hit); font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium); color: var(--sj-text-soft); }
.sj-drawer__secondary a:hover { color: var(--sj-maroon-700); }
.sj-drawer__secondary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.sj-drawer__cta { margin-top: auto; padding: var(--sj-space-6); display: grid; gap: var(--sj-space-3); padding-bottom: calc(var(--sj-space-6) + env(safe-area-inset-bottom, 0px)); }

/* ── footer ── */
.sj-site-footer { background: var(--sj-sand); border-top: 1px solid var(--sj-border-gold); color: var(--sj-text-soft); font-family: var(--sj-font-ui); font-size: var(--sj-text-body-sm); line-height: 1.6; }
.sj-site-footer a { color: inherit; text-decoration: none; }
.sj-site-footer__main { padding-block: var(--sj-space-12); }
.sj-site-footer__grid { display: grid; gap: var(--sj-space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px)  { .sj-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-space-12) var(--sj-space-8); } }
@media (min-width: 1024px) { .sj-site-footer__main { padding-block: var(--sj-space-16); } .sj-site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sj-space-8); } }
.sj-site-footer__logo { display: inline-block; margin-bottom: var(--sj-space-4); }
.sj-site-footer__logo img { width: 168px; height: auto; }
.sj-site-footer__about { max-width: 34ch; margin: 0; color: var(--sj-text-soft); }
.sj-site-footer__title { margin: 0 0 var(--sj-space-3); font-family: var(--sj-font-ui); font-size: var(--sj-text-caption); font-weight: var(--sj-weight-medium); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-maroon-700); }
.sj-site-footer__list { list-style: none; margin: 0; padding: 0; }
.sj-site-footer__list a { display: inline-flex; align-items: center; min-height: var(--sj-hit); transition: color var(--sj-dur-normal) var(--sj-ease); }
.sj-site-footer__list a:hover, .sj-site-footer__contact a:hover { color: var(--sj-maroon-700); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.sj-site-footer__branch + .sj-site-footer__branch { margin-top: var(--sj-space-6); }
.sj-site-footer__branch-name { margin: 0 0 var(--sj-space-1); font-weight: var(--sj-weight-medium); color: var(--sj-text); }
.sj-site-footer__branch address { font-style: normal; }
.sj-site-footer__contact a { display: inline-flex; align-items: center; min-height: var(--sj-hit); }
.sj-site-footer__hours { margin-top: var(--sj-space-4); color: var(--sj-text-muted); }
.sj-site-footer__bottom { border-top: 1px solid var(--sj-border); }
.sj-site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sj-space-2) var(--sj-space-6); padding-block: var(--sj-space-4); font-size: var(--sj-text-caption); color: var(--sj-text-muted); }
.sj-site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sj-space-4); }
.sj-site-footer__legal a { display: inline-flex; align-items: center; min-height: var(--sj-hit); }
.sj-site-footer__legal a:hover { color: var(--sj-maroon-700); }
.sj-site-footer__social { display: flex; gap: var(--sj-space-1); }
.sj-site-footer__social .sj-icon-btn { color: var(--sj-text-soft); }
.sj-site-footer__social .sj-icon-btn:hover { color: var(--sj-maroon-700); }
.sj-site-footer__social .sj-icon-btn svg { width: 20px; height: 20px; }


/* ═══ 12c. SHOWROOM / MAP FOUNDATION ══════════════════════════════════════
   Photo + location details + compact map PREVIEW + Directions / Call.
   The preview is a static image (or placeholder) with a "Load map" control; a real
   iframe is only injected on demand — never several heavy maps above the fold. */
.sj-showroom { display: grid; gap: 0; }
.sj-showroom__media { aspect-ratio: 16 / 10; background: var(--sj-sand); }
.sj-showroom__media img { width: 100%; height: 100%; object-fit: cover; }
.sj-showroom__body { padding: var(--sj-space-6); display: grid; gap: var(--sj-space-4); }
.sj-showroom__name { font-family: var(--sj-font-display); font-size: var(--sj-text-h3); font-weight: var(--sj-weight-display-strong); color: var(--sj-text); }
.sj-showroom__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sj-space-3); font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); }
.sj-showroom__row svg { width: 20px; height: 20px; color: var(--sj-gold-700); fill: none; stroke: currentColor; stroke-width: 1.6; }
.sj-showroom__hours { display: grid; grid-template-columns: auto 1fr; gap: var(--sj-space-1) var(--sj-space-4); font-size: var(--sj-text-body-sm); }
.sj-showroom__actions { display: grid; gap: var(--sj-space-3); grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .sj-showroom--split { grid-template-columns: 1fr 1fr; } .sj-showroom--split .sj-showroom__media { aspect-ratio: auto; min-height: 320px; } }

.sj-map-preview {
    position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--sj-sand); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-lg);
}
.sj-map-preview img, .sj-map-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sj-map-preview__cta { position: relative; z-index: 1; }

/* branch selector (tabs) */
.sj-branch-tabs { display: flex; gap: var(--sj-space-2); overflow-x: auto; padding-bottom: var(--sj-space-1); scrollbar-width: none; }
.sj-branch-tabs::-webkit-scrollbar { display: none; }
.sj-branch-tab {
    flex: none; min-height: var(--sj-hit); padding: 0 var(--sj-space-4); font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium);
    color: var(--sj-text-soft); background: transparent; border: 1px solid var(--sj-border-strong); border-radius: var(--sj-radius-pill); cursor: pointer;
    transition: all var(--sj-dur-normal) var(--sj-ease);
}
.sj-branch-tab[aria-selected="true"] { color: #fff; background: var(--sj-maroon-700); border-color: var(--sj-maroon-700); }


/* ═══ 12d. GOLD-RATE FOUNDATION ═══════════════════════════════════════════
   22K · 24K · Silver · last updated · live indicator · history link · unavailable.
   Visual only — SSE / polling logic is untouched. */
.sj-rate {
    display: grid; gap: var(--sj-space-3); padding: var(--sj-space-6); background: var(--sj-surface);
    border: 1px solid var(--sj-border); border-top: 2px solid var(--sj-gold-500); border-radius: var(--sj-radius-lg); box-shadow: var(--sj-shadow-soft);
}
.sj-rate__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-space-3); }
.sj-rate__metal {                                    /* 22K / 24K / Silver chip */
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sj-space-3);
    font-size: var(--sj-text-caption); font-weight: var(--sj-weight-medium); letter-spacing: var(--sj-tracking-label); text-transform: uppercase;
    color: var(--sj-gold-700); background: var(--sj-gold-100); border: 1px solid var(--sj-gold-300); border-radius: var(--sj-radius-pill);
}
.sj-rate__metal--silver { color: var(--sj-text-soft); background: var(--sj-sand); border-color: var(--sj-border); }
.sj-rate__value { font-family: var(--sj-font-display); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); font-weight: var(--sj-weight-display-strong); color: var(--sj-text); line-height: 1.1; font-variant-numeric: lining-nums; }
.sj-rate__unit  { font-size: var(--sj-text-body-sm); color: var(--sj-text-muted); }
.sj-rate__updated { font-size: var(--sj-text-caption); color: var(--sj-text-muted); }
.sj-rate__history { font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium); color: var(--sj-maroon-700); display: inline-flex; align-items: center; min-height: var(--sj-hit); }
.sj-rate__history:hover { color: var(--sj-maroon-900); text-decoration: underline; text-underline-offset: 0.2em; }

.sj-live { display: inline-flex; align-items: center; gap: var(--sj-space-2); font-size: var(--sj-text-caption); font-weight: var(--sj-weight-medium); color: var(--sj-success); }
.sj-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sj-success); box-shadow: 0 0 0 3px var(--sj-success-bg); }   /* static; no looping animation by default */
.sj-live-dot--pulse { animation: sj-pulse 2.4s ease-in-out infinite; }                                                              /* opt-in */

/* graceful "no rate right now": calm, intentional — not a broken hero */
.sj-rate--unavailable { border-top-color: var(--sj-border); box-shadow: none; background: var(--sj-ivory); }
.sj-rate--unavailable .sj-rate__value { font-size: var(--sj-text-h3); color: var(--sj-text-soft); font-weight: var(--sj-weight-display); }
.sj-rate__pending { display: flex; align-items: center; gap: var(--sj-space-3); color: var(--sj-text-soft); font-size: var(--sj-text-body-sm); }
.sj-rate__pending svg { width: 20px; height: 20px; flex: none; color: var(--sj-gold-700); fill: none; stroke: currentColor; stroke-width: 1.6; }

/* compact bar variant for the announcement/top bar */
.sj-rate-bar { display: inline-flex; align-items: center; gap: var(--sj-space-3); flex-wrap: wrap; justify-content: center; }
.sj-rate-bar__item strong { font-weight: var(--sj-weight-medium); color: var(--sj-text-on-dark); }


/* ═══ 12e. ACCOUNT THEME FOUNDATION ═══════════════════════════════════════
   Login / register / profile / reset will adopt the SAME brand (ivory + maroon),
   not the old black-and-gold screen. Classes only — no auth page is touched. */
.sj-auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--sj-space-6) var(--sj-gutter); background: var(--sj-ivory); }
.sj-auth__card { width: 100%; max-width: 440px; padding: var(--sj-space-8) var(--sj-space-6); background: var(--sj-surface); border: 1px solid var(--sj-border); border-top: 2px solid var(--sj-gold-500); border-radius: var(--sj-radius-xl); box-shadow: var(--sj-shadow-soft); }
.sj-auth__brand { text-align: center; margin-bottom: var(--sj-space-6); }
.sj-auth__form { display: grid; gap: var(--sj-space-4); }


/* ═══ 13. ACCESSIBILITY ═══════════════════════════════════════════════════ */
/* Visible keyboard focus everywhere inside .sj. Mouse clicks don't show it (:focus-visible). */
:where(.sj) :focus-visible { outline: var(--sj-focus-outline); outline-offset: 2px; }   /* never changes the element's shape or removes mouse-focus behaviour of legacy content */
:where(.sj) :is(.sj-btn, .sj-icon-btn, .sj-chip, .sj-branch-tab):focus-visible { outline: none; box-shadow: var(--sj-focus-ring); }
:where(.sj) :is(.sj-input, .sj-select, .sj-textarea):focus-visible { outline: none; }   /* these show border + soft ring on :focus */
:where(.sj) :is(.sj-site-topbar, .sj-section--dark, .sj-promo-card) :focus-visible { outline-color: var(--sj-gold-300); box-shadow: none; }

.sj-sr-only {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sj-skip-link {
    position: absolute; left: var(--sj-space-4); top: -100px; z-index: calc(var(--sj-z-modal) + 1);
    padding: var(--sj-space-3) var(--sj-space-4); background: var(--sj-maroon-700); color: #fff; border-radius: var(--sj-radius-md);
}
.sj-skip-link:focus { top: var(--sj-space-4); }

/* guarantee a 44px hit area on any element tagged for it */
.sj-hit { min-width: var(--sj-hit); min-height: var(--sj-hit); }

@media (forced-colors: active) {
    .sj-btn, .sj-input, .sj-select, .sj-textarea, .sj-chip, .sj-badge, .sj-card { border: 1px solid CanvasText; }
    .sj-btn--primary { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}


/* ═══ 14. RESPONSIVE UTILITIES ════════════════════════════════════════════
   Mobile 320–767 · Tablet 768–1023 · Desktop 1024–1439 · Large 1440+
   (mobile-first: base rules ARE the mobile rules) */
.sj-hide-mobile { display: none !important; }
.sj-show-mobile { display: initial; }
@media (min-width: 768px)  { .sj-hide-mobile { display: initial !important; } .sj-show-mobile { display: none !important; } }
.sj-hide-desktop-up { display: initial; }
@media (min-width: 1024px) { .sj-hide-desktop-up { display: none !important; } }
.sj-no-overflow { max-width: 100%; overflow-x: clip; }
.sj-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }


/* ═══ 15. MOTION ══════════════════════════════════════════════════════════
   Subtle only: opacity, ≤ 8px translate, soft scale, colour and shadow.
   No parallax, no scroll-jacking, no looping animation unless opted in. */
@keyframes sj-spin    { to { transform: rotate(360deg); } }
@keyframes sj-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sj-pulse   { 0%, 100% { box-shadow: 0 0 0 3px var(--sj-success-bg); } 50% { box-shadow: 0 0 0 6px rgba(230, 243, 234, 0); } }
@keyframes sj-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sj-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sj-fade-in { animation: sj-fade-in var(--sj-dur-slow) var(--sj-ease) both; }
.sj-rise-in { animation: sj-rise-in var(--sj-dur-slow) var(--sj-ease) both; }

@media (prefers-reduced-motion: reduce) {
    :root { --sj-dur-fast: 0.01ms; --sj-dur-normal: 0.01ms; --sj-dur-slow: 0.01ms; }
    :where(.sj) *, :where(.sj) *::before, :where(.sj) *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
    .sj-skeleton { animation: none; background: var(--sj-sand); }
    .sj-live-dot--pulse { animation: none; }
}


/* ═══ 16. HOME PAGE (Phase 3D) ════════════════════════════════════════════
   Every selector is scoped under .sj-home-* (sections also carry "sj-scope" for the typographic reset).
   Product first · brand second · content third · decoration last. Gold = hairlines and icons only.
   Motion: <= 500ms, opacity / <= 12px translate / image scale <= 1.03 — all disabled by prefers-reduced-motion (section 15). */

/* shared section rhythm + heads */
.sj-home-section { padding-block: var(--sj-section-y); background: var(--sj-ivory); }
.sj-home-section--sand { background: var(--sj-sand); }
.sj-home-section__head { margin-bottom: var(--sj-space-8); }
.sj-home-section__head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sj-space-3) var(--sj-space-6); }
.sj-home-section__head--split .sj-section-head { margin-bottom: 0; }
.sj-home-section .reveal { transform: translateY(12px); transition-duration: 480ms; }      /* theme.css .reveal.visible resets it */

/* ── Hero ── */
.sj-home-hero { background: linear-gradient(180deg, var(--sj-sand) 0%, var(--sj-ivory) 85%); padding-block: var(--sj-space-4) var(--sj-space-12); }
.sj-home-hero__inner { display: grid; gap: var(--sj-space-6); align-items: center; }
.sj-home-hero__media { order: -1; min-width: 0; }
.sj-home-hero__copy { min-width: 0; display: grid; gap: var(--sj-space-4); justify-items: start; }
.sj-home-hero__eyebrow { margin: 0; color: var(--sj-gold-700); }
.sj-home-hero__title { font-size: clamp(2.125rem, 1.5rem + 3vw, 4.25rem); }
.sj-home-hero__lead { max-width: 46ch; }
.sj-home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sj-space-3); margin-top: var(--sj-space-2); }
.sj-home-hero__facts { display: flex; flex-wrap: wrap; gap: var(--sj-space-1) var(--sj-space-4); margin: var(--sj-space-2) 0 0; padding: var(--sj-space-4) 0 0; border-top: 1px solid var(--sj-border-gold); font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); width: 100%; }
.sj-home-hero__facts li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: var(--sj-space-4); border-radius: 50%; background: var(--sj-gold-500); vertical-align: middle; }
.sj-home-hero__frame { position: relative; display: block; overflow: hidden; border-radius: var(--sj-radius-lg); background: var(--sj-sand); aspect-ratio: 5 / 4; box-shadow: var(--sj-shadow-soft); }
.sj-home-hero__frame picture, .sj-home-hero__frame > img { display: block; width: 100%; height: 100%; }
.sj-home-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform 500ms var(--sj-ease); }
a.sj-home-hero__frame:hover img { transform: scale(1.02); }
.sj-home-hero__caption { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: var(--sj-space-8) var(--sj-space-4) var(--sj-space-4); color: #fff; background: linear-gradient(to top, rgba(43, 36, 32, 0.72), rgba(43, 36, 32, 0)); }
.sj-home-hero__caption-label { font-size: var(--sj-text-caption); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-gold-300); }
.sj-home-hero__caption-title { font-family: var(--sj-font-display); font-size: var(--sj-text-h3); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sj-home-hero__frame--brand { display: grid; place-content: center; justify-items: center; gap: var(--sj-space-4); background: var(--sj-gold-100); border: 1px solid var(--sj-border-gold); box-shadow: none; }
.sj-home-hero__frame--brand img { width: 96px; height: auto; object-fit: contain; }
.sj-home-hero__brandname { font-family: var(--sj-font-display); font-size: var(--sj-text-h3); color: var(--sj-maroon-800); }
@media (min-width: 768px) {
    .sj-home-hero { padding-block: var(--sj-space-8) var(--sj-space-16); }
    .sj-home-hero__frame { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
    .sj-home-hero { padding-block: var(--sj-space-12) var(--sj-space-20); }
    .sj-home-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sj-space-16); }
    .sj-home-hero__media { order: 0; }
    .sj-home-hero__frame { aspect-ratio: 4 / 5; max-height: min(640px, calc(100svh - var(--sj-topbar-h) - var(--sj-header-h) - var(--sj-space-12))); margin-inline: auto; }
}

/* ── Categories ── */
.sj-home-categories__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-space-3); }
.sj-home-categories__tile { position: relative; display: block; overflow: hidden; border-radius: var(--sj-radius-md); background: var(--sj-sand); aspect-ratio: 4 / 5; }
.sj-home-categories__tile picture, .sj-home-categories__tile img { display: block; width: 100%; height: 100%; }
.sj-home-categories__tile img { object-fit: cover; transition: transform 500ms var(--sj-ease); }
.sj-home-categories__tile:hover img, .sj-home-categories__tile:focus-visible img { transform: scale(1.03); }
.sj-home-categories__label { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sj-space-2); padding: var(--sj-space-8) var(--sj-space-3) var(--sj-space-3); color: #fff; background: linear-gradient(to top, rgba(43, 36, 32, 0.78), rgba(43, 36, 32, 0)); }
.sj-home-categories__name { font-family: var(--sj-font-display); font-size: var(--sj-text-h3); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.sj-home-categories__label svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--sj-dur-slow) var(--sj-ease); }
.sj-home-categories__tile:hover .sj-home-categories__label svg { transform: translateX(3px); }
.sj-home-categories__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }               /* an odd last tile spans the row instead of leaving a hole */
.sj-home-categories__grid > li:last-child:nth-child(odd) .sj-home-categories__tile { aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
    .sj-home-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sj-space-6); }
    .sj-home-categories__grid > li:last-child:nth-child(odd) { grid-column: auto; }
    .sj-home-categories__grid > li:last-child:nth-child(odd) .sj-home-categories__tile { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) { .sj-home-categories__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* few categories → fewer, larger tiles (never a half-empty row). data-count is the number of tiles. */
.sj-home-categories__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
.sj-home-categories__grid[data-count="1"] > li:last-child:nth-child(odd) .sj-home-categories__tile { aspect-ratio: 16 / 10; }
.sj-home-categories__grid[data-count="1"] .sj-home-categories__tile img { object-position: 50% 35%; }
@media (min-width: 768px) {
    .sj-home-categories__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sj-home-categories__grid[data-count="2"] .sj-home-categories__tile { aspect-ratio: 5 / 4; }
    .sj-home-categories__grid[data-count="2"] .sj-home-categories__tile img { object-position: 50% 30%; }
}
@media (min-width: 1024px) { .sj-home-categories__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Featured pieces: 2-up until desktop, then 4-up (4 products never leave an orphan row) ── */
@media (min-width: 768px) and (max-width: 1023.98px) { .sj-home-featured .sj-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Live gold rate band ── */
.sj-home-rates { background: var(--sj-maroon-900); color: var(--sj-text-on-dark-muted); padding-block: var(--sj-space-12); border-block: 1px solid var(--sj-gold-700); }
.sj-home-rates__inner { display: grid; gap: var(--sj-space-6); align-items: center; }
.sj-home-rates__live { display: flex; align-items: center; gap: var(--sj-space-2); margin: 0 0 var(--sj-space-3); font-size: var(--sj-text-caption); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-gold-300); }
.sj-home-rates__title { color: var(--sj-text-on-dark); }
.sj-home-rates__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-space-3); margin-top: var(--sj-space-6); }
.sj-home-rates .sj-btn--text { --_fg: var(--sj-gold-300); --_fg-hover: #fff; }
.sj-home-rates__card { display: grid; justify-items: center; gap: var(--sj-space-2); padding: var(--sj-space-8) var(--sj-space-6); text-align: center; border: 1px solid rgba(217, 199, 154, 0.4); border-radius: var(--sj-radius-lg); background: rgba(250, 247, 242, 0.04); }
.sj-home-rates__metal { font-size: var(--sj-text-caption); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-gold-300); }
.sj-home-rates__price { font-family: var(--sj-font-display); font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4rem); line-height: 1.05; color: var(--sj-text-on-dark); font-variant-numeric: lining-nums; transition: opacity 250ms var(--sj-ease); overflow-wrap: anywhere; }
.sj-home-rates__price.is-updating { opacity: 0.5; }
.sj-home-rates__card.hrc-offline .sj-home-rates__price { font-family: var(--sj-font-ui); font-size: var(--sj-text-h3); color: var(--sj-text-on-dark-muted); }
.sj-home-rates__sub { font-size: var(--sj-text-body-sm); color: var(--sj-text-on-dark); }
.sj-home-rates__sub:empty, .sj-home-rates__date:empty { display: none; }
.sj-home-rates__date { font-size: var(--sj-text-caption); color: var(--sj-text-on-dark-muted); }
@media (min-width: 1024px) {
    .sj-home-rates { padding-block: var(--sj-space-16); }
    .sj-home-rates__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sj-space-16); }
}

/* ── Why Shreeji ── */
.sj-home-trust__grid { display: grid; gap: var(--sj-space-8) var(--sj-space-6); grid-template-columns: minmax(0, 1fr); }
.sj-home-trust__item { display: grid; gap: var(--sj-space-2); align-content: start; padding-top: var(--sj-space-4); border-top: 1px solid var(--sj-border-gold); }
.sj-home-trust__item svg { width: 28px; height: 28px; fill: none; stroke: var(--sj-gold-700); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sj-home-trust__name { font-family: var(--sj-font-display); font-size: var(--sj-text-h3); font-weight: var(--sj-weight-display); line-height: 1.2; color: var(--sj-text); margin: 0; }
.sj-home-trust__item p { font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); max-width: 36ch; }
@media (min-width: 640px)  { .sj-home-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sj-home-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Showrooms ── */
.sj-home-showrooms__grid { display: grid; gap: var(--sj-space-6); grid-template-columns: minmax(0, 1fr); }
.sj-home-showroom { display: grid; gap: var(--sj-space-4); align-content: start; padding: var(--sj-space-6); background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-lg); }
.sj-home-showroom__badge { justify-self: start; }
.sj-home-showroom__name { overflow-wrap: anywhere; }
.sj-home-showroom__rows { display: grid; gap: var(--sj-space-3); }
.sj-home-showroom__rows li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sj-space-3); align-items: start; font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); }
.sj-home-showroom__rows address { font-style: normal; }
.sj-home-showroom__rows svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--sj-gold-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sj-home-showroom__rows a { display: inline-flex; align-items: center; min-height: var(--sj-hit); color: var(--sj-maroon-700); }
.sj-home-showroom__actions { display: flex; flex-wrap: wrap; gap: var(--sj-space-2) var(--sj-space-3); padding-top: var(--sj-space-2); }
@media (min-width: 768px) { .sj-home-showrooms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sj-home-showroom { padding: var(--sj-space-8); } }

/* ── Contact ── */
.sj-home-contact__grid { display: grid; gap: var(--sj-space-8); align-items: start; }
.sj-home-contact__info { display: grid; gap: var(--sj-space-4); justify-items: start; min-width: 0; }
.sj-home-contact__list { display: grid; gap: var(--sj-space-4); margin-top: var(--sj-space-2); width: 100%; }
.sj-home-contact__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sj-space-3); font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); }
.sj-home-contact__list svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--sj-gold-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sj-home-contact__list a { display: inline-flex; align-items: center; min-height: var(--sj-hit); color: var(--sj-maroon-700); overflow-wrap: anywhere; }
.sj-home-contact__label { display: block; font-size: var(--sj-text-caption); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-text-muted); }
.sj-home-contact__social { display: grid; gap: var(--sj-space-1); }
.sj-home-contact__social-links { display: flex; gap: var(--sj-space-2); }
.sj-home-contact__card { min-width: 0; padding: var(--sj-space-6); background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-lg); box-shadow: var(--sj-shadow-soft); }
.sj-home-contact__card form { display: grid; gap: var(--sj-space-4); margin-top: var(--sj-space-4); }
.sj-home-contact__row { display: grid; gap: var(--sj-space-4); }
.sj-home-contact__notice { margin-top: var(--sj-space-4); align-items: center; gap: var(--sj-space-2); }
.sj-home-contact .cf-field-err { display: none; }                 /* the submit script shows/hides these inline */
@media (min-width: 640px)  { .sj-home-contact__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px)  { .sj-home-contact__card { padding: var(--sj-space-8); } }
@media (min-width: 1024px) { .sj-home-contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sj-space-16); } }

/* ── Floating actions (back-to-top + WhatsApp) — below the header (100) and the drawer/overlay (900+) ── */
.sj-home-fab { position: fixed; z-index: 90; right: var(--sj-space-4); bottom: var(--sj-space-4); display: grid; gap: var(--sj-space-2); justify-items: center; transition: opacity var(--sj-dur-normal) var(--sj-ease), visibility var(--sj-dur-normal); }
.sj-home-fab__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--sj-border-gold); background: var(--sj-surface); color: var(--sj-maroon-700); box-shadow: var(--sj-shadow-soft); cursor: pointer; transition: opacity var(--sj-dur-normal) var(--sj-ease), transform var(--sj-dur-normal) var(--sj-ease), background-color var(--sj-dur-normal) var(--sj-ease); }
.sj-home-fab__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sj-home-fab__btn:hover { background: var(--sj-maroon-50); }
.sj-home-fab__wa { background: var(--sj-maroon-700); border-color: var(--sj-maroon-700); color: #fff; }
.sj-home-fab__wa:hover { background: var(--sj-maroon-800); }
.sj-home-fab__top { opacity: 0; pointer-events: none; transform: translateY(8px); visibility: hidden; }
.sj-home-fab__top.show { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
.sj-home-fab.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 1024px) { .sj-home-fab { right: var(--sj-space-6); bottom: var(--sj-space-6); } .sj-home-fab__wa { display: none; } }    /* desktop header already has WhatsApp */


/* ═══ 17. POLICY + ABOUT PAGES (Phase 3G) ═════════════════════════════════
   Terms · Refund & Cancellation · Delivery / Shipping · About Us.
   All selectors are scoped .sj-policy*, .sj-callout*, .sj-about*. Reuses the 3A tokens, .sj-btn, .sj-badge and the 3D showroom card.
   No animation. Reading column <= 72ch; contents are a native <details> on mobile and a sticky side list on desktop. */

.sj-policy { background: var(--sj-ivory); color: var(--sj-text-soft); }

/* breadcrumbs */
.sj-policy-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sj-space-2); padding: 0; margin: 0 0 var(--sj-space-4); list-style: none; font-size: var(--sj-text-body-sm); color: var(--sj-text-muted); }
.sj-policy-crumbs li + li::before { content: "/"; margin-right: var(--sj-space-2); color: var(--sj-gold-500); }
.sj-policy-crumbs a { display: inline-flex; align-items: center; min-height: var(--sj-hit); color: var(--sj-maroon-700); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.sj-policy-crumbs [aria-current] { color: var(--sj-text); }

/* hero */
.sj-policy-hero { background: linear-gradient(180deg, var(--sj-sand) 0%, var(--sj-ivory) 100%); border-bottom: 1px solid var(--sj-border-gold); padding-block: var(--sj-space-6) var(--sj-space-8); }
.sj-policy-hero__eyebrow { margin: 0 0 var(--sj-space-2); color: var(--sj-gold-700); }
.sj-policy-hero__title { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem); }
.sj-policy-hero__lead { margin-top: var(--sj-space-4); max-width: 62ch; }
.sj-policy-hero__updated { margin: var(--sj-space-4) 0 0; font-size: var(--sj-text-caption); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-text-muted); }
@media (min-width: 1024px) { .sj-policy-hero { padding-block: var(--sj-space-8) var(--sj-space-12); } }

/* layout: contents + reading column */
.sj-policy__layout { display: grid; gap: var(--sj-space-6); padding-block: var(--sj-space-8) var(--sj-space-12); align-items: start; }
.sj-policy__article { min-width: 0; max-width: 72ch; }
.sj-policy-toc--desktop { display: none; }
.sj-policy-toc--mobile { border: 1px solid var(--sj-border-gold); border-radius: var(--sj-radius-md); background: var(--sj-surface); }
.sj-policy-toc--mobile summary { display: flex; align-items: center; min-height: var(--sj-hit); padding: 0 var(--sj-space-4); cursor: pointer; font-weight: var(--sj-weight-medium); color: var(--sj-text); }
.sj-policy-toc--mobile summary { list-style: none; justify-content: space-between; }
.sj-policy-toc--mobile summary::-webkit-details-marker { display: none; }
.sj-policy-toc--mobile summary::after { content: "+"; font-size: 1.25rem; color: var(--sj-gold-700); }
.sj-policy-toc--mobile[open] summary::after { content: "–"; }
.sj-policy-toc--mobile[open] summary { border-bottom: 1px solid var(--sj-border); }
.sj-policy-toc ol { list-style: none; margin: 0; padding: var(--sj-space-2) var(--sj-space-2); }
.sj-policy-toc a { display: flex; align-items: baseline; gap: var(--sj-space-3); min-height: var(--sj-hit); padding: var(--sj-space-2) var(--sj-space-2); font-size: var(--sj-text-body-sm); line-height: 1.35; color: var(--sj-text-soft); border-radius: var(--sj-radius-sm); }
.sj-policy-toc a:hover { color: var(--sj-maroon-700); background: var(--sj-maroon-50); }
.sj-policy-toc__n { flex: none; min-width: 1.5em; font-variant-numeric: tabular-nums; color: var(--sj-gold-700); }
.sj-policy-toc__title { margin: 0 0 var(--sj-space-2); font-size: var(--sj-text-caption); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-text-muted); }
@media (min-width: 1024px) {
    .sj-policy__layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sj-space-12); padding-block: var(--sj-space-12) var(--sj-space-16); }
    .sj-policy-toc--mobile { display: none; }
    .sj-policy-toc--desktop { display: block; position: sticky; top: calc(var(--sj-header-h) + var(--sj-space-6)); max-height: calc(100vh - var(--sj-header-h) - var(--sj-space-12)); overflow-y: auto; padding-right: var(--sj-space-2); }
    .sj-policy-toc--desktop ol { padding: 0; }
}

/* sections + readable text */
.sj-policy__section { padding-block: var(--sj-space-6); border-top: 1px solid var(--sj-border); }
.sj-policy__section:first-child { border-top: 0; padding-top: 0; }
.sj-policy__h2 { display: flex; align-items: baseline; gap: var(--sj-space-3); font-family: var(--sj-font-display); font-weight: var(--sj-weight-display); font-size: var(--sj-text-h3); line-height: 1.2; color: var(--sj-text); margin: 0 0 var(--sj-space-4); }
.sj-policy__num { flex: none; min-width: 1.6em; font-family: var(--sj-font-ui); font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium); color: var(--sj-gold-700); font-variant-numeric: tabular-nums; }
.sj-policy__body > * + * { margin-top: var(--sj-space-4); }
.sj-policy__body p, .sj-policy__body li { font-size: var(--sj-text-body); line-height: 1.7; color: var(--sj-text-soft); }
.sj-policy__body h3 { font-family: var(--sj-font-ui); font-size: var(--sj-text-body); font-weight: var(--sj-weight-medium); color: var(--sj-text); margin: var(--sj-space-6) 0 0; }
.sj-policy__body ul, .sj-policy__body ol:not(.sj-policy-steps) { margin-left: 0; padding-left: 1.25rem; }
.sj-policy__body ul { list-style: disc; }
.sj-policy__body li { margin-top: var(--sj-space-2); padding-left: var(--sj-space-1); }
.sj-policy__body li::marker { color: var(--sj-gold-700); }
.sj-policy__body strong { color: var(--sj-text); font-weight: var(--sj-weight-medium); }
.sj-policy__body p a, .sj-policy__body li a { color: var(--sj-maroon-700); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.sj-policy__body p a:hover, .sj-policy__body li a:hover { color: var(--sj-maroon-900); text-decoration-thickness: 2px; }

/* callouts */
.sj-callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sj-space-3); padding: var(--sj-space-4); border: 1px solid var(--sj-border-gold); border-left-width: 4px; border-radius: var(--sj-radius-md); background: var(--sj-gold-100); color: var(--sj-text); }
.sj-callout svg { width: 24px; height: 24px; fill: none; stroke: var(--sj-gold-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sj-callout__title { margin: 0 0 var(--sj-space-1); font-weight: var(--sj-weight-medium); color: var(--sj-text); font-size: var(--sj-text-body); }
.sj-callout__text { font-size: var(--sj-text-body-sm); line-height: 1.65; color: var(--sj-text-soft); }
.sj-callout--info    { background: var(--sj-surface); border-color: var(--sj-border); border-left-color: var(--sj-gold-500); }
.sj-callout--notice  { background: var(--sj-warning-bg); border-color: rgba(122, 75, 0, 0.25); border-left-color: var(--sj-warning); }
.sj-callout--notice svg { stroke: var(--sj-warning); }
.sj-callout--custom  { background: var(--sj-maroon-50); border-color: rgba(122, 31, 43, 0.2); border-left-color: var(--sj-maroon-700); }
.sj-callout--custom svg { stroke: var(--sj-maroon-700); }
.sj-callout--payment { background: var(--sj-info-bg); border-color: rgba(47, 93, 124, 0.25); border-left-color: var(--sj-info); }
.sj-callout--payment svg { stroke: var(--sj-info); }

/* numbered steps */
.sj-policy-steps { list-style: none; margin: 0; padding: 0; counter-reset: sjstep; display: grid; gap: var(--sj-space-3); }
.sj-policy-steps > li { counter-increment: sjstep; position: relative; margin: 0; padding: var(--sj-space-3) var(--sj-space-4) var(--sj-space-3) 60px; min-height: 56px; background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-md); }
.sj-policy-steps > li::before { content: counter(sjstep); position: absolute; left: var(--sj-space-4); top: var(--sj-space-3); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sj-maroon-700); color: #fff; font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium); }

/* contact CTA + related pages */
.sj-policy__after { display: grid; gap: var(--sj-space-8); padding-bottom: var(--sj-space-16); }
.sj-policy-cta { display: grid; gap: var(--sj-space-6); padding: var(--sj-space-6); background: var(--sj-maroon-900); color: var(--sj-text-on-dark-muted); border-radius: var(--sj-radius-lg); border: 1px solid var(--sj-gold-700); }
.sj-policy-cta__title { font-family: var(--sj-font-display); font-weight: var(--sj-weight-display); font-size: var(--sj-text-h2); line-height: 1.15; color: var(--sj-text-on-dark); margin: 0 0 var(--sj-space-3); }
.sj-policy-cta p { font-size: var(--sj-text-body-sm); line-height: 1.65; max-width: 60ch; }
.sj-policy-cta strong { color: var(--sj-text-on-dark); font-weight: var(--sj-weight-medium); }
.sj-policy-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sj-space-3); margin-top: var(--sj-space-4); }
.sj-policy-cta .sj-btn--outline { --_fg: var(--sj-text-on-dark); --_bd: rgba(250, 247, 242, 0.5); --_bg-hover: rgba(250, 247, 242, 0.1); --_fg-hover: #fff; --_bd-hover: var(--sj-text-on-dark); }
.sj-policy-cta .sj-btn--text { --_fg: var(--sj-gold-300); --_fg-hover: #fff; }
.sj-policy-cta__details { display: grid; gap: var(--sj-space-3); margin: 0; font-size: var(--sj-text-body-sm); }
.sj-policy-cta__details dt { font-size: var(--sj-text-caption); letter-spacing: var(--sj-tracking-label); text-transform: uppercase; color: var(--sj-gold-300); }
.sj-policy-cta__details dd { margin: 2px 0 0; color: var(--sj-text-on-dark); overflow-wrap: anywhere; }
.sj-policy-cta__details a { display: inline-flex; align-items: center; min-height: var(--sj-hit); color: var(--sj-text-on-dark); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (min-width: 768px) { .sj-policy-cta { padding: var(--sj-space-8); } }
@media (min-width: 1024px) { .sj-policy-cta { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sj-space-12); align-items: start; } }

.sj-policy-related__title { font-family: var(--sj-font-display); font-weight: var(--sj-weight-display); font-size: var(--sj-text-h3); color: var(--sj-text); margin: 0 0 var(--sj-space-4); }
.sj-policy-related__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-space-3); grid-template-columns: minmax(0, 1fr); }
.sj-policy-related__grid a { display: grid; gap: 2px; min-height: var(--sj-hit); padding: var(--sj-space-4); background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-md); transition: border-color var(--sj-dur-normal) var(--sj-ease), background-color var(--sj-dur-normal) var(--sj-ease); }
.sj-policy-related__grid a:hover { border-color: var(--sj-gold-500); background: var(--sj-gold-100); }
.sj-policy-related__label { font-weight: var(--sj-weight-medium); color: var(--sj-maroon-700); }
.sj-policy-related__desc { font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); }
@media (min-width: 640px)  { .sj-policy-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sj-policy-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── About page ── */
.sj-about-hero { background: linear-gradient(180deg, var(--sj-sand) 0%, var(--sj-ivory) 100%); border-bottom: 1px solid var(--sj-border-gold); padding-block: var(--sj-space-6) var(--sj-space-12); }
.sj-about-hero__inner { display: grid; gap: var(--sj-space-8); align-items: center; }
.sj-about-hero__copy { display: grid; gap: var(--sj-space-4); justify-items: start; min-width: 0; }
.sj-about-hero__copy .sj-eyebrow { margin: 0; color: var(--sj-gold-700); }
.sj-about-hero__title { font-size: clamp(2.125rem, 1.5rem + 3vw, 4rem); }
.sj-about-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sj-space-3); margin-top: var(--sj-space-2); }
.sj-about-hero__visual { display: grid; place-items: center; padding: var(--sj-space-8); background: var(--sj-surface); border: 1px solid var(--sj-border-gold); border-radius: var(--sj-radius-lg); box-shadow: var(--sj-shadow-soft); }
.sj-about-hero__visual img { width: min(100%, 360px); height: auto; }
@media (min-width: 1024px) { .sj-about-hero { padding-block: var(--sj-space-16); } .sj-about-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sj-space-16); } }

.sj-about-section { padding-block: var(--sj-section-y); background: var(--sj-ivory); }
.sj-about-section--sand { background: var(--sj-sand); }
.sj-about-section--maroon { background: var(--sj-maroon-900); color: var(--sj-text-on-dark-muted); }
.sj-about-section--maroon .sj-h2, .sj-about-section--maroon h3 { color: var(--sj-text-on-dark); }
.sj-about-section--maroon .sj-eyebrow { color: var(--sj-gold-300); }
.sj-about-split { display: grid; gap: var(--sj-space-6); align-items: center; }
.sj-about-split--top { align-items: start; margin-top: var(--sj-space-6); }
.sj-about-split .sj-eyebrow, .sj-about-section .sj-section-head .sj-eyebrow { margin: 0 0 var(--sj-space-2); }
@media (min-width: 1024px) { .sj-about-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sj-space-16); } .sj-about-split--top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.sj-about-prose > * + * { margin-top: var(--sj-space-4); }
.sj-about-prose p { font-size: var(--sj-text-body); line-height: 1.75; max-width: 64ch; }
.sj-about-h3 { font-family: var(--sj-font-ui); font-size: var(--sj-text-body); font-weight: var(--sj-weight-medium); color: var(--sj-text); margin: var(--sj-space-6) 0 0; }
.sj-about-chips { list-style: none; margin: var(--sj-space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sj-space-2); }
.sj-about-chips a { display: inline-flex; align-items: center; min-height: var(--sj-hit); padding: 0 var(--sj-space-4); border: 1px solid var(--sj-maroon-700); border-radius: var(--sj-radius-pill); color: var(--sj-maroon-700); font-size: var(--sj-text-body-sm); font-weight: var(--sj-weight-medium); }
.sj-about-chips a:hover { background: var(--sj-maroon-700); color: #fff; }
.sj-about-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-space-2); }
.sj-about-list li { padding: var(--sj-space-3) 0; border-bottom: 1px solid var(--sj-border); font-size: var(--sj-text-body); color: var(--sj-text); }
.sj-about-list--ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sj-space-3); align-items: baseline; }
.sj-about-list--ticks li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--sj-gold-500); }

.sj-about-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-space-6); }
.sj-about-steps li { display: grid; gap: var(--sj-space-2); align-content: start; padding-top: var(--sj-space-4); border-top: 1px solid var(--sj-border-gold); }
.sj-about-steps__n { font-family: var(--sj-font-display); font-size: var(--sj-text-h2); line-height: 1; color: var(--sj-gold-700); }
.sj-about-steps h3 { font-family: var(--sj-font-display); font-weight: var(--sj-weight-display); font-size: var(--sj-text-h3); color: var(--sj-text); margin: 0; }
.sj-about-steps p { font-size: var(--sj-text-body-sm); line-height: 1.65; }
@media (min-width: 640px)  { .sj-about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sj-about-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sj-about-values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-space-6); }
.sj-about-values li { display: grid; gap: var(--sj-space-2); align-content: start; padding-top: var(--sj-space-4); border-top: 1px solid rgba(217, 199, 154, 0.45); }
.sj-about-values h3 { font-family: var(--sj-font-display); font-weight: var(--sj-weight-display); font-size: var(--sj-text-h3); margin: 0; }
.sj-about-values p { font-size: var(--sj-text-body-sm); line-height: 1.65; color: var(--sj-text-on-dark-muted); }
@media (min-width: 640px)  { .sj-about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sj-about-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sj-about-showrooms { display: grid; gap: var(--sj-space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .sj-about-showrooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sj-about-cta { padding-block: var(--sj-space-12); background: var(--sj-gold-100); border-block: 1px solid var(--sj-border-gold); text-align: center; }
.sj-about-cta .sj-container { display: grid; gap: var(--sj-space-4); justify-items: center; }
.sj-about-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sj-space-3); margin-top: var(--sj-space-2); }

/* ── Footer (3G): Shop / Company / Customer Care columns + a full-width showroom row ── */
.sj-site-footer__contact { grid-column: 1 / -1; padding-top: var(--sj-space-6); border-top: 1px solid var(--sj-border-gold); }
.sj-site-footer__branches { display: grid; gap: var(--sj-space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .sj-site-footer__branches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-space-8); } .sj-site-footer__branch + .sj-site-footer__branch { margin-top: 0; } }

/* Privacy: what-we-collect cards (stack on every width — no table, so no horizontal scrolling) */
.sj-policy__body .sj-policy-data { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-space-3); }
.sj-policy__body .sj-policy-data li { display: grid; gap: var(--sj-space-1); margin: 0; padding: var(--sj-space-3) var(--sj-space-4); background: var(--sj-surface); border: 1px solid var(--sj-border); border-left: 3px solid var(--sj-gold-500); border-radius: var(--sj-radius-md); }
.sj-policy-data strong { color: var(--sj-text); }
.sj-policy-data em { font-style: normal; font-size: var(--sj-text-body-sm); color: var(--sj-text-muted); }
.sj-about-cta__email { margin: 0; font-size: var(--sj-text-body-sm); color: var(--sj-text-soft); }
.sj-about-cta__email a { display: inline-flex; align-items: center; min-height: var(--sj-hit); color: var(--sj-maroon-700); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }

/* ── Customer order page (Phase 4): status, summary, cancel / report a problem ── */
.sj-order__body { display: grid; gap: var(--sj-space-6); padding-block: var(--sj-space-8) var(--sj-space-6); max-width: 760px; }
.sj-order__card { padding: var(--sj-space-6); background: var(--sj-surface); border: 1px solid var(--sj-border); border-radius: var(--sj-radius-lg); display: grid; gap: var(--sj-space-3); }
.sj-order__card p { margin: 0; }
.sj-order__stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-space-2); }
.sj-order__stages li { padding: var(--sj-space-2) var(--sj-space-3); border-left: 3px solid var(--sj-border); color: var(--sj-text-muted); font-size: var(--sj-text-body-sm); }
.sj-order__stages li.is-done { border-left-color: var(--sj-gold-500); color: var(--sj-text); font-weight: var(--sj-weight-medium); }
.sj-order__stages li[aria-current] { border-left-color: var(--sj-maroon-700); }
.sj-order__totals { display: grid; gap: var(--sj-space-2); margin: 0; }
.sj-order__totals > div { display: flex; justify-content: space-between; gap: var(--sj-space-4); font-size: var(--sj-text-body-sm); }
.sj-order__totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.sj-order__totals .is-total { padding-top: var(--sj-space-2); border-top: 1px solid var(--sj-border); font-size: var(--sj-text-body); font-weight: var(--sj-weight-medium); color: var(--sj-text); }
.sj-order__address { font-style: normal; font-size: var(--sj-text-body-sm); line-height: 1.6; }
.sj-order__form { display: grid; gap: var(--sj-space-4); }