/* ==========================================================================
   Sabz — practical back-garden optimism for kitchen gardening, seeds & growing
   supplies.

   Ported from the Stitch "Sabz" design (docs/templates/pending/
   stitch_77_sabz_e_commerce_homepage_storefront/…/sabz/DESIGN.md; the homepage
   code.html is authoritative where the two disagree): a fresh green-tinted
   off-white canvas, deep GARDEN GREEN for branding, primary actions and
   headline text, a grounding SOIL BROWN accent reserved for eyebrows, chips and
   metadata, Poppins headlines (600, geometric) over Source Sans 3 body/labels/
   prices, one "friendly corner" 8px radius on every button, card and field, and
   TONAL LAYERS + low-contrast hairlines instead of drop shadows.

   This theme OWNS the hero / promo (bento) / featured / sowing-seasons /
   new-arrivals / journal / newsletter home sections (sb-* markup) and INHERITS
   Modern Retail's header, footer, trust strip, categories, product card and
   every functional page. This stylesheet therefore has two jobs:

     (a) style the NEW `sb-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
         neutral tokens at the garden palette, dressing the announcement bar and
         footer in Garden Green, and inking every accent role in Soil Brown.

   Everything is scoped under `body.sb-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
   green surface follows.

   CONTRAST (measured with App\Support\Theming\ContrastChecker):
     - primary Garden Green #135528 is DARK — 8.46:1 on the canvas #f7faf4,
       8.91:1 on white, 6.88:1 on the deepest fill #e0e3de, and white-on-green
       is 8.91:1. It is safe in EVERY role: headline and body-adjacent text,
       icon, border, and as a fill carrying white text. No light-primary guard
       block is needed here (see references/gotchas.md, "A LIGHT primary_color
       breaks ~12 inherited base rules").
     - accent Soil Brown #825335 is MID-DARK and, unusually, safe BOTH ways:
       6.16:1 on the canvas, 6.49:1 on white, 5.01:1 on the deepest fill, AND
       white-on-soil is 6.49:1. So no darker "-ink" sibling is needed — the raw
       accent carries eyebrows, chips, the SALE badge, the header cart counter
       and the saved-wishlist heart at AA or better in every one of those roles.
     - --mr-soft (small captions / eyebrows / breadcrumbs — see app.css) cannot
       reuse the design's own "outline" token #71796f: that measures only
       4.08:1 on the container-low band and 3.47:1 on the deepest fill, under
       the 4.5:1 normal-text minimum. --sb-soft (#5d655c) is a deliberately
       darkened value in the same cool-grey-green family — 5.73:1 on canvas,
       6.03:1 on white, 4.66:1 on the deepest fill.
     - Garden Green bands (sowing-seasons + footer): white body copy at .88
       alpha is 7.33:1, footer link text at .82 is 6.57:1, and the section/column
       headings use the design's own on-primary-container #aaeeb2 (6.61:1).
       The ghost button's hairline is white at .55 alpha (3.91:1 against the
       green — the export's white/40 measures only 2.78:1 and misses the 3:1
       WCAG minimum for a UI component boundary).
     - Bento companion panels: Soil Brown at 12% over the canvas (#e9e6dd) and
       Garden Green at 12% (#dce6dc) — green text reads 7.14:1 / 6.95:1 and
       soil text 5.20:1 / 5.06:1 on them.
   ========================================================================== */

