/* ==========================================================================
   Blush Bar — playful-polished storefront for makeup & cosmetics.

   Ported from the Stitch "Blush Bar" design (the design system lives at
   docs/templates/pending/stitch_35_blush_bar_e_commerce_homepage/…/blush_bar/DESIGN.md):
   a "Playful Polished" narrative — Soft Minimalism punctuated by high-gloss
   product photography — on a Powder Pink canvas (#FDF0F3) that "replaces harsh
   whites to make the digital experience feel more like a physical vanity",
   with Deep Plum for authority/actions and an energetic Coral for highlights.
   Pure white cards "pop off the background", shadows are diffused and tinted
   with plum, product cards take a 16px radius and buttons/inputs go full pill.
   Poppins SemiBold is the brand voice (headlines + product titles); Inter is
   the workhorse for UI, body copy and "Rs." prices. Both families are the
   export's own choices and both sit on the curated allowlist — nothing
   substituted.

   This theme OWNS the hero / promo (bento) / featured / shade-finder (new) /
   categories / journal / newsletter home sections (bb-* markup) and INHERITS
   Modern Retail's header, footer, trust + brands home partials, the product
   card, and every functional page (product, category, cart, checkout, account,
   search, blog…). This stylesheet therefore has two jobs:

     (a) style the NEW `bb-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the powder-pink palette, softening cards to
         16px and inputs/buttons to the pill shape language, and fixing every
         place the base paints the ACCENT as text/icon (see CONTRAST below).

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

   ---------------------------------------------------------------------------
   CONTRAST — measured against the WCAG relative-luminance formula. Do not
   "simplify" these back to the raw accent token without re-checking:

     · primary_color is Deep Plum #6d2242 — a DARK primary, so every base rule
       that fills with --bs-primary and hardcodes `color:#fff` on top
       (.mr-btn--primary, .mr-badge, .mr-card__quick, .mr-page.is-active,
       .mr-acct-avatar, .mr-step, .btn-primary, .mr-social:hover…) measures
       10.72:1 and needed NO guard block. This theme deliberately avoids the
       light-primary trap that cost pulse ~12 broken inherited rules.
     · accent_color is Coral #f2766b, which is LIGHT: as TEXT it is only
       2.77:1 on white and white-on-coral is 2.77:1 too — it fails AA for text
       and even the 3:1 UI-component floor. Coral is therefore used ONLY as a
       FILL paired with dark ink (the newsletter band, the journal chip tint).
       Every base rule that painted --ll-accent as text or as a small icon
       (.mr-eyebrow, .mr-ulink:hover, .mr-nav-link.is-active,
       .mr-icon-btn:hover, .mr-badge--wish, .mr-card__sale,
       .mr-card__wish.is-active, .mr-card__title a:hover, .mr-trust svg,
       .mr-crumbs a:hover, .mr-cart-row__title a:hover,
       .mr-article__title a:hover, .mr-tabs .nav-link.active border, the
       focus-visible outline) is re-pointed to --bb-coral-ink.
     · --bb-coral-ink #a43b34 is the text-safe coral sibling and is the
       export's OWN rendered `secondary` colour (its tailwind config sets
       secondary: #a43b34 while DESIGN.md's prose names the lighter #F2766B —
       the rendered value wins for text roles). Measured 6.46:1 on white and
       5.82:1 on the powder-pink canvas.
     · Body ink is --bb-plum-deep #510a2c, a LITERAL (never bound to the
       accent token — a merchant editing "accent" must not recolour body
       copy): 13.2:1 on the pink canvas.
     · --mr-soft was darkened to #655055 (4.94:1 on pink). The export's own
       `outline` #857277 measures only 4.05:1 and --mr-soft carries small text
       (card eyebrows, struck-through prices, breadcrumbs, step labels).
     · The HERO scrim keeps a HIGH powder-pink opacity (.97 → .93) across the
       copy zone rather than the export's /80 → transparent. It is never
       removed: it is the only thing guaranteeing the plum headline, the
       coral-ink eyebrow and the muted lead stay legible over an arbitrary
       merchant photo. Worst case (a pure-black upload) measures h1 11.3:1,
       eyebrow 4.99:1, lead 7.25:1; a bright upload only raises all three.
     · The NEWSLETTER band inverts the export's own choice: Stitch renders
       white text on coral (#ff8075), which is 2.44:1 and fails even the
       large-text floor. The band keeps its coral gradient but carries
       PLUM-DEEP ink instead (5.30:1 on the darkest stop, 6.64:1 on the
       lightest), with a plum FILL + white label on the Subscribe pill
       (14.68:1) as the focal point — the export's own button treatment.
     · The plum FOOTER needs explicit light inks because the base footer
       renders .mr-muted / .mr-soft (dark) on what is normally a light band:
       re-inked to rgba(255,255,255,.72/.70) = 6.31:1 / 6.10:1. Column
       headings use .72 rather than the export's opacity-60 (4.7:1) because
       they are small bold caps, not large text.
   ========================================================================== */

