/* ==========================================================================
   corelab — "CoreLab" PC hardware & laptops brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_44_corelab_e_commerce_interface — the
   corelab_design_system/DESIGN.md is the design-system source). The design
   system: a cool light-grey canvas (#F4F5F6, "reduces eye strain compared to
   pure white, mimicking the matte finish of professional workstations"),
   pure-white keylined Level-1 cards (1px #E2E4E7, NO shadow at rest, a tight
   0 4px 12px @5% shadow on hover), Carbon #1B1E24 for primary text plus the
   deep-weighted full-bleed bands (the build-guide strip and the footer),
   Circuit Green as the single high-visibility action colour, a strict 4px
   ("Precision") corner radius on every component, and geometric Poppins 600
   headlines over Inter for all data-dense type — specs, uppercase metadata
   labels and prices.

   This stylesheet has two jobs:
     (a) style corelab's OWN sections (cl-* — split hero, featured header row,
         the carbon build-guide band, keylined icon category tiles, journal
         story cards, centered newsletter);
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the workstation palette and flattening cards,
         buttons and forms to the 4px shape language. This is the only reason
         shop / PDP / cart / checkout / account / blog follow the palette
         without a single page override.

   Everything is scoped under `body.cl-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 — this export ships TWO greens and they are NOT
   interchangeable:
     - primary_color is #006b2c, the DESIGN.md `primary` token and the colour
       the export actually paints the CoreLab wordmark, the active nav link,
       every price, the trust icons and all "text-primary" roles in. 6.68:1 on
       white and 6.68:1 for white-on-fill, so it is safe as text, as a link
       colour and under the ~12 inherited base rules that hardcode #fff on a
       primary fill (the pulse gotcha).
     - accent_color is #16a34a, DESIGN.md's "Circuit Green" — the literal fill
       of the export's buttons and DEAL badges. It measures only 3.30:1 on
       white, so it is used here for NON-TEXT roles (keylines, underlines,
       hover borders) and for green TEXT on the carbon bands, where it reaches
       5.07:1 while #006b2c would be 2.50:1. Solid button and badge fills use
       #006b2c so their white labels clear AA.
     - DEVIATION, stated deliberately: the export's primary buttons are the
       bright #16a34a with white labels — 3.30:1, which fails AA for a 12.5px
       bold label. They are rendered here in the deeper #006b2c instead.
     - the shared `.ll-price--sale` red (#d6293e, 3.73:1) and the pale
       `.ll-price-compare` grey (#9aa0a6, 2.60:1) are both re-pointed: the
       export prints sale prices in green with a struck grey compare price.
   ========================================================================== */