body.sb-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --sb-green: var(--bs-primary, #135528);
    --sb-green-rgb: var(--bs-primary-rgb, 19, 85, 40);
    /* Bootstrap 5.3 paints bare <a> as rgba(var(--bs-link-color-rgb),…);
       theme-vars sets --bs-link-color but never the -rgb triplet, so without
       this a plain content link (CMS/blog body, quick-view "Category") falls
       back to factory blue. Point it at the Garden Green. NEVER replace this
       with a bare `body.sb-theme a { color: … }` catch-all — that beats the
       base `.mr-btn--primary { color:#fff }` and blanks the hero button's
       label. */
    --bs-link-color-rgb: var(--sb-green-rgb);
    --sb-soil: var(--ll-accent, #825335);
    --sb-radius: var(--bs-border-radius, 0.5rem);
    --sb-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --sb-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Garden palette (DESIGN.md tokens, cross-checked against the export) */
    --sb-canvas: #f7faf4;       /* page canvas + card media wells (surface)   */
    --sb-low: #f1f5ef;          /* trust strip + favourites band (cont-low)   */
    --sb-mid: #ecefe9;          /* categories band (surface-container)        */
    --sb-high: #e6e9e3;         /* newsletter band (container-high)           */
    --sb-fill: #e0e3de;         /* placeholders / deepest fill (cont-highest) */
    --sb-white: #ffffff;        /* cards + panels (container-lowest)          */
    --sb-ink: #191d19;          /* on-surface                                 */
    --sb-muted: #404940;        /* on-surface-variant                         */
    --sb-soft: #5d655c;         /* darkened "outline" — see CONTRAST note     */
    --sb-leaf: #aaeeb2;         /* on-primary-container — headings on green   */
    --sb-hairline: rgba(var(--sb-green-rgb), 0.12); /* 1px green @ 10-15%     */

    /* Depth via TONAL LAYERING (DESIGN.md "Elevation & Depth"): a barely-there
       green tint on hover instead of a floating drop shadow. */
    --sb-shadow: 0 14px 30px -16px rgba(var(--sb-green-rgb), 0.18);

    /* Re-point the inherited base neutrals at the garden palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows —
       this one block restyles shop / PDP / cart / checkout / account / blog.
       --mr-surface stays WHITE on purpose: DESIGN.md puts cards and panels on
       #FFFFFF over the tinted canvas, and the base points .mr-header /
       .form-control / .mr-panel at this token, so keeping it white gives every
       inherited checkout/account panel the right lift. The body background is
       set to the canvas below instead. --mr-band-alt is the container-low tone
       because that is what the base trust strip sits on, and the export draws
       the trust strip on exactly that band. */
    --mr-ink: var(--sb-ink);
    --mr-muted: var(--sb-muted);
    --mr-soft: var(--sb-soft);
    --mr-surface: var(--sb-white);
    --mr-band: var(--sb-mid);
    --mr-band-alt: var(--sb-low);
    --mr-fill: var(--sb-fill);
    --mr-border: #dde3d9;
    --mr-border-strong: #c0c9bd;
    --mr-radius: var(--sb-radius);
    --mr-gold: var(--sb-soil);
    --mr-shadow: var(--sb-shadow);

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

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md "friendly corners": ONE 8px radius on buttons,
   cards, inputs and imagery, and explicitly no pills. Never a `padding`
   SHORTHAND on .form-select (it eats Bootstrap's reserved 2.25rem caret
   gutter — the base app.css already restores it with padding-inline-end,
   untouched here).
   -------------------------------------------------------------------------- */
body.sb-theme .form-control,
body.sb-theme .form-select,
body.sb-theme .dropdown-menu,
body.sb-theme .offcanvas,
body.sb-theme .sb-hero__media,
body.sb-theme .sb-bento__lead,
body.sb-theme .sb-bento__panel {
    border-radius: var(--sb-radius);
}

/* --------------------------------------------------------------------------
   Typography — Poppins 600 headlines with a slight negative tracking at the
   display sizes, Soil Brown tracked eyebrows, Source Sans 3 everywhere else.
   -------------------------------------------------------------------------- */
body.sb-theme h1, body.sb-theme h2, body.sb-theme h3,
body.sb-theme h4, body.sb-theme h5, body.sb-theme h6 {
    font-family: var(--sb-font-head);
    color: var(--sb-green);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.sb-theme .mr-display { font-weight: 600; letter-spacing: -0.02em; }
body.sb-theme .sb-heading { font-size: clamp(1.55rem, 2.8vw, 2rem); line-height: 1.25; }

body.sb-theme .mr-eyebrow,
body.sb-theme .sb-eyebrow {
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-soil);
}

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

/* --------------------------------------------------------------------------
   Buttons — DESIGN.md "Components": solid Garden Green primary with white text
   (8.91:1) and no shadow; secondary is transparent behind a 2px green border;
   tertiary is text-only in green with a Soil Brown hover.
   -------------------------------------------------------------------------- */
body.sb-theme .mr-btn {
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease, transform 0.1s ease;
}

body.sb-theme .mr-btn--primary {
    background-color: var(--sb-green);
    border-color: var(--sb-green);
    color: #fff;
}

body.sb-theme .mr-btn--primary:hover {
    filter: brightness(1.25);
    color: #fff;
}

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

body.sb-theme .sb-btn-outline:hover {
    background: rgba(var(--sb-green-rgb), 0.06);
    border-color: var(--sb-green);
    color: var(--sb-green);
}

body.sb-theme .sb-btn-hero { padding: 0.85rem 2rem; }

/* The quiet "View All Products" / "Read All Articles" tertiary link. */
body.sb-theme .sb-view-link {
    color: var(--sb-green);
    text-decoration: none;
    font-family: var(--sb-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.sb-theme .sb-view-link:hover {
    color: var(--sb-soil);
    border-bottom-color: currentColor;
}

/* Inputs — DESIGN.md "Input Fields": white field behind a 1px Garden Green
   hairline at 20% opacity; on focus the border goes to full opacity. The base's
   focus ring hard-codes a blue rgba, so it is re-tinted here. */
body.sb-theme .form-control,
body.sb-theme .form-select {
    background-color: var(--sb-white);
    border-color: rgba(var(--sb-green-rgb), 0.2);
    color: var(--sb-ink);
}

body.sb-theme .form-control:focus,
body.sb-theme .form-select:focus {
    border-color: var(--sb-green);
    box-shadow: 0 0 0 3px rgba(var(--sb-green-rgb), 0.16);
}

/* Restyling the border-colour above out-specifies Bootstrap's own
   `.form-control.is-invalid` (0,2,0 vs our 0,2,1), so re-assert the error state
   or every failed field silently loses its red outline. */
body.sb-theme .form-control.is-invalid,
body.sb-theme .form-select.is-invalid,
body.sb-theme .was-validated .form-control:invalid,
body.sb-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

body.sb-theme .form-control.is-invalid:focus,
body.sb-theme .form-select.is-invalid:focus {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Selection controls — "Solid Garden Green when selected." Bootstrap compiles
   its own blue into .form-check-input:checked, which theme-vars does not
   override. */
body.sb-theme .form-check-input:checked {
    background-color: var(--sb-green);
    border-color: var(--sb-green);
}

body.sb-theme .form-check-input:focus {
    border-color: var(--sb-green);
    box-shadow: 0 0 0 3px rgba(var(--sb-green-rgb), 0.16);
}

/* --------------------------------------------------------------------------
   Announcement + header — the export's primary-container green announcement
   strip, then a white sticky header under a green hairline with a Poppins
   wordmark and quiet Source Sans 3 nav.
   -------------------------------------------------------------------------- */
body.sb-theme .mr-announce {
    background-color: #2f6e3e;
    color: #fff;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
}

body.sb-theme .mr-header {
    background-color: var(--sb-white);
    border-bottom-color: var(--sb-hairline);
}

body.sb-theme .mr-logo {
    font-family: var(--sb-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sb-green);
}

body.sb-theme .mr-nav-link {
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sb-muted);
}

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

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

body.sb-theme .mr-search input {
    background: var(--sb-low);
    border-color: rgba(var(--sb-green-rgb), 0.2);
}

body.sb-theme .mr-search input:focus {
    background: var(--sb-white);
    border-color: var(--sb-green);
    box-shadow: 0 0 0 3px rgba(var(--sb-green-rgb), 0.14);
}

body.sb-theme .mr-icon-btn { color: var(--sb-green); }
body.sb-theme .mr-icon-btn:hover { color: var(--sb-soil); }

/* Header counters — the export paints the cart count in Soil Brown under white
   text (6.49:1). The wishlist counter follows. */
body.sb-theme .mr-badge { background-color: var(--sb-soil); }
body.sb-theme .mr-badge--wish { background-color: var(--sb-soil); }

/* --------------------------------------------------------------------------
   Hero (sb-hero) — the export's two-column band: copy on the LEFT, the
   rooftop-garden photograph in a rounded hairlined 4:3 frame on the RIGHT.
   Stacks copy-over-image on mobile (per the export's mobile frame).
   -------------------------------------------------------------------------- */
body.sb-theme .sb-hero {
    background: var(--sb-canvas);
    padding-block: clamp(3rem, 6vw, 5rem);
}

body.sb-theme .sb-hero__shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

body.sb-theme .sb-hero__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--sb-fill);
    border: 1px solid var(--sb-hairline);
}

body.sb-theme .sb-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s ease;
}

body.sb-theme .sb-hero:hover .sb-hero__img { transform: scale(1.04); }

body.sb-theme .sb-hero__title {
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    max-width: 18ch;
}

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

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

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export's four centred icon-over-label
   columns on the container-low band between two green hairlines. Garden Green
   icons read 8.08:1 on that band.
   -------------------------------------------------------------------------- */
/* The base trust section is the only `.mr-band--alt.border-bottom` in the whole
   theme set, so this safely gives it the export's second hairline (the design
   draws the strip with a border on BOTH edges). */
body.sb-theme .mr-band--alt.border-bottom {
    border-top: 1px solid var(--sb-hairline);
    border-bottom-color: var(--sb-hairline) !important;
}

body.sb-theme .mr-trust {
    flex-direction: column;
    text-align: center;
    gap: 0.6rem;
}

body.sb-theme .mr-trust svg { color: var(--sb-green); }

body.sb-theme .mr-trust strong {
    font-family: var(--sb-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--sb-muted);
}

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

/* --------------------------------------------------------------------------
   Promo bento (sb-bento) — the export's 12-column band: a wide photographic
   feature tile (7 cols) beside two stacked tinted text panels (5 cols).
   -------------------------------------------------------------------------- */
body.sb-theme .sb-bento {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 1.5rem;
    min-height: 500px;
}

body.sb-theme .sb-bento--solo { grid-template-columns: 1fr; }

body.sb-theme .sb-bento__lead {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background: var(--sb-fill);
    border: 1px solid var(--sb-hairline);
    min-height: 320px;
}

body.sb-theme .sb-bento__img,
body.sb-theme .sb-bento__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

body.sb-theme .sb-bento__placeholder {
    background: linear-gradient(135deg, var(--sb-fill), var(--sb-mid));
}

body.sb-theme .sb-bento__lead:hover .sb-bento__img { transform: scale(1.05); }

body.sb-theme .sb-bento__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 20, 12, 0.05) 0%, rgba(9, 20, 12, 0.62) 100%);
}

