/* ==========================================================================
   Virsa — folk-craft museum shop for Pakistani heritage handicrafts.

   Ported from the Stitch "Heritage Crafts House" design (docs/templates/
   pending/stitch_75_virsa_heritage_crafts_e_commerce_site/…/DESIGN.md is the
   design-system source; the homepage code.html is authoritative where the two
   disagree — the prose describes a warm clay canvas, the rendered export ships
   the COOL archival one below, and the export wins).

   The system is Academic Minimalism: a cool archival canvas (#f9f9ff) layered
   with pale tints, Ajrak-indigo (#0e2a54) doing all the structural work —
   typography, iconography, 1px keylines, the announce band and the footer —
   and crimson (#5d0015) reserved for wax-seal moments: badges, category chips
   and eyebrows. ZERO shadows, ZERO radii: depth is colour blocking and rules.

   This theme OWNS the promo ("craft plates") / featured ("Keeper Pieces") /
   artisan-map ("From the Maker's Hands") / new-arrivals / journal / newsletter
   home sections (vr-* markup) and INHERITS Modern Retail's functional pages
   plus the header / hero / trust / brands / categories / footer partials and
   the product card. This stylesheet has two jobs:

     (a) style the NEW `vr-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the archival palette, flattening every radius and
         shadow, and inverting the footer to indigo.

   Everything is scoped under `body.vr-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.
   ========================================================================== */

