/* ==========================================================================
   Pulse — high-performance fitness & athletic gear.

   Ported from the Stitch "PULSE | High Performance Gear" design (the
   High-Performance Athletic System DESIGN.md lives at docs/templates/
   stitch_13_pulse_e_commerce_homepage/…/high_performance_athletic_system/):
   off-white canvas broken by immersive ink-black panels, Electric Volt
   (#c8f31d) reserved for CTAs / badges / stat highlights (with the design's
   dark-olive #526600 as the TEXT-safe volt on light surfaces), uppercase
   Poppins 700–900 headlines with tight negative tracking over Inter UI, a
   "machined" 6px corner radius, 2px ink structural strokes and the
   15-degree diagonal-crop signature.

   This theme OWNS the featured / stats / new-arrivals / categories /
   newsletter home sections (ps-* markup) and INHERITS Modern Retail's
   header, functional pages and the hero / trust / promo / brands / journal
   home partials. This stylesheet therefore has two jobs:

     (a) style the NEW `ps-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the off-white/ink palette, machining the
         radii to 6px, and turning the hero / footer into ink panels.

   Everything is scoped under `body.ps-theme` and reads the customizer's
   primary_color, headings_font, body_font and button_radius tokens
   (--bs-primary, --ll-font-headings, --ll-font-body, --ll-btn-radius) with
   theme.json-default fallbacks, so the customizer + live preview keep
   working: change the primary colour and every volt CTA follows. Structural
   ink (--ps-ink) is a deliberate LITERAL, not the accent_color token — see
   its declaration below.
   ========================================================================== */

