/* ==========================================================================
   Thaan — modern minimalism with tactile editorial warmth for an unstitched
   fabric atelier.

   Ported from the Stitch "Thaan — Modern Fabric Atelier" design (the Atelier
   Heritage design system lives at docs/templates/pending/
   stitch_34_thaan_modern_atelier_homepage/…/atelier_heritage/DESIGN.md): a
   warm raw-cotton canvas, deep-teal structure (navigation, primary actions,
   the seasonal band and the footer), a sparing rose-madder accent for
   category labels / see-all links / sale badges, Playfair Display headlines
   over Source Sans 3 body + UI + Rs. prices, a consistent soft 6px radius on
   buttons, fields, cards and imagery, and low-contrast tonal layers instead
   of heavy shadows ("flat fabric" elevation).

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

     (a) style the NEW `ta-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the raw-cotton palette, dressing the header /
         announcement bar / promo tiles / footer in deep teal, and inking the
         product card's fabric eyebrow and price the way the export does.

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

   CONTRAST (ratios computed against the palette below):
     - primary Deep Teal #175b52 is DARK — 7.53:1 on the raw-cotton canvas,
       and white-on-teal is 7.91:1 — so it is safe as body-adjacent text, as
       an icon, and as a fill carrying white labels. Keeping primary dark also
       keeps every inherited base rule that hardcodes `color:#fff` over a
       primary fill legible (.mr-badge, .mr-cta, .mr-page.is-active,
       .mr-acct-avatar, Bootstrap's own .btn-primary in the shared review
       form, …) — see references/gotchas.md on light primaries.
     - accent Rose Madder #b13d68 is MID-TONE and passes BOTH ways: 5.35:1 as
       text on the canvas and 5.62:1 carrying white text as a fill. It can
       therefore be used directly for the small tracked labels that are this
       theme's signature (card fabric eyebrows, see-all links, SALE badge)
       without needing a darker "-ink" sibling.
     - the deep band / footer green (the export's `bg-primary` #00423b, here
       derived as 80% of the primary so it follows the customizer) is darker
       still: white 11.40:1, the pale-blush eyebrow #ffd9e1 8.83:1, and the
       80%-white body copy 7.86:1. Because it is DARKER than the primary by
       construction, every ratio on it only improves if a merchant lightens
       the primary — but note the primary itself must stay dark (below).
     - --mr-soft drives small captions, breadcrumbs and struck-through
       compare-at prices, so it may NOT reuse the design's own `outline`
       token (#6f7976 — only 4.28:1 on this canvas, under the 4.5:1 normal
       text minimum). --ta-soft (#5c6664) is a deliberately darkened value in
       the same cool-grey family and clears 5.65:1.
   ========================================================================== */