body.cl-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --cl-green: var(--bs-primary, #006b2c);
    --cl-green-rgb: var(--bs-primary-rgb, 0, 107, 44);
    --cl-circuit: var(--ll-accent, #16a34a);
    --cl-radius: var(--ll-btn-radius, 0.25rem);
    --cl-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --cl-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Derived brand tints (track the customizer tokens) */
    --cl-green-deep: #00521f; /* fallback for no color-mix */
    --cl-green-deep: color-mix(in srgb, var(--cl-green) 82%, #000); /* button hover */
    --cl-green-wash: #eef7f1; /* fallback for no color-mix */
    --cl-green-wash: color-mix(in srgb, var(--cl-green) 7%, #ffffff); /* focus rings, quiet fills */

    /* Workstation palette. Canvas / surfaces / ink are LITERALS by design
       (CLAUDE.md: never bind structural ink to a customizer token — there is
       no "ink" or "canvas" slot in the 5-token contract). */
    --cl-canvas: #f4f5f6;       /* DESIGN.md prose Background — cool matte grey */
    --cl-white: #ffffff;        /* surface-container-lowest — cards, header, hero */
    --cl-band: #f3f4f5;         /* surface-container-low — quiet bands */
    --cl-fill: #edeeef;         /* surface-container — image wells, hover fills */
    --cl-carbon: #1b1e24;       /* DESIGN.md Carbon — dark bands + footer */
    --cl-ink: #191c1d;          /* on-surface — primary text (16.4:1 on white) */
    --cl-muted: #5c5e65;        /* DESIGN.md secondary — body/secondary text (6.47:1) */
    --cl-soft: #656b76;         /* tertiary text: eyebrows, meta, placeholders (5.36:1) */
    --cl-line: #e2e4e7;         /* DESIGN.md Level-1 border / spec-row separator */
    --cl-line-strong: #c9ccd1;  /* stronger keyline, on-carbon body text */
    --cl-on-carbon: #c9ccd1;    /* body copy on the carbon bands (10.37:1) */
    --cl-on-carbon-soft: #9aa3ad; /* quiet copy on the carbon bands (6.53:1) */

    /* Shape + depth — DESIGN.md: 4px corners everywhere, outlines over
       shadows, one tight hover shadow. */
    --cl-shadow: 0 4px 12px rgba(27, 30, 36, 0.05);
    --cl-shadow-lg: 0 8px 20px rgba(27, 30, 36, 0.09);

    /* Re-point the inherited base neutrals at the workstation palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       follows — this is what restyles shop / PDP / cart / checkout / account
       / blog without a page override. */
    --mr-ink: var(--cl-ink);
    --mr-muted: var(--cl-muted);
    --mr-soft: var(--cl-soft);
    --mr-surface: var(--cl-white);
    --mr-band: var(--cl-band);
    --mr-band-alt: var(--cl-canvas);
    --mr-fill: var(--cl-fill);
    --mr-border: var(--cl-line);
    --mr-border-strong: var(--cl-line-strong);
    --mr-radius: var(--cl-radius);
    --mr-gold: #b06f00; /* star glyphs — 4.6:1 on white, unlike the base amber */
    --mr-shadow: var(--cl-shadow);

    /* Bootstrap surfaces + roles the base does not tokenise. */
    --bs-body-bg: var(--cl-canvas);
    --bs-secondary-color: var(--cl-muted);
    --bs-form-invalid-color: #ba1a1a;   /* DESIGN.md error — 6.46:1, vs 3.5:1 stock */
    --bs-form-invalid-border-color: #ba1a1a;
    /* Stop bare prose links rendering Bootstrap-blue WITHOUT a bare-`a` rule
       (which would out-specify .mr-btn--primary's white label and paint the
       hero CTA's text green-on-green — see gotchas). */
    --bs-link-color-rgb: var(--cl-green-rgb);
    --bs-link-hover-color-rgb: var(--cl-green-rgb);

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

/* --------------------------------------------------------------------------
   Typography — Poppins 600 headlines with the DESIGN.md -0.02em tracking,
   Inter for everything functional.
   -------------------------------------------------------------------------- */
body.cl-theme h1,
body.cl-theme h2,
body.cl-theme h3,
body.cl-theme h4,
body.cl-theme h5,
body.cl-theme h6,
body.cl-theme .mr-display,
body.cl-theme .mr-headline {
    font-family: var(--cl-font-head);
    font-weight: 600;
    color: var(--cl-ink);
    letter-spacing: -0.02em;
}

body.cl-theme .mr-display {
    font-size: clamp(1.6rem, 2.6vw, 2rem); /* DESIGN.md headline-lg 32px */
    line-height: 1.25;
}

/* Eyebrows / uppercase metadata — DESIGN.md label-sm (12px/600/0.05em). The
   base points these at --ll-accent, i.e. Circuit Green, which is 3.30:1 on
   white; they are small uppercase TEXT, so they take the deep green. */
body.cl-theme .mr-eyebrow {
    font-family: var(--cl-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-green);
}

body.cl-theme .cl-subheading {
    color: var(--cl-muted);
    font-size: 0.9rem;
}

/* The export's uppercase "VIEW ALL →" section link. */
body.cl-theme .cl-seeall {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--cl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cl-green);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

body.cl-theme .cl-seeall:hover {
    color: var(--cl-green-deep);
    gap: 0.7rem;
}

body.cl-theme .cl-seeall svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   Buttons & form controls — bold uppercase Inter labels, 4px corners.
   -------------------------------------------------------------------------- */
body.cl-theme .mr-btn {
    font-family: var(--cl-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: var(--cl-radius);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.cl-theme .mr-btn--primary {
    background-color: var(--cl-green);
    color: #fff;
}

body.cl-theme .mr-btn--primary:hover,
body.cl-theme .mr-btn--primary:focus {
    background-color: var(--cl-green-deep);
    color: #fff;
    filter: none;
}

/* DESIGN.md "Ghost" button: transparent, 1px Carbon border, Carbon label,
   inverting to a solid Carbon fill on hover (the hero's "See Build Guides"). */
body.cl-theme .cl-btn-ghost {
    border: 1px solid var(--cl-carbon);
    color: var(--cl-carbon);
    background: transparent;
}

body.cl-theme .cl-btn-ghost:hover,
body.cl-theme .cl-btn-ghost:focus {
    background: var(--cl-carbon);
    border-color: var(--cl-carbon);
    color: #fff;
}

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

body.cl-theme .mr-btn--outline:hover {
    background-color: var(--cl-carbon);
    border-color: var(--cl-carbon);
    color: #fff;
}

body.cl-theme .cl-btn-hero {
    padding: 1rem 2.25rem;
}

/* DESIGN.md input fields: white, 1px #E2E4E7, border goes Circuit Green on
   focus. NOTE: no `padding` shorthand here — Bootstrap reserves the right
   gutter for the select caret and the base's shared shorthand already eats
   it, so the gutter is re-asserted for selects below. */
body.cl-theme .form-control,
body.cl-theme .form-select {
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    background-color: var(--cl-white);
    color: var(--cl-ink);
}

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

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

body.cl-theme .form-control:focus,
body.cl-theme .form-select:focus {
    border-color: var(--cl-circuit);
    box-shadow: 0 0 0 0.2rem rgba(var(--cl-green-rgb), 0.14);
}

body.cl-theme a:focus-visible,
body.cl-theme button:focus-visible,
body.cl-theme input:focus-visible {
    outline: 2px solid var(--cl-green);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Announcement band + header — a carbon strip over the white sticky header
   with a deep-green Poppins wordmark.
   -------------------------------------------------------------------------- */
body.cl-theme .mr-announce {
    background-color: var(--cl-carbon);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.55rem 1rem;
}

body.cl-theme .mr-header {
    background-color: var(--cl-white);
    border-bottom: 1px solid var(--cl-line);
}

body.cl-theme .mr-logo {
    font-family: var(--cl-font-head);
    font-weight: 700;
    font-size: clamp(1.4rem, 2vw, 1.6rem);
    letter-spacing: -0.02em;
    color: var(--cl-green);
}

body.cl-theme .mr-nav-link {
    font-family: var(--cl-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

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

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

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

body.cl-theme .mr-icon-btn:hover {
    color: var(--cl-green);
}

body.cl-theme .mr-badge--wish {
    background-color: var(--cl-green);
}

body.cl-theme .mr-search input {
    background: var(--cl-band);
    border-radius: var(--cl-radius);
}

body.cl-theme .mr-search input:focus {
    border-color: var(--cl-circuit);
    box-shadow: 0 0 0 0.2rem rgba(var(--cl-green-rgb), 0.14);
}

/* --------------------------------------------------------------------------
   Hero — the export's split panel: copy on a white surface, the dark hardware
   photograph on a grey plate under a faint Circuit-Green diagonal wash.
   -------------------------------------------------------------------------- */
body.cl-theme .cl-hero {
    background: var(--cl-white);
    border-bottom: 1px solid var(--cl-line);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    overflow: hidden;
}

body.cl-theme .cl-hero__eyebrow {
    font-family: var(--cl-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cl-green);
    margin-bottom: 1rem;
}

body.cl-theme .cl-hero__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2.1rem, 4.4vw, 3rem); /* DESIGN.md display 48px */
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cl-ink);
    margin-bottom: 1rem;
}

body.cl-theme .cl-hero__lead {
    color: var(--cl-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 46ch;
    margin-bottom: 2rem;
}

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

body.cl-theme .cl-hero__figure {
    position: relative;
    background: var(--cl-fill);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    padding: clamp(1rem, 2vw, 1.75rem);
    overflow: hidden;
}

body.cl-theme .cl-hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

body.cl-theme .cl-hero__wash {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top right, rgba(22, 163, 74, 0.08), rgba(22, 163, 74, 0));
}

/* --------------------------------------------------------------------------
   Trust strip — the export keeps this band WHITE (the base tints it with
   --mr-band-alt, which this theme re-points to the grey canvas) and inks the
   icons with the deep green instead of --ll-accent.
   -------------------------------------------------------------------------- */
body.cl-theme .mr-band--alt.border-bottom {
    background-color: var(--cl-white);
    border-bottom-color: var(--cl-line) !important;
}

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

body.cl-theme .mr-trust strong {
    font-family: var(--cl-font-body);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--cl-ink);
}

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

/* --------------------------------------------------------------------------
   Promo tiles (inherited markup) — 4px keylined 4:5 tiles, bottom-up scrim,
   white caption over a Circuit-Green underline (the export's
   `underline decoration-primary`). The keyline stays WHITE in BOTH states:
   the base's `.mr-promo:hover .mr-promo__cta` recolours it to --ll-accent,
   and that selector is more specific than a bare child override, so it is
   re-declared here too (see gotchas).
   -------------------------------------------------------------------------- */
body.cl-theme .mr-promo {
    border-radius: var(--cl-radius);
    border: 1px solid var(--cl-line);
}

body.cl-theme .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(27, 30, 36, 0) 40%, rgba(27, 30, 36, 0.85) 100%);
}

body.cl-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg, rgba(27, 30, 36, 0.1) 30%, rgba(27, 30, 36, 0.9) 100%);
}

body.cl-theme .mr-promo__title {
    font-family: var(--cl-font-head);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    margin-bottom: 0.5rem;
}

body.cl-theme .mr-promo__cta,
body.cl-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-bottom: 2px solid var(--cl-circuit);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — DESIGN.md Level 1: white, 1px #E2E4E7, no
   shadow at rest, a tight shadow + a -4px lift on hover. The card gains a
   border AND a background, so its own text must be inset or the name and
   price collide with the new edge (recurring bug — see gotchas).
   -------------------------------------------------------------------------- */
body.cl-theme .mr-card {
    background: var(--cl-white);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    padding: 0.9rem 0.9rem 1.15rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.cl-theme .mr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cl-shadow);
    border-color: var(--cl-line-strong);
}