body.bb-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --bb-plum: var(--bs-primary, #6d2242);
    --bb-plum-rgb: var(--bs-primary-rgb, 109, 34, 66);
    --bb-coral: var(--ll-accent, #f2766b);
    --bb-coral-rgb: var(--bs-warning-rgb, 242, 118, 107);
    --bb-radius: var(--ll-btn-radius, 2rem);
    --bb-font-head: var(--ll-font-headings, "Poppins"), system-ui, -apple-system, sans-serif;
    --bb-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Text-safe siblings — FIXED literals, independent of the customizer.
       See the CONTRAST note: the raw coral accent fails as text/icon, and ink
       must never follow a merchant's accent edit. */
    --bb-plum-deep: #510a2c; /* the export's `primary` — body/heading ink */
    --bb-coral-ink: #a43b34; /* the export's rendered `secondary` — text coral */

    /* Blush Bar palette */
    --bb-pink: #fdf0f3; /* DESIGN.md Background — "Powder Pink" canvas */
    --bb-white: #ffffff; /* DESIGN.md: cards/containers pop in pure white */
    --bb-band: #fbf2f5; /* soft pink section band */
    --bb-fill: #f6e6ea; /* placeholder / status fills */
    --bb-border: #f2dfe4; /* hairlines on pink */
    --bb-border-strong: #d8c1c6; /* the export's outline-variant */
    --bb-pale: #ffd9e3; /* primary-fixed — pale pink ink on plum bands */

    /* Re-point the inherited base neutrals at the powder-pink palette so every
       inherited mr-* surface (bands, borders, fills, muted text, radii)
       follows — this single block restyles all ~24 inherited pages. */
    --mr-ink: var(--bb-plum-deep);
    --mr-muted: #534247; /* the export's on-surface-variant — 8.46:1 on pink */
    --mr-soft: #655055; /* darkened from the export's #857277 (4.05:1) */
    --mr-surface: var(--bb-white); /* header / inputs / panels stay crisp white */
    --mr-band: var(--bb-band);
    --mr-band-alt: var(--bb-white); /* media wells + tiles are white, per DESIGN.md */
    --mr-fill: var(--bb-fill);
    --mr-border: var(--bb-border);
    --mr-border-strong: var(--bb-border-strong);
    --mr-radius: 1rem; /* DESIGN.md: "Product Cards must use a 16px radius" */
    --mr-gold: var(--bb-coral-ink); /* star ratings — raw coral is 2.77:1 */
    /* DESIGN.md: "extremely diffused, low-opacity shadows tinted with the
       primary Plum … rgba(109, 34, 66, 0.08) with a high blur radius (20px+)". */
    --mr-shadow: 0 4px 20px rgba(var(--bb-plum-rgb), 0.08);

    /* Bootstrap's own link colour token. Platform-wide gotcha: Bootstrap 5.3's
       `a` rule reads --bs-link-color-RGB, not --bs-link-color, and
       theme-vars.blade.php only sets the latter — without the triplet, bare
       anchors (CMS pages, blog body copy, the quick-view "Category" link) and
       .btn-link fall through to factory blue. Set here rather than with a bare
       `body.bb-theme a { color }` catch-all, which would out-specify
       .mr-btn--primary's white label (0,1,0) and repaint every <a>-based
       primary CTA to ink. */
    --bs-link-color: var(--bb-plum);
    --bs-link-color-rgb: 109, 34, 66;
    /* .bg-light (the shared review card + category facet headings) is a cool
       grey by default — warm it so it sits on the pink canvas. */
    --bs-secondary-bg: var(--bb-band);

    background-color: var(--bb-pink);
    color: var(--bb-plum-deep);
    font-family: var(--bb-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typography — Poppins SemiBold is the brand voice (DESIGN.md assigns
   fontWeight 600 to display-lg, headline-md AND headline-sm), Inter carries
   body/UI/price. Headings stay plum ink; only eyebrows, links and prices
   carry brand colour.
   -------------------------------------------------------------------------- */
body.bb-theme h1, body.bb-theme h2, body.bb-theme h3,
body.bb-theme h4, body.bb-theme h5, body.bb-theme h6,
body.bb-theme .mr-display, body.bb-theme .mr-headline {
    font-family: var(--bb-font-head);
    color: var(--bb-plum-deep);
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.bb-theme .mr-display { line-height: 1.2; }

/* label-caps: Inter 700, 12px, 0.05em — the export's label role. */
body.bb-theme .mr-eyebrow {
    font-family: var(--bb-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--bb-coral-ink);
}

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

body.bb-theme .mr-card__price {
    font-family: var(--bb-font-body);
    font-weight: 600;
    color: var(--bb-plum-deep);
}

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

/* --------------------------------------------------------------------------
   Buttons — full pill (the button_radius token is 2rem, never 9999px: it also
   drives --bs-border-radius, so cards/inputs get their own softer radius
   below). Plum fill + white label; the coral-ink keyline carries the
   secondary/ghost role (DESIGN.md: "Secondary/Ghost: full pill, Coral border
   2px, Coral text" — using the text-safe coral sibling).
   -------------------------------------------------------------------------- */
body.bb-theme .mr-btn {
    font-family: var(--bb-font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

body.bb-theme .mr-btn--primary {
    background-color: var(--bb-plum);
    border-color: var(--bb-plum);
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--bb-plum-rgb), 0.22);
}

/* The base hover is `filter: brightness(1.18)`, which LIGHTENS a dark plum
   toward the failing coral range. The export darkens instead
   (hover:bg-primary = #510a2c, 14.68:1 with the white label). */
body.bb-theme .mr-btn--primary:hover,
body.bb-theme .mr-btn--primary:focus-visible {
    filter: none;
    background-color: var(--bb-plum-deep);
    border-color: var(--bb-plum-deep);
    color: #fff;
    transform: translateY(-1px);
}

body.bb-theme .mr-btn--outline {
    border-width: 2px;
    border-color: var(--bb-coral-ink);
    color: var(--bb-coral-ink);
}

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

body.bb-theme .mr-btn--light { color: var(--bb-plum); }
/* Base hover fills with the raw accent + #fff (2.77:1). */
body.bb-theme .mr-btn--light:hover { background-color: var(--bb-plum-deep); color: #fff; }
body.bb-theme .mr-btn--on-dark:hover { color: var(--bb-plum); }
body.bb-theme .mr-btn--ghost { color: var(--bb-coral-ink); }

body.bb-theme .bb-btn-pill { padding: 1.05rem 2.5rem; font-size: 0.8rem; }

/* Coral-ink ghost pill — the hero's secondary "Find Your Foundation" action
   (the export's 2px border-secondary / text-secondary pill; hover fills and
   flips the label to white at 6.46:1). */
body.bb-theme .bb-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(1.05rem - 2px) calc(2.5rem - 2px);
    border: 2px solid var(--bb-coral-ink);
    border-radius: var(--bb-radius);
    background: transparent;
    color: var(--bb-coral-ink);
    font-family: var(--bb-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

body.bb-theme .bb-btn-ghost:hover {
    background-color: var(--bb-coral-ink);
    color: #fff;
    transform: translateY(-1px);
}

body.bb-theme .mr-ulink:hover { color: var(--bb-coral-ink); border-color: var(--bb-coral-ink); }

body.bb-theme a:focus-visible,
body.bb-theme button:focus-visible,
body.bb-theme input:focus-visible {
    outline-color: var(--bb-coral-ink);
}

/* --------------------------------------------------------------------------
   Inputs — softer 0.75rem radius rather than the 2rem button pill (the token
   also drives --bs-border-radius, which would balloon every stacked checkout
   field and the option list). NEVER a `padding` SHORTHAND on .form-select:
   it eats Bootstrap's reserved 2.25rem caret gutter and the option text runs
   under the arrow. The base restores that gutter; re-asserted here defensively
   because this stylesheet loads after it.
   -------------------------------------------------------------------------- */
body.bb-theme .form-control,
body.bb-theme .form-select {
    background-color: var(--bb-white);
    border-color: var(--bb-border-strong);
    border-radius: 0.75rem;
    color: var(--bb-plum-deep);
}

body.bb-theme .form-select { padding-inline-end: 2.25rem; }

/* Base focus rings hardcode a blue rgba(0,140,199,…) — re-tint to plum. */
body.bb-theme .form-control:focus,
body.bb-theme .form-select:focus {
    border-color: var(--bb-plum);
    box-shadow: 0 0 0 3px rgba(var(--bb-plum-rgb), 0.16);
}

body.bb-theme .form-control::placeholder { color: var(--mr-soft); }

/* DESIGN.md: "Checkboxes: rounded squares (4px radius)". */
body.bb-theme .form-check-input { border-radius: 0.25rem; border-color: var(--bb-border-strong); }
body.bb-theme .form-check-input:checked { background-color: var(--bb-plum); border-color: var(--bb-plum); }

/* --------------------------------------------------------------------------
   Announcement + header — the inherited logo-left single-row chrome already
   matches the export's structure (logo left, inline nav, search/account/cart
   icons right), so there is NO header override; it is restyled in place.
   The band fills PLUM (the export's bg-primary-container + text-on-primary,
   10.72:1); the base default fills with a darkened accent instead.
   -------------------------------------------------------------------------- */
body.bb-theme .mr-announce {
    background-color: var(--bb-plum);
    background-image: none;
    color: #fff;
    font-family: var(--bb-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* The export's header: bg-surface/90 + backdrop-blur-md + a plum-tinted
   shadow rather than a hairline border. */
body.bb-theme .mr-header {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 0;
    box-shadow: 0 4px 20px rgba(var(--bb-plum-rgb), 0.08);
}

body.bb-theme .mr-logo { font-family: var(--bb-font-head); font-weight: 600; color: var(--bb-plum-deep); }

body.bb-theme .mr-nav-link {
    font-family: var(--bb-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mr-muted);
}

body.bb-theme .mr-nav-link:hover { color: var(--bb-coral-ink); }

/* The export's active nav item: bold plum label over a 2px coral keyline. */
body.bb-theme .mr-nav-link.is-active {
    color: var(--bb-plum-deep);
    font-weight: 700;
    border-bottom-color: var(--bb-coral-ink);
}

body.bb-theme .mr-search input {
    background: var(--bb-band);
    border-color: var(--bb-border);
    border-radius: var(--bb-radius);
}

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

body.bb-theme .mr-icon-btn { color: var(--bb-plum-deep); }
body.bb-theme .mr-icon-btn:hover { color: var(--bb-coral-ink); }
/* Cart count: plum fill, white text (10.72:1). The wishlist badge defaults to
   the raw accent + white (2.77:1) — re-inked to the coral sibling (6.46:1). */
body.bb-theme .mr-badge { background-color: var(--bb-plum); }
body.bb-theme .mr-badge--wish { background-color: var(--bb-coral-ink); }

body.bb-theme .offcanvas { background-color: var(--bb-pink); }

/* --------------------------------------------------------------------------
   Hero — full-bleed portrait with the copy overlaid left. Unlike the base's
   dark scrim + white type, the export veils the photo in POWDER PINK and sets
   the type in plum/coral. The veil is re-tinted, never removed — see the
   CONTRAST note for the measured worst case over a black upload.
   -------------------------------------------------------------------------- */
body.bb-theme .bb-hero { min-height: clamp(520px, 85vh, 780px); background-color: var(--bb-pink); }

body.bb-theme .bb-hero__scrim {
    background: linear-gradient(
        90deg,
        rgba(253, 240, 243, 0.97) 0%,
        rgba(253, 240, 243, 0.93) 46%,
        rgba(253, 240, 243, 0.45) 72%,
        rgba(253, 240, 243, 0.08) 100%
    );
}

body.bb-theme .bb-hero__copy { max-width: 40rem; }

body.bb-theme .bb-hero__eyebrow {
    font-family: var(--bb-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bb-coral-ink);
    margin-bottom: 1rem;
}

/* Must out-specify the base `.mr-hero .mr-hero__copy h1 { color:#fff }`
   (0,2,1) — this selector is (0,2,2). White type would be invisible on the
   pink veil. */
body.bb-theme .bb-hero .bb-hero__copy .bb-hero__title {
    font-family: var(--bb-font-head);
    font-size: clamp(2.25rem, 4.6vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--bb-plum-deep);
    margin-bottom: 2rem;
}

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

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — the export stacks a coral icon over a
   single small uppercase caption, centred, on a WHITE band; the base renders
   icon-left / text-right with a supporting line.
   -------------------------------------------------------------------------- */
body.bb-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
}

/* Raw coral would be 2.77:1 even as a 30px glyph (below the 3:1 icon floor). */
body.bb-theme .mr-trust svg { color: var(--bb-coral-ink); width: 28px; height: 28px; }

body.bb-theme .mr-trust strong {
    font-family: var(--bb-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--bb-plum-deep);
}

body.bb-theme .mr-trust span { display: block; }

/* --------------------------------------------------------------------------
   Bento promo tiles — the export's asymmetric grid: tile 1 large (7 of 12
   columns, spanning both rows) with a title, a supporting line and an
   underlined caps link; tiles 2 and 3 stack beside it at half height. The
   3-item promo schema is unchanged — only the SIZING lives here.
   -------------------------------------------------------------------------- */
body.bb-theme .bb-bento__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 288px;
    gap: 24px;
}

body.bb-theme .bb-bento__tile {
    position: relative;
    grid-column: span 5;
    overflow: hidden;
    border-radius: var(--mr-radius);
    background: var(--bb-fill);
    text-decoration: none;
    box-shadow: var(--mr-shadow);
}

body.bb-theme .bb-bento__tile--lead { grid-column: span 7; grid-row: span 2; }
/* A merchant who keeps only the lead tile gets a full-width banner instead of
   a 7-column tile with dead space beside it. */
body.bb-theme .bb-bento__tile--lead:only-child { grid-column: span 12; }

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

body.bb-theme .bb-bento__placeholder {
    background: linear-gradient(135deg, var(--bb-fill), var(--bb-border-strong));
}

body.bb-theme .bb-bento__tile:hover .bb-bento__img { transform: scale(1.05); }

/* The captions are white on photography, so each tile keeps a scrim — the
   lead tile's is stronger because it carries three lines of copy. */
body.bb-theme .bb-bento__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 6, 17, 0.05) 30%, rgba(31, 6, 17, 0.62) 100%);
    transition: background 0.3s ease;
}

body.bb-theme .bb-bento__tile:hover .bb-bento__scrim {
    background: linear-gradient(180deg, rgba(31, 6, 17, 0.2) 20%, rgba(31, 6, 17, 0.72) 100%);
}

body.bb-theme .bb-bento__cap {
    position: absolute;
    inset-inline: clamp(1.5rem, 3vw, 2.5rem);
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

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

body.bb-theme .bb-bento__body {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 34ch;
}

body.bb-theme .bb-bento__cta {
    font-family: var(--bb-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-bottom: 0.2rem;
    margin-top: 0.35rem;
}

/* Hover keeps the caption's own safe white rather than swapping to the accent:
   coral over a scrimmed photo can land as low as 2.4:1 on a bright upload. */
body.bb-theme .bb-bento__tile:hover .bb-bento__cta { color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   Section header + "View All" link — the export pushes an underlined
   see-all link to the right of the eyebrow/heading block.
   -------------------------------------------------------------------------- */
body.bb-theme .bb-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

body.bb-theme .bb-sec-head__title { font-size: clamp(1.75rem, 3.2vw, 2rem); }

body.bb-theme .bb-view-all {
    font-family: var(--bb-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bb-plum-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--bb-plum-deep);
    padding-bottom: 0.25rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body.bb-theme .bb-view-all:hover { color: var(--bb-coral-ink); border-color: var(--bb-coral-ink); }

body.bb-theme .bb-featured { background-color: var(--bb-band); }

/* --------------------------------------------------------------------------
   Find Your Match — blush-bar-ONLY child section: a full-width deep-plum band
   with a soft radial pink bloom, large circular shade swatches ringed in
   translucent pale pink, and an underlined caps link with a trailing arrow.
   Every ink here is measured against the plum fill (see CONTRAST).
   -------------------------------------------------------------------------- */
body.bb-theme .bb-shade {
    position: relative;
    overflow: hidden;
    background-color: var(--bb-plum);
    padding-block: clamp(3.5rem, 8vw, 5rem);
}

/* Decorative bloom — the export's radial-gradient swatch mask at 10%. */
body.bb-theme .bb-shade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(255, 176, 202, 0.22) 0%, transparent 62%);
    pointer-events: none;
}

body.bb-theme .bb-shade > * { position: relative; z-index: 1; }

body.bb-theme .bb-shade__title {
    font-family: var(--bb-font-head);
    font-size: clamp(1.75rem, 3.2vw, 2rem);
    font-weight: 600;
    color: var(--bb-pale); /* 8.32:1 on plum */
    margin-bottom: 3rem;
}

body.bb-theme .bb-shade__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2rem, 6vw, 3.5rem);
}

body.bb-theme .bb-shade__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
}

body.bb-theme .bb-shade__ring {
    display: block;
    width: clamp(72px, 9vw, 96px);
    aspect-ratio: 1 / 1;
    padding: 4px;
    border: 2px solid rgba(255, 217, 227, 0.35);
    border-radius: 50%;
    margin-bottom: 0.75rem;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

body.bb-theme .bb-shade__item:hover .bb-shade__ring {
    border-color: var(--bb-pale);
    transform: translateY(-3px);
}

body.bb-theme .bb-shade__dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Rendered when the merchant's swatch value is not a valid hex — see the
   partial's whitelist. */
body.bb-theme .bb-shade__dot--empty {
    background: linear-gradient(135deg, rgba(255, 217, 227, 0.5), rgba(255, 176, 202, 0.25));
}

body.bb-theme .bb-shade__name {
    font-family: var(--bb-font-head);
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff; /* 10.72:1 on plum */
}

body.bb-theme .bb-shade__note {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8); /* 7.42:1 on plum */
}

body.bb-theme .bb-shade__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    font-family: var(--bb-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bb-pale);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 217, 227, 0.5);
    padding-bottom: 0.3rem;
    transition: gap 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

body.bb-theme .bb-shade__link:hover { gap: 1rem; color: #fff; border-color: #fff; }
body.bb-theme .bb-shade__link svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Shop by Category — perfectly circular photo tiles on a white band with a
   centred tracked-out caps label beneath (DESIGN.md: "Category Card — large,
   circular imagery with Poppins SemiBold text centered underneath"), ringed
   in coral on hover. Fully data-driven from the store's real categories.
   -------------------------------------------------------------------------- */
body.bb-theme .bb-categories { background-color: var(--bb-white); }

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

body.bb-theme .bb-cat__frame {
    display: block;
    width: clamp(120px, 15vw, 200px);
    aspect-ratio: 1 / 1;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bb-band);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

body.bb-theme .bb-cat:hover .bb-cat__frame {
    border-color: var(--bb-coral);
    box-shadow: 0 12px 28px rgba(var(--bb-plum-rgb), 0.14);
    transform: translateY(-3px);
}

body.bb-theme .bb-cat__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

body.bb-theme .bb-cat__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-fill), var(--bb-border-strong));
}

