/* ==========================================================================
   Mihrab — reverent minimalism for Islamic lifestyle essentials.

   Ported from the Stitch "Mihrab — Reverent Minimalism" design (the Serene
   Sanctuary design system lives at
   docs/templates/pending/stitch_56_mihrab_e_commerce_experience/…/DESIGN.md):
   a soft ivory canvas, deep-emerald actions and headlines, gold keylines and
   eyebrows, the signature arched (mihrab) image mask, Lora serif headlines
   (600 — the design's preferred 500 is not vendored) over Source Sans 3 body,
   a gentle 6px radius, and a deep-green footer.

   This theme OWNS its split arched hero, the gift-occasions band, the
   new-arrivals eyebrow override and the centered "Friday Reminders"
   newsletter (mb-* markup) and INHERITS Modern Retail's functional pages, the
   header/footer, the trust / promo / featured / categories / journal home
   partials and the product card. This stylesheet therefore has two jobs:

     (a) style the NEW `mb-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the ivory palette, applying the 6px radius,
         drawing the gold keyline structure and recolouring the deep-green
         footer.

   Everything is scoped under `body.mb-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so the
   customizer + live preview keep working.

   CONTRAST NOTE: the bright gold accent (#bfa04f) measures only ~2.4:1 on the
   ivory canvas, so it CANNOT carry text there. Gold text roles (eyebrows,
   hovers) use the darker bronze sibling --mb-gold-text (5.0:1 ivory / 4.8:1
   cream); gold keylines
   that must read as boundaries use --mb-gold-line (~3.1:1); the bright
   customizer-driven --mb-gold is reserved for FILLS and on-dark accents. Those
   two darker siblings are accessibility-locked literals and intentionally do
   NOT follow the customizer accent.
   ========================================================================== */

