/* ==========================================================================
   Pashm — mountain-winter heritage for hand-loomed pashmina, chadars and
   wool knits.

   Ported from the Stitch "Pashm Heritage System" design (design system at
   docs/templates/pending/stitch_69_pashm_e_commerce_homepage_storefront/
   …/pashm_heritage_system/DESIGN.md; the homepage code.html's RENDERED values
   are authoritative wherever the two disagree): a Soft Snow canvas that
   stands in for harsh white, Deep Russet structure and actions, an antique
   brass label voice for eyebrows and small caps, Lora for every narrative
   element (wordmark, display headlines, section titles) over Inter for
   navigation, body copy and the `Rs.` price role, and the design system's
   "barely rounded" 4px shape. Depth is TONAL LAYERING + 1px keylines — the
   design system explicitly forbids synthetic drop shadows.

   This theme OWNS the split hero, the bento collection wall, the curated /
   new-this-season grids, the newsletter band, the centred-wordmark header and
   the child-only "loom-story" band (pm-* markup), and INHERITS Modern
   Retail's footer, trust strip, collection band, journal, brands strip,
   product card and every functional page. This stylesheet therefore has three
   jobs:

     (a) style the NEW `pm-*` markup into the Stitch design;
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the snow/russet palette, which carries the
         restyle into shop / PDP / cart / checkout / account / blog for free;
         and
     (c) carve out the template's two DARK surfaces (the russet announcement
         bar and the deep-russet footer) inside an otherwise light theme, so
         only those components get literal light-on-dark overrides while the
         shared tokens stay light-canvas-safe.

   Everything is scoped under `body.pm-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --bs-border-radius) with theme.json-default fallbacks, so
   the customizer + live preview keep working: change the primary colour and
   every russet surface follows.

   -------------------------------------------------------------------------
   CONTRAST (measured against the FIXED tokens — primary Deep Russet #7b3b2d /
   accent Antique Brass #7a582a / Soft Snow canvas #f7f4f0 — never simplify
   these back to the export's raw Warm Camel):

     - Deep Russet (primary) is DARK, so it is safe as text AND as a
       white-text fill everywhere the base already uses it: 7.64:1 on snow,
       8.38:1 on white, 8.38:1 white-on-russet, 7.56:1 on the low band
       #fff0ee, 6.85:1 on the blush band #f4e5e2, 7.21:1 on the newsletter
       container #f9ebe8. Verified and NOT overridden: .mr-btn--primary /
       --outline, .mr-badge, .mr-card__quick, .mr-filter__link,
       .mr-page.is-active, .mr-step__dot, .mr-acct-avatar, .mr-acct-link,
       .mr-rail-btn:hover, .mr-gallery__thumb.is-active, Bootstrap
       .btn-primary (the shared PDP "Submit review" button) and .btn-link.
       There is NO light-primary trap on this theme.
       --bs-link-color-rgb IS set below: theme-vars.blade.php never emits it,
       so bare anchors (CMS pages, blog-post body, quick-view "Category" link)
       would otherwise hover toward Bootstrap's factory blue. A bare
       `body.pm-theme a { color: … }` catch-all is deliberately NOT used — it
       would out-specify `.mr-btn--primary { color:#fff }` and blank the hero
       CTA's label on the dark russet fill.
     - Antique Brass (accent) is the export's own `secondary` #7a582a — the
       colour its eyebrows, card meta lines and SALE chip actually render in —
       and it is text-safe on every light surface here: 5.88:1 on snow,
       6.45:1 on white, 5.82:1 on the low band, 5.27:1 on the blush band,
       5.55:1 on the newsletter container, 4.98:1 on the fill, and 6.45:1
       white-on-brass. So the inherited accent roles need NO darker sibling:
       .mr-eyebrow, .mr-card__eyebrow, .mr-card__wish.is-active (5.88),
       .mr-badge--wish (6.45 white-on-brass), .mr-icon-btn:hover,
       .mr-ulink:hover, .mr-tabs .nav-link.active and the focus ring all pass
       as shipped.
     - Warm Camel #c99e6a — the hue DESIGN.md's prose calls the accent — is
       only 2.23:1 on snow and 3.43:1 under russet ink, so it is a
       DECORATIVE-ONLY token here (--pm-camel): hairline rules, the loom
       tick glyph's ghost, keyline flourishes. It never carries text. Its
       light sibling --pm-camel-fixed #edbe88 (the export's own
       `secondary-fixed-dim`) is the accent for the two dark surfaces:
       7.02:1 on the deep-russet footer and 4.92:1 on the russet
       announcement bar.
     - The deep-russet footer #5e2519 (the color-mix that tracks a merchant's
       primary resolves to #5d2d22, within 0.7 of every ratio below) is a
       THIRD canvas: white 11.27:1, --pm-on-deep #fceeeb 9.96:1, the muted
       80% composite 6.97:1, --pm-camel-fixed 6.61:1. Body ink (1.05:1) is
       never used on it.
     - The SHARED price component's struck "was" grey #9aa0a6 is 2.41:1 on
       snow (it was tuned for a white canvas) and is re-inked below to
       --pm-soft (5.94:1). The shared sale red #d6293e is 4.51:1 on snow and
       stays as-is so it never desynchronises from the discount pill.
     - --pm-soft is deliberately DARKENED away from the export's `outline`
       #86736f (4.08:1 on snow — short of AA for the small breadcrumb /
       card-eyebrow / field-label text it carries) to #6b5a56 (5.94:1 on
       snow, 5.32:1 on the blush band). The export's #d9c1bc
       `outline-variant` survives as --pm-keyline, a border role only.
     - Photographic captions: the base's category scrim rgba(19,27,46,.34)
       leaves white type at ~1.9:1 over a bright photo, and the export's own
       `bg-black/20` promo scrim is no better. Both are re-tinted below —
       the collection band to rgba(94,37,25,.70) (white 4.99:1 worst case,
       i.e. over a blown-out white photo) and the wall tiles to a
       bottom-weighted gradient ending at rgba(0,0,0,.65) (white 7.00:1
       worst case).
   ------------------------------------------------------------------------- */