body.bb-theme .bb-cat__label {
    font-family: var(--bb-font-head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bb-plum-deep);
}

/* --------------------------------------------------------------------------
   Journal — left-aligned heading, 16px card media, and the post's category
   label as a soft-coral PILL CHIP (the export's bg-secondary/10 +
   text-secondary). Coral-ink on the 14%-coral tint measures ~5.9:1.
   -------------------------------------------------------------------------- */
/* The gap lives on the media, not the chip, so a post with no category label
   still clears the image instead of butting its title against it. */
body.bb-theme .bb-journal__media { box-shadow: var(--mr-shadow); margin-bottom: 1.5rem; }

body.bb-theme .bb-journal__chip {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.32rem 0.85rem;
    border-radius: 9999px;
    background: rgba(var(--bb-coral-rgb), 0.14);
    color: var(--bb-coral-ink);
    font-family: var(--bb-font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.bb-theme .bb-journal__title { font-size: 1.15rem; }
body.bb-theme .mr-article__title a:hover { color: var(--bb-coral-ink); }

/* --------------------------------------------------------------------------
   Newsletter — "The Beauty Memo": a coral gradient band with a large blurred
   decorative orb bottom-left, centred Poppins display heading, a white pill
   email field and a plum pill Subscribe button. The ink is PLUM, not the
   export's white (2.44:1 on coral) — see the CONTRAST note.
   -------------------------------------------------------------------------- */
body.bb-theme .bb-newsletter {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bb-coral) 0%, #ff8f80 100%);
    padding-block: clamp(3.5rem, 8vw, 5rem);
}

body.bb-theme .bb-newsletter__orb {
    position: absolute;
    bottom: -5rem;
    left: -5rem;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    filter: blur(60px);
    pointer-events: none;
}

body.bb-theme .bb-newsletter__inner { position: relative; z-index: 1; }

body.bb-theme .bb-newsletter__eyebrow { color: var(--bb-plum-deep); }

body.bb-theme .bb-newsletter__title {
    font-family: var(--bb-font-head);
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bb-plum-deep); /* 5.30-6.64:1 across the gradient */
}

