/* ==========================================================================
   Noor Modest — serene modesty for a modern boutique.

   Ported from the Stitch "Noor Modest — Serene Modesty" design (the Serene
   Contemporary Elegance design system lives at
   docs/templates/pending/stitch_22_noor_modest_e_commerce_store/…/DESIGN.md):
   warm sand canvas, deep olive authority (text + CTAs), muted clay-rose
   accents, Playfair Display (400) headlines over Source Sans 3 UI, soft 8px
   corners, and a "Flat-Luxury" aesthetic — depth from tonal layering, NEVER
   shadows.

   This theme OWNS its hero / featured / styling-edit / new-arrivals /
   newsletter home sections (nm-* markup) and INHERITS Modern Retail's
   header, footer and the trust / promo / categories / journal / brands home
   partials, plus every functional page (product, category, cart, checkout,
   account, search, blog…). This stylesheet therefore has two jobs:

     (a) style the NEW `nm-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the sand/white palette, softening corners to
         8px, and — the one measured risk in this palette — routing every
         inherited rule that uses the accent AS TEXT/ICON/FOCUS-RING onto a
         legible clay-rose-ink sibling (see the CONTRAST block below).

   Everything is scoped under `body.nm-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: change the primary colour and
   every olive surface follows.

   ---------------------------------------------------------------------------
   CONTRAST — measured with App\Support\Theming\ContrastChecker (WCAG 2.1),
   canvas = warm sand #f4efe7, panel = white #ffffff:

     primary/olive  #3f4630 as text on sand ............... 8.61:1  PASS AA
     white text on olive #3f4630 fill ...................... 9.86:1  PASS AA
     --mr-ink   #29301b (headings) on sand ................ 11.97:1  PASS AA
     --mr-muted #46483f (body/price) on sand ............... 8.12:1  PASS AA
     --mr-soft  #76786e (least-emphasis) on sand ............ 3.92:1  sub-AA
       (passes the 3:1 non-text/large-text floor; matches the tier every
       sibling theme ships --mr-soft at — NOT used for body copy.)

     accent/clay-rose #bf8b74 as TEXT on sand ............... 2.56:1  FAIL
     white text on clay-rose #bf8b74 FILL .................... 2.93:1  FAIL
       (fails even the 3:1 UI-component floor — the sale badge and every
       inherited rule that paints the accent as text/icon/focus-ring would
       be illegible. Per the design's own M3 ramp there is already a
       darker "secondary" rose — #805440 — used in the export for sale
       prices and field labels. Shipped below as --nm-rose-ink:)
     --nm-rose-ink #805440 as text on sand ................... 5.63:1  PASS AA
     white text on --nm-rose-ink #805440 FILL ................ 6.44:1  PASS AA
     --nm-rose-ink #805440 on white ........................... 6.44:1  PASS AA

   Resolution: raw clay-rose (--nm-rose, = --ll-accent) is reserved for
   non-text FILLS/keylines only (the dark olive band's decorative accents);
   every base rule that uses the accent for text, icons, badges or a focus
   ring is re-pointed to --nm-rose-ink in the "accent text-safety" block
   below. --bs-link-color-rgb is also set explicitly (Bootstrap paints bare
   <a> via rgba(var(--bs-link-color-rgb),1); theme-vars only sets the hex
   --bs-link-color, so without this bare links render factory blue).
   ========================================================================== */