body.ps-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ps-volt: var(--bs-primary, #c8f31d);
    /* Structural ink, NOT var(--ll-accent, ...). --ps-ink drives body text,
       headings, the header keyline and six full-width bands (announce, hero,
       stats, category band, promo caption, footer) — half of them white-on-
       ink. Piping it through accent_color meant a merchant picking a light
       accent recoloured all of that AND produced white-on-light across six
       surfaces at once. Every other theme keys ink as a literal for the same
       reason; --ll-accent stays available wherever an accent is genuinely
       wanted (no such spot currently exists in this theme). */
    --ps-ink: #0b1c30;
    --ps-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --ps-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* High-Performance Athletic System palette (DESIGN.md + rendered export) */
    --ps-paper: #f4f5f2;      /* body canvas (the export's rendered bg) */
    --ps-white: #ffffff;      /* product-listing stripes */
    --ps-media: #f0f0f0;      /* product media well (template card bg) */
    --ps-olive: #526600;      /* the design's "primary" — text-safe volt */
    --ps-volt-dim: #aed500;   /* primary-fixed-dim — CTA hover */
    --ps-muted: #5b5f64;      /* secondary */
    --ps-soft: #757961;       /* outline */
    --ps-line: #dde0e5;       /* secondary-container — quiet dividers */
    --ps-radius: 0.375rem;    /* the "machined" 6px */

    /* Re-point the inherited base neutrals at the athletic palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--ps-ink);
    --mr-muted: var(--ps-muted);
    --mr-soft: var(--ps-soft);
    --mr-surface: var(--ps-white);
    --mr-band: var(--ps-white);
    --mr-band-alt: var(--ps-paper);
    --mr-fill: var(--ps-media);
    --mr-border: var(--ps-line);
    --mr-border-strong: var(--ps-ink);
    --mr-radius: var(--ps-radius);
    --mr-gold: var(--ps-olive);
    --mr-shadow: none;

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

/* --------------------------------------------------------------------------
   Legibility guard for a LIGHT customizer primary.

   This is the only theme whose primary token is a near-white colour: the
   shared theme-vars block pipes primary_color into --bs-link-color and into
   .btn-primary's background, so Bootstrap's own link + button primaries would
   render Electric Volt as TEXT on the off-white canvas (~1.4:1) and white
   text on a volt fill. The base's markup is all .mr-* so these rarely surface
   — but prose links inside CMS page and blog bodies fall through to
   --bs-link-color. Point the TEXT roles at the design's own text-safe volt
   (--ps-olive #526600, ~7:1 on white) and keep raw volt for FILLS only.
   -------------------------------------------------------------------------- */
body.ps-theme {
    --bs-link-color: var(--ps-olive);
    --bs-link-color-rgb: 82, 102, 0;
    --bs-link-hover-color: var(--ps-ink);
}

body.ps-theme .btn-primary {
    --bs-btn-color: var(--ps-ink);
    --bs-btn-hover-color: var(--ps-ink);
    --bs-btn-active-color: var(--ps-ink);
    --bs-btn-disabled-color: var(--ps-ink);
}

body.ps-theme .btn-outline-primary {
    --bs-btn-color: var(--ps-olive);
    --bs-btn-border-color: var(--ps-olive);
    --bs-btn-hover-color: var(--ps-ink);
}

body.ps-theme .text-primary,
body.ps-theme .link-primary {
    color: var(--ps-olive) !important;
}

/* --------------------------------------------------------------------------
   Legibility guard, continued — every remaining var(--bs-primary) rule in
   the base app.css, checked one by one. Two safe repaints cover all of them:
   TEXT, a small icon, or a BORDER-only indicator on a light surface -> olive
   (--ps-olive #526600 is 6.44:1 on white — clears both the 4.5:1 text and
   3:1 UI-component minimums at once); a FILL that forces #fff text on top ->
   repaint the fill to --ps-ink and keep the white text (17.17:1, the same
   pair the hero/footer/stats band already use). Selectors already handled
   above (--bs-link-color, .btn-primary, .btn-outline-primary, .text-primary,
   .link-primary) or elsewhere in this file (.mr-badge, .mr-card__wish /
   .mr-card__quickview, .mr-social:hover, .mr-page.is-active, and Bootstrap's
   .btn-link which reads --bs-link-color) are NOT repeated here.
   -------------------------------------------------------------------------- */

/* Header search-submit icon hover (live on every page — header.blade.php).
   Icon-as-text on the white sticky bar -> olive. */
body.ps-theme .mr-search button:hover { color: var(--ps-olive); }

/* Cart / account-addresses "Remove" ghost buttons (live — cart.blade.php,
   account-addresses.blade.php). Text only, no fill -> olive. */
body.ps-theme .mr-btn--ghost { color: var(--ps-olive); }

/* Pagination hover (live — shop/category/blog listings via
   pagination.blade.php). Text + border on white -> olive clears both
   minimums; the filled .is-active state is already handled above. */
body.ps-theme .mr-page:hover {
    color: var(--ps-olive);
    border-color: var(--ps-olive);
}

/* Shop sidebar filters (live — category.blade.php). Text on white. */
body.ps-theme .mr-filter__link:hover,
body.ps-theme .mr-filter__link.is-active {
    color: var(--ps-olive);
}

/* PDP tabs (live — product.blade.php). Only the text needs a repaint; its
   border-bottom-color already reads --ll-accent, which resolves to ink. */
body.ps-theme .mr-tabs .nav-link.active { color: var(--ps-olive); }

/* PDP + quick-view active gallery thumbnail (live — product.blade.php,
   quick-view-body.blade.php). Border only, no text riding on it, so the 3:1
   UI-component minimum applies rather than 4.5:1 — ink per the brief, for a
   clearly "selected" edge against the white frame. */
body.ps-theme .mr-gallery__thumb.is-active { border-color: var(--ps-ink); }

/* Checkout progress rail (live — checkout-steps.blade.php). The connector
   line is a plain decorative fill with no text riding on it -> ink (volt on
   white here would read ~1.4:1, essentially invisible). The "done" dot is a
   FILL that forces #fff -> ink keeps the numeral legible; the "current" dot
   is an UNFILLED outline with the step number as its own text -> olive, the
   same text+border pattern as the pagination/filter links above. */
body.ps-theme .mr-step.is-done::before,
body.ps-theme .mr-step.is-current::before {
    background: var(--ps-ink);
}
body.ps-theme .mr-step.is-done .mr-step__dot {
    background: var(--ps-ink);
    border-color: var(--ps-ink);
    color: #fff;
}
body.ps-theme .mr-step.is-current .mr-step__dot {
    border-color: var(--ps-olive);
    color: var(--ps-olive);
}

/* Account sidebar (live — account-sidebar.blade.php). The avatar is a FILL
   forcing #fff initials -> ink; hover is text on white -> olive; .is-active
   is a FILL forcing #fff -> ink. */
body.ps-theme .mr-acct-avatar {
    background: var(--ps-ink);
    color: #fff;
}
body.ps-theme .mr-acct-link:hover { color: var(--ps-olive); }
body.ps-theme .mr-acct-link.is-active {
    background: var(--ps-ink);
    color: #fff;
}

/* Defensive only — neither selector below currently renders in pulse's DOM.
   .mr-rail-btn lives exclusively in the base partials/home/featured.blade.php
   (no rail nav in this theme's own ps-featured grid); .mr-cta / .mr-btn--light
   live exclusively in the base partials/home/newsletter.blade.php (this
   theme's newsletter band is .ps-cta, not .mr-cta). Guarded anyway, same
   reasoning as the --bs-link-color prose-link guard above: cheap insurance
   against a future edit that re-exposes either base markup. */
body.ps-theme .mr-rail-btn:hover {
    background: var(--ps-ink);
    border-color: var(--ps-ink);
    color: #fff;
}
body.ps-theme .mr-cta { background-color: var(--ps-ink); }
body.ps-theme .mr-btn--light { color: var(--ps-olive); }

/* --------------------------------------------------------------------------
   Shape discipline — the machined 6px system. No hard flatten (this design
   is "Precision-Crafted", not sharp): cards, media, inputs and buttons all
   take the same 6px; the round overlay controls stay circular.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-card,
body.ps-theme .mr-card__media,
body.ps-theme .mr-promo,
body.ps-theme .mr-promo__img,
body.ps-theme .mr-tile,
body.ps-theme .mr-article__media,
body.ps-theme .mr-article__media img,
body.ps-theme .mr-gallery__main,
body.ps-theme .mr-gallery__thumb,
body.ps-theme .form-control,
body.ps-theme .form-select,
body.ps-theme .mr-btn {
    border-radius: var(--ps-radius);
}

body.ps-theme .mr-card__badge,
body.ps-theme .mr-badge {
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Typography — uppercase Poppins poster headlines, sports-broadcast tight
   tracking; eyebrows are small, bold and tracked out ("technical" labels).
   -------------------------------------------------------------------------- */
body.ps-theme h1, body.ps-theme h2, body.ps-theme h3,
body.ps-theme h4, body.ps-theme h5, body.ps-theme h6,
body.ps-theme .mr-display, body.ps-theme .mr-headline {
    font-family: var(--ps-font-head);
    color: var(--ps-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

body.ps-theme .ps-display {
    font-weight: 800;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    letter-spacing: -0.03em;
}

body.ps-theme .mr-eyebrow {
    font-family: var(--ps-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ps-olive);
}

/* Tracked keyline link (the template's olive "View All" underline) */
body.ps-theme .ps-keyline-link {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-olive);
    text-decoration: none;
    border-bottom: 2px solid var(--ps-olive);
    padding-bottom: 0.3rem;
}

body.ps-theme .ps-keyline-link:hover { color: var(--ps-ink); border-color: var(--ps-ink); }

/* --------------------------------------------------------------------------
   Buttons — volt primary with ink text (Poppins bold uppercase, 6px, no
   shadow; hover darkens the lime and lifts -2px per the export), 2px-ink
   ghost secondary, white-frame on-dark hero secondary.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-btn {
    font-family: var(--ps-font-head);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        transform 0.2s ease;
}

body.ps-theme .mr-btn--primary {
    background: var(--ps-volt);
    border-color: var(--ps-volt);
    color: var(--ps-ink);
}

body.ps-theme .mr-btn--primary:hover {
    filter: none;
    background: var(--ps-volt-dim);
    border-color: var(--ps-volt-dim);
    color: var(--ps-ink);
    transform: translateY(-2px);
}

body.ps-theme .mr-btn--outline {
    border: 2px solid var(--ps-ink);
    color: var(--ps-ink);
    background: transparent;
}

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

body.ps-theme .mr-btn--on-dark {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
}

body.ps-theme .mr-btn--on-dark:hover { background: #fff; color: var(--ps-ink); }

/* Inputs — 6px corners, quiet 1px frame; focus thickens to ink (DESIGN.md). */
body.ps-theme .form-control,
body.ps-theme .form-select {
    border: 1px solid #d1d5db;
    background-color: #fff;
}

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

/* Bootstrap reserves the right padding for the select caret — never a
   shorthand here (recurring platform bug). */
body.ps-theme .form-select { padding-inline-end: 2.25rem; }

/* --------------------------------------------------------------------------
   Announce + header — ink announcement strip; white sticky bar closed by a
   2px ink keyline; heavy uppercase wordmark; shouted Inter-bold nav.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-announce {
    background: var(--ps-ink);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.ps-theme .mr-header {
    background: #fff;
    border-bottom: 2px solid var(--ps-ink);
}

body.ps-theme .mr-logo {
    font-family: var(--ps-font-head);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--ps-ink);
}

body.ps-theme .mr-nav-link {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ps-ink);
}

body.ps-theme .mr-nav-link:hover { color: var(--ps-olive); }
body.ps-theme .mr-nav-link.is-active { color: var(--ps-olive); border-bottom: 2px solid var(--ps-olive); }

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

body.ps-theme .mr-badge { background: var(--ps-volt); color: var(--ps-ink); font-weight: 700; }

body.ps-theme .mr-search input {
    border: 1px solid #d1d5db;
    border-radius: var(--ps-radius);
    background: #fff;
}

body.ps-theme .mr-search input:focus { border-color: var(--ps-ink); box-shadow: none; }

body.ps-theme .dropdown-menu { border: 2px solid var(--ps-ink); border-radius: var(--ps-radius); }

/* --------------------------------------------------------------------------
   Hero (inherited markup) — the immersive ink stadium panel: photo dimmed
   to 60% over ink, volt eyebrow BADGE chip, colossal stacked uppercase
   headline, volt-keyline sub copy, volt + white-ghost CTAs.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-hero {
    background: var(--ps-ink);
    min-height: clamp(520px, 72vh, 870px);
}

body.ps-theme .mr-hero__img { opacity: 0.6; }

/* The base overlay is the ONLY guarantee the white <h1> stays readable over
   an arbitrary merchant photo — `background: none` left the headline resting
   on nothing but the dimmed photo, which composites to ~#9da4ac for a bright
   source image (white text 2.52:1, fails). Left-weighted ink wash instead of
   the base's black one, so the "immersive stadium" look survives: at the .78
   stop (where the copy sits, max-width 12ch / 600px) contrast is ~10.9:1
   against that same worst-case bright photo; even at the .40 floor (100%,
   past where any copy reaches) it never drops below ~5.2:1 — comfortably
   clears 4.5:1 everywhere the gradient runs. */
body.ps-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(11, 28, 48, 0.78) 0%, rgba(11, 28, 48, 0.55) 45%, rgba(11, 28, 48, 0.4) 100%);
}