body.bb-theme .bb-newsletter__body {
    color: var(--bb-plum-deep);
    font-size: 1.05rem;
    max-width: 44ch;
}

body.bb-theme .bb-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 32rem;
}

body.bb-theme .bb-newsletter__form input {
    flex: 1 1 15rem;
    border: 0;
    border-radius: var(--bb-radius);
    padding: 1rem 1.75rem;
    background: var(--bb-white);
    color: var(--bb-plum-deep);
    font-family: var(--bb-font-body);
}

body.bb-theme .bb-newsletter__form input::placeholder { color: var(--mr-soft); }

body.bb-theme .bb-newsletter__form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

/* Plum fill + white label (14.68:1) — the export's own bg-primary-container
   Subscribe treatment, and the band's focal point. */
body.bb-theme .bb-newsletter__submit {
    border: 0;
    border-radius: var(--bb-radius);
    padding: 1rem 2.5rem;
    background: var(--bb-plum);
    color: #fff;
    font-family: var(--bb-font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: not-allowed; /* stub form — always disabled */
    box-shadow: 0 10px 24px rgba(var(--bb-plum-rgb), 0.24);
}

body.bb-theme .bb-newsletter__note { color: var(--bb-plum-deep); font-size: 0.78rem; margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export shows NO card box: a white
   16px media well carrying the soft plum shadow, with the title and price
   flush beneath on the pink canvas. That is exactly the base's borderless
   shape, so NO inset-text padding is required (the shadow/border sits on
   .mr-card__media, never on .mr-card itself).
   -------------------------------------------------------------------------- */
body.bb-theme .mr-card__media {
    background: var(--bb-white);
    box-shadow: 0 4px 20px rgba(var(--bb-plum-rgb), 0.05);
}

body.bb-theme .mr-card__title a:hover { color: var(--bb-coral-ink); }

/* .mr-card__wish (heart) and .mr-card__quickview (eye) are SIBLINGS with
   different names — restyle together and check BOTH states. Inked with the
   theme's own text pair, which is guaranteed legible: plum-deep on the near-
   white glass measures ~14.7:1. The raw coral accent would wash out badly on
   a near-white circle (2.77:1). .mr-card__quick is the THIRD, separate
   slide-up Add-to-Cart bar, handled below. */
body.bb-theme .mr-card__wish,
body.bb-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.88);
    color: var(--bb-plum-deep);
}

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