/* The export frames the product photo in a square #F4F5F6 well with padding
   and `object-contain`, not a 3:4 cover crop. */
body.cl-theme .mr-card__media {
    aspect-ratio: 1;
    background: var(--cl-canvas);
    border-radius: var(--cl-radius);
    margin-bottom: 0.9rem;
}

body.cl-theme .mr-card__eyebrow {
    font-family: var(--cl-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cl-soft);
}

body.cl-theme .mr-card__title {
    font-family: var(--cl-font-body);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
}

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

/* DESIGN.md price-display: Inter Bold, prefixed "Rs. ", the most legible
   element after the product name. Deep green on white = 6.68:1. */
body.cl-theme .mr-card__price,
body.cl-theme .ll-price {
    font-family: var(--cl-font-body);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cl-green);
}

/* The shared sale/compare pair: the platform default paints the sale price
   #d6293e (3.73:1) and the struck price #9aa0a6 (2.60:1). The export prints
   the sale price in green beside a struck grey "was" price. */
body.cl-theme .ll-price--sale {
    color: var(--cl-green);
}

body.cl-theme .ll-price-compare {
    color: var(--cl-soft);
}

/* Sale / demo badge — the export's square green "DEAL" chip. White on the
   deep green is 6.68:1; the platform default is a pill in #d6293e. */
