/* ==========================================================================
   Indigo Works — heritage-industrial denim workshop.

   Ported from the Stitch "Indigo Works" design (the Heritage Industrial design
   system lives at docs/templates/pending/
   stitch_46_indigo_works_e_commerce_homepage/…/heritage_industrial/DESIGN.md):
   an ecru paper canvas instead of clinical white, denim indigo as the "black"
   of the system (announcement bar, navigation rules, primary actions, category
   scrims and the footer slab), selvedge red reserved strictly for functional
   accents (eyebrows, the SALE chip, the 2px "selvedge" keyline down the fabric
   story), copper kept for hardware metaphors, a disciplined 4px radius on every
   button / field / card, and depth built from 1px indigo hairlines and tonal
   layers rather than ambient shadows. Albert Sans 700 with tight tracking
   carries every headline; Source Sans 3 carries body copy, the uppercase
   "stamped fabric label" UI text and the Rs. prices.

   This theme OWNS the promo / featured / denim-story / new-arrivals / journal /
   newsletter home sections (ig-* markup) and INHERITS Modern Retail's header,
   footer, hero, trust strip, category tiles, product card and every functional
   page. This stylesheet therefore has two jobs:

     (a) style the NEW `ig-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the ecru palette, dressing the announcement bar /
         header / hero scrim / category tiles / footer in denim indigo, and
         inking the product card's category eyebrow, price and SALE chip the way
         the export does.

   Everything is scoped under `body.ig-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
   indigo surface follows.

   CONTRAST (ratios computed against the palette below):
     - primary Denim Indigo #15284c is very DARK — 12.37:1 on the ecru canvas,
       14.59:1 carrying white — so it is safe as text, as an icon, and as a fill
       under a white label. Keeping primary dark also keeps every inherited base
       rule that hardcodes `color:#fff` over a primary fill legible (.mr-badge,
       .mr-page.is-active, .mr-acct-avatar, .mr-card__quick, Bootstrap's own
       .btn-primary in the shared review form, …) — see gotchas.md on light
       primaries.
     - accent Selvedge Red #7b180a is DEEP and passes both ways: 8.98:1 as text
       on the ecru canvas, 10.11:1 on the cool surface band, 10.59:1 on white,
       and 10.59:1 carrying white as a fill. It can therefore be used directly
       for the tracked eyebrows, the SALE chip, the sale price and the selvedge
       keyline without needing a darker "-ink" sibling.
     - the footer / hero slab is the primary itself, so the pale-blush footer
       headings (#ffdad4) run 11.28:1, the #d7e3ff body copy 11.34:1 and white
       14.59:1. BUT the base outlines `*:focus-visible` with --ll-accent, and
       Selvedge Red on indigo is only 1.38:1 — far under the 3:1 non-text
       minimum — so the footer / hero / announcement bands re-point that outline
       to the blush (11.28:1). See the focus block near the end.
     - --mr-soft drives small captions, breadcrumbs and struck-through
       compare-at prices, so it may NOT reuse the design's own `outline` token
       (#75777f — only 3.79:1 on ecru, under the 4.5:1 normal-text minimum).
       --ig-soft (#5f6169) is a deliberately darkened value in the same cool-grey
       family and clears 5.24:1.
     - likewise the design's Copper #b87333 is only 3.22:1 on ecru, so the
       rating stars (--mr-gold) use the darkened --ig-copper-ink (#8f5722,
       5.01:1) and the raw copper is reserved for the decorative rivet gradient.
   ========================================================================== */