body.nm-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --nm-olive: var(--bs-primary, #3f4630);
    --nm-olive-rgb: var(--bs-primary-rgb, 63, 70, 48);
    --nm-rose: var(--ll-accent, #bf8b74);
    --nm-radius: var(--ll-btn-radius, 0.5rem);
    --nm-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --nm-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Serene Modesty palette (DESIGN.md) */
    --nm-sand: #f4efe7;
    --nm-white: #ffffff;
    --nm-band: #f6f3ef;
    --nm-band-alt: #f0edea;
    --nm-well: #ebe8e4;
    --nm-ink: #29301b;
    --nm-muted: #46483f;
    --nm-soft: #76786e;
    --nm-line: #e5e2de;
    --nm-line-strong: #c7c7bc;
    /* Text-safe accent sibling — see the CONTRAST block above. Deliberately a
       fixed literal (not derived from --ll-accent) so it stays legible even
       if a merchant's customizer accent choice drifts light; the same
       trade-off pulse's --ps-olive ships (brand-flavoured text lags one step
       behind a live accent change, but never renders illegibly). */
    --nm-rose-ink: #805440;

    /* Re-point the inherited base neutrals at the sand/white palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--nm-ink);
    --mr-muted: var(--nm-muted);
    --mr-soft: var(--nm-soft);
    --mr-surface: var(--nm-sand);
    --mr-band: var(--nm-band);
    --mr-band-alt: var(--nm-band-alt);
    --mr-fill: var(--nm-well);
    --mr-border: var(--nm-line);
    --mr-border-strong: var(--nm-line-strong);
    --mr-radius: var(--nm-radius);
    --mr-gold: var(--nm-rose-ink);
    --mr-shadow: none;

    /* Bootstrap paints bare <a> via rgba(var(--bs-link-color-rgb), 1); the
       shared theme-vars partial only emits the hex --bs-link-color, so
       without this links render Bootstrap's factory blue. Olive is dark, so
       aliasing straight to --bs-primary-rgb (already correct) is safe. */
    --bs-link-color-rgb: var(--nm-olive-rgb);

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

/* --------------------------------------------------------------------------
   Shape discipline — soft 8px corners everywhere (DESIGN.md "Soft 8px
   Corners"); the customizer button_radius default IS 0.5rem, so most of this
   falls out of the --mr-radius / --bs-border-radius re-point already. No
   hard flatten — this design is round, not sharp.
   -------------------------------------------------------------------------- */
body.nm-theme .mr-card__media,
body.nm-theme .mr-promo,
body.nm-theme .mr-promo__img,
body.nm-theme .mr-tile,
body.nm-theme .mr-article__media,
body.nm-theme .mr-panel,
body.nm-theme .mr-summary,
body.nm-theme .nm-styling__frame {
    border-radius: var(--nm-radius);
}

/* --------------------------------------------------------------------------
   Typography — Playfair 400 authority, rose-ink tracked eyebrows.
   -------------------------------------------------------------------------- */
body.nm-theme h1, body.nm-theme h2, body.nm-theme h3,
body.nm-theme h4, body.nm-theme h5, body.nm-theme h6,
body.nm-theme .mr-display {
    font-family: var(--nm-font-head);
    color: var(--nm-ink);
    font-weight: 400;
    letter-spacing: -0.01em;
}

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

/* Eyebrows sitting on the dark olive styling-edit band need the light M3
   "secondary-fixed" peach, not the sand-legible rose-ink (7.63:1 measured). */
body.nm-theme .nm-eyebrow--on-dark { color: #ffdbcc; }

/* --------------------------------------------------------------------------
   Buttons — solid olive primary / olive-outline secondary, both already
   correct from the inherited defaults (var(--bs-primary) is dark, so no
   colour override needed) — just the focus glow needs to stop being
   Bootstrap's hard-coded blue.
   -------------------------------------------------------------------------- */
body.nm-theme .form-control:focus,
body.nm-theme .form-select:focus {
    border-color: var(--nm-olive);
    box-shadow: 0 0 0 3px rgba(var(--nm-olive-rgb), 0.16);
}

body.nm-theme .mr-btn {
    letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   Announcement + header — the export's announcement bar is solid olive with
   white text (bg-primary-container / text-on-primary), not an accent tint.
   Header itself is INHERITED unmodified (logo-left single row already
   matches); only the icon hover softens to a fade instead of an accent
   colour swap, matching the export's `hover:opacity-70`.
   -------------------------------------------------------------------------- */
body.nm-theme .mr-announce {
    background-color: var(--nm-olive);
    color: #fff;
}

body.nm-theme .mr-header {
    background-color: var(--nm-sand); /* fallback for no color-mix (Chrome < 111) */
    background-color: color-mix(in srgb, var(--nm-sand) 85%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   Hero — warm sand split: image left, copy right (see CONTRAST block for the
   eyebrow colour rationale).
   -------------------------------------------------------------------------- */
body.nm-theme .nm-hero { padding: 3rem 0 clamp(2.5rem, 6vw, 4rem); }

body.nm-theme .nm-hero__figure {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--nm-radius);
}

body.nm-theme .nm-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.nm-theme .nm-hero__title {
    font-size: clamp(2.25rem, 4.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    max-width: 18ch;
}

body.nm-theme .nm-hero__lead {
    color: var(--nm-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 40ch;
    margin-bottom: 1.75rem;
}

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

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white media well on the sand canvas
   (DESIGN.md "Product Cards: … slight White background fill"), left-aligned
   text, price in a bolder weight. Applies to home grids AND shop / search /
   related rails since the card partial is shared.
   -------------------------------------------------------------------------- */
body.nm-theme .mr-card__media { background: var(--nm-white); }

body.nm-theme .mr-card__eyebrow { color: var(--nm-soft); }
body.nm-theme .mr-card__title, body.nm-theme .mr-card__title a { color: var(--nm-ink); font-weight: 500; }
body.nm-theme .mr-card__title a:hover { color: var(--nm-rose-ink); }
body.nm-theme .mr-card__price { color: var(--nm-muted); font-weight: 600; }

/* Sale badge — the base default is white text on the raw accent fill, which
   measures 2.93:1 (see CONTRAST). Route it to the text-safe rose-ink. */
body.nm-theme .mr-card__badge { background: var(--nm-rose-ink); }
body.nm-theme .mr-badge--wish { background-color: var(--nm-rose-ink); }

/* Wish + quick-view overlay controls (recurring bug — restyle together and
   check BOTH states). Default colour is var(--bs-primary) unchanged from the
   base — already 9.86:1 on the near-white circle since olive is dark, so no
   override is needed there; the hover state is already token-safe via the
   base's mr-surface/mr-ink fix. The "wishlisted" filled-heart state gets the
   rose-ink accent as a deliberate brand flourish (6.44:1, safe). */
body.nm-theme .mr-card__wish.is-active { color: var(--nm-rose-ink); }

/* --------------------------------------------------------------------------
   Inherited promo tiles / category tiles / trust strip — icons and hover
   CTAs read olive by default (matching the export's `text-primary` icons
   exactly); the promo caption's rose accent moves to the text-safe ink.
   -------------------------------------------------------------------------- */
body.nm-theme .mr-trust svg { color: var(--nm-olive); }

body.nm-theme .mr-promo__cta { color: #fff; }
body.nm-theme .mr-promo:hover .mr-promo__cta {
    color: var(--nm-rose-ink);
    border-color: var(--nm-rose-ink);
}

body.nm-theme .mr-tile--cat .mr-tile__scrim { background: rgba(41, 48, 27, 0.32); }

/* --------------------------------------------------------------------------
   Styling Edit — the dark olive editorial band with a staggered 3-image
   lookbook rhythm (the export's -mb-20 / -mb-32 middle-tile offset).
   -------------------------------------------------------------------------- */
body.nm-theme .nm-styling {
    background: var(--nm-olive);
    color: #fff;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    overflow: hidden;
}

body.nm-theme .nm-styling__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
body.nm-theme .nm-styling__title { color: #fff; }

body.nm-theme .nm-styling__frame {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

body.nm-theme .nm-styling__img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.nm-theme .nm-styling__img--placeholder {
    display: block;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

body.nm-theme .nm-styling__caption {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    max-width: 26ch;
    margin-bottom: 0;
}

/* The export staggers the MIDDLE tile lower for a lookbook rhythm — a
   layout offset (not a hover animation, so prefers-reduced-motion does not
   apply) gated to the lg breakpoint: the row-cols-md-3 grid already goes
   3-up at 768px, but the stagger only reads well once there is enough
   vertical room, so tablet (768-991px) renders the three tiles evenly and
   desktop (>=992px) gets the full staggered rhythm. */
@media (min-width: 992px) {
    body.nm-theme .nm-styling__col--offset { margin-bottom: -3rem; }
}

/* --------------------------------------------------------------------------
   Newsletter — centered sand panel (the export has no dark CTA band here,
   no eyebrow, no image column).
   -------------------------------------------------------------------------- */
body.nm-theme .nm-cta { padding-block: clamp(3.5rem, 7vw, 6rem); }

body.nm-theme .nm-cta__inner { max-width: 30rem; }

body.nm-theme .nm-cta__title { color: var(--nm-ink); }

body.nm-theme .nm-cta__body {
    color: var(--nm-muted);
    line-height: 1.6;
}

body.nm-theme .nm-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

body.nm-theme .nm-cta__form input {
    flex: 1 1 auto;
    min-width: 12rem;
    background: transparent;
    border: 1px solid var(--nm-line-strong);
    border-radius: var(--nm-radius);
    color: var(--nm-ink);
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
}

body.nm-theme .nm-cta__form input::placeholder { color: var(--nm-soft); }

body.nm-theme .nm-cta__form input:focus {
    outline: none;
    border-color: var(--nm-olive);
    box-shadow: 0 0 0 3px rgba(var(--nm-olive-rgb), 0.16);
}

body.nm-theme .nm-cta__btn {
    background: var(--nm-olive);
    color: #fff;
    border: 0;
    border-radius: var(--nm-radius);
    padding: 0.85rem 2rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.nm-theme .nm-cta__note {
    color: var(--nm-soft);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Accent text-safety — every base rule that paints the accent AS TEXT, an
   ICON, a BADGE fill or a FOCUS RING is re-pointed to --nm-rose-ink (see the
   CONTRAST block at the top of this file). Raw --nm-rose / --ll-accent stays
   reserved for non-text fills and keylines only.
   -------------------------------------------------------------------------- */
body.nm-theme .mr-ulink:hover { color: var(--nm-olive); border-color: var(--nm-olive); }
body.nm-theme .mr-nav-link.is-active { color: var(--nm-ink); font-weight: 600; border-bottom-color: var(--nm-rose-ink); }
body.nm-theme .mr-icon-btn:hover { color: var(--nm-olive); opacity: 0.7; }
body.nm-theme .mr-footer a:hover { color: var(--nm-rose-ink); }
body.nm-theme .mr-crumbs a:hover { color: var(--nm-rose-ink); }
body.nm-theme .mr-cart-row__title a:hover { color: var(--nm-rose-ink); }
body.nm-theme .mr-article__title a:hover { color: var(--nm-rose-ink); }
body.nm-theme .mr-tabs .nav-link.active { border-bottom-color: var(--nm-rose-ink); }
body.nm-theme .mr-btn--light:hover { background-color: var(--nm-rose-ink); color: #fff; }
body.nm-theme a:focus-visible,
body.nm-theme button:focus-visible,
body.nm-theme input:focus-visible {
    outline-color: var(--nm-rose-ink);
}

/* --------------------------------------------------------------------------
   Inherited chrome — footer, journal, brand strip: soften onto the sand
   palette (most of the work is done by the --mr-* token re-point above).
   -------------------------------------------------------------------------- */
body.nm-theme .mr-footer { background: var(--nm-olive); border-top: 0; color: rgba(255, 255, 255, 0.85); }
body.nm-theme .mr-footer h4 { color: rgba(255, 255, 255, 0.6); }
body.nm-theme .mr-footer a { color: rgba(255, 255, 255, 0.85); }
body.nm-theme .mr-footer__brand { color: #fff; }
body.nm-theme .mr-footer .mr-muted,
body.nm-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.6); }

body.nm-theme .mr-social {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
body.nm-theme .mr-social:hover { background: var(--nm-rose-ink); border-color: var(--nm-rose-ink); color: #fff; }

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

body.nm-theme .mr-brands__mark,
body.nm-theme .mr-brand { font-family: var(--nm-font-head); color: var(--nm-soft); }

body.nm-theme .mr-divider { background-color: var(--nm-line); opacity: 1; }
body.nm-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.15); }

/* Respect reduced-motion — kill decorative transforms/lifts, incl. the
   inherited hover-zoom transforms on cards/tiles/promo media. */
@media (prefers-reduced-motion: reduce) {
    body.nm-theme .mr-btn,
    body.nm-theme .mr-card,
    body.nm-theme .mr-card__media img,
    body.nm-theme .mr-tile__img,
    body.nm-theme .mr-promo__img,
    body.nm-theme .mr-reveal {
        transition: none;
    }
    body.nm-theme .mr-card:hover .mr-card__media img,
    body.nm-theme .mr-tile:hover .mr-tile__img,
    body.nm-theme .mr-promo:hover .mr-promo__img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frame): tighter hero stack, no lookbook
   stagger, 20px margins.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.nm-theme .nm-hero { padding: 2rem 0 2.5rem; }
    body.nm-theme .nm-hero__title { font-size: 2rem; max-width: none; }
}