body.cl-theme .mr-card__badge,
body.cl-theme .mr-sale-tag {
    background: var(--cl-green);
    color: #fff;
    border-radius: var(--cl-radius);
    font-family: var(--cl-font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
}

body.cl-theme .mr-status {
    border-radius: var(--cl-radius);
}

/* Slide-up Add to Cart. */
body.cl-theme .mr-card__quick {
    background-color: var(--cl-green);
    font-family: var(--cl-font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.cl-theme .mr-card__quick:hover {
    background-color: var(--cl-green-deep);
    color: #fff;
}

/* The two round overlay controls (heart + eye) inherit the base's
   surface/ink pair — a white circle with the deep green icon at rest
   (6.68:1) and carbon ink on hover (15.9:1), both measured on this palette, so
   neither state needs an override. They deliberately keep their 9999px radius:
   this theme sets no `border-radius: 0 !important` flatten block, so nothing
   squares them. The ONE exception is the saved-heart state, which the base
   inks with --ll-accent — Circuit Green, 3.30:1 on the near-white circle,
   scraping the 3:1 UI-component floor. It takes the deep green instead. */
body.cl-theme .mr-card__wish.is-active {
    color: var(--cl-green);
}

/* --------------------------------------------------------------------------
   corelab's own home sections
   -------------------------------------------------------------------------- */

/* Builder Bestsellers / Just Restocked bands. The featured band sits on the
   white surface layer, the arrivals band on the grey canvas — exactly the
   export's alternation. */
body.cl-theme .cl-featured {
    background: var(--cl-white);
    border-block: 1px solid var(--cl-line);
}

body.cl-theme .cl-arrivals {
    background: var(--cl-canvas);
}

/* Build guide — the full-bleed carbon band. Every text role on it is set
   explicitly: the re-pointed light neutrals would be invisible here, and the
   export's own green ("text-primary" #006b2c) is only 2.50:1 on carbon, so
   the parts-list links use Circuit Green instead (5.07:1). */
body.cl-theme .cl-build {
    background: var(--cl-carbon);
    padding-block: var(--mr-section-y, clamp(48px, 8vw, 80px));
}

body.cl-theme .cl-build__heading {
    font-family: var(--cl-font-head);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #fff;
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

body.cl-theme .cl-build__item {
    text-align: center;
}

body.cl-theme .cl-build__well {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--cl-radius);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* The well fills with the deep green on hover; its outline switches to Circuit
   Green because the deep green is only 2.50:1 against the carbon band and the
   well would otherwise lose its visible boundary (non-text UI needs 3:1 —
   Circuit Green on carbon is 5.07:1). */
body.cl-theme .cl-build__item:hover .cl-build__well {
    background: var(--cl-green);
    border-color: var(--cl-circuit);
}

body.cl-theme .cl-build__icon {
    width: 32px;
    height: 32px;
    color: #fff;
}

body.cl-theme .cl-build__title {
    font-family: var(--cl-font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

body.cl-theme .cl-build__text {
    color: var(--cl-on-carbon);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

body.cl-theme .cl-build__link {
    display: inline-block;
    font-family: var(--cl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cl-circuit);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(22, 163, 74, 0.4);
    transition: border-color 0.2s ease;
}

body.cl-theme .cl-build__link:hover {
    color: var(--cl-circuit);
    border-bottom-color: var(--cl-circuit);
}

/* Shop by Category — keylined WHITE tiles with a large green line icon over
   the category name; the border goes green on hover, per the export. */
body.cl-theme .cl-cats {
    background: var(--cl-band);
}

body.cl-theme .cl-cat {
    background: var(--cl-white);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    padding: 1.75rem 1rem;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.cl-theme .cl-cat:hover {
    border-color: var(--cl-circuit);
    box-shadow: var(--cl-shadow);
}

body.cl-theme .cl-cat__icon {
    width: 40px;
    height: 40px;
    color: var(--cl-green);
    margin: 0 auto 1rem;
    display: block;
}

body.cl-theme .cl-cat__name {
    display: block;
    font-family: var(--cl-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cl-ink);
    transition: color 0.2s ease;
}

body.cl-theme .cl-cat:hover .cl-cat__name {
    color: var(--cl-green);
}

/* CoreLab Journal — keylined white story cards on the grey canvas. */
body.cl-theme .cl-journal {
    background: var(--cl-canvas);
}

body.cl-theme .cl-story {
    display: flex;
    flex-direction: column;
    background: var(--cl-white);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.cl-theme .cl-story:hover {
    border-color: var(--cl-line-strong);
    box-shadow: var(--cl-shadow);
}

body.cl-theme .cl-story__media {
    border-radius: 0;
    aspect-ratio: 16 / 10;
}

body.cl-theme .cl-story__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem;
}

body.cl-theme .cl-story__label {
    font-family: var(--cl-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-soft);
    margin-bottom: 0.6rem;
}

body.cl-theme .cl-story__title {
    font-family: var(--cl-font-head);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

body.cl-theme .cl-story__excerpt {
    color: var(--cl-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

body.cl-theme .cl-story__link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--cl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cl-green);
    text-decoration: none;
}

body.cl-theme .cl-story__link:hover {
    color: var(--cl-green-deep);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

/* The Build Log — centered newsletter band on the white surface layer. */
body.cl-theme .cl-cta {
    background: var(--cl-white);
    border-top: 1px solid var(--cl-line);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

body.cl-theme .cl-cta__title {
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    color: var(--cl-ink);
}

body.cl-theme .cl-cta__body {
    color: var(--cl-muted);
    max-width: 34rem;
    font-size: 1rem;
}

body.cl-theme .cl-cta__form {
    display: flex;
    gap: 0.5rem;
    max-width: 30rem;
}

body.cl-theme .cl-cta__form input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--cl-band);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    color: var(--cl-ink);
    padding: 0.85rem 1.1rem;
    font-size: 0.92rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

body.cl-theme .cl-cta__form input:focus {
    outline: none;
    background: var(--cl-white);
    border-color: var(--cl-circuit);
    box-shadow: 0 0 0 0.2rem rgba(var(--cl-green-rgb), 0.14);
}

body.cl-theme .cl-cta__btn {
    background: var(--cl-green);
    color: #fff;
    border: 0;
    border-radius: var(--cl-radius);
    padding: 0.85rem 2rem;
    font-family: var(--cl-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.cl-theme .cl-cta__btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

body.cl-theme .cl-cta__note {
    color: var(--cl-soft);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Inherited component finishing — hovers the base points at --ll-accent
   (Circuit Green, only 3.30:1 as text on white) are re-pointed at the deep
   green, and every 4:5 / rounded surface flattens to the 4px language.
   -------------------------------------------------------------------------- */
body.cl-theme .mr-article__media,
body.cl-theme .mr-tile,
body.cl-theme .mr-gallery__main,
body.cl-theme .mr-gallery__thumb,
body.cl-theme .mr-cart-row__media,
body.cl-theme .mr-summary,
body.cl-theme .mr-panel,
body.cl-theme .mr-acct-nav,
body.cl-theme .mr-acct-link,
body.cl-theme .mr-alert {
    border-radius: var(--cl-radius);
}

body.cl-theme .mr-article__title {
    font-family: var(--cl-font-head);
    font-size: 1.15rem;
}

body.cl-theme .mr-article__title a:hover,
body.cl-theme .mr-cart-row__title a:hover,
body.cl-theme .mr-crumbs a:hover,
body.cl-theme .mr-filter__link:hover,
body.cl-theme .mr-ulink:hover {
    color: var(--cl-green);
    border-color: var(--cl-green);
}

body.cl-theme .mr-tabs .nav-link.active {
    color: var(--cl-green);
    border-bottom-color: var(--cl-green);
}

body.cl-theme .mr-brandstrip span {
    font-family: var(--cl-font-head);
    letter-spacing: 0.04em;
}

body.cl-theme .mr-rail-btn:hover {
    background: var(--cl-green);
    border-color: var(--cl-green);
    color: #fff;
}

body.cl-theme .mr-panel,
body.cl-theme .mr-summary {
    border-color: var(--cl-line);
}

/* Category photo tiles on inherited pages keep a carbon scrim rather than the
   base's navy tint. */
body.cl-theme .mr-tile--cat .mr-tile__scrim {
    background: rgba(27, 30, 36, 0.5);
}

body.cl-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--cl-font-head);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Footer — the export's CARBON band. Everything riding on it needs an
   explicit colour: the re-pointed neutrals (--mr-ink #191c1d, --mr-muted
   #5c5e65, --mr-soft #656b76, --bs-primary deep green at 2.50:1 on carbon)
   would all render effectively invisible here.
   -------------------------------------------------------------------------- */
body.cl-theme .mr-footer {
    background: var(--cl-carbon);
    border-top: 0;
    color: var(--cl-on-carbon);
}

body.cl-theme .mr-footer h4 {
    font-family: var(--cl-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-circuit); /* 5.07:1 on carbon */
}

body.cl-theme .mr-footer__brand {
    font-family: var(--cl-font-head);
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
}

body.cl-theme .mr-footer a {
    color: var(--cl-on-carbon); /* 10.37:1 */
    font-size: 0.9rem;
}

body.cl-theme .mr-footer a:hover {
    color: var(--cl-circuit);
    border-color: var(--cl-circuit);
}

body.cl-theme .mr-footer .mr-muted {
    color: var(--cl-on-carbon);
}

body.cl-theme .mr-footer .mr-soft {
    color: var(--cl-on-carbon-soft); /* 6.53:1 */
}

body.cl-theme .mr-footer .mr-divider {
    background-color: rgba(255, 255, 255, 0.12);
}

body.cl-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

body.cl-theme .mr-footer .form-control::placeholder {
    color: var(--cl-on-carbon-soft);
}

body.cl-theme .mr-footer .form-control:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--cl-circuit);
    box-shadow: none;
    color: #fff;
}

/* The footer's stub "Join" button keeps the deep-green fill (white label at
   6.68:1) but gains a Circuit-Green keyline: the fill alone is 2.50:1 against
   the carbon band, i.e. below the 3:1 non-text minimum for the button's own
   boundary. */
body.cl-theme .mr-footer .mr-btn--primary {
    border-color: var(--cl-circuit);
}

body.cl-theme .mr-social {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: var(--cl-radius);
    color: #fff;
}

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

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cl-theme .mr-card,
    body.cl-theme .mr-promo,
    body.cl-theme .mr-tile,
    body.cl-theme .mr-btn,
    body.cl-theme .cl-cat,
    body.cl-theme .cl-story,
    body.cl-theme .cl-seeall,
    body.cl-theme .cl-build__well {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body.cl-theme .mr-card:hover .mr-card__media img,
    body.cl-theme .mr-tile:hover .mr-tile__img,
    body.cl-theme .mr-tile--cat .mr-tile__media img,
    body.cl-theme .mr-promo:hover .mr-promo__img,
    body.cl-theme .mr-article__media:hover img {
        transform: none !important;
    }
}

/* Mobile (from the Stitch mobile frames): stacked hero with the photo below
   the copy, tighter display sizes, 2-col product grids (the base grids
   already collapse to row-cols-2), stacked newsletter form. */
@media (max-width: 991.98px) {
    body.cl-theme .cl-hero {
        padding: 2rem 0 2.5rem;
    }

    body.cl-theme .cl-hero__title {
        font-size: 1.85rem; /* DESIGN.md headline-lg-mobile 28px + hero scale */
    }

    body.cl-theme .cl-hero__lead {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    body.cl-theme .cl-hero__actions .cl-btn-hero {
        flex: 1 1 auto;
        justify-content: center;
    }

    body.cl-theme .cl-hero__img {
        max-height: 300px;
    }

    body.cl-theme .cl-build__well {
        width: 52px;
        height: 52px;
        margin-bottom: 1rem;
    }

    body.cl-theme .cl-build__icon {
        width: 26px;
        height: 26px;
    }

    body.cl-theme .cl-cat {
        padding: 1.25rem 0.75rem;
    }

    body.cl-theme .cl-cat__icon {
        width: 32px;
        height: 32px;
    }

    body.cl-theme .cl-story__body {
        padding: 1.15rem;
    }

    body.cl-theme .cl-cta__form {
        flex-direction: column;
    }

    body.cl-theme .cl-cta__form input,
    body.cl-theme .cl-cta__btn {
        width: 100%;
    }
}