/* ==========================================================================
   Paws & Whiskers — warm pet-commerce storefront.

   Ported from the Stitch "Paws & Whiskers" design (the Warm Pet Commerce
   design system lives at docs/templates/stitch_15_paws_whiskers_e_commerce_
   store/…/DESIGN.md): a soft-sand paper canvas, a friendly teal for actions
   and structure, an energetic coral reserved for pop-moments (Sale badges,
   the Subscribe button), Poppins 600 headlines over Source Sans 3 body,
   fully pill-shaped buttons, 16px-rounded white cards and perfectly circular
   species tiles.

   This theme OWNS the hero / shop-by-pet (new) / featured / new-arrivals /
   categories / newsletter home sections (pw-* markup) and INHERITS Modern
   Retail's header, functional pages (product, category, cart, checkout,
   account, search, blog…) and the trust / promo / journal / brands home
   partials. This stylesheet therefore has two jobs:

     (a) style the NEW `pw-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the sand palette, rounding cards/inputs to
         the 16px/12px/pill shape language, and fixing every place the base
         renders the brand colours AS TEXT (see the CONTRAST section below).

   Everything is scoped under `body.pw-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: change the primary colour and
   every teal surface follows.

   ---------------------------------------------------------------------------
   CONTRAST — measured, and acted on (do not "simplify" these back to raw
   tokens without re-checking the ratios; all figures via the repo's own
   App\Support\Theming\ContrastChecker):

     · Teal #0e8f8a on the sand canvas #fdf8f0  =  3.74:1 — FAILS WCAG AA for
       normal text (needs 4.5:1), but PASSES the 3:1 threshold for large/bold
       display type (the section H2s below are 32-48px/700, comfortably
       "large text") and for icons/UI components (3:1). So: raw teal is used
       for big section headings and as a plain (unlabelled) icon/keyline
       colour ONLY. A darker sibling, --pw-teal-ink #006763 (6.37:1 on sand,
       6.73:1 on white), carries every small TEXT role: links, eyebrows,
       --bs-link-color, .mr-ulink, nav hover, "View All" links, product
       prices, breadcrumb/tab hovers, pagination/filter/account states.
     · Raw teal is NOT safe as a FILL when white button/label text sits on
       top of it: white-on-#0e8f8a measures 3.95:1 (fails 4.5:1 — the CTA
       label sizes here, 0.72-0.78rem, are well under WCAG's "large text"
       bold threshold of ~18.66px, so 3:1 does not apply). Every fill that
       carries default white text (primary buttons, the announce bar, the
       card quick-add bar, filled pagination/account/step states, the
       newsletter band) uses --pw-teal-ink instead — white-on-#006763 is
       6.73:1, comfortably safe, and still unambiguously reads as "teal".
     · Coral #ff6f61 is lighter still. White text on it measures ~2.6:1 and
       even as an icon glyph on a near-white circle it is ~2.73:1 — BELOW the
       3:1 icon floor. So coral is used ONLY as a FILL (Sale badge, the
       newsletter Subscribe button), paired with dark ink (#2d2d2d) text,
       which measures ~5.0:1 on coral — comfortably safe. Coral never
       appears as text or as a small icon glyph on a light background
       (the wishlist "active" heart, which DESIGN.md assigns coral, uses
       teal-ink instead for exactly this reason — see the product-card
       section below).
   ========================================================================== */

