/*
 * =====================================================
 * THEME: rb
 * Reckitt Brand — Magenta, Coral & Steel Blue
 * Inspired by reckitt.com (current brand identity)
 * =====================================================
 * To activate: set "Site": { "Theme": "rb" } in appsettings.json
 *
 * Reckitt palette (observed from reckitt.com):
 *   Reckitt Magenta  #CC0066  — logo spiral, nav CTAs, all action buttons
 *   Reckitt Coral    #F04E37  — gradient accent / secondary highlight colour
 *   Steel Blue       #3E6070  — footer background (muted teal-grey)
 *   Warm White       #FAF5F7  — light section backgrounds (slight warm tint)
 */

:root {
    /* --- Brand colours --- */
    --green:  #CC0066;   /* Primary — Reckitt Magenta (buttons, links, active) */
    --yellow: #F04E37;   /* Accent  — Reckitt Coral   (badges, hover, alerts)  */

    /* --- Surface colours --- */
    --gray:   #FAF5F7;   /* Light section background (warm neutral tint)       */
    --footer: #3E6070;   /* Reckitt Steel Blue footer                          */

    /* --- Text colours --- */
    --title:  #1A1A2A;   /* Headings — near-black                              */
    --body:   #4A4A5A;   /* Body copy — dark charcoal-grey                     */

    /* --- Supporting UI colours --- */
    --rating: #F04E37;   /* Star ratings — coral                               */
    --red:    #F04E37;   /* Danger / sale alert — coral                        */
    --red2:   #CC0066;   /* Alternate — magenta                                */
    --orange: #F04E37;   /* Badge variant — coral                              */
    --blue:   #3E6070;   /* Badge variant — steel blue                         */
}

/* ── Page title banner ────────────────────────────────────────────────────────
 * VegShop's default theme uses bg.svg which is hardcoded to its green/orange
 * palette.  For the rb theme we replace it with a pure-CSS gradient built from
 * the rb brand colours so the tint stays on-brand without needing a new asset.
 *
 * Replicates the same visual recipe as bg.svg:
 *   • warm-white base (--gray = #FAF5F7)
 *   • 10% opacity magenta → coral → transparent left-to-right overlay
 *   • subtle repeating grid lines at 3% opacity (approximated with CSS)
 * ──────────────────────────────────────────────────────────────────────────── */
.banner_style_2 {
    background-color: #FAF5F7;
    background-image:
        /* faint vertical grid lines at ~61 px intervals — mirrors the SVG grid */
        repeating-linear-gradient(
            to right,
            rgba(204, 0, 102, 0.03) 0px,
            rgba(204, 0, 102, 0.03) 1px,
            transparent            1px,
            transparent            61px
        ),
        /* brand gradient overlay: magenta left → coral centre → transparent right */
        linear-gradient(
            to right,
            rgba(204,  0, 102, 0.10)  0%,
            rgba(240, 78,  55, 0.07) 50%,
            rgba(255, 255, 255, 0)  100%
        );
}