body.sb-theme .sb-bento__cap {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    color: #fff;
}

body.sb-theme .sb-bento__title {
    font-family: var(--sb-font-head);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

body.sb-theme .sb-bento__text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 34ch;
}

body.sb-theme .sb-bento__link {
    display: inline-block;
    margin-top: 0.35rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #fff;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
}

body.sb-theme .sb-bento__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    min-width: 0;
}

body.sb-theme .sb-bento__panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    text-decoration: none;
    border: 1px solid var(--sb-hairline);
    min-height: 220px;
    transition: background-color 0.25s ease;
}

body.sb-theme .sb-bento__panel--soil { background: rgba(130, 83, 53, 0.12); }
body.sb-theme .sb-bento__panel--soil:hover { background: rgba(130, 83, 53, 0.2); }
body.sb-theme .sb-bento__panel--green { background: rgba(var(--sb-green-rgb), 0.07); }
body.sb-theme .sb-bento__panel--green:hover { background: rgba(var(--sb-green-rgb), 0.13); }

body.sb-theme .sb-bento__eyebrow {
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-soil);
    margin-bottom: 0.5rem;
}

body.sb-theme .sb-bento__panel--green .sb-bento__eyebrow { color: var(--sb-green); }

body.sb-theme .sb-bento__panel-title {
    font-family: var(--sb-font-head);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sb-green);
    margin-bottom: 0.65rem;
}