body.ta-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ta-teal: var(--bs-primary, #175b52);
    --ta-teal-rgb: var(--bs-primary-rgb, 23, 91, 82);
    /* 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 teal. NOTE: this is deliberately
       used INSTEAD of a bare `body.ta-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(--ta-teal-rgb);
    --ta-rose: var(--ll-accent, #b13d68);
    --ta-radius: var(--bs-border-radius, 0.375rem);
    --ta-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, "Times New Roman", serif;
    --ta-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Atelier Heritage palette (DESIGN.md + the export's rendered values) */
    --ta-cotton: #fff8f5;         /* page canvas, header, inherited surface   */
    --ta-container-low: #fbf2ed;  /* quiet band (categories, panels)          */
    --ta-container: #f5ece7;      /* trust strip / secondary band             */
    --ta-container-high: #efe6e2; /* card media well + newsletter panel       */
    /* The band + footer slab. DERIVED from the customizer primary (a literal
       fallback first, for browsers without color-mix) so a merchant who
       recolours the theme does not end up with a deep-green footer under a
       maroon header — the export's own `bg-primary` #00423b is simply the
       primary darkened, and 80%-of-teal reproduces it to within a hair. */
    --ta-green-deep: #00423b;
    --ta-green-deep: color-mix(in srgb, var(--ta-teal) 80%, #000);
    --ta-blush: #ffd9e1;          /* eyebrow + footer headings ON deep green  */
    --ta-ink: #1e1b18;            /* on-surface — body copy, card titles      */
    --ta-muted: #3f4946;          /* on-surface-variant — leads, excerpts     */
    --ta-soft: #5c6664;           /* darkened outline — see CONTRAST note     */

    /* Depth: "tonal layers and low-contrast outlines rather than heavy
       shadows" — one soft ambient shadow reserved for hover lifts. */
    --ta-shadow: 0 12px 28px -12px rgba(var(--ta-teal-rgb), 0.14);

    /* Re-point the inherited base neutrals at the raw-cotton palette so every
       inherited mr-* surface (shop, PDP, cart, checkout, account, blog, 404)
       warms with the theme. Borders read as a 1px teal-tinted hairline
       ("1px solid, 10% opacity of Deep Teal" per DESIGN.md) via color-mix,
       with a literal fallback for browsers without it. */
    --mr-ink: var(--ta-ink);
    --mr-muted: var(--ta-muted);
    --mr-soft: var(--ta-soft);
    --mr-surface: var(--ta-cotton);
    --mr-band: var(--ta-container-low);
    --mr-band-alt: var(--ta-container);
    --mr-fill: var(--ta-container-high);
    --mr-border: #e4e6e2;
    --mr-border: color-mix(in srgb, var(--ta-teal) 14%, var(--ta-cotton));
    --mr-border-strong: #b9c8c3;
    --mr-border-strong: color-mix(in srgb, var(--ta-teal) 34%, var(--ta-cotton));
    --mr-radius: var(--ta-radius);
    --mr-gold: var(--ta-rose);
    --mr-shadow: var(--ta-shadow);

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

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

/* --------------------------------------------------------------------------
   Shape discipline — one soft 6px radius across interactive elements and
   imagery ("Soft Corners", DESIGN.md). Deliberately NOT a
   `border-radius: 0 !important` flatten (this design is rounded, not sharp),
   so the round overlay controls on the product card keep their circles. And
   never a `padding` SHORTHAND on .form-select — that would collapse
   Bootstrap's reserved 2.25rem caret gutter and run the option text under the
   arrow; the base app.css already restores it with padding-inline-end and is
   left untouched here.
   -------------------------------------------------------------------------- */
body.ta-theme .form-control,
body.ta-theme .form-select,
body.ta-theme .dropdown-menu,
body.ta-theme .offcanvas,
body.ta-theme .mr-promo,
body.ta-theme .mr-promo__img,
body.ta-theme .ta-hero__media,
body.ta-theme .ta-edit__fig img,
body.ta-theme .ta-cta__panel {
    border-radius: var(--ta-radius);
}

/* --------------------------------------------------------------------------
   Typography — Playfair for headings (600 for section headlines, 700 for the
   display sizes), Source Sans 3 for everything functional. Headings ink deep
   teal like the export; the product card title stays near-black so a grid of
   names doesn't read as a wall of links.
   -------------------------------------------------------------------------- */
body.ta-theme h1, body.ta-theme h2, body.ta-theme h3,
body.ta-theme h4, body.ta-theme h5, body.ta-theme h6 {
    font-family: var(--ta-font-head);
    color: var(--ta-teal);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Section headlines are the export's headline-md (32px/600); the hero, the
   seasonal band and the newsletter get their own display-lg sizes below. */
body.ta-theme .mr-display {
    font-size: clamp(1.6rem, 2.9vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

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

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

/* --------------------------------------------------------------------------
   Buttons + editorial links — solid deep-teal primary with a white label, a
   teal-outline ghost for the hero's "Shop by the Meter", and rose-madder
   underlined see-all links.
   -------------------------------------------------------------------------- */
body.ta-theme .mr-btn {
    border-radius: var(--ta-radius);
    font-family: var(--ta-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.9rem 2rem;
}

/* 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 teal block with no
   visible text. */
body.ta-theme .mr-btn--primary,
body.ta-theme .mr-btn--primary:hover,
body.ta-theme .mr-btn--primary:focus {
    background-color: var(--ta-teal);
    border-color: var(--ta-teal);
    color: #fff;
}

body.ta-theme .mr-btn--primary:hover {
    filter: brightness(1.14);
}

body.ta-theme .mr-btn--outline {
    border-color: var(--ta-teal);
    color: var(--ta-teal);
}

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

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

/* Section header: heading on the left, see-all link on the shared baseline. */
.ta-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ta-view-link {
    font-family: var(--ta-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ta-rose);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}

.ta-view-link:hover {
    color: var(--ta-teal);
}

/* --------------------------------------------------------------------------
   Announcement bar + header — a deep-teal band over the cotton header, with
   the uppercase tracked nav the export uses in place of the base's
   sentence-case links. The active link is TEAL (not the accent) with a
   2px teal underline, matching the export's "Lawn" state.
   -------------------------------------------------------------------------- */
body.ta-theme .mr-announce {
    background-color: var(--ta-teal);
    color: #e8f3f0;
    font-family: var(--ta-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding-block: 0.55rem;
}

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

/* The export's header is a translucent, blurred cotton bar over the scrolling
   content (`bg-surface-bright/95 backdrop-blur-md`). The opaque colour is
   declared first so browsers without backdrop-filter still get a solid bar. */
body.ta-theme .mr-header {
    background-color: var(--ta-cotton);
    background-color: rgba(255, 248, 245, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mr-border);
}

body.ta-theme .mr-logo {
    font-family: var(--ta-font-head);
    font-weight: 600;
    color: var(--ta-teal);
    letter-spacing: -0.01em;
}

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

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

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

body.ta-theme .mr-icon-btn { color: var(--ta-teal); }
body.ta-theme .mr-icon-btn:hover { color: var(--ta-rose); }

/* The cart/wishlist count pills — teal fill, rose for the wishlist, both
   carrying white numerals (7.91:1 / 5.62:1). */
body.ta-theme .mr-badge { background-color: var(--ta-teal); color: #fff; }
body.ta-theme .mr-badge--wish { background-color: var(--ta-rose); }

/* Search field — a light enclosure on the warm canvas (DESIGN.md "Input
   Fields": transparent with a light enclosure), teal focus ring. */
body.ta-theme .mr-search input {
    background: var(--ta-container-low);
    border-color: var(--mr-border);
    border-radius: var(--ta-radius);
}

body.ta-theme .mr-search input:focus {
    background: var(--ta-cotton);
    border-color: var(--ta-teal);
    box-shadow: 0 0 0 3px rgba(var(--ta-teal-rgb), 0.16);
}

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

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

/* --------------------------------------------------------------------------
   Hero — a 50/50 editorial split on the canvas: a soft-cornered photograph of
   fanned bolts on the left, the copy column on the right. No dark overlay is
   needed (unlike the base's full-bleed hero) because the type sits on the
   cotton canvas, not on the photograph.
   -------------------------------------------------------------------------- */
.ta-hero {
    background-color: var(--ta-cotton);
    padding-block: clamp(32px, 5vw, 48px);
}

.ta-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.ta-hero__media {
    position: relative;
    overflow: hidden;
    height: clamp(340px, 42vw, 500px);
    background-color: var(--ta-container);
    box-shadow: var(--ta-shadow);
}

.ta-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.ta-hero__media:hover .ta-hero__img { transform: scale(1.05); }

.ta-hero__copy { padding-inline-start: clamp(0px, 2vw, 24px); }

body.ta-theme .ta-hero__title {
    font-family: var(--ta-font-head);
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ta-teal);
    margin-bottom: 1rem;
}

.ta-hero__lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ta-muted);
    max-width: 46ch;
    margin-bottom: 1.75rem;
}

.ta-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* The "Shop by the Meter" ghost — a teal outline, never a bare text link, so
   it reads as the pair to the solid primary. */
.ta-hero__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ta-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.9rem 2rem;
    border: 1px solid var(--ta-teal);
    border-radius: var(--ta-radius);
    color: var(--ta-teal);
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.ta-hero__ghost:hover {
    background-color: rgba(var(--ta-teal-rgb), 0.07);
    color: var(--ta-teal);
}

/* --------------------------------------------------------------------------
   Trust strip (inherited partial) — teal icons over teal uppercase labels on
   the warm secondary band, per the export's "Mill-Fresh Fabric" row.
   -------------------------------------------------------------------------- */
body.ta-theme .mr-trust svg { color: var(--ta-teal); }

body.ta-theme .mr-trust strong {
    font-family: var(--ta-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ta-teal);
}

body.ta-theme .mr-trust span { color: var(--ta-soft); }

/* --------------------------------------------------------------------------
   Promo tiles (inherited partial) — 4:5 imagery under a teal-tinted gradient
   with the collection name in Playfair and a "Shop Collection" label below
   it. The hover state of the CTA must be overridden on the base's DESCENDANT
   selector (`.mr-promo:hover .mr-promo__cta`, specificity (0,0,3,0)) or the
   base's accent-coloured hover wins over a plain child rule.
   -------------------------------------------------------------------------- */
body.ta-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--ta-teal-rgb), 0) 40%, rgba(var(--ta-teal-rgb), 0.82) 100%);
}

body.ta-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--ta-teal-rgb), 0.1) 25%, rgba(var(--ta-teal-rgb), 0.9) 100%);
}