body.pm-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --pm-russet: var(--bs-primary, #7b3b2d);
    --pm-russet-rgb: var(--bs-primary-rgb, 123, 59, 45);
    --pm-brass: var(--ll-accent, #7a582a);
    --pm-radius: var(--bs-border-radius, 0.25rem);
    --pm-font-head: var(--ll-font-headings, "Lora"), Georgia, "Times New Roman", serif;
    --pm-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* The export's darker `primary` #5e2519 — the footer surface and the
       primary button's hover. Derived from the customizer primary so it
       tracks a merchant's brand colour instead of freezing the demo's. */
    --pm-deep: #5e2519;
    --pm-deep: color-mix(in srgb, var(--bs-primary, #7b3b2d) 76%, #000 24%);

    /* Pashm Heritage palette (DESIGN.md prose + the rendered code.html — the
       canvas is Soft Snow, which the prose calls out as the warmer,
       parchment-like replacement for pure white). */
    --pm-snow: #f7f4f0;
    --pm-white: #ffffff;
    --pm-band: #fff0ee;      /* surface-container-low  — curated band       */
    --pm-band-alt: #f4e5e2;  /* surface-container-high — collection band    */
    --pm-container: #f9ebe8; /* surface-container      — newsletter band    */
    --pm-fill: #eedfdc;      /* surface-variant — placeholder / media well  */
    --pm-keyline: #d9c1bc;   /* outline-variant — hairline structure        */
    --pm-keyline-strong: #bfa39d;
    --pm-ink: #211a18;       /* on-surface                                  */
    --pm-muted: #53433f;     /* on-surface-variant                          */
    --pm-soft: #6b5a56;      /* darkened `outline` — see CONTRAST note      */

    /* Warm Camel — DECORATIVE ONLY (2.23:1 on snow). Never carries text. */
    --pm-camel: #c99e6a;
    /* …and its light sibling, the accent for the two dark surfaces. */
    --pm-camel-fixed: #edbe88;

    /* Light-on-dark roles for the russet announcement bar + the deep-russet
       footer — the only dark surfaces in this light theme. */
    --pm-on-deep: #fceeeb;
    --pm-on-deep-muted: rgba(252, 238, 235, 0.8);
    --pm-on-deep-border: rgba(252, 238, 235, 0.2);

    /* Re-point the inherited base neutrals at the snow palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radii)
       follows across shop / PDP / cart / checkout / account / blog. Depth
       stays FLAT — the design system forbids drop shadows. */
    --mr-ink: var(--pm-ink);
    --mr-muted: var(--pm-muted);
    --mr-soft: var(--pm-soft);
    --mr-surface: var(--pm-snow);
    --mr-band: var(--pm-band);
    --mr-band-alt: var(--pm-band-alt);
    --mr-fill: var(--pm-fill);
    --mr-border: var(--pm-keyline);
    --mr-border-strong: var(--pm-keyline-strong);
    --mr-radius: 0.25rem;
    --mr-gold: var(--pm-brass);
    --mr-shadow: none;

    /* Bootstrap's own neutral surfaces (NOT covered by the --mr-* re-point):
       .bg-light backs the shared review card and the category facet
       headings, and the cool factory grey clashes with the snow canvas. */
    --bs-body-bg: var(--pm-snow);
    --bs-secondary-bg: var(--pm-band);
    --bs-link-color-rgb: var(--pm-russet-rgb);

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

/* --------------------------------------------------------------------------
   Shape & depth discipline — DESIGN.md's "barely rounded" 4px radius on
   cards, inputs and image containers (the customizer button_radius default IS
   0.25rem, so .mr-btn already inherits it via --bs-border-radius), and ZERO
   elevation: keyline framing and tonal layers only.
   -------------------------------------------------------------------------- */
body.pm-theme .mr-card__media,
body.pm-theme .mr-article__media,
body.pm-theme .mr-article__media img,
body.pm-theme .mr-tile,
body.pm-theme .mr-promo,
body.pm-theme .mr-card__badge,
body.pm-theme .form-control,
body.pm-theme .form-select,
body.pm-theme .dropdown-menu,
body.pm-theme .offcanvas,
body.pm-theme .pm-tile {
    border-radius: var(--mr-radius);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Typography — "a scholarly serif for storytelling, a high-performance sans
   for commerce": Lora narrative headlines with a touch of negative tracking,
   Inter body, and widely tracked brass label-caps eyebrows.
   -------------------------------------------------------------------------- */
body.pm-theme h1, body.pm-theme h2, body.pm-theme h3,
body.pm-theme h4, body.pm-theme h5, body.pm-theme h6,
body.pm-theme .mr-display,
body.pm-theme .mr-headline {
    font-family: var(--pm-font-head);
    color: var(--pm-ink);
    letter-spacing: -0.02em;
}

/* Section headings sit at the design's headline-md scale (32px) — calmer than
   the base's editorial display size, which is reserved for the hero and the
   loom story. Lora ships no 500 face, so the design's weight-500 headline
   role renders at the shipped 600. */
body.pm-theme .mr-display {
    font-weight: 600;
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    line-height: 1.3;
    color: var(--pm-russet);
}

body.pm-theme .mr-eyebrow {
    font-family: var(--pm-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pm-brass);
}

/* Prices carry the export's `price-display` role: Inter medium, faintly
   tightened, inked russet so they read as the page's most confident number. */
body.pm-theme .mr-card__price {
    font-family: var(--pm-font-body);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--pm-russet);
}

/* The SHARED price component's struck "was" price ships a cool grey (#9aa0a6)
   tuned for a white canvas — only 2.41:1 on snow, i.e. unreadable here. Re-ink
   it to the theme's own soft role (5.94:1). The sale red stays the shared
   #d6293e (4.51:1 on snow) so it never desynchronises from the discount
   pill. */
body.pm-theme .ll-price-compare,
body.pm-theme .mr-card__price del {
    color: var(--pm-soft);
}

/* --------------------------------------------------------------------------
   Buttons — DESIGN.md: a substantial 56px-tall solid Deep Russet primary with
   Soft Snow text, plus the russet-keyline secondary and the tracked keyline
   text link. Hover DEEPENS toward the export's darker `primary` rather than
   the base's brightness filter (which would wash a warm brown out).
   -------------------------------------------------------------------------- */
/* NOTE: no `padding` here on purpose. `body.pm-theme .mr-btn` (0,2,1) would
   out-specify the base's `.mr-btn--hero` (0,1,0) and silently shrink every
   large CTA. The base's 0.95rem/2rem already matches the export's h-14 px-10
   closely enough. */
body.pm-theme .mr-btn {
    font-family: var(--pm-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

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

body.pm-theme .mr-btn--primary:hover {
    filter: none;
    background-color: var(--pm-deep);
    border-color: var(--pm-deep);
    color: #fff;
}

/* The export's secondary: transparent with a 1px russet border and a russet
   label, filling russet on hover. */
body.pm-theme .pm-btn--keyline {
    border: 1px solid var(--pm-russet);
    color: var(--pm-russet);
    background-color: transparent;
}

body.pm-theme .pm-btn--keyline:hover {
    background-color: var(--pm-russet);
    border-color: var(--pm-russet);
    color: #fff;
}

/* The export's "Text Link": tracked label-caps over a 1px russet underline. */
body.pm-theme .pm-keyline-link {
    display: inline-block;
    font-family: var(--pm-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pm-russet);
    text-decoration: none;
    border-bottom: 1px solid var(--pm-russet);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

body.pm-theme .pm-keyline-link:hover {
    color: var(--pm-brass);
    border-color: var(--pm-brass);
}

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md: 4px radius with a full 1px border for high-contrast
   forms, and `label-caps` labels. NOTE the base sets a padding SHORTHAND on
   `.form-control, .form-select` and then hands selects their 2.25rem caret
   gutter back; nothing here touches padding, so that stays intact.
   -------------------------------------------------------------------------- */
body.pm-theme .form-control,
body.pm-theme .form-select {
    border-color: var(--pm-keyline);
    background-color: var(--pm-white);
    color: var(--pm-ink);
}

body.pm-theme .form-control::placeholder {
    color: var(--pm-soft);
}

body.pm-theme .form-control:focus,
body.pm-theme .form-select:focus {
    border-color: var(--pm-russet);
    box-shadow: 0 0 0 3px rgba(var(--pm-russet-rgb), 0.14);
}

/* The border override above out-specifies Bootstrap's own
   `.form-control.is-invalid` (0,0,2,0), which would silently swallow the red
   validation state on every checkout / address / auth form. Re-assert it. */
body.pm-theme .form-control.is-invalid,
body.pm-theme .form-select.is-invalid,
body.pm-theme .was-validated .form-control:invalid,
body.pm-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.pm-theme .form-control.is-invalid:focus,
body.pm-theme .form-select.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18);
}

body.pm-theme .mr-field-label,
body.pm-theme .form-label {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Announcement bar + header — the russet whisper band (the base's default is
   an auto-darkened accent, a muddy olive here), then the sticky soft-snow
   header split into three columns with the wide-tracked Lora wordmark centred
   and larger than the nav links, over one hairline keyline.
   -------------------------------------------------------------------------- */
body.pm-theme .mr-announce {
    background-color: var(--pm-russet);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding-block: 0.6rem;
}

body.pm-theme .mr-announce a { color: var(--pm-camel-fixed); }

body.pm-theme .pm-header {
    background-color: var(--pm-snow);
    border-bottom: 1px solid rgba(var(--pm-russet-rgb), 0.12);
}

body.pm-theme .pm-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 80px;
}

body.pm-theme .pm-header__side {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.pm-theme .pm-header__side--end { justify-content: flex-end; }

body.pm-theme .pm-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

body.pm-theme .pm-nav .dropdown-menu {
    border-radius: var(--mr-radius);
    border-color: var(--pm-keyline);
    margin-top: 0.5rem;
}

body.pm-theme .pm-logo {
    font-family: var(--pm-font-head);
    font-weight: 600;
    font-size: clamp(1.3rem, 2.3vw, 1.75rem);
    letter-spacing: 0.32em;
    text-indent: 0.32em; /* balance the trailing tracking so it reads centred */
    text-transform: uppercase;
    color: var(--pm-russet);
    text-align: center;
    white-space: nowrap;
}

body.pm-theme .mr-nav-link {
    font-family: var(--pm-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pm-muted);
}

body.pm-theme .mr-nav-link:hover { color: var(--pm-russet); }

/* The base inks the current section with the accent; the export uses the
   primary, and russet is the stronger signal on this canvas (7.64:1). */
body.pm-theme .mr-nav-link.is-active {
    color: var(--pm-russet);
    border-bottom-color: var(--pm-russet);
}

body.pm-theme .pm-search input {
    width: 12rem;
    background: var(--pm-band);
    border-color: var(--pm-keyline);
}

body.pm-theme .mr-search input:focus {
    background: var(--pm-white);
    border-color: var(--pm-russet);
    box-shadow: 0 0 0 3px rgba(var(--pm-russet-rgb), 0.1);
}

/* --------------------------------------------------------------------------
   Split hero (pm-hero) — the export's 50/50 frame: the photograph fills the
   left half edge-to-edge, the copy sits on bare snow to the right. Stacks to
   photo-over-copy on narrow viewports (per the mobile frame).
   -------------------------------------------------------------------------- */
body.pm-theme .pm-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: var(--pm-snow);
    overflow: hidden;
}

body.pm-theme .pm-hero__media {
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    min-height: clamp(340px, 48vw, 660px);
    background-color: var(--pm-fill);
}

body.pm-theme .pm-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s ease;
}

body.pm-theme .pm-hero:hover .pm-hero__img { transform: scale(1.03); }

body.pm-theme .pm-hero__panel {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 5vw, 5rem);
}

body.pm-theme .pm-hero__copy { max-width: 34rem; }

body.pm-theme .pm-hero__eyebrow {
    letter-spacing: 0.25em;
    margin-bottom: 1.5rem;
}

body.pm-theme .pm-hero__title {
    font-family: var(--pm-font-head);
    font-weight: 600;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--pm-russet);
    margin-bottom: 2rem;
}

body.pm-theme .pm-hero__lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--pm-muted);
    max-width: 34ch;
    margin-bottom: 2.5rem;
}

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

