/* ==========================================================================
   Twice Loved — curated digital thrift, "modern-brutalism meets DIY zine".

   Ported from the Stitch "Twice Loved" design (the Editorial Thrift design
   system lives at docs/templates/pending/
   stitch_71_twice_loved_e_commerce_homepage/…/editorial_thrift/DESIGN.md; the
   homepage code.html is authoritative wherever the two disagree — notably the
   palette, which the DESIGN.md YAML frontmatter reports as a neutral grey
   Material set while the prose AND the export's own tailwind.config both
   declare the three colours the page actually paints):

     - Kraft Paper #F1ECE2 — the canvas. "A warm, low-fatigue alternative to
       pure white", used on every screen instead of the base's white.
     - Ink #232323 — "the look of heavy screen-printing ink". Structure,
       borders, primary actions, the condition-grade band and the footer.
     - Retro Mustard #D99A2B — sticker tags, price chips, the newsletter panel,
       the cart count. Functional, never structural.

   Depth is "Tonal Layering and Bold Outlines" — there are NO gradients and no
   ambient shadows in this theme. Cards and buttons are defined by 2px ink
   outlines, and thickness is faked with a hard 4px offset shadow
   (`4px 4px 0 ink`) that simulates stacked paper. Poppins 700 set tight and
   uppercase carries every headline; Inter carries prices, condition grades and
   the tracked `label-caps` UI text.

   This theme OWNS the hero / featured / condition-guide / new-arrivals /
   categories / journal / newsletter home sections (tl-* 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 `tl-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the kraft palette, dressing the announcement bar /
         header / footer / grade band in ink, and turning the promo caption into
         the export's rotated mustard sticker tag.

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

   CONTRAST — this theme's accent is LIGHT, which is the single biggest hazard
   in the palette (see references/gotchas.md on light brand colours). Measured
   ratios against the palette below:
     - primary Ink #232323 is very DARK — 13.35:1 on the kraft canvas, 15.72:1
       carrying white, 13.35:1 carrying kraft — so it is safe as text, as an
       icon and as a fill under a light 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, …).
     - accent Retro Mustard #D99A2B is a FILL COLOUR, not a text colour. It is
       6.44:1 against ink — so mustard text ON the ink bands, and ink text ON a
       mustard fill, both pass comfortably — but only 2.07:1 on the kraft canvas
       and 2.44:1 carrying white. Every base rule that paints --ll-accent onto a
       light surface is therefore re-pointed below to --tl-mustard-ink #805600
       (the design's own `secondary` token), which is 5.49:1 on kraft and 6.46:1
       on white and reads as the same hue family. The raw mustard is reserved
       for fills: sticker tags, the newsletter panel, the cart count, the hero
       plate, and text on ink.
     - --mr-soft drives small captions, breadcrumbs and struck-through
       compare-at prices, so it may NOT reuse the design's own `outline` token
       (#747878 — only 3.79:1 on kraft, under the 4.5:1 normal-text minimum).
       --tl-soft (#5c5f5f) is a deliberately darkened value in the same warm-grey
       family and clears 5.48:1.
     - the base outlines `*:focus-visible` with --ll-accent, and mustard on kraft
       is 2.07:1 — far under the 3:1 non-text minimum — so the focus ring is
       re-pointed to ink (13.35:1) on light surfaces and left mustard on the ink
       bands (6.44:1). See the focus block near the end.
     - the shared price component's stock #d6293e sale ink is replaced by the
       design's own error red #ba1a1a (5.49:1 on kraft, 9.33:1 on white).
   ========================================================================== */