body.ta-theme .mr-promo__title {
    font-family: var(--ta-font-head);
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    font-weight: 600;
    color: #fff;
}

/* The export renders "Shop Collection" as a plain tracked label, not the
   base's underlined pseudo-link. */
body.ta-theme .mr-promo__cta,
body.ta-theme .mr-promo:hover .mr-promo__cta {
    font-family: var(--ta-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    border-bottom: 0;
    padding-bottom: 0;
}

/* The base's inherited image tiles (used by the collections page and the
   category showcase) scrim with a hard-coded navy — jarring over warm fabric
   photography. Re-tint with the theme's own green. */
body.ta-theme .mr-tile__scrim {
    background: linear-gradient(180deg, rgba(var(--ta-teal-rgb), 0.05) 0%, rgba(var(--ta-teal-rgb), 0.6) 100%);
}

body.ta-theme .mr-tile--cat .mr-tile__scrim {
    background: rgba(var(--ta-teal-rgb), 0.38);
}

/* --------------------------------------------------------------------------
   Product card (inherited partial) — the export's card: a 6px media well, a
   rose-madder uppercase FABRIC label above a Playfair name, then the price in
   Source Sans 3 semibold teal. The card itself stays borderless and
   background-less (as the base ships it), so its text needs no inset padding.
   -------------------------------------------------------------------------- */
body.ta-theme .mr-card__media {
    background-color: var(--ta-container-high);
    border-radius: var(--ta-radius);
}

body.ta-theme .mr-card__eyebrow {
    font-family: var(--ta-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ta-rose);
    margin-bottom: 0.35rem;
}

body.ta-theme .mr-card__title {
    font-family: var(--ta-font-head);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ta-ink);
}