/* --------------------------------------------------------------------------
   Trust strip (inherited, data-driven) — the export keeps the glyph on the
   LEFT of a two-line label, brass icon over a bold russet caps title, on the
   snow canvas between two hairlines. `.mr-band--alt.border-bottom` is the
   trust strip's OWN combination in the base (its other `.mr-band--alt`
   consumers never pair it with `.border-bottom`), so this cannot leak.
   -------------------------------------------------------------------------- */
body.pm-theme .mr-band--alt.border-bottom {
    background-color: var(--pm-snow);
    border-top: 1px solid rgba(var(--pm-russet-rgb), 0.08);
    border-bottom-color: rgba(var(--pm-russet-rgb), 0.08) !important;
}

body.pm-theme .mr-trust svg {
    width: 28px;
    height: 28px;
    color: var(--pm-brass);
}

body.pm-theme .mr-trust strong {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--pm-russet);
    margin-bottom: 0.15rem;
}

body.pm-theme .mr-trust span {
    font-size: 0.78rem;
    color: var(--pm-muted);
}

/* --------------------------------------------------------------------------
   Collection wall (pm-wall) — the export's bento: one tall feature tile over
   two thirds of the row beside two stacked half-height tiles, captions set
   bottom-left in white over a bottom-weighted scrim.
   -------------------------------------------------------------------------- */