/* The saved-heart state defaults to the raw accent (2.77:1 on the glass). */
body.bb-theme .mr-card__wish.is-active { color: var(--bb-coral-ink); }

body.bb-theme .mr-card__quick {
    background: var(--bb-plum);
    color: #fff;
    font-family: var(--bb-font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Legacy sale ribbon (the live card uses the platform-wide .mr-card__badge,
   which theme-vars fills red/white) — re-inked anyway so nothing renders
   white-on-raw-coral. */
body.bb-theme .mr-card__sale { background-color: var(--bb-coral-ink); }

body.bb-theme .mr-card__eyebrow { font-family: var(--bb-font-body); letter-spacing: 0.1em; }

/* --------------------------------------------------------------------------
   Inherited chrome, continued — shop filters, pagination, account sidebar,
   checkout stepper, cart rows, PDP tabs/gallery, breadcrumbs, rail buttons.
   Because primary_color is a DARK plum, every base rule that fills with
   --bs-primary and stacks white text on it already measures 10.72:1 and is
   left alone; only the rules that paint the raw ACCENT as text/border need
   re-pointing.
   -------------------------------------------------------------------------- */
body.bb-theme .mr-crumbs a:hover { color: var(--bb-coral-ink); }
body.bb-theme .mr-cart-row__title a:hover { color: var(--bb-coral-ink); }
body.bb-theme .mr-tabs .nav-link.active { color: var(--bb-plum-deep); border-bottom-color: var(--bb-coral-ink); }
body.bb-theme .mr-gallery__thumb { border-radius: 0.6rem; }
body.bb-theme .mr-gallery__thumb.is-active { border-color: var(--bb-plum); }
body.bb-theme .mr-status { background: var(--bb-fill); color: var(--mr-muted); }
body.bb-theme .mr-brandstrip span { font-family: var(--bb-font-head); font-weight: 600; }

/* --------------------------------------------------------------------------
   Footer — the export's deep-plum footer. The base footer is a LIGHT band, so
   its .mr-muted / .mr-soft / .mr-divider / .mr-btn--primary children all need
   explicit light inks here or they render dark-on-dark (the same failure mode
   that shipped on the dark-canvas themes for two weeks).
   -------------------------------------------------------------------------- */
body.bb-theme .mr-footer {
    background-color: var(--bb-plum);
    border-top: 0;
    color: #fff;
}

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

body.bb-theme .mr-footer h4 {
    font-family: var(--bb-font-body);
    color: rgba(255, 255, 255, 0.72); /* 6.31:1 */
    letter-spacing: 0.12em;
}

body.bb-theme .mr-footer a { color: rgba(255, 255, 255, 0.8); } /* 7.42:1 */
body.bb-theme .mr-footer a:hover { color: var(--bb-pale); }
body.bb-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.72); }
body.bb-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.7); } /* 6.10:1 */
body.bb-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.16); }

