/* ==========================================================================
   Bloom Post — romantic botanical minimalism for a cut-flower studio.

   Ported from the Stitch "Bloom Post" export (docs/templates/pending/
   stitch_70_bloom_post_e_commerce_experience/…/bloom_post/DESIGN.md plus the
   rendered homepage code.html, which wins where the two disagree): a warm
   Petal White canvas instead of pure white, a deep Rose that carries every
   call to action and the footer, a Leaf Green reassurance colour for
   eyebrows / labels / the same-day band, pill-shaped buttons against softly
   rounded (12px) photography, and "flower-soft" rose-tinted diffusion in
   place of grey shadows.

   This theme OWNS the hero / shop-by-occasion / featured / same-day-promise /
   categories / journal / newsletter home sections (bp-* markup) and INHERITS
   Modern Retail's header, footer, trust strip, promo tiles, new-arrivals,
   product card and every functional page. This stylesheet therefore has two
   jobs:

     (a) style the NEW `bp-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the petal-white palette, dressing the announce
         bar in leaf green and the footer in rose, rounding the card media,
         and inking prices in rose.

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

   CONTRAST (sRGB relative-luminance arithmetic, checked at authoring time,
   measured against the Petal White canvas #fdf7f6 unless stated):
     - primary Rose #973550 is DARK — 6.74:1 on petal white and 7.14:1 under
       white text. Safe as text, as an icon and as a fill carrying white
       text, so this theme needs NONE of the light-primary guard rules that
       a near-white primary forces onto the inherited base (.mr-badge,
       .mr-cta, .mr-page.is-active, .btn-primary, …).
     - accent Leaf Green #406740 is ALSO dark enough for text — 6.13:1 on
       petal and 6.50:1 under white — so it is safe in BOTH roles (eyebrows,
       journal labels, the SALE chip, the same-day band fill). This is the
       export's own rendered `secondary` token. DESIGN.md's PROSE names a
       lighter "Leaf Green #557D54", which measures only 4.45:1 on petal —
       it clears normal body text by a hair but fails the 4.5:1 line for the
       small tracked caps that are this theme's signature. The rendered
       template wins, and no "-ink" sibling is needed as a result.
     - --bp-rose-bright #b64d68 (the design's `primary-container`) is 4.66:1
       on petal — fine for body copy but marginal for 12px tracked caps, so
       it is reserved for DECORATIVE fills: the hero petal panel and gradient
       washes. It is never a text colour.
     - --bp-soft (small captions / breadcrumbs / struck prices) cannot reuse
       the design's own `outline` token #887175: that measures 4.25:1 on
       petal, under the 4.5:1 normal-text minimum. #6b585a is a deliberately
       darkened value in the same warm rose-brown family and clears 6.25:1.
     - ink #2d2929 is 13.56:1 and muted #554245 is 8.80:1 on petal.
     - Translucent white over the two brand fills was measured as a real
       alpha blend, not guessed: the footer's rgba(255,255,255,.82) over the
       rose composites to #ecdbe0 = 5.36:1, .mr-social's .90 = 6.12:1, and
       the promise band's .88 over the leaf = 5.48:1 — all clear AA.
   ========================================================================== */