body.pm-theme .pm-wall__row { --pm-wall-h: clamp(380px, 46vw, 600px); }

body.pm-theme .pm-tile {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: var(--pm-fill);
}

body.pm-theme .pm-tile--lead { height: var(--pm-wall-h); }

body.pm-theme .pm-wall__stack {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    height: var(--pm-wall-h);
}

body.pm-theme .pm-wall__stack .pm-tile--stack { height: 100%; }

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

body.pm-theme .pm-tile:hover .pm-tile__img { transform: scale(1.05); }

body.pm-theme .pm-tile__img--placeholder {
    background: linear-gradient(150deg, var(--pm-band), var(--pm-fill) 60%, var(--pm-keyline));
}

/* The export's flat `bg-black/20` leaves white captions at ~1.9:1 over a
   bright photograph. A bottom-weighted gradient keeps the airy top third and
   lands the caption on rgba(0,0,0,.65) — 7.00:1 worst case. */
body.pm-theme .pm-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.65) 100%);
    transition: background 0.3s ease;
}

body.pm-theme .pm-tile:hover .pm-tile__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 20%, rgba(0, 0, 0, 0.7) 100%);
}

body.pm-theme .pm-tile__cap {
    position: absolute;
    left: clamp(1.25rem, 3vw, 2.5rem);
    right: clamp(1.25rem, 3vw, 2.5rem);
    bottom: clamp(1.25rem, 3vw, 2.5rem);
    z-index: 2;
}

