/* ==========================================================================
   tool-shed (ToolShed) — "Industrial Minimalism" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_53_toolshed_industrial_hardware_store — the
   "ToolShed" DESIGN.md is the design-system source). The design system: a
   workshop-grey canvas with white "paneling", Steel Navy (#243447) as the
   structural colour (announce, header, tiles, footer, add-to-cart), and Safety
   Yellow (#F2B705) reserved for high-visibility accents (hero CTA, chips, SALE
   badges, prices highlight, the newsletter band). Depth comes from 1px/2px
   outlines and tonal layers, NOT soft shadows. Poppins Bold uppercase headlines
   ("stamped metal / industrial signage") over Inter body/technical copy, on a
   machined 4px corner.

   This stylesheet has two jobs:
     (a) style tool-shed's OWN sections (ts-* — featured, pro-help cards,
         stocked, category tiles, journal head, newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the workshop palette and drawing the hairline
         structure. This is the only reason shop / PDP / cart / checkout /
         account / blog read on-brand without a single page override.

   Everything is scoped under `body.ts-theme` and reads the 5 customizer tokens
   (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so the
   customizer + live preview keep working.

   Contrast decisions (measured, sRGB):
     - Safety Yellow #f2b705 as TEXT on the light canvas is ~1.75:1 — it CANNOT
       carry text there and white-on-amber fails too. So amber is used ONLY as a
       FILL on the light canvas (chips/badges/hero CTA/newsletter), always with
       DARK ink on top (steel-navy on amber ≈ 6.7:1; near-black ink on amber
       ≈ 9.7:1). Every amber TEXT role on the light canvas is routed to the
       darker gold sibling --ts-amber-ink #785900 (6.6:1 on white) — this is the
       export's own `text-primary`. On the steel-navy tiles/footer amber is
       bright (#f2b705 on navy ≈ 6.7:1) and used directly.
     - Steel Navy #243447 on white ≈ 12.1:1 (and the reverse) — the primary
       button (navy fill / white text, the add-to-cart everywhere) is safe.
   ========================================================================== */