body.tl-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --tl-ink: var(--bs-primary, #232323);
    --tl-ink-rgb: var(--bs-primary-rgb, 35, 35, 35);
    /* 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 ink. NOTE: this is deliberately
       used INSTEAD of a bare `body.tl-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(--tl-ink-rgb);
    --tl-mustard: var(--ll-accent, #d99a2b);
    --tl-radius: var(--bs-border-radius, 0.25rem);
    --tl-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --tl-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Editorial Thrift palette (DESIGN.md prose + the export's tailwind.config) */
    --tl-kraft: #f1ece2;         /* page canvas — warm kraft paper              */
    --tl-surface: #f7f4ec;       /* raised paper: header, cards, panels         */
    --tl-band: #eae4d8;          /* trust strip / quiet tonal band              */
    --tl-band-quiet: #e7e1d5;    /* the journal band                            */
    --tl-fill: #ded7c8;          /* media wells behind photography              */
    /* Text-safe mustard — the design's own `secondary` token. Used for every
       accent TEXT and ICON role on a light surface (see CONTRAST above); the
       raw --tl-mustard is reserved for fills. */
    --tl-mustard-ink: #805600;
    --tl-muted: #444748;         /* on-surface-variant — leads, excerpts        */
    --tl-soft: #5c5f5f;          /* darkened outline — see CONTRAST note        */
    --tl-error: #ba1a1a;         /* the design's error token — sale ink         */

    /* "This design system rejects traditional shadows and blurs." The only
       depth cue is the hard offset block — a solid ink rectangle shifted 4px
       down and right, with no blur and no spread. */
    --tl-offset: 4px 4px 0 var(--tl-ink);
    --tl-offset-sm: 3px 3px 0 var(--tl-ink);

    /* Re-point the inherited base neutrals at the kraft palette so every
       inherited mr-* surface (shop, PDP, cart, checkout, account, blog, 404)
       warms with the theme. Hairlines are ink at low opacity — this design
       draws borders, it does not tint them grey. */
    --mr-ink: #1b1c1c;
    --mr-muted: var(--tl-muted);
    --mr-soft: var(--tl-soft);
    --mr-surface: var(--tl-surface);
    --mr-band: var(--tl-band);
    --mr-band-alt: var(--tl-band-quiet);
    --mr-fill: var(--tl-fill);
    --mr-border: #cfc7b7;
    --mr-border: color-mix(in srgb, var(--tl-ink) 18%, var(--tl-kraft));
    --mr-border-strong: #8f887c;
    --mr-border-strong: color-mix(in srgb, var(--tl-ink) 48%, var(--tl-kraft));
    --mr-radius: var(--tl-radius);
    --mr-gold: var(--tl-mustard-ink);
    --mr-shadow: none;

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

    background-color: var(--tl-kraft);
    color: var(--mr-ink);
    font-family: var(--tl-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* DESIGN.md Layout: "a Fixed Grid on desktop (12 columns, 1200px max-width)".
   The base shell is 1280px; narrowing it here tightens every inherited page to
   the export's measure in one rule. */
body.tl-theme .mr-shell { max-width: 1200px; }

/* --------------------------------------------------------------------------
   Shape discipline — "barely rounded": a 4px corner radius on almost all
   elements, "enough to take the sting off a sharp brutalist edge, making it
   feel like high-quality cardstock rather than cold metal" (DESIGN.md Shapes).
   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.tl-theme .form-control,
body.tl-theme .form-select,
body.tl-theme .dropdown-menu,
body.tl-theme .offcanvas,
body.tl-theme .mr-promo,
body.tl-theme .mr-tile--cat {
    border-radius: var(--tl-radius);
}

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

/* "Input Fields: use a 1.5px Ink border with no fill." */
body.tl-theme .form-control,
body.tl-theme .form-select {
    background-color: transparent;
    border: 1.5px solid var(--tl-ink);
    color: var(--mr-ink);
}

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

body.tl-theme .form-control:focus,
body.tl-theme .form-select:focus {
    background-color: var(--tl-surface);
    border-color: var(--tl-ink);
    box-shadow: inset 0 0 0 1px var(--tl-ink);
}

/* Bootstrap's validation state must survive the border override above —
   otherwise an invalid checkout field looks identical to a valid one. */
body.tl-theme .form-control.is-invalid,
body.tl-theme .form-select.is-invalid,
body.tl-theme .was-validated .form-control:invalid,
body.tl-theme .was-validated .form-select:invalid {
    border-color: var(--tl-error);
}

body.tl-theme .form-control.is-valid,
body.tl-theme .form-select.is-valid {
    border-color: #2a6b3f;
}

/* --------------------------------------------------------------------------
   Typography — "Typography functions as a structural element." Poppins 700,
   uppercase, tracked TIGHT for headlines "that feel like headlines in a print
   magazine"; Inter for all functional data.
   -------------------------------------------------------------------------- */
body.tl-theme h1, body.tl-theme h2, body.tl-theme h3,
body.tl-theme h4, body.tl-theme h5, body.tl-theme h6 {
    font-family: var(--tl-font-head);
    color: var(--mr-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.tl-theme .mr-display {
    font-family: var(--tl-font-head);
    font-size: clamp(1.75rem, 3.2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

body.tl-theme .mr-headline {
    font-family: var(--tl-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* `label-caps` — the archival tag voice: 12px Inter 700, 0.1em tracking. On the
   light canvas this may NOT be raw mustard (2.07:1); it takes the text-safe
   sibling at 5.49:1. */
body.tl-theme .mr-eyebrow {
    font-family: var(--tl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tl-mustard-ink);
}

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

/* Shared section heading — tight uppercase Poppins, used by featured,
   new-arrivals, categories and journal. */
body.tl-theme .tl-section-head__title {
    font-family: var(--tl-font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--mr-ink);
    margin-bottom: 0;
}

.tl-section-head__sub {
    font-family: var(--tl-font-body);
    font-size: 1rem;
    color: var(--tl-muted);
    margin: 0.35rem 0 0;
}

.tl-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 2.5rem);
}

/* "Use simple text-based arrows (->) to maintain the zine/typewriter feel." A
   tracked caps label on a 2px ink rule. */
.tl-keyline-link {
    display: inline-block;
    font-family: var(--tl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mr-ink);
    text-decoration: none;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--tl-ink);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tl-keyline-link:hover {
    color: var(--tl-mustard-ink);
    border-bottom-color: var(--tl-mustard-ink);
}

/* The inherited editorial underline link takes the same text-safe hover. */
body.tl-theme .mr-ulink:hover {
    color: var(--tl-mustard-ink);
    border-color: var(--tl-mustard-ink);
}

/* The rotated "stamp" motif — DESIGN.md Visual Motifs: decorative elements
   "rotated slightly (e.g. -3deg) to look like they were manually stamped onto
   the kraft paper". Ink text on a mustard fill = 6.44:1. */
.tl-stamp,
.tl-tag {
    display: inline-block;
    background-color: var(--tl-mustard);
    color: #232323;
    border: 1.5px solid var(--tl-ink);
    font-family: var(--tl-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    transform: rotate(-3deg);
}

.tl-tag {
    font-size: 0.62rem;
    padding: 0.25rem 0.7rem;
    transform: rotate(-2deg);
}

/* --------------------------------------------------------------------------
   Buttons — "Primary buttons use a solid Ink fill with Kraft-paper text. All
   buttons feature a 2px solid Ink border and the 4px corner radius." The hero's
   primary also carries the hard offset block and slides INTO it on hover, the
   way the export animates it.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-btn {
    border-radius: var(--tl-radius);
    border: 2px solid var(--tl-ink);
    font-family: var(--tl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.8rem 1.75rem;
}

/* Re-assert the light 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 ink block with no visible
   text. */
body.tl-theme .mr-btn--primary,
body.tl-theme .mr-btn--primary:hover,
body.tl-theme .mr-btn--primary:focus {
    background-color: var(--tl-ink);
    color: var(--tl-kraft);
}

body.tl-theme .mr-btn--primary:hover { filter: none; }

/* The ink-outline ghost — "hover:bg-ink hover:text-kraft" in the export. */
body.tl-theme .mr-btn--outline,
body.tl-theme .tl-btn-ghost {
    background-color: transparent;
    border-color: var(--tl-ink);
    color: var(--mr-ink);
}

body.tl-theme .mr-btn--outline:hover,
body.tl-theme .tl-btn-ghost:hover {
    background-color: var(--tl-ink);
    color: var(--tl-kraft);
}

/* The base's on-dark ghost rides the inherited dark bands. */
body.tl-theme .mr-btn--on-dark {
    border-color: var(--tl-kraft);
    color: var(--tl-kraft);
}

body.tl-theme .mr-btn--on-dark:hover {
    background-color: var(--tl-kraft);
    color: var(--mr-ink);
}

/* `.mr-btn--light:hover` in the base fills with the raw accent under a WHITE
   label — 2.44:1. Ink label instead (6.44:1). */
body.tl-theme .mr-btn--light:hover {
    background-color: var(--tl-mustard);
    color: #232323;
}

body.tl-theme .tl-btn-hero { padding: 0.95rem 2rem; }

/* "Offsets: to create a stacked-paper effect, use hard-shadow offsets." Only
   the hero's solid CTA carries it, exactly as the export does. */
body.tl-theme .mr-btn--primary.tl-btn-hero {
    box-shadow: var(--tl-offset);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.25s;
}

body.tl-theme .mr-btn--primary.tl-btn-hero:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--tl-ink);
}

body.tl-theme .mr-btn--primary.tl-btn-hero:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Announcement bar + header — the export runs a solid INK strip over the kraft
   header, ruled off by a 2px ink border. The base instead mixes the accent 62%
   with black, which would render a muddy brown here.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-announce {
    background-color: var(--tl-ink);
    color: var(--tl-kraft);
    font-family: var(--tl-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding-block: 0.55rem;
}

body.tl-theme .mr-announce a { color: var(--tl-kraft); }

body.tl-theme .mr-header {
    background-color: var(--tl-kraft);
    border-bottom: 2px solid var(--tl-ink);
}

body.tl-theme .mr-logo {
    font-family: var(--tl-font-head);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--mr-ink);
}

body.tl-theme .mr-nav-link {
    font-family: var(--tl-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mr-ink);
}

body.tl-theme .mr-nav-link:hover { color: var(--tl-mustard-ink); }

/* The export's `.active-nav` is a 2px MUSTARD underline under a bolder label.
   Mustard on kraft is only 2.07:1, so the underline can never be the sole
   indicator of state — the label therefore also goes full ink at weight 700
   (against the muted default), which is what actually communicates "current".
   The mustard rule is kept as the design's decorative signature on top of that.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-nav-link.is-active {
    color: var(--mr-ink);
    font-weight: 700;
    border-bottom-color: var(--tl-mustard);
}

body.tl-theme .mr-icon-btn { color: var(--mr-ink); }
body.tl-theme .mr-icon-btn:hover { color: var(--tl-mustard-ink); }

/* Count pills — the export's cart badge is a mustard disc with an INK numeral
   and a hairline ink ring (6.44:1); white on mustard would be 2.44:1. */
body.tl-theme .mr-badge {
    background-color: var(--tl-ink);
    color: var(--tl-kraft);
    font-family: var(--tl-font-body);
}

body.tl-theme .mr-badge--wish {
    background-color: var(--tl-mustard);
    color: #232323;
    border: 1px solid var(--tl-ink);
}

body.tl-theme .mr-search input {
    background: transparent;
    border-color: var(--tl-ink);
    border-radius: var(--tl-radius);
}

body.tl-theme .mr-search input:focus {
    background-color: var(--tl-surface);
    border-color: var(--tl-ink);
    box-shadow: inset 0 0 0 1px var(--tl-ink);
}

body.tl-theme .mr-search button:hover { color: var(--tl-mustard-ink); }

/* --------------------------------------------------------------------------
   Hero (twice-loved override) — a split band on the kraft canvas: copy left,
   the flat-lay photograph right on a rotated mustard plate. No scrim is needed
   because no text sits over the photograph.
   -------------------------------------------------------------------------- */
.tl-hero {
    background-color: var(--tl-kraft);
    padding-block: clamp(40px, 6vw, 64px);
}

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

.tl-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

body.tl-theme .tl-hero__title {
    font-family: var(--tl-font-head);
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--mr-ink);
    margin: 0;
}

.tl-hero__lead {
    font-family: var(--tl-font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--tl-muted);
    max-width: 42ch;
    margin: 0;
}

.tl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.tl-hero__media { position: relative; }

/* The "stacked paper" plate: a solid mustard block behind the photograph,
   rotated 2deg and squaring up on hover. Decorative only. */
.tl-hero__plate {
    position: absolute;
    inset: -0.5rem;
    background-color: var(--tl-mustard);
    border: 2px solid var(--tl-ink);
    transform: rotate(-2deg);
    transition: transform 0.5s ease;
}

.tl-hero__media:hover .tl-hero__plate { transform: rotate(0deg); }

.tl-hero__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(320px, 42vw, 500px);
    object-fit: cover;
    border: 2px solid var(--tl-ink);
}

/* --------------------------------------------------------------------------
   Trust strip — the export centres a mustard glyph above a single tracked caps
   label on a quiet tonal band, where the base sets them side by side. The glyph
   takes the text-safe mustard: raw mustard on this band is 2.21:1, under the
   3:1 minimum for a non-text graphic.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-band--alt.border-bottom { border-block: 2px solid var(--tl-ink) !important; }

body.tl-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

body.tl-theme .mr-trust svg {
    width: 24px;
    height: 24px;
    color: var(--tl-mustard-ink);
}

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

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

/* --------------------------------------------------------------------------
   Rack tiles — the INHERITED promo markup, restyled: a 2px ink frame around an
   undarkened photograph with the caption rendered as the export's rotated
   mustard sticker tag, bottom-left. The base's scrim is faded almost out (the
   tag carries its own contrast) but never removed entirely, so a very pale
   merchant photograph still separates from the tag's ink border.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-promo {
    border: 2px solid var(--tl-ink);
    background-color: var(--tl-fill);
}

body.tl-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(35, 35, 35, 0) 55%, rgba(35, 35, 35, 0.22) 100%);
}

body.tl-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(35, 35, 35, 0) 45%, rgba(35, 35, 35, 0.3) 100%);
}

body.tl-theme .mr-promo__cap {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
}

body.tl-theme .mr-promo__title {
    display: inline-block;
    background-color: var(--tl-mustard);
    color: #232323;
    border: 1.5px solid var(--tl-ink);
    box-shadow: var(--tl-offset);
    font-family: var(--tl-font-head);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    transform: rotate(-2deg);
}

/* The base's `.mr-promo:hover .mr-promo__cta` is specificity (0,0,3,0) and
   would beat a plain child override — restated at (0,1,3,0). The tile link
   label is dropped from this theme's schema, so this only guards a merchant
   who re-adds one through the section editor. */
body.tl-theme .mr-promo__cta,
body.tl-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: #fff;
}

/* --------------------------------------------------------------------------
   Product card — the export's `.zine-card`: a 2px ink frame on a raised paper
   fill that lifts up-and-left into a hard offset shadow on hover. Because the
   card is now BORDERED, its text must be inset — the base card is borderless,
   so .mr-card__title / __price / __eyebrow sit flush by design and would
   otherwise collide with the new edge.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-card {
    background-color: var(--tl-surface);
    border: 2px solid var(--tl-ink);
    border-radius: var(--tl-radius);
    padding: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.tl-theme .mr-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--tl-offset);
}

body.tl-theme .mr-card > p,
body.tl-theme .mr-card > h3 {
    padding-inline: 0.5rem;
}

body.tl-theme .mr-card > *:last-child { padding-bottom: 0.5rem; }

body.tl-theme .mr-card__media {
    background-color: var(--tl-fill);
    border-radius: 0;
    margin-bottom: 1rem;
}

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

body.tl-theme .mr-card__title {
    font-family: var(--tl-font-head);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--mr-ink);
    margin-bottom: 0.35rem;
}

body.tl-theme .mr-card__title a { color: inherit; }
body.tl-theme .mr-card__title a:hover { color: var(--tl-mustard-ink); }

/* `price-display`: Inter 600 with 0.05em tracking. The export inks the price in
   raw mustard — 2.07:1 on this card fill — so it takes the text-safe sibling at
   6.46:1 instead. Same hue, readable price. */
body.tl-theme .mr-card__price {
    font-family: var(--tl-font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--tl-mustard-ink);
}

/* The shared price component ships a theme-agnostic #d6293e sale ink and a
   #9aa0a6 strike-through — the second is only 2.4:1 on this canvas. Re-ink both
   into the palette. The struck-through "was" price is a first-class element in
   a resale storefront, so it has to stay genuinely readable. */
body.tl-theme .mr-card__price del,
body.tl-theme .ll-price-compare {
    color: var(--tl-soft);
    font-size: 0.85em;
    font-weight: 400;
}

body.tl-theme .ll-price--sale { color: var(--tl-error); }

/* The rating row is emitted with an inline `color:#f5a623` (about 2:1 here), so
   overriding it needs !important. */
body.tl-theme [data-testid="card-rating"] { color: var(--tl-mustard-ink) !important; }

body.tl-theme .mr-stars { color: var(--tl-mustard-ink); }

/* The SALE / Demo chip. 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 as the export's
   hard-edged ink condition stamp with a kraft label (13.35:1). */
body.tl-theme .mr-card__badge,
body.tl-theme .mr-card__sale {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    background-color: var(--tl-ink);
    color: var(--tl-kraft);
    font-family: var(--tl-font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
}

body.tl-theme .mr-sale-tag {
    background-color: var(--tl-mustard);
    color: #232323;
    border: 1.5px solid var(--tl-ink);
    border-radius: 0;
    font-weight: 700;
}

/* 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 ink measures 15.72:1 at rest and the
   hover pair (--mr-ink on --mr-surface) 15.05:1, so both states clear the 3:1
   WCAG minimum for UI components by a wide margin. They are explicitly kept
   round: this theme's 4px radius belongs to cards, buttons and fields.
   The "saved" heart uses the design's error red (9.33:1 on the circle) — the
   raw mustard would be 2.44:1 and read as disabled. */
body.tl-theme .mr-card__wish,
body.tl-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--tl-ink);
    border-radius: 9999px;
}

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

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

/* Slide-up "Add to Cart" — solid ink with a tracked caps kraft label. */
body.tl-theme .mr-card__quick {
    background-color: var(--tl-ink);
    color: var(--tl-kraft);
    font-family: var(--tl-font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Fresh Off the Rack (featured override) — the export lifts nothing here; the
   row sits straight on the kraft canvas. The base's `mr-band--alt` tint is
   cancelled so the flat-lays sit on paper.
   -------------------------------------------------------------------------- */
.tl-featured { background-color: var(--tl-kraft); }

/* --------------------------------------------------------------------------
   Condition grades (twice-loved-only section) — the full-bleed ink band. Kraft
   body copy runs 13.10:1 on the ink and the mustard grade names 6.44:1, so this
   is the one place the raw accent is used as TEXT.
   -------------------------------------------------------------------------- */
.tl-grades {
    background-color: var(--tl-ink);
    padding-block: clamp(48px, 8vw, 64px);
}

body.tl-theme .tl-grades__heading {
    font-family: var(--tl-font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-align: center;
    color: var(--tl-kraft);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.tl-grades__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 40px);
    text-align: center;
}

.tl-grades__grid--1 { grid-template-columns: 1fr; }
.tl-grades__grid--2 { grid-template-columns: repeat(2, 1fr); }
.tl-grades__grid--4 { grid-template-columns: repeat(4, 1fr); }

body.tl-theme .tl-grade__name {
    font-family: var(--tl-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--tl-mustard);
    margin-bottom: 1rem;
}

.tl-grade__text {
    font-family: var(--tl-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: #ebe6dc;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Still Here (For Now) (new-arrivals override) — same kraft canvas, heading
   left-aligned with no closing button.
   -------------------------------------------------------------------------- */
.tl-still { background-color: var(--tl-kraft); }

body.tl-theme .tl-still__heading { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* --------------------------------------------------------------------------
   Category band (categories override) — plain ink-outlined boxes carrying only
   the name, filling with mustard on hover. Ink label on mustard = 6.44:1.
   -------------------------------------------------------------------------- */
.tl-cats {
    background-color: var(--tl-kraft);
    padding-top: 0;
}

.tl-catbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
    border: 2px solid var(--tl-ink);
    border-radius: var(--tl-radius);
    text-align: center;
    text-decoration: none;
    padding: 1rem;
    transition: background-color 0.25s ease;
}

.tl-catbox:hover { background-color: var(--tl-mustard); }

.tl-catbox__label {
    font-family: var(--tl-font-head);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--mr-ink);
    transition: transform 0.25s ease;
}

.tl-catbox:hover .tl-catbox__label { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   Journal (journal override) — a quiet tonal band of clipping cards: a 2px ink
   frame around a 16:9 cover, a mustard sticker tag, the uppercase title and the
   keyline "Read Post →" link.
   -------------------------------------------------------------------------- */
.tl-journal {
    background-color: var(--tl-band-quiet);
    padding-block: var(--mr-section-y);
    border-block: 2px solid var(--tl-ink);
}

.tl-journal__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.tl-clip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
}

.tl-clip__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 2px solid var(--tl-ink);
    background-color: var(--tl-fill);
}

.tl-clip__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tl-clip:hover .tl-clip__media img { transform: scale(1.05); }

body.tl-theme .tl-clip__title {
    font-family: var(--tl-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
}

body.tl-theme .tl-clip__title a {
    color: var(--mr-ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.tl-theme .tl-clip__title a:hover { color: var(--tl-mustard-ink); }

/* Push the read link to the bottom so the three cards align. */
.tl-clip > .tl-keyline-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   The Rerack (newsletter override) — a solid mustard panel inside a 2px ink
   outline, thrown by the hard offset block. EVERYTHING on it is ink.
   -------------------------------------------------------------------------- */
.tl-cta { padding-block: var(--mr-section-y); }

.tl-cta__panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: center;
    background-color: var(--tl-mustard);
    border: 2px solid var(--tl-ink);
    border-radius: var(--tl-radius);
    box-shadow: var(--tl-offset);
    padding: clamp(1.75rem, 4vw, 2.5rem);
}

body.tl-theme .tl-cta__eyebrow { color: #232323; }

body.tl-theme .tl-cta__heading {
    font-family: var(--tl-font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #232323;
    margin-bottom: 0.5rem;
}

.tl-cta__body {
    font-family: var(--tl-font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: #232323;
    margin: 0;
}

/* Full ink, not a faded ink: at 78% opacity over mustard this composites to
   4.32:1, just under the 4.5:1 normal-text minimum. */
.tl-cta__note {
    font-family: var(--tl-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #232323;
    margin: 0.75rem 0 0;
}

.tl-cta__form {
    display: flex;
    gap: 1rem;
}

.tl-cta__form input {
    flex: 1;
    min-width: 0;
    background-color: var(--tl-kraft);
    border: 2px solid var(--tl-ink);
    border-radius: var(--tl-radius);
    color: #232323;
    font-family: var(--tl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.9rem 1rem;
}

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

.tl-cta__form input:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--tl-ink);
}

.tl-cta__btn {
    border: 2px solid var(--tl-ink);
    border-radius: var(--tl-radius);
    background-color: var(--tl-ink);
    color: var(--tl-kraft);
    font-family: var(--tl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.9rem 2rem;
    white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   Inherited component finishing — category tiles (used on /shop and elsewhere),
   press strip, tabs, gallery, pagination, panels.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-tile--cat {
    border: 2px solid var(--tl-ink);
    background-color: var(--tl-fill);
}

body.tl-theme .mr-tile--cat .mr-tile__scrim {
    background: linear-gradient(180deg, rgba(35, 35, 35, 0.12) 40%, rgba(35, 35, 35, 0.68) 100%);
}

body.tl-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--tl-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

body.tl-theme .mr-brandstrip span {
    font-family: var(--tl-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--mr-ink);
}

/* Mustard on kraft is 2.07:1 — the active tab rule has to take the text-safe
   sibling, and the label goes full ink so state never rests on colour alone. */
body.tl-theme .mr-tabs .nav-link.active {
    color: var(--mr-ink);
    border-bottom-color: var(--tl-mustard-ink);
}

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

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

body.tl-theme .mr-filter__title,
body.tl-theme .mr-field-label,
body.tl-theme .mr-step__label {
    font-family: var(--tl-font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Footer — the export's ink slab. Every text token riding on it has to be
   re-inked, or the light neutrals re-pointed above go invisible against it.
   Mustard column headings run 6.44:1 here, which is the one place the raw
   accent is correct as text.
   -------------------------------------------------------------------------- */
body.tl-theme .mr-footer {
    background-color: var(--tl-ink);
    color: #d9d4ca;
}

body.tl-theme .mr-footer h4 {
    font-family: var(--tl-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tl-mustard);
}

body.tl-theme .mr-footer__brand {
    font-family: var(--tl-font-head);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--tl-kraft);
}

body.tl-theme .mr-footer a { color: #d9d4ca; }
body.tl-theme .mr-footer a:hover { color: var(--tl-mustard); }

body.tl-theme .mr-footer .mr-muted { color: #d9d4ca; }
body.tl-theme .mr-footer .mr-soft { color: rgba(241, 236, 226, 0.7); }
body.tl-theme .mr-footer .mr-divider { background-color: rgba(241, 236, 226, 0.18); }

body.tl-theme .mr-footer .form-control {
    background-color: rgba(241, 236, 226, 0.08);
    border-color: rgba(241, 236, 226, 0.35);
    color: var(--tl-kraft);
}

body.tl-theme .mr-footer .form-control::placeholder { color: rgba(241, 236, 226, 0.6); }

body.tl-theme .mr-footer .form-control:focus {
    background-color: rgba(241, 236, 226, 0.14);
    border-color: var(--tl-kraft);
    box-shadow: inset 0 0 0 1px var(--tl-kraft);
}

/* The base's footer "Join" button is .mr-btn--primary — an ink fill on an ink
   band, i.e. an invisible button. Invert it: mustard plate, ink label. */
body.tl-theme .mr-footer .mr-btn--primary,
body.tl-theme .mr-footer .mr-btn--primary:hover,
body.tl-theme .mr-footer .mr-btn--primary:focus {
    background-color: var(--tl-mustard);
    border-color: var(--tl-mustard);
    color: #232323;
}

body.tl-theme .mr-social {
    border-radius: var(--tl-radius);
    border-color: rgba(241, 236, 226, 0.35);
    background: transparent;
    color: rgba(241, 236, 226, 0.9);
}

body.tl-theme .mr-social:hover {
    background-color: var(--tl-mustard);
    border-color: var(--tl-mustard);
    color: #232323;
}

/* --------------------------------------------------------------------------
   Focus accessibility — the base outlines `*:focus-visible` with --ll-accent,
   and mustard on the kraft canvas is 2.07:1, well under the 3:1 WCAG minimum
   for non-text UI. Re-point the ring to ink everywhere (13.35:1 on kraft), then
   back to mustard on the ink bands, where ink-on-ink would be invisible and
   mustard is 6.44:1.
   -------------------------------------------------------------------------- */
body.tl-theme a:focus-visible,
body.tl-theme button:focus-visible,
body.tl-theme input:focus-visible,
body.tl-theme select:focus-visible,
body.tl-theme textarea:focus-visible {
    outline: 2px solid var(--tl-ink);
    outline-offset: 2px;
}

body.tl-theme .mr-footer a:focus-visible,
body.tl-theme .mr-footer button:focus-visible,
body.tl-theme .mr-footer input:focus-visible,
body.tl-theme .mr-announce a:focus-visible,
body.tl-theme .tl-grades a:focus-visible {
    outline-color: var(--tl-mustard);
}

/* --------------------------------------------------------------------------
   Reduced motion — every transform, zoom and rotation in this theme is
   decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.tl-theme .mr-btn,
    body.tl-theme .mr-card,
    body.tl-theme .tl-keyline-link,
    body.tl-theme .tl-hero__plate,
    body.tl-theme .tl-catbox,
    body.tl-theme .tl-catbox__label,
    body.tl-theme .tl-clip__media img,
    body.tl-theme .mr-card__media img,
    body.tl-theme .mr-promo__img,
    body.tl-theme .mr-promo__scrim {
        transition: none;
    }

    /* The base's reduced-motion block only kills these transitions, not the
       hover transforms themselves. */
    body.tl-theme .mr-card:hover,
    body.tl-theme .mr-btn--primary.tl-btn-hero:hover,
    body.tl-theme .tl-catbox:hover .tl-catbox__label,
    body.tl-theme .tl-clip:hover .tl-clip__media img,
    body.tl-theme .mr-card:hover .mr-card__media img,
    body.tl-theme .mr-promo:hover .mr-promo__img {
        transform: none;
    }

    body.tl-theme .tl-hero__media:hover .tl-hero__plate { transform: rotate(-2deg); }
}

/* --------------------------------------------------------------------------
   Mobile — the export's fluid 4-column grid: the hero stacks with the
   photograph FIRST (order-1 in the export's markup), the grade band and the
   newsletter panel go single-column, and the display sizes step down.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tl-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tl-hero__media { order: -1; }

    .tl-hero__img { height: clamp(260px, 60vw, 360px); }

    .tl-hero__lead { font-size: 1rem; }

    .tl-section-head { margin-bottom: 1.75rem; }

    .tl-grades__grid,
    .tl-grades__grid--2,
    .tl-grades__grid--4 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tl-cta__panel { grid-template-columns: 1fr; }

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

    .tl-cta__btn { width: 100%; }

    .tl-cta__body { font-size: 1rem; }

    .tl-catbox { height: 6rem; }

    body.tl-theme .mr-promo__cap {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
}