body.sb-theme .sb-bento__arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sb-green);
}

body.sb-theme .sb-bento__arrow svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

body.sb-theme .sb-bento__panel:hover .sb-bento__arrow svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Grower Favourites (sb-featured) + New This Season (sb-fresh) — a calm
   container-low band, then the plain canvas.
   -------------------------------------------------------------------------- */
body.sb-theme .sb-featured { background: var(--sb-low); }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — DESIGN.md "Cards": white background, 8px
   radius, no shadow, a 1px Garden Green stroke at low opacity to define the
   boundary. Because this child gives the card a background AND a border, it
   MUST inset its own text (see references/gotchas.md — the base card is
   borderless, so its title and price sit flush by design and would otherwise
   collide with the new edge). The price is the design's "Price Display" role:
   Source Sans 3 700 in Garden Green.
   -------------------------------------------------------------------------- */
body.sb-theme .mr-card {
    background: var(--sb-white);
    border: 1px solid var(--sb-hairline);
    border-radius: var(--sb-radius);
    padding: 1rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

body.sb-theme .mr-card:hover {
    box-shadow: var(--sb-shadow);
    border-color: rgba(var(--sb-green-rgb), 0.28);
}

body.sb-theme .mr-card__media {
    aspect-ratio: 1 / 1;
    background-color: var(--sb-canvas);
    border-radius: calc(var(--sb-radius) * 0.75);
    margin-bottom: 1rem;
}

body.sb-theme .mr-card__title,
body.sb-theme .mr-card__title a {
    font-family: var(--sb-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sb-green);
}

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

body.sb-theme .mr-card__eyebrow {
    font-family: var(--sb-font-body);
    letter-spacing: 0.03em;
    text-transform: none;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--sb-muted);
}