body.mb-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --mb-emerald: var(--bs-primary, #16483a);
    --mb-emerald-rgb: var(--bs-primary-rgb, 22, 72, 58);
    --mb-gold: var(--ll-accent, #bfa04f);
    --mb-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
    --mb-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;
    --mb-radius: var(--ll-btn-radius, 0.375rem);

    /* Serene Sanctuary palette (DESIGN.md) */
    --mb-ivory: #fbf9f8;
    --mb-white: #ffffff;
    --mb-cream: #f5f3f3;
    --mb-cream-deep: #efeded;
    --mb-ink: #1b1c1c;
    --mb-muted: #5f5e59;
    --mb-soft: #6b716c;
    --mb-line: #e4e2e2;
    /* Accessibility-locked gold siblings (see CONTRAST NOTE) */
    --mb-gold-line: #a98b3f;   /* keyline borders on light — ~3.1:1 */
    --mb-gold-text: #856819;   /* eyebrow/hover TEXT on light — 5.0:1 ivory / 4.8:1 cream */
    --mb-gold-light: #e8cf87;  /* gold TEXT on the deep-green footer — ~6.5:1 */

    /* Re-point the inherited base neutrals at the ivory palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--mb-ink);
    --mr-muted: var(--mb-muted);
    --mr-soft: var(--mb-soft);
    --mr-surface: var(--mb-ivory);
    --mr-band: var(--mb-cream);
    --mr-band-alt: var(--mb-cream);
    --mr-fill: var(--mb-cream-deep);
    --mr-border: var(--mb-line);
    --mr-border-strong: var(--mb-gold-line);
    --mr-radius: var(--mb-radius);
    --mr-gold: var(--mb-gold);
    --mr-shadow: 0 8px 24px rgba(var(--mb-emerald-rgb), 0.06);

    /* Keep bare prose links + Bootstrap .btn-link emerald, not stock blue,
       WITHOUT a bare `a{}` catch-all (which would repaint button labels). */
    --bs-link-color-rgb: var(--mb-emerald-rgb);
    --bs-link-hover-color-rgb: var(--mb-emerald-rgb);

    background-color: var(--mb-ivory);
    color: var(--mb-ink);
    font-family: var(--mb-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — Lora 600 headlines in deep emerald, gold-bronze tracked
   eyebrows.
   -------------------------------------------------------------------------- */
body.mb-theme h1, body.mb-theme h2, body.mb-theme h3,
body.mb-theme h4, body.mb-theme h5, body.mb-theme h6,
body.mb-theme .mr-display {
    font-family: var(--mb-font-head);
    color: var(--mb-emerald);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.mb-theme .mr-eyebrow,
body.mb-theme .mb-eyebrow {
    font-family: var(--mb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mb-gold-text);
}

/* --------------------------------------------------------------------------
   Buttons + inputs — emerald primary, gold-keyline ghost, gentle 6px radius.
   -------------------------------------------------------------------------- */
body.mb-theme .mr-btn,
body.mb-theme .mb-btn {
    border-radius: var(--mb-radius);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}

body.mb-theme .mr-btn--primary {
    background: var(--mb-emerald);
    border-color: var(--mb-emerald);
    color: #fff;
}

body.mb-theme .mr-btn--primary:hover { filter: brightness(1.12); color: #fff; }

body.mb-theme .mr-btn--outline,
body.mb-theme .mb-btn--ghost {
    background: transparent;
    border: 1px solid var(--mb-gold-line);
    color: var(--mb-emerald);
}

body.mb-theme .mr-btn--outline:hover,
body.mb-theme .mb-btn--ghost:hover {
    background: var(--mb-emerald);
    border-color: var(--mb-emerald);
    color: #fff;
    filter: none;
}

body.mb-theme .form-control,
body.mb-theme .form-select {
    background-color: var(--mb-white);
    border-color: var(--mb-line);
    border-radius: var(--mb-radius);
}

body.mb-theme .form-control:focus,
body.mb-theme .form-select:focus {
    border-color: var(--mb-emerald);
    box-shadow: 0 0 0 0.15rem rgba(var(--mb-emerald-rgb), 0.12);
}

/* Restore Bootstrap's caret gutter that a base padding shorthand eats — never
   a padding shorthand on a select. */
body.mb-theme .form-select { padding-inline-end: 2.25rem; }

/* Focus ring — emerald on light; gold on the deep-green footer. */
body.mb-theme a:focus-visible,
body.mb-theme button:focus-visible,
body.mb-theme input:focus-visible,
body.mb-theme select:focus-visible {
    outline: 2px solid var(--mb-emerald);
    outline-offset: 2px;
}
body.mb-theme .mr-footer a:focus-visible,
body.mb-theme .mr-footer button:focus-visible,
body.mb-theme .mr-footer input:focus-visible {
    outline-color: var(--mb-gold-light);
}

/* --------------------------------------------------------------------------
   Announcement band + header — emerald announce, ivory glass header, Lora
   wordmark, uppercase tracked nav.
   -------------------------------------------------------------------------- */
body.mb-theme .mr-announce {
    background: var(--mb-emerald);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    text-transform: uppercase;
}

body.mb-theme .mr-header {
    background: rgba(251, 249, 248, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mb-line);
}

body.mb-theme .mr-logo {
    font-family: var(--mb-font-head);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mb-emerald);
}

body.mb-theme .mr-logo img { max-height: 44px; }

body.mb-theme .mr-nav-link {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mb-muted);
}

body.mb-theme .mr-nav-link:hover,
body.mb-theme .mr-nav-link.is-active { color: var(--mb-emerald); }

body.mb-theme .mr-search input {
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    border-radius: var(--mb-radius);
}
body.mb-theme .mr-search input:focus { border-color: var(--mb-emerald); }

body.mb-theme .mr-icon-btn { color: var(--mb-emerald); }
body.mb-theme .mr-icon-btn:hover { color: var(--mb-gold-text); }

/* --------------------------------------------------------------------------
   The signature arched (mihrab) image mask — a domed top over a gently
   rounded base, used by the split hero and the gift-occasions tiles.
   -------------------------------------------------------------------------- */
body.mb-theme .mb-arched {
    overflow: hidden;
    border-top-left-radius: 50% 42%;
    border-top-right-radius: 50% 42%;
    border-bottom-left-radius: var(--mb-radius);
    border-bottom-right-radius: var(--mb-radius);
}

/* --------------------------------------------------------------------------
   Split hero — arched image left, copy right on the ivory canvas.
   -------------------------------------------------------------------------- */
body.mb-theme .mb-hero { padding: clamp(3rem, 6vw, 5.5rem) 0; }

body.mb-theme .mb-hero__figure { text-align: center; }

body.mb-theme .mb-hero__img {
    display: block;
    width: min(100%, 480px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-inline: auto;
    background: var(--mb-cream-deep);
    border: 1px solid rgba(var(--mb-emerald-rgb), 0.08);
}

body.mb-theme .mb-hero__title {
    font-family: var(--mb-font-head);
    font-weight: 600;
    color: var(--mb-emerald);
    font-size: clamp(2.3rem, 5vw, 3rem);
    line-height: 1.12;
    margin-bottom: 1.25rem;
}

body.mb-theme .mb-hero__lead {
    color: var(--mb-muted);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 46ch;
    margin-bottom: 2rem;
}

body.mb-theme .mb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Gift-occasions band — up to four arched photographic tiles.
   -------------------------------------------------------------------------- */
body.mb-theme .mb-occasion {
    display: block;
    text-align: center;
    text-decoration: none;
}

body.mb-theme .mb-occasion__figure {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--mb-cream-deep);
    margin-bottom: 1rem;
}

body.mb-theme .mb-occasion__img,
body.mb-theme .mb-occasion__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

body.mb-theme .mb-occasion__placeholder {
    background: linear-gradient(160deg, var(--mb-cream) 0%, var(--mb-cream-deep) 100%);
}

body.mb-theme .mb-occasion:hover .mb-occasion__img { transform: scale(1.05); }

body.mb-theme .mb-occasion__title {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mb-emerald);
}

body.mb-theme .mb-occasion__label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--mb-muted);
}