body.vr-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --vr-indigo: var(--bs-primary, #0e2a54);
    --vr-indigo-rgb: var(--bs-primary-rgb, 14, 42, 84);
    --vr-crimson: var(--ll-accent, #5d0015);
    --vr-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, "Times New Roman", serif;
    --vr-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Heritage Crafts House palette (rendered code.html tailwind.config) */
    --vr-canvas: #f9f9ff;      /* surface / background — the archival page */
    --vr-paper: #ffffff;       /* surface-container-lowest — lifted bands */
    --vr-tint: #f1f3ff;        /* surface-container-low — trust + categories */
    --vr-tint-deep: #e0e8ff;   /* surface-container-high — newsletter band */
    --vr-fill: #d7e2ff;        /* surface-variant — placeholders / fills */
    --vr-ink: #001a40;         /* on-surface — body copy */
    --vr-muted: #44474f;       /* on-surface-variant */
    /* The design system's `outline` is #747780, but this token feeds
       --mr-soft, which the base uses for TEXT (small print, struck-through
       compare prices). #747780 measures 4.27:1 on the canvas — under AA — so
       the text role gets a darkened sibling (5.3:1). */
    --vr-soft: #65686f;
    --vr-line: #c4c6d0;        /* outline-variant — the 1px keyline */
    --vr-rule: #28406b;        /* primary-container — the structural rule */
    --vr-indigo-deep: #001a40; /* pressed / hover indigo */
    --vr-crimson-lift: #801326;/* tertiary-container — crimson hover */
    --vr-on-indigo: #f9f9ff;   /* headline ink on the indigo band (13.6:1) */
    --vr-on-indigo-soft: #95acde; /* body ink on the indigo band (6.3:1) */

    /* Re-point the inherited base neutrals at the archival palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--vr-ink);
    --mr-muted: var(--vr-muted);
    --mr-soft: var(--vr-soft);
    --mr-surface: var(--vr-paper);
    --mr-band: var(--vr-tint);
    --mr-band-alt: var(--vr-tint);
    --mr-fill: var(--vr-fill);
    --mr-border: var(--vr-line);
    --mr-border-strong: var(--vr-rule);
    --mr-radius: 0;
    --mr-gold: #8a6a12;
    --mr-shadow: none;

    /* Bare prose links inherit Bootstrap blue otherwise. Setting the RGB token
       is the SAFE way to fix that — a bare `body.vr-theme a { color: … }`
       catch-all (0,1,2) would out-specify `.mr-btn--primary { color:#fff }`
       (0,1,0) and repaint every anchor-based CTA's label. */
    --bs-link-color-rgb: 14, 42, 84;
    --bs-link-hover-color-rgb: 93, 0, 21;

    background-color: var(--vr-canvas);
    color: var(--vr-ink);
    font-family: var(--vr-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — "strictly perpendicular". Every button, card, image and
   input is 0px; no element casts a shadow. The two ROUND overlay controls
   (wishlist heart + quick-view eye) are EXEMPT: the base renders the heart as
   a <button> for signed-in shoppers and an <a> for guests, so a flatten that
   listed `button` would square it for logged-in users only.
   -------------------------------------------------------------------------- */
body.vr-theme .mr-card,
body.vr-theme .mr-card__media,
body.vr-theme .mr-card__badge,
body.vr-theme .mr-card__quick,
body.vr-theme .mr-promo,
body.vr-theme .mr-promo__img,
body.vr-theme .mr-tile,
body.vr-theme .mr-tile__media,
body.vr-theme .mr-article__media,
body.vr-theme .mr-article__media img,
body.vr-theme .mr-cart-row__media,
body.vr-theme .mr-status,
body.vr-theme .mr-social,
body.vr-theme .mr-rail-btn,
body.vr-theme .mr-panel,
body.vr-theme .form-control,
body.vr-theme .form-select,
body.vr-theme .mr-search input,
body.vr-theme .mr-btn,
body.vr-theme .dropdown-menu,
body.vr-theme .offcanvas {
    border-radius: 0 !important;
    box-shadow: none;
}

body.vr-theme .mr-card__wish,
body.vr-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   Typography — Playfair catalogue headlines over Source Sans 3, and the
   tracked "label-caps" eyebrow that runs through the whole export.
   -------------------------------------------------------------------------- */
body.vr-theme h1,
body.vr-theme h2,
body.vr-theme .mr-display {
    font-family: var(--vr-font-head);
    color: var(--vr-indigo);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.16;
}

body.vr-theme h3,
body.vr-theme h4,
body.vr-theme h5,
body.vr-theme h6 {
    font-family: var(--vr-font-head);
    color: var(--vr-indigo);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.vr-theme .mr-eyebrow,
body.vr-theme .vr-eyebrow {
    font-family: var(--vr-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vr-muted);
}

/* The wax-seal eyebrow — crimson, 13.6:1 on the canvas. */
body.vr-theme .vr-eyebrow--seal { color: var(--vr-crimson); }

/* --------------------------------------------------------------------------
   Buttons — rectangular with a 1px indigo keyline. Primary is an indigo fill
   with canvas text; the outline/ghost is a canvas fill with indigo text. Hover
   swaps the fill, exactly as the design system prescribes. Nothing lifts.
   -------------------------------------------------------------------------- */
body.vr-theme .mr-btn {
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

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

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

body.vr-theme .mr-btn--outline,
body.vr-theme .vr-btn {
    border: 1px solid var(--vr-indigo);
    color: var(--vr-indigo);
    background: transparent;
}

body.vr-theme .mr-btn--outline:hover,
body.vr-theme .vr-btn:hover {
    background: var(--vr-indigo);
    border-color: var(--vr-indigo);
    color: var(--vr-canvas);
}

/* Bootstrap's own .btn-primary (the shared PDP review form) — theme-vars sets
   the background but leaves --bs-btn-color at #fff, which is correct against
   this dark indigo (14.2:1). Pin the hover so it never flashes stock blue. */
body.vr-theme .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vr-indigo-deep);
    --bs-btn-hover-border-color: var(--vr-indigo-deep);
    --bs-btn-active-bg: var(--vr-indigo-deep);
    --bs-btn-active-border-color: var(--vr-indigo-deep);
}

/* The tracked keyline link ("View All Archive", "Read More"). */
body.vr-theme .vr-keyline-link {
    display: inline-block;
    font-family: var(--vr-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vr-indigo);
    text-decoration: none;
    border-bottom: 1px solid var(--vr-indigo);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.vr-theme .vr-keyline-link:hover {
    color: var(--vr-crimson);
    border-bottom-color: var(--vr-crimson);
}

/* Inputs — boxed 0px rectangles with a low-opacity indigo placeholder. */
body.vr-theme .form-control,
body.vr-theme .form-select {
    background-color: var(--vr-paper);
    border-color: var(--vr-line);
    color: var(--vr-ink);
}

body.vr-theme .form-control::placeholder { color: rgba(0, 26, 64, 0.42); }

body.vr-theme .form-control:focus,
body.vr-theme .form-select:focus {
    border-color: var(--vr-indigo);
    box-shadow: none;
}

/* Re-assert Bootstrap's invalid state — the border-color rules above would
   otherwise swallow it and a failed field would look untouched. */
body.vr-theme .form-control.is-invalid,
body.vr-theme .form-select.is-invalid,
body.vr-theme .was-validated .form-control:invalid,
body.vr-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

/* Bootstrap reserves padding-right for the caret background-image; the shared
   base shorthand eats it and runs the option text under the arrow. Give the
   gutter back with a logical property (flips for RTL). */
body.vr-theme .form-select { padding-inline-end: 2.25rem; }

/* --------------------------------------------------------------------------
   Announcement + header — indigo announce band, white sticky header sitting on
   the structural indigo rule, tracked serif wordmark.
   -------------------------------------------------------------------------- */
body.vr-theme .mr-announce {
    background: var(--vr-indigo);
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

body.vr-theme .mr-header {
    background: var(--vr-paper);
    border-bottom: 1px solid var(--vr-rule);
}

body.vr-theme .mr-logo {
    font-family: var(--vr-font-head);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vr-indigo);
}

body.vr-theme .mr-nav-link {
    color: var(--vr-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body.vr-theme .mr-nav-link:hover { color: var(--vr-indigo); }
body.vr-theme .mr-nav-link.is-active {
    color: var(--vr-indigo);
    border-bottom: 2px solid var(--vr-indigo);
}

body.vr-theme .mr-icon-btn { color: var(--vr-indigo); }
body.vr-theme .mr-icon-btn:hover { color: var(--vr-crimson); }
body.vr-theme .mr-badge { background-color: var(--vr-crimson); color: #fff; }

body.vr-theme .mr-search input { background: var(--vr-canvas); border-color: var(--vr-line); }
body.vr-theme .mr-search input:focus { background: var(--vr-paper); border-color: var(--vr-indigo); box-shadow: none; }

/* --------------------------------------------------------------------------
   Inherited hero — full-bleed documentary photograph. The export composites the
   photo at 70% over a solid indigo block; we reproduce that as a uniform indigo
   scrim on .mr-hero__overlay (NEVER `background: none` — the overlay is the only
   thing keeping the white <h1> readable over an arbitrary merchant upload).
   -------------------------------------------------------------------------- */
body.vr-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(14, 42, 84, 0.78) 0%, rgba(14, 42, 84, 0.62) 46%, rgba(14, 42, 84, 0.42) 100%);
}

body.vr-theme .mr-hero__copy { max-width: 640px; text-align: left; }

body.vr-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: #ffb3b5; /* tertiary-fixed-dim — the export's hero eyebrow, 8.0:1 */
    letter-spacing: 0.2em;
}

body.vr-theme .mr-hero .mr-hero__copy h1 { color: #fff; }

body.vr-theme .mr-btn--on-dark {
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 0;
    color: #fff;
    background: transparent;
}
body.vr-theme .mr-btn--on-dark:hover { background: #fff; color: var(--vr-indigo); }

/* --------------------------------------------------------------------------
   Trust strip — the pale tint band under the hero, indigo stroke icons and
   tracked uppercase labels, centred like the export.
   -------------------------------------------------------------------------- */
body.vr-theme .mr-band--alt.border-bottom { border-bottom-color: var(--vr-rule) !important; }

body.vr-theme .mr-trust {
    flex-direction: column;
    text-align: center;
    gap: 0.65rem;
}
body.vr-theme .mr-trust svg { color: var(--vr-indigo); }
body.vr-theme .mr-trust strong {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--vr-ink);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — artifact cards: a keylined photograph,
   then a 1px indigo divider above the maker line, the serif title and the
   tracked price. The card gains a border, so its text MUST be inset (the base
   card is borderless and sits flush by design).
   -------------------------------------------------------------------------- */
body.vr-theme .mr-card {
    background: transparent;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}
body.vr-theme .mr-card:hover { border-color: var(--vr-rule); }

body.vr-theme .mr-card > p,
body.vr-theme .mr-card > h3 { padding-inline: 0.9rem; }
body.vr-theme .mr-card > *:last-child { padding-bottom: 1.1rem; }

body.vr-theme .mr-card__media {
    background: var(--vr-tint);
    border: 1px solid var(--vr-rule);
    margin-bottom: 1rem;
}

/* The export rules a 1px divider between the photograph and the label block.
   Hang it off the first text child rather than the maker line, so it renders
   whether or not the product has a category eyebrow. */
body.vr-theme .mr-card__media + * {
    border-top: 1px solid var(--vr-line);
    padding-top: 0.6rem;
}

body.vr-theme .mr-card__eyebrow {
    font-family: var(--vr-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vr-muted);
    margin-bottom: 0.35rem;
}

body.vr-theme .mr-card__title,
body.vr-theme .mr-card__title a {
    font-family: var(--vr-font-head);
    font-weight: 600;
    color: var(--vr-indigo);
}
body.vr-theme .mr-card__title a:hover { color: var(--vr-crimson); }

body.vr-theme .mr-card__price {
    color: var(--vr-ink);
    font-weight: 600;
    letter-spacing: 0.05em;
}
body.vr-theme .mr-card__price del { color: var(--vr-soft); }

/* SALE / demo chip — shared head.theme-vars pins it TOP-LEFT with a pill
   radius; the export puts a sharp crimson wax seal in the TOP-RIGHT corner, so
   `left` must be explicitly released or the badge stretches the full width.
   White on #5d0015 measures 14.2:1. */
body.vr-theme .mr-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: 2;
    background: var(--vr-crimson);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
}

/* Round overlay controls (heart + quick-view eye) — restyled TOGETHER, both
   states measured: indigo glyph on a near-white circle (13.1:1), hover deepens
   the circle to solid white and the glyph to crimson (13.9:1). */
body.vr-theme .mr-card__wish,
body.vr-theme .mr-card__quickview {
    background: rgba(255, 255, 255, 0.92);
    color: var(--vr-indigo);
    border: 1px solid var(--vr-rule);
}
body.vr-theme .mr-card__wish:hover,
body.vr-theme .mr-card__quickview:hover {
    background: #fff;
    color: var(--vr-crimson);
    border-color: var(--vr-crimson);
}
body.vr-theme .mr-card__wish.is-active { color: var(--vr-crimson); }

body.vr-theme .mr-card__quick {
    background: var(--vr-indigo);
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Craft plates (vr-plates, the promo section) — 4:5 keylined photographs with
   the caption BELOW on bare canvas, museum-catalogue style.
   -------------------------------------------------------------------------- */
body.vr-theme .vr-plate {
    display: block;
    text-decoration: none;
    color: inherit;
}

body.vr-theme .vr-plate__frame {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--vr-rule);
    margin-bottom: 1.5rem;
}

body.vr-theme .vr-plate__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
body.vr-theme .vr-plate:hover .vr-plate__img { transform: scale(1.05); }
body.vr-theme .vr-plate__img--placeholder {
    background: linear-gradient(135deg, var(--vr-tint), var(--vr-fill));
}

body.vr-theme .vr-plate__title {
    display: block;
    font-family: var(--vr-font-head);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vr-indigo);
    margin-bottom: 0.5rem;
}

body.vr-theme .vr-plate__text {
    display: block;
    color: var(--vr-muted);
    font-size: 1rem;
    line-height: 1.5;
}

body.vr-theme .vr-plate__cta {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vr-crimson);
    border-bottom: 1px solid var(--vr-crimson);
    padding-bottom: 0.25rem;
}
body.vr-theme .vr-plate:hover .vr-plate__cta { color: var(--vr-crimson-lift); border-bottom-color: var(--vr-crimson-lift); }

/* --------------------------------------------------------------------------
   Keeper Pieces (vr-keeper, the featured section) — the lifted white archive
   band, ruled top and bottom in indigo.
   -------------------------------------------------------------------------- */
body.vr-theme .vr-keeper {
    background: var(--vr-paper);
    border-block: 1px solid var(--vr-rule);
}

/* --------------------------------------------------------------------------
   From the Maker's Hands (vr-origins, the virsa-only artisan-map section) —
   the deep indigo provenance band with keylined map pins.
   -------------------------------------------------------------------------- */
body.vr-theme .vr-origins {
    background: var(--vr-indigo);
    border-block: 1px solid var(--vr-rule);
    padding-block: clamp(4rem, 8vw, 6.5rem);
    color: var(--vr-on-indigo);
}

body.vr-theme .vr-origins__heading {
    color: var(--vr-on-indigo);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.vr-theme .vr-origin { display: flex; flex-direction: column; align-items: center; }

body.vr-theme .vr-origin__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border: 1px solid var(--vr-on-indigo-soft);
    color: var(--vr-on-indigo);
    margin-bottom: 1.5rem;
}
body.vr-theme .vr-origin__pin svg { width: 30px; height: 30px; }

body.vr-theme .vr-origin__title {
    font-family: var(--vr-font-head);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--vr-on-indigo);
    margin-bottom: 0.75rem;
}

body.vr-theme .vr-origin__text {
    color: var(--vr-on-indigo-soft);
    max-width: 30ch;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   New From the Workshops (vr-workshops) — left-aligned heading, bare canvas.
   -------------------------------------------------------------------------- */
body.vr-theme .vr-workshops__heading {
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
    text-align: left;
}

/* --------------------------------------------------------------------------
   Inherited category tiles — short keylined bands with the photograph faded
   back and a tracked INDIGO label riding on top, exactly as the export shows.
   -------------------------------------------------------------------------- */
body.vr-theme .mr-tile--cat {
    height: 180px;
    border: 1px solid var(--vr-rule);
    background: var(--vr-tint);
}
body.vr-theme .mr-tile--cat .mr-tile__media { opacity: 0.4; transition: opacity 0.5s ease; }
body.vr-theme .mr-tile--cat:hover .mr-tile__media { opacity: 0.5; }
body.vr-theme .mr-tile--cat .mr-tile__scrim { background: none; }
body.vr-theme .mr-tile--cat:hover .mr-tile__scrim { background: none; }
body.vr-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--vr-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vr-indigo);
}

/* The categories band itself rides on the pale tint. */
body.vr-theme .mr-section.mr-band { background-color: var(--vr-tint); }

/* --------------------------------------------------------------------------
   Journal (vr-journal) — 16:9 keylined covers, a solid crimson category chip
   and serif titles that ink crimson on hover.
   -------------------------------------------------------------------------- */
body.vr-theme .vr-journal__media {
    border: 1px solid var(--vr-rule);
    background: var(--vr-tint);
}
body.vr-theme .vr-journal__media img { transition: filter 0.5s ease, transform 0.7s ease; }
body.vr-theme .vr-journal__media:hover img { filter: grayscale(1); }

body.vr-theme .vr-journal__chip {
    display: inline-block;
    background: var(--vr-crimson);
    color: #fff;
    font-family: var(--vr-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    margin: 1.5rem 0 1rem;
}

body.vr-theme .vr-journal__title a { color: var(--vr-indigo); }
body.vr-theme .vr-journal__title a:hover { color: var(--vr-crimson); }

/* --------------------------------------------------------------------------
   The Maker's Post (vr-post, the newsletter section) — a narrow centred band
   on the deeper archival tint, underline field + solid indigo button.
   -------------------------------------------------------------------------- */
body.vr-theme .vr-post {
    background: var(--vr-tint-deep);
    border-block: 1px solid var(--vr-rule);
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

body.vr-theme .vr-post__title { color: var(--vr-indigo); }

body.vr-theme .vr-post__body {
    color: var(--vr-muted);
    max-width: 44ch;
    font-size: 1.05rem;
    line-height: 1.65;
}

body.vr-theme .vr-post__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 520px;
}

body.vr-theme .vr-post__form input {
    flex: 1 1 240px;
    border: 0;
    border-bottom: 1px solid var(--vr-rule);
    background: transparent;
    color: var(--vr-ink);
    padding: 0.85rem 0;
    font-size: 0.95rem;
}
body.vr-theme .vr-post__form input::placeholder { color: rgba(0, 26, 64, 0.42); }
body.vr-theme .vr-post__form input:focus { outline: none; border-bottom-color: var(--vr-indigo); }

body.vr-theme .vr-post__btn {
    border: 1px solid var(--vr-indigo);
    background: var(--vr-indigo);
    color: #fff;
    padding: 0.85rem 2.5rem;
    font-family: var(--vr-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
body.vr-theme .vr-post__btn:hover { background: var(--vr-indigo-deep); border-color: var(--vr-indigo-deep); }
body.vr-theme .vr-post__btn:disabled { opacity: 0.75; cursor: default; }

body.vr-theme .vr-post__note { color: var(--vr-soft); font-size: 0.75rem; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   Inherited chrome — the INDIGO footer. Every text / border / control role
   riding on it is re-inked to the archival canvas; the inherited primary
   "Join" button is inverted (an indigo fill on an indigo band is invisible)
   and focus rings are redrawn.
   -------------------------------------------------------------------------- */
body.vr-theme .mr-footer {
    background: var(--vr-indigo);
    border-top: 1px solid var(--vr-rule);
    color: var(--vr-on-indigo);
}
body.vr-theme .mr-footer h4 {
    font-family: var(--vr-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #afc7fa;
}
body.vr-theme .mr-footer__brand {
    font-family: var(--vr-font-head);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
}
body.vr-theme .mr-footer a { color: rgba(249, 249, 255, 0.82); }
body.vr-theme .mr-footer a:hover { color: #fff; }
body.vr-theme .mr-footer .mr-muted { color: rgba(249, 249, 255, 0.8); }
body.vr-theme .mr-footer .mr-soft { color: rgba(249, 249, 255, 0.66); }
body.vr-theme .mr-footer .mr-divider { border-color: rgba(249, 249, 255, 0.22); opacity: 1; }

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

body.vr-theme .mr-footer .mr-social {
    background: rgba(249, 249, 255, 0.12);
    border-color: rgba(249, 249, 255, 0.3);
    color: var(--vr-on-indigo);
}
body.vr-theme .mr-footer .mr-social:hover {
    background: var(--vr-canvas);
    border-color: var(--vr-canvas);
    color: var(--vr-indigo);
}

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

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

/* --------------------------------------------------------------------------
   Inherited misc — social (light pages), rail buttons, ulinks, tabs, pagers,
   dividers. Each is re-inked so the indigo/crimson pair stays consistent
   across the inherited shop / PDP / cart / checkout / account pages.
   -------------------------------------------------------------------------- */
body.vr-theme .mr-social { background: var(--vr-tint); border-color: var(--vr-line); color: var(--vr-indigo); }
body.vr-theme .mr-social:hover { background: var(--vr-indigo); border-color: var(--vr-indigo); color: #fff; }
body.vr-theme .mr-rail-btn { border-color: var(--vr-rule); color: var(--vr-indigo); }
body.vr-theme .mr-rail-btn:hover { background: var(--vr-indigo); border-color: var(--vr-indigo); color: #fff; }
body.vr-theme .mr-ulink { color: var(--vr-indigo); border-color: var(--vr-indigo); }
body.vr-theme .mr-ulink:hover { color: var(--vr-crimson); border-color: var(--vr-crimson); }
body.vr-theme .mr-article__title a { color: var(--vr-indigo); }
body.vr-theme .mr-article__title a:hover { color: var(--vr-crimson); }
body.vr-theme .mr-divider { border-color: var(--vr-line); opacity: 1; }
body.vr-theme .mr-brandstrip { border-block-color: var(--vr-rule); }

/* --------------------------------------------------------------------------
   Respect reduced-motion — every transition here is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.vr-theme .mr-btn,
    body.vr-theme .mr-card,
    body.vr-theme .mr-card__media,
    body.vr-theme .vr-plate__img,
    body.vr-theme .vr-journal__media img,
    body.vr-theme .mr-tile--cat .mr-tile__media,
    body.vr-theme .mr-reveal {
        transition: none;
    }
    body.vr-theme .vr-plate:hover .vr-plate__img { transform: none; }
    body.vr-theme .mr-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): 20px margins, a single column, and a
   shorter hero with the copy still left-aligned.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.vr-theme .mr-shell { padding-inline: 20px; }
    body.vr-theme .vr-origins__grid { row-gap: 3rem; }
    body.vr-theme .vr-post__form { flex-direction: column; }
    body.vr-theme .vr-post__btn { width: 100%; }
}

@media (max-width: 575.98px) {
    body.vr-theme .mr-tile--cat { height: 140px; }
    body.vr-theme .vr-plate__title { font-size: 1.3rem; }
}