body.sb-theme .mr-card__price {
    font-family: var(--sb-font-body);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--sb-green);
}

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

/* Sale / demo chip — the export pins a small Soil Brown chip with white text
   (6.49:1) at the top of the media well. The shared theme-vars block styles
   `.mr-card__badge` as a red pill, so this re-inks it to the design's square
   Soil Brown label; the demo chip keeps its own inline grey. */
body.sb-theme .mr-card__badge {
    background: var(--sb-soil);
    color: #fff;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.22rem 0.6rem;
    border-radius: 0.25rem;
}

/* The slide-up quick-add already fills with --bs-primary under white text
   (8.91:1 on the Garden Green), so only its typography needs the design's
   sentence-case label treatment. */
body.sb-theme .mr-card__quick {
    font-family: var(--sb-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    border-radius: 0 0 calc(var(--sb-radius) * 0.75) calc(var(--sb-radius) * 0.75);
}

/* The wishlist heart's "saved" state — the base default is the raw accent,
   which here is the Soil Brown and measures 6.49:1 on the white overlay
   circle, so it is left alone and only restated for clarity. The heart's and
   the eye's default/hover states read --bs-primary / --mr-ink on a white
   --mr-surface from the base fix, both safe against the Garden Green
   (8.91:1 / 17.06:1). */
body.sb-theme .mr-card__wish.is-active { color: var(--sb-soil); }

/* --------------------------------------------------------------------------
   Sow by the Season (sb-seasons) — the export's Garden Green planner band:
   a centred heading over three translucent cards, each an icon medallion, the
   season name, the crops that suit it and a ghost button.
   -------------------------------------------------------------------------- */
body.sb-theme .sb-seasons {
    background: var(--sb-green);
    padding: clamp(3.5rem, 8vw, 5rem) 0;
}

body.sb-theme .sb-seasons__heading {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -0.02em;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.sb-theme .sb-seasons__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--sb-radius);
}

body.sb-theme .sb-seasons__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body.sb-theme .sb-seasons__icon svg { width: 30px; height: 30px; }

body.sb-theme .sb-seasons__title {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

body.sb-theme .sb-seasons__text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 30ch;
    margin-bottom: 1.5rem;
}

body.sb-theme .sb-seasons__btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--sb-radius);
    font-family: var(--sb-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.sb-theme .sb-seasons__btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat) — the export's centred heading over four
   square scrimmed tiles with a Poppins label. The base keeps its real-category
   + representative-photo behaviour, which scales to any merchant's catalogue.
   -------------------------------------------------------------------------- */