body.ps-theme .mr-hero__copy .mr-eyebrow {
    display: inline-block;
    background: var(--ps-volt);
    color: var(--ps-ink);
    font-family: var(--ps-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0.3rem 0.8rem;
    margin-bottom: 1.25rem;
}

body.ps-theme .mr-hero__copy h1 {
    font-weight: 800;
    font-size: clamp(3rem, 7vw, 6.25rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #fff;
    max-width: 12ch;
}

body.ps-theme .mr-hero__copy p {
    border-left: 4px solid var(--ps-volt);
    padding-left: 1.5rem;
    margin-block: 1.5rem 2.25rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited) — icons in the text-safe volt, tight uppercase
   labels on the white stripe.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-trust svg { color: var(--ps-olive); }

body.ps-theme .mr-trust strong {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.ps-theme .mr-trust span { font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   Promo tiles (inherited markup) — tall athletic imagery with the solid ink
   caption bar pinned to the bottom edge; the media takes the signature
   15-degree diagonal crop so the photo "drives" into the bar.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-promo { border-radius: var(--ps-radius); background: var(--ps-ink); }

body.ps-theme .mr-promo__img {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    border-radius: 0;
}

body.ps-theme .mr-promo__scrim { background: none; }

body.ps-theme .mr-promo__cap {
    top: auto;
    bottom: 0;
    inset-inline: 0;
    background: var(--ps-ink);
    padding: 1rem 1.25rem;
}

body.ps-theme .mr-promo__title {
    font-family: var(--ps-font-head);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
}

body.ps-theme .mr-promo__cta {
    color: var(--ps-volt);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--ps-volt);
}

/* app.css:489 `.mr-promo:hover .mr-promo__cta` (specificity 0,0,3,0) beats
   the rest-state rule above (0,0,2,1) and shifts the CTA to --ll-accent —
   which for this theme is ink, identical to the caption bar behind it
   (1.00:1, invisible). Reassert volt on hover so the label + underline never
   disappear; needs body.ps-theme in the selector to out-specify app.css. */
body.ps-theme .mr-promo:hover .mr-promo__cta {
    color: var(--ps-volt);
    border-color: var(--ps-volt);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white card on the paper bands, 6px
   machined corners, gray media well, Poppins-bold name, Inter-bold price.
   The card gains a background, so its text is inset (recurring gotcha).
   -------------------------------------------------------------------------- */
body.ps-theme .ps-featured { background: var(--ps-white); }

body.ps-theme .mr-card {
    background: #fff;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.ps-theme .mr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 28, 48, 0.12);
}

body.ps-theme .mr-card__media {
    background: var(--ps-media);
    border-radius: var(--ps-radius) var(--ps-radius) 0 0;
    margin-bottom: 0.9rem;
}

/* Text block inside the card (media is full-bleed, copy is padded) */
body.ps-theme .mr-card > p,
body.ps-theme .mr-card > h3 { padding-inline: 1rem; }
body.ps-theme .mr-card > *:last-child { padding-bottom: 1.1rem; }

body.ps-theme .mr-card__eyebrow {
    color: var(--ps-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

body.ps-theme .mr-card__title,
body.ps-theme .mr-card__title a {
    font-family: var(--ps-font-head);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ps-ink);
}

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

body.ps-theme .mr-card__price {
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--ps-ink);
}

/* Sale/demo sticker — the template's volt SALE chip (2px radius, Poppins). */
body.ps-theme .mr-card__badge {
    background: var(--ps-volt);
    color: var(--ps-ink);
    font-family: var(--ps-font-head);
    font-weight: 700;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Both round overlay controls together, both states (recurring gotcha):
   white chip + ink glyph at rest; ink chip + white glyph on hover — volt is
   a light primary and would wash the icon out. */
body.ps-theme .mr-card__wish,
body.ps-theme .mr-card__quickview {
    background: rgba(255, 255, 255, 0.92);
    color: var(--ps-ink);
}

body.ps-theme .mr-card__wish.is-active,
body.ps-theme .mr-card__wish:hover,
body.ps-theme .mr-card__quickview:hover {
    background: var(--ps-ink);
    color: #fff;
}

/* Slide-up quick add — ink bar, volt label. */
body.ps-theme .mr-card__quick {
    background: var(--ps-ink);
    color: var(--ps-volt);
    font-family: var(--ps-font-head);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Performance stats — the pulse-only ink band: volt Poppins-black values
   over tracked-out dim labels.
   -------------------------------------------------------------------------- */
body.ps-theme .ps-stats {
    background: var(--ps-ink);
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

body.ps-theme .ps-stats__item { display: grid; gap: 0.5rem; }

body.ps-theme .ps-stats__value {
    font-family: var(--ps-font-head);
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3rem);
    letter-spacing: -0.04em;
    color: var(--ps-volt);
}

body.ps-theme .ps-stats__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   Just Landed — heading with the template's thick ink rule growing across
   the row; the band sits on the paper canvas.
   -------------------------------------------------------------------------- */
body.ps-theme .ps-landed__rule { height: 4px; background: var(--ps-ink); }

/* --------------------------------------------------------------------------
   Category band — full-bleed gapless 4-up strip: dark imagery, ink scrim,
   centered shouted-white labels, hairline white seams.
   -------------------------------------------------------------------------- */
body.ps-theme .ps-catband__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

body.ps-theme .ps-catband__cell {
    position: relative;
    display: block;
    height: clamp(260px, 28vw, 400px);
    overflow: hidden;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--ps-ink);
}

body.ps-theme .ps-catband__grid > :last-child { border-right: 0; }

body.ps-theme .ps-catband__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

body.ps-theme .ps-catband__cell:hover .ps-catband__img { transform: scale(1.1); }

body.ps-theme .ps-catband__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #16283e 0%, var(--ps-ink) 60%);
}

body.ps-theme .ps-catband__scrim {
    position: absolute;
    inset: 0;
    background: rgba(11, 28, 48, 0.4);
    transition: background 0.3s ease;
}

body.ps-theme .ps-catband__cell:hover .ps-catband__scrim { background: rgba(11, 28, 48, 0.2); }

body.ps-theme .ps-catband__cap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ps-font-head);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Journal (inherited) — machined media corners; volt-family category chips
   stay text-safe olive; underlined read-more keyline.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-article__title,
body.ps-theme .mr-article__title a {
    font-family: var(--ps-font-head);
    text-transform: none;
    letter-spacing: -0.01em;
}

body.ps-theme .mr-ulink {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ps-ink);
    border-bottom: 1px solid var(--ps-ink);
}

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

/* --------------------------------------------------------------------------
   Newsletter — the full-width Electric Volt "GET THE DROP FIRST" band:
   colossal centered ink headline, shouted sub-line, boxed input + ink
   SIGN UP button.
   -------------------------------------------------------------------------- */
body.ps-theme .ps-cta {
    background: var(--ps-volt);
    padding-block: clamp(4rem, 8vw, 6rem);
}

body.ps-theme .ps-cta__eyebrow {
    color: var(--ps-ink);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.ps-theme .ps-cta__title {
    color: var(--ps-ink);
    font-weight: 900;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

body.ps-theme .ps-cta__body {
    color: #3d4d00; /* on-primary-fixed-variant — legible bold olive on volt */
    font-family: var(--ps-font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.ps-theme .ps-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 42rem;
}

body.ps-theme .ps-cta__form input {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 2px solid var(--ps-ink);
    border-radius: var(--ps-radius);
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ps-ink);
}

body.ps-theme .ps-cta__form input::placeholder { color: var(--ps-soft); }
body.ps-theme .ps-cta__form input:focus { outline: none; border-color: var(--ps-ink); }

body.ps-theme .ps-cta__btn {
    background: var(--ps-ink);
    color: #fff;
    border: 2px solid var(--ps-ink);
    border-radius: var(--ll-btn-radius, 0.375rem);
    padding: 1rem 3rem;
    font-family: var(--ps-font-head);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.ps-theme .ps-cta__note { color: rgba(11, 28, 48, 0.7); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   Footer (inherited) — the template's ink basement: volt-lit wordmark,
   dim white link columns, volt hover.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-footer {
    background: var(--ps-ink);
    color: rgba(255, 255, 255, 0.75);
}

body.ps-theme .mr-footer h4 {
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
}

body.ps-theme .mr-footer a { color: rgba(255, 255, 255, 0.7); }
body.ps-theme .mr-footer a:hover { color: var(--ps-volt); }

body.ps-theme .mr-footer__brand {
    font-family: var(--ps-font-head);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: var(--ps-volt);
}

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

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

body.ps-theme .mr-social {
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
}

body.ps-theme .mr-social:hover { background: var(--ps-volt); border-color: var(--ps-volt); color: var(--ps-ink); }

body.ps-theme .mr-footer .mr-btn--primary { background: var(--ps-volt); border-color: var(--ps-volt); color: var(--ps-ink); }
body.ps-theme .mr-footer .form-control { border-color: transparent; }

/* --------------------------------------------------------------------------
   Inherited chrome finishing — tiles, pagination, quick-view.
   -------------------------------------------------------------------------- */
body.ps-theme .mr-tile { background: var(--ps-media); }

body.ps-theme .mr-page { border-radius: var(--ps-radius); }
body.ps-theme .mr-page.is-active { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }

body.ps-theme .mr-quickview .modal-content { border-radius: var(--ps-radius); border: 2px solid var(--ps-ink); }

/* --------------------------------------------------------------------------
   Motion discipline — drop the decorative lifts and image zooms.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ps-theme .mr-btn,
    body.ps-theme .mr-card,
    body.ps-theme .ps-catband__img,
    body.ps-theme .ps-catband__scrim {
        transition: none;
    }

    body.ps-theme .mr-btn--primary:hover,
    body.ps-theme .mr-card:hover { transform: none; }

    body.ps-theme .ps-catband__cell:hover .ps-catband__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): the poster headline scales down,
   the category band stacks 2-up, the CTA form goes vertical.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.ps-theme .mr-hero__copy h1 { font-size: clamp(2.6rem, 11vw, 4rem); }
    body.ps-theme .ps-catband__grid { grid-template-columns: repeat(2, 1fr); }
    body.ps-theme .ps-catband__cell { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    body.ps-theme .ps-stats { padding-block: 3rem; }
}

@media (max-width: 575.98px) {
    body.ps-theme .ps-cta__form { flex-direction: column; }
    body.ps-theme .ps-cta__btn { width: 100%; }
    body.ps-theme .ps-landed__head { flex-wrap: wrap; }
}