/* ==========================================================================
   CarePoint — clinical-trust online pharmacy.

   Ported from the Stitch "CarePoint Pharmacy" design (the Clinical Trust
   Pharmacy design system lives at
   docs/templates/pending/stitch_60_carepoint_e_commerce_design/
   .../clinical_trust_pharmacy/DESIGN.md): a bright Clinical White canvas,
   deep Trust Teal actions, a Sky Blue informational accent, Poppins 600
   headlines over Source Sans 3 body/UI copy, and ONE consistent soft 8px
   corner radius across containers, buttons and inputs (16px reserved for
   promo banners and hero imagery; full pills only for badges and chips).
   Depth is TONAL LAYERS + 1px low-contrast outlines, never heavy shadows —
   the only shadow in the system is the export's own "clinical-shadow"
   (0 4px 12px rgba(15, 118, 110, 0.05)).

   This theme OWNS the hero / featured / pharmacist-cards / new-arrivals /
   journal / newsletter home sections (cp-* markup) and INHERITS Modern
   Retail's header, footer, trust strip, promo tiles, categories, brands and
   every functional page. This stylesheet therefore has two jobs:

     (a) style the NEW `cp-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the clinical-white palette, and drawing the
         Trust-Teal footer + announcement enclosure the export renders (both
         reuse the primary token rather than an uncustomizable 3rd literal,
         so the 5-token customizer stays in full control).

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

   ------------------------------------------------------------------------
   CONTRAST AUDIT (measured with App\Support\Theming\ContrastChecker; canvas
   is the export's Clinical White #f7fafa):

     - primary Trust Teal #005c55 as TEXT on canvas/white/low/band/high:
          7.52 / 7.89 / 7.13 / 6.76 / 6.46   ALL PASS (>= 4.5)
     - white text on primary FILL #005c55:      7.89:1  PASS
     => primary is safe as text AND as a white-text fill everywhere the base
        already uses var(--bs-primary). It is a DARK primary, so none of the
        light-primary trap in references/gotchas.md applies; no -ink sibling
        is needed.

     - accent Sky Blue #00658c as TEXT on canvas/white/low/band/high:
          6.18 / 6.48 / 5.86 / 5.55 / 5.31   ALL PASS
     - white text on accent FILL (SALE badge):   6.48:1  PASS
     => the accent is text-safe raw, so the inherited accent-driven roles
        (.mr-nav-link.is-active, .mr-ulink:hover, .mr-card__title a:hover,
        .mr-crumbs a:hover, .mr-article__title a:hover, focus outlines) all
        stay legible without a darker sibling.

     - re-pointed neutrals, worst measured case across canvas/white/low/
       band/high:
          --cp-ink #181c1d:    >= 14.06:1  PASS
          --cp-muted #3e4947:  >=  7.65:1  PASS
          --cp-soft #5a6462:   >=  5.01:1  PASS (tuned darker than the
                               design system's raw "outline" #6e7977, which
                               measures 4.29:1 on canvas — under 4.5 for the
                               small-text roles like .mr-card__eyebrow. The
                               raw value is kept for --mr-border-strong,
                               which is a LINE, not text.)
          --cp-gold #8a6d1f:   4.67 canvas / 4.90 white  PASS

     - hero (cp-hero) — this design inverts the base: DARK ink copy over a
       LEFT-TO-RIGHT WHITE scrim (the export's from-white/80 via-white/40).
       The left stop is tuned up from the export's 0.80 to 0.94 because the
       scrim is the only thing keeping the ink <h1> readable over an
       arbitrary merchant upload. Composited over a pure-BLACK photo (the
       worst case):
          white@0.94 -> #f0f0f0 : ink 15.07:1, accent eyebrow 5.69:1  PASS
          white@0.86 -> #dbdbdb : ink 12.41:1, accent eyebrow 4.68:1  PASS
       The copy column is capped so it never reaches past the 0.86 stop.
       NEVER `background: none` on this scrim.

     - promo tiles (over the export's teal-tinted scrim, approximated on a
       mid-grey photo):
          white title on teal@0.72:            6.02:1  PASS
          mint caption #9cf2e8 on teal@0.82:   5.15:1  PASS
       The base's `.mr-promo:hover .mr-promo__cta` recolours the caption to
       --ll-accent — Sky Blue on a dark teal scrim is unusable, and that
       base selector is (0,0,3,0) so it BEATS a plain child override. The
       hover DESCENDANT selector is therefore overridden explicitly too.

     - newsletter band (cp-cta) — the export's Sky Blue secondary-container
       fill #67c8ff. On it: its own on-container ink #005373 = 4.54:1 PASS,
       ink #181c1d = 9.23:1 PASS. The Sky Blue ACCENT token (#00658c) is
       only 3.48:1 there, so nothing on this band is painted with the accent;
       body copy uses the band's own ink. The Subscribe button keeps the
       solid teal fill + white label (7.89:1) the export specifies "for high
       contrast".

     - footer (Trust Teal enclosure, bg = primary #005c55):
          white text (full):                   7.89:1  PASS
          link default rgba(255,255,255,.82):  5.88:1  PASS
          link hover -> full white:            7.89:1  PASS

     - product-card overlay controls (.mr-card__wish + .mr-card__quickview)
       on rgba(255,255,255,.85) over the card media well: primary 7.69:1,
       hover ink pair 16.74:1 — both far above the 3:1 UI minimum. Restyled
       TOGETHER per the recurring product-card gotcha.

     - --bs-link-color-rgb is aliased to --bs-primary-rgb so bare <a> tags
       track the customizer instead of Bootstrap-blue — NEVER a bare
       `body.cp-theme a { color: ... }` rule (it would repaint the primary
       CTA's white label; see references/gotchas.md). --bs-btn-color is set
       to #fff on .btn-primary (theme-vars sets --bs-btn-bg only).
   ========================================================================== */