body.pw-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --pw-teal: var(--bs-primary, #0e8f8a);
    --pw-teal-rgb: var(--bs-primary-rgb, 14, 143, 138);
    --pw-coral: var(--ll-accent, #ff6f61);
    --pw-radius: var(--ll-btn-radius, 2rem);
    --pw-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --pw-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Text-safe teal sibling — FIXED, independent of the customizer token.
       See the CONTRAST note above; #006763 measures 6.37:1 on the sand
       canvas vs raw teal's 3.74:1. */
    --pw-teal-ink: #006763;

    /* Warm Pet Commerce palette (DESIGN.md) */
    --pw-ink: #2d2d2d;
    --pw-muted: #52605d;
    --pw-soft: #6d7978;
    --pw-sand: #fdf8f0;
    --pw-white: #ffffff;
    --pw-band: #f6f1e6;
    --pw-band-alt: #f2ece0;
    --pw-fill: #ece5d5;
    --pw-border: #e8e1d2;
    --pw-border-strong: #d8cdb4;

    /* Re-point the inherited base neutrals at the sand palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows —
       this single block restyles all ~24 inherited pages. */
    --mr-ink: var(--pw-ink);
    --mr-muted: var(--pw-muted);
    --mr-soft: var(--pw-soft);
    --mr-surface: var(--pw-sand);
    --mr-band: var(--pw-band);
    --mr-band-alt: var(--pw-band-alt);
    --mr-fill: var(--pw-fill);
    --mr-border: var(--pw-border);
    --mr-border-strong: var(--pw-border-strong);
    --mr-radius: 1rem; /* DESIGN.md prose: cards standardize on 16px */
    --mr-gold: var(--pw-coral);
    /* DESIGN.md: "Color: #0E8F8A at 8% opacity, Blur: 20px, Offset-Y: 10px" */
    --mr-shadow: 0 10px 20px rgba(var(--pw-teal-rgb), 0.08);

    /* Bootstrap's own link colour token — pipes into shared components
       platform-wide (CLAUDE.md/gotchas: never leave this on the raw,
       text-failing primary). Bootstrap 5.3's `a` rule actually reads
       --bs-link-color-RGB (`color: rgba(var(--bs-link-color-rgb), ...)`),
       not --bs-link-color directly — theme-vars.blade.php never sets the rgb
       triplet, so without this line bare anchors (CMS pages, blog-post body
       copy, the quick-view "Category" link) fall through to Bootstrap's
       factory blue. Triplet is --pw-teal-ink (#006763) = 0, 103, 99. */
    --bs-link-color: var(--pw-teal-ink);
    --bs-link-color-rgb: 0, 103, 99;

    background-color: var(--pw-sand);
    color: var(--pw-ink);
    font-family: var(--pw-font-body);
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — Poppins 600 authority. Section H2s ("Most Loved", "Shop by
   Pet"…) render in raw teal per the export (text-primary on every H2) — safe
   because .mr-display is always large+bold. Page H1s (Cart, Checkout,
   Account, Category — .mr-display too, but on the <h1> element) stay ink:
   the export's own category screen renders "Dog Essentials" in ink, so a
   blanket h1 recolour would be WRONG for those pages even though it would
   also affect the one PDP screen that does show a teal h1 (accepted
   deviation — see the report).
   -------------------------------------------------------------------------- */
body.pw-theme h1, body.pw-theme h2, body.pw-theme h3,
body.pw-theme h4, body.pw-theme h5, body.pw-theme h6,
body.pw-theme .mr-display {
    font-family: var(--pw-font-head);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.pw-theme h2.mr-display {
    color: var(--pw-teal);
}

body.pw-theme .mr-eyebrow {
    font-family: var(--pw-font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--pw-teal-ink);
}

body.pw-theme .pw-eyebrow--on-dark { color: rgba(255, 255, 255, 0.85); }

body.pw-theme .pw-section-lead {
    color: var(--pw-muted);
    font-size: 1rem;
}

/* Bare anchors (CMS page + blog-post body copy, the quick-view "Category"
   link) have no .mr-* class to catch them, so they fall through to
   --bs-link-color — reasserted here as belt-and-suspenders alongside the
   --bs-link-color-rgb fix above (oud-noir's pattern). Hover darkens to ink
   rather than the accent: coral is never text (see the CONTRAST note). */
body.pw-theme a { color: var(--pw-teal-ink); }
body.pw-theme a:hover { color: var(--pw-ink); }

/* --------------------------------------------------------------------------
   Buttons — fully pill-shaped, teal fill primary, teal-keyline outline/ghost.
   -------------------------------------------------------------------------- */
body.pw-theme .mr-btn {
    border-radius: var(--pw-radius);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Fill is --pw-teal-ink, NOT raw teal: the base's inherited label colour is
   #fff (app.css:87), and white-on-#0e8f8a is 3.95:1 (fails 4.5:1 — see the
   CONTRAST note). White-on-#006763 is 6.73:1. This is the hero CTA, Add to
   Cart, Sign in and Place Order — the shadow keeps the lighter --pw-teal-rgb
   tint so the button still visibly "glows" teal. */
body.pw-theme .mr-btn--primary {
    background: var(--pw-teal-ink);
    border-color: var(--pw-teal-ink);
    box-shadow: 0 10px 20px rgba(var(--pw-teal-rgb), 0.18);
}

body.pw-theme .mr-btn--primary:hover {
    filter: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(var(--pw-teal-rgb), 0.24);
}

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

/* Hover fills solid — same white-on-raw-teal failure as primary above, same
   fix: fill + border swap to --pw-teal-ink so the edge doesn't leave a
   lighter raw-teal seam against the darker fill. */
body.pw-theme .mr-btn--outline:hover {
    background: var(--pw-teal-ink);
    border-color: var(--pw-teal-ink);
    color: #fff;
}

/* Text-only "Remove" control (cart + account-addresses) — base prints raw
   teal (3.74:1 on the sand canvas, fails 4.5:1). */
body.pw-theme .mr-btn--ghost { color: var(--pw-teal-ink); }

/* --------------------------------------------------------------------------
   Bootstrap's own `.btn-primary` (the shared reviews.blade.php "Submit
   review" button — NOT a .mr-btn, so it reads the --bs-btn-* state vars
   Bootstrap 5.3 defines, not plain background/color). theme-vars.blade.php
   sets --bs-btn-bg to the raw customizer primary but never touches
   --bs-btn-color, which stays Bootstrap's compiled #fff -> the same
   3.95:1 failure as .mr-btn--primary above. Unlike pulse's equivalent guard
   (which keeps its light bg and darkens only the text, because its ink token
   has enough contrast against a near-white primary), NEITHER white (3.95:1)
   NOR this theme's --pw-ink (3.49:1) NOR --pw-teal-ink-as-text (1.70:1 — two
   dark teals against each other) clears 4.5:1 against the raw teal fill; only
   near-black text would. So the fill moves to --pw-teal-ink here too, same as
   every other primary CTA (6.73:1), and the color vars are reasserted
   explicitly rather than left to Bootstrap's compiled default. */
body.pw-theme .btn-primary {
    --bs-btn-bg: var(--pw-teal-ink);
    --bs-btn-border-color: var(--pw-teal-ink);
    --bs-btn-hover-bg: var(--pw-teal-ink);
    --bs-btn-hover-border-color: var(--pw-teal-ink);
    --bs-btn-active-bg: var(--pw-teal-ink);
    --bs-btn-active-border-color: var(--pw-teal-ink);
    --bs-btn-disabled-bg: var(--pw-teal-ink);
    --bs-btn-disabled-border-color: var(--pw-teal-ink);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

body.pw-theme .pw-btn-pill { padding: 1.05rem 2.5rem; font-size: 1rem; }

/* Teal ghost-outline pill — the hero's secondary "Shop Cats" action; mirrors
   the export's subtle hover:bg-primary/5 tint instead of a hard fill-swap. */
body.pw-theme .pw-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.05rem - 2px) calc(2.5rem - 2px);
    border: 2px solid var(--pw-teal);
    border-radius: var(--pw-radius);
    color: var(--pw-teal-ink);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.pw-theme .pw-btn-ghost:hover {
    background: rgba(var(--pw-teal-rgb), 0.08);
    transform: translateY(-2px);
}

/* "View All" text links (Most Loved / New Arrivals) — bold teal-ink, per the
   export's text-primary font-bold hover:underline. */
body.pw-theme .pw-view-all {
    color: var(--pw-teal-ink);
    font-weight: 700;
    text-decoration: none;
}

body.pw-theme .pw-view-all:hover { text-decoration: underline; }

body.pw-theme .mr-ulink { color: var(--pw-teal-ink); border-color: currentColor; }
body.pw-theme .mr-ulink:hover { color: var(--pw-ink); border-color: var(--pw-ink); }

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md: soft sand fill, no border by default, teal border +
   12px radius on focus. NEVER a padding shorthand on .form-select (eats
   Bootstrap's 2.25rem caret gutter — the base already restores it via
   padding-inline-end, which this rule does not touch).
   -------------------------------------------------------------------------- */
body.pw-theme .form-control,
body.pw-theme .form-select {
    background-color: var(--pw-sand);
    border-color: transparent;
    border-radius: 0.75rem;
    color: var(--pw-ink);
}

body.pw-theme .form-control:focus,
body.pw-theme .form-select:focus {
    background-color: var(--pw-white);
    border-color: var(--pw-teal);
    box-shadow: 0 0 0 3px rgba(var(--pw-teal-rgb), 0.14);
}

/* Focus-visible ring — app.css:363 outlines with --ll-accent (coral), which
   measures 2.58:1 on the sand canvas / 2.73:1 on a white card, both below
   the 3:1 non-text minimum. --pw-teal-ink clears both (6.37:1 / 6.73:1)
   without losing the "this is focused" affordance. */
body.pw-theme a:focus-visible,
body.pw-theme button:focus-visible,
body.pw-theme input:focus-visible {
    outline-color: var(--pw-teal-ink);
}

/* --------------------------------------------------------------------------
   Announcement + header — inherited logo-left single-row chrome (matches the
   export's structure exactly), restyled in place: no header override needed.
   -------------------------------------------------------------------------- */
/* Fill is --pw-teal-ink, not raw teal: rgba(255,255,255,.95) on #0e8f8a is
   3.71:1 (fails 4.5:1); on #006763 it's 6.22:1. */
body.pw-theme .mr-announce {
    background-color: var(--pw-teal-ink);
    background-image: none;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

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

body.pw-theme .mr-logo {
    font-family: var(--pw-font-head);
    font-weight: 700;
    color: var(--pw-teal-ink);
}

body.pw-theme .mr-nav-link {
    font-family: var(--pw-font-body);
    color: var(--pw-muted);
}

body.pw-theme .mr-nav-link:hover,
body.pw-theme .mr-nav-link.is-active {
    color: var(--pw-teal-ink);
    border-bottom-color: var(--pw-teal-ink);
}

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

body.pw-theme .mr-search input:focus {
    background: var(--pw-white);
    border-color: var(--pw-teal);
}

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

/* Coral fill needs dark ink text, not white (~2.6:1) — see the CONTRAST note. */
body.pw-theme .mr-badge { background-color: var(--pw-coral); color: var(--pw-ink); }

/* --------------------------------------------------------------------------
   Hero — adapted from lumiere's split hero: copy left, warm lifestyle photo
   right in a soft rounded frame. Teal H1 per the export's text-primary.
   -------------------------------------------------------------------------- */
body.pw-theme .pw-hero { padding: clamp(2rem, 5vw, 3.5rem) 0; }

body.pw-theme .pw-hero__title {
    color: var(--pw-teal);
    font-size: clamp(2.25rem, 4.6vw, 3.25rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

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

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

body.pw-theme .pw-hero__figure { position: relative; text-align: center; }

body.pw-theme .pw-hero__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 24px 48px -20px rgba(var(--pw-teal-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   Shop by Pet — paws-whiskers-ONLY child section: circular species tiles
   ringed in teal on hover, ink labels beneath (matches the export exactly).
   -------------------------------------------------------------------------- */
body.pw-theme .pw-pets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

body.pw-theme .pw-pet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

body.pw-theme .pw-pet__circle {
    display: block;
    width: clamp(96px, 10vw, 132px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 4px;
    border: 2px solid transparent;
    overflow: hidden;
    background: var(--pw-band);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

body.pw-theme .pw-pet:hover .pw-pet__circle {
    border-color: var(--pw-teal);
    transform: translateY(-3px);
}

body.pw-theme .pw-pet__circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

body.pw-theme .pw-pet__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pw-band), var(--pw-fill));
}

body.pw-theme .pw-pet__label {
    font-weight: 700;
    color: var(--pw-ink);
}

/* --------------------------------------------------------------------------
   Inherited promo tiles — the "items" default now carries a plain caption
   line (e.g. "Nourishment they'll love") instead of a clickable CTA label,
   so mr-promo__cta is restyled as quiet supporting text: no tracked
   uppercase, no underline, and the base's hover-to-accent swap is
   neutralised (the higher-specificity body.pw-theme prefix beats the base's
   `.mr-promo:hover .mr-promo__cta` rule).
   -------------------------------------------------------------------------- */
body.pw-theme .mr-promo__title { font-weight: 600; }

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

body.pw-theme .mr-promo:hover .mr-promo__cta {
    color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   Essential Categories — white rounded cards with a teal-tinted circular
   image frame, replacing the inherited full-bleed scrim tile. Still fully
   data-driven from $featuredCategories (see the partial) — no static tiles.
   -------------------------------------------------------------------------- */
body.pw-theme .pw-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    height: 100%;
    padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem;
    background: var(--pw-white);
    border-radius: 1.5rem;
    text-decoration: none;
    box-shadow: var(--mr-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.pw-theme .pw-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(var(--pw-teal-rgb), 0.16);
}

body.pw-theme .pw-cat-card__frame {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(var(--pw-teal-rgb), 0.12);
    box-shadow: 0 0 0 4px var(--pw-band);
}

body.pw-theme .pw-cat-card__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

body.pw-theme .pw-cat-card:hover .pw-cat-card__frame img {
    transform: scale(1.08);
}

body.pw-theme .pw-cat-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--pw-band), var(--pw-fill));
}

body.pw-theme .pw-cat-card__label {
    font-family: var(--pw-font-head);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--pw-ink);
}

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — icons in raw teal (structural accent,
   only needs the 3:1 icon floor — 3.74:1 on the sand band clears it).
   -------------------------------------------------------------------------- */
body.pw-theme .mr-trust svg { color: var(--pw-teal); }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white 16px cards, sand media well,
   coral Sale badge with dark ink text, teal price. Applies to home grids AND
   shop / search / related rails since the card partial is shared.
   -------------------------------------------------------------------------- */
body.pw-theme .mr-card {
    background: var(--pw-white);
    border-radius: 1rem;
    padding: 0.85rem 0.85rem 1.15rem;
    box-shadow: var(--mr-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.pw-theme .mr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(var(--pw-teal-rgb), 0.16);
}

body.pw-theme .mr-card__media {
    border-radius: 0.85rem;
    background: var(--pw-band);
}

/* Sale badge — coral FILL with dark ink text (~5.0:1); white-on-coral would
   be ~2.6:1 (see the CONTRAST note). The is_demo grey badge is an inline
   style and wins over this rule, so the two never collide. */
body.pw-theme .mr-card__badge {
    background: var(--pw-coral);
    color: var(--pw-ink);
    font-weight: 700;
    border-radius: 9999px;
}

/* Wish + quickview are SIBLINGS — restyle together, both states. Rest state
   uses teal-ink on the translucent white circle; hover uses the theme's own
   ink-on-surface pair (13:1+, guaranteed safe). The "active" (saved) heart
   uses teal-ink rather than DESIGN.md's literal coral — raw coral on a
   near-white circle measures ~2.73:1, below even the 3:1 icon floor. */
body.pw-theme .mr-card__wish,
body.pw-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--pw-teal-ink);
}

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

body.pw-theme .mr-card__wish.is-active { color: var(--pw-teal-ink); }

/* Fill is --pw-teal-ink, not raw teal — same white-on-raw-teal failure
   (3.95:1) as every other primary fill above; inherited #fff label text is
   6.73:1 on #006763. */
body.pw-theme .mr-card__quick {
    background: var(--pw-teal-ink);
    border-radius: 0;
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0.02em;
}

body.pw-theme .mr-card__title a:hover { color: var(--pw-teal-ink); }

/* Prices render teal per the export's text-primary price-display role. */
body.pw-theme .mr-card__price { color: var(--pw-teal-ink); font-weight: 700; }
body.pw-theme .mr-card__price del { color: var(--pw-soft); }

/* --------------------------------------------------------------------------
   Newsletter — solid teal centered "Join the Pack" band (not the inherited
   2-col copy+image split), coral Subscribe pill with dark ink text.

   Fill is --pw-teal-ink, not raw teal: rgba(255,255,255,.9) __body measured
   3.51:1 on #0e8f8a (fails 4.5:1); on #006763 it's 5.79:1.
   -------------------------------------------------------------------------- */
body.pw-theme .pw-newsletter {
    background: var(--pw-teal-ink);
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}

body.pw-theme .pw-newsletter__title {
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 3rem);
}

body.pw-theme .pw-newsletter__body {
    color: rgba(255, 255, 255, 0.9);
    max-width: 56ch;
    margin-inline: auto;
    font-size: 1.1rem;
    line-height: 1.7;
}

body.pw-theme .pw-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 30rem;
    margin-inline: auto;
}

body.pw-theme .pw-newsletter__form input {
    flex: 1 1 14rem;
    border: 0;
    border-radius: var(--pw-radius);
    padding: 0.95rem 1.5rem;
    color: var(--pw-ink);
    background: #fff;
}

body.pw-theme .pw-newsletter__form input::placeholder { color: var(--pw-soft); }

body.pw-theme .pw-newsletter__form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

body.pw-theme .pw-newsletter__submit {
    border: 0;
    border-radius: var(--pw-radius);
    padding: 0.95rem 2rem;
    background: var(--pw-coral);
    color: var(--pw-ink);
    font-weight: 700;
    cursor: not-allowed; /* stub form — always disabled */
}

/* Alpha bumped .7 -> .8: on the new #006763 fill, .7 measures 4.15:1 (still
   fails 4.5:1); .8 measures 4.94:1. Stays visibly lighter than __body's .9
   to preserve the "small print" hierarchy. */
body.pw-theme .pw-newsletter__note {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Inherited chrome, continued — shop sidebar filters, pagination, account
   sidebar, checkout stepper, cart row title. These render raw teal (as text
   on the sand canvas, 3.74:1) or white-on-raw-teal (as a filled "current /
   done / active" state, 3.95:1) — both fail 4.5:1; the initial teal-ink
   sweep missed them because they live outside the header/card/hero surfaces
   already covered above. Text roles -> --pw-teal-ink (6.37:1 on sand);
   white-on-teal fills -> the --pw-teal-ink fill (6.73:1), same pattern as
   the buttons/announce/quick-add above.
   -------------------------------------------------------------------------- */
body.pw-theme .mr-filter__link:hover,
body.pw-theme .mr-filter__link.is-active {
    color: var(--pw-teal-ink);
}

body.pw-theme .mr-page:hover {
    border-color: var(--pw-teal-ink);
    color: var(--pw-teal-ink);
}

body.pw-theme .mr-page.is-active {
    background: var(--pw-teal-ink);
    border-color: var(--pw-teal-ink);
}

body.pw-theme .mr-acct-avatar { background: var(--pw-teal-ink); }
body.pw-theme .mr-acct-link:hover { color: var(--pw-teal-ink); }
body.pw-theme .mr-acct-link.is-active { background: var(--pw-teal-ink); }

body.pw-theme .mr-step.is-done .mr-step__dot {
    background: var(--pw-teal-ink);
    border-color: var(--pw-teal-ink);
}

body.pw-theme .mr-step.is-current .mr-step__dot {
    border-color: var(--pw-teal-ink);
    color: var(--pw-teal-ink);
}

/* Base renders coral (--ll-accent) as text here (2.73:1 on white) — this
   theme's own rule is that coral never appears as text (see the CONTRAST
   note at the top of this file). */
body.pw-theme .mr-cart-row__title a:hover { color: var(--pw-teal-ink); }

/* --------------------------------------------------------------------------
   Inherited chrome — footer, journal, breadcrumbs, PDP tabs: soften onto the
   sand palette (most of the work is done by the --mr-* re-point above) and
   fix every remaining spot the base renders coral (--ll-accent) as text.
   -------------------------------------------------------------------------- */
body.pw-theme .mr-footer {
    background: var(--pw-band);
    border-top: 0;
}

body.pw-theme .mr-footer__brand { font-family: var(--pw-font-head); color: var(--pw-teal-ink); }
body.pw-theme .mr-footer a:hover { color: var(--pw-teal-ink); }

body.pw-theme .mr-social { border-color: var(--pw-border-strong); color: var(--pw-teal-ink); }
body.pw-theme .mr-social:hover { background: var(--pw-teal); border-color: var(--pw-teal); color: #fff; }

body.pw-theme .mr-article__title a:hover { color: var(--pw-teal-ink); }
body.pw-theme .mr-gallery__thumb { border-radius: 0.6rem; }
body.pw-theme .mr-gallery__thumb.is-active { border-color: var(--pw-teal); }
body.pw-theme .mr-crumbs a:hover { color: var(--pw-teal-ink); }
body.pw-theme .mr-tabs .nav-link.active { color: var(--pw-teal-ink); border-bottom-color: var(--pw-teal-ink); }

/* --------------------------------------------------------------------------
   Respect reduced-motion — neutralise both the transitions AND the hover
   transforms/scales introduced above (a transition:none alone still lets a
   hover transform apply instantly, which is still motion).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.pw-theme .mr-btn,
    body.pw-theme .pw-btn-ghost,
    body.pw-theme .mr-card,
    body.pw-theme .pw-cat-card,
    body.pw-theme .pw-cat-card__frame img,
    body.pw-theme .pw-pet__circle,
    body.pw-theme .mr-card__media img,
    body.pw-theme .mr-promo__img,
    body.pw-theme .mr-tile__img,
    body.pw-theme .mr-article__media img {
        transition: none;
    }

    body.pw-theme .mr-btn--primary:hover,
    body.pw-theme .pw-btn-ghost:hover,
    body.pw-theme .mr-card:hover,
    body.pw-theme .pw-cat-card:hover,
    body.pw-theme .pw-cat-card:hover .pw-cat-card__frame img,
    body.pw-theme .pw-pet:hover .pw-pet__circle,
    body.pw-theme .mr-card:hover .mr-card__media img,
    body.pw-theme .mr-promo:hover .mr-promo__img,
    body.pw-theme .mr-tile:hover .mr-tile__img,
    body.pw-theme .mr-article__media:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frame): smaller hero title, tighter pet
   circles (the mobile frame uses 80px vs the desktop 128px), stacked
   newsletter form.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.pw-theme .pw-hero { padding: 2rem 0 2.5rem; }
    body.pw-theme .pw-hero__title { font-size: 2rem; }
    body.pw-theme .pw-hero__img { aspect-ratio: 4 / 3; }
    body.pw-theme .pw-pets { gap: 1.25rem; }
    body.pw-theme .pw-pet__circle { width: clamp(72px, 20vw, 96px); }
    body.pw-theme .pw-newsletter__form { flex-direction: column; }
    body.pw-theme .pw-newsletter__form input,
    body.pw-theme .pw-newsletter__submit { width: 100%; }
}