/* ==========================================================================
   Tress & Co — soft salon luxury for professional hair care.

   Ported from the Stitch "Tress & Co | Professional Hair Care Rituals" design
   (docs/templates/pending/stitch_36_tress_co_e_commerce_homepage/
   .../tress_co/DESIGN.md): a blush-cream "shell" canvas, deep-espresso actions
   and type, a sparing rose-mauve accent for labels/links, Lora serif headings
   (500-600, "calligraphic roots … keep weights medium to maintain elegance")
   over Source Sans 3 for all body/UI/prices, and a single soft 0.75rem (12px)
   "squircle" radius on cards, inputs, buttons and imagery. NO heavy shadows —
   DESIGN.md "Elevation & Depth" asks for Tonal Layers plus very fine 1px
   outlines in Deep Cocoa at ~10% opacity, with at most a soft ambient blur.

   This theme OWNS the hero / featured / hair-ritual / new-arrivals /
   categories / journal / newsletter home sections (tc-* markup) and INHERITS
   Modern Retail's header (the export's header IS logo-left single-row),
   footer, trust strip, promo tiles, brands, product card and every functional
   page. This stylesheet therefore has two jobs:

     (a) style the NEW `tc-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the blush-cream/espresso palette, and drawing
         the deep-espresso footer + announcement band the export renders (both
         reuse the primary token rather than an uncustomizable 3rd literal, so
         the 5-token customizer stays in full control).

   Everything is scoped under `body.tc-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.

   ------------------------------------------------------------------------
   TOKEN SOURCING NOTE. The task brief proposed primary #4a322b / accent
   #c4838f; the RENDERED export disagrees and the rendered button colour wins
   (theme-factory decision framework 5). In code.html every CTA, the ritual
   band and the footer are `bg-primary` = #321d17, and every eyebrow, see-all
   link, journal label, product category label and the SALE chip are
   `text-secondary`/`bg-secondary` = #864e59. #4a322b is only the scrollbar
   thumb (kept below as --tc-cocoa-soft) and #c4838f appears nowhere in the
   export. Using the rendered pair also fixes the contrast risk the brief
   flagged: #864e59 PASSES AA as text on cream (6.16:1) where #c4838f would
   not, so no darker text sibling is required.

   ------------------------------------------------------------------------
   CONTRAST AUDIT (canvas is the export's shell #fff8f6):

     - primary #321d17 as TEXT on canvas / white / band / band-alt:
          15.12 / 15.87 / 14.36 / 13.61  ALL PASS (>=4.5)
     - white text on primary FILL #321d17:  15.87:1  PASS
     => primary is safe as text AND as a white-text fill everywhere the base
        already uses var(--bs-primary); no -ink sibling needed.

     - accent (rose mauve) #864e59 as TEXT on canvas / white / band /
       band-alt:  6.16 / 6.46 / 5.86 / 5.54  ALL PASS
     - white text on accent FILL (SALE chip):  6.46:1  PASS
     => the rendered "secondary" is already text-safe (unlike the brief's
        #c4838f). Raw accent is used for BOTH text and fill roles.

     - re-pointed neutrals, worst measured case across canvas/white/band/
       band-alt/fill:
          --tc-ink #241915:     >=13.4:1  PASS
          --tc-muted #504441:   >=8.02:1  PASS
          --tc-soft #6e5f5c:    >=5.21:1  PASS (tuned darker than the export's
                                raw "outline" #827471, which measures 4.27:1
                                on canvas — under 4.5 for small text roles
                                like .mr-card__price del and .mr-soft)
          --tc-gold #8a6d1f:    4.67:1 canvas  PASS (the base's #c0a04a stars
                                measure ~2.4:1 on this warm canvas)

     - deep-espresso ritual band (bg = primary #321d17):
          white heading:                        15.87:1  PASS
          step text rgba(255,248,246,.78):      ~9.0:1   PASS
          step icon #bb9a90 (on-primary-container, a UI/icon role, >=3:1):
                                                 6.15:1  PASS

     - footer (espresso enclosure, bg = primary #321d17):
          white headings/brand:                 15.87:1  PASS
          links rgba(255,255,255,.82):          11.00:1  PASS
          the export's rose footer headings #ffd9de: 12.27:1 PASS

     - promo tile caption over the export's `from-primary/80` gradient: white
       on the worst case (an all-white photo under an 80% espresso wash)
       measures 8.37:1 PASS. The base's accent-recolour hover is replaced with
       the export's own behaviour (stay white, deepen the scrim) — raw rose on
       that wash would be ~1.4:1.

     - --bs-link-color-rgb is aliased to --bs-primary-rgb so bare <a> tags
       track the customizer instead of rendering Bootstrap-blue. There is
       deliberately NO bare `body.tc-theme a { color: … }` rule — it would
       out-specify .mr-btn--primary's white label and paint the hero CTA as a
       solid espresso block with an invisible label (references/gotchas.md).
       .mr-btn--primary's white label is re-asserted below anyway as a belt-and-
       braces guard, and --bs-btn-color is set on .btn-primary (theme-vars only
       sets --bs-btn-bg).
   ========================================================================== */