body.ta-theme .mr-card__title a { color: var(--ta-ink); }
body.ta-theme .mr-card__title a:hover { color: var(--ta-teal); }

/* DESIGN.md: "All pricing should use Source Sans 3 Semi-Bold to ensure the
   currency (Rs.) is distinct and trustworthy." The PDP and quick-view prices
   are `<p class="h4">`, i.e. the CLASS form of a heading — which
   storefront::head.theme-vars puts in the HEADINGS font — so they must be
   named explicitly or the store's most important number renders in Playfair
   while the card price 200px away renders in Source Sans 3. */
body.ta-theme .mr-card__price,
body.ta-theme [data-pdp-price],
body.ta-theme [data-qv-price] {
    font-family: var(--ta-font-body);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ta-teal);
}

body.ta-theme [data-pdp-price],
body.ta-theme [data-qv-price] {
    font-size: 1.5rem;
}

/* The SHARED sale/compare-at price classes (storefront::head.theme-vars) are
   deliberately theme-agnostic: `.ll-price--sale` is a hard #d6293e red, which
   next to this theme's rose-madder SALE badge reads as two clashing reds, and
   `.ll-price-compare` is #9aa0a6 — only 2.51:1 on the cotton canvas, below the
   4.5:1 minimum. Re-ink both into the palette (the export shows the live price
   in primary green with a muted strike-through beside it). */
body.ta-theme .mr-card__price del,
body.ta-theme .ll-price-compare {
    color: var(--ta-soft);
    font-size: 0.85em;
    font-weight: 400;
}

body.ta-theme .ll-price--sale {
    color: var(--ta-teal);
}

/* 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 red fill and a 999px pill.
   Restate the geometry (so this rule is self-contained) and re-ink it rose
   madder with a white label (5.62:1), squared to the theme's radius. */
body.ta-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--ta-rose);
    color: #fff;
    font-family: var(--ta-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 0.2rem;
}

/* 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 teal ink measures 7.53:1 at
   rest and the hover pair (--mr-ink on --mr-surface) 15.4:1, so both states
   clear the 3:1 WCAG minimum for UI components. The "saved" heart uses the
   rose accent (5.35:1 on the circle) rather than a washed-out tint. */