body.pm-theme .pm-tile__eyebrow {
    display: block;
    font-family: var(--pm-font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

body.pm-theme .pm-tile__title {
    display: block;
    font-family: var(--pm-font-head);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fff;
}

body.pm-theme .pm-tile__title--sm { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }

body.pm-theme .pm-tile__cta {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--pm-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    padding-bottom: 0.25rem;
    transition: border-color 0.2s ease;
}

body.pm-theme .pm-tile:hover .pm-tile__cta { border-color: #fff; }

/* --------------------------------------------------------------------------
   Product bands (pm-curated / pm-arrivals) + the inherited product card — the
   export sits the 3:4 photograph in a warm container well, then leaves the
   brass material meta, the name and the russet price flush below it. Only the
   MEDIA gains a hover keyline: a border on `.mr-card` itself would collide
   with the base's deliberately flush text.
   -------------------------------------------------------------------------- */
body.pm-theme .pm-curated { background-color: var(--pm-snow); }

body.pm-theme .pm-arrivals { background-color: var(--pm-snow); }

body.pm-theme .mr-card__media {
    background-color: var(--pm-container);
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

body.pm-theme .mr-card:hover .mr-card__media { border-color: var(--pm-keyline-strong); }

body.pm-theme .mr-card__eyebrow {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--pm-brass);
}

body.pm-theme .mr-card__title {
    font-family: var(--pm-font-body);
    font-weight: 400;
    font-size: 0.98rem;
    color: var(--pm-ink);
}

body.pm-theme .mr-card__title a:hover { color: var(--pm-russet); }

/* The two round overlay controls are SIBLINGS with different names. Their
   rest ink (--bs-primary on a near-white circle) is russet at 7.09:1 and
   their hover pair (--mr-surface / --mr-ink) is 15.63:1 — both already safe,
   as is the wishlist ACTIVE state (brass, 5.88:1 on white). Nothing here
   needs re-inking; only the slide-up Add-to-Cart picks up the design's
   tracked label-caps. */
body.pm-theme .mr-card__quick {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   On the Loom band (pm-loom, child-only) — a 4:5 handloom photograph beside
   the display headline, the intro and up to three ticked proof points.
   -------------------------------------------------------------------------- */
body.pm-theme .pm-loom { padding-block: clamp(3.5rem, 9vw, 7rem); }

body.pm-theme .pm-loom__frame {
    position: relative;
    display: block;
    overflow: hidden;
    max-width: 34rem;
    border-radius: var(--mr-radius);
    background-color: var(--pm-fill);
}

body.pm-theme .pm-loom__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

body.pm-theme .pm-loom__img--placeholder {
    background: linear-gradient(135deg, var(--pm-band), var(--pm-fill));
}

body.pm-theme .pm-loom__copy {
    padding-inline-start: clamp(0px, 4vw, 4rem);
}

body.pm-theme .pm-loom__eyebrow {
    letter-spacing: 0.25em;
    margin-bottom: 1.5rem;
}

body.pm-theme .pm-loom__title {
    font-family: var(--pm-font-head);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--pm-russet);
    margin-bottom: 2rem;
}

body.pm-theme .pm-loom__body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--pm-muted);
    margin-bottom: 2.5rem;
}

body.pm-theme .pm-loom__proofs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

body.pm-theme .pm-loom__proof {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

body.pm-theme .pm-loom__tick {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 0.1rem;
    color: var(--pm-russet);
}

body.pm-theme .pm-loom__proof-text {
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--pm-russet);
}

/* --------------------------------------------------------------------------
   Collection band (inherited .mr-tile--cat) — the export's four square
   photographic tiles on the warm blush band, each name centred in tracked
   caps. The base scrim (rgba(19,27,46,.34)) is far too light for white type
   over an arbitrary photo; re-tinted russet at .70 (4.99:1 worst case).
   -------------------------------------------------------------------------- */
body.pm-theme .mr-band { background-color: var(--pm-band-alt); }

body.pm-theme .mr-tile--cat {
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--pm-deep);
}