body.tc-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --tc-primary: var(--bs-primary, #321d17);
    --tc-primary-rgb: var(--bs-primary-rgb, 50, 29, 23);
    --tc-accent: var(--ll-accent, #864e59);
    --tc-accent-rgb: var(--bs-warning-rgb, 134, 78, 89);
    --tc-radius: var(--bs-border-radius, 0.75rem);
    --tc-font-head: var(--ll-font-headings, "Lora"), Georgia, "Times New Roman", serif;
    --tc-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Blush-cream salon palette (DESIGN.md M3 roles, rendered values) */
    --tc-canvas: #fff8f6;        /* background / surface / surface-bright      */
    --tc-surface: #ffffff;       /* surface-container-lowest: cards, panels    */
    --tc-band: #fff1ec;          /* surface-container-low: trust strip, card media, categories band */
    --tc-band-alt: #ffe9e2;      /* surface-container: newsletter panel, New In media wells */
    --tc-fill: #f9e4dc;          /* surface-container-high: quiet fills        */
    --tc-variant: #f3ded7;       /* surface-variant / -highest                */
    --tc-border: #d3c3bf;        /* outline-variant: hairlines                 */
    --tc-border-strong: #827471; /* outline: emphasised lines                  */
    --tc-ink: #241915;           /* on-surface                                 */
    --tc-muted: #504441;         /* on-surface-variant                         */
    --tc-soft: #6e5f5c;          /* tuned darker than raw "outline" — see audit */
    --tc-gold: #8a6d1f;          /* star ratings — contrast-tuned              */
    --tc-cocoa-soft: #4a322b;    /* primary-container: the softer coffee the
                                    export uses for the scrollbar thumb        */
    --tc-on-brown: #bb9a90;      /* on-primary-container: icons on the band    */
    --tc-rose-pale: #ffd9de;     /* secondary-fixed: footer column headings    */

    /* Re-point the inherited base neutrals at the blush-cream palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radii) follows
       across shop/PDP/cart/checkout/account/blog. */
    --mr-ink: var(--tc-ink);
    --mr-muted: var(--tc-muted);
    --mr-soft: var(--tc-soft);
    --mr-surface: var(--tc-surface);
    --mr-band: var(--tc-band);
    --mr-band-alt: var(--tc-band);
    --mr-fill: var(--tc-fill);
    --mr-border: var(--tc-border);
    --mr-border-strong: var(--tc-border-strong);
    /* One radius for the whole design (DESIGN.md "Softness"), so the container
       radius tracks the button_radius token rather than diverging from it. The
       9999px pill exemptions below are absolute, not token-derived, so a
       merchant setting radius: 0 flattens cards/inputs/imagery consistently
       WITHOUT squaring the round overlay controls (see gotchas). */
    --mr-radius: var(--tc-radius);
    --mr-gold: var(--tc-gold);
    --mr-shadow: 0 4px 20px rgba(var(--tc-primary-rgb), 0.05);

    /* Bootstrap paints bare <a> via rgba(var(--bs-link-color-rgb),1) — alias it
       to --bs-primary-rgb (already computed by theme-vars) so anchors track the
       customizer without a CTA-clobbering bare-`a` rule. */
    --bs-link-color-rgb: var(--bs-primary-rgb);

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

/* Scrollbar — the export ships this verbatim in its own inline <style>: an 8px
   track on the Shell canvas with a softer-coffee (primary-container) thumb.
   WebKit/Blink only; other engines keep their native scrollbar. */
body.tc-theme::-webkit-scrollbar { width: 8px; }
body.tc-theme::-webkit-scrollbar-track { background: var(--tc-canvas); }
body.tc-theme::-webkit-scrollbar-thumb { background: var(--tc-cocoa-soft); border-radius: 10px; }

/* --------------------------------------------------------------------------
   Shape — DESIGN.md "Softness": one consistent 12px radius on cards, inputs,
   buttons and image containers ("this squircle feel removes the clinical
   sharpness of digital interfaces"). No flatten block; the radius system does
   the work, so the round overlay controls on the product card keep their pill.
   -------------------------------------------------------------------------- */
body.tc-theme .mr-card__media,
body.tc-theme .mr-promo,
body.tc-theme .mr-promo__img,
body.tc-theme .mr-tile,
body.tc-theme .mr-article__media,
body.tc-theme .mr-article__media img,
body.tc-theme .mr-panel,
body.tc-theme .form-control,
body.tc-theme .form-select,
body.tc-theme .dropdown-menu {
    border-radius: var(--mr-radius);
}

/* --------------------------------------------------------------------------
   Typography — Lora at medium weight for every heading (DESIGN.md: "keep
   weights medium (500) to maintain elegance"); Source Sans 3 carries body
   copy, UI and prices. Prices sit at 600 with the export's 0.05em tracking
   ("use a slightly heavier weight for prices"). The rose eyebrow is Source
   Sans 3 semi-bold with 0.1-0.2em tracking (DESIGN.md "Chips/Labels").
   -------------------------------------------------------------------------- */
body.tc-theme h1, body.tc-theme h2, body.tc-theme h3,
body.tc-theme h4, body.tc-theme h5, body.tc-theme h6,
body.tc-theme .mr-display {
    font-family: var(--tc-font-head);
    color: var(--tc-primary);
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.tc-theme .mr-display {
    font-size: clamp(1.75rem, 3.2vw, 2rem);
    line-height: 1.3;
}

body.tc-theme .mr-headline { font-weight: 500; }

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

/* The supporting line under a section heading ("Our community's
   non-negotiables."). */
body.tc-theme .tc-subline {
    color: var(--tc-muted);
    font-size: 1rem;
    margin-top: 0.4rem;
}

/* The hero's rose chip eyebrow — rose text on a 10% rose wash, pill shape
   (DESIGN.md "Chips/Labels: Rose Mauve background at 15% opacity"). */
body.tc-theme .tc-pill {
    display: inline-block;
    font-family: var(--tc-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tc-accent);
    background: rgba(var(--tc-accent-rgb), 0.12);
    border-radius: 9999px;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Buttons + links — solid Deep Cocoa with Shell text, or outlined in Deep
   Cocoa, both `rounded-xl` and Source Sans 3 semi-bold, sentence case (the
   export never uppercases a button label, unlike the base).
   -------------------------------------------------------------------------- */
body.tc-theme .mr-btn {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* Belt-and-braces: keep the primary CTA's label white no matter what later
   anchor colour rules a merchant's custom CSS introduces. */
body.tc-theme .mr-btn--primary,
body.tc-theme .mr-btn--primary:hover {
    color: #fff;
}

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

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

body.tc-theme .mr-btn--outline:hover {
    background-color: rgba(var(--tc-primary-rgb), 0.06);
    color: var(--tc-primary);
}

/* Bootstrap's own .btn-primary (e.g. the shared review-form submit button) —
   theme-vars sets --bs-btn-bg but not --bs-btn-color. */
body.tc-theme .btn-primary {
    --bs-btn-color: #fff;
}

/* The export's see-all link: rose-mauve, semi-bold, on a rose keyline. */
body.tc-theme .tc-keyline-link {
    display: inline-block;
    font-family: var(--tc-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tc-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.2rem;
    transition: opacity 0.2s ease, color 0.2s ease;
}

body.tc-theme .tc-keyline-link:hover {
    color: var(--tc-primary);
    opacity: 0.85;
}

body.tc-theme .mr-ulink:hover { color: var(--tc-accent); border-color: var(--tc-accent); }
body.tc-theme .mr-crumbs a:hover { color: var(--tc-accent); }

/* Inputs — Shell fill with a 1px Deep Cocoa border at 20% opacity; on focus
   the border goes full-strength (DESIGN.md "Input Fields"). NEVER a padding
   shorthand on .form-select — restore Bootstrap's 2.25rem caret gutter. */
body.tc-theme .form-control,
body.tc-theme .form-select {
    background-color: var(--tc-canvas);
    border-color: rgba(var(--tc-primary-rgb), 0.2);
    color: var(--tc-ink);
}

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

body.tc-theme .form-control:focus,
body.tc-theme .form-select:focus {
    background-color: var(--tc-surface);
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 3px rgba(var(--tc-accent-rgb), 0.16);
}

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

/* --------------------------------------------------------------------------
   Announcement + header — the export's espresso announcement band ("FREE
   SCALP BRUSH OVER RS. 4,000 · CASH ON DELIVERY NATIONWIDE") reuses the
   primary token; the sticky header sits on the blush canvas over a soft
   cocoa/10 hairline with a Lora wordmark. Nav hover reads the rose accent
   (the export's own hover:text-primary is the reverse — but rose reads as the
   interactive colour throughout this design and is text-safe at 6.16:1).
   -------------------------------------------------------------------------- */
body.tc-theme .mr-announce {
    background-color: var(--tc-primary);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

body.tc-theme .mr-header {
    background-color: var(--tc-canvas);
    border-bottom: 1px solid rgba(var(--tc-primary-rgb), 0.1);
}

body.tc-theme .mr-logo {
    font-family: var(--tc-font-head);
    font-weight: 500;
    color: var(--tc-primary);
}

body.tc-theme .mr-nav-link { color: var(--tc-muted); }
body.tc-theme .mr-nav-link:hover { color: var(--tc-accent); }

body.tc-theme .mr-nav-link.is-active {
    color: var(--tc-primary);
    border-bottom-color: var(--tc-primary);
    font-weight: 600;
}

body.tc-theme .mr-icon-btn { color: var(--tc-primary); }
body.tc-theme .mr-icon-btn:hover { color: var(--tc-accent); }

/* The cart count pill — the export's rose bubble. */
body.tc-theme .mr-badge { background-color: var(--tc-accent); }

body.tc-theme .mr-search input {
    background: var(--tc-band);
    border-color: rgba(var(--tc-primary-rgb), 0.12);
}

body.tc-theme .mr-search input:focus {
    background: var(--tc-surface);
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 3px rgba(var(--tc-accent-rgb), 0.16);
}

/* --------------------------------------------------------------------------
   Hero (tc-hero) — the Stitch SPLIT hero: a rounded 4:5 model photo on the
   left and the copy panel on the right, both on the page's own blush canvas,
   inside the standard shell (the export's max-w-container-max). No scrim — the
   copy never sits on top of the photo.
   -------------------------------------------------------------------------- */
body.tc-theme .tc-hero {
    background-color: var(--tc-canvas);
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

body.tc-theme .tc-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3rem);
    align-items: center;
}

body.tc-theme .tc-hero__figure {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--mr-radius);
    background: var(--tc-band);
    box-shadow: var(--mr-shadow);
}

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

body.tc-theme .tc-hero__figure:hover .tc-hero__img { transform: scale(1.05); }

body.tc-theme .tc-hero__copy {
    display: flex;
    align-items: center;
    padding-inline-start: clamp(0px, 3vw, 3rem);
}

body.tc-theme .tc-hero__copy-inner { max-width: 30rem; }

body.tc-theme .tc-hero__title {
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

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

body.tc-theme .tc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
body.tc-theme .tc-btn-hero { padding: 1rem 2rem; }

/* --------------------------------------------------------------------------
   Trust strip (inherited .mr-trust) — the export stacks a rose icon ABOVE a
   sentence-case espresso label, centred, on the quiet blush band (the base
   sets them side-by-side with an uppercase label).
   -------------------------------------------------------------------------- */
body.tc-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

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

body.tc-theme .mr-trust strong {
    color: var(--tc-primary);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

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

/* --------------------------------------------------------------------------
   Product cards (inherited .mr-card) — a soft blush media well over a
   cocoa/8 hairline (DESIGN.md: depth from tonal layers + very fine 1px
   Deep-Cocoa outlines), a ROSE uppercase category label (the export's
   per-card `text-secondary` eyebrow — which the base already renders from the
   product's real category name), a Lora product name and a semi-bold
   Source Sans 3 price. The border sits on the MEDIA, not on .mr-card, so the
   base's flush title/price alignment stays correct and no text insetting is
   required (see references/gotchas.md).
   -------------------------------------------------------------------------- */
body.tc-theme .mr-card { background: transparent; }

body.tc-theme .mr-card__media {
    background-color: var(--tc-band);
    border: 1px solid rgba(var(--tc-primary-rgb), 0.08);
}

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

body.tc-theme .mr-card__eyebrow {
    color: var(--tc-accent);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
}

body.tc-theme .mr-card__title,
body.tc-theme .mr-card__title a {
    font-family: var(--tc-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--tc-primary);
}

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

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

body.tc-theme .mr-card__price del { color: var(--tc-soft); font-weight: 400; }

/* .mr-card__wish (heart) + .mr-card__quickview (eye) restyled TOGETHER per the
   recurring product-card gotcha — they are siblings with different names.
   The base already inks both safely from --mr-surface / --mr-ink (both
   re-pointed above: espresso ink on white = 13.4:1 normal AND hover), so only
   the pill shape is re-asserted (defensively, in case a future flatten rule
   lands) and the is-active heart takes the rose fill. */
body.tc-theme .mr-card__wish,
body.tc-theme .mr-card__quickview {
    border-radius: 9999px;
}

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

/* The slide-up Add-to-Cart bar (.mr-card__quick — a THIRD control, not an
   overlay icon): espresso fill, Shell label, sentence case per the export. */
body.tc-theme .mr-card__quick {
    background-color: var(--tc-primary);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: none;
}

/* SALE chip — rose pill, tiny uppercase Source Sans 3 with wide tracking
   (DESIGN.md "Chips/Labels"; white on rose 6.46:1). */
body.tc-theme .mr-card__badge {
    background: var(--tc-accent);
    letter-spacing: 0.12em;
    border-radius: 9999px;
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited .mr-promo) — the export's tall tiles with an
   espresso `from-primary/80` bottom gradient, a white Lora title and a
   white/90 sentence-case caption line. The base's accent-recolour hover is
   replaced with the export's behaviour (stay white, deepen the scrim) — raw
   rose on that wash measures ~1.4:1. The base's `.mr-promo:hover
   .mr-promo__cta` is (0,0,3,0), so the hover override below must also be a
   descendant selector or it loses on specificity.
   -------------------------------------------------------------------------- */
body.tc-theme .mr-promo { background-color: var(--tc-band-alt); }

body.tc-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--tc-primary-rgb), 0) 45%, rgba(var(--tc-primary-rgb), 0.8) 100%);
}

body.tc-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(var(--tc-primary-rgb), 0.12) 30%, rgba(var(--tc-primary-rgb), 0.88) 100%);
}

body.tc-theme .mr-promo__title { font-family: var(--tc-font-head); font-weight: 500; }

body.tc-theme .mr-promo__cta {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 0;
    padding-bottom: 0;
}

body.tc-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Three-step ritual band (tc-ritual) — the export's full-width deep-espresso
   surface: an ITALIC Lora heading over up to 4 numbered steps, each a soft
   rose-cocoa icon medallion above a Shell title and a muted Shell line, with
   hairline dividers between the columns on desktop.
   -------------------------------------------------------------------------- */
body.tc-theme .tc-ritual {
    background-color: var(--tc-primary);
    padding-block: clamp(3.5rem, 8vw, 5rem);
}

body.tc-theme .tc-ritual__heading {
    font-family: var(--tc-font-head);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2rem);
    color: #fff;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.tc-theme .tc-ritual__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
}

body.tc-theme .tc-ritual__step {
    position: relative;
    padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}

/* Hairline divider between columns (the export's two absolute 1px rules). */
body.tc-theme .tc-ritual__step + .tc-ritual__step::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(clamp(2rem, 4vw, 4rem) * -0.5);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 8rem;
    background: rgba(255, 248, 246, 0.12);
}

body.tc-theme .tc-ritual__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
    color: var(--tc-on-brown);
}

body.tc-theme .tc-ritual__icon svg { width: 40px; height: 40px; }

body.tc-theme .tc-ritual__step-title {
    font-family: var(--tc-font-head);
    font-weight: 500;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 0.85rem;
}

body.tc-theme .tc-ritual__step-text {
    color: rgba(255, 248, 246, 0.78);
    font-size: 0.98rem;
    max-width: 32ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Category circles (tc-cat) — the export's "Shop by Category": a CIRCULAR
   photo tile (framed by a transparent ring that warms to rose on hover) with
   the category name in Lora BELOW it, on the quiet blush band. Imagery is a
   representative product photo per category (Category has no image field), so
   a category with no products degrades to a tinted placeholder circle.
   -------------------------------------------------------------------------- */
body.tc-theme .tc-cats { background-color: var(--tc-band); }

body.tc-theme .tc-cat {
    display: block;
    text-align: center;
    text-decoration: none;
}

body.tc-theme .tc-cat__ring {
    display: block;
    position: relative;
    aspect-ratio: 1;
    padding: 4px;
    margin-bottom: 1rem;
    border: 2px solid transparent;
    border-radius: 9999px;
    transition: border-color 0.3s ease;
}

body.tc-theme .tc-cat:hover .tc-cat__ring { border-color: var(--tc-accent); }

/* inset: 0 resolves against the ring's PADDING box, so the ring's own 4px
   padding (the export's `p-1`) is what separates the photo from the hover
   ring — no double gap. */
body.tc-theme .tc-cat__media,
body.tc-theme .tc-cat__placeholder {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--tc-variant);
}

body.tc-theme .tc-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9999px;
    transition: transform 0.7s ease;
}

body.tc-theme .tc-cat:hover .tc-cat__media img { transform: scale(1.07); }

body.tc-theme .tc-cat__placeholder {
    background: linear-gradient(135deg, var(--tc-band-alt), var(--tc-fill));
}

body.tc-theme .tc-cat__cap {
    display: block;
    font-family: var(--tc-font-head);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--tc-primary);
    transition: color 0.2s ease;
}

body.tc-theme .tc-cat:hover .tc-cat__cap { color: var(--tc-accent); }

/* --------------------------------------------------------------------------
   Journal (tc-journal) — heading left, rose category eyebrows, Lora titles
   whose hover reads the rose accent (text-safe at 6.16:1).
   -------------------------------------------------------------------------- */
body.tc-theme .mr-article__title {
    font-family: var(--tc-font-head);
    font-weight: 500;
    font-size: 1.4rem;
}

body.tc-theme .mr-article__title a { color: var(--tc-primary); }
body.tc-theme .mr-article__title a:hover { color: var(--tc-accent); }

/* --------------------------------------------------------------------------
   Newsletter (tc-cta) — "Good Hair Day": a centred ROUNDED blush panel inset
   in the page (the export's 32px `rounded-[32px]` on surface-container),
   carrying a large Lora display heading, one muted line and an inline email +
   Subscribe row. Not the base's full-bleed dark 2-col band.
   -------------------------------------------------------------------------- */
body.tc-theme .tc-cta__panel {
    background: var(--tc-band-alt);
    border-radius: 32px;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

body.tc-theme .tc-cta__title {
    font-family: var(--tc-font-head);
    font-weight: 500;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tc-primary);
}

body.tc-theme .tc-cta__body {
    color: var(--tc-muted);
    max-width: 52ch;
    font-size: 1.125rem;
}

body.tc-theme .tc-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 36rem;
    align-items: center;
}

body.tc-theme .tc-cta__form input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(var(--tc-primary-rgb), 0.2);
    border-radius: var(--mr-radius);
    background: var(--tc-canvas);
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    color: var(--tc-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

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

body.tc-theme .tc-cta__btn { padding: 1rem 2.5rem; white-space: nowrap; }

body.tc-theme .tc-cta__note {
    color: var(--tc-muted);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Footer (inherited .mr-footer) — the export's full-width deep-espresso
   block: white brand + headings (the export tints the column headings pale
   rose), white links resting at 82% opacity (11.00:1; hover lifts to full
   white), soft white/10 social circles.
   -------------------------------------------------------------------------- */
body.tc-theme .mr-footer {
    background-color: var(--tc-primary);
    border-top: 0;
}

body.tc-theme .mr-footer h4 {
    color: var(--tc-rose-pale);
    font-family: var(--tc-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.tc-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
body.tc-theme .mr-footer a:hover { color: #fff; }

/* The base outlines focus with 2px solid var(--ll-accent). That is fine on the
   base's light footer, but this theme repaints the footer deep espresso, where
   the rose accent measures 2.45:1 — under the 3:1 WCAG 1.4.11 floor for a
   non-text indicator. Re-ink with the pale rose (12.26:1) so the whole keyboard
   path through the footer stays visible. Same guard meridian ships. */
body.tc-theme .mr-footer *:focus-visible {
    outline-color: var(--tc-rose-pale);
}

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

body.tc-theme .mr-footer .mr-muted,
body.tc-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.82); }

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

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

body.tc-theme .mr-footer .mr-social {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: #fff;
}

body.tc-theme .mr-footer .mr-social:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: transparent;
    color: #fff;
}

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

/* The footer newsletter "Join" button would otherwise blend into the
   primary-coloured footer (its own fill IS the primary token) — invert it to a
   Shell pill (espresso text on Shell: 15.12:1). */
body.tc-theme .mr-footer .mr-btn--primary { background-color: var(--tc-canvas); color: var(--tc-primary); }
body.tc-theme .mr-footer .mr-btn--primary:hover { background-color: var(--tc-accent); color: #fff; filter: none; }

/* --------------------------------------------------------------------------
   Reduced motion — DESIGN.md already asks for "soft fades and subtle
   transitions"; here we kill the decorative transitions AND every hover
   transform (tile/image zooms, the hero photo lift).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.tc-theme .mr-btn,
    body.tc-theme .tc-keyline-link,
    body.tc-theme .tc-cat__ring,
    body.tc-theme .tc-cat__cap,
    body.tc-theme .tc-hero__img,
    body.tc-theme .tc-cat__media img,
    body.tc-theme .mr-card__media,
    body.tc-theme .mr-card__media img,
    body.tc-theme .mr-promo__img,
    body.tc-theme .mr-article__media img {
        transition: none;
    }

    body.tc-theme .tc-hero__figure:hover .tc-hero__img,
    body.tc-theme .tc-cat:hover .tc-cat__media img,
    body.tc-theme .mr-card:hover .mr-card__media img,
    body.tc-theme .mr-promo:hover .mr-promo__img,
    body.tc-theme .mr-article__media:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile — from the export's own responsive classes (grid-cols-1 →
   md:grid-cols-2 on the hero, md:grid-cols-3 on the ritual band) and its
   mobile frame: the split hero stacks photo-over-copy, the ritual steps
   become a single centred column with the dividers removed, and the narrowest
   phones take the design's 20px side margins.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.tc-theme .tc-hero__grid { grid-template-columns: 1fr; }
    body.tc-theme .tc-hero__copy { padding-inline-start: 0; }
    body.tc-theme .tc-hero__copy-inner { max-width: none; }
    body.tc-theme .tc-hero__figure { aspect-ratio: 4 / 3; }

    body.tc-theme .tc-ritual__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    body.tc-theme .tc-ritual__step + .tc-ritual__step::before { display: none; }
    body.tc-theme .tc-ritual__step { padding-inline: 0; }

    body.tc-theme .tc-cta__panel { border-radius: 24px; }
}

@media (max-width: 575.98px) {
    body.tc-theme .mr-shell { padding-inline: 20px; }
    body.tc-theme .tc-cta__form { flex-direction: column; align-items: stretch; }
    body.tc-theme .tc-cta__btn { width: 100%; }
}