body.ta-theme .mr-card__wish,
body.ta-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--ta-teal);
    border-radius: 9999px;
}

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

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

/* Slide-up "Quick Add" — the export renders it as a light glass bar with teal
   type rather than the base's solid primary block. */
body.ta-theme .mr-card__quick {
    background-color: rgba(255, 248, 245, 0.94);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--ta-teal);
    font-family: var(--ta-font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Seasonal edit (thaan-only section) — a full-bleed deep-green band: a narrow
   story column on the left, three tall fabric photographs on the right whose
   middle frame is scaled up and lifted so the trio reads like cloth draped
   over a cutting table.
   -------------------------------------------------------------------------- */
.ta-edit {
    background-color: var(--ta-green-deep);
    color: #fff;
    padding-block: clamp(56px, 8vw, 80px);
    margin-bottom: clamp(32px, 5vw, 48px);
    overflow: hidden;
}

.ta-edit__grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.ta-edit__copy { padding-inline-end: clamp(0px, 2vw, 32px); }

body.ta-theme .ta-edit__eyebrow { color: var(--ta-blush); }

body.ta-theme .ta-edit__heading {
    font-family: var(--ta-font-head);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1rem;
}

.ta-edit__body {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Auto columns rather than a hard `repeat(3, 1fr)`: the partial drops any
   frame whose file is missing, so a merchant with one or two photographs gets
   a full-width row instead of a dead third column. */
.ta-edit__gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1rem;
    height: clamp(280px, 30vw, 400px);
}

.ta-edit__fig {
    display: block;
    height: 100%;
    overflow: hidden;
}

.ta-edit__fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The lifted centre frame (the export's `scale-110 -translate-y-4 shadow-xl`).
   Scoped to the frame that is genuinely in the MIDDLE of three, so a two-photo
   row doesn't lift its second (i.e. last) frame for no reason. */
.ta-edit__fig:nth-child(2):nth-last-child(2) {
    transform: scale(1.08) translateY(-1rem);
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Shop by Category — small ROUND swatch tiles with the fabric name set below
   the circle and a teal ring on hover.
   -------------------------------------------------------------------------- */
.ta-swatches { background-color: var(--ta-cotton); }

.ta-swatch { text-decoration: none; }

.ta-swatch__media {
    position: relative;
    display: block;
    width: clamp(104px, 12vw, 128px);
    height: clamp(104px, 12vw, 128px);
    margin: 0 auto 1rem;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--ta-container);
    border: 2px solid transparent;
    transition: border-color 0.25s ease;
}

.ta-swatch:hover .ta-swatch__media { border-color: var(--ta-teal); }

.ta-swatch__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 9999px;
}

.ta-swatch__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ta-container), var(--ta-container-high));
}

.ta-swatch__label {
    display: block;
    font-family: var(--ta-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ta-teal);
}

/* --------------------------------------------------------------------------
   Journal — 16:9 covers, rose category labels, Playfair titles inked teal.
   -------------------------------------------------------------------------- */
body.ta-theme .ta-article__media { aspect-ratio: 16 / 9; }

body.ta-theme .mr-article__title {
    font-family: var(--ta-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

body.ta-theme .mr-article__title a { color: var(--ta-teal); }
body.ta-theme .mr-article__title a:hover { color: var(--ta-rose); }

/* --------------------------------------------------------------------------
   Newsletter — an inset soft-cornered panel on the warm container tone. This
   theme does NOT inherit the base's dark .mr-cta band, so nothing here
   depends on white-on-primary.
   -------------------------------------------------------------------------- */
.ta-cta { padding-block: clamp(24px, 4vw, 40px) clamp(56px, 8vw, 80px); }

.ta-cta__panel {
    background-color: var(--ta-container-high);
    padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 40px);
}

body.ta-theme .ta-cta__heading {
    font-family: var(--ta-font-head);
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ta-teal);
    margin-bottom: 0.5rem;
}

.ta-cta__body {
    font-size: 1.05rem;
    color: var(--ta-muted);
    max-width: 46ch;
    margin-bottom: 2rem;
}

.ta-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 34rem;
}

.ta-cta__form input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--ta-cotton);
    border: 1px solid var(--mr-border-strong);
    border-radius: var(--ta-radius);
    color: var(--ta-ink);
    font-family: var(--ta-font-body);
    font-size: 0.95rem;
    padding: 0.85rem 1.25rem;
}

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