body.pm-theme .mr-tile--cat .mr-tile__scrim { background: rgba(94, 37, 25, 0.7); }

body.pm-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--pm-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.22em;
}

body.pm-theme .mr-tile__placeholder {
    background: linear-gradient(135deg, var(--pm-fill), var(--pm-keyline));
}

/* --------------------------------------------------------------------------
   Journal (inherited .mr-article) — 16:10 covers, brass category labels, Lora
   titles that warm to russet on hover.
   -------------------------------------------------------------------------- */
body.pm-theme .mr-article__title {
    font-family: var(--pm-font-head);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    line-height: 1.35;
}

body.pm-theme .mr-article__title a:hover,
body.pm-theme .mr-crumbs a:hover,
body.pm-theme .mr-cart-row__title a:hover { color: var(--pm-russet); }

body.pm-theme .mr-brandstrip span {
    font-family: var(--pm-font-head);
    color: var(--pm-soft);
}

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

/* --------------------------------------------------------------------------
   Newsletter (pm-cta) — the export's narrow centred column on the warm
   container surface: Lora heading, calm body, then the bordered email field
   beside the solid russet Subscribe button.
   -------------------------------------------------------------------------- */
body.pm-theme .pm-cta {
    background-color: var(--pm-container);
    border-top: 1px solid rgba(var(--pm-russet-rgb), 0.08);
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

body.pm-theme .pm-cta__inner { max-width: 480px; }

body.pm-theme .pm-cta__title {
    font-family: var(--pm-font-head);
    font-weight: 600;
    font-size: clamp(1.7rem, 3vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--pm-russet);
}

body.pm-theme .pm-cta__body {
    color: var(--pm-muted);
    max-width: 46ch;
    line-height: 1.65;
}

body.pm-theme .pm-cta__form {
    display: flex;
    gap: 0.75rem;
    max-width: 480px;
}

body.pm-theme .pm-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--pm-snow);
    border: 1px solid var(--pm-keyline);
    border-radius: var(--pm-radius);
    padding: 0.95rem 1.4rem;
    font-family: var(--pm-font-body);
    font-size: 0.95rem;
    color: var(--pm-ink);
}

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

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