body.ts-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ts-navy: var(--bs-primary, #243447);
    --ts-navy-rgb: var(--bs-primary-rgb, 36, 52, 71);
    --ts-amber: var(--ll-accent, #f2b705);
    --ts-amber-rgb: 242, 183, 5;
    --ts-radius: var(--ll-btn-radius, 0.25rem);
    --ts-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --ts-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Literal industrial palette (DESIGN.md prose + rendered code.html). Canvas
       and ink are literals by design — there is no "ink"/"canvas" slot in the
       5-token contract, and structural ink must never ride on a customizer
       token. */
    --ts-navy-deep: #1a2735;   /* button/link hover — deeper steel */
    --ts-footer-navy: #0b1c2e; /* export footer `on-secondary-fixed` — deepest */
    --ts-amber-ink: #785900;   /* dark gold — amber TEXT roles on the light canvas */
    --ts-amber-deep: #d9a404;  /* amber CTA hover fill */
    --ts-canvas: #eef0f0;      /* DESIGN.md "Workshop Grey" — global background */
    --ts-white: #ffffff;       /* paneling — cards, white bands */
    --ts-band: #e8eaea;        /* alternating band */
    --ts-band-alt: #eceeee;    /* surface-container — "New in Stock" band */
    --ts-fill: #e1e3e3;        /* surface-container-highest — fills, media bg */
    --ts-ink: #191c1d;         /* on-surface — near-black primary text */
    --ts-muted: #48515a;       /* steel-grey supporting text (~7:1 on white) */
    --ts-soft: #6b7078;        /* metadata / placeholders (~4.7:1 on white) */
    --ts-line: #d5d8d8;        /* 1px workshop-grey outline (DESIGN.md) */
    --ts-line-strong: #b9bfbf; /* stronger outline */

    /* Re-point the inherited base neutrals at the workshop palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radius, gold,
       shadow) reads on-brand across every inherited page. */
    --mr-ink: var(--ts-ink);
    --mr-muted: var(--ts-muted);
    --mr-soft: var(--ts-soft);
    --mr-surface: var(--ts-white);
    --mr-band: var(--ts-band);
    --mr-band-alt: var(--ts-band-alt);
    --mr-fill: var(--ts-fill);
    --mr-border: var(--ts-line);
    --mr-border-strong: var(--ts-line-strong);
    --mr-radius: 0.25rem;
    --mr-gold: var(--ts-amber-ink);
    --mr-shadow: none;

    /* Bootstrap paints bare <a> via rgba(var(--bs-link-color-rgb),1) —
       theme-vars sets the hex --bs-link-color but never the -rgb triplet, so a
       bare <a> would render factory blue. Alias to --bs-primary-rgb (steel
       navy, 12:1 on white) so it tracks the customizer. NO bare
       `body.ts-theme a { color: … }` rule — it would repaint the primary
       button's white label (gotcha). */
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-body-bg: var(--ts-canvas);

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

/* ===== Shape — machined 4px corner everywhere, no soft shadows ============ */
body.ts-theme .mr-card,
body.ts-theme .mr-card__media,
body.ts-theme .mr-promo,
body.ts-theme .mr-tile,
body.ts-theme .mr-panel,
body.ts-theme .mr-article__media,
body.ts-theme .mr-gallery__main,
body.ts-theme .mr-gallery__thumb,
body.ts-theme .dropdown-menu {
    border-radius: var(--ts-radius);
    box-shadow: none;
}

/* ===== Typography — Poppins Bold uppercase headlines, Inter body ========== */
body.ts-theme h1, body.ts-theme h2, body.ts-theme h3,
body.ts-theme h4, body.ts-theme h5, body.ts-theme h6,
body.ts-theme .mr-display, body.ts-theme .mr-logo {
    font-family: var(--ts-font-head);
    color: var(--ts-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.ts-theme .mr-display { font-weight: 700; letter-spacing: -0.02em; }

/* Section headings are uppercase "stamped metal". h2.mr-display is a section
   heading / quick-view product name; h1.mr-display is the PDP/category page
   TITLE, so only h2 gets uppercased (forcing it onto h1 would uppercase real
   product/category names). */
body.ts-theme h2.mr-display,
body.ts-theme .ts-heading {
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

body.ts-theme .mr-eyebrow,
body.ts-theme .ts-eyebrow {
    font-family: var(--ts-font-body);
    /* DESIGN.md label-caps: Inter 600 / 12px / 0.05em, uppercase. */
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ts-amber-ink);
}

/* A quiet tracked keyline link ("VIEW ALL NEW ARRIVALS") — dark gold text
   above a matching underline, snapping to navy on hover. */
body.ts-theme .ts-keyline-link {
    font-family: var(--ts-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ts-amber-ink);
    text-decoration: none;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--ts-amber-ink);
    transition: border-color 0.25s ease, color 0.25s ease;
}
body.ts-theme .ts-keyline-link:hover {
    color: var(--ts-navy);
    border-bottom-color: var(--ts-navy);
}

/* ===== Buttons & forms ==================================================== */
/* DESIGN.md Components: primary = Steel Navy fill + white text (the export's
   add-to-cart), secondary = navy outline, no fill; 4px radius; no shadow. The
   hero's yellow CTA is a scoped override further down. */
body.ts-theme .mr-btn {
    font-family: var(--ts-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--ts-radius);
    padding: 0.9rem 2rem;
    border: 2px solid transparent;
    box-shadow: none;
    transition: background-color 0.22s, color 0.22s, border-color 0.22s, filter 0.22s;
}
body.ts-theme .mr-btn--hero { padding: 1.05rem 2.4rem; }
body.ts-theme .mr-btn--primary { background-color: var(--ts-navy); border-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-btn--primary:hover,
body.ts-theme .mr-btn--primary:focus { background-color: var(--ts-navy-deep); border-color: var(--ts-navy-deep); color: #fff; filter: none; }
/* The primary label must stay white on the dark navy fill even if a later
   cascade layer (or merchant custom CSS) recolours anchors (gotcha). */
body.ts-theme .mr-btn--primary,
body.ts-theme .mr-btn--primary:visited { color: #fff; }
body.ts-theme .mr-btn--outline { border-color: var(--ts-navy); color: var(--ts-navy); background-color: transparent; }
body.ts-theme .mr-btn--outline:hover { background-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-btn--light { background-color: #fff; color: var(--ts-navy); border-color: #fff; }
body.ts-theme .mr-btn--light:hover { background-color: var(--ts-navy); color: #fff; border-color: var(--ts-navy); }
body.ts-theme .mr-btn--on-dark { border-color: #fff; color: #fff; background-color: transparent; }
body.ts-theme .mr-btn--on-dark:hover { background-color: #fff; color: var(--ts-navy); }
body.ts-theme .mr-rail-btn:hover { background: var(--ts-navy); border-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-ulink:hover { color: var(--ts-amber-ink); border-color: var(--ts-amber-ink); }

/* Bootstrap's own .btn-primary (the shared PDP "Submit review" form) — navy is
   dark, so white text on it is 12:1. Set both bg + label explicitly. */
body.ts-theme .btn-primary {
    --bs-btn-bg: var(--ts-navy);
    --bs-btn-border-color: var(--ts-navy);
    --bs-btn-hover-bg: var(--ts-navy-deep);
    --bs-btn-hover-border-color: var(--ts-navy-deep);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

/* DESIGN.md Input Fields: 1px/2px outline; focus = 2px Safety Yellow ring. */
body.ts-theme .form-control,
body.ts-theme .form-select {
    border-radius: var(--ts-radius);
    border-color: var(--ts-line-strong);
    background-color: #fff;
    color: var(--ts-ink);
}
body.ts-theme .form-control:focus,
body.ts-theme .form-select:focus {
    border-color: var(--ts-amber);
    box-shadow: 0 0 0 2px rgba(var(--ts-amber-rgb), 0.45);
}
/* Never a padding shorthand on the select — it eats Bootstrap's caret gutter. */
body.ts-theme .form-select { padding-inline-end: 2.25rem; }
body.ts-theme .form-check-input:checked { background-color: var(--ts-navy); border-color: var(--ts-navy); }
body.ts-theme .form-label { color: var(--ts-ink); font-weight: 600; }

/* ===== Announcement bar (steel navy + white) ============================= */
/* The base derives this band from color-mix(--ll-accent 62%, #000), which for
   a safety-yellow accent would read olive — the export's ribbon is steel navy. */
body.ts-theme .mr-announce {
    background-color: var(--ts-navy);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 600;
}
body.ts-theme .mr-announce a { color: var(--ts-amber); }

/* ===== Header ============================================================= */
body.ts-theme .mr-header {
    background-color: #f8fafa;
    border-bottom: 2px solid var(--ts-line);
}
body.ts-theme .mr-logo {
    font-family: var(--ts-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ts-navy);
}
body.ts-theme .mr-nav-link {
    font-family: var(--ts-font-body);
    color: var(--ts-muted);
    font-weight: 500;
}
body.ts-theme .mr-nav-link:hover { color: var(--ts-amber-ink); }
body.ts-theme .mr-nav-link.is-active {
    color: var(--ts-amber-ink);
    border-color: var(--ts-amber-ink);
    font-weight: 700;
}
body.ts-theme .mr-icon-btn { color: var(--ts-navy); }
body.ts-theme .mr-icon-btn:hover { color: var(--ts-amber-ink); }
/* The cart count badge — the export uses primary-container (amber) with dark
   text; near-black ink on amber ≈ 9.7:1. */
body.ts-theme .mr-badge {
    background-color: var(--ts-amber);
    color: var(--ts-ink);
}
body.ts-theme .mr-badge--wish { background-color: var(--ts-amber); color: var(--ts-ink); }
/* The export's search field is a soft container with a hairline border. */
body.ts-theme .mr-search input {
    background-color: var(--ts-band-alt);
    border-color: var(--ts-line);
    border-radius: var(--ts-radius);
    color: var(--ts-ink);
}
body.ts-theme .mr-search input::placeholder { color: var(--ts-soft); }
body.ts-theme .mr-search input:focus {
    background-color: #fff;
    border-color: var(--ts-amber);
    box-shadow: none;
}
body.ts-theme .mr-search button:hover { color: var(--ts-amber-ink); }
body.ts-theme .dropdown-item:hover,
body.ts-theme .dropdown-item:focus { background-color: var(--ts-band-alt); color: var(--ts-amber-ink); }

/* ===== Hero (inherited full-bleed overlay) =============================== */
/* The export scrims left-to-right from steel-navy at 80%. NEVER
   `background: none` — the overlay is what keeps the white <h1> readable over
   an arbitrary merchant photograph. */
body.ts-theme .mr-hero__overlay {
    background: linear-gradient(90deg,
        rgba(36, 52, 71, 0.9) 0%,
        rgba(36, 52, 71, 0.62) 46%,
        rgba(36, 52, 71, 0.18) 100%);
}
body.ts-theme .mr-hero .mr-hero__copy h1,
body.ts-theme .mr-hero .mr-hero__copy .mr-display { color: #fff; text-transform: uppercase; }
/* The export's hero eyebrow ("BUILT FOR THE JOB") is a Safety-Yellow CHIP with
   steel-navy text, not tracked text. */
body.ts-theme .mr-hero .mr-hero__copy .mr-eyebrow {
    display: inline-block;
    background-color: var(--ts-amber);
    color: var(--ts-navy);
    padding: 0.35rem 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    border-radius: 2px;
}
/* The hero's PRIMARY CTA ("Shop Power Tools") is a Safety-Yellow fill with
   steel-navy text (navy on amber ≈ 6.7:1) — scoped to the hero so the
   site-wide navy add-to-cart primary is untouched. The secondary is the white
   outline (.mr-btn--on-dark). */
body.ts-theme .mr-hero .mr-btn--primary {
    background-color: var(--ts-amber);
    border-color: var(--ts-amber);
    color: var(--ts-navy);
}
body.ts-theme .mr-hero .mr-btn--primary:hover,
body.ts-theme .mr-hero .mr-btn--primary:focus {
    background-color: var(--ts-amber-deep);
    border-color: var(--ts-amber-deep);
    color: var(--ts-navy);
}

/* ===== Trust strip ======================================================= */
/* The export's trust band is white, not the base's alternating tint. Only the
   trust section carries both .mr-band--alt AND .border-bottom. */
body.ts-theme .mr-band--alt.border-bottom { background-color: var(--ts-white); }
body.ts-theme .mr-trust svg { color: var(--ts-amber-ink); }
body.ts-theme .mr-trust strong {
    color: var(--ts-ink);
    font-family: var(--ts-font-body);
    font-weight: 700;
    font-size: 0.9rem;
}
body.ts-theme .mr-trust span { color: var(--ts-soft); font-size: 0.8rem; }

/* ===== Promo tiles (inherited mr-promo) ================================== */
/* The export's tiles are solid steel-navy panels with a dimmed photo, a white
   Poppins title bottom-left and a Safety-Yellow "Shop Now →" link. */
body.ts-theme .mr-promo {
    aspect-ratio: 5 / 4;
    background-color: var(--ts-navy);
    border-radius: var(--ts-radius);
    overflow: hidden;
}
body.ts-theme .mr-promo__img { opacity: 0.7; }
body.ts-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(36, 52, 71, 0.15) 0%, rgba(36, 52, 71, 0.85) 100%);
}
body.ts-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(36, 52, 71, 0.05) 0%, rgba(36, 52, 71, 0.8) 100%);
}
body.ts-theme .mr-promo__title {
    font-family: var(--ts-font-head);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
body.ts-theme .mr-promo__cta {
    font-family: var(--ts-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ts-amber);
}
body.ts-theme .mr-promo__cta::after { content: " →"; }
/* The base's `.mr-promo:hover .mr-promo__cta` is (0,0,3,0) and out-specifies a
   plain child override — restate the hover through the same descendant shape so
   the label never resolves to something invisible (invisible-label gotcha). */
body.ts-theme .mr-promo:hover .mr-promo__cta { color: #fff; }

/* ===== Product card (inherited) ========================================== */
/* DESIGN.md Cards: white background, 1px workshop-grey border, prices bold
   steel-navy. The base card is borderless with FLUSH text, so adding a border
   means the copy must be inset (recurring gotcha #2). */
body.ts-theme .mr-card {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius);
    overflow: hidden;
    transition: border-color 0.25s ease;
}
body.ts-theme .mr-card:hover { border-color: var(--ts-navy); }
body.ts-theme .mr-card__media { margin-bottom: 0; border-radius: 0; background-color: var(--ts-canvas); }
body.ts-theme .mr-card__eyebrow,
body.ts-theme .mr-card__title,
body.ts-theme .mr-card__price,
body.ts-theme .mr-card [data-testid="card-rating"] { padding-inline: 0.85rem; }
body.ts-theme .mr-card__media + * { padding-top: 0.85rem; }
body.ts-theme .mr-card > *:last-child { padding-bottom: 1rem; }
body.ts-theme .mr-card__eyebrow { color: var(--ts-soft); letter-spacing: 0.08em; }
body.ts-theme .mr-card__title { font-family: var(--ts-font-body); font-weight: 700; font-size: 0.98rem; color: var(--ts-ink); }
body.ts-theme .mr-card__title a:hover { color: var(--ts-amber-ink); }
/* DESIGN.md: prices are bold Inter, emphasised in Steel Navy; a struck-through
   compare price is muted. */
body.ts-theme .mr-card__price { font-family: var(--ts-font-body); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ts-navy); }
body.ts-theme .mr-card__price del,
body.ts-theme .mr-card__price s { color: var(--ts-soft); font-weight: 400; font-size: 0.9rem; }

/* SALE badge — the export's Safety-Yellow tag with near-black text (9.7:1),
   rectangular. */
body.ts-theme .mr-card__badge {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    background-color: var(--ts-amber);
    color: var(--ts-ink);
    font-family: var(--ts-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.6rem;
    border-radius: 2px;
}

/* Overlay controls — restyled TOGETHER, contrast-checked in BOTH states. Navy
   on near-white ≈ 12:1; the dark-gold hover ≈ 6.6:1 on white (Safety Yellow
   itself is only 1.75:1 as an icon on white — never used here). Kept circular
   (the 4px shape discipline above deliberately doesn't list them). */
body.ts-theme .mr-card__wish,
body.ts-theme .mr-card__quickview {
    color: var(--ts-navy);
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 9999px;
}
body.ts-theme .mr-card__wish:hover,
body.ts-theme .mr-card__quickview:hover {
    color: var(--ts-amber-ink);
    background-color: #fff;
}
body.ts-theme .mr-card__wish.is-active { color: var(--ts-amber-ink); }
/* The slide-up "Add to Cart" button — steel navy (the export). */
body.ts-theme .mr-card__quick { background-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-card__quick:hover { background-color: var(--ts-navy-deep); color: #fff; }

/* ===== ts-featured — "Workbench Bestsellers" (white panel) =============== */
body.ts-theme .ts-featured { background-color: var(--ts-white); }

/* ===== ts-help — the "Ask a Pro / Kit Builder / Bulk & Trade" band ======= */
body.ts-theme .ts-help__card {
    height: 100%;
    background-color: var(--ts-white);
    border: 2px solid var(--ts-navy);
    border-radius: var(--ts-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.ts-theme .ts-help__card:hover { transform: translateY(-4px); }
body.ts-theme .ts-help__icon {
    width: 40px;
    height: 40px;
    color: var(--ts-amber-ink);
    margin-bottom: 1rem;
    display: block;
}
body.ts-theme .ts-help__title {
    font-family: var(--ts-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ts-ink);
    margin-bottom: 0.75rem;
}
body.ts-theme .ts-help__text {
    color: var(--ts-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
body.ts-theme .ts-help__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ts-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ts-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}
body.ts-theme .ts-help__link svg { width: 18px; height: 18px; }
body.ts-theme .ts-help__link:hover { color: var(--ts-amber-ink); }

/* ===== ts-cats — solid steel-navy category tiles ======================== */
body.ts-theme .ts-cats__tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--ts-navy);
    border-radius: var(--ts-radius);
    text-decoration: none;
    overflow: hidden;
    transition: filter 0.3s ease;
}
body.ts-theme .ts-cats__tile:hover { filter: brightness(1.15); }
body.ts-theme .ts-cats__name {
    font-family: var(--ts-font-head);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    padding: 0 1rem;
    color: #fff;
    transition: transform 0.3s ease;
}
body.ts-theme .ts-cats__tile:hover .ts-cats__name { transform: scale(1.08); }

/* ===== ts-journal — left heading with a Safety-Yellow rule, amber chips === */
body.ts-theme .ts-journal { background-color: var(--ts-white); }
body.ts-theme .ts-journal__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
body.ts-theme .ts-journal__head > * { flex: 0 0 auto; }
body.ts-theme .ts-journal__rule {
    display: block;
    width: 3rem;
    height: 4px;
    background-color: var(--ts-amber);
}
body.ts-theme .ts-journal__chip {
    display: inline-block;
    background-color: var(--ts-amber);
    color: var(--ts-ink);
    padding: 0.15rem 0.5rem;
    font-size: 0.62rem;
    border-radius: 2px;
    letter-spacing: 0.08em;
}
body.ts-theme .mr-article__media { border: 1px solid var(--ts-line); }
body.ts-theme .mr-article__title a { color: var(--ts-ink); text-decoration: none; }
body.ts-theme .mr-article__title a:hover { color: var(--ts-amber-ink); }

/* ===== ts-cta — "The Workbench" Safety-Yellow newsletter band =========== */
/* The export inks this amber band with steel navy (navy on amber ≈ 6.7:1).
   White on amber would be ~1.75:1 — do NOT "fix" it to white. */
body.ts-theme .ts-cta {
    background-color: var(--ts-amber);
    color: var(--ts-navy);
    padding-block: clamp(56px, 9vw, 80px);
}
body.ts-theme .ts-cta__eyebrow { color: var(--ts-navy); }
body.ts-theme .ts-cta__title { color: var(--ts-navy); text-transform: uppercase; }
body.ts-theme .ts-cta__body { max-width: 46ch; color: var(--ts-navy); font-size: 1.05rem; }
body.ts-theme .ts-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 34rem;
    justify-content: center;
}
body.ts-theme .ts-cta__form input {
    flex: 1;
    min-width: 14rem;
    background-color: #fff;
    border: 2px solid var(--ts-navy);
    border-radius: var(--ts-radius);
    color: var(--ts-ink);
    padding: 0.95rem 1.3rem;
    font-size: 0.98rem;
}
body.ts-theme .ts-cta__form input::placeholder { color: var(--ts-soft); }
body.ts-theme .ts-cta__form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--ts-navy-rgb), 0.35);
}
body.ts-theme .ts-cta__btn {
    background-color: var(--ts-navy);
    color: #fff;
    border: 0;
    border-radius: var(--ts-radius);
    font-family: var(--ts-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.95rem 2.4rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
body.ts-theme .ts-cta__btn:hover { background-color: var(--ts-navy-deep); }
body.ts-theme .ts-cta__btn:disabled { opacity: 0.85; cursor: not-allowed; }
body.ts-theme .ts-cta__note { color: rgba(36, 52, 71, 0.75); font-size: 0.8rem; }

/* ===== Footer (inherited mr-footer) — deep steel-navy panel ============== */
/* The export's footer is the deepest navy with a 4px Safety-Yellow top border
   and light text. Recolour the surface AND every text token riding on it, or
   the re-pointed dark --mr-muted / --mr-soft render invisible on the dark band. */
body.ts-theme .mr-footer {
    background-color: var(--ts-footer-navy);
    border-top: 4px solid var(--ts-amber);
    color: rgba(255, 255, 255, 0.8);
}
body.ts-theme .mr-footer h4 { color: #fff; font-family: var(--ts-font-body); letter-spacing: 0.12em; text-transform: uppercase; }
body.ts-theme .mr-footer .mr-footer__brand { color: var(--ts-amber); font-family: var(--ts-font-head); text-transform: uppercase; }
body.ts-theme .mr-footer a { color: rgba(255, 255, 255, 0.8); }
body.ts-theme .mr-footer a:hover { color: #fff; }
body.ts-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.8); }
body.ts-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.6); }
body.ts-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.14); }
body.ts-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
}
body.ts-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }
/* The footer's "Join" button is .mr-btn--primary — navy on the deep-navy
   footer would vanish, so invert it to the amber accent with navy text. */
body.ts-theme .mr-footer .mr-btn--primary {
    background-color: var(--ts-amber);
    border-color: var(--ts-amber);
    color: var(--ts-navy);
}
body.ts-theme .mr-footer .mr-btn--primary:hover { background-color: var(--ts-amber-deep); border-color: var(--ts-amber-deep); color: var(--ts-navy); }
body.ts-theme .mr-social { border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; border-radius: var(--ts-radius); }
body.ts-theme .mr-social:hover { background-color: var(--ts-amber); border-color: var(--ts-amber); color: var(--ts-navy); }

/* ===== PDP / cart / checkout / account finishing (inherited pages) ======= */
body.ts-theme .mr-stars { color: var(--ts-amber-ink); }
body.ts-theme .mr-sale { background-color: var(--ts-amber); color: var(--ts-ink); }
body.ts-theme .mr-tabs .nav-link.active { color: var(--ts-navy); border-bottom-color: var(--ts-amber); }
body.ts-theme .mr-page.is-active { background-color: var(--ts-navy); border-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-page:hover { border-color: var(--ts-navy); color: var(--ts-navy); }
body.ts-theme .mr-filter__link:hover { color: var(--ts-amber-ink); }
body.ts-theme .mr-acct-link.is-active { background-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-acct-avatar { background-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-step.is-done .mr-step__dot,
body.ts-theme .mr-step.is-current .mr-step__dot { border-color: var(--ts-navy); }
body.ts-theme .mr-step.is-done .mr-step__dot { background-color: var(--ts-navy); color: #fff; }
body.ts-theme .mr-gallery__thumb.is-active { border-color: var(--ts-navy); }
/* DESIGN.md Tables: zebra-striped with workshop grey for alternating rows. */
body.ts-theme .table { --bs-table-striped-bg: #eceeee; --bs-table-color: var(--ts-ink); }

/* ===== Accessibility — recolour focus outlines, never remove them ========= */
body.ts-theme a:focus-visible,
body.ts-theme button:focus-visible,
body.ts-theme input:focus-visible,
body.ts-theme select:focus-visible,
body.ts-theme textarea:focus-visible {
    outline: 2px solid var(--ts-navy);
    outline-offset: 2px;
}
/* On steel-navy surfaces the navy outline would vanish — use amber (6.7:1 on
   navy). The amber newsletter band keeps the navy outline (navy on amber). */
body.ts-theme .mr-footer a:focus-visible,
body.ts-theme .mr-hero a:focus-visible,
body.ts-theme .ts-cats__tile:focus-visible,
body.ts-theme .mr-promo:focus-visible { outline-color: var(--ts-amber); }

/* ===== Motion preferences ================================================ */
@media (prefers-reduced-motion: reduce) {
    body.ts-theme .mr-card,
    body.ts-theme .mr-card__media img,
    body.ts-theme .mr-promo__img,
    body.ts-theme .ts-help__card,
    body.ts-theme .ts-cats__name,
    body.ts-theme .ts-keyline-link,
    body.ts-theme .mr-article__media img { transition: none !important; }
    body.ts-theme .mr-card:hover .mr-card__media img,
    body.ts-theme .mr-promo:hover .mr-promo__img,
    body.ts-theme .ts-help__card:hover,
    body.ts-theme .ts-cats__tile:hover .ts-cats__name { transform: none !important; }
}

/* ===== Mobile (from the export's mobile frames) ========================== */
@media (max-width: 991.98px) {
    body.ts-theme { font-size: 15.5px; }
    body.ts-theme .mr-display { font-size: clamp(1.7rem, 6vw, 2.3rem); }
    body.ts-theme .ts-cta { padding-block: clamp(40px, 10vw, 60px); }
    body.ts-theme .mr-promo { aspect-ratio: 4 / 3; }
    body.ts-theme .ts-cta__form { flex-direction: column; }
    body.ts-theme .ts-cta__btn { width: 100%; }
    body.ts-theme .ts-cats__name { letter-spacing: 0.1em; }
    body.ts-theme .mr-btn { padding: 0.78rem 1.6rem; }
    body.ts-theme .mr-btn--hero { padding: 0.92rem 1.9rem; }
}