body.ig-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ig-indigo: var(--bs-primary, #15284c);
    --ig-indigo-rgb: var(--bs-primary-rgb, 21, 40, 76);
    /* Bootstrap 5.3 paints bare <a> as rgba(var(--bs-link-color-rgb),…);
       theme-vars sets --bs-link-color but never the -rgb triplet, so without
       this a plain content link (CMS/blog body, quick-view "Category") falls
       back to factory blue. Point it at the indigo. NOTE: this is deliberately
       used INSTEAD of a bare `body.ig-theme a { color: … }` catch-all, which
       would out-specify .mr-btn--primary's white label and blank out the hero
       CTA's text (see references/gotchas.md). */
    --bs-link-color-rgb: var(--ig-indigo-rgb);
    --ig-red: var(--ll-accent, #7b180a);
    --ig-radius: var(--bs-border-radius, 0.25rem);
    --ig-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --ig-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Heritage Industrial palette (DESIGN.md + the export's rendered values) */
    --ig-ecru: #f0ece3;          /* page canvas — warm, paper-like              */
    --ig-surface: #f9f9ff;       /* cool surface: header, the washes band       */
    --ig-white: #ffffff;         /* the Core Essentials band + journal cards    */
    --ig-band: #ece9e0;          /* trust strip (secondary-container over ecru)  */
    --ig-band-quiet: #eee9e0;    /* journal band                                */
    --ig-fill: #e6e2d9;          /* secondary-container — card + tile media well */
    /* Hover fill for indigo actions — the export's `primary-container`, i.e.
       the primary lightened. Declared as a literal first (browsers without
       color-mix) then derived, so a merchant who recolours the theme does not
       end up with a stock navy hover under a recoloured button. */
    --ig-indigo-mid: #2c3e63;
    --ig-indigo-mid: color-mix(in srgb, var(--ig-indigo) 88%, #fff);
    --ig-blush: #ffdad4;         /* footer headings + hero eyebrow ON indigo    */
    --ig-copper: #b87333;        /* decorative rivet gradient only              */
    --ig-copper-ink: #8f5722;    /* text-safe copper — see CONTRAST note        */
    --ig-ink: #0b1b35;           /* on-surface — body copy, card titles         */
    --ig-muted: #44474e;         /* on-surface-variant — leads, excerpts        */
    --ig-soft: #5f6169;          /* darkened outline — see CONTRAST note        */

    /* "Avoid ambient shadows" (DESIGN.md): depth is tonal layering + hairlines.
       One faint indigo-tinted shadow is kept for the hero CTA only. */
    --ig-shadow: 0 10px 24px -14px rgba(var(--ig-indigo-rgb), 0.35);

    /* Re-point the inherited base neutrals at the ecru palette so every
       inherited mr-* surface (shop, PDP, cart, checkout, account, blog, 404)
       warms with the theme. Hairlines read as the DESIGN.md "1px solid border
       in Denim Indigo" at low opacity via color-mix, with a literal fallback
       for browsers without it. */
    --mr-ink: var(--ig-ink);
    --mr-muted: var(--ig-muted);
    --mr-soft: var(--ig-soft);
    --mr-surface: var(--ig-surface);
    --mr-band: var(--ig-ecru);
    --mr-band-alt: var(--ig-band);
    --mr-fill: var(--ig-fill);
    --mr-border: #d1d1ce;
    --mr-border: color-mix(in srgb, var(--ig-indigo) 14%, var(--ig-ecru));
    --mr-border-strong: #a6a9b0;
    --mr-border-strong: color-mix(in srgb, var(--ig-indigo) 34%, var(--ig-ecru));
    --mr-radius: var(--ig-radius);
    --mr-gold: var(--ig-copper-ink);
    --mr-shadow: var(--ig-shadow);

    /* Bootstrap-owned surfaces the base does not tokenise. */
    --bs-body-bg: var(--ig-ecru);
    --bs-border-color: var(--mr-border);

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

/* --------------------------------------------------------------------------
   Shape discipline — "roundedness is set to a Soft 4px radius across all
   buttons, inputs and cards" (DESIGN.md Shapes). This design is disciplined,
   not sharp, so it is deliberately NOT a `border-radius: 0 !important` flatten
   (which would also square the round overlay controls on the product card).
   And never a `padding` SHORTHAND on .form-select — that collapses Bootstrap's
   reserved 2.25rem caret gutter and runs the option text under the arrow; the
   gutter is restated below as a logical property.
   -------------------------------------------------------------------------- */
body.ig-theme .form-control,
body.ig-theme .form-select,
body.ig-theme .dropdown-menu,
body.ig-theme .offcanvas,
body.ig-theme .ig-promo__media,
body.ig-theme .ig-cta__panel,
body.ig-theme .mr-tile--cat {
    border-radius: var(--ig-radius);
}

body.ig-theme .form-select {
    padding-inline-end: 2.25rem;
}

/* --------------------------------------------------------------------------
   Typography — Albert Sans 700 with tight tracking for every headline
   ("modern, geometric, yet sturdy industrial"), Source Sans 3 for everything
   functional. Headings ink denim indigo, which acts as the black of the system.
   -------------------------------------------------------------------------- */
body.ig-theme h1, body.ig-theme h2, body.ig-theme h3,
body.ig-theme h4, body.ig-theme h5, body.ig-theme h6 {
    font-family: var(--ig-font-head);
    color: var(--ig-indigo);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Section headlines are the export's `text-3xl` (30px); the hero, the fabric
   story and the newsletter get their own display sizes below. */
body.ig-theme .mr-display {
    font-size: clamp(1.6rem, 3vw, 1.95rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

body.ig-theme .mr-headline {
    font-family: var(--ig-font-head);
    font-weight: 700;
}

/* "Stamped fabric label" eyebrows — uppercase, widely tracked, selvedge red. */
body.ig-theme .mr-eyebrow {
    font-family: var(--ig-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ig-red);
}

body.ig-theme .mr-muted { color: var(--ig-muted); }
body.ig-theme .mr-soft { color: var(--ig-soft); }

/* --------------------------------------------------------------------------
   Buttons + editorial links — "Primary buttons are solid Denim Indigo with
   Ecru text. Secondary buttons are outlined." (DESIGN.md Components)
   -------------------------------------------------------------------------- */
body.ig-theme .mr-btn {
    border-radius: var(--ig-radius);
    font-family: var(--ig-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.9rem 2.25rem;
}

/* Re-assert the white label. The base rule is only specificity (0,1,0), so any
   later anchor-coloured rule (a theme's own, or merchant custom CSS) would
   otherwise repaint the label and leave a solid indigo block with no visible
   text. */
body.ig-theme .mr-btn--primary,
body.ig-theme .mr-btn--primary:hover,
body.ig-theme .mr-btn--primary:focus {
    background-color: var(--ig-indigo);
    color: #fff;
}

body.ig-theme .mr-btn--primary:hover {
    background-color: var(--ig-indigo-mid);
    filter: none;
}

body.ig-theme .mr-btn--outline {
    border-width: 2px;
    border-color: var(--ig-indigo);
    color: var(--ig-indigo);
}

body.ig-theme .mr-btn--outline:hover {
    background-color: var(--ig-indigo);
    color: #fff;
}

/* The hero's "Shop Women" ghost — a 2px white keyline that inverts on hover. */
body.ig-theme .mr-btn--on-dark {
    border-width: 2px;
    border-color: #fff;
    color: #fff;
}

body.ig-theme .mr-btn--on-dark:hover {
    background-color: #fff;
    color: var(--ig-indigo);
}

body.ig-theme .mr-btn--hero { padding: 1rem 2.5rem; }

/* The export gives the hero's solid CTA the one shadow in the whole design
   (`shadow-lg`); everything else stays flat per DESIGN.md "Elevation". */
body.ig-theme .mr-btn--primary.mr-btn--hero { box-shadow: var(--ig-shadow); }

/* Keyline links — the export's tracked caps label sitting on a 1px indigo
   rule, going selvedge red on hover. */
.ig-keyline-link {
    display: inline-block;
    font-family: var(--ig-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ig-indigo);
    text-decoration: none;
    padding-bottom: 0.28rem;
    border-bottom: 1px solid var(--ig-indigo);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ig-keyline-link:hover {
    color: var(--ig-red);
    border-bottom-color: var(--ig-red);
}

body.ig-theme .mr-ulink:hover {
    color: var(--ig-red);
    border-color: var(--ig-red);
}

/* Shared section header: heading left, keyline link on the same baseline. */
.ig-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Announcement bar + header — a solid indigo band over the cool surface bar,
   ruled off by the export's 2px indigo border. The nav is uppercase tracked
   caps (the base is sentence case) and hovers selvedge red.
   -------------------------------------------------------------------------- */
body.ig-theme .mr-announce {
    background-color: var(--ig-indigo);
    color: #fff;
    font-family: var(--ig-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding-block: 0.55rem;
}

body.ig-theme .mr-announce a { color: #fff; }

body.ig-theme .mr-header {
    background-color: var(--ig-surface);
    border-bottom: 2px solid var(--ig-indigo);
}

body.ig-theme .mr-logo {
    font-family: var(--ig-font-head);
    font-weight: 700;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ig-indigo);
}

body.ig-theme .mr-nav-link {
    font-family: var(--ig-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ig-muted);
}

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

body.ig-theme .mr-nav-link.is-active {
    color: var(--ig-indigo);
    border-bottom-color: var(--ig-indigo);
}

body.ig-theme .mr-icon-btn { color: var(--ig-indigo); }
body.ig-theme .mr-icon-btn:hover { color: var(--ig-red); }

/* Cart / wishlist count pills — indigo and selvedge red, both carrying white
   numerals (14.59:1 / 10.59:1). */
body.ig-theme .mr-badge { background-color: var(--ig-indigo); color: #fff; }
body.ig-theme .mr-badge--wish { background-color: var(--ig-red); }

/* Search + fields — "Rectangular with 4px corners, using a 1px Indigo border.
   On focus, the border thickness increases" (rendered here as an inset ring so
   nothing reflows). */
body.ig-theme .mr-search input {
    background: var(--ig-ecru);
    border-color: var(--mr-border);
    border-radius: var(--ig-radius);
}

body.ig-theme .mr-search input:focus,
body.ig-theme .form-control:focus,
body.ig-theme .form-select:focus {
    background-color: var(--ig-surface);
    border-color: var(--ig-indigo);
    box-shadow: inset 0 0 0 1px var(--ig-indigo), 0 0 0 3px rgba(var(--ig-indigo-rgb), 0.12);
}

body.ig-theme .mr-search button:hover { color: var(--ig-indigo); }

/* --------------------------------------------------------------------------
   Hero — inherited full-bleed markup: the raw-denim macro photograph with the
   copy overlaid on the left. The base scrim is a neutral black gradient; it is
   RE-TINTED to indigo here rather than removed (the export's flat 20% tint is
   too weak to guarantee a readable white headline over an arbitrary merchant
   photograph — a bright upload composites to ~2.5:1).
   -------------------------------------------------------------------------- */
body.ig-theme .mr-hero { background-color: var(--ig-indigo); }

body.ig-theme .mr-hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(11, 21, 41, 0.74) 0%,
        rgba(11, 21, 41, 0.48) 46%,
        rgba(21, 40, 76, 0.28) 100%
    );
}

/* The export's hero eyebrow is the pale blush, not white. */
body.ig-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    color: var(--ig-blush);
    letter-spacing: 0.2em;
}

body.ig-theme .mr-hero .mr-hero__copy h1 {
    font-family: var(--ig-font-head);
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Trust strip — the export stacks a small indigo glyph ABOVE a single tracked
   caps label and centres each column, where the base sets them side by side.
   -------------------------------------------------------------------------- */
body.ig-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

body.ig-theme .mr-trust svg {
    width: 26px;
    height: 26px;
    color: var(--ig-indigo);
}

body.ig-theme .mr-trust strong {
    font-family: var(--ig-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ig-ink);
}

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

/* --------------------------------------------------------------------------
   Collection tiles (indigo-works promo override) — 4:5 photograph with the
   caption stacked BELOW it. No scrim: the workshop template never darkens
   these photos.
   -------------------------------------------------------------------------- */
.ig-promo {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ig-promo__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: var(--ig-fill);
    border: 1px solid var(--mr-border);
    margin-bottom: 1rem;
}

.ig-promo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.ig-promo:hover .ig-promo__img { transform: scale(1.05); }

.ig-promo__img--placeholder {
    background: linear-gradient(135deg, var(--ig-band), var(--ig-fill));
}

body.ig-theme .ig-promo__title {
    display: block;
    font-family: var(--ig-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ig-indigo);
    margin-bottom: 0.3rem;
}

.ig-promo__caption {
    display: block;
    font-family: var(--ig-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ig-muted);
}

/* --------------------------------------------------------------------------
   Core Essentials (featured override) — the export lifts this row onto a white
   band ruled top and bottom by a hairline.
   -------------------------------------------------------------------------- */
.ig-featured {
    background-color: var(--ig-white);
    border-block: 1px solid var(--mr-border);
}

/* --------------------------------------------------------------------------
   Product card — minimal, "heavy emphasis on the image", with `label-caps`
   categories and `price-display` Rs. values stacked below it (DESIGN.md
   Cards). The card stays borderless like the export, so its text needs no
   inset.
   -------------------------------------------------------------------------- */
body.ig-theme .mr-card__media {
    background-color: var(--ig-fill);
    border-radius: var(--ig-radius);
}

body.ig-theme .mr-card__eyebrow {
    font-family: var(--ig-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ig-muted);
    margin-bottom: 0.3rem;
}

body.ig-theme .mr-card__title {
    font-family: var(--ig-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ig-indigo);
    margin-bottom: 0.3rem;
}

body.ig-theme .mr-card__title a { color: inherit; }
body.ig-theme .mr-card__title a:hover { color: var(--ig-red); }

/* "Pricing must be formatted as Rs. 0,000 using Source Sans 3 Semibold"
   (DESIGN.md Typography). */
body.ig-theme .mr-card__price {
    font-family: var(--ig-font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ig-indigo);
}

/* The shared price component ships a theme-agnostic #d6293e sale ink and a
   #9aa0a6 strike-through — the first clashes with selvedge red and the second
   is only 2.5:1 on ecru. Re-ink both into the palette (the export shows the
   sale price in the deep red with a muted strike beside it). */
body.ig-theme .mr-card__price del,
body.ig-theme .ll-price-compare {
    color: var(--ig-soft);
    font-size: 0.85em;
    font-weight: 400;
}

body.ig-theme .ll-price--sale { color: var(--ig-red); }

/* The rating row is emitted with an inline `color:#f5a623` (about 2:1 on this
   canvas), so overriding it needs !important. Re-ink to the text-safe copper
   (5.01:1) — it only renders on products that actually have reviews. */
body.ig-theme [data-testid="card-rating"] { color: var(--ig-copper-ink) !important; }

body.ig-theme .mr-stars { color: var(--ig-copper-ink); }

/* The SALE / Demo pill. It is positioned by the SHARED
   storefront::head.theme-vars block (`.mr-card__badge{position:absolute;…}`),
   which also gives it a theme-agnostic #d6293e fill and a 999px pill. Restate
   the geometry (so this rule is self-contained) and re-ink it selvedge red with
   a white label (10.59:1), squared to the theme's radius — the export renders
   it as a hard-edged stamped chip. */
body.ig-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--ig-red);
    color: #fff;
    font-family: var(--ig-font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 0.125rem;
}

/* The two ROUND overlay controls — the wishlist heart AND the quick-view eye —
   are siblings with different names and must always be restyled together. Both
   keep the base's white-glass circle; the indigo ink measures 14.59:1 at rest
   and the hover pair (--mr-ink on --mr-surface) 16.4:1, so both states clear
   the 3:1 WCAG minimum for UI components by a wide margin. The "saved" heart
   uses the selvedge red (10.59:1 on the circle). */
body.ig-theme .mr-card__wish,
body.ig-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--ig-indigo);
    border-radius: 9999px;
}

body.ig-theme .mr-card__wish:hover,
body.ig-theme .mr-card__quickview:hover {
    background-color: var(--ig-surface);
    color: var(--ig-ink);
}

body.ig-theme .mr-card__wish.is-active { color: var(--ig-red); }

/* Slide-up "Add to Cart" — solid indigo with a tracked caps white label, like
   the export's primary action. */
body.ig-theme .mr-card__quick {
    background-color: var(--ig-indigo);
    color: #fff;
    font-family: var(--ig-font-body);
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   The fabric story (indigo-works-only section) — a split band on the ecru
   canvas: a desaturating workshop photograph under a selvedge-red corner
   bracket, beside a copy column ruled by the 2px "Selvedge Rule" keyline.
   -------------------------------------------------------------------------- */
.ig-story {
    background-color: var(--ig-ecru);
    padding-block: clamp(56px, 8vw, 96px);
}

.ig-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

/* With no photograph on file the copy takes the full width rather than leaving
   a dead column. */
.ig-story__grid--copy-only { grid-template-columns: 1fr; }

.ig-story__media { position: relative; }

.ig-story__bracket {
    position: absolute;
    top: -1rem;
    left: -1rem;
    width: 6rem;
    height: 6rem;
    border-top: 2px solid var(--ig-red);
    border-left: 2px solid var(--ig-red);
    z-index: 1;
}

.ig-story__img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1);
    transition: filter 1s ease;
}

.ig-story__media:hover .ig-story__img { filter: grayscale(0); }

/* "Vertical dividers and margins should occasionally use a 2px red left-border
   to denote sections, echoing the edge of raw denim fabric." */
.ig-story__copy {
    border-left: 2px solid var(--ig-red);
    padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
}

body.ig-theme .ig-story__heading {
    font-family: var(--ig-font-head);
    font-size: clamp(1.8rem, 3.4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ig-indigo);
    margin-bottom: 1.5rem;
}

.ig-story__body {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ig-muted);
    margin-bottom: 2rem;
}

.ig-story__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.ig-story__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ig-story__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--ig-red);
}

.ig-story__label {
    font-family: var(--ig-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ig-ink);
}

/* --------------------------------------------------------------------------
   New Season Washes (new-arrivals override) — the cool surface band, a widely
   tracked caps heading, and SQUARE centre-aligned cards. The export drops the
   category eyebrow in this row and keeps only the name and the price, so the
   inherited card markup is reused untouched and the eyebrow is hidden here.
   -------------------------------------------------------------------------- */
.ig-washes {
    background-color: var(--ig-surface);
    border-top: 1px solid rgba(var(--ig-indigo-rgb), 0.2);
}

body.ig-theme .ig-washes__heading {
    font-family: var(--ig-font-head);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ig-indigo);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

body.ig-theme .ig-washes .mr-card { text-align: center; }

body.ig-theme .ig-washes .mr-card__media {
    aspect-ratio: 1;
    background-color: var(--ig-fill);
    margin-bottom: 1.5rem;
}

body.ig-theme .ig-washes .mr-card__eyebrow { display: none; }

body.ig-theme .ig-washes .mr-card__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.ig-theme .ig-washes .mr-card__price { font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Category tiles — inherited markup, restyled to the export's photographic
   band: a taller keylined tile, a bottom-weighted indigo scrim (which keeps the
   white label readable over any merchant photograph, unlike the export's flat
   30% wash) and the name set bottom-LEFT in tracked caps rather than centred.
   -------------------------------------------------------------------------- */
body.ig-theme .mr-tile--cat {
    height: clamp(260px, 30vw, 384px);
    border: 1px solid rgba(var(--ig-indigo-rgb), 0.2);
    background-color: var(--ig-fill);
}

body.ig-theme .mr-tile--cat .mr-tile__scrim {
    display: block;
    background: linear-gradient(
        180deg,
        rgba(11, 21, 41, 0.18) 35%,
        rgba(11, 21, 41, 0.66) 100%
    );
    transition: background 0.3s ease;
}

body.ig-theme .mr-tile--cat:hover .mr-tile__scrim {
    background: linear-gradient(
        180deg,
        rgba(11, 21, 41, 0.08) 35%,
        rgba(11, 21, 41, 0.58) 100%
    );
}

body.ig-theme .mr-tile--cat .mr-tile__cap {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    text-align: left;
    font-family: var(--ig-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

/* --------------------------------------------------------------------------
   From the Journal (journal override) — a quiet band of white bordered notes
   whose hairline goes indigo on hover. No cover photography, per the export.
   -------------------------------------------------------------------------- */
.ig-journal { background-color: var(--ig-band-quiet); }

body.ig-theme .ig-journal__heading {
    font-family: var(--ig-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ig-indigo);
    margin-bottom: 0;
}

.ig-note {
    display: block;
    height: 100%;
    background-color: var(--ig-white);
    border: 1px solid var(--mr-border);
    padding: clamp(1.5rem, 3vw, 2rem);
    transition: border-color 0.25s ease;
}

.ig-note:hover { border-color: var(--ig-indigo); }

body.ig-theme .ig-note__label { font-size: 0.62rem; }

body.ig-theme .ig-note__title {
    font-family: var(--ig-font-head);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

body.ig-theme .ig-note__title a {
    color: var(--ig-indigo);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.ig-theme .ig-note__title a:hover { color: var(--ig-red); }

.ig-note__excerpt {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ig-muted);
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Fade Report (newsletter override) — an inset panel ruled by a 2px indigo
   keyline on the ecru canvas, centred, with a decorative mail glyph.
   -------------------------------------------------------------------------- */
.ig-cta { padding-block: var(--mr-section-y); }

.ig-cta__panel {
    border: 2px solid var(--ig-indigo);
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ig-cta__glyph {
    display: inline-flex;
    color: var(--ig-indigo);
    margin-bottom: 1.5rem;
}

.ig-cta__glyph svg {
    width: 2.25rem;
    height: 2.25rem;
}

body.ig-theme .ig-cta__heading {
    font-family: var(--ig-font-head);
    font-size: clamp(1.9rem, 3.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ig-indigo);
    margin-bottom: 0.5rem;
}

.ig-cta__body {
    font-size: 1.125rem;
    color: var(--ig-muted);
    max-width: 46ch;
    margin-bottom: 2.5rem;
}

.ig-cta__form {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 32rem;
}

.ig-cta__form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid var(--mr-border-strong);
    border-radius: var(--ig-radius);
    color: var(--ig-ink);
    font-family: var(--ig-font-body);
    font-size: 0.95rem;
    padding: 0.9rem 1.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ig-cta__form input::placeholder { color: var(--ig-soft); }

.ig-cta__form input:focus {
    outline: none;
    border-color: var(--ig-indigo);
    box-shadow: inset 0 0 0 1px var(--ig-indigo);
}

.ig-cta__btn {
    border: 0;
    border-radius: var(--ig-radius);
    background-color: var(--ig-indigo);
    color: #fff;
    font-family: var(--ig-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.9rem 2.5rem;
    transition: background-color 0.25s ease;
}

.ig-cta__btn:hover:not(:disabled) { background-color: var(--ig-indigo-mid); }

/* Stub form (the subscription module is Phase 6) — keep the button looking
   solid rather than Bootstrap-faded, but honest about being inert. */
.ig-cta__btn:disabled {
    opacity: 1;
    cursor: not-allowed;
}

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

/* --------------------------------------------------------------------------
   Inherited component finishing — press strip, tabs, gallery, pagination.
   -------------------------------------------------------------------------- */
body.ig-theme .mr-brandstrip span {
    font-family: var(--ig-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ig-indigo);
}

body.ig-theme .mr-tabs .nav-link.active {
    color: var(--ig-indigo);
    border-bottom-color: var(--ig-red);
}

body.ig-theme .mr-gallery__thumb.is-active { border-color: var(--ig-indigo); }

body.ig-theme .mr-filter__title,
body.ig-theme .mr-field-label,
body.ig-theme .mr-step__label {
    font-family: var(--ig-font-body);
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Footer — the export's indigo slab, ruled off the page by a 4px selvedge-red
   border. EVERY text token riding on it has to be re-inked, or the re-pointed
   light neutrals above (ink #0b1b35, muted #44474e, soft #5f6169) go invisible
   against the navy.
   -------------------------------------------------------------------------- */
body.ig-theme .mr-footer {
    background-color: var(--ig-indigo);
    border-top: 4px solid var(--ig-red);
    color: #d7e3ff;
}

body.ig-theme .mr-footer h4 {
    font-family: var(--ig-font-body);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--ig-blush);
}

body.ig-theme .mr-footer__brand {
    font-family: var(--ig-font-head);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

body.ig-theme .mr-footer a { color: #d7e3ff; }
body.ig-theme .mr-footer a:hover { color: #fff; }

body.ig-theme .mr-footer .mr-muted { color: #d7e3ff; }
body.ig-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.7); }
body.ig-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.18); }

/* The footer newsletter field sits on the slab, so it needs its own ink — and
   the base's "Join" button is .mr-btn--primary, i.e. an indigo fill on an
   indigo band (an invisible button). Invert it: white plate, indigo label
   (14.59:1), like the export's white submit square. */
body.ig-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

body.ig-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.6); }

body.ig-theme .mr-footer .form-control:focus {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    box-shadow: inset 0 0 0 1px #fff;
}

body.ig-theme .mr-footer .mr-btn--primary,
body.ig-theme .mr-footer .mr-btn--primary:hover,
body.ig-theme .mr-footer .mr-btn--primary:focus {
    background-color: #fff;
    color: var(--ig-indigo);
}

body.ig-theme .mr-social {
    border-radius: var(--ig-radius);
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
}

body.ig-theme .mr-social:hover {
    background-color: var(--ig-blush);
    border-color: var(--ig-blush);
    color: var(--ig-indigo);
}

/* --------------------------------------------------------------------------
   Focus accessibility — the base outlines with --ll-accent, and Selvedge Red on
   the indigo footer / hero / announcement band measures 1.38:1, well under the
   3:1 WCAG minimum for non-text UI. Re-point the outline to the pale blush on
   those bands only (11.28:1); everywhere else the red outline is 8.98:1 on ecru
   and stays.
   -------------------------------------------------------------------------- */
body.ig-theme .mr-footer a:focus-visible,
body.ig-theme .mr-footer button:focus-visible,
body.ig-theme .mr-footer input:focus-visible,
body.ig-theme .mr-hero a:focus-visible,
body.ig-theme .mr-announce a:focus-visible,
body.ig-theme .mr-tile--cat:focus-visible {
    outline-color: var(--ig-blush);
}

/* --------------------------------------------------------------------------
   Reduced motion — every transform / zoom / desaturation in this theme is
   decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ig-theme .mr-btn,
    body.ig-theme .ig-keyline-link,
    body.ig-theme .ig-promo__img,
    body.ig-theme .ig-story__img,
    body.ig-theme .ig-note,
    body.ig-theme .mr-card__media img,
    body.ig-theme .mr-tile__img,
    body.ig-theme .mr-tile--cat .mr-tile__scrim {
        transition: none;
    }

    /* The base's reduced-motion block only kills these transitions, not the
       hover transforms themselves. */
    body.ig-theme .ig-promo:hover .ig-promo__img,
    body.ig-theme .mr-card:hover .mr-card__media img,
    body.ig-theme .mr-tile--cat:hover .mr-tile__media img {
        transform: none;
    }

    body.ig-theme .ig-story__media:hover .ig-story__img { filter: grayscale(1); }
}

/* --------------------------------------------------------------------------
   Mobile — the export's fluid 4-column grid: the fabric story stacks (photo
   first, then the keylined copy), the newsletter form goes full width and the
   display sizes step down.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ig-story {
        padding-block: clamp(40px, 9vw, 56px);
    }

    .ig-story__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ig-story__bracket {
        width: 4rem;
        height: 4rem;
        top: -0.75rem;
        left: -0.75rem;
    }

    .ig-story__copy { padding-inline-start: 1.25rem; }

    .ig-story__body {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .ig-section-head { margin-bottom: 2rem; }

    body.ig-theme .ig-washes__heading { letter-spacing: 0.14em; }

    .ig-cta__form { flex-direction: column; }

    .ig-cta__btn { width: 100%; }

    .ig-cta__body {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    body.ig-theme .mr-tile--cat .mr-tile__cap {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.25rem;
        font-size: 0.95rem;
    }
}