/* A plum primary button on the plum footer would be invisible — flip it to a
   white pill with plum ink (14.68:1). */
body.bb-theme .mr-footer .mr-btn--primary {
    background-color: #fff;
    border-color: #fff;
    color: var(--bb-plum-deep);
    box-shadow: none;
}

body.bb-theme .mr-footer .mr-btn--primary:hover {
    background-color: var(--bb-pale);
    border-color: var(--bb-pale);
    color: var(--bb-plum-deep);
}

body.bb-theme .mr-social { border-color: rgba(255, 255, 255, 0.28); color: #fff; }

body.bb-theme .mr-social:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--bb-plum-deep);
}

/* --------------------------------------------------------------------------
   Respect reduced-motion — neutralise both the transitions AND the hover
   transforms/scales introduced above (transition:none alone still lets a
   hover transform apply instantly, which is still motion).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.bb-theme .mr-btn,
    body.bb-theme .bb-btn-ghost,
    body.bb-theme .bb-bento__img,
    body.bb-theme .bb-bento__scrim,
    body.bb-theme .bb-shade__ring,
    body.bb-theme .bb-shade__link,
    body.bb-theme .bb-cat__frame,
    body.bb-theme .mr-card__media img,
    body.bb-theme .mr-tile__img,
    body.bb-theme .mr-article__media img {
        transition: none;
    }

    body.bb-theme .mr-btn--primary:hover,
    body.bb-theme .bb-btn-ghost:hover,
    body.bb-theme .bb-bento__tile:hover .bb-bento__img,
    body.bb-theme .bb-shade__item:hover .bb-shade__ring,
    body.bb-theme .bb-cat:hover .bb-cat__frame,
    body.bb-theme .mr-card:hover .mr-card__media img,
    body.bb-theme .mr-tile:hover .mr-tile__img,
    body.bb-theme .mr-article__media:hover img {
        transform: none;
    }

    body.bb-theme .bb-shade__link:hover { gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frames): smaller hero display type, a
   single-column bento, tighter shade/category circles, a stacked newsletter
   form.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.bb-theme .bb-hero { min-height: 60vh; }
    body.bb-theme .bb-hero .bb-hero__copy .bb-hero__title { font-size: 2rem; }
    /* The veil must cover the full width once the copy is no longer inset. */
    body.bb-theme .bb-hero__scrim {
        background: linear-gradient(
            180deg,
            rgba(253, 240, 243, 0.9) 0%,
            rgba(253, 240, 243, 0.86) 55%,
            rgba(253, 240, 243, 0.94) 100%
        );
    }

    body.bb-theme .bb-bento__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 16px; }
    body.bb-theme .bb-bento__tile { grid-column: 1 / -1; }
    body.bb-theme .bb-bento__tile--lead { grid-row: auto; min-height: 320px; }

    body.bb-theme .bb-shade__grid { gap: 1.75rem; }
    body.bb-theme .bb-shade__ring { width: 64px; }
    body.bb-theme .bb-shade__title { margin-bottom: 2rem; }
    body.bb-theme .bb-shade__link { margin-top: 2rem; }

    body.bb-theme .bb-cat__frame { width: clamp(96px, 26vw, 140px); }

    body.bb-theme .bb-newsletter__form { flex-direction: column; }
    body.bb-theme .bb-newsletter__form input,
    body.bb-theme .bb-newsletter__submit { width: 100%; }
}