body.pm-theme .pm-cta__btn {
    border: 0;
    border-radius: var(--pm-radius);
    background: var(--pm-russet);
    color: #fff;
    padding: 0.95rem 2.5rem;
    font-family: var(--pm-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body.pm-theme .pm-cta__btn:hover { background: var(--pm-deep); }

body.pm-theme .pm-cta__note {
    color: var(--pm-soft);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Footer (inherited .mr-footer) — the export's DEEP RUSSET surface. The base
   assumes a LIGHT footer (--mr-band-alt background, --mr-ink brand,
   --mr-muted links, --ll-accent hover), so every one of those roles needs a
   literal light-on-russet override here — see the CONTRAST note.
   -------------------------------------------------------------------------- */
body.pm-theme .mr-footer {
    background-color: var(--pm-deep);
    border-top: 0;
    color: var(--pm-on-deep-muted);
}

body.pm-theme .mr-footer h4 {
    font-family: var(--pm-font-body);
    color: var(--pm-camel-fixed);
    letter-spacing: 0.14em;
}

body.pm-theme .mr-footer a { color: var(--pm-on-deep-muted); }

body.pm-theme .mr-footer a:hover { color: var(--pm-camel-fixed); }

body.pm-theme .mr-footer__brand {
    font-family: var(--pm-font-head);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 1.35rem;
    color: var(--pm-on-deep);
}

body.pm-theme .mr-footer .mr-muted,
body.pm-theme .mr-footer .mr-soft { color: var(--pm-on-deep-muted); }

body.pm-theme .mr-footer .mr-divider {
    border-color: var(--pm-on-deep-border);
    background-color: var(--pm-on-deep-border);
    opacity: 1;
}

body.pm-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--pm-on-deep-border);
    color: var(--pm-on-deep);
}

body.pm-theme .mr-footer .form-control::placeholder { color: var(--pm-on-deep-muted); }

/* A russet-filled button on the russet footer would be invisible; the warm
   camel-fixed fill under deep-russet ink measures 6.61:1. */
body.pm-theme .mr-footer .mr-btn--primary {
    background-color: var(--pm-camel-fixed);
    border-color: var(--pm-camel-fixed);
    color: var(--pm-deep);
}

body.pm-theme .mr-footer .mr-btn--primary:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--pm-deep);
}