body.bp-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --bp-rose: var(--bs-primary, #973550);
    --bp-rose-rgb: var(--bs-primary-rgb, 151, 53, 80);
    /* 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 rose. NOTE: deliberately NOT a
       bare `body.bp-theme a { color: … }` rule — that is only (0,1,2) and
       would out-specify the base `.mr-btn--primary { color:#fff }` (0,1,0),
       repainting the hero button's label rose-on-rose. */
    --bs-link-color-rgb: var(--bp-rose-rgb);
    --bp-leaf: var(--ll-accent, #406740);
    --bp-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
    --bp-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Morning rose-garden palette (DESIGN.md "Colors" + the export's tokens) */
    --bp-petal: #fdf7f6;          /* page canvas + header (surface)           */
    --bp-container-low: #f8f2f1;  /* quiet bands                              */
    --bp-container: #f2edec;      /* collections band + newsletter band       */
    --bp-container-high: #ede7e6; /* media wells / fills                      */
    --bp-white: #ffffff;          /* surface-container-lowest                 */
    --bp-ink: #2d2929;            /* on-surface (charcoal, not pure black)    */
    --bp-muted: #554245;          /* on-surface-variant                       */
    --bp-soft: #6b585a;           /* darkened "outline" — see CONTRAST note   */
    --bp-rose-bright: #b64d68;    /* primary-container — DECORATIVE only      */
    --bp-petal-fill: #ffd9df;     /* primary-fixed — the hero's rotated panel */
    --bp-leaf-tint: #d7ecd4;      /* secondary-container wash — chip fill     */
    --bp-leaf-ink: #294f2b;       /* on-secondary-fixed-variant — chip text   */

    /* Shape: pill buttons (the customizer token) against 12px photography —
       DESIGN.md "Cards … soften the layout" / "Buttons … pill-shaped". The
       card radius is deliberately its OWN value, not the button token, so a
       merchant switching to square buttons does not square the imagery. */
    --bp-radius-card: 0.75rem;
    --bp-radius-input: 0.5rem;

    /* "Flower-Soft" elevation — a low-opacity rose diffusion, never grey
       (DESIGN.md "Elevation & Depth"). */
    --bp-shadow: 0 14px 34px -12px rgba(var(--bp-rose-rgb), 0.14);

    /* Re-point the inherited base neutrals at the petal-white palette so
       every inherited mr-* surface (bands, borders, fills, muted text)
       warms — this single block restyles shop / PDP / cart / checkout /
       account / blog without any page override. Borders read a rose-tinted
       hairline via color-mix, with a literal fallback. */
    --mr-ink: var(--bp-ink);
    --mr-muted: var(--bp-muted);
    --mr-soft: var(--bp-soft);
    --mr-surface: var(--bp-white);
    --mr-band: var(--bp-container);
    --mr-band-alt: var(--bp-container-low);
    --mr-fill: var(--bp-container-high);
    --mr-border: #f0dfe0;
    --mr-border: color-mix(in srgb, var(--bp-rose) 11%, var(--bp-petal));
    --mr-border-strong: #dbc0c4;
    --mr-border-strong: color-mix(in srgb, var(--bp-rose) 28%, var(--bp-petal));
    --mr-radius: var(--bp-radius-card);
    --mr-gold: var(--bp-rose);
    --mr-shadow: var(--bp-shadow);

    background-color: var(--bp-petal);
    color: var(--bp-ink);
    font-family: var(--bp-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — the pill button token (--bs-border-radius: 2rem) also
   drives Bootstrap's inputs, dropdowns and offcanvas, which DESIGN.md
   explicitly wants at the "professional, trustworthy" 8px instead. Pull them
   back. NEVER a `padding` SHORTHAND on .form-select — it would collapse
   Bootstrap's reserved 2.25rem caret gutter (the base app.css already
   restores it with padding-inline-end; untouched here).
   -------------------------------------------------------------------------- */
body.bp-theme .form-control,
body.bp-theme .form-select,
body.bp-theme .dropdown-menu,
body.bp-theme .offcanvas,
body.bp-theme .mr-panel,
body.bp-theme .mr-auth-card {
    border-radius: var(--bp-radius-input);
}

body.bp-theme .mr-card__media,
body.bp-theme .mr-promo,
body.bp-theme .mr-promo__img,
body.bp-theme .mr-tile,
body.bp-theme .mr-gallery__main,
body.bp-theme .mr-gallery__thumb,
body.bp-theme .mr-cart-row__media,
body.bp-theme .bp-hero__media,
body.bp-theme .bp-occasion,
body.bp-theme .bp-article__media {
    border-radius: var(--bp-radius-card);
}

/* --------------------------------------------------------------------------
   Typography — Lora headlines in the charcoal ink, tracked leaf-green
   eyebrows, bold Source Sans prices (DESIGN.md "Currency … bolder weight").
   -------------------------------------------------------------------------- */
body.bp-theme h1, body.bp-theme h2, body.bp-theme h3,
body.bp-theme h4, body.bp-theme h5, body.bp-theme h6 {
    font-family: var(--bp-font-head);
    color: var(--bp-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.bp-theme .bp-section-title {
    font-family: var(--bp-font-head);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--bp-ink);
}

body.bp-theme .mr-eyebrow,
body.bp-theme .bp-eyebrow {
    font-family: var(--bp-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-leaf);
}

body.bp-theme .mr-muted { color: var(--bp-muted); }
body.bp-theme .mr-soft { color: var(--bp-soft); }

/* --------------------------------------------------------------------------
   Buttons — solid rose pill primary, rose 2px-outline secondary (DESIGN.md
   "Components: Buttons"). The hover deepens rather than brightening: the
   base's brightness(1.18) would lift the rose toward the light
   primary-container and drop white-on-fill under AA.
   -------------------------------------------------------------------------- */
body.bp-theme .mr-btn {
    font-family: var(--bp-font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    font-size: 0.85rem;
}

body.bp-theme .mr-btn--primary {
    background-color: var(--bp-rose);
    border-color: var(--bp-rose);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(var(--bp-rose-rgb), 0.55);
}

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

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

body.bp-theme .bp-btn-outline:hover {
    background: rgba(var(--bp-rose-rgb), 0.07);
    border-color: var(--bp-rose);
    color: var(--bp-rose);
}

body.bp-theme .mr-btn--outline { border-color: var(--bp-rose); color: var(--bp-rose); }
body.bp-theme .mr-btn--outline:hover { background-color: var(--bp-rose); color: #fff; }

/* The base --light button hovers into the raw accent; leaf green with white
   text is 6.5:1, so that is safe here — but keep the rose identity instead. */
body.bp-theme .mr-btn--light { color: var(--bp-rose); }
body.bp-theme .mr-btn--light:hover { background-color: var(--bp-rose); color: #fff; }

body.bp-theme .bp-btn-hero { padding: 1rem 2.25rem; }

/* The tracked rose keyline link — the template's "View Best Sellers"
   affordance (text-primary with an underline). */
body.bp-theme .bp-view-link {
    color: var(--bp-rose);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--bp-rose);
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.bp-theme .bp-view-link:hover { color: var(--bp-ink); border-color: var(--bp-ink); }

body.bp-theme .mr-ulink:hover { color: var(--bp-rose); border-color: var(--bp-rose); }

/* Inputs — thin hairline on white, focus draws the rose border (DESIGN.md
   "Input Fields: … On focus, the border transitions to Rose"). Because
   `body.bp-theme .form-control` is (0,2,1) it out-specifies Bootstrap's own
   `.form-control.is-invalid` (0,2,0), so the invalid border-color has to be
   re-asserted explicitly or validation errors would render un-flagged. */
body.bp-theme .form-control,
body.bp-theme .form-select {
    background-color: var(--bp-white);
    border-color: var(--mr-border-strong);
    color: var(--bp-ink);
}

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

body.bp-theme .form-control.is-invalid,
body.bp-theme .form-select.is-invalid,
body.bp-theme .was-validated .form-control:invalid,
body.bp-theme .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

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

/* --------------------------------------------------------------------------
   Announcement + header — the export's leaf-green delivery strip, then the
   petal-white header under a rose-tinted hairline: a Lora rose wordmark and
   quiet Source Sans nav. The base mixes the accent 62% with black for the
   announce fill; the template uses the accent itself (white on it is 6.5:1).
   -------------------------------------------------------------------------- */
body.bp-theme .mr-announce {
    background-color: var(--bp-leaf);
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 600;
}

body.bp-theme .mr-header {
    background-color: var(--bp-petal);
    border-bottom-color: var(--mr-border);
}

body.bp-theme .mr-logo {
    font-family: var(--bp-font-head);
    font-weight: 600;
    color: var(--bp-rose);
}

body.bp-theme .mr-nav-link {
    font-family: var(--bp-font-body);
    color: var(--bp-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

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

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

body.bp-theme .mr-search input {
    background: var(--bp-container-low);
    border-color: var(--mr-border);
}

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

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

/* --------------------------------------------------------------------------
   Hero (bp-hero) — the split editorial opener: copy left, the bouquet
   photograph right in a 12px well with a rotated blush petal panel behind it.
   -------------------------------------------------------------------------- */
body.bp-theme .bp-hero {
    background: var(--bp-petal);
    padding-block: clamp(3rem, 7vw, 5.5rem);
    overflow: hidden;
}

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

body.bp-theme .bp-hero__chip {
    display: inline-block;
    background: var(--bp-leaf-tint);
    color: var(--bp-leaf-ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
}

body.bp-theme .bp-hero__title {
    font-family: var(--bp-font-head);
    color: var(--bp-ink);
    font-size: clamp(2.25rem, 4.6vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

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

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

/* The copy column shares a grid cell edge with the rotated petal panel on
   narrow desktops — keep it above the decoration unconditionally. */
body.bp-theme .bp-hero__copy { position: relative; z-index: 2; }

body.bp-theme .bp-hero__figure { position: relative; }

/* The rotated blush panel is DECORATIVE — a fill, never a text backdrop. */
body.bp-theme .bp-hero__petal {
    position: absolute;
    inset: -1.25rem;
    background: var(--bp-petal-fill);
    border-radius: 2.5rem;
    transform: rotate(3deg);
    transition: transform 0.5s ease;
    z-index: 0;
}

body.bp-theme .bp-hero__figure:hover .bp-hero__petal { transform: rotate(1deg); }

body.bp-theme .bp-hero__media {
    position: relative;
    z-index: 1;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--bp-container-high);
    box-shadow: var(--bp-shadow);
}

body.bp-theme .bp-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export's rose icons over single
   tracked caps labels on the quiet tonal band.
   -------------------------------------------------------------------------- */
body.bp-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

body.bp-theme .mr-trust svg { color: var(--bp-rose); }

body.bp-theme .mr-trust strong {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bp-ink);
}

/* --------------------------------------------------------------------------
   Shop by Occasion (bp-occasions) — the bloom-post-only band of square photo
   medallions with the occasion name across the bottom under a soft scrim.
   -------------------------------------------------------------------------- */
/* Stated rather than inherited: the export keeps this band on the plain
   petal canvas, so a future change to --mr-band cannot tint it by accident. */
body.bp-theme .bp-occasions { background: var(--bp-petal); }

body.bp-theme .bp-occasion {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--bp-container-high);
    text-decoration: none;
}

body.bp-theme .bp-occasion__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

body.bp-theme .bp-occasion:hover .bp-occasion__img { transform: scale(1.08); }

body.bp-theme .bp-occasion__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bp-petal-fill), var(--bp-container-high));
}

/* The scrim is what makes the white name legible over an arbitrary merchant
   photo — never remove it, only re-tint. */
body.bp-theme .bp-occasion__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 27, 27, 0.05) 40%, rgba(29, 27, 27, 0.58) 100%);
    transition: background-color 0.3s ease;
}

body.bp-theme .bp-occasion:hover .bp-occasion__scrim {
    background: linear-gradient(180deg, rgba(29, 27, 27, 0.2) 30%, rgba(29, 27, 27, 0.68) 100%);
}

body.bp-theme .bp-occasion__title {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1.35rem;
    z-index: 2;
    text-align: center;
    color: #fff;
    font-family: var(--bp-font-body);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited mr-promo) — the export's three wide collection
   tiles: a dark bottom-up gradient carrying a Lora white title over a small
   tracked underlined caption. The base's hover re-inks the caption with the
   theme's own text pair, which is safe on this dark scrim; force white so it
   never sinks into the photograph.
   -------------------------------------------------------------------------- */
body.bp-theme .mr-promo { aspect-ratio: 16 / 10; }

body.bp-theme .mr-promo__scrim {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 100%);
}

body.bp-theme .mr-promo__title {
    font-family: var(--bp-font-head);
    font-weight: 500;
    color: #fff;
}

body.bp-theme .mr-promo__cta {
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 0.25rem;
}

/* The base's `.mr-promo:hover .mr-promo__cta` is (0,0,3,0); this override has
   to carry the same descendant shape or it loses on specificity. */
body.bp-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: #fff;
}

/* --------------------------------------------------------------------------
   Featured ("Most Gifted") — a quiet band with the left-aligned heading /
   intro pair and the rose see-all link on the right.
   -------------------------------------------------------------------------- */
body.bp-theme .bp-featured { background: var(--bp-petal); }

body.bp-theme .bp-featured__intro {
    color: var(--bp-muted);
    font-size: 1rem;
    max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export keeps its cards borderless
   on the petal canvas (photo, name, tagline, rose price), so no card
   background or border is added here; that also keeps the base's flush text
   layout correct, since a filled/bordered .mr-card would need its own insets.
   -------------------------------------------------------------------------- */
body.bp-theme .mr-card__media { background-color: var(--bp-container-high); }

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

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

body.bp-theme .mr-card__eyebrow {
    color: var(--bp-soft);
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.82rem;
    font-weight: 400;
}

body.bp-theme .mr-card__price {
    color: var(--bp-rose);
    font-weight: 700;
    font-size: 1.05rem;
}

body.bp-theme .mr-card__price del { color: var(--bp-soft); font-weight: 400; }

/* The export's SALE chip is a leaf-green pill with white caps — 6.5:1. */
body.bp-theme .mr-card__sale {
    background-color: var(--bp-leaf);
    color: #fff;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem;
}

/* The two round overlay controls are SIBLINGS with different names — restyle
   them together. The base already gives them var(--mr-surface) on
   var(--mr-ink) (13.4:1 here) at rest and var(--bs-primary) at default, both
   safe against this dark rose. Only the heart's "saved" state hardcodes the
   raw accent; leaf green on the white disc is 6.5:1, but the rose reads as
   the "saved" signal in this palette. Kept perfectly round — no flatten
   block in this theme, but stated explicitly so a future edit cannot square
   the <button>-for-signed-in / <a>-for-guests heart. */
body.bp-theme .mr-card__wish,
body.bp-theme .mr-card__quickview {
    border-radius: 9999px;
    color: var(--bp-rose);
}

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

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

body.bp-theme .mr-card__quick {
    background-color: var(--bp-rose);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Same-day promise band (bp-promise) — the bloom-post-only full-width leaf
   band: an uppercase Lora promise, translucent-white body copy (the export
   puts on-secondary-container here, ~1.2:1 — unusable) and a white pill
   button carrying the leaf ink (6.5:1).
   -------------------------------------------------------------------------- */
body.bp-theme .bp-promise {
    background: var(--bp-leaf);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

body.bp-theme .bp-promise__title {
    font-family: var(--bp-font-head);
    color: #fff;
    font-size: clamp(1.65rem, 3.4vw, 2.5rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

body.bp-theme .bp-promise__body {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    max-width: 62ch;
    margin: 0 auto 2rem;
}

body.bp-theme .bp-promise__btn {
    background: #fff;
    border-color: #fff;
    color: var(--bp-leaf);
    padding: 1rem 2.5rem;
}

body.bp-theme .bp-promise__btn:hover {
    background: var(--bp-petal);
    border-color: var(--bp-petal);
    color: var(--bp-leaf);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Collections (bp-cats) — circular photo medallions with the name below and
   a rose ring on hover. The inner element is the shared product-image
   component, so it must NOT be given sizing beyond filling its disc.
   -------------------------------------------------------------------------- */
body.bp-theme .bp-cats { background: var(--bp-container); }

body.bp-theme .bp-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

body.bp-theme .bp-cat__disc {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    max-width: 100%;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--bp-container-high);
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

body.bp-theme .bp-cat:hover .bp-cat__disc { border-color: var(--bp-rose); }

body.bp-theme .bp-cat__disc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.bp-theme .bp-cat__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bp-petal-fill), var(--bp-container-high));
}

body.bp-theme .bp-cat__name {
    font-family: var(--bp-font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-ink);
    text-align: center;
}

body.bp-theme .bp-cat:hover .bp-cat__name { color: var(--bp-rose); }

/* --------------------------------------------------------------------------
   Journal (bp-journal) — 16:9 rounded covers, leaf-green category labels,
   Lora headlines that ink rose on hover.
   -------------------------------------------------------------------------- */
body.bp-theme .bp-journal { background: var(--bp-petal); }

body.bp-theme .bp-article__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; }

body.bp-theme .bp-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

body.bp-theme .bp-article__media:hover img { transform: scale(1.05); }

body.bp-theme .bp-article__title {
    font-family: var(--bp-font-head);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.3;
}

body.bp-theme .mr-article__title a { color: var(--bp-ink); text-decoration: none; }
body.bp-theme .mr-article__title a:hover { color: var(--bp-rose); }

/* --------------------------------------------------------------------------
   Newsletter (bp-cta) — "In Bloom": a quiet tonal band (NOT the base's dark
   navy block) with a centred Lora heading and a single-row pill form.
   -------------------------------------------------------------------------- */
body.bp-theme .bp-cta {
    background: var(--bp-container);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

body.bp-theme .bp-cta__inner {
    max-width: 30rem;
    margin-inline: auto;
}

body.bp-theme .bp-cta__title {
    font-family: var(--bp-font-head);
    color: var(--bp-ink);
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

body.bp-theme .bp-cta__body {
    color: var(--bp-muted);
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
}

body.bp-theme .bp-cta__form {
    display: flex;
    gap: 0.75rem;
}

body.bp-theme .bp-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--bp-petal);
    border: 1px solid var(--mr-border-strong);
    border-radius: 9999px;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    color: var(--bp-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

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

body.bp-theme .bp-cta__btn {
    border: 0;
    background: var(--bp-rose);
    color: #fff;
    border-radius: 9999px;
    padding: 0.85rem 2rem;
    font-family: var(--bp-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.25s ease;
}

body.bp-theme .bp-cta__btn:hover:not(:disabled) { filter: brightness(0.86); }
body.bp-theme .bp-cta__btn:disabled { opacity: 0.75; cursor: default; }

body.bp-theme .bp-cta__note { color: var(--bp-soft); font-size: 0.78rem; margin-top: 0.85rem; }

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the deep-rose footer (the export's footer is
   the primary fill carrying on-primary white), plus the pagination /
   filter / step accents the base paints with --bs-primary (all safe here,
   since the rose is dark).
   -------------------------------------------------------------------------- */
body.bp-theme .mr-footer {
    background-color: var(--bp-rose);
    border-top: 0;
    color: rgba(255, 255, 255, 0.82);
}

body.bp-theme .mr-footer h4 { color: #fff; }

body.bp-theme .mr-footer__brand {
    color: #fff;
    font-family: var(--bp-font-head);
    font-weight: 600;
}

body.bp-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
/* The leaf accent is tuned for the LIGHT canvas and would sink into this rose
   one, so brighten to white on hover instead. */
body.bp-theme .mr-footer a:hover { color: #fff; }

body.bp-theme .mr-social {
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
}

body.bp-theme .mr-social:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--bp-rose);
}

body.bp-theme .mr-divider { border-color: var(--mr-border); opacity: 1; }

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

/* --------------------------------------------------------------------------
   Reduced motion — every zoom, lift and rotation here is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.bp-theme .mr-btn,
    body.bp-theme .bp-hero__petal,
    body.bp-theme .bp-occasion__img,
    body.bp-theme .bp-cta__btn,
    body.bp-theme .bp-article__media img,
    body.bp-theme .mr-card__media img,
    body.bp-theme .mr-tile__img,
    body.bp-theme .mr-promo__img {
        transition: none;
    }

    body.bp-theme .bp-hero__figure:hover .bp-hero__petal { transform: rotate(3deg); }

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

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frames): the hero stacks copy-over-photo,
   the occasion tiles run two-up (the row-cols grid already does), the
   collections medallions shrink and the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.bp-theme .bp-hero__grid { grid-template-columns: 1fr; }
    body.bp-theme .bp-hero__media { aspect-ratio: 4 / 3; }
    body.bp-theme .bp-hero__petal { inset: -0.75rem; border-radius: 1.75rem; }
    body.bp-theme .mr-promo { aspect-ratio: 4 / 3; }
}

@media (max-width: 575.98px) {
    body.bp-theme .bp-cta__form { flex-direction: column; }
    body.bp-theme .bp-cta__btn { width: 100%; }
    body.bp-theme .bp-cat__disc { width: 6rem; height: 6rem; }
    body.bp-theme .bp-occasion__title { font-size: 0.92rem; bottom: 1rem; }
    body.bp-theme .bp-promise__title { letter-spacing: 0; }
}