/* ==========================================================================
Terra Bloom — sun-drenched greenhouse botanical retail.
Ported from the Stitch "Terra Bloom" design (the Minimalist-with-Tactile-
accents design system lives at
docs/templates/pending/stitch_17_terra_bloom_e_commerce_store/.../terra_bloom/DESIGN.md):
a misty off-white canvas, Leaf Green actions, a sparing Terracotta
highlight, Lora serif headings (the allowlist stand-in for the design's
Literata) over Inter body, a gentle 6px radius everywhere, and NO heavy
drop shadows — depth comes from tonal layering + one very soft ambient
shadow (DESIGN.md: "0px 4px 20px rgba(0,0,0,0.04)").
This theme OWNS the hero / care-guide / featured / new-arrivals / journal
/ newsletter home sections (tb-* 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 `tb-*` markup into the Stitch design; and
(b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
base neutral tokens at the misty/garden palette, and drawing the
Deep-Forest-Green footer + announcement enclosure DESIGN.md calls
for (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.tb-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: change the primary colour and
every garden-green surface follows.
------------------------------------------------------------------------
CONTRAST AUDIT (measured with App\Support\Theming\ContrastChecker; see
the accompanying report for the full worked numbers). Canvas is misty
off-white #f9faf2.
- primary #3d6b35 as TEXT on canvas: 5.96:1 PASS (>=4.5)
- primary #3d6b35 as TEXT on white: 6.26:1 PASS
- white text on primary FILL #3d6b35: 6.26: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 for primary.
- accent (terracotta) #c26d4b as TEXT on canvas: 3.58:1 FAIL (<4.5)
- white text on accent FILL #c26d4b: 3.76:1 FAIL (<4.5)
=> per the task brief: introduced --tb-accent-ink (#94492a — DESIGN.md's
own M3 "secondary" role, i.e. the shade the export ACTUALLY renders
for the sale badge/price) as the text-safe sibling:
accent-ink on canvas: 6.16:1 PASS
accent-ink on white: 6.47:1 PASS
white on accent-ink FILL: 6.47:1 PASS
Raw --ll-accent/--tb-accent is now reserved for FILLS/borders only
(announce-bar mix removed; nothing else in this stylesheet paints
raw accent behind white text). Every base rule that used
var(--ll-accent) as a TEXT/icon colour (.mr-eyebrow, .mr-ulink:hover,
.mr-crumbs a:hover, .mr-card__wish.is-active) now reads
--tb-accent-ink instead. Rules that used accent for NAVIGATIONAL
hover states (.mr-nav-link.is-active, .mr-icon-btn:hover,
.mr-card__title a:hover, .mr-cart-row__title a:hover,
.mr-article__title a:hover) were switched to primary instead —
matching what the export itself actually renders (text-primary /
hover:text-primary on every one of those elements) and sidestepping
the contrast problem entirely.
- re-pointed neutrals, worst measured case across canvas/white/band/
band-alt/fill:
--mr-ink #191c18: >=14.0:1 PASS
--mr-muted #42493e: >=7.6:1 PASS
--mr-soft #63695d: >=4.6:1 PASS (tuned darker than DESIGN.md's
raw "outline" #72796d, which only cleared
4.28:1 on canvas and dropped to 3.67:1 on the
lightest band — under 4.5 everywhere it's
used as small text, e.g. .mr-card__eyebrow)
- footer (Deep-Forest enclosure, bg = primary #3d6b35):
white text (full): 6.26:1 PASS
link default rgba(255,255,255,.82): 4.82:1 PASS (export's literal
70% opacity measured 4.02:1 — FAIL —
so the resting opacity was tuned up)
link hover -> full white: 6.26:1 PASS (kept the export's
opacity-70 -> opacity-100 hover
IDEA, not a hue shift — raw accent
or accent-ink on this bg measure
1.67:1 / 1.03:1, both unusable)
- .mr-promo:hover .mr-promo__cta (caption over the photo scrim, bottom-
anchored where the gradient is darkest): raw accent measured ~2.55:1
on an approximated worst-case light photo. Switched the hover colour
to DESIGN.md's own "secondary-container" role (#fe9e78, a light
peach) which measures ~4.7:1 on the same approximation and is
reserved for dark-background contexts only (it fails badly as text
on the light canvas: 1.9-2.0:1 — never used there).
- --bs-link-color-rgb is explicitly set (aliased to --bs-primary-rgb,
so it tracks the customizer): Bootstrap paints bare via
rgba(var(--bs-link-color-rgb),1), so a bare --bs-link-color alone
leaves anchors Bootstrap-blue. --bs-btn-color is set to #fff on
.btn-primary for the same reason (theme-vars sets --bs-btn-bg only).
========================================================================== */
body.tb-theme {
/* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
--tb-primary: var(--bs-primary, #3d6b35);
--tb-primary-rgb: var(--bs-primary-rgb, 61, 107, 53);
--tb-accent: var(--ll-accent, #c26d4b);
--tb-radius: var(--bs-border-radius, 0.375rem);
--tb-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
--tb-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;
/* Text-safe sibling for the terracotta accent — see contrast audit above.
A literal, not customizer-bound (like every sibling theme's -ink /
gold literals): the customizer's accent_color remains the single
merchant-facing "accent" control; this is the platform's own fix for
using it safely as foreground copy. */
--tb-accent-ink: #94492a;
/* Misty / greenhouse palette (DESIGN.md M3 roles) */
--tb-canvas: #f9faf2; /* background / surface */
--tb-surface: #ffffff; /* surface-container-lowest: cards, header, inputs */
--tb-band: #f3f4ec; /* surface-container-low: quiet bands */
--tb-band-alt: #edefe7; /* surface-container: trust strip, card media */
--tb-fill: #e7e9e1; /* surface-container-high: placeholders */
--tb-border: #c2c9bb; /* outline-variant: hairlines */
--tb-border-strong: #72796d;/* outline: emphasised lines */
--tb-ink: #191c18; /* on-surface */
--tb-muted: #42493e; /* on-surface-variant */
--tb-soft: #63695d; /* tuned darker than raw "outline" — see audit */
--tb-peach: #fe9e78; /* secondary-container: dark-bg-only accent tint */
--tb-gold: #8a6d1f; /* star ratings — contrast-tuned, not DESIGN.md-literal */
/* Re-point the inherited base neutrals at the misty/garden palette so
every inherited mr-* surface (bands, borders, fills, muted text)
follows across shop/PDP/cart/checkout/account/blog. */
--mr-ink: var(--tb-ink);
--mr-muted: var(--tb-muted);
--mr-soft: var(--tb-soft);
--mr-surface: var(--tb-surface);
--mr-band: var(--tb-band);
--mr-band-alt: var(--tb-band-alt);
--mr-fill: var(--tb-fill);
--mr-border: var(--tb-border);
--mr-border-strong: var(--tb-border-strong);
--mr-radius: 0.375rem;
--mr-gold: var(--tb-gold);
--mr-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
/* Bootstrap paints bare via rgba(var(--bs-link-color-rgb),1) — a
bare --bs-link-color (set by storefront::head.theme-vars) alone
leaves anchors Bootstrap-blue. Alias it to --bs-primary-rgb (already
computed by theme-vars) so it tracks the customizer. */
--bs-link-color-rgb: var(--bs-primary-rgb);
background-color: var(--tb-canvas);
color: var(--tb-ink);
font-family: var(--tb-font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* --------------------------------------------------------------------------
Shape — DESIGN.md's "Soft" 6px system: gentle rounding everywhere, large
promo/tile imagery may go slightly larger (rounded-lg). No hard flatten.
-------------------------------------------------------------------------- */
body.tb-theme .mr-card__media,
body.tb-theme .mr-promo,
body.tb-theme .mr-promo__img,
body.tb-theme .mr-tile,
body.tb-theme .mr-article__media,
body.tb-theme .mr-article__media img,
body.tb-theme .form-control,
body.tb-theme .form-select,
body.tb-theme .dropdown-menu {
border-radius: var(--mr-radius);
}
/* --------------------------------------------------------------------------
Typography — Lora medium-weight serif authority; the terracotta eyebrow
uses the TEXT-SAFE accent-ink sibling (see contrast audit), never raw
accent.
-------------------------------------------------------------------------- */
body.tb-theme h1, body.tb-theme h2, body.tb-theme h3,
body.tb-theme h4, body.tb-theme h5, body.tb-theme h6,
body.tb-theme .mr-display {
font-family: var(--tb-font-head);
color: var(--tb-ink);
font-weight: 600;
letter-spacing: -0.01em;
}
body.tb-theme .mr-display {
font-size: clamp(1.75rem, 3.2vw, 2.25rem);
line-height: 1.3;
}
body.tb-theme .mr-eyebrow,
body.tb-theme .tb-eyebrow {
font-family: var(--tb-font-body);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tb-accent-ink);
}
/* --------------------------------------------------------------------------
Buttons — solid Leaf Green primary with white text (already safe — see
audit); Leaf Green ghost secondary (border only, per DESIGN.md). The
base's own hover treatments (brightness lift / fill-on-hover) already
match "a subtle shift to a lighter tint" and need no override.
-------------------------------------------------------------------------- */
body.tb-theme .mr-btn {
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.12em;
}
/* Bootstrap's own .btn-primary / .btn-link (e.g. the shared review form
submit button) — theme-vars sets --bs-btn-bg but not --bs-btn-color, and
.btn-link reads --bs-link-color (already primary, 5.96:1+ safe as text). */
body.tb-theme .btn-primary {
--bs-btn-color: #fff;
}
body.tb-theme .tb-keyline-link {
display: inline-block;
font-family: var(--tb-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tb-primary);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 0.3rem;
transition: color 0.2s ease, border-color 0.2s ease;
}
body.tb-theme .tb-keyline-link:hover { color: var(--tb-accent-ink); }
/* Underline link utility (.mr-ulink) is used across blog/cart/account/
checkout/search/mini-cart — its hover reads the text-safe accent-ink
sibling, never raw accent (3.58-3.76:1, fails). */
body.tb-theme .mr-ulink:hover { color: var(--tb-accent-ink); border-color: var(--tb-accent-ink); }
/* Breadcrumb hover (category/PDP pages) — same accent-as-text fix. */
body.tb-theme .mr-crumbs a:hover { color: var(--tb-accent-ink); }
/* Inputs — white fields, soft hairline, focus warms to Leaf Green (DESIGN.md:
"On focus, the border transitions to Leaf Green"). Never a padding
shorthand on .form-select — restore Bootstrap's caret gutter. */
body.tb-theme .form-control,
body.tb-theme .form-select {
border-color: var(--tb-border);
background-color: var(--tb-surface);
}
body.tb-theme .form-select {
padding-inline-end: 2.25rem;
}
body.tb-theme .form-control:focus,
body.tb-theme .form-select:focus {
border-color: var(--tb-primary);
box-shadow: 0 0 0 3px rgba(var(--tb-primary-rgb), 0.14);
}
/* --------------------------------------------------------------------------
Announcement + header — DESIGN.md: "Announcement Bar: Fixed to the top in
Deep Forest Green" — reuse the primary token (not a 3rd uncustomizable
literal) so the customizer stays in control. Header stays on the misty
canvas with a soft hairline; nav-active + icon hover read PRIMARY (the
export's own text-primary / hover:text-primary), not accent.
-------------------------------------------------------------------------- */
body.tb-theme .mr-announce {
background-color: var(--tb-primary);
letter-spacing: 0.16em;
font-size: 0.68rem;
}
body.tb-theme .mr-header {
background-color: var(--tb-canvas);
border-bottom: 1px solid var(--tb-border);
}
body.tb-theme .mr-logo {
font-family: var(--tb-font-head);
font-weight: 700;
color: var(--tb-primary);
}
body.tb-theme .mr-nav-link:hover { color: var(--tb-primary); }
body.tb-theme .mr-nav-link.is-active {
color: var(--tb-primary);
border-bottom-color: var(--tb-primary);
}
body.tb-theme .mr-search input {
background: var(--tb-band);
border-color: var(--tb-border);
}
body.tb-theme .mr-search input:focus {
background: var(--tb-surface);
border-color: var(--tb-primary);
box-shadow: 0 0 0 3px rgba(var(--tb-primary-rgb), 0.14);
}
body.tb-theme .mr-icon-btn:hover { color: var(--tb-primary); }
body.tb-theme .mr-badge { background-color: var(--tb-primary); }
/* --------------------------------------------------------------------------
Hero (tb-hero) — the Stitch split hero: a plain half-bleed greenhouse
photo (no scrim — the copy never sits on top of it) beside a copy panel
on the page's own canvas.
-------------------------------------------------------------------------- */
body.tb-theme .tb-hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: clamp(480px, 70vh, 760px);
background-color: var(--tb-canvas);
}
body.tb-theme .tb-hero__figure {
position: relative;
overflow: hidden;
min-height: 320px;
}
body.tb-theme .tb-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.tb-theme .tb-hero__copy {
display: flex;
align-items: center;
padding: clamp(2.5rem, 6vw, 6rem);
}
body.tb-theme .tb-hero__copy-inner { max-width: 30rem; }
body.tb-theme .tb-hero__title {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;
margin-bottom: 1.25rem;
}
body.tb-theme .tb-hero__lead {
color: var(--tb-muted);
max-width: 40ch;
margin-bottom: 1.75rem;
font-size: 1.05rem;
}
body.tb-theme .tb-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
body.tb-theme .tb-btn-hero { padding: 1rem 2rem; }
/* --------------------------------------------------------------------------
Trust strip (inherited) — the export ties its icons to PRIMARY (M3
"primary-container", which is exactly our fixed primary_color token), not
accent.
-------------------------------------------------------------------------- */
body.tb-theme .mr-trust svg { color: var(--tb-primary); }
body.tb-theme .mr-trust strong { color: var(--tb-ink); }
/* --------------------------------------------------------------------------
Product cards (inherited mr-card) — soft media well, serif title, Leaf
Green price. Hover lifts gently per DESIGN.md ("a slight lift"), using the
DESIGN.md-literal ambient shadow. Title hover reads PRIMARY (matches the
export's own hover:text-primary), not accent.
-------------------------------------------------------------------------- */
body.tb-theme .mr-card { background: transparent; }
body.tb-theme .mr-card__media { background-color: var(--tb-band-alt); }
body.tb-theme .mr-card:hover .mr-card__media {
box-shadow: var(--mr-shadow);
}
body.tb-theme .mr-card__title,
body.tb-theme .mr-card__title a {
font-family: var(--tb-font-head);
font-weight: 600;
color: var(--tb-ink);
}
body.tb-theme .mr-card__title a:hover { color: var(--tb-primary); }
body.tb-theme .mr-card__price { color: var(--tb-primary); font-weight: 600; }
body.tb-theme .mr-card__price del { color: var(--tb-soft); }
/* .mr-card__wish (persistent "already wishlisted" heart) and
.mr-card__quickview sit together on a near-white circle — restyled
together per the recurring product-card gotcha. The base already inks
the HOVER state safely via --mr-ink/--mr-surface (self-correcting); the
is-active heart fill is the one raw-accent role left, switched to the
text-safe sibling. */
body.tb-theme .mr-card__wish.is-active { color: var(--tb-accent-ink); }
body.tb-theme .mr-card__badge {
background: var(--tb-accent-ink);
letter-spacing: 0.06em;
}
/* --------------------------------------------------------------------------
Promo tiles (inherited) — softened scrim per DESIGN.md's "soft ambient"
elevation language. The hover caption switches from raw accent (measures
~2.55:1 on the darkest part of the scrim) to the peach tint, which is
reserved for dark-background contexts (see contrast audit).
-------------------------------------------------------------------------- */
body.tb-theme .mr-promo { background-color: var(--tb-band-alt); }
body.tb-theme .mr-promo:hover .mr-promo__cta {
color: var(--tb-peach);
border-color: var(--tb-peach);
}
/* --------------------------------------------------------------------------
Featured (tb-featured) / New arrivals (tb-arrivals) — thin wrappers, the
grid + card come from the base; only the subtitle copy needs a rule.
-------------------------------------------------------------------------- */
body.tb-theme .tb-featured .mr-muted,
body.tb-theme .tb-arrivals .mr-muted { font-size: 0.95rem; }
/* --------------------------------------------------------------------------
Care guide (tb-care) — the "Plants, Made Simple" band: a faint green-tint
wash, white icon medallions with a soft ambient shadow (DESIGN.md
"shadow-sm"), serif step titles.
-------------------------------------------------------------------------- */
body.tb-theme .tb-care {
background-color: var(--tb-band); /* fallback if color-mix() is unsupported */
background-color: color-mix(in srgb, var(--tb-primary) 10%, var(--tb-canvas));
}
body.tb-theme .tb-care__heading { color: var(--tb-primary); }
body.tb-theme .tb-care__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: clamp(2rem, 5vw, 3rem);
max-width: 760px;
margin-inline: auto;
}
body.tb-theme .tb-care__step { display: flex; flex-direction: column; align-items: center; }
body.tb-theme .tb-care__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 9999px;
background: var(--tb-surface);
color: var(--tb-primary);
box-shadow: var(--mr-shadow);
margin-bottom: 1.25rem;
}
body.tb-theme .tb-care__icon svg { width: 28px; height: 28px; }
body.tb-theme .tb-care__step-title { font-size: 1.1rem; margin-bottom: 0.4rem; }
body.tb-theme .tb-care__step-text { color: var(--tb-muted); }
/* --------------------------------------------------------------------------
Category tiles (inherited .mr-tile--cat) — the export's own tiles are
plain icon cards; this platform's data-driven representative-photo tile
(a real product image per category) is kept per the theme-factory
"proven inherit" precedent and retinted to the garden palette instead.
-------------------------------------------------------------------------- */
body.tb-theme .mr-tile--cat .mr-tile__scrim { background: rgba(var(--tb-primary-rgb), 0.38); }
body.tb-theme .mr-tile--cat .mr-tile__cap { font-family: var(--tb-font-head); }
/* --------------------------------------------------------------------------
Journal (tb-journal) — top-right see-all link instead of the base's
centered header; per-card eyebrow + title hover read the same
accent-ink / primary split as everywhere else.
-------------------------------------------------------------------------- */
body.tb-theme .mr-article__title a:hover { color: var(--tb-primary); }
/* --------------------------------------------------------------------------
Newsletter (tb-cta) — "The Potting Bench": centered band on a faint
terracotta wash (DESIGN.md bg-secondary-container/10), inline form.
-------------------------------------------------------------------------- */
body.tb-theme .tb-cta {
background: var(--tb-band); /* fallback if color-mix() is unsupported */
background: color-mix(in srgb, var(--tb-peach) 12%, var(--tb-canvas));
padding: clamp(4rem, 8vw, 6rem) 0;
}
body.tb-theme .tb-cta__inner { max-width: 640px; }
body.tb-theme .tb-cta__body {
color: var(--tb-muted);
max-width: 52ch;
margin-inline: auto;
}
body.tb-theme .tb-cta__form {
display: flex;
gap: 1rem;
max-width: 520px;
}
body.tb-theme .tb-cta__form input {
flex: 1;
min-width: 0;
border: 1px solid var(--tb-border);
border-radius: var(--mr-radius);
background: var(--tb-surface);
padding: 0.95rem 1.25rem;
font-size: 0.95rem;
color: var(--tb-ink);
transition: border-color 0.2s ease;
}
body.tb-theme .tb-cta__form input::placeholder { color: var(--tb-soft); }
body.tb-theme .tb-cta__form input:focus { outline: none; border-color: var(--tb-primary); }
body.tb-theme .tb-cta__note { color: var(--tb-soft); font-size: 0.78rem; }
/* --------------------------------------------------------------------------
Footer (inherited .mr-footer) — DESIGN.md: "Full-width Deep Forest Green
block. Links should be white with a 70% opacity, moving to 100% on
hover." The export's own opacity-70 -> opacity-100 pattern is kept, but
the resting opacity is tuned to 82% (4.82:1) because the literal 70%
measures 4.02:1 against this primary — see contrast audit. Column
structure (Shop / Support / Newsletter) stays the platform's functional
footer; only colour + the social icons (Connect column, per the export)
are restyled.
-------------------------------------------------------------------------- */
body.tb-theme .mr-footer {
background-color: var(--tb-primary);
border-top: 0;
}
body.tb-theme .mr-footer h4 { color: #fff; }
body.tb-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
body.tb-theme .mr-footer a:hover { color: #fff; }
body.tb-theme .mr-footer__brand { color: #fff; font-family: var(--tb-font-head); }
body.tb-theme .mr-footer .mr-muted,
body.tb-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.82); }
body.tb-theme .mr-footer .mr-social {
background: rgba(255, 255, 255, 0.1);
border-color: transparent;
color: #fff;
}
body.tb-theme .mr-footer .mr-social:hover {
background: rgba(255, 255, 255, 0.2);
border-color: transparent;
color: #fff;
}
body.tb-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.15); opacity: 1; }
/* The newsletter "Join" button would otherwise blend into the primary-
coloured footer (its own fill IS the primary token) — invert it to a
white pill so it stays visible, matching white-on-primary's 6.26:1. */
body.tb-theme .mr-footer .mr-btn--primary { background-color: #fff; color: var(--tb-primary); }
body.tb-theme .mr-footer .mr-btn--primary:hover { background-color: var(--tb-accent-ink); color: #fff; }
/* --------------------------------------------------------------------------
Reduced motion — kill decorative transitions AND hover transforms (the
card-media lift, tile/image zooms).
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.tb-theme .mr-btn,
body.tb-theme .tb-keyline-link,
body.tb-theme .mr-card__media,
body.tb-theme .mr-card__media img,
body.tb-theme .mr-tile__img,
body.tb-theme .mr-promo__img {
transition: none;
}
body.tb-theme .mr-card:hover .mr-card__media img,
body.tb-theme .mr-tile:hover .mr-tile__img,
body.tb-theme .mr-promo:hover .mr-promo__img,
body.tb-theme .mr-tile--cat:hover .mr-tile__media img {
transform: none;
}
}
/* --------------------------------------------------------------------------
Mobile (from the Stitch mobile frame): 16px margins, the split hero
stacks image-over-copy. The inherited .mr-tile--cat category tile is a
FIXED 360px height regardless of column count (app.css), so forcing 2
columns on the narrowest phones would render tall, skinny tiles — left at
the base's single-column fallback below 576px, same as zaree (the other
sibling that inherits categories.blade.php unmodified).
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.tb-theme .tb-hero { grid-template-columns: 1fr; min-height: auto; }
body.tb-theme .tb-hero__figure { min-height: 320px; }
body.tb-theme .tb-hero__copy { padding: 2.5rem 1.5rem; }
body.tb-theme .tb-hero__copy-inner { max-width: none; }
}
@media (max-width: 575.98px) {
body.tb-theme .mr-shell { padding-inline: 16px; }
body.tb-theme .tb-cta__form { flex-direction: column; }
}