/* ==========================================================================
Rooted — modern apothecary herbal wellness.
Ported from the Stitch "Rooted | Modern Apothecary" design (the
Minimalism-with-Tactile-Modernism design system lives at
docs/templates/pending/stitch_29_rooted_apothecary_e_commerce_homepage/
.../rooted_modern_apothecary/DESIGN.md): a warm oat-cream canvas, Deep
Sage actions, a sparing Clay accent, Lora serif headings (the allowlist
stand-in for the design's Literata) over Inter body/UI/prices, a soft
0.75rem (12px) corner radius everywhere, and NO drop shadows — depth
comes from tonal layering + 1px soft outlines (DESIGN.md: "avoids
traditional shadows in favor of Tonal Layering and Structural Outlines").
This theme OWNS the hero / featured / ingredient-story / new-arrivals /
journal / newsletter home sections (rw-* markup) and INHERITS Modern
Retail's header, footer, trust, promo, categories, brands and every
functional page. This stylesheet therefore has two jobs:
(a) style the NEW `rw-*` markup into the Stitch design; and
(b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
base neutral tokens at the oat-cream/sage palette, and drawing the
Deep-Sage 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.rw-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 oat-cream #fdf9f1):
- primary #384e3b as TEXT on canvas: 8.62:1 PASS (>=4.5)
- primary as TEXT on white/band/fill: 9.05 / 8.18 / 7.40 PASS
- white text on primary FILL #384e3b: 9.05:1 PASS
=> primary is safe as text AND as a white-text fill everywhere the base
already uses var(--bs-primary); no -ink sibling needed.
- accent (clay) #8c4e2f as TEXT on canvas/white/band-alt/fill:
6.16 / 6.47 / 5.54 / 5.29 ALL PASS
- white text on accent FILL (sale badge): 6.47:1 PASS
=> unlike terra-bloom's terracotta, this export's rendered clay
("secondary" #8c4e2f — what the eyebrows + SALE badge actually use;
the DESIGN.md prose's #C07856 never appears in the rendered html) is
already text-safe. No -ink sibling needed; raw accent is used for
both text and fills.
- re-pointed neutrals, worst measured case across canvas/white/band/
band-alt/fill:
--rw-ink #1c1c17: >=14.0:1 PASS
--rw-muted #434842: >=7.66:1 PASS
--rw-soft #5f6560: >=4.89:1 PASS (tuned darker than DESIGN.md's
raw "outline" #737972, which measures 4.25:1
on canvas — under 4.5 for small text roles
like .mr-card__eyebrow)
--rw-gold #8a6d1f: 4.66:1 canvas / 4.90:1 white PASS
- footer (Deep-Sage enclosure, bg = primary #384e3b):
white text (full): 9.05:1 PASS
link default rgba(255,255,255,.82): 6.15:1 PASS
link hover -> full white: 9.05:1 PASS (the export's own
hover is a peach hue shift, but
peach fails as small text here;
opacity lift kept instead —
same call as terra-bloom)
- promo tile caption (over the export's sage-gradient scrim): the base's
hover accent-recolour is unusable here (raw clay on the darkened scrim
measures ~1.13:1), so the caption follows the export instead: white
title + white/90 sentence-case caption line on a primary-tinted
gradient (white on the darkest scrim region approximation: 7.29:1
PASS); hover keeps white and just brightens the scrim.
- --bs-link-color-rgb is aliased to --bs-primary-rgb so bare tags
track the customizer instead of Bootstrap-blue — NEVER a bare
`body.rw-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.rw-theme {
/* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
--rw-primary: var(--bs-primary, #384e3b);
--rw-primary-rgb: var(--bs-primary-rgb, 56, 78, 59);
--rw-accent: var(--ll-accent, #8c4e2f);
--rw-radius: var(--bs-border-radius, 0.75rem);
--rw-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
--rw-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;
/* Oat-cream / apothecary palette (DESIGN.md M3 roles, rendered values) */
--rw-canvas: #fdf9f1; /* background / surface */
--rw-surface: #ffffff; /* surface-container-lowest: cards, panels */
--rw-band: #f7f3eb; /* surface-container-low: trust strip, card media */
--rw-band-alt: #f1ede5; /* surface-container: categories band */
--rw-fill: #ece8e0; /* surface-container-high: newsletter band */
--rw-border: #c3c8c0; /* outline-variant: hairlines */
--rw-border-strong: #737972; /* outline: emphasised lines */
--rw-ink: #1c1c17; /* on-surface */
--rw-muted: #434842; /* on-surface-variant */
--rw-soft: #5f6560; /* tuned darker than raw "outline" — see audit */
--rw-gold: #8a6d1f; /* star ratings — contrast-tuned */
/* Re-point the inherited base neutrals at the oat-cream palette so every
inherited mr-* surface (bands, borders, fills, muted text) follows
across shop/PDP/cart/checkout/account/blog. */
--mr-ink: var(--rw-ink);
--mr-muted: var(--rw-muted);
--mr-soft: var(--rw-soft);
--mr-surface: var(--rw-surface);
--mr-band: var(--rw-band);
--mr-band-alt: var(--rw-band-alt);
--mr-fill: var(--rw-fill);
--mr-border: var(--rw-border);
--mr-border-strong: var(--rw-border-strong);
--mr-radius: 0.75rem;
--mr-gold: var(--rw-gold);
--mr-shadow: 0 1px 0 rgba(28, 28, 23, 0.04);
/* Bootstrap paints bare 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(--rw-canvas);
color: var(--rw-ink);
font-family: var(--rw-font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* --------------------------------------------------------------------------
Shape — DESIGN.md "Soft Geometricism": one consistent 12px radius on
containers, buttons, inputs and imagery. No flatten block; the radius
system does the work.
-------------------------------------------------------------------------- */
body.rw-theme .mr-card__media,
body.rw-theme .mr-promo,
body.rw-theme .mr-promo__img,
body.rw-theme .mr-tile,
body.rw-theme .mr-article__media,
body.rw-theme .mr-article__media img,
body.rw-theme .rw-story__figure,
body.rw-theme .form-control,
body.rw-theme .form-select,
body.rw-theme .dropdown-menu {
border-radius: var(--mr-radius);
}
/* --------------------------------------------------------------------------
Typography — Lora medium-weight serif (the export's Literata sits at
500-600, not the base's heavier editorial cut); Inter carries all UI,
body copy and prices ("science/utility"). The clay eyebrow is Inter
semi-bold with wide tracking (DESIGN.md "Chips/Labels").
-------------------------------------------------------------------------- */
body.rw-theme h1, body.rw-theme h2, body.rw-theme h3,
body.rw-theme h4, body.rw-theme h5, body.rw-theme h6,
body.rw-theme .mr-display {
font-family: var(--rw-font-head);
color: var(--rw-ink);
font-weight: 600;
letter-spacing: -0.01em;
}
body.rw-theme .mr-display {
font-size: clamp(1.75rem, 3.2vw, 2.25rem);
line-height: 1.3;
}
body.rw-theme .mr-eyebrow,
body.rw-theme .rw-eyebrow {
font-family: var(--rw-font-body);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rw-accent);
}
/* --------------------------------------------------------------------------
Buttons — solid Deep Sage with white text (9.05:1 — see audit); sage ghost
secondary (1px border, per DESIGN.md "Components"). Generous horizontal
padding ("buttons should favor more horizontal padding than vertical").
-------------------------------------------------------------------------- */
body.rw-theme .mr-btn {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
}
/* 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.rw-theme .btn-primary {
--bs-btn-color: #fff;
}
body.rw-theme .rw-keyline-link {
display: inline-block;
font-family: var(--rw-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rw-primary);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 0.3rem;
transition: color 0.2s ease, border-color 0.2s ease;
}
body.rw-theme .rw-keyline-link:hover { color: var(--rw-accent); }
/* Underline link utility (.mr-ulink) + breadcrumb hover — the export's own
hover:text-secondary; clay is text-safe here (6.16:1, see audit). */
body.rw-theme .mr-ulink:hover { color: var(--rw-accent); border-color: var(--rw-accent); }
body.rw-theme .mr-crumbs a:hover { color: var(--rw-accent); }
/* Inputs — white fill, 1px soft outline, 12px radius (DESIGN.md "full 1px
border with 12px radius for more complex forms"); focus warms to Deep
Sage. Never a padding shorthand on .form-select — restore Bootstrap's
caret gutter. */
body.rw-theme .form-control,
body.rw-theme .form-select {
border-color: var(--rw-border);
background-color: var(--rw-surface);
}
body.rw-theme .form-select {
padding-inline-end: 2.25rem;
}
body.rw-theme .form-control:focus,
body.rw-theme .form-select:focus {
border-color: var(--rw-primary);
box-shadow: 0 0 0 3px rgba(var(--rw-primary-rgb), 0.14);
}
/* --------------------------------------------------------------------------
Announcement + header — the export's Deep Sage announcement bar
("Third-party tested, always · Cash on Delivery nationwide") reuses the
primary token; the sticky header sits on the oat canvas over a soft
hairline. Nav hover reads the clay accent (the export's own
hover:text-secondary — text-safe per audit); active state stays primary.
-------------------------------------------------------------------------- */
body.rw-theme .mr-announce {
background-color: var(--rw-primary);
letter-spacing: 0.16em;
font-size: 0.68rem;
}
body.rw-theme .mr-header {
background-color: var(--rw-canvas);
border-bottom: 1px solid var(--rw-border);
}
body.rw-theme .mr-logo {
font-family: var(--rw-font-head);
font-weight: 600;
color: var(--rw-primary);
}
body.rw-theme .mr-nav-link:hover { color: var(--rw-accent); }
body.rw-theme .mr-nav-link.is-active {
color: var(--rw-primary);
border-bottom-color: var(--rw-primary);
}
body.rw-theme .mr-search input {
background: var(--rw-band);
border-color: var(--rw-border);
}
body.rw-theme .mr-search input:focus {
background: var(--rw-surface);
border-color: var(--rw-primary);
box-shadow: 0 0 0 3px rgba(var(--rw-primary-rgb), 0.14);
}
body.rw-theme .mr-icon-btn:hover { color: var(--rw-accent); }
body.rw-theme .mr-badge { background-color: var(--rw-accent); }
/* --------------------------------------------------------------------------
Hero (rw-hero) — the Stitch split hero: a plain half-bleed apothecary
photo (no scrim — the copy never sits on top of it) beside a copy panel
on the page's own oat canvas.
-------------------------------------------------------------------------- */
body.rw-theme .rw-hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: clamp(480px, 70vh, 716px);
background-color: var(--rw-canvas);
}
body.rw-theme .rw-hero__figure {
position: relative;
overflow: hidden;
min-height: 320px;
}
body.rw-theme .rw-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.rw-theme .rw-hero__copy {
display: flex;
align-items: center;
padding: clamp(2.5rem, 6vw, 6rem);
}
body.rw-theme .rw-hero__copy-inner { max-width: 30rem; }
body.rw-theme .rw-hero__title {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
}
body.rw-theme .rw-hero__lead {
color: var(--rw-muted);
max-width: 42ch;
margin-bottom: 1.75rem;
font-size: 1.05rem;
}
body.rw-theme .rw-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
body.rw-theme .rw-btn-hero { padding: 1rem 2rem; }
/* --------------------------------------------------------------------------
Trust strip (inherited) — the export renders 4 centered sage icons with
small uppercase tracked labels on the quiet band.
-------------------------------------------------------------------------- */
body.rw-theme .mr-trust svg { color: var(--rw-primary); }
body.rw-theme .mr-trust strong {
color: var(--rw-primary);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
Product cards (inherited mr-card) — soft oat media well over a hairline
(DESIGN.md "Cards: no shadow; a 1px border or a slightly darker neutral
fill"), Inter medium titles (the export sets product names in the body
face, not the serif), sage Inter prices. The bordered media well insets
nothing — the border sits on the MEDIA, not the card, so the base's
flush title/price alignment stays correct.
-------------------------------------------------------------------------- */
body.rw-theme .mr-card { background: transparent; }
body.rw-theme .mr-card__media {
background-color: var(--rw-band);
border: 1px solid rgba(var(--rw-primary-rgb), 0.08);
}
body.rw-theme .mr-card:hover .mr-card__media { border-color: var(--rw-border); }
body.rw-theme .mr-card__title,
body.rw-theme .mr-card__title a {
font-family: var(--rw-font-body);
font-weight: 500;
color: var(--rw-ink);
}
body.rw-theme .mr-card__title a:hover { color: var(--rw-accent); }
body.rw-theme .mr-card__price { color: var(--rw-primary); font-weight: 500; }
body.rw-theme .mr-card__price del { color: var(--rw-soft); }
/* .mr-card__wish (heart) + .mr-card__quickview (eye) restyled TOGETHER per
the recurring product-card gotcha. The base already inks both safely via
--mr-ink/--mr-surface (self-correcting); the is-active heart fill reads
the clay accent (a fill role — the pill badge pattern). */
body.rw-theme .mr-card__wish.is-active { color: var(--rw-accent); }
/* SALE chip — Clay, small uppercase Inter with high letter spacing, pill
(DESIGN.md "Chips/Labels"; white on clay 6.47:1). */
body.rw-theme .mr-card__badge {
background: var(--rw-accent);
letter-spacing: 0.12em;
border-radius: 9999px;
}
/* --------------------------------------------------------------------------
Promo tiles (inherited) — the export's sage-gradient scrim
(from-primary/80) with a white serif title and a white/90 sentence-case
caption line. The base's accent-recolour hover is replaced (raw clay on
the darkened scrim ~1.13:1 — unusable); hover keeps white per the export.
-------------------------------------------------------------------------- */
body.rw-theme .mr-promo { background-color: var(--rw-band-alt); }
body.rw-theme .mr-promo__scrim {
background: linear-gradient(180deg, rgba(var(--rw-primary-rgb), 0) 40%, rgba(var(--rw-primary-rgb), 0.8) 100%);
}
body.rw-theme .mr-promo:hover .mr-promo__scrim {
background: linear-gradient(180deg, rgba(var(--rw-primary-rgb), 0.12) 30%, rgba(var(--rw-primary-rgb), 0.88) 100%);
}
body.rw-theme .mr-promo__title { font-family: var(--rw-font-head); }
body.rw-theme .mr-promo__cta {
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, 0.9);
border-bottom: 0;
padding-bottom: 0;
}
body.rw-theme .mr-promo:hover .mr-promo__cta {
color: #fff;
border-color: transparent;
}
/* --------------------------------------------------------------------------
Ingredient story (rw-story) — the "KNOW YOUR ROOTS" split band: copy on a
white panel (surface-container-lowest) with sage dot bullets, macro photo
on the right, soft hairline top/bottom.
-------------------------------------------------------------------------- */
body.rw-theme .rw-story {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--rw-surface);
border-top: 1px solid rgba(var(--rw-primary-rgb), 0.08);
border-bottom: 1px solid rgba(var(--rw-primary-rgb), 0.08);
}
body.rw-theme .rw-story__copy {
display: flex;
align-items: center;
padding: clamp(2.5rem, 6vw, 5rem);
}
body.rw-theme .rw-story__copy-inner { max-width: 30rem; }
body.rw-theme .rw-story__title { font-size: clamp(1.6rem, 2.6vw, 2rem); }
body.rw-theme .rw-story__body {
color: var(--rw-muted);
max-width: 44ch;
margin-bottom: 1.5rem;
}
body.rw-theme .rw-story__points { display: grid; gap: 1rem; }
body.rw-theme .rw-story__point {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--rw-primary);
font-weight: 500;
}
body.rw-theme .rw-story__dot {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 9999px;
background: var(--rw-primary);
}
body.rw-theme .rw-story__figure {
position: relative;
overflow: hidden;
min-height: 400px;
border-radius: 0;
}
body.rw-theme .rw-story__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --------------------------------------------------------------------------
New to the Shelf (rw-arrivals) — centered serif heading with the export's
short clay rule beneath it.
-------------------------------------------------------------------------- */
body.rw-theme .rw-rule {
display: inline-block;
width: 48px;
height: 4px;
margin-top: 0.75rem;
background: var(--rw-accent);
}
/* --------------------------------------------------------------------------
Category tiles (inherited .mr-tile--cat) — the export's own tiles are
plain icon circles; this platform's data-driven representative-photo tile
(a real product image per category) is kept per the theme-factory
"proven inherit" precedent (terra-bloom/zaree) and retinted sage, on the
export's surface-container band.
-------------------------------------------------------------------------- */
body.rw-theme .mr-band { background-color: var(--rw-band-alt); }
body.rw-theme .mr-tile--cat .mr-tile__scrim { background: rgba(var(--rw-primary-rgb), 0.38); }
body.rw-theme .mr-tile--cat .mr-tile__cap { font-family: var(--rw-font-head); }
/* --------------------------------------------------------------------------
Journal (rw-journal) — heading left, clay category eyebrows, serif titles
whose hover reads the clay accent (the export's hover:text-secondary;
6.16:1 — text-safe).
-------------------------------------------------------------------------- */
body.rw-theme .mr-article__title a:hover { color: var(--rw-accent); }
/* --------------------------------------------------------------------------
Newsletter (rw-cta) — "The Root Note": a centered band on the warm stone
wash (surface-container-high), inline email + Subscribe, uppercase
tracked small print.
-------------------------------------------------------------------------- */
body.rw-theme .rw-cta {
background: var(--rw-fill);
padding: clamp(4rem, 8vw, 6rem) 0;
}
body.rw-theme .rw-cta__inner { max-width: 640px; }
body.rw-theme .rw-cta__title { font-size: clamp(2rem, 3.6vw, 2.75rem); color: var(--rw-primary); }
body.rw-theme .rw-cta__body {
color: var(--rw-primary);
max-width: 52ch;
margin-inline: auto;
font-size: 1.05rem;
}
body.rw-theme .rw-cta__form {
display: flex;
gap: 1rem;
max-width: 520px;
}
body.rw-theme .rw-cta__form input {
flex: 1;
min-width: 0;
border: 1px solid var(--rw-border);
border-radius: var(--mr-radius);
background: var(--rw-canvas);
padding: 0.95rem 1.25rem;
font-size: 0.95rem;
color: var(--rw-ink);
transition: border-color 0.2s ease;
}
body.rw-theme .rw-cta__form input::placeholder { color: var(--rw-soft); }
body.rw-theme .rw-cta__form input:focus { outline: none; border-color: var(--rw-primary); }
body.rw-theme .rw-cta__note {
color: var(--rw-muted);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
Footer (inherited .mr-footer) — the export's full-width Deep Sage block:
white headings, white links resting at 82% opacity (6.15:1 — the raw 80%
is close but tuned to pass; hover lifts to full white), soft white/10
social circles.
-------------------------------------------------------------------------- */
body.rw-theme .mr-footer {
background-color: var(--rw-primary);
border-top: 0;
}
body.rw-theme .mr-footer h4 { color: #fff; }
body.rw-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
body.rw-theme .mr-footer a:hover { color: #fff; }
body.rw-theme .mr-footer__brand { color: #fff; font-family: var(--rw-font-head); }
body.rw-theme .mr-footer .mr-muted,
body.rw-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.82); }
body.rw-theme .mr-footer .mr-social {
background: rgba(255, 255, 255, 0.1);
border-color: transparent;
color: #fff;
}
body.rw-theme .mr-footer .mr-social:hover {
background: rgba(255, 255, 255, 0.2);
border-color: transparent;
color: #fff;
}
body.rw-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 an oat pill (primary text on white: 9.05:1). */
body.rw-theme .mr-footer .mr-btn--primary { background-color: #fff; color: var(--rw-primary); }
body.rw-theme .mr-footer .mr-btn--primary:hover { background-color: var(--rw-accent); color: #fff; }
/* --------------------------------------------------------------------------
Reduced motion — kill decorative transitions AND hover transforms (the
tile/image zooms, card lifts).
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.rw-theme .mr-btn,
body.rw-theme .rw-keyline-link,
body.rw-theme .mr-card__media,
body.rw-theme .mr-card__media img,
body.rw-theme .mr-tile__img,
body.rw-theme .mr-promo__img {
transition: none;
}
body.rw-theme .mr-card:hover .mr-card__media img,
body.rw-theme .mr-tile:hover .mr-tile__img,
body.rw-theme .mr-promo:hover .mr-promo__img,
body.rw-theme .mr-tile--cat:hover .mr-tile__media img {
transform: none;
}
}
/* --------------------------------------------------------------------------
Mobile (per the export's responsive classes — its own mobile frame is
cross-contaminated with another Stitch project, so the desktop html's
grid-cols-1 md:grid-cols-2 breakpoints drive this): the split hero and
the ingredient story stack image-over-copy (the story photo moves back
above the copy via order, matching the export's order-1/order-2 pair);
20px outer margins on the narrowest phones.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.rw-theme .rw-hero { grid-template-columns: 1fr; min-height: auto; }
body.rw-theme .rw-hero__figure { min-height: 320px; }
body.rw-theme .rw-hero__copy { padding: 2.5rem 1.5rem; }
body.rw-theme .rw-hero__copy-inner { max-width: none; }
body.rw-theme .rw-story { grid-template-columns: 1fr; }
body.rw-theme .rw-story__figure { order: -1; min-height: 320px; }
body.rw-theme .rw-story__copy { padding: 2.5rem 1.5rem; }
}
@media (max-width: 575.98px) {
body.rw-theme .mr-shell { padding-inline: 20px; }
body.rw-theme .rw-cta__form { flex-direction: column; }
}