body.pm-theme .mr-footer .mr-social {
    background-color: transparent;
    border-color: var(--pm-on-deep-border);
    color: var(--pm-on-deep);
}

body.pm-theme .mr-footer .mr-social:hover {
    background-color: var(--pm-camel-fixed);
    border-color: var(--pm-camel-fixed);
    color: var(--pm-deep);
}

body.pm-theme .mr-footer *:focus-visible {
    outline: 2px solid var(--pm-camel-fixed);
    outline-offset: 2px;
}

/* Social glyphs on the LIGHT pages (contact / CMS) keep the snow pair. */
body.pm-theme .mr-social {
    background-color: var(--pm-band);
    border-color: var(--pm-keyline-strong);
    color: var(--pm-ink);
}

body.pm-theme .mr-social:hover {
    background-color: var(--pm-russet);
    border-color: var(--pm-russet);
    color: #fff;
}

/* Fine "thread" rules — the one place the decorative Warm Camel appears. */
body.pm-theme .mr-brandstrip { border-color: rgba(201, 158, 106, 0.45); }

/* --------------------------------------------------------------------------
   prefers-reduced-motion — DESIGN.md asks for deliberate, weighted
   interactions, which is exactly what a motion-sensitive visitor wants
   switched off. Kill every decorative transform/transition this stylesheet
   adds (the base's own .mr-reveal block already covers its animations).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.pm-theme .pm-hero__img,
    body.pm-theme .pm-tile__img,
    body.pm-theme .pm-tile__scrim,
    body.pm-theme .pm-tile__cta,
    body.pm-theme .pm-keyline-link,
    body.pm-theme .mr-card__media {
        transition: none;
    }

    /* Neutralise the inherited hover-scale transforms too (the base's
       reduced-motion block only kills their transition). */
    body.pm-theme .pm-hero:hover .pm-hero__img,
    body.pm-theme .pm-tile:hover .pm-tile__img,
    body.pm-theme .mr-card:hover .mr-card__media img,
    body.pm-theme .mr-tile:hover .mr-tile__img,
    body.pm-theme .mr-promo:hover .mr-promo__img {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): margins shrink to 20px but the
   vertical rhythm stays spacious, the split hero stacks photo-over-copy, the
   bento wall unstacks into full-width tiles, the wordmark loses some of its
   tracking, and the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    body.pm-theme .pm-header__side--start { flex: 0 0 auto; }
    body.pm-theme .pm-header__side--end { flex: 0 0 auto; }
}

@media (max-width: 991.98px) {
    body.pm-theme .pm-hero__media,
    body.pm-theme .pm-hero__panel { flex: 1 1 100%; }

    body.pm-theme .pm-hero__media { min-height: clamp(280px, 64vw, 440px); }

    body.pm-theme .pm-hero__panel { padding: clamp(2rem, 8vw, 3rem) 1.25rem; }

    body.pm-theme .pm-tile--lead { height: auto; aspect-ratio: 4 / 3; }

    body.pm-theme .pm-wall__stack {
        height: auto;
        grid-template-rows: none;
        gap: 1.5rem;
    }

    body.pm-theme .pm-wall__stack .pm-tile--stack { height: auto; aspect-ratio: 16 / 9; }

    body.pm-theme .pm-loom__frame { max-width: none; }

    body.pm-theme .pm-loom__copy { padding-inline-start: 0; }

    body.pm-theme .pm-logo { letter-spacing: 0.2em; text-indent: 0.2em; }
}

@media (max-width: 575.98px) {
    body.pm-theme .pm-cta__form { flex-direction: column; }
    body.pm-theme .pm-cta__btn { width: 100%; }
    body.pm-theme .pm-loom__proofs { gap: 1.15rem; }
}