/* `.mr-band` is the base's categories section and nothing else in the whole
   modern-retail view set, so centring its display heading safely reproduces the
   export's centred "Shop by Category" without forking the partial. */
body.sb-theme .mr-band .mr-display { text-align: center; }

body.sb-theme .mr-tile--cat { aspect-ratio: 1 / 1; height: auto; border: 1px solid var(--sb-hairline); }

body.sb-theme .mr-tile--cat .mr-tile__scrim { background: rgba(9, 20, 12, 0.34); }

body.sb-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--sb-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

body.sb-theme .mr-tile__placeholder {
    background: linear-gradient(135deg, var(--sb-fill), var(--sb-mid));
}

/* --------------------------------------------------------------------------
   Journal (sb-journal) — left heading with a right-aligned see-all link, 16:9
   covers, a Soil Brown category chip and Poppins article titles.
   -------------------------------------------------------------------------- */
body.sb-theme .sb-journal__media { aspect-ratio: 16 / 9; }

body.sb-theme .sb-journal__chip {
    display: inline-block;
    background: var(--sb-soil);
    color: #fff;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.7rem;
    border-radius: 0.25rem;
}

body.sb-theme .mr-article__title a { color: var(--sb-green); }
body.sb-theme .mr-article__title a:hover { color: var(--sb-soil); }

/* --------------------------------------------------------------------------
   Newsletter (sb-cta) — "The Sowing Calendar": a full-width centred band on
   the container-high surface with a white field beside the solid green
   Subscribe button.
   -------------------------------------------------------------------------- */
body.sb-theme .sb-cta {
    background: var(--sb-high);
    padding: clamp(3.5rem, 8vw, 5rem) 0;
}

body.sb-theme .sb-cta__inner { max-width: 680px; }

body.sb-theme .sb-cta__heading {
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -0.02em;
}

body.sb-theme .sb-cta__body {
    color: var(--sb-muted);
    font-size: 1.1rem;
    max-width: 52ch;
}

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