/* NOTE: no `outline: none` here. The base ships
   `body.mr-theme input:focus-visible { outline: 2px solid var(--ll-accent) }`
   at the same specificity, and this stylesheet loads later — killing the
   outline would leave only a 1.25:1 tinted shadow on the warm panel, i.e. no
   perceptible keyboard focus indicator. */
.ta-cta__form input:focus {
    border-color: var(--ta-teal);
    box-shadow: 0 0 0 3px rgba(var(--ta-teal-rgb), 0.16);
}

.ta-cta__btn {
    flex: 0 0 auto;
    border: 1px solid var(--ta-teal);
    border-radius: var(--ta-radius);
    background-color: var(--ta-teal);
    color: #fff;
    font-family: var(--ta-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.85rem 2rem;
    cursor: pointer;
}

/* The form is a stub until the subscription module lands (the section's `note`
   field says so). Keep the disabled state legible — at 0.75 the white label
   measured 4.39:1, under the 4.5:1 minimum. */
.ta-cta__btn:disabled { opacity: 0.9; cursor: default; }

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

/* --------------------------------------------------------------------------
   Footer — the export's deep-green slab. The base footer is a light band, so
   every ink role inside it has to be restated for the dark surface.
   -------------------------------------------------------------------------- */
body.ta-theme .mr-footer {
    background-color: var(--ta-green-deep);
    border-top: 0;
    color: rgba(255, 255, 255, 0.8);
}

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

body.ta-theme .mr-footer p,
body.ta-theme .mr-footer li,
body.ta-theme .mr-footer .mr-muted,
body.ta-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.78); }

body.ta-theme .mr-footer a { color: rgba(255, 255, 255, 0.78); }
body.ta-theme .mr-footer a:hover { color: #fff; text-decoration: underline; }

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

body.ta-theme .mr-footer .mr-social {
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

body.ta-theme .mr-footer .mr-social:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--ta-green-deep);
}

/* `.mr-divider` draws its line with a background-color (height:1px; border:0),
   so a `border-color` override here would be a no-op that merely strips
   Reboot's hr{opacity:.25} and leaves a full-strength light hairline. */
body.ta-theme .mr-footer .mr-divider,
body.ta-theme .mr-footer hr {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

/* The footer's newsletter column reuses `.mr-btn--primary` ("Join"). A teal
   fill on the deep-green slab is a 1.44:1 boundary — the button vanishes and
   only its white label reads. Invert it on this surface. */
body.ta-theme .mr-footer .mr-btn--primary,
body.ta-theme .mr-footer .mr-btn--primary:hover,
body.ta-theme .mr-footer .mr-btn--primary:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--ta-green-deep);
    filter: none;
}

body.ta-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

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

/* --------------------------------------------------------------------------
   Reduced motion — every transition in this theme is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ta-theme .ta-hero__img,
    body.ta-theme .ta-swatch__media,
    body.ta-theme .ta-view-link,
    body.ta-theme .ta-hero__ghost { transition: none; }

    body.ta-theme .ta-hero__media:hover .ta-hero__img { transform: none; }

    body.ta-theme .ta-edit__fig:nth-child(2):nth-last-child(2) { transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile / tablet — the export's phone frame stacks the split hero and the
   seasonal band into single columns and keeps the swatch row two-up.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ta-hero__grid,
    .ta-edit__grid {
        grid-template-columns: 1fr;
    }

    .ta-hero__copy { padding-inline-start: 0; }
    .ta-hero__media { height: clamp(260px, 56vw, 380px); }
    .ta-hero__lead { font-size: 1rem; }

    .ta-edit__copy { padding-inline-end: 0; }

    body.ta-theme .ta-edit__heading { font-size: clamp(1.75rem, 7vw, 2rem); }

    .ta-edit__gallery { height: clamp(200px, 44vw, 260px); gap: 0.75rem; }

    /* The lifted centre frame reads as a misalignment once the band is only
       one column wide — flatten the trio on small screens. */
    .ta-edit__fig:nth-child(2):nth-last-child(2) { transform: none; box-shadow: none; }

    .ta-cta__form { flex-direction: column; }
    .ta-cta__btn { width: 100%; }

    .ta-section-head { align-items: flex-start; }
}