/* --------------------------------------------------------------------------
   Inherited promo tiles — emerald scrim, gold-underline caption link.
   -------------------------------------------------------------------------- */
body.mb-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--mb-emerald-rgb), 0) 30%, rgba(var(--mb-emerald-rgb), 0.82) 100%);
}
body.mb-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--mb-emerald-rgb), 0.15) 30%, rgba(var(--mb-emerald-rgb), 0.9) 100%);
}
body.mb-theme .mr-promo__title { font-family: var(--mb-font-head); font-weight: 600; }
body.mb-theme .mr-promo:hover .mr-promo__cta {
    color: var(--mb-gold-light);
    border-color: var(--mb-gold-light);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — ivory media well, Lora emerald titles,
   emerald price, gold-bronze category eyebrow. Overlay controls: white circle
   with an emerald glyph (hover inverts) — both restyled together and checked
   in both states.
   -------------------------------------------------------------------------- */
body.mb-theme .mr-card { background: transparent; }
body.mb-theme .mr-card__media { background: var(--mb-cream); }

body.mb-theme .mr-card__title,
body.mb-theme .mr-card__title a {
    font-family: var(--mb-font-head);
    font-weight: 600;
    color: var(--mb-emerald);
}
body.mb-theme .mr-card__title a:hover { color: var(--mb-gold-text); }

body.mb-theme .mr-card__eyebrow {
    color: var(--mb-gold-text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

body.mb-theme .mr-card__price { color: var(--mb-emerald); font-weight: 600; }

body.mb-theme .mr-card__badge {
    background: var(--mb-gold);
    color: #1b1c1c;
    letter-spacing: 0.06em;
}

body.mb-theme .mr-card__wish,
body.mb-theme .mr-card__quickview {
    background: var(--mb-white);
    color: var(--mb-emerald);
}
body.mb-theme .mr-card__wish:hover,
body.mb-theme .mr-card__quickview:hover,
body.mb-theme .mr-card__wish.is-active {
    background: var(--mb-emerald);
    color: #fff;
}

body.mb-theme .mr-card__quick {
    background: var(--mb-emerald);
    color: #fff;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Inherited category tiles + journal + rails on the ivory system.
   -------------------------------------------------------------------------- */
body.mb-theme .mr-article__title,
body.mb-theme .mr-article__title a { font-family: var(--mb-font-head); font-weight: 600; color: var(--mb-emerald); }
body.mb-theme .mr-article__title a:hover { color: var(--mb-gold-text); }

body.mb-theme .mr-ulink { color: var(--mb-emerald); }
body.mb-theme .mr-ulink:hover { color: var(--mb-gold-text); }

body.mb-theme .mr-rail-btn { border-color: var(--mb-line); color: var(--mb-emerald); }
body.mb-theme .mr-rail-btn:hover { background: var(--mb-emerald); border-color: var(--mb-emerald); color: #fff; }

body.mb-theme .mr-divider { border-color: var(--mb-line); opacity: 1; }

/* --------------------------------------------------------------------------
   "Friday Reminders" newsletter — centered band on the container surface.
   -------------------------------------------------------------------------- */
body.mb-theme .mb-newsletter {
    background: var(--mb-cream-deep);
    padding: clamp(4rem, 8vw, 6rem) 0;
}

body.mb-theme .mb-newsletter__inner { max-width: 34rem; margin-inline: auto; }

body.mb-theme .mb-newsletter__lead {
    color: var(--mb-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2.25rem;
}

body.mb-theme .mb-newsletter__form {
    display: flex;
    max-width: 30rem;
    margin-inline: auto;
    border: 1px solid var(--mb-line);
    border-radius: var(--mb-radius);
    overflow: hidden;
    background: var(--mb-white);
}

body.mb-theme .mb-newsletter__form input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.9rem 1.25rem;
    font-family: var(--mb-font-body);
    color: var(--mb-ink);
}
body.mb-theme .mb-newsletter__form input:focus { outline: none; }
body.mb-theme .mb-newsletter__form input::placeholder { color: var(--mb-soft); }

body.mb-theme .mb-newsletter__form .mr-btn {
    border-radius: 0;
    border: none;
}

body.mb-theme .mb-newsletter__note {
    margin-top: 1rem;
    color: var(--mb-soft);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Footer — deep emerald band; recolour every inherited text token riding on
   it and invert the primary (Join) button so it isn't emerald-on-emerald.
   -------------------------------------------------------------------------- */
body.mb-theme .mr-footer {
    background: var(--mb-emerald);
    border-top: none;
    color: rgba(255, 255, 255, 0.78);
}

body.mb-theme .mr-footer__brand {
    font-family: var(--mb-font-head);
    font-weight: 600;
    color: #fff;
}

body.mb-theme .mr-footer h4 { color: #fff; }

body.mb-theme .mr-footer a { color: #a9cabd; }
body.mb-theme .mr-footer a:hover { color: var(--mb-gold-light); }
body.mb-theme .mr-footer__brand:hover { color: #fff; }

body.mb-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.72); }
body.mb-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.65); }
body.mb-theme .mr-footer .mr-divider { border-color: rgba(255, 255, 255, 0.15); }

body.mb-theme .mr-footer .form-control {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
body.mb-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.6); }

/* Invert the footer's primary button — an emerald fill on the emerald band is
   invisible; use an ivory fill with emerald text (9.6:1). */
body.mb-theme .mr-footer .mr-btn--primary {
    background: var(--mb-ivory);
    border-color: var(--mb-ivory);
    color: var(--mb-emerald);
}
body.mb-theme .mr-footer .mr-btn--primary:hover { filter: brightness(0.95); }

body.mb-theme .mr-social {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
body.mb-theme .mr-social:hover { background: var(--mb-gold); color: #16483a; }

/* --------------------------------------------------------------------------
   Motion — the design is calm; honour reduced-motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.mb-theme .mr-btn,
    body.mb-theme .mb-btn,
    body.mb-theme .mb-occasion__img,
    body.mb-theme .mr-promo__img,
    body.mb-theme .mr-promo__scrim,
    body.mb-theme .mr-promo__cta {
        transition: none;
    }
    body.mb-theme .mb-occasion:hover .mb-occasion__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): copy stacks above the arched image,
   tighter hero, smaller wordmark.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.mb-theme .mb-hero { padding: 2.5rem 0 3rem; }
    body.mb-theme .mb-hero__title { font-size: 2.1rem; }
    body.mb-theme .mb-hero__img { width: min(100%, 360px); }
    body.mb-theme .mr-logo { font-size: 1.35rem; }
}