body.cp-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --cp-primary: var(--bs-primary, #005c55);
    --cp-primary-rgb: var(--bs-primary-rgb, 0, 92, 85);
    --cp-accent: var(--ll-accent, #00658c);
    --cp-radius: var(--bs-border-radius, 0.5rem);
    --cp-radius-lg: 1rem;
    --cp-font-head: var(--ll-font-headings, "Poppins"), system-ui, sans-serif;
    --cp-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Clinical-white pharmacy palette (DESIGN.md M3 roles, rendered values) */
    --cp-canvas: #f7fafa;        /* background / surface                        */
    --cp-surface: #ffffff;       /* surface-container-lowest: cards, panels     */
    --cp-low: #f1f4f4;           /* surface-container-low: card media wells     */
    --cp-band: #ebeeee;          /* surface-container: category band            */
    --cp-fill: #e6e9e9;          /* surface-container-high: quiet fills         */
    --cp-border: #dde4e3;        /* outline-variant at the export's ~30% alpha  */
    --cp-border-strong: #6e7977; /* outline: emphasised lines (never text)      */
    --cp-ink: #181c1d;           /* on-surface                                  */
    --cp-muted: #3e4947;         /* on-surface-variant                          */
    --cp-soft: #5a6462;          /* tuned darker than raw "outline" — see audit */
    --cp-gold: #8a6d1f;          /* star ratings — contrast-tuned               */
    --cp-chip: #9cf2e8;          /* primary-fixed: trust/category icon circles  */
    --cp-sky: #67c8ff;           /* secondary-container: newsletter band        */
    --cp-sky-ink: #005373;       /* on-secondary-container                      */
    --cp-shadow-clinical: 0 4px 12px rgba(15, 118, 110, 0.05);

    /* Re-point the inherited base neutrals at the clinical-white palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       follows across shop/PDP/cart/checkout/account/blog. */
    --mr-ink: var(--cp-ink);
    --mr-muted: var(--cp-muted);
    --mr-soft: var(--cp-soft);
    --mr-surface: var(--cp-surface);
    --mr-band: var(--cp-band);
    --mr-band-alt: var(--cp-low);
    --mr-fill: var(--cp-fill);
    --mr-border: var(--cp-border);
    --mr-border-strong: var(--cp-border-strong);
    --mr-radius: 0.5rem;
    --mr-gold: var(--cp-gold);
    --mr-shadow: var(--cp-shadow-clinical);

    /* Bootstrap paints bare <a> via rgba(var(--bs-link-color-rgb),1) — alias
       it to --bs-primary-rgb (already computed by theme-vars) so anchors
       track the customizer without a CTA-clobbering bare-`a` rule. */
    --bs-link-color-rgb: var(--bs-primary-rgb);

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

/* --------------------------------------------------------------------------
   Shape — DESIGN.md "Soft 8px corners across all primary containers, buttons
   and input fields ... large enough to feel approachable and safe (avoiding
   sharp medical edges) but small enough to remain professional". No flatten
   block; the radius system does the work. 16px is reserved for promo banners
   and hero image containers.
   -------------------------------------------------------------------------- */
body.cp-theme .mr-card__media,
body.cp-theme .mr-tile,
body.cp-theme .form-control,
body.cp-theme .form-select,
body.cp-theme .dropdown-menu,
body.cp-theme .mr-panel {
    border-radius: var(--mr-radius);
}

body.cp-theme .mr-promo,
body.cp-theme .mr-promo__img,
body.cp-theme .mr-article__media,
body.cp-theme .mr-article__media img {
    border-radius: var(--cp-radius-lg);
}

/* --------------------------------------------------------------------------
   Typography — Poppins 600 for every headline ("the standard for titles, to
   convey confidence"); Source Sans 3 carries all body copy, UI labels and
   prices. Generous 1.5-1.6 line heights "to prevent cognitive fatigue".
   The eyebrow is the Sky Blue informational accent in wide-tracked Poppins,
   exactly as the export renders "EVERYDAY HEALTH".
   -------------------------------------------------------------------------- */
body.cp-theme h1, body.cp-theme h2, body.cp-theme h3,
body.cp-theme h4, body.cp-theme h5, body.cp-theme h6,
body.cp-theme .mr-display {
    font-family: var(--cp-font-head);
    color: var(--cp-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.cp-theme .mr-display {
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.3;
}

body.cp-theme .mr-headline { font-weight: 600; }

body.cp-theme .mr-eyebrow,
body.cp-theme .cp-eyebrow {
    font-family: var(--cp-font-head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cp-accent);
}

/* --------------------------------------------------------------------------
   Buttons — "primary buttons are solid Trust Teal with white text; secondary
   buttons are Sky Blue or outlined teal" (DESIGN.md "Components"). Sentence
   case, not the base's uppercase editorial cut.
   -------------------------------------------------------------------------- */
body.cp-theme .mr-btn {
    font-family: var(--cp-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body.cp-theme .mr-btn--outline {
    border-width: 2px;
    color: var(--cp-primary);
}

body.cp-theme .mr-btn--primary:hover {
    filter: none;
    background-color: #0f766e; /* the export's primary-container hover */
    color: #fff;
}

/* Bootstrap's own .btn-primary (e.g. the shared review form submit button) —
   theme-vars sets --bs-btn-bg but not --bs-btn-color. */
body.cp-theme .btn-primary {
    --bs-btn-color: #fff;
}

/* The export's bold teal "View All Products" / see-all link. */
body.cp-theme .cp-strong-link {
    display: inline-block;
    font-family: var(--cp-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cp-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.cp-theme .cp-strong-link:hover {
    color: var(--cp-accent);
    text-decoration: underline;
}

/* Inputs — "8px rounded corners, 1px light gray border, shifting to a 2px
   Trust Teal border on focus". NEVER a padding shorthand on .form-select —
   the base already restores Bootstrap's 2.25rem caret gutter and a shorthand
   here would eat it again. */
body.cp-theme .form-control,
body.cp-theme .form-select {
    border-color: var(--cp-border);
    background-color: var(--cp-surface);
}

/* The design system asks for a 2px teal border on focus. Growing the border
   would nudge the field's content box by 1px on every focus, so the extra
   weight is drawn with an INSET shadow instead — same visual, no layout
   shift. */
body.cp-theme .form-control:focus,
body.cp-theme .form-select:focus {
    border-color: var(--cp-primary);
    box-shadow: inset 0 0 0 1px var(--cp-primary), 0 0 0 3px rgba(var(--cp-primary-rgb), 0.12);
}

/* --------------------------------------------------------------------------
   Announcement + header — the export's teal announcement band ("Genuine
   products, verified batches · Cash on Delivery nationwide") reuses the
   primary token; the sticky header sits on a semi-transparent clinical
   surface with a backdrop blur over a soft hairline (DESIGN.md "Sticky
   Header: uses a slight backdrop blur with a semi-transparent white
   background").
   -------------------------------------------------------------------------- */
body.cp-theme .mr-announce {
    background-color: var(--cp-primary);
    color: #fff;
    font-family: var(--cp-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
}

body.cp-theme .mr-header {
    background-color: rgba(247, 250, 250, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow-clinical);
}

body.cp-theme .mr-logo {
    font-family: var(--cp-font-head);
    font-weight: 700;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    color: var(--cp-primary);
}

body.cp-theme .mr-nav-link {
    font-family: var(--cp-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-muted);
}

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

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

body.cp-theme .mr-search input {
    background: var(--cp-surface);
    border-color: var(--cp-border);
}

body.cp-theme .mr-search input:focus {
    background: var(--cp-surface);
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(var(--cp-primary-rgb), 0.12);
}

body.cp-theme .mr-icon-btn { color: var(--cp-muted); }
body.cp-theme .mr-icon-btn:hover { color: var(--cp-primary); }
body.cp-theme .mr-badge { background-color: var(--cp-accent); }

/* --------------------------------------------------------------------------
   Hero (cp-hero) — the Stitch full-bleed lifestyle hero with a LEFT-TO-RIGHT
   white scrim and dark ink copy on top. See the audit above for the scrim
   alphas; the scrim is load-bearing for legibility, never remove it.
   -------------------------------------------------------------------------- */
body.cp-theme .cp-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 66vh, 640px);
    overflow: hidden;
    background-color: var(--cp-low);
}

body.cp-theme .cp-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

body.cp-theme .cp-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.86) 34%,
        rgba(255, 255, 255, 0.46) 62%,
        rgba(255, 255, 255, 0) 88%);
}

body.cp-theme .cp-hero__shell {
    position: relative;
    z-index: 2;
    width: 100%;
}

body.cp-theme .cp-hero__copy { max-width: 34rem; }

body.cp-theme .cp-hero__title {
    font-family: var(--cp-font-head);
    color: var(--cp-ink);
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.75rem;
}

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

body.cp-theme .cp-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

body.cp-theme .cp-btn-hero { padding: 1rem 2rem; }

body.cp-theme .cp-hero .mr-btn--primary { box-shadow: var(--cp-shadow-clinical); }

/* --------------------------------------------------------------------------
   Trust strip (inherited) — the export's 4 reassurance items: a Trust Teal
   glyph inside a soft mint (primary-fixed) circle beside a small semibold
   label. The base markup is icon + strong + span, so the circle is drawn on
   the svg itself.
   -------------------------------------------------------------------------- */
/* The export renders this strip on pure white, sitting between the hero and
   the canvas-toned promo band. `.mr-band--alt` survives on only two inherited
   surfaces here (this strip and the blog-post related band — featured is
   overridden), so the section is retinted directly rather than by re-pointing
   --mr-band-alt, which also drives the card / promo / gallery media wells. */
body.cp-theme section.mr-band--alt { background-color: var(--cp-surface); }

body.cp-theme .mr-trust svg {
    width: 48px;
    height: 48px;
    padding: 11px;
    border-radius: 9999px;
    background-color: var(--cp-chip);
    color: var(--cp-primary);
}

body.cp-theme .mr-trust strong {
    font-family: var(--cp-font-body);
    color: var(--cp-muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

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

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export's white card inside a 1px
   outline with a square media well on the quiet tonal layer, a Source Sans 3
   name, a small grey meta line and a Poppins semibold teal price.

   The base card is BORDERLESS, so its title/price sit flush by design. Adding
   a border here means the text MUST be inset (recurring gotcha) — done on the
   card's direct text children so the media stays full-bleed.
   -------------------------------------------------------------------------- */
body.cp-theme .mr-card {
    /* The export's card is `flex flex-col` with the price block pushed down by
       `mt-auto`. The base card is a plain block, so uneven title lengths would
       leave the borders ragged now that the card HAS a border — stretch it to
       the grid row and float the price to the bottom edge. */
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--mr-radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body.cp-theme .mr-card:hover {
    box-shadow: var(--cp-shadow-clinical);
    border-color: rgba(var(--cp-primary-rgb), 0.35);
}

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

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

body.cp-theme .mr-card__media {
    /* The export's media well is a SQUARE on the quiet tonal layer (the base
       is 3:4). flex-shrink:0 keeps the aspect ratio honest now that the card
       is a flex column. The well's own radius is dropped — the card's
       overflow:hidden clips its top corners instead. */
    flex: 0 0 auto;
    aspect-ratio: 1;
    background-color: var(--cp-low);
    border-radius: 0;
    margin-bottom: 1rem;
}

body.cp-theme .mr-card__eyebrow {
    font-family: var(--cp-font-body);
    color: var(--cp-soft);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

body.cp-theme .mr-card__title,
body.cp-theme .mr-card__title a {
    font-family: var(--cp-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cp-ink);
}

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

body.cp-theme .mr-card__price {
    /* "Must feature the price in Rs. in Poppins 600" (DESIGN.md "Product
       Cards"). margin-top:auto is the export's `mt-auto` price block. */
    margin-top: auto;
    padding-top: 0.35rem;
    font-family: var(--cp-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cp-primary);
}

body.cp-theme .mr-card__price del {
    font-family: var(--cp-font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cp-soft);
}

/* .mr-card__wish (heart) + .mr-card__quickview (eye) restyled TOGETHER per the
   recurring product-card gotcha. The base already inks both safely via
   --bs-primary on a near-white circle (7.69:1) and hovers to the
   --mr-surface/--mr-ink pair (16.74:1) — both re-pointed above, so contrast is
   guaranteed in BOTH states; only the resting fill is warmed to the theme's
   own surface. The is-active heart reads the Sky Blue accent (a fill role). */
body.cp-theme .mr-card__wish,
body.cp-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: var(--cp-shadow-clinical);
}

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

/* Discount / demo chip — the export's pill badge (Sky Blue fill, white label
   at 6.48:1). `.mr-card__badge` is the sale chip; the inline-styled Demo chip
   keeps its own grey. */
body.cp-theme .mr-card__badge {
    background-color: var(--cp-accent);
    font-family: var(--cp-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 9999px;
    padding: 0.3rem 0.6rem;
}

body.cp-theme .mr-card__quick {
    font-family: var(--cp-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited) — the export's 16px-radius image tiles with a
   teal-tinted bottom scrim, a white Poppins title and a soft-mint
   "Explore Selection" caption line.

   The base's hover rule `.mr-promo:hover .mr-promo__cta` is (0,0,3,0) and
   recolours the caption to --ll-accent — Sky Blue on a dark teal scrim is
   unreadable, so that DESCENDANT selector is overridden explicitly, not just
   the base selector (see references/gotchas.md).
   -------------------------------------------------------------------------- */
body.cp-theme .mr-promo {
    background-color: var(--cp-band);
    box-shadow: var(--cp-shadow-clinical);
}

body.cp-theme .mr-promo__scrim {
    background: linear-gradient(180deg,
        rgba(var(--cp-primary-rgb), 0) 42%,
        rgba(var(--cp-primary-rgb), 0.72) 100%);
}

body.cp-theme .mr-promo:hover .mr-promo__scrim {
    background: linear-gradient(180deg,
        rgba(var(--cp-primary-rgb), 0.1) 30%,
        rgba(var(--cp-primary-rgb), 0.82) 100%);
}

body.cp-theme .mr-promo__title {
    font-family: var(--cp-font-head);
    font-weight: 600;
}

body.cp-theme .mr-promo__cta {
    font-family: var(--cp-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cp-chip);
    border-bottom: 0;
    padding-bottom: 0;
}

body.cp-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Health Essentials (cp-featured) — heading + sub-heading left, bold teal
   see-all link right, 4-column grid on the pure-white tonal layer.
   -------------------------------------------------------------------------- */
body.cp-theme .cp-featured { background-color: var(--cp-surface); }

body.cp-theme .cp-featured__lead {
    color: var(--cp-muted);
    margin-top: 0.5rem;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Pharmacist service cards (cp-care) — the export's 3-up white reassurance
   band on the quiet tonal layer: a large teal glyph, a Poppins title, a
   relaxed paragraph and a bold teal arrow link whose chevron nudges on hover.
   -------------------------------------------------------------------------- */
body.cp-theme .cp-care { background-color: var(--cp-low); }

body.cp-theme .cp-care__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-clinical);
    padding: clamp(1.5rem, 3vw, 2rem);
}

body.cp-theme .cp-care__icon {
    width: 40px;
    height: 40px;
    color: var(--cp-primary);
    margin-bottom: 1.5rem;
}

body.cp-theme .cp-care__title {
    font-family: var(--cp-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cp-ink);
    margin-bottom: 0.75rem;
}

body.cp-theme .cp-care__text {
    color: var(--cp-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

body.cp-theme .cp-care__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--cp-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cp-primary);
    text-decoration: none;
}

body.cp-theme .cp-care__link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

body.cp-theme .cp-care__link:hover { color: var(--cp-accent); }
body.cp-theme .cp-care__link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   New Arrivals (cp-arrivals) — left-aligned heading over a 4-column grid on
   the pure-white tonal layer.
   -------------------------------------------------------------------------- */
body.cp-theme .cp-arrivals { background-color: var(--cp-surface); }

/* --------------------------------------------------------------------------
   Category tiles (inherited .mr-tile--cat) — the export's own tiles are plain
   icon chips; this platform's data-driven representative-photo tile (a real
   product image per category) is kept per the theme-factory "proven inherit"
   precedent (rooted-wellness / terra-bloom / zaree) and retinted teal, on the
   export's surface-container band with a centred Poppins cap.
   -------------------------------------------------------------------------- */
body.cp-theme .mr-band { background-color: var(--cp-band); }

body.cp-theme .mr-section.mr-band .mr-display { text-align: center; }

body.cp-theme .mr-tile--cat .mr-tile__scrim { background: rgba(var(--cp-primary-rgb), 0.42); }

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

body.cp-theme .mr-tile--cat { border: 1px solid var(--cp-border); }

/* --------------------------------------------------------------------------
   Health Journal (cp-journal) — 16:9 covers at the 16px radius, Poppins
   titles that ink teal on hover, a three-line excerpt (the export's
   line-clamp-3) and a small bold uppercase read-more link.
   -------------------------------------------------------------------------- */
body.cp-theme .cp-journal { background-color: var(--cp-surface); }

body.cp-theme .cp-article__media { aspect-ratio: 16 / 9; }

body.cp-theme .mr-article__title,
body.cp-theme .mr-article__title a {
    font-family: var(--cp-font-head);
    font-size: 1.25rem;
    font-weight: 600;
}

body.cp-theme .mr-article__title a:hover { color: var(--cp-primary); }

body.cp-theme .cp-journal__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

body.cp-theme .cp-journal__link {
    font-family: var(--cp-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-primary);
    text-decoration: none;
}

body.cp-theme .cp-journal__link:hover { color: var(--cp-accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Newsletter (cp-cta) — "The Wellness Brief": a centred full-width band on
   the export's Sky Blue secondary-container fill, with a white input beside a
   solid Trust Teal Subscribe button "for high contrast". Nothing on this band
   uses the Sky Blue ACCENT token (only 3.48:1 here) — copy reads the band's
   own on-container ink instead.
   -------------------------------------------------------------------------- */
body.cp-theme .cp-cta {
    background-color: var(--cp-sky);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

body.cp-theme .cp-cta__inner { max-width: 640px; }

body.cp-theme .cp-cta__eyebrow { color: var(--cp-sky-ink); }

body.cp-theme .cp-cta__title {
    color: var(--cp-sky-ink);
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
}

body.cp-theme .cp-cta__body {
    color: var(--cp-sky-ink);
    max-width: 34rem;
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.6;
}

body.cp-theme .cp-cta__form {
    display: flex;
    gap: 1rem;
    max-width: 560px;
}

body.cp-theme .cp-cta__form input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: var(--mr-radius);
    background: var(--cp-surface);
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    color: var(--cp-ink);
    transition: box-shadow 0.2s ease;
}

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

body.cp-theme .cp-cta__form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--cp-primary-rgb), 0.35);
}

body.cp-theme .cp-cta__btn { padding: 1rem 2rem; }

body.cp-theme .cp-cta__note {
    color: var(--cp-sky-ink);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Footer (inherited .mr-footer) — the export's full-width Trust Teal block:
   white headings, white links resting at 82% opacity (5.88:1; hover lifts to
   full white at 7.89:1), soft white/10 social squares.
   -------------------------------------------------------------------------- */
body.cp-theme .mr-footer {
    background-color: var(--cp-primary);
    border-top: 0;
}

body.cp-theme .mr-footer h4 { color: #fff; font-family: var(--cp-font-head); }
body.cp-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
body.cp-theme .mr-footer a:hover { color: #fff; }
body.cp-theme .mr-footer__brand { color: #fff; font-family: var(--cp-font-head); }
body.cp-theme .mr-footer .mr-muted,
body.cp-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.82); }

body.cp-theme .mr-footer .mr-social {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    border-radius: var(--mr-radius);
    color: #fff;
}

body.cp-theme .mr-footer .mr-social:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: transparent;
    color: #fff;
}

body.cp-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.15); opacity: 1; }

/* The footer newsletter "Join" button would otherwise blend into the
   primary-coloured footer (its own fill IS the primary token) — invert it to a
   white pill (primary text on white: 7.89:1). */
body.cp-theme .mr-footer .mr-btn--primary { background-color: #fff; color: var(--cp-primary); }
body.cp-theme .mr-footer .mr-btn--primary:hover { background-color: var(--cp-chip); color: var(--cp-primary); }

/* --------------------------------------------------------------------------
   Reduced motion — kill decorative transitions AND hover transforms (the
   tile/image zooms, card lifts, the arrow-link nudge).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cp-theme .mr-btn,
    body.cp-theme .mr-card,
    body.cp-theme .cp-strong-link,
    body.cp-theme .cp-care__link svg,
    body.cp-theme .mr-card__media img,
    body.cp-theme .mr-tile__img,
    body.cp-theme .mr-promo__img {
        transition: none;
    }

    body.cp-theme .mr-card:hover .mr-card__media img,
    body.cp-theme .mr-tile:hover .mr-tile__img,
    body.cp-theme .mr-promo:hover .mr-promo__img,
    body.cp-theme .cp-care__link:hover svg,
    body.cp-theme .mr-tile--cat:hover .mr-tile__media img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile — from the export's own mobile frames
   (carepoint_homepage_mobile / vitamins_category_mobile): the hero drops to a
   full-width scrim (the horizontal gradient has no room to breathe at phone
   widths, so it becomes a vertical-safe flat wash), headlines scale to the
   design system's 28px mobile step, and the newsletter form stacks. 16px
   outer margins per DESIGN.md "margin-mobile".
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.cp-theme .cp-hero { min-height: 460px; }

    body.cp-theme .cp-hero__scrim {
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.9) 60%,
            rgba(255, 255, 255, 0.78) 100%);
    }

    body.cp-theme .cp-hero__copy { max-width: none; }
    body.cp-theme .cp-hero__title { font-size: 1.75rem; }
    body.cp-theme .mr-display { font-size: 1.75rem; }
}

@media (max-width: 575.98px) {
    body.cp-theme .mr-shell { padding-inline: 16px; }
    body.cp-theme .cp-cta__form { flex-direction: column; }
    body.cp-theme .cp-btn-hero { padding: 0.85rem 1.5rem; }
}