body.sb-theme .sb-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--sb-white);
    border: 1px solid rgba(var(--sb-green-rgb), 0.2);
    border-radius: var(--sb-radius);
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    color: var(--sb-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

body.sb-theme .sb-cta__form input:focus {
    outline: none;
    border-color: var(--sb-green);
    box-shadow: 0 0 0 3px rgba(var(--sb-green-rgb), 0.16);
}

body.sb-theme .sb-cta__btn {
    border: 0;
    background: var(--sb-green);
    color: #fff;
    border-radius: var(--sb-radius);
    padding: 0.85rem 2.25rem;
    font-family: var(--sb-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s ease;
}

body.sb-theme .sb-cta__btn:hover { filter: brightness(1.25); }

body.sb-theme .sb-cta__note { color: var(--sb-soft); font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the export's footer sits on the same Garden
   Green as the planner band.
   -------------------------------------------------------------------------- */
body.sb-theme .mr-footer {
    background-color: var(--sb-green);
    border-top: 0;
    color: rgba(255, 255, 255, 0.82);
}

body.sb-theme .mr-footer h4 {
    color: var(--sb-leaf);
    font-family: var(--sb-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.sb-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--sb-font-head);
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.sb-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
/* On the green fill the Soil Brown accent (the base's hover colour) measures
   only 1.37:1, so brighten to white instead — the same pattern hunza-harvest /
   karak-bazaar use for a dark footer. */
body.sb-theme .mr-footer a:hover { color: #fff; }

body.sb-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    border-radius: var(--sb-radius);
}

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

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

body.sb-theme .mr-ulink { color: var(--sb-green); }
body.sb-theme .mr-ulink:hover { color: var(--sb-soil); border-color: var(--sb-soil); }

body.sb-theme .mr-divider { background-color: var(--mr-border); }

body.sb-theme .mr-brandstrip span {
    font-family: var(--sb-font-head);
    font-weight: 600;
    color: var(--sb-soft);
}

/* --------------------------------------------------------------------------
   Accent-as-text guards on the INHERITED functional pages. Both brand colours
   are AA-safe on the light canvas here, so this section is small: it only
   re-tints the roles whose base value would land on a DARK surface, plus the
   focus ring.
   -------------------------------------------------------------------------- */
body.sb-theme .mr-crumbs a:hover,
body.sb-theme .mr-cart-row__title a:hover {
    color: var(--sb-soil);
}

body.sb-theme .mr-tabs .nav-link.active {
    color: var(--sb-green);
    border-bottom-color: var(--sb-soil);
}

/* The base's white "light" button flips to an accent fill on hover; it only
   appears on dark bands, so flip to the green fill instead for a single
   on-palette read. */
body.sb-theme .mr-btn--light {
    background-color: #fff;
    color: var(--sb-green);
}

body.sb-theme .mr-btn--light:hover {
    background-color: rgba(255, 255, 255, 0.86);
    color: var(--sb-green);
}

/* Focus ring — the base draws it in the raw accent (Soil Brown), which is
   6.16:1 on the canvas but only 1.37:1 on the Garden Green planner band and
   footer. Use the green on light surfaces (8.46:1) and white inside the two
   green bands (8.91:1). */
body.sb-theme a:focus-visible,
body.sb-theme button:focus-visible,
body.sb-theme input:focus-visible {
    outline: 2px solid var(--sb-green);
    outline-offset: 2px;
}

body.sb-theme .sb-seasons a:focus-visible,
body.sb-theme .sb-seasons button:focus-visible,
body.sb-theme .mr-footer a:focus-visible,
body.sb-theme .mr-footer button:focus-visible {
    outline-color: #fff;
}

/* --------------------------------------------------------------------------
   Reduced motion — the hero zoom, bento scale, arrow nudge and card lift are
   all decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.sb-theme .mr-btn,
    body.sb-theme .mr-card,
    body.sb-theme .sb-hero__img,
    body.sb-theme .sb-bento__img,
    body.sb-theme .sb-bento__panel,
    body.sb-theme .sb-bento__arrow svg,
    body.sb-theme .sb-seasons__btn,
    body.sb-theme .sb-cta__btn,
    body.sb-theme .mr-card__media img,
    body.sb-theme .mr-tile__img,
    body.sb-theme .mr-tile__media img {
        transition: none;
    }

    body.sb-theme .sb-hero:hover .sb-hero__img,
    body.sb-theme .sb-bento__lead:hover .sb-bento__img,
    body.sb-theme .sb-bento__panel:hover .sb-bento__arrow svg {
        transform: none;
    }

    /* Also neutralise the inherited hover-scale transforms (the base's
       reduced-motion block only kills their transition). */
    body.sb-theme .mr-card:hover .mr-card__media img,
    body.sb-theme .mr-tile:hover .mr-tile__img,
    body.sb-theme .mr-tile--cat:hover .mr-tile__media img {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero stacks copy-over-photo,
   the bento collapses to one column, the planner cards stack, and the
   newsletter form goes vertical.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.sb-theme .sb-hero__shell { grid-template-columns: 1fr; gap: 2rem; }
    body.sb-theme .sb-hero__title { max-width: none; font-size: clamp(1.7rem, 7vw, 2.1rem); }
    body.sb-theme .sb-hero__lead { font-size: 1rem; margin-bottom: 1.5rem; }
    body.sb-theme .sb-hero__media { order: -1; }

    body.sb-theme .sb-bento { grid-template-columns: 1fr; min-height: 0; gap: 1rem; }
    body.sb-theme .sb-bento__lead { min-height: 300px; }
    body.sb-theme .sb-bento__side { grid-template-rows: auto auto; gap: 1rem; }
    body.sb-theme .sb-bento__panel { min-height: 170px; padding: 1.5rem; }
    body.sb-theme .sb-bento__cap { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
}

@media (max-width: 575.98px) {
    body.sb-theme .sb-cta__form { flex-direction: column; }
    body.sb-theme .sb-cta__btn { width: 100%; }
    body.sb-theme .sb-hero__actions .sb-btn-hero { flex: 1 1 auto; text-align: center; }
}